聊天记录导入部分初步实现

src/lib/components/layout/ImportChatsModal.svelte

@@ -0,0 +1,329 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import Modal from '../common/Modal.svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import { extractChatsFromFile } from '$lib/utils/chatImport';
+	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
+
+	export let show = false;
+	export let onImport: (chats: any[]) => Promise<void>;
+
+	let dropActive = false;
+	let loading = false;
+	let importing = false;
+	let filterOpen = true;
+	let errorMsg = '';
+	let fileName = '';
+	let rawChats: any[] = [];
+	let selectedIndices: Set<number> = new Set();
+
+	const resetState = () => {
+		errorMsg = '';
+		fileName = '';
+		rawChats = [];
+		selectedIndices = new Set();
+		filterOpen = true;
+	};
+
+	$: if (!show) {
+		resetState();
+	}
+
+	const parseTxtAsJson = async (file: File) => {
+		const text = await file.text();
+		try {
+			return JSON.parse(text);
+		} catch (error) {
+			throw new Error('纯文本文件需包含有效的 JSON 内容');
+		}
+	};
+
+	const handleFiles = async (files: FileList | File[]) => {
+		if (!files || files.length === 0) return;
+		const file = files[0];
+		loading = true;
+		errorMsg = '';
+		fileName = file.name;
+		try {
+			const ext = file.name.split('.').pop()?.toLowerCase();
+			let chats = null;
+
+			if (ext === 'txt') {
+				chats = await parseTxtAsJson(file);
+			} else {
+				chats = await extractChatsFromFile(file);
+			}
+
+			if (getImportOrigin(chats) === 'openai') {
+				try {
+					chats = convertOpenAIChats(chats);
+				} catch (error) {
+					throw new Error('Failed to convert OpenAI chats');
+				}
+			}
+
+			if (!Array.isArray(chats)) {
+				throw new Error('文件内容需为 JSON 数组');
+			}
+
+			rawChats = chats;
+			selectedIndices = new Set(rawChats.map((_, idx) => idx));
+			filterOpen = true;
+		} catch (error) {
+			console.error(error);
+			errorMsg = error instanceof Error ? error.message : `${error}`;
+			rawChats = [];
+			selectedIndices = new Set();
+		} finally {
+			loading = false;
+		}
+	};
+
+	const toggleRow = (idx: number) => {
+		const next = new Set(selectedIndices);
+		if (next.has(idx)) {
+			next.delete(idx);
+		} else {
+			next.add(idx);
+		}
+		selectedIndices = next;
+	};
+
+	const toggleSelectAll = (checked: boolean) => {
+		selectedIndices = checked ? new Set(rawChats.map((_, idx) => idx)) : new Set();
+	};
+
+	const confirmImport = async () => {
+		if (!rawChats.length) {
+			toast.error('请先上传对话记录文件');
+			return;
+		}
+		const chatsToImport =
+			selectedIndices.size > 0 ? rawChats.filter((_, idx) => selectedIndices.has(idx)) : rawChats;
+
+		if (!chatsToImport.length) {
+			toast.error('未选择任何记录');
+			return;
+		}
+
+		try {
+			importing = true;
+			await onImport(chatsToImport);
+			show = false;
+			toast.success('开始导入筛选后的对话记录');
+		} catch (error) {
+			console.error(error);
+			toast.error(error instanceof Error ? error.message : `${error}`);
+		} finally {
+			importing = false;
+		}
+	};
+
+	const displayRows = () =>
+		rawChats.map((chat, idx) => {
+			const meta = chat?.meta ?? chat?.chat?.meta ?? chat;
+			const title =
+				meta?.title ??
+				chat?.title ??
+				chat?.chat?.title ??
+				meta?.subject ??
+				'未命名对话';
+			const date =
+				meta?.inserted_at ??
+				meta?.created_at ??
+				meta?.updated_at ??
+				chat?.inserted_at ??
+				chat?.created_at ??
+				chat?.updated_at ??
+				'-';
+
+			return { idx, title, date };
+		});
+
+	let fileInputEl: HTMLInputElement;
+</script>
+
+<Modal bind:show size="xl" className="bg-white/95 dark:bg-gray-900/95 rounded-4xl p-1">
+	<div class="p-6 space-y-6 font-primary">
+		<div class="flex items-start justify-between gap-4">
+			<div>
+				<div class="text-lg font-semibold text-gray-900 dark:text-white">对话记录导入中心</div>
+				<div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+					完成准备、筛选后再执行导入，提升成功率与速度。
+				</div>
+			</div>
+			<button
+				class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+				on:click={() => (show = false)}
+				aria-label="关闭导入中心"
+			>
+				✕
+			</button>
+		</div>
+
+		<div class="space-y-4">
+			<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-900/60 p-4">
+				<div class="text-sm font-semibold text-gray-800 dark:text-gray-100 mb-2">
+					1. 准备您的对话记录
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed space-y-1">
+					<p>请确保导出文件格式为 <strong>JSON (.json)</strong> 或 <strong>纯文本 (.txt)</strong>。</p>
+					<p>
+						请前往原平台导出历史对话，如 DeepSeek — 系统设置 — 数据管理 — 导出所有历史对话，
+						ChatGPT — 设置 — 数据管理 — 导出数据。
+					</p>
+					<p>如果导出的文件内容过多或过大，建议使用下方的筛选功能生成新的导入文件，以加快导入速度。</p>
+				</div>
+			</div>
+
+			<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-3">
+				<div class="flex items-center justify-between">
+					<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">2. 筛选记录</div>
+					<button
+						class="text-xs px-3 py-1.5 rounded-full border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-850"
+						on:click={() => (filterOpen = !filterOpen)}
+					>
+						{filterOpen ? '收起高级筛选器' : '高级筛选器'}
+					</button>
+				</div>
+
+				<div
+					class={`border-2 border-dashed rounded-xl p-4 transition ${
+						dropActive
+							? 'border-blue-400 bg-blue-50/70 dark:border-blue-400/80 dark:bg-blue-950/40'
+							: 'border-gray-200 dark:border-gray-800 bg-gray-50/40 dark:bg-gray-900'
+					}`}
+					on:dragover|preventDefault={() => (dropActive = true)}
+					on:dragleave|preventDefault={() => (dropActive = false)}
+					on:drop|preventDefault={(e) => {
+						dropActive = false;
+						handleFiles(e.dataTransfer?.files ?? []);
+					}}
+				>
+					<div class="flex flex-col items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+						<div class="font-medium text-gray-900 dark:text-white">
+							{fileName ? `已选择：${fileName}` : '拖拽文件到此处，或点击上传'}
+						</div>
+						<div class="flex items-center gap-2">
+							<button
+								class="px-3 py-1.5 rounded-lg bg-gray-900 text-white text-xs hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
+								on:click={() => fileInputEl.click()}
+								type="button"
+							>
+								选择文件
+							</button>
+							<div class="text-xs text-gray-500 dark:text-gray-400">
+								支持 .json / .txt，OpenAI 导出支持自动转换
+							</div>
+						</div>
+						{#if loading}
+							<div class="flex items-center gap-2 text-blue-600 dark:text-blue-300">
+								<Spinner className="size-4" />
+								<span>正在解析文件...</span>
+							</div>
+						{/if}
+						{#if errorMsg}
+							<div class="text-xs text-red-500">{errorMsg}</div>
+						{/if}
+					</div>
+					<input
+						bind:this={fileInputEl}
+						type="file"
+						accept=".json,.zip,.txt,application/json"
+						hidden
+						on:change={(e) => handleFiles((e.currentTarget as HTMLInputElement).files)}
+					/>
+				</div>
+
+				{#if filterOpen}
+					<div class="space-y-3">
+						<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
+							<div>
+								总数：{rawChats.length} | 已选：{selectedIndices.size}
+								{selectedIndices.size === 0 && rawChats.length > 0 ? '（未选则默认导入全部）' : ''}
+							</div>
+							<label class="flex items-center gap-2 cursor-pointer select-none">
+								<input
+									type="checkbox"
+									class="accent-blue-600"
+									checked={rawChats.length > 0 && selectedIndices.size === rawChats.length}
+									indeterminate={selectedIndices.size > 0 && selectedIndices.size < rawChats.length}
+									on:change={(e) => toggleSelectAll((e.currentTarget as HTMLInputElement).checked)}
+								/>
+								<span>全选 / 取消全选</span>
+							</label>
+						</div>
+
+						<div class="max-h-64 overflow-auto rounded-xl border border-gray-100 dark:border-gray-800">
+							<table class="w-full text-sm">
+								<thead class="text-left bg-gray-50 dark:bg-gray-900 text-gray-600 dark:text-gray-300">
+									<tr>
+										<th class="w-14 py-2 px-3">选择</th>
+										<th class="py-2 px-3">标题 / 摘要</th>
+										<th class="w-48 py-2 px-3">时间</th>
+									</tr>
+								</thead>
+								<tbody>
+									{#if !rawChats.length}
+										<tr>
+											<td colspan="3" class="py-4 text-center text-gray-500 dark:text-gray-400">
+												请先上传文件以查看可筛选的记录
+											</td>
+										</tr>
+									{:else}
+										{#each displayRows() as row}
+											<tr class="border-t border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-900/60">
+												<td class="py-2 px-3">
+													<input
+														type="checkbox"
+														checked={selectedIndices.has(row.idx)}
+														on:change={() => toggleRow(row.idx)}
+													/>
+												</td>
+												<td class="py-2 px-3">
+													<div class="text-sm text-gray-900 dark:text-white line-clamp-2">
+														{row.title}
+													</div>
+												</td>
+												<td class="py-2 px-3 text-xs text-gray-500 dark:text-gray-400">
+													{row.date}
+												</td>
+											</tr>
+										{/each}
+									{/if}
+								</tbody>
+							</table>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<div class="rounded-2xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-2">
+				<div class="text-sm font-semibold text-gray-800 dark:text-gray-100">3. 导入记录</div>
+				<div class="text-xs text-gray-500 dark:text-gray-400">
+					确认后将按筛选结果导入到当前账户的对话列表中。
+				</div>
+				<div class="flex items-center justify-end gap-3">
+					<button
+						class="px-4 py-2 text-sm rounded-xl border border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-850"
+						on:click={() => (show = false)}
+						type="button"
+					>
+						取消
+					</button>
+					<button
+						class="px-4 py-2 text-sm rounded-xl bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60 disabled:cursor-not-allowed flex items-center gap-2"
+						on:click={confirmImport}
+						disabled={loading || importing || (!rawChats.length && !loading)}
+						type="button"
+					>
+						{#if importing}
+							<Spinner className="size-4" />
+						{/if}
+						<span>{importing ? '正在导入...' : '确认导入'}</span>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</Modal>

src/lib/components/layout/Sidebar.svelte

@@ -52,6 +52,7 @@
 	import Folder from '../common/Folder.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Folders from './Sidebar/Folders.svelte';
+	import ImportChatsModal from './ImportChatsModal.svelte';
 	import { getChannels, createNewChannel } from '$lib/apis/channels';
 	import ChannelModal from './Sidebar/ChannelModal.svelte';
 	import ChannelItem from './Sidebar/ChannelItem.svelte';
@@ -64,8 +65,6 @@
 	import PinnedModelList from './Sidebar/PinnedModelList.svelte';
 	import Note from '../icons/Note.svelte';
 	import { slide } from 'svelte/transition';
-	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
-	import { extractChatsFromFile } from '$lib/utils/chatImport';
 
 	const BREAKPOINT = 768;
 
@@ -79,6 +78,8 @@
 
 	let showCreateChannel = false;
 
+	let showImportChatsModal = false;
+
 	// Pagination variables
 	let chatListLoading = false;
 	let allChatsLoaded = false;
@@ -90,10 +91,6 @@
 
 	let newFolderId = null;
 
-	// Import Chats state
-	let importFiles;
-	let chatImportInputElement: HTMLInputElement;
-
 	const initFolders = async () => {
 		const folderList = await getFolders(localStorage.token).catch((error) => {
 			toast.error(`${error}`);
@@ -357,32 +354,6 @@
 		selectedChatId = null;
 	};
 
-	// Import Chats handler
-	$: if (importFiles) {
-		console.log(importFiles);
-
-		if (importFiles.length > 0) {
-			extractChatsFromFile(importFiles[0])
-				.then((chats) => {
-					console.log(chats);
-					if (getImportOrigin(chats) == 'openai') {
-						try {
-							chats = convertOpenAIChats(chats);
-						} catch (error) {
-							console.log('Unable to import chats:', error);
-							toast.error($i18n.t('Failed to convert OpenAI chats'));
-							return;
-						}
-					}
-					importChatsHandler(chats);
-				})
-				.catch((error) => {
-					console.error('Import error:', error);
-					toast.error($i18n.t(error.message));
-				});
-		}
-	}
-
 	const importChatsHandler = async (_chats) => {
 		for (const chat of _chats) {
 			console.log(chat);
@@ -1313,19 +1284,10 @@
 				></div>
 
 				<!-- Import Chats Button -->
-				<input
-					id="sidebar-chat-import-input"
-					bind:this={chatImportInputElement}
-					bind:files={importFiles}
-					type="file"
-					accept=".json,.zip"
-					hidden
-				/>
-
 				<button
 					class="flex w-full items-center space-x-3 rounded-2xl px-2.5 py-2 hover:bg-gray-100/50 dark:hover:bg-gray-900 transition outline-none"
 					on:click={() => {
-						chatImportInputElement.click();
+						showImportChatsModal = true;
 					}}
 					draggable="false"
 					aria-label={$i18n.t('Import Chats')}
@@ -1349,7 +1311,6 @@
 					</div>
 				</button>
 
-
 				<div class="flex flex-col font-primary">
 					{#if $user !== undefined && $user !== null}
 						<UserMenu
@@ -1383,3 +1344,10 @@
 		</div>
 	</div>
 {/if}
+
+<ImportChatsModal
+	bind:show={showImportChatsModal}
+	onImport={async (chats) => {
+		await importChatsHandler(chats);
+	}}
+/>

unitest/chat_history_filter.html

@@ -0,0 +1,441 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>聊天记录筛选器 (JSON)</title>
+    <style>
+        :root {
+            --bg-color: #0f1115;
+            --card-bg: #161b22;
+            --text-main: #e6edf3;
+            --text-dim: #8b949e;
+            --accent-color: #2f81f7;
+            --accent-hover: #58a6ff;
+            --border-color: #30363d;
+            --success-color: #238636;
+            --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        /* 顶部导航 */
+        header {
+            padding: 1rem 2rem;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: var(--card-bg);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            z-index: 10;
+        }
+
+        h1 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        h1::before {
+            content: '';
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            background-color: var(--accent-color);
+            border-radius: 2px;
+            box-shadow: 0 0 8px var(--accent-color);
+        }
+
+        .version-tag {
+            font-size: 0.7rem;
+            background: var(--border-color);
+            padding: 2px 6px;
+            border-radius: 4px;
+            color: var(--text-dim);
+            margin-left: 5px;
+        }
+
+        /* 控制区域 */
+        .controls {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .file-upload-wrapper {
+            position: relative;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .btn {
+            padding: 8px 16px;
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            background-color: var(--card-bg);
+            color: var(--text-main);
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.2s ease;
+            font-family: var(--font-mono);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn:hover {
+            border-color: var(--accent-hover);
+            color: var(--accent-hover);
+        }
+
+        .btn-primary {
+            background-color: var(--success-color);
+            border-color: var(--success-color);
+            color: white;
+            font-weight: 600;
+        }
+
+        .btn-primary:hover {
+            background-color: #2ea043;
+            border-color: #2ea043;
+            color: white;
+            box-shadow: 0 0 10px rgba(46, 160, 67, 0.4);
+        }
+
+        .btn-primary:disabled {
+            background-color: var(--border-color);
+            border-color: var(--border-color);
+            color: var(--text-dim);
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        .stats {
+            color: var(--text-dim);
+            font-size: 0.85rem;
+            font-family: var(--font-mono);
+            margin-right: 15px;
+        }
+
+        /* 主体列表区域 */
+        main {
+            flex: 1;
+            padding: 2rem;
+            overflow-y: auto;
+            position: relative;
+        }
+
+        .empty-state {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            color: var(--text-dim);
+        }
+
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.9rem;
+            display: none;
+        }
+
+        .data-table th, .data-table td {
+            text-align: left;
+            padding: 12px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .data-table th {
+            position: sticky;
+            top: 0;
+            background-color: var(--bg-color);
+            color: var(--text-dim);
+            font-weight: 600;
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            z-index: 5;
+        }
+
+        .data-table tr:hover td {
+            background-color: rgba(47, 129, 247, 0.05);
+        }
+
+        .col-check { width: 50px; text-align: center; }
+        .col-title { width: auto; font-weight: 500; }
+        .col-date { width: 250px; font-family: var(--font-mono); color: var(--accent-color); }
+
+        /* 自定义复选框 */
+        input[type="checkbox"] {
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--border-color);
+            border-radius: 4px;
+            background-color: transparent;
+            cursor: pointer;
+            position: relative;
+        }
+
+        input[type="checkbox"]:checked {
+            background-color: var(--accent-color);
+            border-color: var(--accent-color);
+        }
+
+        input[type="checkbox"]:checked::after {
+            content: '✔';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 10px;
+        }
+
+        /* 滚动条 */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: var(--bg-color); }
+        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
+
+    </style>
+</head>
+<body>
+
+    <header>
+        <h1>CHAT_FILTER <span class="version-tag">ARRAY_MODE</span></h1>
+        
+        <div class="controls">
+            <span class="stats" id="stats-display">等待导入文件...</span>
+            
+            <div class="file-upload-wrapper">
+                <label for="file-input" class="btn">📂 导入 JSON</label>
+                <input type="file" id="file-input" accept=".json,application/json">
+            </div>
+
+            <button id="download-btn" class="btn btn-primary" disabled>⬇ 导出 JSON</button>
+        </div>
+    </header>
+
+    <main id="main-container">
+        <div class="empty-state" id="empty-state">
+            <p>请点击右上角导入 JSON 文件</p>
+            <p style="font-size: 0.8rem; margin-top: 10px; opacity: 0.6;">支持格式: Standard JSON Array `[{},{}]`</p>
+        </div>
+
+        <table class="data-table" id="result-table">
+            <thead>
+                <tr>
+                    <th class="col-check">
+                        <input type="checkbox" id="select-all" title="全选/取消全选">
+                    </th>
+                    <th class="col-title">TITLE</th>
+                    <th class="col-date">INSERTED_AT</th>
+                </tr>
+            </thead>
+            <tbody id="table-body">
+                </tbody>
+        </table>
+    </main>
+
+    <script>
+        // 状态管理
+        let rawData = [];
+        let selectedIndices = new Set();
+
+        // DOM 元素
+        const fileInput = document.getElementById('file-input');
+        const downloadBtn = document.getElementById('download-btn');
+        const tableBody = document.getElementById('table-body');
+        const resultTable = document.getElementById('result-table');
+        const emptyState = document.getElementById('empty-state');
+        const statsDisplay = document.getElementById('stats-display');
+        const selectAllCheckbox = document.getElementById('select-all');
+
+        // 监听文件上传
+        fileInput.addEventListener('change', handleFileUpload);
+        
+        // 监听全选
+        selectAllCheckbox.addEventListener('change', (e) => {
+            const checkboxes = document.querySelectorAll('.item-checkbox');
+            const isChecked = e.target.checked;
+            
+            checkboxes.forEach(cb => {
+                cb.checked = isChecked;
+                const index = parseInt(cb.dataset.index);
+                if (isChecked) {
+                    selectedIndices.add(index);
+                } else {
+                    selectedIndices.delete(index);
+                }
+            });
+            updateStats();
+        });
+
+        // 监听导出按钮
+        downloadBtn.addEventListener('click', exportData);
+
+        function handleFileUpload(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            // 重置界面
+            statsDisplay.textContent = "正在解析...";
+            tableBody.innerHTML = '';
+            rawData = [];
+            selectedIndices.clear();
+            selectAllCheckbox.checked = false;
+            downloadBtn.disabled = true;
+
+            const reader = new FileReader();
+            
+            reader.onload = function(e) {
+                try {
+                    const content = e.target.result;
+                    // 解析整个 JSON
+                    const parsed = JSON.parse(content);
+                    
+                    // 校验格式：必须是数组
+                    if (!Array.isArray(parsed)) {
+                        throw new Error("文件格式错误：JSON 根节点必须是数组 [...]");
+                    }
+
+                    rawData = parsed;
+
+                    if (rawData.length > 0) {
+                        renderTable();
+                        emptyState.style.display = 'none';
+                        resultTable.style.display = 'table';
+                        downloadBtn.disabled = false;
+                    } else {
+                        statsDisplay.textContent = "JSON 数组为空";
+                    }
+
+                } catch (err) {
+                    console.error(err);
+                    alert(`解析失败: ${err.message}`);
+                    statsDisplay.textContent = "错误";
+                }
+            };
+
+            reader.readAsText(file, 'UTF-8');
+        }
+
+        function renderTable() {
+            const fragment = document.createDocumentFragment();
+
+            rawData.forEach((item, index) => {
+                const tr = document.createElement('tr');
+                
+                // 宽容处理：防止某些对象缺少字段
+                const title = item.title || '<无标题>';
+                const date = item.inserted_at || '-';
+
+                tr.innerHTML = `
+                    <td class="col-check">
+                        <input type="checkbox" class="item-checkbox" data-index="${index}">
+                    </td>
+                    <td class="col-title">${escapeHtml(title)}</td>
+                    <td class="col-date">${escapeHtml(String(date))}</td>
+                `;
+                fragment.appendChild(tr);
+            });
+
+            tableBody.appendChild(fragment);
+
+            // 更新统计
+            updateStats();
+        }
+
+        // 使用事件委托处理表格内的 Checkbox 点击
+        tableBody.addEventListener('change', (e) => {
+            if (e.target.classList.contains('item-checkbox')) {
+                const index = parseInt(e.target.dataset.index);
+                if (e.target.checked) {
+                    selectedIndices.add(index);
+                } else {
+                    selectedIndices.delete(index);
+                }
+                
+                // 联动全选框状态
+                if (selectedIndices.size === rawData.length && rawData.length > 0) {
+                    selectAllCheckbox.checked = true;
+                    selectAllCheckbox.indeterminate = false;
+                } else if (selectedIndices.size === 0) {
+                    selectAllCheckbox.checked = false;
+                    selectAllCheckbox.indeterminate = false;
+                } else {
+                    selectAllCheckbox.indeterminate = true;
+                }
+
+                updateStats();
+            }
+        });
+
+        function updateStats() {
+            const total = rawData.length;
+            const selected = selectedIndices.size;
+            statsDisplay.textContent = `总数: ${total} | 已选: ${selected}`;
+        }
+
+        function exportData() {
+            if (selectedIndices.size === 0) {
+                if(!confirm('未选择任何记录，确定要导出一个空数组吗？')) return;
+            }
+
+            // 筛选数据
+            const filteredData = rawData.filter((_, index) => selectedIndices.has(index));
+            
+            // 转换为 JSON 字符串 (美化输出，缩进2空格)
+            const outputString = JSON.stringify(filteredData, null, 2);
+            
+            // 创建 Blob
+            const blob = new Blob([outputString], { type: 'application/json;charset=utf-8' });
+            
+            // 创建下载链接
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `filtered_chat_${new Date().toISOString().slice(0,10)}.json`;
+            document.body.appendChild(a);
+            a.click();
+            
+            // 清理
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        // 防 XSS 简单转义
+        function escapeHtml(text) {
+            if (typeof text !== 'string') return text;
+            return text
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+    </script>
+</body>
+</html>