Merge branch 'develop'

# Conflicts:
#	src/pages/JsonTools/__tests__/useJsonTools.test.ts
#	src/pages/JsonTools/components/JsonDiffPanel.tsx
#	src/pages/JsonTools/useJsonTools.ts

.github/CODING_STANDARDS.md

@@ -669,7 +669,7 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 
 ### 9.1 功能元数据
 
-功能名称与描述在 `config/features.tsx` 的 `FEATURES` 数组中定义：
+功能名称与描述在 `config/featureMeta.ts` 的 `FEATURES` 数组中定义：
 
 ```typescript
 {
@@ -677,10 +677,11 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
   label: '时间戳转换',
   description: '日期与时间戳互转',
   defaultVisible: true,
-  components: { popup: TimestampPage, sidepanel: TimestampPage, tab: TimestampPage },
 }
 ```
 
+页面组件通过 `config/pageLoaders/` 按需加载，不在 `FEATURES` 中引用。
+
 Dashboard 卡片、TopBar 搜索等功能从此处读取 `label` / `description`。
 
 ### 9.2 页面与组件文案
@@ -763,11 +764,11 @@ const [themeMode, setThemeMode, isInitialized] = useStorageState(
 
 Chrome Storage 读取是异步的。项目通过 `localStorage` 快照（键名 `snapshot/{storageKey}`）提供同步初始值，消除首屏闪烁。
 
-| 模块 | 快照工具 | 防覆盖机制 |
+| 模块                | 快照工具           | 防覆盖机制                                                                                |
-| ---- | -------- | ---------- |
+| ------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
-| `RouterProvider` | `syncSnapshot.ts` | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
+| `RouterProvider`    | `syncSnapshot.ts`  | `canPersistRef`（加载成功后才写入）、`hasUserNavigatedRef`（用户导航后不被 storage 覆盖） |
-| `useStorageState` | `syncSnapshot.ts` | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入 |
+| `useStorageState`   | `syncSnapshot.ts`  | `loadSucceededRef` 或 `userModifiedRef` 为 true 时才写入                                  |
-| `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖） |
+| `ThemeModeProvider` | `themeSnapshot.ts` | `hasUserSetMode`（用户切换主题后不被 storage 覆盖）                                       |
 
 新增持久化状态时，应遵循相同模式：同步快照作初始 state → 异步加载 storage → 加载成功或用户修改后才允许写入。
 

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/index.css",
+    "css": "src/styles/shell.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""

docs/spec/README.md

@@ -5,3 +5,4 @@
 | 文档                                                                             | 状态              | 说明                                                 |
 | -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
 | [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |
+| [popup-layout/feature-nav-layout.md](./popup-layout/feature-nav-layout.md)       | 待实施            | Popup 右侧图标导航、移除 Dashboard、默认 timestamp   |

docs/spec/popup-layout/feature-nav-layout.md

@@ -0,0 +1,356 @@
+# Popup 布局重构 — 功能导航与 Dashboard 移除
+
+> 创建时间: 2026-07-05
+> 状态: 待实施
+> 关联模块: `src/entrypoints/popup/`、`src/layout/FeatureNav/`、`src/providers/RouterProvider.tsx`
+> 影响范围: 仅 popup 入口（tab / sidepanel 不在本次布局范围）
+
+## 背景与目标
+
+当前 popup 采用 **Dashboard 首页 + TopBar 搜索跳转** 模式：用户打开扩展后先看到仪表盘卡片网格，再点击进入具体工具。布局为固定 400×600（见 `src/entrypoints/popup/App.tsx` 与 `src/entrypoints/popup/index.html`），TopBar 在非 dashboard 页面显示「返回首页」按钮。
+
+该模式增加了一步选工具操作。本次重构将 popup 改为 **工具直达 + 右侧常驻导航**，并移除 Dashboard 页面。
+
+| 维度       | 现状                          | 目标                                      |
+| ---------- | ----------------------------- | ----------------------------------------- |
+| 默认页     | `dashboard`                   | 新用户默认 `timestamp`                    |
+| 导航       | Dashboard 卡片网格 + 搜索跳转 | 右侧常驻纯图标导航栏                      |
+| 首页       | Dashboard 独立页              | 移除                                      |
+| Popup 宽度 | 400px                         | 450px（内容区 ~402px + 导航栏 48px）      |
+| 作用范围   | —                             | 仅 popup 改布局；tab / sidepanel 不加导航 |
+
+---
+
+## 布局设计
+
+### 结构示意
+
+```mermaid
+flowchart LR
+  subgraph popup ["Popup 450x600"]
+    subgraph mainCol ["主列 flex-1"]
+      TopBar["TopBar"]
+      Content["RouterContainer"]
+      TopBar --> Content
+    end
+    NavCol["FeatureNav 48px"]
+  end
+  mainCol --- NavCol
+```
+
+### 尺寸约束
+
+| 属性     | 值     | 说明                                           |
+| -------- | ------ | ---------------------------------------------- |
+| 总宽度   | 450px  | `App.tsx` 容器 + `index.html` 内联样式同步修改 |
+| 总高度   | 600px  | 不变                                           |
+| 主内容列 | flex-1 | 约 402px，需 `min-w-0` 防止 flex 子项溢出      |
+| 导航栏   | 48px   | Tailwind `w-12`，固定宽度，不参与 flex 收缩    |
+
+### 视觉规范
+
+- 导航栏：左侧 `border-l border-border`，垂直排列图标按钮
+- 图标按钮：`h-9 w-9` 或 `h-10 w-10`，纯图标
+- Tooltip：使用原生 `title` 属性 + `aria-label={feature.label}`，不引入 Tooltip 组件
+- Active 态：背景 `bg-muted` + 左侧 `border-l-2 border-primary`
+- 导航列表超出高度时：`overflow-y-auto`（600px 高度下 9 个工具通常无需滚动）
+
+---
+
+## FeatureNav 组件规格
+
+新建 `src/layout/FeatureNav/`，遵循 UI + Hook 分离模式（见 `.github/CODING_STANDARDS.md` §11）。
+
+### 文件结构
+
+```
+src/layout/FeatureNav/
+├── index.tsx              # 垂直图标按钮列表、active 高亮、无障碍属性
+├── useFeatureNav.ts       # 读路由状态，暴露 navItems / navigateTo / currentPage
+├── resolveNavFeatures.ts  # 从 Dashboard 迁出的功能列表解析逻辑
+└── __tests__/
+    ├── index.test.tsx
+    └── resolveNavFeatures.test.ts
+```
+
+### resolveNavFeatures.ts
+
+从 `src/pages/Dashboard/dashboardFeatures.ts` 迁出并重命名：
+
+```typescript
+export interface NavFeatureItem {
+  key: PageType;
+  feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
+}
+
+export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[];
+```
+
+逻辑与旧 `resolveDashboardFeatures` 一致：
+
+- 按 `keys`（即 `pageOrder`）顺序遍历
+- 跳过不在 `visiblePages` 中的项
+- 跳过无 `icon` 的 feature（dashboard 移除后不应出现）
+
+### useFeatureNav.ts
+
+```typescript
+export interface UseFeatureNavReturn {
+  navItems: NavFeatureItem[];
+  currentPage: PageType;
+  navigateTo: (page: PageType) => void;
+}
+```
+
+- 从 `useRouter()` 读取 `currentPage`、`pageOrder`、`visiblePages`、`navigateTo`
+- 用 `useMemo` 调用 `resolveNavFeatures(pageOrder, visiblePages)` 生成 `navItems`
+
+### index.tsx
+
+- 渲染 `<nav aria-label="功能导航">` 包裹垂直按钮列表
+- 每项为 `<button type="button">`，内含 Lucide 图标
+- 点击调用 `navigateTo(item.key)`
+- 当前项添加 active 样式与 `aria-current="page"`
+
+### 引用范围
+
+**仅** `src/entrypoints/popup/App.tsx` 引用 `FeatureNav`。sidepanel / tab 入口不引入该组件。
+
+---
+
+## popup/App.tsx 目标结构
+
+```tsx
+import RouterProvider from '@/providers/RouterProvider';
+import TopBar from '@/layout/TopBar';
+import FeatureNav from '@/layout/FeatureNav';
+import RouterContainer from '@/components/RouterContainer';
+import ErrorBoundary from '@/components/ErrorBoundary';
+
+export default function App() {
+  return (
+    <RouterProvider
+      defaultRoute="timestamp"
+      syncKey="app/popupRoute"
+      visiblePagesKey="app/popupVisiblePages"
+      pageOrderKey="app/popupPageOrder"
+    >
+      <div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
+        <div className="flex flex-col flex-1 min-w-0">
+          <TopBar />
+          <ErrorBoundary>
+            <RouterContainer />
+          </ErrorBoundary>
+        </div>
+        <FeatureNav />
+      </div>
+    </RouterProvider>
+  );
+}
+```
+
+`src/entrypoints/popup/index.html` 内联样式中 `width: 400px` 改为 `width: 450px`。
+
+---
+
+## 移除 Dashboard（全局类型变更）
+
+布局仅改 popup，但 `dashboard` 从 `PageType` 移除会影响全项目类型与路由校验。
+
+### 删除文件
+
+| 路径                                  | 说明             |
+| ------------------------------------- | ---------------- |
+| `src/pages/Dashboard/`                | 整目录（含测试） |
+| `src/config/pageLoaders/dashboard.ts` | Dashboard 懒加载 |
+
+### 修改文件
+
+| 文件                                 | 改动                                                        |
+| ------------------------------------ | ----------------------------------------------------------- |
+| `src/types/storage.d.ts`             | 从 `PageType` 联合类型删除 `'dashboard'`                    |
+| `src/config/featureMeta.ts`          | 删除 dashboard 条目                                         |
+| `src/config/pageLoaders/index.ts`    | 删除 `case 'dashboard'`                                     |
+| `src/components/RouterContainer.tsx` | 去掉 dashboard 骨架屏分支；统一使用 `page-transition-enter` |
+| `src/components/PageSkeleton.tsx`    | 删除 `variant: 'dashboard'` 及对应 UI                       |
+| `src/styles/shell.css`               | 删除 `.page-transition-dashboard`                           |
+
+### TopBar 精简
+
+`src/layout/TopBar/index.tsx` 与 `useTopBar.ts`：
+
+- 删除「返回首页」按钮（`ArrowLeft` + `goHome`）
+- 删除 `isDashboard` 状态及相关导出
+- 搜索过滤中 `f.key === 'dashboard'` 的特殊排除逻辑可删除
+
+### RouterProvider 变更
+
+`src/providers/RouterProvider.tsx`：
+
+- 删除 `goHome()` 方法及 Context 中的 `goHome` 字段
+- 全局 `defaultRoute` 默认值由 `'dashboard'` 改为 `'timestamp'`
+- popup 显式传入 `defaultRoute="timestamp"`（与全局默认一致，便于阅读）
+
+### Sidepanel 最小修复
+
+`src/entrypoints/sidepanel/App.tsx` 若仍存在：
+
+- `defaultRoute="dashboard"` 改为 `defaultRoute="timestamp"`
+- 不添加 FeatureNav 布局
+
+---
+
+## 默认路由策略（仅新用户）
+
+利用现有 `RouterProvider` 机制，**无需额外迁移代码**。
+
+```typescript
+// 首屏（localStorage 快照，消除闪烁）
+const [currentPage] = useState(() => getSyncSnapshot(syncKey, defaultRoute, isValidPage));
+
+// 异步加载 chrome.storage
+const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
+if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
+  setCurrentPage(savedRoute);
+}
+```
+
+| 场景                                       | 行为                                                             |
+| ------------------------------------------ | ---------------------------------------------------------------- |
+| 新用户（无 `app/popupRoute`）              | 首屏 + 持久化均为 `timestamp`                                    |
+| 老用户（如 `app/popupRoute: 'jsonTools'`） | 恢复上次路由                                                     |
+| 老用户曾存 `dashboard`                     | `isValidPage('dashboard')` 为 false → 回退 `timestamp`（软迁移） |
+| 右键菜单 deep link                         | `?feature=&payload=` 优先级不变，高于默认路由                    |
+| 用户主动切换                               | `navigateTo` 后 `hasUserNavigatedRef` 阻止异步覆盖               |
+
+`visiblePages` / `pageOrder` 中残留的 `dashboard` 由 `mergeWithDefaults` 自动滤除（不在新默认列表中）。
+
+### 边界说明
+
+`recentlyUsedTools` 若含已移除的 `dashboard` 等非法项，当前 `isValidPageList` 校验要求数组**全部**合法，失败时整表回退为 `[]`。影响：TopBar 搜索历史中的「最近使用」可能被清空。此为已知低影响边界；实现时可选优化为「过滤非法项保留合法项」，**非必须**。
+
+---
+
+## 实施顺序
+
+```
+1. 迁出 resolveNavFeatures + 新建 FeatureNav 组件与测试
+2. 修改 popup/App.tsx 布局 + popup/index.html 宽度
+3. 全局移除 dashboard（PageType → FEATURES → pageLoader → 删页面目录）
+4. 精简 TopBar / RouterProvider / RouterContainer / PageSkeleton
+5. 批量更新测试 → npm run typecheck && npm run test && npm run lint
+```
+
+---
+
+## 验收标准
+
+### A. 布局与导航（手动）
+
+| 编号 | 步骤                                 | 期望                                           |
+| ---- | ------------------------------------ | ---------------------------------------------- |
+| A-1  | 首次安装（或清空 storage）打开 popup | 默认显示时间戳页，右侧导航 timestamp 项高亮    |
+| A-2  | 依次点击各导航图标                   | 切换到对应工具页，active 态跟随当前页          |
+| A-3  | hover 各导航图标                     | 显示中文功能名 tooltip（`title` 属性）         |
+| A-4  | 使用过某工具后关闭再打开 popup       | 恢复上次路由（非 dashboard）                   |
+| A-5  | 检查 popup 尺寸                      | 宽度 450px，高度 600px，内容区不被导航挤压溢出 |
+
+### B. Dashboard 移除
+
+| 编号 | 期望                                                                 |
+| ---- | -------------------------------------------------------------------- |
+| B-1  | TopBar 搜索下拉无 dashboard 项                                       |
+| B-2  | TopBar 无「返回首页」按钮                                            |
+| B-3  | `PageType`、`FEATURES`、`loadPage` 中无 dashboard                    |
+| B-4  | storage 中 `app/popupRoute: 'dashboard'` 时打开 popup 落到 timestamp |
+| B-5  | `visiblePages` 含 dashboard 时自动滤除，导航正常显示工具列表         |
+
+### C. 单元测试
+
+| 编号 | 覆盖                                                                       |
+| ---- | -------------------------------------------------------------------------- |
+| C-1  | `FeatureNav` 渲染全部可见工具图标                                          |
+| C-2  | `FeatureNav` 点击图标调用 `navigateTo`                                     |
+| C-3  | `FeatureNav` 当前页对应项有 active 样式 / `aria-current`                   |
+| C-4  | `resolveNavFeatures` 按 pageOrder 排序、respect visiblePages               |
+| C-5  | 更新 `RouterProvider` / `TopBar` / `RouterContainer` / `features` 相关测试 |
+| C-6  | 删除 `src/pages/Dashboard/__tests__/` 下全部测试                           |
+
+### D. CI
+
+| 编号 | 标准                     |
+| ---- | ------------------------ |
+| D-1  | `npm run typecheck` 通过 |
+| D-2  | `npm run test` 通过      |
+| D-3  | `npm run lint` 通过      |
+
+---
+
+## 不在范围
+
+- tab / sidepanel 布局改造（不加 FeatureNav）
+- `visiblePages` / `pageOrder` 可视化配置 UI
+- Popup 高度变更（保持 600px）
+- 修改 `AGENTS.md` 中 spec 目录引用（实际 spec 位于 `docs/spec/`）
+
+---
+
+## PR 检查清单
+
+```markdown
+## 功能
+
+- [ ] 新建 FeatureNav 组件（index / useFeatureNav / resolveNavFeatures）
+- [ ] popup 布局改为双列（主内容 + 右侧导航）
+- [ ] popup 宽度 450px（App.tsx + index.html）
+- [ ] popup defaultRoute="timestamp"
+- [ ] 全局移除 dashboard（PageType、FEATURES、pageLoader、页面目录）
+- [ ] TopBar 移除返回按钮与 goHome 相关逻辑
+- [ ] RouterProvider 移除 goHome，defaultRoute 改为 timestamp
+- [ ] sidepanel defaultRoute 最小修复（若文件存在）
+
+## 测试
+
+- [ ] FeatureNav / resolveNavFeatures 单元测试
+- [ ] 更新 RouterProvider / TopBar / RouterContainer / features 测试
+- [ ] 删除 Dashboard 相关测试
+
+## 验收
+
+- [ ] npm run typecheck / test / lint 通过
+- [ ] 手动 A-1 ~ A-5、B-1 ~ B-4 通过
+```
+
+---
+
+## 风险与边界说明
+
+1. **Dashboard 移除为全局变更**：虽 FeatureNav 仅 popup 使用，但 `PageType` 删除 `dashboard` 会影响所有入口的类型校验与路由合法性。
+2. **老用户 dashboard 路由软迁移**：依赖 `isValidPage` 回退到 `defaultRoute`，不会 crash，但用户会察觉「首页消失、默认变为时间戳」——符合预期。
+3. **450px 宽度**：Chrome popup 允许扩展较默认更宽；若未来 Firefox 有差异需在 Firefox 构建中手动验证。
+4. **recentlyUsedTools 整表校验**：见「默认路由策略 → 边界说明」，可选后续优化。
+
+---
+
+## 相关文件索引
+
+| 文件                                  | 说明                            |
+| ------------------------------------- | ------------------------------- |
+| `src/entrypoints/popup/App.tsx`       | popup 布局入口，引用 FeatureNav |
+| `src/entrypoints/popup/index.html`    | popup 初始尺寸 450px            |
+| `src/layout/FeatureNav/`              | 新建：右侧图标导航              |
+| `src/layout/TopBar/`                  | 精简：移除返回按钮              |
+| `src/providers/RouterProvider.tsx`    | 默认路由、移除 goHome           |
+| `src/config/featureMeta.ts`           | FEATURES 定义，删除 dashboard   |
+| `src/types/storage.d.ts`              | PageType 定义                   |
+| `src/config/pageLoaders/index.ts`     | 页面懒加载路由                  |
+| `src/components/RouterContainer.tsx`  | 页面渲染容器                    |
+| `src/components/PageSkeleton.tsx`     | 加载骨架屏                      |
+| `src/styles/shell.css`                | 页面过渡动画                    |
+| `src/pages/Dashboard/`                | **删除**                        |
+| `src/config/pageLoaders/dashboard.ts` | **删除**                        |
+| `src/entrypoints/sidepanel/App.tsx`   | 最小修复 defaultRoute           |
+
+---
+
+> **注**：项目 spec 文档实际目录为 `docs/spec/`。`AGENTS.md` 中引用的根目录 `spec/README.md` 尚未建立，以本目录 [`README.md`](../README.md) 为索引。

docs/test-data-generator/README.md

@@ -29,3 +29,20 @@
 - 导出工具：`src/utils/dataExporter.ts`
 
 实现约束与任务完成状态记录在 [TASKS.md](./TASKS.md)。
+
+## 开发者注意事项（与源码同步）
+
+以下行为以 `src/` 源码为准；设计文档中的旧版 class API、`metadata`/`options` 嵌套结构已废弃。
+
+### Worker 任务 ID（`generationId`）
+
+`useGenerator` 每次调用 `generate()` 递增 `generationIdRef`，经 `start` 消息传入 Worker。Worker 所有响应（`progress` / `complete` / `error`）均携带同一 `generationId`。
+
+- **取消**：`cancel()` 先递增 ID 再发送 `cancel`，使进行中的 Worker 响应被主线程忽略；Worker 每生成 100 行让出事件循环以处理 cancel。
+- **快速重试**：新任务 ID 大于旧响应时，旧消息被丢弃，避免 UI 状态错乱。
+
+类型见 `WorkerRequestMessage` / `WorkerResponseMessage`（`src/types/testDataGenerator.ts`）。
+
+### 规则存储写入失败
+
+`ruleStorage.save()` / `update()` 在 `localStorage.setItem` 失败时返回 `null`（不部分提交）。页面层（如 `FieldList.tsx`）仅在返回值非空时 Toast 成功。详见 [rule-management.md § 存储机制](./rule-management.md#存储机制) 与 `src/utils/README.md`。

docs/test-data-generator/rule-management.md

@@ -24,25 +24,20 @@
 
 ## 数据结构
 
+> **与源码对齐**：类型定义见 `src/types/testDataGenerator.ts`。规则**不**持久化生成数量与导出格式（由页面 `GenerateOptions` 状态管理）。
+
 ### 规则模板
 
 ```typescript
 interface DataRule {
-  id: string; // 唯一标识
+  id: string;
-  name: string; // 规则名称
+  name: string;
-  description?: string; // 规则描述
+  description?: string;
-  fields: FieldConfig[]; // 字段配置
+  fields: FieldConfig[];
-  options: {
+  createdAt: number;
-    total: number; // 生成数量
+  updatedAt: number;
-    format: 'json' | 'csv';
+  lastUsedAt?: number;
-    defaultEmptyRate: number; // 默认空值率（0-100）
+  useCount: number;
-  };
-  metadata: {
-    createdAt: number; // 创建时间
-    updatedAt: number; // 更新时间
-    lastUsedAt?: number; // 最后使用时间
-    useCount: number; // 使用次数
-  };
 }
 ```
 
@@ -50,13 +45,14 @@ interface DataRule {
 
 ```typescript
 interface FieldConfig {
-  id: string; // 字段唯一标识
+  id: string;
-  name: string; // 字段名
+  name: string;
-  generator: string; // 生成器名称
+  description?: string;
-  params: Record<string, any>; // 生成器参数
+  generatorId: string; // 生成器 ID，对应 lib/generators 中的 id
-  unique: boolean; // 唯一性约束
+  params: Record<string, unknown>;
-  required: boolean; // 是否必填
+  required: boolean;
-  emptyRate?: number; // 选填字段的空值概率（0-100）
+  nullRate: number; // 空值率 0-100，仅 required=false 时生效
+  unique: boolean;
 }
 ```
 
@@ -110,11 +106,9 @@ interface FieldConfig {
 
 1. 验证规则名称不为空
 2. 检查规则数量是否达到上限（20 条）
-3. 如果达到上限，显示提示"已达到最大规则数量"
+3. 若达上限，`save()` 返回 `null`，UI 应阻止或提示
-4. 生成唯一 ID
+4. 生成唯一 ID，写入 `createdAt`/`updatedAt`，`useCount` 初始为 0
-5. 设置创建时间和更新时间
+5. 调用 `ruleStorage.save()`；仅当返回值非 `null` 时视为成功（`localStorage` 写入失败同样返回 `null`）
-6. 初始化使用次数为 0
-7. 保存到 localStorage
 
 ---
 
@@ -167,17 +161,13 @@ interface FieldConfig {
 - 支持按规则描述搜索
 - 搜索为模糊匹配，不区分大小写
 
-**实现方式**:
+**实现方式**（`src/utils/ruleStorage.ts`）:
 
 ```typescript
-search(keyword: string): DataRule[] {
+import * as ruleStorage from '@/utils/ruleStorage';
-  const rules = this.getAll();
-  const lowerKeyword = keyword.toLowerCase();
 
-  return rules.filter(r =>
+function searchRules(query: string): DataRule[] {
-    r.name.toLowerCase().includes(lowerKeyword) ||
+  return ruleStorage.search(query);
-    r.description?.toLowerCase().includes(lowerKeyword)
-  );
 }
 ```
 
@@ -224,9 +214,7 @@ search(keyword: string): DataRule[] {
 
 1. 加载原规则配置到编辑器
 2. 用户修改配置
-3. 点击保存时更新规则
+3. 点击保存时调用 `ruleStorage.update()`；返回非 `null` 才更新 `updatedAt` 并提示成功
-4. 更新 metadata.updatedAt
-5. 保存到 localStorage
 
 ---
 
@@ -269,18 +257,12 @@ search(keyword: string): DataRule[] {
 **实现方式**:
 
 ```typescript
-loadRule(ruleId: string): void {
+function loadRule(ruleId: string): void {
-  const rule = this.storage.getById(ruleId);
+  const rule = ruleStorage.getById(ruleId);
+  if (!rule) return;
 
-  // 应用规则配置
+  setFields(rule.fields);
-  this.setFields(rule.fields);
+  ruleStorage.recordUse(ruleId);
-  this.setOptions(rule.options);
-
-  // 记录使用
-  this.storage.recordUse(ruleId);
-
-  // 更新预览
-  this.updatePreview();
 }
 ```
 
@@ -292,7 +274,7 @@ loadRule(ruleId: string): void {
 
 1. 点击"复制"按钮
 2. 创建规则的副本
-3. 名称添加"(副本)"后缀
+3. 名称添加「（副本）」后缀（默认 `duplicate(id, '（副本）')`）
 4. 生成新的 ID
 5. 保存为新规则
 
@@ -327,23 +309,20 @@ loadRule(ruleId: string): void {
 └─────────────────────────────────────────────────────────────────────┘
 ```
 
-**导出格式**:
+**导出格式**（`exportRules()` 返回 `DataRule[]` 的 JSON 字符串，无外层包装）:
 
 ```json
-{
+[
-  "version": "1.0",
+  {
-  "exportedAt": "2024-01-20T10:15:45.000Z",
+    "id": "rule_123456",
-  "rules": [
+    "name": "电商用户数据 - 测试用",
-    {
+    "description": "用于测试用户注册功能",
-      "id": "rule_123456",
+    "fields": [],
-      "name": "电商用户数据 - 测试用",
+    "createdAt": 1704067200000,
-      "description": "用于测试用户注册功能",
+    "updatedAt": 1704067200000,
-      "fields": [...],
+    "useCount": 0
-      "options": {...},
+  }
-      "metadata": {...}
+]
-    }
-  ]
-}
 ```
 
 ---
@@ -401,63 +380,25 @@ loadRule(ruleId: string): void {
 
 ### 本地存储
 
-使用 localStorage 存储规则数据:
+使用 `localStorage`，键名 `testDataGenerator_rules`。API 为**命名导出函数**（见 `src/utils/ruleStorage.ts`）：
+
+| 函数                                                   | 说明                               |
+| ------------------------------------------------------ | ---------------------------------- |
+| `getAll()` / `getById()` / `getByName()`               | 读取                               |
+| `save()` / `update()` / `deleteRule()` / `duplicate()` | 写入；失败时返回 `null` 或 `false` |
+| `recordUse()`                                          | 递增 `useCount`、更新 `lastUsedAt` |
+| `search()` / `getRecent()`                             | 搜索与最近使用                     |
+| `exportRules()` / `importRules()`                      | 导入导出 JSON 数组                 |
+| `clear()`                                              | 清空全部规则                       |
+
+写入失败（如 `QuotaExceededError`）时，内部 `setAll()` 返回 `false`，`save`/`update` 返回 `null`，`deleteRule` 返回 `false`，并在控制台输出 `[ruleStorage] 保存规则失败`。调用方须检查返回值，避免误报成功。
 
 ```typescript
-class RuleStorage {
+import * as ruleStorage from '@/utils/ruleStorage';
-  private readonly STORAGE_KEY = 'testDataGenerator_rules';
 
-  // 获取所有规则
+const saved = ruleStorage.save({ name: '示例', fields });
-  getAll(): DataRule[] {
+if (!saved) {
-    const data = localStorage.getItem(this.STORAGE_KEY);
+  // 达上限或 localStorage 不可用
-    return data ? JSON.parse(data) : [];
-  }
-
-  // 保存规则
-  save(rule: DataRule): { success: boolean; message?: string } {
-    const rules = this.getAll();
-
-    // 规则数量限制：最多 20 条
-    const MAX_RULES = 20;
-    if (rules.length >= MAX_RULES) {
-      return {
-        success: false,
-        message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
-      };
-    }
-
-    rules.push(rule);
-    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    return { success: true };
-  }
-
-  // 更新规则
-  update(id: string, updates: Partial<DataRule>): void {
-    const rules = this.getAll();
-    const index = rules.findIndex((r) => r.id === id);
-    if (index !== -1) {
-      rules[index] = { ...rules[index], ...updates };
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    }
-  }
-
-  // 删除规则
-  delete(id: string): void {
-    const rules = this.getAll();
-    const filtered = rules.filter((r) => r.id !== id);
-    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
-  }
-
-  // 记录使用
-  recordUse(id: string): void {
-    const rules = this.getAll();
-    const rule = rules.find((r) => r.id === id);
-    if (rule) {
-      rule.metadata.lastUsedAt = Date.now();
-      rule.metadata.useCount++;
-      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
-    }
-  }
 }
 ```
 

docs/test-data-generator/technical-implementation.md

@@ -1,5 +1,7 @@
 # 技术实现
 
+> **文档同步说明**：本文档含早期设计稿代码示例，部分类型/API 已与实现偏离。开发时请以 `src/types/testDataGenerator.ts`、`src/workers/generator.worker.ts`、`src/pages/TestDataGenerator/hooks/useGenerator.ts`、`src/utils/ruleStorage.ts` 为准。近期变更摘要见 [README § 开发者注意事项](./README.md#开发者注意事项与源码同步)。
+
 ## 技术栈
 
 | 技术         | 用途     | 版本 |
@@ -1498,6 +1500,67 @@ export class DataExporter {
 
 ## Web Worker 使用
 
+### 消息协议
+
+```typescript
+// src/types/testDataGenerator.ts
+
+type WorkerRequestMessage = { type: 'start'; payload: WorkerStartPayload } | { type: 'cancel' };
+
+type WorkerResponseMessage =
+  | { type: 'progress'; generationId: number; payload: GenerateProgress }
+  | { type: 'complete'; generationId: number; payload: GenerateResult }
+  | { type: 'error'; generationId: number; payload: { error: string } };
+
+interface WorkerStartPayload {
+  generationId: number; // 任务 ID，用于忽略过期响应
+  fields: FieldConfig[];
+  count: number;
+  csvMode: boolean;
+}
+```
+
+### useGenerator Hook
+
+`src/pages/TestDataGenerator/hooks/useGenerator.ts` 负责 Worker 生命周期与 `generationId` 管理：
+
+- Worker **复用**：同一 Hook 实例内只创建一次，出错后 `terminate` 并在下次重建
+- **开始生成**：`generate(fields, count, csvMode?)` 递增 `generationId` 并 post `start`
+- **取消**：`cancel()` 递增 ID（使旧响应失效）并 post `cancel`；取消完成的 `complete` 不写入 `error` 状态
+- **响应过滤**：`onmessage` 中若 `data.generationId !== generationIdRef.current` 则忽略
+
+```typescript
+const generate = (fields: FieldConfig[], count: number, csvMode = false) => {
+  if (isGenerating) return;
+  const generationId = ++generationIdRef.current;
+  worker.postMessage({ type: 'start', payload: { generationId, fields, count, csvMode } });
+};
+
+const cancel = () => {
+  if (workerRef.current && isGenerating) {
+    ++generationIdRef.current;
+    worker.postMessage({ type: 'cancel' });
+    setIsGenerating(false);
+  }
+};
+```
+
+### Worker 实现要点
+
+`src/workers/generator.worker.ts`：
+
+- 按 `field.generatorId` 查找生成器；选填字段按 `nullRate` 随机置 `null`
+- 唯一性：≤1000 条随机+重试；>1000 条优先 `generateAtIndex`
+- 每 `YIELD_EVERY`（100）行 `await setTimeout(0)`，以便处理 `cancel`
+- 进度：每 1000 条或最后一行 post `progress`
+
+---
+
+## Web Worker 使用（历史设计稿，仅供参考）
+
+<details>
+<summary>展开查看旧版设计示例（与当前实现不一致）</summary>
+
 ### 创建 Worker
 
 ```typescript
@@ -1593,7 +1656,7 @@ export function useGenerator() {
 }
 ```
 
-### 错误处理
+### 错误处理（设计稿，`useErrorHandler.ts` 未实现）
 
 ```typescript
 // src/pages/TestDataGenerator/hooks/useErrorHandler.ts
@@ -1636,8 +1699,12 @@ export function useErrorHandler(options: ErrorHandlerOptions = {}) {
 
 ---
 
+</details>
+
 ## 错误提示机制
 
+> 当前实现：`TestDataGenerator/index.tsx` 直接使用 `useGenerator` 的 `error`/`result` 与 `ResultPanel` 展示警告；下方示例引用未实现的 `useErrorHandler`，仅供对照。
+
 ### 错误类型分类
 
 | 错误类型        | 严重程度 | 触发场景                 | 提示方式      |

src/components/CopyButton.tsx

@@ -57,11 +57,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       className={cn(className, copied && 'text-emerald-500')}
       {...props}
     >
-      {copied ? (
+      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-        <Check className="h-[1.2em] w-[1.2em]" />
-      ) : (
-        <Copy className="h-[1.2em] w-[1.2em]" />
-      )}
     </Button>
   );
 };

src/components/ErrorFallback.tsx

@@ -30,9 +30,7 @@ export function ErrorFallback({
     <div
       className={cn(
         'flex flex-col items-center justify-center',
-        isApp
+        isApp ? 'mt-16 mx-auto max-w-md' : 'flex-1 p-6 min-h-[300px] fade-in-zoom-95',
-          ? 'mt-16 mx-auto max-w-md'
-          : 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
         className,
       )}
     >
@@ -57,7 +55,11 @@ export function ErrorFallback({
           <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
         )}
 
-        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
+        <p
+          className={
+            isApp ? 'text-sm text-muted-foreground mb-6' : 'text-xs text-muted-foreground mb-5'
+          }
+        >
           {description}
         </p>
 
@@ -83,7 +85,7 @@ export function ErrorFallback({
           variant="destructive"
           size={isApp ? 'default' : 'sm'}
           onClick={onAction}
-          className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
+          className={isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm'}
         >
           <RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
           {actionLabel}

src/components/PageSkeleton.tsx

@@ -1,78 +0,0 @@
-/**
- * PageSkeleton 组件 - 页面加载骨架屏
- *
- * 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
- * 避免白屏闪烁，减少布局偏移
- */
-interface PageSkeletonProps {
-  /** 骨架屏类型 */
-  variant?: 'dashboard' | 'tool';
-}
-
-/**
- * 仪表盘卡片骨架屏
- */
-function DashboardCardSkeleton() {
-  return (
-    <div className="rounded-xl border border-border p-5 h-[100px]">
-      <div className="flex justify-between items-start">
-        <div className="flex gap-3 items-center">
-          <div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
-          <div>
-            <div className="w-24 h-5 bg-muted rounded animate-pulse" />
-            <div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
-          </div>
-        </div>
-        <div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
-      </div>
-    </div>
-  );
-}
-
-/**
- * 工具页面骨架屏
- */
-function ToolPageSkeleton() {
-  return (
-    <div className="p-5">
-      {/* 标题区域 */}
-      <div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
-
-      {/* 输入区域 */}
-      <div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
-
-      {/* 控制栏 */}
-      <div className="flex gap-2 mb-4">
-        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
-        <div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
-        <div className="flex-1" />
-        <div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
-      </div>
-
-      {/* 结果区域 */}
-      <div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
-    </div>
-  );
-}
-
-/**
- * 页面加载骨架屏
- *
- * @param props - PageSkeletonProps
- * @returns 骨架屏 JSX 元素
- */
-export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
-  if (variant === 'tool') {
-    return <ToolPageSkeleton />;
-  }
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
-      {Array.from({ length: 6 }).map((_, index) => (
-        <DashboardCardSkeleton key={index} />
-      ))}
-    </div>
-  );
-}
-
-PageSkeleton.displayName = 'PageSkeleton';

src/components/README.md

@@ -4,20 +4,19 @@
 
 ## 组件列表
 
-| 组件                    | 用途                                                                           |
+| 组件                    | 用途                                                                                                   |
-| ----------------------- | ------------------------------------------------------------------------------ |
+| ----------------------- | ------------------------------------------------------------------------------------------------------ |
-| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
+| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界                                               |
-| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
+| `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换                                 |
-| `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                             |
+| `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                                                     |
-| `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
+| `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                                             |
-| `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
+| `CopyButton.tsx`        | 一键复制按钮：复制成功后 1.5s 内切换为 Check 图标并应用 `text-emerald-500`；空内容/失败时 `toast` 提示 |
-| `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
+| `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                                             |
-| `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                       |
+| `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                                               |
-| `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮        |
+| `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮                                |
-| `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式        |
+| `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式                                |
-| `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                 |
+| `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                                         |
-| `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                 |
+| `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                                         |
-| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback        |
 
 ## 使用约定
 

src/components/RouterContainer.tsx

@@ -1,54 +1,68 @@
-import { FEATURES, getEntryPointType } from '@/config/features';
+import { getFeatureByKey } from '@/config/features';
+import { loadPage } from '@/config/pageLoaders/index';
 import { useRouter } from '@/providers/RouterProvider';
-import { Suspense } from 'react';
+import type { PageType } from '@/types/storage';
+import { type ComponentType, useEffect, useState } from 'react';
 import PageErrorBoundary from '@/components/PageErrorBoundary';
-import PageSkeleton from '@/components/PageSkeleton';
 import { cn } from '@/lib/utils';
 import { AlertTriangle } from 'lucide-react';
 
-const entryPointType = getEntryPointType();
+function LoadedPage({ pageKey }: { pageKey: PageType }) {
+  const [Page, setPage] = useState<ComponentType | null>(null);
 
-export default function RouterContainer() {
+  useEffect(() => {
-  const { currentPage, isLoaded } = useRouter();
+    let cancelled = false;
 
-  const animationClass =
+    loadPage(pageKey)
-    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
+      .then((mod) => {
+        if (!cancelled) {
+          setPage(() => mod.default);
+        }
+      })
+      .catch((err) => {
+        console.error('[Router Page Load Error]', err);
+      });
 
-  if (!isLoaded) {
+    return () => {
-    return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
+      cancelled = true;
+    };
+  }, [pageKey]);
+
+  if (!Page) {
+    return <div className="flex-1" aria-hidden="true" />;
   }
 
-  const currentFeature = FEATURES.find((f) => f.key === currentPage);
+  return <Page />;
-  const MatchedComponent = currentFeature?.components?.[entryPointType];
+}
+
+export default function RouterContainer() {
+  const { currentPage } = useRouter();
+
+  const currentFeature = getFeatureByKey(currentPage);
 
   return (
     <div
       key={currentPage}
       className={cn(
         'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'scrollbar-gutter-stable motion-reduce:transition-none',
+        'motion-reduce:transition-none page-transition-enter',
-        animationClass,
       )}
     >
-      <Suspense
+      <PageErrorBoundary resetKey={currentPage}>
-        fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
+        {currentFeature ? (
-      >
+          <LoadedPage key={currentPage} pageKey={currentPage} />
-        <PageErrorBoundary resetKey={currentPage}>
+        ) : (
-          {MatchedComponent ? (
+          <div className="flex-1 flex flex-col items-center justify-center p-8 text-center fade-in-300">
-            <MatchedComponent />
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
-          ) : (
+              <AlertTriangle className="h-6 w-6" />
-            <div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
-              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
-                <AlertTriangle className="h-6 w-6" />
-              </div>
-              <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
-              <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-                {`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
-              </p>
             </div>
-          )}
+            <h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
-        </PageErrorBoundary>
+            <p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
-      </Suspense>
+              该功能不存在或已被移除。
+            </p>
+          </div>
+        )}
+      </PageErrorBoundary>
     </div>
   );
 }

src/components/SwitchButtonGroup.tsx

@@ -15,7 +15,6 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
   options: SwitchOption<T>[];
   onChange: (value: T) => void;
   size?: 'small' | 'medium' | 'large';
-  buttonClassName?: string;
 }
 
 const SIZE_CLASSES = {
@@ -24,9 +23,12 @@ const SIZE_CLASSES = {
   large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;
 
+const INTERACTIVE_CLASSES =
+  'active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted';
+
 const SELECTED_CLASSES =
-  'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
+  'bg-background text-foreground shadow-sm font-semibold hover:bg-background hover:text-foreground';
-const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
+const UNSELECTED_CLASSES = 'text-muted-foreground hover:bg-accent hover:text-accent-foreground';
 
 export default function SwitchButtonGroup<T extends string | number = string>({
   value,
@@ -34,13 +36,12 @@ export default function SwitchButtonGroup<T extends string | number = string>({
   onChange,
   size = 'medium',
   className,
-  buttonClassName,
   ...props
 }: SwitchButtonGroupProps<T>) {
   return (
     <div
       className={cn(
-        'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground p-1',
+        'inline-flex w-full items-center justify-center rounded-lg bg-muted p-1',
         className,
       )}
       {...props}
@@ -54,8 +55,8 @@ export default function SwitchButtonGroup<T extends string | number = string>({
           className={cn(
             'flex-1 transition-all',
             SIZE_CLASSES[size],
+            INTERACTIVE_CLASSES,
             value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
-            buttonClassName,
           )}
         >
           {option.label}

src/components/TextInputArea.tsx

@@ -42,6 +42,15 @@ export interface TextInputAreaProps extends Omit<
   title?: string;
   externalError?: string;
   onClear?: () => void;
+
+  /**
+   * 撑满父容器高度并启用内部滚动（而非按 minRows/maxRows 自动撑高）。
+   * 用于需要固定高度 + 内部滚动的卡片面板。
+   */
+  fill?: boolean;
+
+  /** 是否无边框、无阴影、无圆角（适用于嵌套在其他有边框的容器中） */
+  borderless?: boolean;
 }
 
 function ActionButton({
@@ -106,6 +115,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     title,
     externalError,
     onClear,
+    fill = false,
+    borderless = false,
     ...restProps
   } = props;
 
@@ -122,6 +133,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
 
   const adjustHeight = useCallback(() => {
+    if (fill) return;
     const textArea = internalRef.current;
     if (!textArea) return;
 
@@ -132,7 +144,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
     const nextHeight = Math.max(textArea.scrollHeight, computedMin);
 
     textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
-  }, [minRows, maxRows]);
+  }, [minRows, maxRows, fill]);
 
   React.useEffect(() => {
     adjustHeight();
@@ -204,7 +216,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
   const hasBottomBar = allowCopy || showClear || bottomActions.length > 0;
 
   return (
-    <div className={cn('w-full flex flex-col gap-1.5', className)}>
+    <div className={cn('w-full flex flex-col gap-1.5', fill && 'flex-1 min-h-0', className)}>
       {hasTopBar && (
         <div className="flex items-center justify-between px-0.5">
           <div className="flex items-center gap-2">
@@ -233,8 +245,12 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
       <div
         className={cn(
-          'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
+          borderless
-          displayError &&
+            ? 'bg-transparent overflow-hidden'
+            : 'rounded-md border border-input bg-background shadow-sm transition-all focus-within:ring-1 focus-within:ring-ring focus-within:border-input overflow-hidden',
+          fill && 'flex-1 min-h-0 flex flex-col',
+          !borderless &&
+            displayError &&
             'border-destructive focus-within:ring-destructive focus-within:border-destructive',
         )}
       >
@@ -247,7 +263,10 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
           autoFocus={autoFocus}
           readOnly={readOnly}
           placeholder={placeholder}
-          className="w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block"
+          className={cn(
+            'w-full bg-transparent px-4 py-3 font-mono text-sm leading-relaxed text-foreground placeholder:text-muted-foreground/50 focus:outline-none resize-none border-0 block',
+            fill && 'flex-1 h-full overflow-auto diff-scroll',
+          )}
           {...restProps}
         />
 
@@ -267,7 +286,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
             <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
-                <CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
+                <CopyButton
+                  text={value}
+                  tooltip="复制内容"
+                  variant="ghost"
+                  size="iconSm"
+                  className="text-muted-foreground hover:text-foreground"
+                />
               )}
               {showClear && value && !disabled && !readOnly && (
                 <Button
@@ -275,8 +300,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                   onClick={handleClear}
                   aria-label="清空"
                   variant="ghost"
-                  size="icon"
+                  size="iconSm"
-                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <X className="h-4 w-4" />
                 </Button>
@@ -287,7 +312,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
       </div>
 
       {displayError && (
-        <p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
+        <p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
           {displayError}
         </p>
       )}

src/components/__tests__/PageSkeleton.test.tsx

@@ -1,64 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render } from '@testing-library/react';
-import PageSkeleton from '@/components/PageSkeleton';
-
-describe('PageSkeleton 组件', () => {
-  describe('渲染测试', () => {
-    it('默认应渲染 dashboard 骨架屏', () => {
-      const { container } = render(<PageSkeleton />);
-
-      // dashboard 骨架屏包含 6 个卡片
-      const cards = container.querySelectorAll('.rounded-xl');
-      expect(cards.length).toBe(6);
-    });
-
-    it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-
-      // 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
-      const cards = container.querySelectorAll('.rounded-xl');
-      expect(cards.length).toBe(6);
-    });
-
-    it('variant 为 tool 时应渲染工具页面骨架', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
-
-      // tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('布局结构测试', () => {
-    it('dashboard 骨架屏应使用 grid 布局', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-      const gridContainer = container.firstChild as HTMLElement;
-
-      expect(gridContainer).toHaveClass('grid');
-    });
-
-    it('tool 骨架屏应有内边距', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
-      const toolContainer = container.firstChild as HTMLElement;
-
-      expect(toolContainer).toHaveClass('p-5');
-    });
-  });
-
-  describe('骨架屏元素测试', () => {
-    it('dashboard 骨架屏应包含圆角和边框样式', () => {
-      const { container } = render(<PageSkeleton variant="dashboard" />);
-
-      // 获取第一个卡片容器
-      const card = container.querySelector('.rounded-xl.border');
-      expect(card).toBeInTheDocument();
-    });
-
-    it('tool 骨架屏应包含动画脉冲效果', () => {
-      const { container } = render(<PageSkeleton variant="tool" />);
-
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-  });
-});

src/components/__tests__/RouterContainer.test.tsx

@@ -6,15 +6,14 @@ import type { PageType } from '@/types/storage';
 import React from 'react';
 
 const mockRouterValue = {
-  currentPage: 'dashboard' as PageType,
+  currentPage: 'timestamp' as PageType,
-  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  visiblePages: ['timestamp', 'jwt'] as PageType[],
   pageOrder: ['timestamp'] as PageType[],
-  isLoaded: true,
   navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
+  recentlyUsedTools: [] as PageType[],
+  isLoaded: true,
 };
 
 vi.mock('@/providers/RouterProvider', () => ({
@@ -32,31 +31,15 @@ describe('RouterContainer 组件', () => {
   };
 
   describe('渲染测试', () => {
-    it('isLoaded 为 false 时应渲染骨架屏', () => {
+    it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
-      mockRouterValue.isLoaded = false;
+      mockRouterValue.currentPage = 'timestamp';
       const { container } = renderWithProvider(<RouterContainer />);
-      // 骨架屏使用 animate-pulse 类
+      expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
-      const skeletons = container.querySelectorAll('.animate-pulse');
-      expect(skeletons.length).toBeGreaterThan(0);
-    });
-
-    it('isLoaded 为 true 时应渲染页面内容', () => {
-      mockRouterValue.isLoaded = true;
-      mockRouterValue.currentPage = 'dashboard';
-      const { container } = renderWithProvider(<RouterContainer />);
-      expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
     });
   });
 
   describe('动画类测试', () => {
-    it('在 dashboard 页面应应用 dashboard 动画类', () => {
+    it('应应用 enter 动画类', () => {
-      mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<RouterContainer />);
-      const box = document.querySelector('.page-transition-dashboard');
-      expect(box).toBeInTheDocument();
-    });
-
-    it('在非 dashboard 页面应应用 enter 动画类', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<RouterContainer />);
       const box = document.querySelector('.page-transition-enter');
@@ -68,7 +51,7 @@ describe('RouterContainer 组件', () => {
     it('currentPage 变化时应更新', () => {
       const { rerender } = renderWithProvider(<RouterContainer />);
 
-      mockRouterValue.currentPage = 'timestamp';
+      mockRouterValue.currentPage = 'jwt';
       rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
 
       const box = document.querySelector('.page-transition-enter');
@@ -77,13 +60,11 @@ describe('RouterContainer 组件', () => {
   });
 
   describe('页面级错误隔离', () => {
-    it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
+    it('PageErrorBoundary 应包裹页面内容', () => {
-      mockRouterValue.isLoaded = true;
+      mockRouterValue.currentPage = 'timestamp';
-      mockRouterValue.currentPage = 'dashboard';
       const { container } = renderWithProvider(<RouterContainer />);
 
-      // 验证 RouterContainer 的 Box 结构存在
+      const routerBox = container.querySelector('.page-transition-enter');
-      const routerBox = container.querySelector('.page-transition-dashboard');
       expect(routerBox).toBeInTheDocument();
     });
   });

src/components/__tests__/SwitchButtonGroup.test.tsx

@@ -22,7 +22,7 @@ describe('SwitchButtonGroup 组件', () => {
     const buttonB = screen.getByRole('button', { name: /选项B/i });
 
     expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
-    expect(buttonB).toHaveClass('hover:bg-background/50');
+    expect(buttonB).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
   });
 
   it('点击未选中按钮时应触发 onChange 并传入选中值', () => {
@@ -34,11 +34,12 @@ describe('SwitchButtonGroup 组件', () => {
     expect(handleChange).toHaveBeenCalledWith('b');
   });
 
-  it('点击已选中按钮时不应触发 onChange', () => {
+  it('点击已选中按钮时仍会触发 onChange 并传回原值', () => {
     const handleChange = vi.fn();
     render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
 
     fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
+    expect(handleChange).toHaveBeenCalledTimes(1);
     expect(handleChange).toHaveBeenCalledWith('a');
   });
 
@@ -58,13 +59,6 @@ describe('SwitchButtonGroup 组件', () => {
     expect(button).toHaveClass('text-xs');
   });
 
-  it('应支持 buttonSx 自定义按钮样式', () => {
-    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
-
-    const button = screen.getByRole('button', { name: /选项A/i });
-    expect(button).toBeInTheDocument();
-  });
-
   it('应支持 ReactNode 类型的 label', () => {
     const nodeOptions = [{ value: 'x', label: <span data-testid="custom-label">自定义</span> }];
     render(<SwitchButtonGroup value="x" options={nodeOptions} onChange={vi.fn()} />);
@@ -72,20 +66,6 @@ describe('SwitchButtonGroup 组件', () => {
     expect(screen.getByTestId('custom-label')).toBeInTheDocument();
   });
 
-  it('默认按钮样式应禁止文字换行', () => {
-    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
-
-    const button = screen.getByRole('button', { name: /选项A/i });
-    expect(button).toHaveClass('whitespace-nowrap');
-  });
-
-  it('buttonSx 传入时应覆盖默认换行样式', () => {
-    render(<SwitchButtonGroup value="a" options={options} onChange={vi.fn()} />);
-
-    const button = screen.getByRole('button', { name: /选项A/i });
-    expect(button).toBeInTheDocument();
-  });
-
   describe('number 类型支持', () => {
     const numberOptions = [
       { value: 2, label: '2' },
@@ -105,7 +85,7 @@ describe('SwitchButtonGroup 组件', () => {
       const button2 = screen.getByRole('button', { name: /^2$/i });
       const button4 = screen.getByRole('button', { name: /^4$/i });
 
-      expect(button2).toHaveClass('hover:bg-background/50');
+      expect(button2).toHaveClass('hover:bg-accent', 'hover:text-accent-foreground');
       expect(button4).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
     });
 

src/components/ui/badge.tsx

@@ -22,11 +22,11 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps
+interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants };
+export { Badge };

src/components/ui/button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
+        iconSm: 'h-7 w-7',
       },
     },
     defaultVariants: {
@@ -45,4 +46,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';
 
-export { Button, buttonVariants };
+export { Button };

src/components/ui/checkbox.tsx

@@ -5,7 +5,7 @@ import { Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
+    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>

src/components/ui/dialog.tsx

@@ -12,13 +12,13 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
       className,
     )}
     {...props}
@@ -33,7 +33,7 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<
 }
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentRef<typeof DialogPrimitive.Content>,
   DialogContentProps
 >(({ className, children, showCloseButton = true, ...props }, ref) => (
   <DialogPortal>
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
         className,
       )}
       {...props}
@@ -72,7 +72,7 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
@@ -84,7 +84,7 @@ const DialogTitle = React.forwardRef<
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description

src/components/ui/label.tsx

@@ -9,7 +9,7 @@ const labelVariants = cva(
 );
 
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />

src/components/ui/select.tsx

@@ -10,7 +10,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
@@ -30,7 +30,7 @@ const SelectTrigger = React.forwardRef<
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
@@ -44,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
@@ -58,14 +58,14 @@ const SelectScrollDownButton = React.forwardRef<
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = 'popper', ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -90,7 +90,7 @@ const SelectContent = React.forwardRef<
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
@@ -102,7 +102,7 @@ const SelectLabel = React.forwardRef<
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
@@ -124,27 +124,4 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem };
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};

src/components/ui/switch.tsx

@@ -4,7 +4,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { cn } from '@/lib/utils';
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root

src/config/__tests__/features.lazy.test.ts

@@ -4,10 +4,6 @@ const pageLoadTracker = vi.hoisted(() => ({
   loaded: [] as string[],
 }));
 
-vi.mock('@/pages/Dashboard', () => {
-  pageLoadTracker.loaded.push('Dashboard');
-  return { default: () => null };
-});
 vi.mock('@/pages/Timestamp', () => {
   pageLoadTracker.loaded.push('Timestamp');
   return { default: () => null };
@@ -63,23 +59,25 @@ describe('features 懒加载', () => {
   it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
     const { FEATURES } = await import('@/config/features');
 
-    expect(FEATURES).toHaveLength(10);
+    expect(FEATURES).toHaveLength(9);
     expect(pageLoadTracker.loaded).toEqual([]);
   });
 
-  it('渲染 lazy 组件时才应加载对应页面模块', async () => {
+  it('loadPage 应仅加载对应页面模块', async () => {
-    const React = await import('react');
+    const { loadPage } = await import('@/config/pageLoaders/index');
-    const { render, waitFor } = await import('@testing-library/react');
-    const { FEATURES } = await import('@/config/features');
 
-    const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
+    await loadPage('timestamp');
 
-    render(
+    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
-      React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
+  });
-    );
 
-    await waitFor(() => {
+  it('loadPage 切换页面时不应加载无关页面模块', async () => {
-      expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    const { loadPage } = await import('@/config/pageLoaders/index');
-    });
+
+    await loadPage('jwt');
+
+    expect(pageLoadTracker.loaded).toEqual(['Jwt']);
+    expect(pageLoadTracker.loaded).not.toContain('QrCode');
+    expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
   });
 });

src/config/__tests__/features.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('应该有10个功能定义', () => {
+    it('应该有9个功能定义', () => {
-      expect(FEATURES).toHaveLength(10);
+      expect(FEATURES).toHaveLength(9);
     });
 
     it('应该有每个功能的所有必需属性', () => {
@@ -19,21 +19,14 @@ describe('features', () => {
         expect(feature).toHaveProperty('label');
         expect(feature).toHaveProperty('description');
         expect(feature).toHaveProperty('defaultVisible');
-        expect(feature).toHaveProperty('components');
+        expect(feature).not.toHaveProperty('component');
         expect(typeof feature.key).toBe('string');
         expect(typeof feature.label).toBe('string');
         expect(typeof feature.description).toBe('string');
         expect(typeof feature.defaultVisible).toBe('boolean');
-        expect(typeof feature.components).toBe('object');
+        expect(feature).toHaveProperty('icon');
-        expect(feature.components).toHaveProperty('popup');
+        expect(feature).toHaveProperty('themeColorKey');
-        expect(feature.components).toHaveProperty('sidepanel');
+        expect(typeof feature.themeColorKey).toBe('string');
-        expect(feature.components).toHaveProperty('tab');
-
-        if (feature.key !== 'dashboard') {
-          expect(feature).toHaveProperty('icon');
-          expect(feature).toHaveProperty('themeColorKey');
-          expect(typeof feature.themeColorKey).toBe('string');
-        }
       });
     });
 
@@ -45,13 +38,6 @@ describe('features', () => {
   });
 
   describe('getFeatureByKey', () => {
-    it('应该返回dashboard功能', () => {
-      const feature = getFeatureByKey('dashboard');
-      expect(feature).toBeDefined();
-      expect(feature?.key).toBe('dashboard');
-      expect(feature?.label).toBe('仪表盘');
-    });
-
     it('应该返回时间戳功能', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
@@ -82,9 +68,8 @@ describe('features', () => {
       });
     });
 
-    it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
+    it('应该包含时间戳、存储清理、二维码', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
-      expect(visibleKeys).toContain('dashboard');
       expect(visibleKeys).toContain('timestamp');
       expect(visibleKeys).toContain('storageCleaner');
       expect(visibleKeys).toContain('qrCode');
@@ -94,8 +79,7 @@ describe('features', () => {
   describe('getAllFeatureKeys', () => {
     it('应该返回所有功能key', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(10);
+      expect(allKeys).toHaveLength(9);
-      expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
       expect(allKeys).toContain('qrCode');
@@ -109,9 +93,9 @@ describe('features', () => {
   });
 
   describe('getDefaultPageOrder', () => {
-    it('应该排除仪表盘从页面顺序', () => {
+    it('应该包含所有工具页面', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).not.toContain('dashboard');
+      expect(pageOrder).toHaveLength(9);
     });
 
     it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
@@ -120,10 +104,5 @@ describe('features', () => {
       expect(pageOrder).toContain('storageCleaner');
       expect(pageOrder).toContain('qrCode');
     });
-
-    it('应该有9个项目在页面顺序', () => {
-      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(9);
-    });
   });
 });

src/config/featureMeta.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, lazy } from 'react';
+import type { ComponentType } from 'react';
 import type { LucideProps } from 'lucide-react';
 import type { PageType } from '@/types/storage';
 import {
@@ -15,18 +15,6 @@ import {
 
 export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
 
-// 懒加载页面组件
-const DashboardPage = lazy(() => import('@/pages/Dashboard'));
-const TimestampPage = lazy(() => import('@/pages/Timestamp'));
-const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
-const QrCodePage = lazy(() => import('@/pages/QrCode'));
-const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
-const JwtPage = lazy(() => import('@/pages/Jwt'));
-const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
-const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
-const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
-const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
-
 export interface FeatureConfig {
   key: PageType;
   label: string;
@@ -34,25 +22,9 @@ export interface FeatureConfig {
   themeColorKey?: PaletteColorKey;
   icon?: ComponentType<LucideProps>;
   defaultVisible: boolean;
-  components: {
-    popup: ComponentType;
-    sidepanel: ComponentType;
-    tab: ComponentType;
-  };
 }
 
 export const FEATURES: FeatureConfig[] = [
-  {
-    key: 'dashboard',
-    label: '仪表盘',
-    description: '',
-    defaultVisible: true,
-    components: {
-      popup: DashboardPage,
-      sidepanel: DashboardPage,
-      tab: DashboardPage,
-    },
-  },
   {
     key: 'timestamp',
     label: '时间戳',
@@ -60,11 +32,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'primary',
     icon: Clock,
     defaultVisible: true,
-    components: {
-      popup: TimestampPage,
-      sidepanel: TimestampPage,
-      tab: TimestampPage,
-    },
   },
   {
     key: 'storageCleaner',
@@ -73,11 +40,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'warning',
     icon: Database,
     defaultVisible: true,
-    components: {
-      popup: StorageCleanerPage,
-      sidepanel: StorageCleanerPage,
-      tab: StorageCleanerPage,
-    },
   },
   {
     key: 'qrCode',
@@ -86,11 +48,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'success',
     icon: QrCode,
     defaultVisible: true,
-    components: {
-      popup: QrCodePage,
-      sidepanel: QrCodePage,
-      tab: QrCodePage,
-    },
   },
   {
     key: 'textStatistics',
@@ -99,11 +56,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'secondary',
     icon: FileText,
     defaultVisible: true,
-    components: {
-      popup: TextStatisticsPage,
-      sidepanel: TextStatisticsPage,
-      tab: TextStatisticsPage,
-    },
   },
   {
     key: 'jwt',
@@ -112,11 +64,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'info',
     icon: Key,
     defaultVisible: true,
-    components: {
-      popup: JwtPage,
-      sidepanel: JwtPage,
-      tab: JwtPage,
-    },
   },
   {
     key: 'jsonTools',
@@ -125,11 +72,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'primary',
     icon: GitCompareArrows,
     defaultVisible: true,
-    components: {
-      popup: JsonToolsPage,
-      sidepanel: JsonToolsPage,
-      tab: JsonToolsPage,
-    },
   },
   {
     key: 'base64Converter',
@@ -138,11 +80,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'info',
     icon: ArrowLeftRight,
     defaultVisible: true,
-    components: {
-      popup: Base64ConverterPage,
-      sidepanel: Base64ConverterPage,
-      tab: Base64ConverterPage,
-    },
   },
   {
     key: 'rightClickRestorer',
@@ -151,11 +88,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'success',
     icon: MousePointerClick,
     defaultVisible: true,
-    components: {
-      popup: RightClickRestorerPage,
-      sidepanel: RightClickRestorerPage,
-      tab: RightClickRestorerPage,
-    },
   },
   {
     key: 'testDataGenerator',
@@ -164,11 +96,6 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'warning',
     icon: FileSpreadsheet,
     defaultVisible: true,
-    components: {
-      popup: TestDataGeneratorPage,
-      sidepanel: TestDataGeneratorPage,
-      tab: TestDataGeneratorPage,
-    },
   },
 ];
 
@@ -185,16 +112,5 @@ export function getAllFeatureKeys(): PageType[] {
 }
 
 export function getDefaultPageOrder(): PageType[] {
-  return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
+  return FEATURES.map((f) => f.key);
-}
-
-export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
-  const pathname = window.location.pathname;
-  if (pathname.includes('sidepanel')) {
-    return 'sidepanel';
-  }
-  if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
-    return 'tab';
-  }
-  return 'popup';
 }

src/config/features.ts

@@ -0,0 +1,8 @@
+export type { FeatureConfig, PaletteColorKey } from '@/config/featureMeta';
+export {
+  FEATURES,
+  getAllFeatureKeys,
+  getDefaultPageOrder,
+  getDefaultVisibleFeatureKeys,
+  getFeatureByKey,
+} from '@/config/featureMeta';

src/config/pageLoaders/base64Converter.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadBase64Converter(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Base64Converter');
+}

src/config/pageLoaders/index.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+import type { PageType } from '@/types/storage';
+
+type PageModule = { default: ComponentType };
+
+let pagesStylesLoaded = false;
+
+function ensurePagesStyles(): Promise<unknown> {
+  if (pagesStylesLoaded) {
+    return Promise.resolve();
+  }
+  pagesStylesLoaded = true;
+  return import('@/styles/pages.css');
+}
+
+export function loadPage(key: PageType): Promise<PageModule> {
+  return ensurePagesStyles().then(() => {
+    switch (key) {
+      case 'timestamp':
+        return import('@/config/pageLoaders/timestamp').then((m) => m.default());
+      case 'storageCleaner':
+        return import('@/config/pageLoaders/storageCleaner').then((m) => m.default());
+      case 'qrCode':
+        return import('@/config/pageLoaders/qrCode').then((m) => m.default());
+      case 'textStatistics':
+        return import('@/config/pageLoaders/textStatistics').then((m) => m.default());
+      case 'jwt':
+        return import('@/config/pageLoaders/jwt').then((m) => m.default());
+      case 'jsonTools':
+        return import('@/config/pageLoaders/jsonTools').then((m) => m.default());
+      case 'base64Converter':
+        return import('@/config/pageLoaders/base64Converter').then((m) => m.default());
+      case 'rightClickRestorer':
+        return import('@/config/pageLoaders/rightClickRestorer').then((m) => m.default());
+      case 'testDataGenerator':
+        return import('@/config/pageLoaders/testDataGenerator').then((m) => m.default());
+      default: {
+        const _exhaustive: never = key;
+        return Promise.reject(new Error(`Unknown page: ${String(_exhaustive)}`));
+      }
+    }
+  });
+}

src/config/pageLoaders/jsonTools.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadJsonTools(): Promise<{ default: ComponentType }> {
+  return import('@/pages/JsonTools');
+}

src/config/pageLoaders/jwt.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadJwt(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Jwt');
+}

src/config/pageLoaders/qrCode.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadQrCode(): Promise<{ default: ComponentType }> {
+  return import('@/pages/QrCode');
+}

src/config/pageLoaders/rightClickRestorer.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadRightClickRestorer(): Promise<{ default: ComponentType }> {
+  return import('@/pages/RightClickRestorer');
+}

src/config/pageLoaders/storageCleaner.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadStorageCleaner(): Promise<{ default: ComponentType }> {
+  return import('@/pages/StorageCleaner');
+}

src/config/pageLoaders/testDataGenerator.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTestDataGenerator(): Promise<{ default: ComponentType }> {
+  return import('@/pages/TestDataGenerator');
+}

src/config/pageLoaders/textStatistics.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTextStatistics(): Promise<{ default: ComponentType }> {
+  return import('@/pages/TextStatistics');
+}

src/config/pageLoaders/timestamp.ts

@@ -0,0 +1,5 @@
+import type { ComponentType } from 'react';
+
+export default function loadTimestamp(): Promise<{ default: ComponentType }> {
+  return import('@/pages/Timestamp');
+}

src/entrypoints/background.ts

@@ -1,6 +1,6 @@
 import '../../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
-import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
+import { MessageAction, onMessage } from '@/utils/messages';
 import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
 import { saveContextMenuData } from '@/utils/useContextMenuData';
 import { mainWorldInjectionScript } from '@/utils/rightClickInjection';
@@ -24,18 +24,6 @@ export default defineBackground(() => {
 
     const { featureKey, payload } = result.data;
 
-    try {
-      const sidePanelState = await browser.storage.local.get('sidePanelOpen');
-      const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
-
-      if (isSidePanelOpen) {
-        await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
-        return;
-      }
-    } catch (err) {
-      console.debug('[Context Menu] Side panel pipeline is not available:', err);
-    }
-
     await saveContextMenuData({ featureKey, payload });
 
     try {
@@ -45,17 +33,6 @@ export default defineBackground(() => {
     }
   });
 
-  // 扩展图标点击时打开侧边栏
-  browser.action.onClicked.addListener(async (tab) => {
-    if (tab.id) {
-      try {
-        await browser.sidePanel.open({ tabId: tab.id });
-      } catch (err) {
-        console.error('Failed to open side panel via extension action clicked:', err);
-      }
-    }
-  });
-
   // 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
   onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
     const sender = message.sender as chrome.runtime.MessageSender | undefined;

src/entrypoints/popup/App.tsx

@@ -1,35 +1,23 @@
 import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/layout/TopBar';
+import FeatureNav from '@/layout/FeatureNav';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
-import { getEntryPointType } from '@/config/features';
+
 export default function App() {
-  const entryType = getEntryPointType();
-
-  const routerConfig =
-    entryType === 'tab'
-      ? {
-          syncKey: 'app/tabRoute' as const,
-          visiblePagesKey: 'app/tabVisiblePages' as const,
-          pageOrderKey: 'app/tabPageOrder' as const,
-        }
-      : {
-          syncKey: 'app/popupRoute' as const,
-          visiblePagesKey: 'app/popupVisiblePages' as const,
-          pageOrderKey: 'app/popupPageOrder' as const,
-        };
-
   return (
     <RouterProvider
-      syncKey={routerConfig.syncKey}
+      defaultRoute="timestamp"
-      visiblePagesKey={routerConfig.visiblePagesKey}
+      syncKey="app/popupRoute"
-      pageOrderKey={routerConfig.pageOrderKey}
+      visiblePagesKey="app/popupVisiblePages"
+      pageOrderKey="app/popupPageOrder"
     >
-      <div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
+      <div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
-        <TopBar />
+        <div className="flex flex-1 min-w-0 flex-col">
-        <ErrorBoundary>
+          <ErrorBoundary>
-          <RouterContainer />
+            <RouterContainer />
-        </ErrorBoundary>
+          </ErrorBoundary>
+        </div>
+        <FeatureNav />
       </div>
     </RouterProvider>
   );

src/entrypoints/popup/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Testing Tools - 标签页</title>
+    <title>Testing Tools</title>
     <meta name="manifest.type" content="browser_action" />
     <script>
       (function () {
@@ -21,7 +21,7 @@
     <style>
       /* Force initial popup size before React hydration */
       html, body {
-        width: 400px;
+        width: 450px;
         height: 600px;
         margin: 0;
         padding: 0;
@@ -33,13 +33,6 @@
         width: 100%;
         height: 100%;
       }
-      /* If opened in a tab (mode=tab), reset the fixed size */
-      @media screen and (min-width: 600px) {
-        html, body {
-          width: 100%;
-          height: 100%;
-        }
-      }
     </style>
   </head>
   <body>

src/entrypoints/popup/main.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
+import '@/styles/shell.css';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/entrypoints/sidepanel/App.tsx

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/layout/TopBar';
-import RouterContainer from '@/components/RouterContainer';
-import ErrorBoundary from '@/components/ErrorBoundary';
-import { MessageAction, sendMessage } from '@/utils/messages';
-
-export default function App() {
-  useEffect(() => {
-    sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
-    return () => {
-      sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
-    };
-  }, []);
-
-  return (
-    <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
-      <div className="app flex flex-col h-screen w-full overflow-hidden">
-        <TopBar />
-        <ErrorBoundary>
-          <RouterContainer />
-        </ErrorBoundary>
-      </div>
-    </RouterProvider>
-  );
-}

src/entrypoints/sidepanel/index.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Testing Tools - Side Panel</title>
-    <script>
-      (function () {
-        try {
-          var raw = localStorage.getItem('snapshot/app/themeMode');
-          var mode = raw ? JSON.parse(raw) : 'system';
-          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
-          var isDark =
-            mode === 'dark' ||
-            (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-          if (isDark) document.documentElement.classList.add('dark');
-        } catch (_error) {}
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>

src/entrypoints/sidepanel/main.tsx

@@ -1,10 +0,0 @@
-import ReactDOM from 'react-dom/client';
-import AppRoot from '@/providers/AppRoot';
-import '@/index.css';
-import App from './App.tsx';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <AppRoot>
-    <App />
-  </AppRoot>,
-);

src/hooks/useMediaQuery.ts

@@ -0,0 +1,25 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+/**
+ * 监听媒体查询，返回是否匹配。
+ * 用于在窄屏（popup/sidepanel）与宽屏（tab）间切换布局。
+ */
+export function useMediaQuery(query: string): boolean {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (typeof window === 'undefined' || !window.matchMedia) return () => {};
+      const mql = window.matchMedia(query);
+      mql.addEventListener('change', onChange);
+      return () => mql.removeEventListener('change', onChange);
+    },
+    [query],
+  );
+
+  const getSnapshot = useCallback(
+    () =>
+      typeof window !== 'undefined' && window.matchMedia ? window.matchMedia(query).matches : false,
+    [query],
+  );
+
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}

src/layout/FeatureNav/ThemeToggleButton.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+import { useThemeToggle } from './useThemeToggle';
+
+export default function ThemeToggleButton() {
+  const { ThemeIcon, themeTitle, cycleThemeMode } = useThemeToggle();
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      onClick={cycleThemeMode}
+      title={themeTitle}
+      aria-label={themeTitle}
+      className="h-9 w-9 text-muted-foreground hover:text-foreground"
+    >
+      <ThemeIcon className="h-4 w-4" aria-hidden="true" />
+    </Button>
+  );
+}

src/layout/FeatureNav/__tests__/index.test.tsx

@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { PageType } from '@/types/storage';
+import FeatureNav from '@/layout/FeatureNav';
+import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockNavigateTo = vi.fn();
+
+const mockRouterValue = {
+  currentPage: 'timestamp' as PageType,
+  visiblePages: ['timestamp', 'jwt', 'storageCleaner'] as PageType[],
+  pageOrder: ['jwt', 'timestamp', 'storageCleaner'] as PageType[],
+  recentlyUsedTools: [] as PageType[],
+  isLoaded: true,
+  navigateTo: mockNavigateTo,
+  setVisiblePages: vi.fn(),
+  setPageOrder: vi.fn(),
+};
+
+vi.mock('@/providers/RouterProvider', () => ({
+  useRouter: () => mockRouterValue,
+}));
+
+describe('FeatureNav 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockRouterValue.currentPage = 'timestamp';
+    mockRouterValue.pageOrder = ['jwt', 'timestamp', 'storageCleaner'];
+    mockRouterValue.visiblePages = ['timestamp', 'jwt', 'storageCleaner'];
+  });
+
+  const renderFeatureNav = () =>
+    render(
+      <ThemeModeProvider>
+        <FeatureNav />
+      </ThemeModeProvider>,
+    );
+
+  it('应渲染全部可见工具图标', () => {
+    renderFeatureNav();
+
+    expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument();
+    expect(screen.getByLabelText('时间戳')).toBeInTheDocument();
+    expect(screen.getByLabelText('存储清理')).toBeInTheDocument();
+  });
+
+  it('点击图标应调用 navigateTo', () => {
+    renderFeatureNav();
+
+    fireEvent.click(screen.getByLabelText('JWT 解析'));
+    expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
+  });
+
+  it('当前页对应项应有 active 样式与 aria-current', () => {
+    renderFeatureNav();
+
+    const activeButton = screen.getByLabelText('时间戳');
+    expect(activeButton).toHaveAttribute('aria-current', 'page');
+    expect(activeButton).toHaveClass('bg-muted');
+    expect(activeButton).toHaveClass('border-primary');
+  });
+
+  it('应渲染主题切换按钮', () => {
+    renderFeatureNav();
+
+    expect(screen.getByLabelText(/切换到/)).toBeInTheDocument();
+  });
+});

src/layout/FeatureNav/__tests__/resolveNavFeatures.test.ts

@@ -1,14 +1,14 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import * as featureConfig from '@/config/features';
-import { resolveDashboardFeatures } from '../dashboardFeatures';
+import { resolveNavFeatures } from '../resolveNavFeatures';
 
-describe('resolveDashboardFeatures', () => {
+describe('resolveNavFeatures', () => {
   beforeEach(() => {
     vi.restoreAllMocks();
   });
 
-  it('应按 keys 顺序返回可见工具，并排除 dashboard', () => {
+  it('应按 keys 顺序返回可见工具', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp', 'jwt']);
 
     expect(items.map((item) => item.key)).toEqual(['jwt', 'timestamp']);
     expect(items.map((item) => item.feature.label)).toEqual(['JWT 解析', '时间戳']);
@@ -24,25 +24,34 @@ describe('resolveDashboardFeatures', () => {
       return feature;
     });
 
-    const items = resolveDashboardFeatures(['timestamp'], ['dashboard', 'timestamp']);
+    const items = resolveNavFeatures(['timestamp'], ['timestamp']);
 
     expect(items.map((item) => item.key)).toEqual(['timestamp']);
   });
 
   it('应过滤不在 visiblePages 中的工具', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp']);
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['timestamp']);
 
     expect(items.map((item) => item.key)).toEqual(['timestamp']);
   });
 
   it('visiblePages 无匹配工具时应返回空列表', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard']);
+    const items = resolveNavFeatures(['jwt', 'timestamp'], []);
 
     expect(items).toEqual([]);
   });
 
   it('应过滤缺少 icon 的工具', () => {
-    const items = resolveDashboardFeatures(['dashboard', 'timestamp'], ['dashboard', 'timestamp']);
+    const originalGetFeatureByKey = featureConfig.getFeatureByKey;
+    vi.spyOn(featureConfig, 'getFeatureByKey').mockImplementation((key) => {
+      const feature = originalGetFeatureByKey(key);
+      if (key === 'jwt' && feature) {
+        return { ...feature, icon: undefined };
+      }
+      return feature;
+    });
+
+    const items = resolveNavFeatures(['jwt', 'timestamp'], ['jwt', 'timestamp']);
 
     expect(items.map((item) => item.key)).toEqual(['timestamp']);
   });

src/layout/FeatureNav/index.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+import ThemeToggleButton from './ThemeToggleButton';
+import { useFeatureNav } from './useFeatureNav';
+
+export default function FeatureNav() {
+  const { navItems, currentPage, navigateTo } = useFeatureNav();
+
+  return (
+    <nav aria-label="功能导航" className="flex w-12 shrink-0 flex-col border-l border-border py-2">
+      <div className="flex flex-1 flex-col items-center gap-1 overflow-y-auto">
+        {navItems.map(({ key, feature }) => {
+          const Icon = feature.icon;
+          const isActive = currentPage === key;
+
+          return (
+            <button
+              key={key}
+              type="button"
+              title={feature.label}
+              aria-label={feature.label}
+              aria-current={isActive ? 'page' : undefined}
+              onClick={() => navigateTo(key)}
+              className={cn(
+                'flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+                isActive && 'border-l-2 border-primary bg-muted text-foreground',
+              )}
+            >
+              <Icon className="h-4 w-4" aria-hidden="true" />
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mt-1 flex shrink-0 items-center justify-center border-t border-border pt-1">
+        <ThemeToggleButton />
+      </div>
+    </nav>
+  );
+}

src/layout/FeatureNav/resolveNavFeatures.ts

@@ -0,0 +1,27 @@
+import { getFeatureByKey, type FeatureConfig } from '@/config/features';
+import type { PageType } from '@/types/storage';
+
+export interface NavFeatureItem {
+  key: PageType;
+  feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
+}
+
+function isNavFeature(feature: FeatureConfig): feature is NavFeatureItem['feature'] {
+  return feature.icon != null;
+}
+
+export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[] {
+  const visibleSet = new Set(visiblePages);
+  const items: NavFeatureItem[] = [];
+
+  for (const key of keys) {
+    if (!visibleSet.has(key)) continue;
+
+    const feature = getFeatureByKey(key);
+    if (!feature || !isNavFeature(feature)) continue;
+
+    items.push({ key, feature });
+  }
+
+  return items;
+}

src/layout/FeatureNav/useFeatureNav.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { useRouter } from '@/providers/RouterProvider';
+import type { PageType } from '@/types/storage';
+import { resolveNavFeatures, type NavFeatureItem } from './resolveNavFeatures';
+
+export interface UseFeatureNavReturn {
+  navItems: NavFeatureItem[];
+  currentPage: PageType;
+  navigateTo: (page: PageType) => void;
+}
+
+export function useFeatureNav(): UseFeatureNavReturn {
+  const { currentPage, pageOrder, visiblePages, navigateTo } = useRouter();
+
+  const navItems = useMemo(
+    () => resolveNavFeatures(pageOrder, visiblePages),
+    [pageOrder, visiblePages],
+  );
+
+  return { navItems, currentPage, navigateTo };
+}

src/layout/FeatureNav/useThemeToggle.ts

@@ -0,0 +1,24 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useThemeMode } from '@/providers/ThemeModeProvider';
+
+export interface UseThemeToggleReturn {
+  ThemeIcon: typeof Sun;
+  themeTitle: string;
+  cycleThemeMode: () => void;
+}
+
+export function useThemeToggle(): UseThemeToggleReturn {
+  const { mode, setMode } = useThemeMode();
+
+  const cycleThemeMode = () => {
+    const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
+    setMode(nextMap[mode]);
+  };
+
+  const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
+
+  const themeTitle =
+    mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
+
+  return { ThemeIcon, themeTitle, cycleThemeMode };
+}

src/layout/README.md

@@ -4,23 +4,21 @@
 
 ## 组件列表
 
-| 目录      | 用途                                                           |
+| 目录          | 用途                                       |
-| --------- | -------------------------------------------------------------- |
+| ------------- | ------------------------------------------ |
-| `TopBar/` | 顶部导航栏：搜索（含历史记录）、主题切换、返回导航、标签页打开 |
+| `FeatureNav/` | 右侧功能导航栏：工具图标切换、底部主题切换 |
 
 ## 目录结构
 
 遵循与 `pages/` 相同的 UI + Hook 分离模式：
 
 ```
-layout/TopBar/
+layout/FeatureNav/
-├── index.tsx              # 布局入口
+├── index.tsx              # 垂直图标导航 + 底部主题按钮
-├── useTopBar.ts           # 业务逻辑 Hook
+├── useFeatureNav.ts       # 读路由状态，暴露 navItems / navigateTo
-├── constants.ts           # 常量
+├── useThemeToggle.ts      # 主题模式循环切换逻辑
-├── SearchInput.tsx        # 搜索输入框
+├── ThemeToggleButton.tsx  # 主题切换按钮
-├── SearchDropdown.tsx     # 搜索结果/历史下拉面板
+├── resolveNavFeatures.ts  # 功能列表解析
-├── SearchResultItem.tsx   # 单条搜索结果项
-├── TopBarActions.tsx      # 右侧操作按钮组
 └── __tests__/
     └── index.test.tsx
 ```

src/layout/TopBar/SearchDropdown.tsx

@@ -1,45 +0,0 @@
-import { type FeatureConfig } from '@/config/features';
-import SearchResultItem from './SearchResultItem';
-
-interface SearchDropdownProps {
-  searchQuery: string;
-  searchResults: FeatureConfig[];
-  recentFeatures: FeatureConfig[];
-  selectedIndex: number;
-  onSelect: (feature: FeatureConfig) => void;
-}
-
-export default function SearchDropdown({
-  searchQuery,
-  searchResults,
-  recentFeatures,
-  selectedIndex,
-  onSelect,
-}: SearchDropdownProps) {
-  const isSearching = searchQuery.trim().length > 0;
-  const items = isSearching ? searchResults : recentFeatures;
-
-  return (
-    <div className="absolute left-0 right-0 top-full z-50 mt-1.5 max-h-80 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in slide-in-from-top-2 duration-150">
-      <ul role="listbox" className="p-1.5">
-        {!isSearching && items.length > 0 && (
-          <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-            最近搜索
-          </div>
-        )}
-        {isSearching && items.length === 0 ? (
-          <li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>
-        ) : (
-          items.map((feature, index) => (
-            <SearchResultItem
-              key={feature.key}
-              feature={feature}
-              selected={selectedIndex === index}
-              onSelect={onSelect}
-            />
-          ))
-        )}
-      </ul>
-    </div>
-  );
-}

src/layout/TopBar/SearchInput.tsx

@@ -1,57 +0,0 @@
-import { type RefObject } from 'react';
-import { Search, X } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { getSearchShortcutLabel } from './constants';
-
-interface SearchInputProps {
-  inputRef: RefObject<HTMLInputElement | null>;
-  searchQuery: string;
-  onSearchQueryChange: (value: string) => void;
-  onFocus: () => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
-  onClear: () => void;
-}
-
-export default function SearchInput({
-  inputRef,
-  searchQuery,
-  onSearchQueryChange,
-  onFocus,
-  onKeyDown,
-  onClear,
-}: SearchInputProps) {
-  return (
-    <div className="group relative">
-      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60 transition-colors group-focus-within:text-muted-foreground" />
-      <Input
-        ref={inputRef}
-        type="text"
-        placeholder="搜索工具..."
-        value={searchQuery}
-        onChange={(e) => onSearchQueryChange(e.target.value)}
-        onFocus={onFocus}
-        onKeyDown={onKeyDown}
-        aria-label="搜索工具..."
-        className="h-9 rounded-lg border-border/60 bg-muted/40 pl-9 pr-16 shadow-none focus-visible:ring-1 focus-visible:ring-offset-0 placeholder:text-muted-foreground/50"
-      />
-      {!searchQuery && (
-        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
-          {getSearchShortcutLabel()}
-        </kbd>
-      )}
-      {searchQuery && (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClear}
-          aria-label="清除搜索"
-          className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-        >
-          <X className="h-3 w-3" />
-        </Button>
-      )}
-    </div>
-  );
-}

src/layout/TopBar/SearchResultItem.tsx

@@ -1,30 +0,0 @@
-import { type FeatureConfig } from '@/config/features';
-import { cn } from '@/lib/utils';
-
-interface SearchResultItemProps {
-  feature: FeatureConfig;
-  selected: boolean;
-  onSelect: (feature: FeatureConfig) => void;
-}
-
-export default function SearchResultItem({ feature, selected, onSelect }: SearchResultItemProps) {
-  return (
-    <li
-      role="option"
-      aria-selected={selected}
-      onClick={() => onSelect(feature)}
-      className={cn(
-        'flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors',
-        selected ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60',
-      )}
-    >
-      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted/80 text-muted-foreground">
-        {feature.icon && <feature.icon className="h-4 w-4" />}
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate font-medium text-foreground">{feature.label}</p>
-        <p className="mt-0.5 truncate text-xs text-muted-foreground">{feature.description}</p>
-      </div>
-    </li>
-  );
-}

src/layout/TopBar/TopBarActions.tsx

@@ -1,34 +0,0 @@
-import { type LucideIcon } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-interface TopBarAction {
-  id: string;
-  icon: LucideIcon;
-  title: string;
-  onClick: () => void;
-}
-
-interface TopBarActionsProps {
-  actions: TopBarAction[];
-}
-
-export default function TopBarActions({ actions }: TopBarActionsProps) {
-  return (
-    <div className="flex shrink-0 items-center gap-1">
-      {actions.map(({ id, icon: Icon, title, onClick }) => (
-        <Button
-          key={id}
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={onClick}
-          title={title}
-          aria-label={title}
-          className="h-8 w-8 text-muted-foreground"
-        >
-          <Icon className="h-4 w-4" />
-        </Button>
-      ))}
-    </div>
-  );
-}

src/layout/TopBar/__tests__/constants.test.ts

@@ -1,37 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getSearchShortcutLabel } from '@/layout/TopBar/constants';
-
-describe('getSearchShortcutLabel', () => {
-  const originalUserAgent = navigator.userAgent;
-
-  afterEach(() => {
-    vi.stubGlobal('navigator', { ...navigator, userAgent: originalUserAgent });
-  });
-
-  it('macOS 应显示 ⌘K', () => {
-    vi.stubGlobal('navigator', {
-      ...navigator,
-      userAgent:
-        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
-    });
-    expect(getSearchShortcutLabel()).toBe('⌘K');
-  });
-
-  it('Windows 应显示 Ctrl+K', () => {
-    vi.stubGlobal('navigator', {
-      ...navigator,
-      userAgent:
-        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
-    });
-    expect(getSearchShortcutLabel()).toBe('Ctrl+K');
-  });
-
-  it('Linux 应显示 Ctrl+K', () => {
-    vi.stubGlobal('navigator', {
-      ...navigator,
-      userAgent:
-        'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
-    });
-    expect(getSearchShortcutLabel()).toBe('Ctrl+K');
-  });
-});

src/layout/TopBar/__tests__/index.test.tsx

@@ -1,76 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { fireEvent, render, screen } from '@testing-library/react';
-import type { PageType } from '@/types/storage';
-import React from 'react';
-import TopBar from '@/layout/TopBar';
-import { RouterProvider } from '@/providers/RouterProvider';
-import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-const mockRouterValue = {
-  currentPage: 'dashboard' as PageType,
-  visiblePages: ['dashboard', 'timestamp'] as PageType[],
-  pageOrder: ['timestamp'] as PageType[],
-  isLoaded: true,
-  navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
-  setVisiblePages: vi.fn(),
-  setPageOrder: vi.fn(),
-};
-
-vi.mock('@/providers/RouterProvider', () => ({
-  useRouter: () => mockRouterValue,
-  RouterProvider: ({ children }: { children: React.ReactNode }) => children,
-}));
-
-describe('TopBar 组件', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  const renderWithProvider = (ui: React.ReactElement) => {
-    return render(
-      <ThemeModeProvider>
-        <RouterProvider>{ui}</RouterProvider>
-      </ThemeModeProvider>,
-    );
-  };
-
-  describe('渲染测试', () => {
-    it('不在 dashboard 时应渲染返回按钮', () => {
-      mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar />);
-      expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
-    });
-
-    it('在 dashboard 上不应渲染返回按钮', () => {
-      mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<TopBar />);
-      expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('交互测试', () => {
-    it('点击返回按钮时应调用 goHome', () => {
-      mockRouterValue.currentPage = 'timestamp';
-      renderWithProvider(<TopBar />);
-
-      fireEvent.click(screen.getByLabelText('返回首页'));
-      expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
-    });
-  });
-});

src/layout/TopBar/constants.ts

@@ -1,9 +0,0 @@
-export const SEARCH_HISTORY_LIMIT = 10;
-export const SEARCH_HISTORY_DISPLAY = 5;
-
-export const isSearchHistory = (val: unknown): val is string[] =>
-  Array.isArray(val) && val.every((item) => typeof item === 'string');
-
-export function getSearchShortcutLabel(): string {
-  return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
-}

src/layout/TopBar/index.tsx

@@ -1,82 +0,0 @@
-import { ArrowLeft, ExternalLink } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import SearchDropdown from './SearchDropdown';
-import SearchInput from './SearchInput';
-import TopBarActions from './TopBarActions';
-import { useTopBar } from './useTopBar';
-
-export default function TopBar() {
-  const {
-    searchQuery,
-    searchResults,
-    recentFeatures,
-    selectedIndex,
-    isDashboard,
-    ThemeIcon,
-    themeTitle,
-    showDropdown,
-    containerRef,
-    inputRef,
-    handleSearchQueryChange,
-    handleSearchFocus,
-    handleSelectFeature,
-    handleKeyDown,
-    cycleThemeMode,
-    handleOpenInTab,
-    goHome,
-    clearSearch,
-  } = useTopBar();
-
-  const actions = [
-    { id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
-    {
-      id: 'open-in-tab',
-      icon: ExternalLink,
-      title: '在标签页打开',
-      onClick: () => {
-        void handleOpenInTab();
-      },
-    },
-  ];
-
-  return (
-    <header className="relative z-50 flex h-14 items-center justify-between border-b border-border bg-background px-4">
-      <div className="flex w-10 items-center justify-start">
-        {!isDashboard && (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            onClick={goHome}
-            aria-label="返回首页"
-            className="h-8 w-8 shadow-sm text-muted-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-        )}
-      </div>
-
-      <div ref={containerRef} className="relative mx-4 max-w-md flex-1">
-        <SearchInput
-          inputRef={inputRef}
-          searchQuery={searchQuery}
-          onSearchQueryChange={handleSearchQueryChange}
-          onFocus={handleSearchFocus}
-          onKeyDown={handleKeyDown}
-          onClear={clearSearch}
-        />
-        {showDropdown && (
-          <SearchDropdown
-            searchQuery={searchQuery}
-            searchResults={searchResults}
-            recentFeatures={recentFeatures}
-            selectedIndex={selectedIndex}
-            onSelect={handleSelectFeature}
-          />
-        )}
-      </div>
-
-      <TopBarActions actions={actions} />
-    </header>
-  );
-}

src/layout/TopBar/useTopBar.ts

@@ -1,175 +0,0 @@
-import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { useRouter } from '@/providers/RouterProvider';
-import { useThemeMode } from '@/providers/ThemeModeProvider';
-import { type FeatureConfig, FEATURES } from '@/config/features';
-import { useStorageState } from '@/utils/useStorageState';
-import { openExtensionPage } from '@/utils/chromeTabs';
-import { isSearchHistory, SEARCH_HISTORY_DISPLAY, SEARCH_HISTORY_LIMIT } from './constants';
-
-export interface UseTopBarReturn {
-  searchQuery: string;
-  searchResults: FeatureConfig[];
-  recentFeatures: FeatureConfig[];
-  selectedIndex: number;
-  isDashboard: boolean;
-  ThemeIcon: typeof Sun;
-  themeTitle: string;
-  showDropdown: boolean;
-  containerRef: RefObject<HTMLDivElement | null>;
-  inputRef: RefObject<HTMLInputElement | null>;
-  handleSearchQueryChange: (value: string) => void;
-  handleSearchFocus: () => void;
-  handleSelectFeature: (feature: FeatureConfig) => void;
-  handleKeyDown: (e: React.KeyboardEvent) => void;
-  cycleThemeMode: () => void;
-  handleOpenInTab: () => Promise<void>;
-  goHome: () => void;
-  clearSearch: () => void;
-}
-
-export function useTopBar(): UseTopBarReturn {
-  const { currentPage, goHome, navigateTo } = useRouter();
-  const { mode, setMode } = useThemeMode();
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showResults, setShowResults] = useState(false);
-  const [searchHistory, setSearchHistory] = useStorageState(
-    'app/searchHistory',
-    [],
-    isSearchHistory,
-  );
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleOpenInTab = async () => {
-    await openExtensionPage('popup.html', { mode: 'tab' });
-    window.close();
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setShowResults(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        inputRef.current?.focus();
-        setShowResults(true);
-      }
-    };
-    document.addEventListener('keydown', handleGlobalKeyDown);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, []);
-
-  const searchResults = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return [];
-    return FEATURES.filter((f) => {
-      if (f.key === 'dashboard') return false;
-      return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
-    });
-  }, [searchQuery]);
-
-  const displayedHistory = useMemo(() => {
-    if (searchQuery.trim()) return [];
-    return searchHistory
-      .slice(0, SEARCH_HISTORY_DISPLAY)
-      .map((key) => FEATURES.find((f) => f.key === key))
-      .filter((feature): feature is FeatureConfig => !!feature && feature.key !== 'dashboard');
-  }, [searchHistory, searchQuery]);
-
-  const saveToHistory = (featureKey: string) => {
-    setSearchHistory((prev) =>
-      [featureKey, ...prev.filter((h) => h !== featureKey)].slice(0, SEARCH_HISTORY_LIMIT),
-    );
-  };
-
-  const handleSelectFeature = (feature: FeatureConfig) => {
-    navigateTo(feature.key);
-    saveToHistory(feature.key);
-    setSearchQuery('');
-    setShowResults(false);
-  };
-
-  const cycleThemeMode = () => {
-    const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
-    setMode(nextMap[mode]);
-  };
-
-  const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
-
-  const themeTitle =
-    mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      const items = searchQuery.trim() ? searchResults : displayedHistory;
-      const feature =
-        selectedIndex >= 0 && selectedIndex < totalItems
-          ? items[selectedIndex]
-          : searchQuery.trim() && searchResults.length > 0
-            ? searchResults[0]
-            : undefined;
-      if (feature) handleSelectFeature(feature);
-    } else if (e.key === 'Escape') {
-      setShowResults(false);
-      inputRef.current?.blur();
-    }
-  };
-
-  const clearSearch = () => {
-    setSearchQuery('');
-    setSelectedIndex(-1);
-  };
-
-  const handleSearchQueryChange = (value: string) => {
-    setSearchQuery(value);
-    setShowResults(true);
-    setSelectedIndex(-1);
-  };
-
-  const handleSearchFocus = () => setShowResults(true);
-
-  const showDropdown =
-    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
-
-  return {
-    searchQuery,
-    searchResults,
-    recentFeatures: displayedHistory,
-    selectedIndex,
-    showDropdown,
-    isDashboard: currentPage === 'dashboard',
-    ThemeIcon,
-    themeTitle,
-    containerRef,
-    inputRef,
-    handleSearchQueryChange,
-    handleSearchFocus,
-    handleSelectFeature,
-    handleKeyDown,
-    cycleThemeMode,
-    handleOpenInTab,
-    goHome,
-    clearSearch,
-  };
-}

src/pages/Base64Converter/__tests__/index.test.tsx

@@ -2,15 +2,6 @@ import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import Base64ConverterPage from '../index';
 
-// Mock getEntryPointType
-vi.mock('@/config/features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/config/features')>();
-  return {
-    ...actual,
-    getEntryPointType: () => 'sidepanel',
-  };
-});
-
 // Mock 子组件
 vi.mock('../components/TextMode', () => ({
   default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
@@ -22,7 +13,9 @@ vi.mock('../components/TextMode', () => ({
 }));
 
 vi.mock('../components/Base64ConverterSection', () => ({
-  default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
+  default: ({ mode }: { mode: 'file' | 'image' }) => (
+    <div data-testid={`${mode}-mode`}>{mode.toUpperCase()} Mode</div>
+  ),
 }));
 
 const waitForStorageInit = () =>

src/pages/Base64Converter/components/Base64ConverterSection.tsx

@@ -50,10 +50,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
     setDirection(next);
   };
 
-  const handleDownload = () => {
-    if (decoded) downloadBlob(decoded.blob, decodedFileName);
-  };
-
   return (
     <div className="w-full flex flex-col space-y-4 px-2">
       <div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
@@ -115,7 +111,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                     />
                   </div>
                 )}
-                <Upload className={cn('w-8 h-8 text-primary')} />
+                <Upload className="w-8 h-8 text-primary" />
                 <span className="text-sm font-bold text-foreground/90 max-w-[280px] truncate">
                   {info.name}
                 </span>
@@ -137,11 +133,11 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
                 </span>
                 <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {`最大文件大小：${maxFileSizeStr}`}
+                  最大文件大小：{maxFileSizeStr}
                 </span>
                 {mode === 'image' && (
                   <span className="text-[10px] font-medium text-muted-foreground/50">
-                    {'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
+                    支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式
                   </span>
                 )}
               </div>
@@ -231,7 +227,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
               blobSize={decoded.blob.size}
               fileName={decodedFileName}
               onFileNameChange={setCustomFileName}
-              onDownload={handleDownload}
+              onDownload={() => downloadBlob(decoded.blob, decodedFileName)}
             >
               {mode === 'image' && (
                 <div className="relative p-1.5 border border-border bg-background dark:bg-muted/10 rounded-xl max-w-[220px] mb-3 overflow-hidden shadow-sm">

src/pages/Dashboard/__tests__/index.test.tsx

@@ -1,95 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { resolveDashboardFeatures, type DashboardFeatureItem } from '../dashboardFeatures';
-import Index from '../index';
-
-const mockNavigateTo = vi.fn();
-const mockUseDashboard = vi.fn();
-
-vi.mock('../useDashboard', () => ({
-  useDashboard: () => mockUseDashboard(),
-}));
-
-function buildFeatureItem(key: 'timestamp' | 'jwt'): DashboardFeatureItem {
-  return resolveDashboardFeatures([key], [key])[0]!;
-}
-
-describe('Dashboard 页面', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp'), buildFeatureItem('jwt')],
-      recentFeatures: [],
-      showRecent: false,
-      navigateTo: mockNavigateTo,
-    });
-  });
-
-  it('应渲染全部工具网格', () => {
-    render(<Index />);
-
-    expect(screen.getByText('全部工具')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: '时间戳' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
-  });
-
-  it('点击工具卡片应触发 navigateTo', async () => {
-    const user = userEvent.setup();
-    render(<Index />);
-
-    await user.click(screen.getByRole('button', { name: '时间戳' }));
-
-    expect(mockNavigateTo).toHaveBeenCalledTimes(1);
-    expect(mockNavigateTo).toHaveBeenCalledWith('timestamp');
-  });
-
-  it('有最近使用数据时应显示最近使用区块', () => {
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp')],
-      recentFeatures: [buildFeatureItem('jwt')],
-      showRecent: true,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    expect(screen.getByText('最近使用')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'JWT 解析' })).toBeInTheDocument();
-  });
-
-  it('无最近使用数据时不应显示最近使用区块', () => {
-    render(<Index />);
-
-    expect(screen.queryByText('最近使用')).not.toBeInTheDocument();
-  });
-
-  it('点击最近使用按钮应触发 navigateTo', async () => {
-    const user = userEvent.setup();
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [buildFeatureItem('timestamp')],
-      recentFeatures: [buildFeatureItem('jwt')],
-      showRecent: true,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    await user.click(screen.getByRole('button', { name: 'JWT 解析' }));
-
-    expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
-  });
-
-  it('无可见工具时应显示空状态', () => {
-    mockUseDashboard.mockReturnValue({
-      visibleFeatures: [],
-      recentFeatures: [],
-      showRecent: false,
-      navigateTo: mockNavigateTo,
-    });
-
-    render(<Index />);
-
-    expect(screen.getByText('没有可用的工具')).toBeInTheDocument();
-  });
-});

src/pages/Dashboard/__tests__/useDashboard.test.ts

@@ -1,78 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { useRouter } from '@/providers/RouterProvider';
-import { useDashboard } from '../useDashboard';
-import type { PageType } from '@/types/storage';
-
-vi.mock('@/providers/RouterProvider', () => ({
-  useRouter: vi.fn(),
-}));
-
-const mockNavigateTo = vi.fn();
-
-function mockRouterState(
-  overrides: {
-    visiblePages?: PageType[];
-    pageOrder?: PageType[];
-    recentlyUsedTools?: PageType[];
-  } = {},
-) {
-  vi.mocked(useRouter).mockReturnValue({
-    currentPage: 'dashboard',
-    visiblePages: overrides.visiblePages ?? ['dashboard', 'timestamp', 'jwt'],
-    pageOrder: overrides.pageOrder ?? ['jwt', 'timestamp'],
-    recentlyUsedTools: overrides.recentlyUsedTools ?? [],
-    isLoaded: true,
-    navigateTo: mockNavigateTo,
-    goHome: vi.fn(),
-    setVisiblePages: vi.fn(),
-    setPageOrder: vi.fn(),
-  });
-}
-
-describe('useDashboard', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('应透传 router 中的 navigateTo', () => {
-    mockRouterState();
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.navigateTo).toBe(mockNavigateTo);
-  });
-
-  it('recentlyUsedTools 有可见工具时应显示最近使用', () => {
-    mockRouterState({
-      visiblePages: ['dashboard', 'timestamp', 'jwt'],
-      recentlyUsedTools: ['timestamp', 'jwt'],
-    });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(true);
-    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp', 'jwt']);
-  });
-
-  it('recentlyUsedTools 为空时不应显示最近使用', () => {
-    mockRouterState({ recentlyUsedTools: [] });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(false);
-    expect(result.current.recentFeatures).toEqual([]);
-  });
-
-  it('最近使用中的不可见工具应被过滤', () => {
-    mockRouterState({
-      visiblePages: ['dashboard', 'timestamp'],
-      recentlyUsedTools: ['jwt', 'timestamp'],
-    });
-
-    const { result } = renderHook(() => useDashboard());
-
-    expect(result.current.showRecent).toBe(true);
-    expect(result.current.recentFeatures.map((item) => item.key)).toEqual(['timestamp']);
-  });
-});

src/pages/Dashboard/dashboardFeatures.ts

@@ -1,34 +0,0 @@
-import { getFeatureByKey, type FeatureConfig } from '@/config/features';
-import type { PageType } from '@/types/storage';
-
-export type DashboardFeature = FeatureConfig & {
-  icon: NonNullable<FeatureConfig['icon']>;
-};
-
-export interface DashboardFeatureItem {
-  key: PageType;
-  feature: DashboardFeature;
-}
-
-function isDashboardFeature(feature: FeatureConfig): feature is DashboardFeature {
-  return feature.icon != null;
-}
-
-export function resolveDashboardFeatures(
-  keys: PageType[],
-  visiblePages: PageType[],
-): DashboardFeatureItem[] {
-  const visibleSet = new Set(visiblePages);
-  const items: DashboardFeatureItem[] = [];
-
-  for (const key of keys) {
-    if (!visibleSet.has(key)) continue;
-
-    const feature = getFeatureByKey(key);
-    if (!feature || !isDashboardFeature(feature)) continue;
-
-    items.push({ key, feature });
-  }
-
-  return items;
-}

src/pages/Dashboard/index.tsx

@@ -1,80 +0,0 @@
-import { cn } from '@/lib/utils';
-import { useDashboard } from './useDashboard';
-
-export default function Index() {
-  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
-
-  return (
-    <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
-      {showRecent && (
-        <div className="flex flex-col gap-2">
-          <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-            最近使用
-          </h3>
-          <div className="flex flex-wrap gap-2">
-            {recentFeatures.map(({ key, feature }) => {
-              const IconComponent = feature.icon;
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => navigateTo(key)}
-                  className={cn(
-                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
-                    'border border-border/60 bg-card text-card-foreground',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
-                >
-                  <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  {feature.label}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      <div className="flex flex-col gap-2">
-        <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
-          全部工具
-        </h3>
-        {visibleFeatures.length === 0 ? (
-          <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
-        ) : (
-          <div
-            className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
-          >
-            {visibleFeatures.map(({ key, feature }) => {
-              const IconComponent = feature.icon;
-              return (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => navigateTo(key)}
-                  className={cn(
-                    'group flex flex-col items-center justify-center gap-1.5',
-                    'py-3 px-2 rounded-xl border border-border/50 bg-card',
-                    'hover:bg-muted/40 hover:border-primary/30',
-                    'transition-colors cursor-pointer',
-                  )}
-                >
-                  <IconComponent
-                    className={cn(
-                      'h-5 w-5 text-muted-foreground/70',
-                      'group-hover:text-foreground',
-                      'transition-colors',
-                    )}
-                  />
-                  <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
-                    {feature.label}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src/pages/Dashboard/useDashboard.ts

@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import { useRouter } from '@/providers/RouterProvider';
-import type { PageType } from '@/types/storage';
-import { resolveDashboardFeatures, type DashboardFeatureItem } from './dashboardFeatures';
-
-export interface UseDashboardReturn {
-  visibleFeatures: DashboardFeatureItem[];
-  recentFeatures: DashboardFeatureItem[];
-  showRecent: boolean;
-  navigateTo: (page: PageType) => void;
-}
-
-export function useDashboard(): UseDashboardReturn {
-  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
-
-  const visibleFeatures = useMemo(
-    () => resolveDashboardFeatures(pageOrder, visiblePages),
-    [pageOrder, visiblePages],
-  );
-
-  const recentFeatures = useMemo(
-    () => resolveDashboardFeatures(recentlyUsedTools, visiblePages),
-    [recentlyUsedTools, visiblePages],
-  );
-
-  const showRecent = recentFeatures.length > 0;
-
-  return { visibleFeatures, recentFeatures, showRecent, navigateTo };
-}

src/pages/JsonTools/__tests__/index.test.tsx

@@ -1,10 +1,43 @@
 import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import Index from '../index';
 
+const setWide = (wide: boolean) => {
+  window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+    matches: wide,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
 describe('JsonTools 页面', () => {
+  beforeEach(() => {
+    // 默认窄屏（matches:false）
+    setWide(false);
+  });
+
   it('应该渲染模式切换按钮', () => {
     render(<Index />);
     expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
   });
+
+  it('窄屏渲染 A/B 数据面板与 Compare 按钮', () => {
+    setWide(false);
+    render(<Index />);
+    expect(screen.getByText('数据 A（原始）')).toBeInTheDocument();
+    expect(screen.getByText('数据 B（目标）')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Compare A & B/i })).toBeInTheDocument();
+  });
+
+  it('宽屏渲染原始/目标 JSON 标签', () => {
+    setWide(true);
+    render(<Index />);
+    expect(screen.getByText('原始 JSON')).toBeInTheDocument();
+    expect(screen.getByText('目标 JSON')).toBeInTheDocument();
+  });
 });

src/pages/JsonTools/__tests__/useJsonTools.test.ts

@@ -0,0 +1,78 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useJsonTools } from '../useJsonTools';
+
+describe('useJsonTools 窄屏手动比对', () => {
+  it('canCompare 在两侧输入合法前为 false', () => {
+    const { result } = renderHook(() => useJsonTools());
+    expect(result.current.canCompare).toBe(false);
+
+    act(() => result.current.setLeftInput('{"a":1}'));
+    expect(result.current.canCompare).toBe(false);
+
+    act(() => result.current.setRightInput('{"b":2}'));
+    expect(result.current.canCompare).toBe(true);
+  });
+
+  it('非法 JSON 时 canCompare 为 false', () => {
+    const { result } = renderHook(() => useJsonTools());
+    act(() => {
+      result.current.setLeftInput('{"a":1}');
+      result.current.setRightInput('not json');
+    });
+    expect(result.current.canCompare).toBe(false);
+  });
+
+  it('handleCompare 生成结果并自动折叠两侧面板', () => {
+    const { result } = renderHook(() => useJsonTools());
+    act(() => {
+      result.current.setLeftInput('{"a":1}');
+      result.current.setRightInput('{"a":2}');
+    });
+    act(() => result.current.handleCompare());
+
+    expect(result.current.hasCompared).toBe(true);
+    expect(result.current.activeResult).not.toBeNull();
+    expect(result.current.total).toBeGreaterThan(0);
+    expect(result.current.collapsedA).toBe(true);
+    expect(result.current.collapsedB).toBe(true);
+  });
+
+  it('比对后修改输入会重置结果，但保留折叠态', () => {
+    const { result } = renderHook(() => useJsonTools());
+    act(() => {
+      result.current.setLeftInput('{"a":1}');
+      result.current.setRightInput('{"a":2}');
+    });
+    act(() => result.current.handleCompare());
+    expect(result.current.hasCompared).toBe(true);
+    expect(result.current.collapsedA).toBe(true);
+    expect(result.current.collapsedB).toBe(true);
+
+    act(() => result.current.setLeftInput('{"a":3}'));
+    expect(result.current.hasCompared).toBe(false);
+    expect(result.current.activeResult).toBeNull();
+    expect(result.current.collapsedA).toBe(true);
+    expect(result.current.collapsedB).toBe(true);
+  });
+
+  it('toggleCollapseA/B 可逆切换折叠态', () => {
+    const { result } = renderHook(() => useJsonTools());
+    expect(result.current.collapsedA).toBe(false);
+    act(() => result.current.toggleCollapseA());
+    expect(result.current.collapsedA).toBe(true);
+    act(() => result.current.toggleCollapseA());
+    expect(result.current.collapsedA).toBe(false);
+  });
+
+  it('单输入经防抖后持久化，重挂载可恢复', async () => {
+    localStorage.clear();
+    const { result, unmount } = renderHook(() => useJsonTools());
+    act(() => result.current.setInput('{"x":1}'));
+    await new Promise((r) => setTimeout(r, 300));
+    unmount();
+
+    const { result: result2 } = renderHook(() => useJsonTools());
+    expect(result2.current.input).toBe('{"x":1}');
+  });
+});

src/pages/JsonTools/components/CollapsiblePanel.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface CollapsiblePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** 面板标题 */
+  title: string;
+  /** 是否处于折叠态 */
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  /** 折叠态展示的单行缩略预览文本 */
+  preview?: string;
+  /** 展开态内容 */
+  children?: React.ReactNode;
+}
+
+export default function CollapsiblePanel({
+  title,
+  collapsed,
+  onToggleCollapse,
+  preview,
+  children,
+  className,
+  ...props
+}: CollapsiblePanelProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col overflow-hidden rounded-md border bg-card transition-all duration-300 ease-in-out',
+        className,
+      )}
+      style={{
+        flex: collapsed ? '0 0 36px' : '1 1 120px',
+      }}
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={onToggleCollapse}
+        className={cn(
+          'flex h-[36px] w-full cursor-pointer select-none items-center justify-between bg-muted/20 hover:bg-muted/30 transition-colors px-3 shrink-0 text-left focus:outline-none focus:bg-muted/40',
+          !collapsed && 'border-b border-border/60',
+        )}
+      >
+        <span className="text-[11px] font-semibold text-foreground/90 shrink-0">{title}</span>
+        <span
+          className={cn(
+            'flex-1 truncate font-mono text-xs text-muted-foreground/70 ml-3 transition-all duration-300',
+            collapsed ? 'opacity-100 max-w-full' : 'opacity-0 max-w-0 pointer-events-none',
+          )}
+        >
+          {preview}
+        </span>
+        <ChevronRight
+          className={cn(
+            'h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground transition-transform duration-300',
+            !collapsed && 'rotate-90',
+          )}
+        />
+      </button>
+
+      <div
+        className={cn(
+          'flex-1 min-h-0 flex flex-col transition-opacity duration-300',
+          collapsed ? 'opacity-0 pointer-events-none' : 'opacity-100',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

src/pages/JsonTools/components/CompareActionBar.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ArrowLeftRight } from 'lucide-react';
+import DiffNavigator from './DiffNavigator';
+import { cn } from '@/lib/utils';
+
+export interface CompareActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  canCompare: boolean;
+  onCompare: () => void;
+  hasCompared: boolean;
+  total: number;
+  currentIndex: number;
+  onPrev: () => void;
+  onNext: () => void;
+  resultsVisible?: boolean;
+  onShowResults?: () => void;
+}
+
+export default function CompareActionBar({
+  canCompare,
+  onCompare,
+  hasCompared,
+  total,
+  currentIndex,
+  onPrev,
+  onNext,
+  resultsVisible = true,
+  onShowResults,
+  className,
+  ...props
+}: CompareActionBarProps) {
+  return (
+    <div className={cn('flex shrink-0 items-center justify-center py-0.5', className)} {...props}>
+      {hasCompared ? (
+        resultsVisible ? (
+          <DiffNavigator
+            total={total}
+            currentIndex={currentIndex}
+            onPrev={onPrev}
+            onNext={onNext}
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={onShowResults}
+            className={cn(
+              'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors bg-primary text-primary-foreground hover:bg-primary/90',
+            )}
+          >
+            <ArrowLeftRight className="h-3.5 w-3.5" />
+            查看对比结果
+          </button>
+        )
+      ) : (
+        <button
+          type="button"
+          disabled={!canCompare}
+          onClick={onCompare}
+          className={cn(
+            'inline-flex h-8 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-muted',
+            canCompare
+              ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+              : 'cursor-not-allowed bg-muted text-muted-foreground',
+          )}
+        >
+          <ArrowLeftRight className="h-3.5 w-3.5" />
+          Compare A &amp; B
+        </button>
+      )}
+    </div>
+  );
+}

src/pages/JsonTools/components/DiffResult.tsx

@@ -7,28 +7,99 @@ export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
   result: DiffResultType;
   viewMode: ViewMode;
   activePath?: string;
+  /** 窄屏填充模式：撑满父容器可用高度并内部滚动，而非使用固定最小/最大高度 */
+  fill?: boolean;
 }
 
 export default function DiffResult({
   result,
   viewMode,
   activePath,
+  fill = false,
   className,
   ...props
 }: DiffResultProps) {
+  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, 'open' | 'closed'>>({});
+  const togglePath = React.useCallback((path: string, currentExpanded: boolean) => {
+    setExpandedPaths((prev) => ({
+      ...prev,
+      [path]: currentExpanded ? 'closed' : 'open',
+    }));
+  }, []);
+
+  const leftRef = React.useRef<HTMLDivElement | null>(null);
+  const rightRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const leftEl = leftRef.current;
+    const rightEl = rightRef.current;
+    if (!leftEl || !rightEl) return;
+
+    let isSyncingLeftScroll = false;
+    let isSyncingRightScroll = false;
+
+    const handleLeftScroll = () => {
+      if (isSyncingLeftScroll) {
+        isSyncingLeftScroll = false;
+        return;
+      }
+      isSyncingRightScroll = true;
+      rightEl.scrollTop = leftEl.scrollTop;
+      rightEl.scrollLeft = leftEl.scrollLeft;
+    };
+
+    const handleRightScroll = () => {
+      if (isSyncingRightScroll) {
+        isSyncingRightScroll = false;
+        return;
+      }
+      isSyncingLeftScroll = true;
+      leftEl.scrollTop = rightEl.scrollTop;
+      leftEl.scrollLeft = rightEl.scrollLeft;
+    };
+
+    leftEl.addEventListener('scroll', handleLeftScroll);
+    rightEl.addEventListener('scroll', handleRightScroll);
+
+    return () => {
+      leftEl.removeEventListener('scroll', handleLeftScroll);
+      rightEl.removeEventListener('scroll', handleRightScroll);
+    };
+  }, [viewMode]);
+
   if (viewMode === 'sideBySide') {
     return (
       <div
-        className={cn('flex flex-col md:flex-row gap-4 items-stretch w-full', className)}
+        className={cn(
+          'flex flex-col md:flex-row gap-4 items-stretch rounded-xl border border-border bg-muted/30 p-1.5 w-full',
+          fill ? 'min-h-0 flex-1' : '',
+          className,
+        )}
         {...props}
       >
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 min-h-0 flex flex-col">
           <SectionLabel text="原始 JSON" />
-          <JsonTree node={result.root} side="left" activePath={activePath} />
+          <JsonTree
+            ref={leftRef}
+            node={result.root}
+            side="left"
+            activePath={activePath}
+            fill={fill}
+            expandedPaths={expandedPaths}
+            onTogglePath={togglePath}
+          />
         </div>
-        <div className="flex-1 min-w-0">
+        <div className="flex-1 min-w-0 min-h-0 flex flex-col">
           <SectionLabel text="目标 JSON" />
-          <JsonTree node={result.root} side="right" activePath={activePath} />
+          <JsonTree
+            ref={rightRef}
+            node={result.root}
+            side="right"
+            activePath={activePath}
+            fill={fill}
+            expandedPaths={expandedPaths}
+            onTogglePath={togglePath}
+          />
         </div>
       </div>
     );
@@ -37,12 +108,15 @@ export default function DiffResult({
   return (
     <div
       className={cn(
-        'rounded-xl border border-border bg-card font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-1.5',
+        'flex flex-col rounded-xl border border-border bg-muted/30 font-mono text-xs shadow-sm overflow-x-auto overflow-y-auto p-1.5',
+        fill ? 'min-h-0 flex-1' : 'min-h-[200px] max-h-[520px]',
         className,
       )}
       {...props}
     >
-      <UnifiedView node={result.root} depth={0} activePath={activePath} />
+      <div className="min-w-full w-fit">
+        <UnifiedView node={result.root} depth={0} activePath={activePath} />
+      </div>
     </div>
   );
 }
@@ -189,7 +263,7 @@ const UnifiedRow = ({ depth, type, text, active, multiline }: UnifiedRowProps) =
         currentTheme.bg,
         currentTheme.text,
         active &&
-          'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500',
+          'bg-primary/10 relative before:absolute before:left-0 before:top-0 before:bottom-0 before:w-1 before:bg-blue-500 before:content-[""]',
       )}
       style={{
         paddingLeft: `${Math.max(0.5, depth * 1.25)}rem`,

src/pages/JsonTools/components/DiffWorkspace.tsx

@@ -0,0 +1,154 @@
+import JsonDiffInput from './JsonDiffInput';
+import JsonDiffPanel from './JsonDiffPanel';
+import CompareActionBar from './CompareActionBar';
+import DiffResult from './DiffResult';
+import DiffNavigator from './DiffNavigator';
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+import type { UseJsonToolsReturn } from '../useJsonTools';
+import type { ViewMode } from '../types';
+
+interface DiffWorkspaceProps {
+  tools: UseJsonToolsReturn;
+}
+
+const VIEW_OPTIONS: { value: ViewMode; label: string }[] = [
+  { value: 'sideBySide', label: '并排' },
+  { value: 'unified', label: '统一' },
+];
+
+export default function DiffWorkspace({ tools }: DiffWorkspaceProps) {
+  const {
+    isWide,
+    viewMode,
+    setViewMode,
+    leftInput,
+    rightInput,
+    setLeftInput,
+    setRightInput,
+    leftError,
+    rightError,
+    activeResult,
+    total,
+    currentDiffIndex,
+    handlePrev,
+    handleNext,
+    activePath,
+    hasCompared,
+    collapsedA,
+    collapsedB,
+    toggleCollapseA,
+    toggleCollapseB,
+    canCompare,
+    handleCompare,
+    previewA,
+    previewB,
+  } = tools;
+
+  const viewToggle = (
+    <div className="flex h-10 items-center justify-between rounded-xl border border-border/60 bg-secondary/40 px-1.5">
+      <SwitchButtonGroup
+        value={viewMode}
+        onChange={(v: ViewMode) => setViewMode(v)}
+        options={VIEW_OPTIONS}
+        size="small"
+      />
+    </div>
+  );
+
+  if (isWide) {
+    return (
+      <div className="flex flex-1 min-h-0 flex-col space-y-4">
+        {viewToggle}
+
+        <div className="flex w-full flex-col items-stretch gap-4 md:flex-row shrink-0">
+          <JsonDiffInput
+            label="原始 JSON"
+            placeholder="输入原始 JSON..."
+            value={leftInput}
+            onChange={setLeftInput}
+            error={leftError}
+            minRows={9}
+          />
+          <JsonDiffInput
+            label="目标 JSON"
+            placeholder="输入目标 JSON..."
+            value={rightInput}
+            onChange={setRightInput}
+            error={rightError}
+            minRows={9}
+          />
+        </div>
+
+        {activeResult ? (
+          <div className="flex min-h-0 flex-1 flex-col space-y-3.5 pt-1">
+            <div className="flex w-full justify-center shrink-0">
+              <DiffNavigator
+                total={total}
+                currentIndex={currentDiffIndex}
+                onPrev={handlePrev}
+                onNext={handleNext}
+              />
+            </div>
+            <DiffResult result={activeResult} viewMode={viewMode} activePath={activePath} fill />
+          </div>
+        ) : (
+          <EmptyPlaceholder className="min-h-[140px] flex-1" messageClassName="max-w-[260px]">
+            {leftError || rightError
+              ? '请修正上方 JSON 的语法错误以开启实时流式比对'
+              : '输入两侧 JSON 后点击比较'}
+          </EmptyPlaceholder>
+        )}
+      </div>
+    );
+  }
+
+  const resultsVisible = collapsedA && collapsedB;
+
+  const handleShowResults = () => {
+    if (!collapsedA) toggleCollapseA();
+    if (!collapsedB) toggleCollapseB();
+  };
+
+  return (
+    <div className="flex flex-1 min-h-0 flex-col gap-3">
+      <JsonDiffPanel
+        title="数据 A（原始）"
+        placeholder="输入原始 JSON..."
+        value={leftInput}
+        onChange={setLeftInput}
+        error={leftError}
+        collapsed={collapsedA}
+        onToggleCollapse={toggleCollapseA}
+        preview={previewA}
+      />
+      <CompareActionBar
+        canCompare={canCompare}
+        onCompare={handleCompare}
+        hasCompared={hasCompared}
+        total={total}
+        currentIndex={currentDiffIndex}
+        onPrev={handlePrev}
+        onNext={handleNext}
+        resultsVisible={resultsVisible}
+        onShowResults={handleShowResults}
+      />
+      <JsonDiffPanel
+        title="数据 B（目标）"
+        placeholder="输入目标 JSON..."
+        value={rightInput}
+        onChange={setRightInput}
+        error={rightError}
+        collapsed={collapsedB}
+        onToggleCollapse={toggleCollapseB}
+        preview={previewB}
+      />
+
+      {activeResult && resultsVisible ? (
+        <div className="flex min-h-0 flex-1">
+          <DiffResult result={activeResult} viewMode={viewMode} activePath={activePath} fill />
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/pages/JsonTools/components/JsonConvertSection.tsx

@@ -1,55 +1,45 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import TextInputArea from '@/components/TextInputArea';
 import JsonResultPanel from './JsonResultPanel';
+import CollapsiblePanel from './CollapsiblePanel';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';
+import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
 import type { ConvertFunction, ConvertResult } from '../types';
 
-const CONVERT_LABELS: Record<
+const CONVERT_LABELS: Record<string, { inputPlaceholder: string; outputLabel: string }> = {
-  string,
-  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
-> = {
   yaml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'YAML 结果',
-    emptyHint: '输入 JSON 后点击转换',
   },
   toml: {
     inputPlaceholder: '输入需要转换的 JSON...',
     outputLabel: 'TOML 结果',
-    emptyHint: '输入 JSON 后点击转换',
   },
   minify: {
     inputPlaceholder: '输入需要压缩的 JSON...',
     outputLabel: '压缩结果',
-    emptyHint: '输入 JSON 后点击压缩',
   },
 };
 
 interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  tools: UseJsonToolsReturn;
   mode: string;
   convertFunction: ConvertFunction;
 }
 
 export default function JsonConvertSection({
+  tools,
   mode,
   convertFunction,
   className,
   ...props
 }: JsonConvertSectionProps) {
-  const [input, setInput] = useState('');
+  const { input, setInput, debouncedInput } = tools;
-  const [debouncedInput, setDebouncedInput] = useState('');
+  const [inputCollapsed, setInputCollapsed] = useState(false);
 
   const labels = CONVERT_LABELS[mode] ?? CONVERT_LABELS.yaml;
 
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input]);
-
   const error = useMemo(() => {
     return validateJson(debouncedInput);
   }, [debouncedInput]);
@@ -71,32 +61,40 @@ export default function JsonConvertSection({
     }
   }, [debouncedInput, error, convertFunction]);
 
-  return (
+  const preview = useMemo(() => buildPreview(input), [input]);
-    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
-      <TextInputArea
-        placeholder={labels.inputPlaceholder}
-        value={input}
-        onChange={setInput}
-        externalError={error || runtimeError || undefined}
-        showClear={true}
-        allowCopy={true}
-        minRows={7}
-        maxRows={14}
-        onClear={() => setInput('')}
-      />
 
-      {result?.output ? (
+  return (
-        <JsonResultPanel
+    <div className={cn('w-full flex flex-1 min-h-0 flex-col gap-3', className)} {...props}>
-          title={labels.outputLabel}
+      <CollapsiblePanel
-          content={result.output}
+        title="JSON 输入"
-          originalBytes={result.originalBytes}
+        collapsed={inputCollapsed}
-          outputBytes={result.outputBytes}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
-          maxHeight="380px"
+        preview={preview}
+      >
+        <TextInputArea
+          fill
+          borderless
+          placeholder={labels.inputPlaceholder}
+          value={input}
+          onChange={setInput}
+          externalError={error || runtimeError || undefined}
+          showClear={true}
+          allowCopy={true}
+          className="min-h-0 flex-1"
+          onClear={() => setInput('')}
         />
-      ) : (
+      </CollapsiblePanel>
-        <EmptyPlaceholder>
+
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+      {result?.output && (
-        </EmptyPlaceholder>
+        <div className="flex min-h-0 flex-1">
+          <JsonResultPanel
+            fill
+            title={labels.outputLabel}
+            content={result.output}
+            originalBytes={result.originalBytes}
+            outputBytes={result.outputBytes}
+          />
+        </div>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonDiffPanel.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import TextInputArea from '@/components/TextInputArea';
+import CollapsiblePanel from './CollapsiblePanel';
+import { cn } from '@/lib/utils';
+
+export interface JsonDiffPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** 面板标题，如 "数据 A（原始）" */
+  title: string;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
+  error?: string | null;
+  /** 是否处于折叠态 */
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+  /** 折叠态展示的单行缩略预览文本 */
+  preview: string;
+}
+
+export default function JsonDiffPanel({
+  title,
+  placeholder,
+  value,
+  onChange,
+  error,
+  collapsed,
+  onToggleCollapse,
+  preview,
+  className,
+  ...props
+}: JsonDiffPanelProps) {
+  return (
+    <CollapsiblePanel
+      title={title}
+      collapsed={collapsed}
+      onToggleCollapse={onToggleCollapse}
+      preview={preview}
+      className={cn(
+        error
+          ? 'border-destructive focus-within:ring-1 focus-within:ring-destructive focus-within:border-destructive'
+          : 'border-border focus-within:ring-1 focus-within:ring-ring focus-within:border-border/80',
+        className,
+      )}
+      {...props}
+    >
+      <TextInputArea
+        fill
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        externalError={error ?? undefined}
+        showClear={true}
+        allowCopy={true}
+        borderless
+        className="min-h-0 flex-1"
+      />
+    </CollapsiblePanel>
+  );
+}

src/pages/JsonTools/components/JsonFormatSection.tsx

@@ -1,29 +1,27 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import {
   formatJson,
   type JsonFormatOptions,
   type JsonFormatResult,
   validateJson,
 } from '@/utils/jsonFormatter';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
+import CollapsiblePanel from './CollapsiblePanel';
 import JsonResultPanel from './JsonResultPanel';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { buildPreview, type UseJsonToolsReturn } from '../useJsonTools';
 
-export default function JsonFormatSection() {
+interface JsonFormatSectionProps {
-  const [input, setInput] = useState('');
+  tools: UseJsonToolsReturn;
-  const [debouncedInput, setDebouncedInput] = useState('');
+}
+
+export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
+  const { input, setInput, debouncedInput } = tools;
   const [indentSize, setIndentSize] = useState<number>(2);
   const [sortKeys, setSortKeys] = useState(false);
-
+  const [inputCollapsed, setInputCollapsed] = useState(false);
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input]);
 
   const error = useMemo(() => {
     return validateJson(debouncedInput);
@@ -47,9 +45,11 @@ export default function JsonFormatSection() {
     }
   }, [debouncedInput, error, indentSize, sortKeys]);
 
+  const preview = useMemo(() => buildPreview(input), [input]);
+
   return (
-    <div className="w-full flex flex-col gap-4">
+    <div className="w-full flex flex-1 min-h-0 flex-col gap-3">
-      <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
+      <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60 shrink-0">
         <div className="flex gap-4 items-center w-full">
           <div className="flex gap-2 items-center shrink-0 select-none">
             <span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
@@ -57,7 +57,7 @@ export default function JsonFormatSection() {
             </span>
             <SwitchButtonGroup
               value={indentSize}
-              onChange={(v) => setIndentSize(Number(v))}
+              onChange={(v: number) => setIndentSize(Number(v))}
               options={[2, 4, 6, 8].map((size) => ({ value: size, label: String(size) }))}
               size="small"
             />
@@ -86,29 +86,36 @@ export default function JsonFormatSection() {
         </div>
       </div>
 
-      <TextInputArea
+      <CollapsiblePanel
-        placeholder="输入需要格式化的 JSON..."
+        title="JSON 输入"
-        value={input}
+        collapsed={inputCollapsed}
-        onChange={setInput}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
-        externalError={error || runtimeError || undefined}
+        preview={preview}
-        showClear={true}
+      >
-        allowCopy={true}
+        <TextInputArea
-        minRows={8}
+          fill
-        maxRows={15}
+          borderless
-        onClear={() => setInput('')}
+          placeholder="输入需要格式化的 JSON..."
-      />
+          value={input}
-
+          onChange={setInput}
-      {result?.formatted ? (
+          externalError={error || runtimeError || undefined}
-        <JsonResultPanel
+          showClear={true}
-          title="格式化结果"
+          allowCopy={true}
-          content={result.formatted}
+          className="min-h-0 flex-1"
-          originalBytes={result.originalBytes}
+          onClear={() => setInput('')}
-          outputBytes={result.formattedBytes}
         />
-      ) : (
+      </CollapsiblePanel>
-        <EmptyPlaceholder>
+
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+      {result?.formatted && (
-        </EmptyPlaceholder>
+        <div className="flex min-h-0 flex-1">
+          <JsonResultPanel
+            fill
+            title="格式化结果"
+            content={result.formatted}
+            originalBytes={result.originalBytes}
+            outputBytes={result.formattedBytes}
+          />
+        </div>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonResultPanel.tsx

@@ -1,5 +1,6 @@
 import { formatBytes } from '@/utils/format';
 import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils';
 
 export interface JsonResultPanelProps {
   title: string;
@@ -8,6 +9,11 @@ export interface JsonResultPanelProps {
   outputBytes: number;
   outputSizeLabel?: string;
   maxHeight?: string;
+  /**
+   * 撑满父容器剩余高度并启用内部滚动（而非按 maxHeight 截断）。
+   * 用于 popup / sidepanel 等固定高度场景下与折叠输入面板共享垂直空间。
+   */
+  fill?: boolean;
 }
 
 export default function JsonResultPanel({
@@ -17,9 +23,15 @@ export default function JsonResultPanel({
   outputBytes,
   outputSizeLabel = '格式化后大小',
   maxHeight = '420px',
+  fill = false,
 }: JsonResultPanelProps) {
   return (
-    <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+    <div
+      className={cn(
+        'relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden',
+        fill ? 'flex flex-col flex-1 min-h-0' : 'flex flex-col',
+      )}
+    >
       <div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
         <div className="flex gap-4 items-center">
           <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
@@ -43,8 +55,11 @@ export default function JsonResultPanel({
       </div>
 
       <div
-        className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text"
+        className={cn(
-        style={{ maxHeight }}
+          'p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all overflow-y-auto leading-relaxed select-text',
+          fill && 'flex-1 min-h-0',
+        )}
+        style={fill ? undefined : { maxHeight }}
       >
         {content}
       </div>

src/pages/JsonTools/components/JsonTree.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { DiffNode, DiffType } from '../types';
 import { cn } from '@/lib/utils';
@@ -10,6 +10,9 @@ export interface JsonTreeProps extends React.HTMLAttributes<HTMLDivElement> {
   side: TreeSide;
   defaultExpandDepth?: number;
   activePath?: string;
+  fill?: boolean;
+  expandedPaths?: Record<string, 'open' | 'closed'>;
+  onTogglePath?: (path: string, currentExpanded: boolean) => void;
 }
 
 interface NodeRowProps {
@@ -19,6 +22,8 @@ interface NodeRowProps {
   defaultExpandDepth: number;
   activePath?: string;
   isLastChild: boolean;
+  expandedPaths?: Record<string, 'open' | 'closed'>;
+  onTogglePath?: (path: string, currentExpanded: boolean) => void;
 }
 
 const formatPrimitive = (v: unknown): string => {
@@ -62,8 +67,17 @@ const isContainerValue = (v: unknown): boolean => {
 };
 
 const NodeRow = React.memo(
-  ({ node, side, depth, defaultExpandDepth, activePath, isLastChild }: NodeRowProps) => {
+  ({
-    const [override, setOverride] = useState<'auto' | 'open' | 'closed'>('auto');
+    node,
+    side,
+    depth,
+    defaultExpandDepth,
+    activePath,
+    isLastChild,
+    expandedPaths = {},
+    onTogglePath,
+  }: NodeRowProps) => {
+    const override = expandedPaths[node.path] || 'auto';
     const rowRef = useRef<HTMLDivElement | null>(null);
 
     const onActivePath = useMemo(() => {
@@ -123,7 +137,7 @@ const NodeRow = React.memo(
       return (
         <div ref={rowRef} className="w-full flex flex-col">
           <div
-            onClick={() => setOverride(expanded ? 'closed' : 'open')}
+            onClick={() => onTogglePath?.(node.path, expanded)}
             className={cn(
               'group flex items-center gap-1 py-0.5 pr-2 text-xs font-mono select-none cursor-pointer rounded-sm w-full h-[22px] leading-relaxed',
               theme.bg,
@@ -171,6 +185,8 @@ const NodeRow = React.memo(
                   defaultExpandDepth={defaultExpandDepth}
                   activePath={activePath}
                   isLastChild={idx === node.children!.length - 1}
+                  expandedPaths={expandedPaths}
+                  onTogglePath={onTogglePath}
                 />
               ))}
             </div>
@@ -204,7 +220,7 @@ const NodeRow = React.memo(
         {!isRoot && (
           <span className="text-foreground/90 font-bold tracking-tight">{node.key}:</span>
         )}
-        <span className={cn('font-medium tracking-tight truncate flex-1', theme.text)}>
+        <span className={cn('font-medium tracking-tight whitespace-nowrap', theme.text)}>
           {formatPrimitive(value)}
           <span className="text-foreground/60 font-sans">{isLastChild ? '' : ','}</span>
         </span>
@@ -215,33 +231,51 @@ const NodeRow = React.memo(
 
 NodeRow.displayName = 'NodeRow';
 
-export default function JsonTree({
+const JsonTree = React.forwardRef<HTMLDivElement, JsonTreeProps>(
-  node,
+  (
-  side,
+    {
-  defaultExpandDepth = 2,
+      node,
-  activePath,
+      side,
-  className,
+      defaultExpandDepth = 2,
-  ...props
+      activePath,
-}: JsonTreeProps) {
+      fill = false,
-  return (
+      expandedPaths,
-    <div
+      onTogglePath,
-      className={cn(
+      className,
-        'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto min-h-[200px] max-h-[520px] overflow-y-auto p-2.5 tabular-nums select-text',
+      ...props
-        className,
+    },
-      )}
+    ref,
-      {...props}
+  ) => {
-    >
+    return (
-      <NodeRow
+      <div
-        node={node}
+        ref={ref}
-        side={side}
+        className={cn(
-        depth={0}
+          'rounded-xl border border-border bg-card text-card-foreground font-mono text-xs shadow-sm overflow-x-auto overflow-y-auto p-2.5 tabular-nums select-text',
-        defaultExpandDepth={defaultExpandDepth}
+          fill ? 'min-h-0 flex-1' : 'min-h-[200px] max-h-[520px]',
-        activePath={activePath}
+          className,
-        isLastChild
+        )}
-      />
+        {...props}
-    </div>
+      >
-  );
+        <div className="min-w-full w-fit">
-}
+          <NodeRow
+            node={node}
+            side={side}
+            depth={0}
+            defaultExpandDepth={defaultExpandDepth}
+            activePath={activePath}
+            isLastChild
+            expandedPaths={expandedPaths}
+            onTogglePath={onTogglePath}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+JsonTree.displayName = 'JsonTree';
+
+export default JsonTree;
 
 const summarize = (v: unknown): string => {
   if (Array.isArray(v)) return `${v.length} ${v.length === 1 ? 'item' : 'items'}`;

src/pages/JsonTools/components/__tests__/CompareActionBar.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import CompareActionBar from '../CompareActionBar';
+
+describe('CompareActionBar', () => {
+  it('不可比较时按钮禁用', () => {
+    render(
+      <CompareActionBar
+        canCompare={false}
+        onCompare={() => {}}
+        hasCompared={false}
+        total={0}
+        currentIndex={0}
+        onPrev={() => {}}
+        onNext={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /Compare A & B/i })).toBeDisabled();
+  });
+
+  it('可比较时点击触发 onCompare', async () => {
+    const user = userEvent.setup();
+    const onCompare = vi.fn();
+    render(
+      <CompareActionBar
+        canCompare={true}
+        onCompare={onCompare}
+        hasCompared={false}
+        total={0}
+        currentIndex={0}
+        onPrev={() => {}}
+        onNext={() => {}}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: /Compare A & B/i }));
+    expect(onCompare).toHaveBeenCalled();
+  });
+
+  it('已比较后展示 DiffNavigator（上一处/下一处）', () => {
+    render(
+      <CompareActionBar
+        canCompare={true}
+        onCompare={() => {}}
+        hasCompared={true}
+        total={3}
+        currentIndex={1}
+        onPrev={() => {}}
+        onNext={() => {}}
+      />,
+    );
+    expect(screen.getByLabelText('上一个')).toBeInTheDocument();
+    expect(screen.getByLabelText('下一个')).toBeInTheDocument();
+    expect(screen.queryByText('无差异')).not.toBeInTheDocument();
+  });
+});

src/pages/JsonTools/components/__tests__/JsonDiffPanel.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import JsonDiffPanel from '../JsonDiffPanel';
+
+describe('JsonDiffPanel', () => {
+  it('展开态渲染标题与输入框', () => {
+    render(
+      <JsonDiffPanel
+        title="数据 A（原始）"
+        placeholder="x"
+        value=""
+        onChange={() => {}}
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        preview=""
+      />,
+    );
+    expect(screen.getByText('数据 A（原始）')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('x')).toBeInTheDocument();
+  });
+
+  it('折叠态渲染预览并隐藏输入框', () => {
+    render(
+      <JsonDiffPanel
+        title="数据 A（原始）"
+        placeholder="x"
+        value=""
+        onChange={() => {}}
+        collapsed={true}
+        onToggleCollapse={() => {}}
+        preview="abc（点击展开）"
+      />,
+    );
+    expect(screen.getByText('abc（点击展开）')).toBeInTheDocument();
+    const input = screen.getByPlaceholderText('x');
+    expect(input.closest('.opacity-0')).toBeInTheDocument();
+  });
+
+  it('点击标题可切换折叠', async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    render(
+      <JsonDiffPanel
+        title="T"
+        placeholder="x"
+        value=""
+        onChange={() => {}}
+        collapsed={false}
+        onToggleCollapse={onToggle}
+        preview=""
+      />,
+    );
+    await user.click(screen.getByText('T'));
+    expect(onToggle).toHaveBeenCalled();
+  });
+});

src/pages/JsonTools/components/__tests__/JsonFormatSection.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useEffect, useState } from 'react';
+import { describe, it, expect } from 'vitest';
+import JsonFormatSection from '../JsonFormatSection';
+import type { UseJsonToolsReturn } from '../../useJsonTools';
+
+function Harness({ initial = '' }: { initial?: string }) {
+  const [input, setInput] = useState(initial);
+  const [debouncedInput, setDebouncedInput] = useState(initial);
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedInput(input), 250);
+    return () => clearTimeout(t);
+  }, [input]);
+  const tools = { input, setInput, debouncedInput } as unknown as UseJsonToolsReturn;
+  return <JsonFormatSection tools={tools} />;
+}
+
+describe('JsonFormatSection', () => {
+  it('渲染输入面板标题与缩进/键名排序工具栏', () => {
+    render(<Harness />);
+    expect(screen.getByText('JSON 输入')).toBeInTheDocument();
+    expect(screen.getByText('缩进')).toBeInTheDocument();
+    expect(screen.getByText('键名排序')).toBeInTheDocument();
+  });
+
+  it('输入无效 JSON 时不渲染结果面板与占位区', async () => {
+    render(<Harness initial="{ invalid json " />);
+    await waitFor(() => {
+      expect(screen.queryByText('格式化结果')).not.toBeInTheDocument();
+    });
+    expect(
+      screen.queryByText('请修正上方 JSON 的语法错误以开启实时流式格式化'),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText('输入 JSON 后点击格式化')).not.toBeInTheDocument();
+  });
+
+  it('输入有效 JSON 后渲染格式化结果面板', async () => {
+    render(<Harness initial='{"a":1,"b":2}' />);
+    await waitFor(() => {
+      expect(screen.getByText('格式化结果')).toBeInTheDocument();
+    });
+    expect(screen.getByText(/"a": 1/)).toBeInTheDocument();
+    expect(screen.getByText(/"b": 2/)).toBeInTheDocument();
+  });
+
+  it('点击标题可折叠输入面板', async () => {
+    const user = userEvent.setup();
+    render(<Harness initial='{"a":1}' />);
+    await waitFor(() => {
+      expect(screen.getByText('格式化结果')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('JSON 输入'));
+
+    const input = screen.getByPlaceholderText('输入需要格式化的 JSON...');
+    await waitFor(() => {
+      expect(input.closest('.opacity-0')).toBeInTheDocument();
+    });
+    expect(screen.getByText('{"a":1}（点击展开）')).toBeInTheDocument();
+  });
+});

src/pages/JsonTools/index.tsx

@@ -1,41 +1,18 @@
-import JsonDiffInput from './components/JsonDiffInput';
+import DiffWorkspace from './components/DiffWorkspace';
-import DiffResult from './components/DiffResult';
-import DiffNavigator from './components/DiffNavigator';
 import JsonFormatSection from './components/JsonFormatSection';
 import JsonConvertSection from './components/JsonConvertSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { useJsonTools } from './useJsonTools';
 import type { JsonToolsPageMode } from '@/types/storage';
-import type { ViewMode } from './types';
 
 type PageMode = JsonToolsPageMode;
 
 export default function Index() {
-  const {
+  const tools = useJsonTools();
-    pageMode,
+  const { pageMode, setPageMode, yamlConvert, tomlConvert, minifyConvert } = tools;
-    setPageMode,
-    leftInput,
-    rightInput,
-    setLeftInput,
-    setRightInput,
-    leftError,
-    rightError,
-    viewMode,
-    setViewMode,
-    diffResult,
-    total,
-    currentDiffIndex,
-    handlePrev,
-    handleNext,
-    activePath,
-    yamlConvert,
-    tomlConvert,
-    minifyConvert,
-  } = useJsonTools();
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">
+    <div className="flex h-full min-h-0 w-full select-none flex-col space-y-4 p-4">
       <SwitchButtonGroup
         value={pageMode}
         onChange={(v: PageMode) => setPageMode(v)}
@@ -47,70 +24,19 @@ export default function Index() {
           { value: 'minify', label: '压缩' },
         ]}
         size="small"
-        className="w-full sm:w-auto"
+        className="w-full shrink-0 sm:w-auto"
       />
 
       {pageMode === 'diff' ? (
-        <div className="flex flex-col space-y-4">
+        <DiffWorkspace tools={tools} />
-          <div className="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
-            <SwitchButtonGroup
-              value={viewMode}
-              onChange={(v: ViewMode) => setViewMode(v)}
-              options={[
-                { value: 'sideBySide', label: '并排' },
-                { value: 'unified', label: '统一' },
-              ]}
-              size="small"
-            />
-          </div>
-
-          <div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
-            <JsonDiffInput
-              label="原始 JSON"
-              placeholder="输入原始 JSON..."
-              value={leftInput}
-              onChange={setLeftInput}
-              error={leftError}
-              minRows={9}
-            />
-            <JsonDiffInput
-              label="目标 JSON"
-              placeholder="输入目标 JSON..."
-              value={rightInput}
-              onChange={setRightInput}
-              error={rightError}
-              minRows={9}
-            />
-          </div>
-
-          {diffResult ? (
-            <div className="flex flex-col space-y-3.5 w-full pt-1">
-              <div className="flex justify-center w-full">
-                <DiffNavigator
-                  total={total}
-                  currentIndex={currentDiffIndex}
-                  onPrev={handlePrev}
-                  onNext={handleNext}
-                />
-              </div>
-              <DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
-            </div>
-          ) : (
-            <EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
-              {leftError || rightError
-                ? '请修正上方 JSON 的语法错误以开启实时流式比对'
-                : '输入两侧 JSON 后点击比较'}
-            </EmptyPlaceholder>
-          )}
-        </div>
       ) : pageMode === 'format' ? (
-        <JsonFormatSection />
+        <JsonFormatSection tools={tools} />
       ) : pageMode === 'yaml' ? (
-        <JsonConvertSection mode="yaml" convertFunction={yamlConvert} />
+        <JsonConvertSection tools={tools} mode="yaml" convertFunction={yamlConvert} />
       ) : pageMode === 'toml' ? (
-        <JsonConvertSection mode="toml" convertFunction={tomlConvert} />
+        <JsonConvertSection tools={tools} mode="toml" convertFunction={tomlConvert} />
       ) : (
-        <JsonConvertSection mode="minify" convertFunction={minifyConvert} />
+        <JsonConvertSection tools={tools} mode="minify" convertFunction={minifyConvert} />
       )}
     </div>
   );

src/pages/JsonTools/useJsonTools.ts

@@ -5,10 +5,14 @@ import { jsonToYaml } from '@/utils/jsonToYaml';
 import { jsonToToml } from '@/utils/jsonToToml';
 import { minifyJson } from '@/utils/jsonFormatter';
 import { isValidPageMode, tryParse } from './constants';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import type { JsonToolsPageMode } from '@/types/storage';
 import type { ConvertFunction, ViewMode } from './types';
 
+type DiffResultValue = ReturnType<typeof diffJson>;
+
 export interface UseJsonToolsReturn {
+  isWide: boolean;
   pageMode: JsonToolsPageMode;
   setPageMode: (mode: JsonToolsPageMode) => void;
   leftInput: string;
@@ -17,34 +21,77 @@ export interface UseJsonToolsReturn {
   setRightInput: (val: string) => void;
   leftError: string | null;
   rightError: string | null;
+  /** format/yaml/toml/minify 共享的输入内容（已持久化） */
+  input: string;
+  setInput: (val: string) => void;
+  /** input 防抖后的快照，用于格式化/转换计算与持久化 */
+  debouncedInput: string;
   viewMode: ViewMode;
   setViewMode: (mode: ViewMode) => void;
-  diffResult: ReturnType<typeof diffJson> | null;
+  /** 当前生效的差异结果：宽屏为实时计算，窄屏为手动 Compare 后的结果 */
+  activeResult: DiffResultValue | null;
   total: number;
   currentDiffIndex: number;
   handlePrev: () => void;
   handleNext: () => void;
   activePath: string | undefined;
+  /** 窄屏：是否已点击 Compare 生成结果 */
+  hasCompared: boolean;
+  /** 窄屏：左右面板是否折叠 */
+  collapsedA: boolean;
+  collapsedB: boolean;
+  toggleCollapseA: () => void;
+  toggleCollapseB: () => void;
+  /** 窄屏：两侧均有合法非空输入时可触发比对 */
+  canCompare: boolean;
+  handleCompare: () => void;
+  /** 窄屏：折叠态单行预览文本 */
+  previewA: string;
+  previewB: string;
   yamlConvert: ConvertFunction;
   tomlConvert: ConvertFunction;
   minifyConvert: ConvertFunction;
 }
 
+export const buildPreview = (raw: string): string => {
+  const single = raw.replace(/\s+/g, ' ').trim();
+  const truncated = single.length > 80 ? `${single.slice(0, 80)}…` : single;
+  return truncated ? `${truncated}（点击展开）` : '（点击展开）';
+};
+
 export function useJsonTools(): UseJsonToolsReturn {
+  const isWide = useMediaQuery('(min-width: 768px)');
+
   const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
 
-  const [leftInput, setLeftInput] = useState('');
+  const [persistedLeft, setPersistedLeft] = useStorageState('jsonTools/diffLeft', '');
-  const [rightInput, setRightInput] = useState('');
+  const [persistedRight, setPersistedRight] = useStorageState('jsonTools/diffRight', '');
-  const [debouncedLeft, setDebouncedLeft] = useState('');
+  const [persistedInput, setPersistedInput] = useStorageState('jsonTools/input', '');
-  const [debouncedRight, setDebouncedRight] = useState('');
+
+  const [leftInput, setLeftInputState] = useState<string>(persistedLeft);
+  const [rightInput, setRightInputState] = useState<string>(persistedRight);
+  const [input, setInput] = useState<string>(persistedInput);
+  const [debouncedLeft, setDebouncedLeft] = useState<string>(persistedLeft);
+  const [debouncedRight, setDebouncedRight] = useState<string>(persistedRight);
+  const [debouncedInput, setDebouncedInput] = useState<string>(persistedInput);
 
   useEffect(() => {
     const handle = setTimeout(() => {
       setDebouncedLeft(leftInput);
       setDebouncedRight(rightInput);
+      setPersistedLeft(leftInput);
+      setPersistedRight(rightInput);
     }, 250);
     return () => clearTimeout(handle);
-  }, [leftInput, rightInput]);
+  }, [leftInput, rightInput, setPersistedLeft, setPersistedRight]);
+
+  useEffect(() => {
+    const handle = setTimeout(() => {
+      setDebouncedInput(input);
+      setPersistedInput(input);
+    }, 250);
+    return () => clearTimeout(handle);
+  }, [input, setPersistedInput]);
 
   const parseState = useMemo(() => {
     const invalidMsg = '无效的 JSON 格式';
@@ -58,9 +105,17 @@ export function useJsonTools(): UseJsonToolsReturn {
   const rightError = parseState.right.error;
 
   const [viewMode, setViewMode] = useState<ViewMode>('sideBySide');
+  const activeViewMode = isWide ? viewMode : 'unified';
   const [currentDiffIndex, setCurrentDiffIndex] = useState(0);
 
-  const diffResult = useMemo(() => {
+  // 窄屏手动比对状态
+  const [hasCompared, setHasCompared] = useState(false);
+  const [manualResult, setManualResult] = useState<DiffResultValue | null>(null);
+  const [collapsedA, setCollapsedA] = useState(false);
+  const [collapsedB, setCollapsedB] = useState(false);
+
+  // 宽屏：实时流式比对（保持原行为）
+  const liveResult = useMemo<DiffResultValue | null>(() => {
     const { left, right } = parseState;
     if (left.error || right.error || debouncedLeft.trim() === '' || debouncedRight.trim() === '') {
       return null;
@@ -68,7 +123,70 @@ export function useJsonTools(): UseJsonToolsReturn {
     return diffJson(left.value, right.value);
   }, [parseState, debouncedLeft, debouncedRight]);
 
-  const total = diffResult?.diffPaths.length ?? 0;
+  const activeResult = isWide ? liveResult : manualResult;
+
+  // 即时解析（用于比对按钮可用态与折叠预览，避免 250ms 延迟）
+  const immediateParse = useMemo(() => {
+    const invalidMsg = '无效的 JSON 格式';
+    return {
+      left: tryParse(leftInput, invalidMsg),
+      right: tryParse(rightInput, invalidMsg),
+    };
+  }, [leftInput, rightInput]);
+
+  const canCompare =
+    leftInput.trim() !== '' &&
+    rightInput.trim() !== '' &&
+    !immediateParse.left.error &&
+    !immediateParse.right.error;
+
+  const previewA = useMemo(() => buildPreview(leftInput), [leftInput]);
+  const previewB = useMemo(() => buildPreview(rightInput), [rightInput]);
+
+  const setLeftInput = useCallback(
+    (val: string) => {
+      setLeftInputState(val);
+      if (hasCompared) {
+        setHasCompared(false);
+        setManualResult(null);
+        setCurrentDiffIndex(0);
+      } else {
+        setCurrentDiffIndex(0);
+      }
+    },
+    [hasCompared],
+  );
+
+  const setRightInput = useCallback(
+    (val: string) => {
+      setRightInputState(val);
+      if (hasCompared) {
+        setHasCompared(false);
+        setManualResult(null);
+        setCurrentDiffIndex(0);
+      } else {
+        setCurrentDiffIndex(0);
+      }
+    },
+    [hasCompared],
+  );
+
+  const handleCompare = useCallback(() => {
+    if (!canCompare) return;
+    const left = immediateParse.left.value;
+    const right = immediateParse.right.value;
+    const result = diffJson(left, right);
+    setManualResult(result);
+    setHasCompared(true);
+    setCollapsedA(true);
+    setCollapsedB(true);
+    setCurrentDiffIndex(0);
+  }, [canCompare, immediateParse]);
+
+  const toggleCollapseA = useCallback(() => setCollapsedA((v) => !v), []);
+  const toggleCollapseB = useCallback(() => setCollapsedB((v) => !v), []);
+
+  const total = activeResult?.diffPaths.length ?? 0;
 
   const handlePrev = useCallback(() => {
     if (total === 0) return;
@@ -80,7 +198,10 @@ export function useJsonTools(): UseJsonToolsReturn {
     setCurrentDiffIndex((idx) => (idx + 1) % total);
   }, [total]);
 
-  const activePath = diffResult && total > 0 ? diffResult.diffPaths[currentDiffIndex] : undefined;
+  const activePath =
+    activeResult && total > 0 && currentDiffIndex < total
+      ? activeResult.diffPaths[currentDiffIndex]
+      : undefined;
 
   const yamlConvert: ConvertFunction = useCallback((text: string) => {
     const r = jsonToYaml(text);
@@ -98,28 +219,35 @@ export function useJsonTools(): UseJsonToolsReturn {
   }, []);
 
   return {
+    isWide,
     pageMode,
     setPageMode,
     leftInput,
     rightInput,
-    setLeftInput: (val: string) => {
+    setLeftInput,
-      setLeftInput(val);
+    setRightInput,
-      setCurrentDiffIndex(0);
-    },
-    setRightInput: (val: string) => {
-      setRightInput(val);
-      setCurrentDiffIndex(0);
-    },
     leftError,
     rightError,
-    viewMode,
+    input,
+    setInput,
+    debouncedInput,
+    viewMode: activeViewMode,
     setViewMode,
-    diffResult,
+    activeResult,
     total,
     currentDiffIndex,
     handlePrev,
     handleNext,
     activePath,
+    hasCompared,
+    collapsedA,
+    collapsedB,
+    toggleCollapseA,
+    toggleCollapseB,
+    canCompare,
+    handleCompare,
+    previewA,
+    previewB,
     yamlConvert,
     tomlConvert,
     minifyConvert,

src/pages/QrCode/__tests__/index.test.tsx

@@ -18,14 +18,6 @@ vi.mock('@/components/GlobalSnackbar', () => ({
   }),
 }));
 
-vi.mock('@/config/features', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/config/features')>();
-  return {
-    ...actual,
-    getEntryPointType: () => 'sidepanel',
-  };
-});
-
 vi.mock('../components/QrCodePreview', () => ({
   default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
 }));

src/pages/QrCode/components/QrCodePreview.tsx

@@ -44,7 +44,7 @@ const QrCodePreview = ({
           <img
             src={qrCodeDataUrl}
             alt="QR Code Preview"
-            className="w-48 h-48 max-w-full object-contain block animate-in fade-in duration-300"
+            className="w-48 h-48 max-w-full object-contain block fade-in-300"
           />
         </div>
 

src/pages/StorageCleaner/__tests__/index.test.tsx

@@ -126,7 +126,34 @@ describe('StorageCleaner 页面', () => {
 
     await waitFor(() => {
       expect(clearStorage).not.toHaveBeenCalled();
-      expect(toast.warning).toHaveBeenCalledWith('当前标签页已切换，请等待数据刷新后再清理');
+      expect(toast.warning).toHaveBeenCalledWith('当前页面已变更，请等待数据刷新后再清理');
+    });
+  });
+
+  it('同一标签页 URL 变更后、数据刷新完成前不应执行清理', async () => {
+    let currentUrl = 'https://a.example.com';
+    vi.mocked(getCurrentTab).mockImplementation(
+      async () =>
+        ({
+          id: 1,
+          url: currentUrl,
+        }) as any,
+    );
+
+    render(<Index />);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
+    });
+
+    currentUrl = 'https://b.example.com';
+
+    fireEvent.click(screen.getByRole('button', { name: /立即清理/ }));
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => {
+      expect(clearStorage).not.toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('当前页面已变更，请等待数据刷新后再清理');
     });
   });
 });

src/pages/StorageCleaner/useStorageCleaner.ts

@@ -258,8 +258,8 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     }
 
     const boundTab = boundTabRef.current;
-    if (!boundTab || boundTab.id !== tab.id) {
+    if (!boundTab || boundTab.id !== tab.id || boundTab.url !== tab.url) {
-      toast.warning('当前标签页已切换，请等待数据刷新后再清理');
+      toast.warning('当前页面已变更，请等待数据刷新后再清理');
       setShowConfirm(false);
       return;
     }

src/pages/TestDataGenerator/components/FieldList.tsx

@@ -234,29 +234,38 @@ export default function FieldList({
       if (!ruleName.trim()) return;
 
       const trimmedName = ruleName.trim();
+      const existingRule = ruleStorage.getByName(trimmedName);
 
       // 检查名称是否重复
-      if (!overwrite) {
+      if (!overwrite && existingRule) {
-        const existingRule = ruleStorage.getByName(trimmedName);
+        setShowConfirmOverwrite(true);
-        if (existingRule) {
+        return;
-          setShowConfirmOverwrite(true);
-          return;
-        }
       }
 
-      const newRule = ruleStorage.save({
+      const savedRule = ruleStorage.save(
-        name: trimmedName,
+        overwrite && existingRule
-        description: ruleDescription.trim(),
+          ? {
-        fields: fields,
+              id: existingRule.id,
-      });
+              name: trimmedName,
+              description: ruleDescription.trim(),
+              fields: fields,
+            }
+          : {
+              name: trimmedName,
+              description: ruleDescription.trim(),
+              fields: fields,
+            },
+      );
 
-      if (newRule) {
+      if (savedRule) {
         setShowSaveDialog(false);
         setShowConfirmOverwrite(false);
         setRuleName('');
         setRuleDescription('');
-        toast.success('规则已保存');
+        toast.success(overwrite ? '规则已覆盖' : '规则已保存');
         onRuleSaved?.();
+      } else {
+        toast.error('规则保存失败');
       }
     },
     [ruleName, ruleDescription, fields, onRuleSaved],
@@ -277,7 +286,7 @@ export default function FieldList({
                 onClick={handleUpdateRule}
                 disabled={fields.length === 0}
                 className="h-8 gap-1.5 px-2.5"
-                title={`编辑中: ${editingRule.name}`}
+                title={editingRule ? `编辑中: ${editingRule.name}` : ''}
               >
                 <Save className="h-3.5 w-3.5" />
                 更新规则

src/pages/TestDataGenerator/components/GenerateButton.tsx

@@ -33,7 +33,10 @@ export default function GenerateButton({
           {progress && (
             <div className="space-y-2">
               <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>{`已生成 ${progress.generated.toLocaleString()} / ${progress.total.toLocaleString()} 条`}</span>
+                <span>
+                  已生成 {progress.generated.toLocaleString()} / {progress.total.toLocaleString()}{' '}
+                  条
+                </span>
                 <span>{progress.progress}%</span>
               </div>
               <div className="h-2 bg-muted rounded-full overflow-hidden">
@@ -44,7 +47,7 @@ export default function GenerateButton({
               </div>
               {progress.estimatedTimeLeft !== undefined && (
                 <p className="text-xs text-muted-foreground text-center">
-                  {`预计剩余 ${Math.ceil(progress.estimatedTimeLeft / 1000)} 秒`}
+                  预计剩余 {Math.ceil(progress.estimatedTimeLeft / 1000)} 秒
                 </p>
               )}
             </div>

src/pages/TestDataGenerator/components/GeneratorConfig.tsx

@@ -84,7 +84,11 @@ export default function GeneratorConfig({ generator, params, onChange }: Generat
               </SelectTrigger>
               <SelectContent>
                 {param.options?.map((option) => (
-                  <SelectItem key={String(option.value)} value={String(option.value)}>
+                  <SelectItem
+                    key={String(option.value)}
+                    value={String(option.value)}
+                    className="cursor-pointer"
+                  >
                     {option.label}
                   </SelectItem>
                 ))}

src/pages/TestDataGenerator/components/ResultPanel.tsx

@@ -82,7 +82,7 @@ export default function ResultPanel({ result }: ResultPanelProps) {
             ))}
             {result.warnings.length > 5 && (
               <li className="text-xs text-yellow-500/80">
-                {`... 还有 ${result.warnings.length - 5} 条警告`}
+                ... 还有 {result.warnings.length - 5} 条警告
               </li>
             )}
           </ul>

src/pages/TestDataGenerator/components/RuleManager.tsx

@@ -227,7 +227,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
           maxLength={20}
         />
         <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
-          {`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
+          已保存 {rules.length}/{ruleStorage.MAX_RULES} 条
         </span>
       </div>
 
@@ -260,7 +260,7 @@ export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleMana
                     <Clock className="h-3 w-3" />
                     {formatDate(rule.updatedAt)}
                   </span>
-                  <span>{`使用 ${rule.useCount} 次`}</span>
+                  <span>使用 {rule.useCount} 次</span>
                 </div>
               </div>
 

src/pages/TestDataGenerator/components/__tests__/FieldList.test.tsx

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { FieldConfig } from '@/types/testDataGenerator';
+
+vi.mock('@/utils/ruleStorage', () => ({
+  getByName: vi.fn(),
+  save: vi.fn(),
+  update: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import FieldList from '../FieldList';
+import * as ruleStorage from '@/utils/ruleStorage';
+import { toast } from 'sonner';
+
+const mockedRuleStorage = vi.mocked(ruleStorage);
+const mockedToast = vi.mocked(toast);
+
+const mockFields: FieldConfig[] = [
+  {
+    id: 'field-1',
+    name: 'username',
+    generatorId: 'string',
+    params: {},
+    required: true,
+    nullRate: 0,
+    unique: false,
+  },
+];
+
+const defaultProps = {
+  fields: mockFields,
+  onUpdate: vi.fn(),
+  onRemove: vi.fn(),
+  onAdd: vi.fn(),
+  onEdit: vi.fn(),
+  onReorder: vi.fn(),
+};
+
+describe('FieldList 规则保存', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedRuleStorage.getByName.mockReturnValue(undefined);
+    mockedRuleStorage.save.mockReturnValue({
+      id: 'rule-1',
+      name: 'My Rule',
+      fields: mockFields,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      useCount: 0,
+    });
+  });
+
+  it('覆盖同名规则时应更新已有规则而非新建', async () => {
+    const user = userEvent.setup();
+    const existingRule = {
+      id: 'existing-rule-id',
+      name: 'My Rule',
+      fields: mockFields,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+      useCount: 0,
+    };
+
+    mockedRuleStorage.getByName.mockReturnValue(existingRule);
+
+    render(<FieldList {...defaultProps} />);
+
+    await user.click(screen.getByRole('button', { name: /保存规则/ }));
+    await user.type(screen.getByPlaceholderText('规则名称'), 'My Rule');
+    await user.click(screen.getByRole('button', { name: '确认' }));
+
+    expect(screen.getByText('已存在同名规则，是否覆盖保存？')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: '覆盖' }));
+
+    expect(mockedRuleStorage.save).toHaveBeenCalledWith({
+      id: 'existing-rule-id',
+      name: 'My Rule',
+      description: '',
+      fields: mockFields,
+    });
+    expect(mockedToast.success).toHaveBeenCalledWith('规则已覆盖');
+  });
+});

src/pages/TestDataGenerator/hooks/__tests__/useGenerator.test.ts

@@ -114,4 +114,25 @@ describe('useGenerator', () => {
     expect(result.current.isGenerating).toBe(false);
     expect(worker.postedMessages).toEqual(expect.arrayContaining([{ type: 'cancel' }]));
   });
+
+  it('正在生成时不应重复发送 start 消息', () => {
+    const { result } = renderHook(() => useGenerator());
+
+    act(() => {
+      result.current.generate([mockField], 10);
+      result.current.generate([mockField], 20);
+    });
+
+    const worker = MockWorker.instances[0];
+    const startMessages = worker.postedMessages.filter(
+      (message): message is { type: 'start'; payload: { count: number } } =>
+        typeof message === 'object' &&
+        message !== null &&
+        'type' in message &&
+        message.type === 'start',
+    );
+
+    expect(startMessages).toHaveLength(1);
+    expect(startMessages[0]?.payload.count).toBe(10);
+  });
 });

src/pages/TestDataGenerator/hooks/useGenerator.ts

@@ -37,6 +37,12 @@ export function useGenerator(): UseGeneratorReturn {
 
   const workerRef = useRef<Worker | null>(null);
   const generationIdRef = useRef(0);
+  const isGeneratingRef = useRef(false);
+
+  const finishGenerating = useCallback(() => {
+    isGeneratingRef.current = false;
+    setIsGenerating(false);
+  }, []);
 
   // 清理 Worker
   useEffect(() => {
@@ -73,7 +79,7 @@ export function useGenerator(): UseGeneratorReturn {
           setProgress(data.payload);
           break;
         case 'complete':
-          setIsGenerating(false);
+          finishGenerating();
           if (data.payload.success) {
             setResult(data.payload);
           } else if (data.payload.error && data.payload.error !== '生成已取消') {
@@ -82,7 +88,7 @@ export function useGenerator(): UseGeneratorReturn {
           setProgress(null);
           break;
         case 'error':
-          setIsGenerating(false);
+          finishGenerating();
           setError(data.payload.error);
           setProgress(null);
           break;
@@ -91,7 +97,7 @@ export function useGenerator(): UseGeneratorReturn {
 
     worker.onerror = (err) => {
       console.error('[useGenerator] Worker 错误:', err);
-      setIsGenerating(false);
+      finishGenerating();
       setError(err.message || 'Worker 运行错误');
       setProgress(null);
       // Worker 出错后销毁，下次重新创建
@@ -101,16 +107,17 @@ export function useGenerator(): UseGeneratorReturn {
 
     workerRef.current = worker;
     return worker;
-  }, []);
+  }, [finishGenerating]);
 
   /**
    * 开始生成
    */
   const generate = useCallback(
     (fields: FieldConfig[], count: number, csvMode = false) => {
-      if (isGenerating) return;
+      if (isGeneratingRef.current) return;
 
       const generationId = ++generationIdRef.current;
+      isGeneratingRef.current = true;
 
       setIsGenerating(true);
       setProgress(null);
@@ -124,21 +131,22 @@ export function useGenerator(): UseGeneratorReturn {
       };
       worker.postMessage(message);
     },
-    [isGenerating, getWorker],
+    [getWorker],
   );
 
   /**
    * 取消生成
    */
   const cancel = useCallback(() => {
-    if (workerRef.current && isGenerating) {
+    if (workerRef.current && isGeneratingRef.current) {
       ++generationIdRef.current;
       const message: WorkerRequestMessage = { type: 'cancel' };
       workerRef.current.postMessage(message);
+      isGeneratingRef.current = false;
       setIsGenerating(false);
       setProgress(null);
     }
-  }, [isGenerating]);
+  }, []);
 
   /**
    * 清除结果

src/pages/Timestamp/components/ConverterForm.tsx

@@ -41,10 +41,7 @@ export default function ConverterForm({
           placeholder={INPUT_PLACEHOLDERS[mode]}
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          className={cn(
+          className={cn('h-10', error && 'border-destructive')}
-            'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
-            error && 'border-destructive focus-visible:ring-destructive',
-          )}
         />
 
         {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
@@ -60,16 +57,13 @@ export default function ConverterForm({
         />
 
         <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+          <SelectTrigger>
             <SelectValue placeholder="选择时区" />
           </SelectTrigger>
-          <SelectContent className="max-h-64 font-mono">
+
+          <SelectContent className="max-h-64">
             {ZONES.map((z) => (
-              <SelectItem
+              <SelectItem key={z} value={z} className="cursor-pointer">
-                key={z}
-                value={z}
-                className="text-xs font-semibold focus:bg-accent cursor-pointer"
-              >
                 {z}
               </SelectItem>
             ))}