refactor(json-tools): 重构状态管理逻辑并实现输入内容持久化

feat(json-tools): 引入可折叠面板组件并优化布局交互
refactor(json-tools): 优化 JsonDiffPanel 交互体验并增强 TextInputArea 灵活性
2026-07-14 20:16:09 +08:00 · 2026-07-14 20:04:19 +08:00 · 2026-07-13 23:31:06 +08:00 · 2026-07-13 23:23:49 +08:00 · 2026-07-13 20:42:19 +08:00 · 2026-07-10 23:22:46 +08:00
76 changed files with 2156 additions and 1608 deletions
@@ -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   |
@@ -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) 为索引。
@@ -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-24 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';
@@ -5,8 +5,8 @@
 ## 组件列表

 | 组件                    | 用途                                                                                                   |
-| ----------------------- | ------------------------------------------------------------------------------ |
-| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
+| ----------------------- | ------------------------------------------------------------------------------------------------------ |
+| `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界                                               |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换                                 |
 | `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                                                     |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                                             |
@@ -17,7 +17,6 @@
 | `GlobalSnackbar.tsx`    | 全局消息提示组件 + Context Provider，支持受控/Hook/全局单例三种使用方式                                |
 | `ErrorBoundary.tsx`     | 全局错误边界（类组件），捕获子组件树 JS 错误并展示友好错误页面                                         |
 | `PageErrorBoundary.tsx` | 页面级错误边界，适配 shadcn 暗黑模式，支持 `resetKey` 自动恢复                                         |
-| `PageSkeleton.tsx`      | 页面骨架屏，提供 `dashboard` 和 `tool` 两种变体，用于 Suspense fallback        |

 ## 使用约定

@@ -4,7 +4,6 @@ import { useRouter } from '@/providers/RouterProvider';
 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';

@@ -30,7 +29,7 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
  }, [pageKey]);

  if (!Page) {
-    return <PageSkeleton variant={pageKey === 'dashboard' ? 'dashboard' : 'tool'} />;
+    return <div className="flex-1" aria-hidden="true" />;
  }

  return <Page />;
@@ -39,9 +38,6 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
 export default function RouterContainer() {
  const { currentPage } = useRouter();

-  const animationClass =
-    currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
-
  const currentFeature = getFeatureByKey(currentPage);

  return (
@@ -49,8 +45,7 @@ export default function RouterContainer() {
      key={currentPage}
      className={cn(
        'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
-        'motion-reduce:transition-none',
-        animationClass,
+        'motion-reduce:transition-none page-transition-enter',
      )}
    >
      <PageErrorBoundary resetKey={currentPage}>
@@ -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,8 +23,12 @@ const SIZE_CLASSES = {
  large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;

-const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
-const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
+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 hover:bg-background hover:text-foreground';
+const UNSELECTED_CLASSES = 'text-muted-foreground hover:bg-accent hover:text-accent-foreground';

 export default function SwitchButtonGroup<T extends string | number = string>({
  value,
@@ -33,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}
@@ -53,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}
@@ -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,7 +245,11 @@ 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
+            ? '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}
        />

@@ -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);
-    });
-  });
-});
@@ -6,12 +6,10 @@ import type { PageType } from '@/types/storage';
 import React from 'react';

 const mockRouterValue = {
-  currentPage: 'dashboard' as PageType,
-  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  currentPage: 'timestamp' as PageType,
+  visiblePages: ['timestamp', 'jwt'] as PageType[],
  pageOrder: ['timestamp'] as PageType[],
  navigateTo: vi.fn(),
-  syncNavigation: vi.fn(),
-  goHome: vi.fn(),
  setVisiblePages: vi.fn(),
  setPageOrder: vi.fn(),
  recentlyUsedTools: [] as PageType[],
@@ -34,21 +32,14 @@ describe('RouterContainer 组件', () => {

  describe('渲染测试', () => {
    it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
-      mockRouterValue.currentPage = 'dashboard';
+      mockRouterValue.currentPage = 'timestamp';
      const { container } = renderWithProvider(<RouterContainer />);
-      expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
+      expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
    });
  });

  describe('动画类测试', () => {
-    it('在 dashboard 页面应应用 dashboard 动画类', () => {
-      mockRouterValue.currentPage = 'dashboard';
-      renderWithProvider(<RouterContainer />);
-      const box = document.querySelector('.page-transition-dashboard');
-      expect(box).toBeInTheDocument();
-    });
-
-    it('在非 dashboard 页面应应用 enter 动画类', () => {
+    it('应应用 enter 动画类', () => {
      mockRouterValue.currentPage = 'timestamp';
      renderWithProvider(<RouterContainer />);
      const box = document.querySelector('.page-transition-enter');
@@ -60,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');
@@ -70,11 +61,10 @@ describe('RouterContainer 组件', () => {

  describe('页面级错误隔离', () => {
    it('PageErrorBoundary 应包裹页面内容', () => {
-      mockRouterValue.currentPage = 'dashboard';
+      mockRouterValue.currentPage = 'timestamp';
      const { container } = renderWithProvider(<RouterContainer />);

-      // 验证 RouterContainer 的 Box 结构存在
-      const routerBox = container.querySelector('.page-transition-dashboard');
+      const routerBox = container.querySelector('.page-transition-enter');
      expect(routerBox).toBeInTheDocument();
    });
  });
@@ -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');
    });

@@ -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 };
@@ -46,4 +46,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = 'Button';

-export { Button, buttonVariants };
+export { Button };
@@ -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
@@ -12,7 +12,7 @@ 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
@@ -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>
@@ -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
@@ -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} />
@@ -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,7 +58,7 @@ 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>
@@ -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<
-  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,
-};
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem };
@@ -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
@@ -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,24 +59,24 @@ describe('features 懒加载', () => {
  it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
    const { FEATURES } = await import('@/config/features');

-    expect(FEATURES).toHaveLength(10);
+    expect(FEATURES).toHaveLength(9);
    expect(pageLoadTracker.loaded).toEqual([]);
  });

  it('loadPage 应仅加载对应页面模块', async () => {
    const { loadPage } = await import('@/config/pageLoaders/index');

-    await loadPage('dashboard');
+    await loadPage('timestamp');

-    expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
  });

  it('loadPage 切换页面时不应加载无关页面模块', async () => {
    const { loadPage } = await import('@/config/pageLoaders/index');

-    await loadPage('timestamp');
+    await loadPage('jwt');

-    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
+    expect(pageLoadTracker.loaded).toEqual(['Jwt']);
    expect(pageLoadTracker.loaded).not.toContain('QrCode');
    expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
  });
@@ -9,8 +9,8 @@ import {

 describe('features', () => {
  describe('FEATURES', () => {
-    it('应该有10个功能定义', () => {
-      expect(FEATURES).toHaveLength(10);
+    it('应该有9个功能定义', () => {
+      expect(FEATURES).toHaveLength(9);
    });

    it('应该有每个功能的所有必需属性', () => {
@@ -24,12 +24,9 @@ describe('features', () => {
        expect(typeof feature.label).toBe('string');
        expect(typeof feature.description).toBe('string');
        expect(typeof feature.defaultVisible).toBe('boolean');
-
-        if (feature.key !== 'dashboard') {
        expect(feature).toHaveProperty('icon');
        expect(feature).toHaveProperty('themeColorKey');
        expect(typeof feature.themeColorKey).toBe('string');
-        }
      });
    });

@@ -41,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();
@@ -78,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');
@@ -90,8 +79,7 @@ describe('features', () => {
  describe('getAllFeatureKeys', () => {
    it('应该返回所有功能key', () => {
      const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(10);
-      expect(allKeys).toContain('dashboard');
+      expect(allKeys).toHaveLength(9);
      expect(allKeys).toContain('timestamp');
      expect(allKeys).toContain('storageCleaner');
      expect(allKeys).toContain('qrCode');
@@ -105,9 +93,9 @@ describe('features', () => {
  });

  describe('getDefaultPageOrder', () => {
-    it('应该排除仪表盘从页面顺序', () => {
+    it('应该包含所有工具页面', () => {
      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).not.toContain('dashboard');
+      expect(pageOrder).toHaveLength(9);
    });

    it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
@@ -116,10 +104,5 @@ describe('features', () => {
      expect(pageOrder).toContain('storageCleaner');
      expect(pageOrder).toContain('qrCode');
    });
-
-    it('应该有9个项目在页面顺序', () => {
-      const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(9);
-    });
  });
 });
@@ -25,12 +25,6 @@ export interface FeatureConfig {
 }

 export const FEATURES: FeatureConfig[] = [
-  {
-    key: 'dashboard',
-    label: '仪表盘',
-    description: '',
-    defaultVisible: true,
-  },
  {
    key: 'timestamp',
    label: '时间戳',
@@ -118,5 +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);
 }
@@ -1,5 +0,0 @@
-import type { ComponentType } from 'react';
-
-export default function loadDashboard(): Promise<{ default: ComponentType }> {
-  return import('@/pages/Dashboard');
-}
@@ -16,8 +16,6 @@ function ensurePagesStyles(): Promise<unknown> {
 export function loadPage(key: PageType): Promise<PageModule> {
  return ensurePagesStyles().then(() => {
    switch (key) {
-      case 'dashboard':
-        return import('@/config/pageLoaders/dashboard').then((m) => m.default());
      case 'timestamp':
        return import('@/config/pageLoaders/timestamp').then((m) => m.default());
      case 'storageCleaner':
@@ -1,21 +1,24 @@
 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 flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background">
-        <TopBar />
+      <div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
+        <div className="flex flex-1 min-w-0 flex-col">
          <ErrorBoundary>
            <RouterContainer />
          </ErrorBoundary>
        </div>
+        <FeatureNav />
+      </div>
    </RouterProvider>
  );
 }
@@ -21,7 +21,7 @@
    <style>
      /* Force initial popup size before React hydration */
      html, body {
-        width: 400px;
+        width: 450px;
        height: 600px;
        margin: 0;
        padding: 0;
@@ -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);
+}
@@ -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>
+  );
+}
@@ -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();
+  });
+});
@@ -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', () => {
-    const items = resolveDashboardFeatures(['jwt', 'timestamp'], ['dashboard', 'timestamp', 'jwt']);
+  it('应按 keys 顺序返回可见工具', () => {
+    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']);
  });
@@ -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>
+  );
+}
@@ -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;
+}
@@ -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 };
+}
@@ -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 };
+}
@@ -5,22 +5,20 @@
 ## 组件列表

 | 目录          | 用途                                       |
-| --------- | -------------------------------------------------------------- |
-| `TopBar/` | 顶部导航栏：搜索（含历史记录）、主题切换、返回导航、标签页打开 |
+| ------------- | ------------------------------------------ |
+| `FeatureNav/` | 右侧功能导航栏：工具图标切换、底部主题切换 |

 ## 目录结构

 遵循与 `pages/` 相同的 UI + Hook 分离模式：

 ```
-layout/TopBar/
-├── index.tsx              # 布局入口
-├── useTopBar.ts           # 业务逻辑 Hook
-├── constants.ts           # 常量
-├── SearchInput.tsx        # 搜索输入框
-├── SearchDropdown.tsx     # 搜索结果/历史下拉面板
-├── SearchResultItem.tsx   # 单条搜索结果项
-├── TopBarActions.tsx      # 右侧操作按钮组
+layout/FeatureNav/
+├── index.tsx              # 垂直图标导航 + 底部主题按钮
+├── useFeatureNav.ts       # 读路由状态，暴露 navItems / navigateTo
+├── useThemeToggle.ts      # 主题模式循环切换逻辑
+├── ThemeToggleButton.tsx  # 主题切换按钮
+├── resolveNavFeatures.ts  # 功能列表解析
 └── __tests__/
    └── index.test.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();
-  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 fade-in-slide-top-2">
-      <ul role="listbox" className="p-1.5">
-        {!isSearching && items.length > 0 && (
-          <li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-            最近搜索
-          </li>
-        )}
-        {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>
-  );
-}
@@ -1,55 +0,0 @@
-import { type KeyboardEvent, 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: 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}
-        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 ? (
-        <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>
-      ) : (
-        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center 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>
-      )}
-    </div>
-  );
-}
@@ -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>
-  );
-}
@@ -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>
-  );
-}
@@ -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');
-  });
-});
@@ -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);
-    });
-  });
-});
@@ -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';
-}
@@ -1,71 +0,0 @@
-import { ArrowLeft } 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,
-    goHome,
-    clearSearch,
-  } = useTopBar();
-
-  const actions = [{ id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode }];
-
-  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>
-  );
-}
@@ -1,174 +0,0 @@
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent as ReactKeyboardEvent,
-  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 { 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: ReactKeyboardEvent) => void;
-  cycleThemeMode: () => 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);
-
-  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 recentFeatures = 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: ReactKeyboardEvent) => {
-    const isSearching = !!searchQuery.trim();
-    const items = isSearching ? searchResults : recentFeatures;
-    const totalItems = items.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();
-      let feature: FeatureConfig | undefined;
-      if (selectedIndex >= 0 && selectedIndex < totalItems) {
-        feature = items[selectedIndex];
-      } else if (isSearching && searchResults.length > 0) {
-        feature = searchResults[0];
-      }
-      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() || recentFeatures.length > 0);
-
-  return {
-    searchQuery,
-    searchResults,
-    recentFeatures,
-    selectedIndex,
-    showDropdown,
-    isDashboard: currentPage === 'dashboard',
-    ThemeIcon,
-    themeTitle,
-    containerRef,
-    inputRef,
-    handleSearchQueryChange,
-    handleSearchFocus,
-    handleSelectFeature,
-    handleKeyDown,
-    cycleThemeMode,
-    goHome,
-    clearSearch,
-  };
-}
@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';

 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }
@@ -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();
-  });
-});
@@ -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']);
-  });
-});
@@ -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;
-}
@@ -1,61 +0,0 @@
-import { useDashboard } from './useDashboard';
-
-export default function Index() {
-  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
-
-  return (
-    <div className="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="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="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="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="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>
-  );
-}
@@ -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 };
-}
@@ -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();
+  });
 });
@@ -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}');
+  });
+});
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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,13 +108,16 @@ 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}
    >
+      <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`,
@@ -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>
+  );
+}
@@ -1,55 +1,45 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+import React, { useMemo } from 'react';
 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<
-  string,
-  { inputPlaceholder: string; outputLabel: string; emptyHint: string }
-> = {
+const CONVERT_LABELS: Record<string, { inputPlaceholder: string; outputLabel: 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 [debouncedInput, setDebouncedInput] = useState('');
+  const { input, setInput, debouncedInput } = tools;
+  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]);

+  const preview = useMemo(() => buildPreview(input), [input]);
+
  return (
-    <div className={cn('w-full flex flex-col gap-4', className)} {...props}>
+    <div className={cn('w-full flex flex-1 min-h-0 flex-col gap-3', className)} {...props}>
+      <CollapsiblePanel
+        title="JSON 输入"
+        collapsed={inputCollapsed}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
+        preview={preview}
+      >
        <TextInputArea
+          fill
+          borderless
          placeholder={labels.inputPlaceholder}
          value={input}
          onChange={setInput}
          externalError={error || runtimeError || undefined}
          showClear={true}
          allowCopy={true}
-        minRows={7}
-        maxRows={14}
+          className="min-h-0 flex-1"
          onClear={() => setInput('')}
        />
+      </CollapsiblePanel>

-      {result?.output ? (
+      {result?.output && (
+        <div className="flex min-h-0 flex-1">
          <JsonResultPanel
+            fill
            title={labels.outputLabel}
            content={result.output}
            originalBytes={result.originalBytes}
            outputBytes={result.outputBytes}
-          maxHeight="380px"
          />
-      ) : (
-        <EmptyPlaceholder>
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
-        </EmptyPlaceholder>
+        </div>
      )}
    </div>
  );
@@ -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>
+  );
+}
@@ -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() {
-  const [input, setInput] = useState('');
-  const [debouncedInput, setDebouncedInput] = useState('');
+interface JsonFormatSectionProps {
+  tools: UseJsonToolsReturn;
+}
+
+export default function JsonFormatSection({ tools }: JsonFormatSectionProps) {
+  const { input, setInput, debouncedInput } = tools;
  const [indentSize, setIndentSize] = useState<number>(2);
  const [sortKeys, setSortKeys] = useState(false);
-
-  useEffect(() => {
-    const handle = setTimeout(() => {
-      setDebouncedInput(input);
-    }, 250);
-    return () => clearTimeout(handle);
-  }, [input]);
+  const [inputCollapsed, setInputCollapsed] = useState(false);

  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="flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60">
+    <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 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>

+      <CollapsiblePanel
+        title="JSON 输入"
+        collapsed={inputCollapsed}
+        onToggleCollapse={() => setInputCollapsed((v) => !v)}
+        preview={preview}
+      >
        <TextInputArea
+          fill
+          borderless
          placeholder="输入需要格式化的 JSON..."
          value={input}
          onChange={setInput}
          externalError={error || runtimeError || undefined}
          showClear={true}
          allowCopy={true}
-        minRows={8}
-        maxRows={15}
+          className="min-h-0 flex-1"
          onClear={() => setInput('')}
        />
+      </CollapsiblePanel>

-      {result?.formatted ? (
+      {result?.formatted && (
+        <div className="flex min-h-0 flex-1">
          <JsonResultPanel
+            fill
            title="格式化结果"
            content={result.formatted}
            originalBytes={result.originalBytes}
            outputBytes={result.formattedBytes}
          />
-      ) : (
-        <EmptyPlaceholder>
-          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
-        </EmptyPlaceholder>
+        </div>
      )}
    </div>
  );
@@ -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"
-        style={{ maxHeight }}
+        className={cn(
+          '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>
@@ -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,22 +231,32 @@ const NodeRow = React.memo(

 NodeRow.displayName = 'NodeRow';

-export default function JsonTree({
+const JsonTree = React.forwardRef<HTMLDivElement, JsonTreeProps>(
+  (
+    {
      node,
      side,
      defaultExpandDepth = 2,
      activePath,
+      fill = false,
+      expandedPaths,
+      onTogglePath,
      className,
      ...props
-}: JsonTreeProps) {
+    },
+    ref,
+  ) => {
    return (
      <div
+        ref={ref}
        className={cn(
-        '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',
+          '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',
+          fill ? 'min-h-0 flex-1' : 'min-h-[200px] max-h-[520px]',
          className,
        )}
        {...props}
      >
+        <div className="min-w-full w-fit">
          <NodeRow
            node={node}
            side={side}
@@ -238,10 +264,18 @@ export default function JsonTree({
            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'}`;
@@ -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();
+  });
+});
@@ -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();
+  });
+});
@@ -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();
+  });
+});
@@ -1,41 +1,18 @@
-import JsonDiffInput from './components/JsonDiffInput';
-import DiffResult from './components/DiffResult';
-import DiffNavigator from './components/DiffNavigator';
+import DiffWorkspace from './components/DiffWorkspace';
 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 {
-    pageMode,
-    setPageMode,
-    leftInput,
-    rightInput,
-    setLeftInput,
-    setRightInput,
-    leftError,
-    rightError,
-    viewMode,
-    setViewMode,
-    diffResult,
-    total,
-    currentDiffIndex,
-    handlePrev,
-    handleNext,
-    activePath,
-    yamlConvert,
-    tomlConvert,
-    minifyConvert,
-  } = useJsonTools();
+  const tools = useJsonTools();
+  const { pageMode, setPageMode, yamlConvert, tomlConvert, minifyConvert } = tools;

  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">
-          <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>
+        <DiffWorkspace tools={tools} />
      ) : 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>
  );
@@ -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 [rightInput, setRightInput] = useState('');
-  const [debouncedLeft, setDebouncedLeft] = useState('');
-  const [debouncedRight, setDebouncedRight] = useState('');
+  const [persistedLeft, setPersistedLeft] = useStorageState('jsonTools/diffLeft', '');
+  const [persistedRight, setPersistedRight] = useStorageState('jsonTools/diffRight', '');
+  const [persistedInput, setPersistedInput] = useStorageState('jsonTools/input', '');
+
+  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(val);
-      setCurrentDiffIndex(0);
-    },
-    setRightInput: (val: string) => {
-      setRightInput(val);
-      setCurrentDiffIndex(0);
-    },
+    setLeftInput,
+    setRightInput,
    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,
@@ -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>
                ))}
@@ -41,10 +41,7 @@ export default function ConverterForm({
          placeholder={INPUT_PLACEHOLDERS[mode]}
          value={input}
          onChange={(e) => setInput(e.target.value)}
-          className={cn(
-            'font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background',
-            error && 'border-destructive focus-visible:ring-destructive',
-          )}
+          className={cn('h-10', error && 'border-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
-                key={z}
-                value={z}
-                className="text-xs font-semibold focus:bg-accent cursor-pointer"
-              >
+              <SelectItem key={z} value={z} className="cursor-pointer">
                {z}
              </SelectItem>
            ))}
@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
 import { CopyButton } from '@/components/CopyButton';
@@ -7,7 +8,7 @@ import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';

-interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
+interface LiveClockProps extends HTMLAttributes<HTMLDivElement> {
  unit: UnitType;
  onUseNow: (val: number) => void;
 }
@@ -28,18 +29,14 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
  return (
    <div
      className={cn(
-        'flex items-center gap-3 px-3 h-10 rounded-lg border border-border/80 bg-secondary/50',
+        'flex items-center gap-3 px-3 h-10 rounded-lg font-bold text-[12px] border px-[20px]',
        className,
      )}
      {...props}
    >
-      <span className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider whitespace-nowrap shrink-0 selection:bg-transparent select-none">
-        当前时间戳
-      </span>
+      <span>当前时间戳</span>

-      <span className="flex-1 font-mono font-bold text-foreground text-sm tracking-tight leading-none truncate tabular-nums">
-        {text}
-      </span>
+      <span className="flex-1 text-sm ">{text}</span>

      <Button
        type="button"
@@ -50,12 +47,12 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
        title="填充到下方"
        variant="ghost"
        size="icon"
-        className="h-7 w-7 text-muted-foreground hover:text-foreground"
+        className="h-7 w-7"
      >
        <Clock className="w-3.5 h-3.5" />
      </Button>

-      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7 rounded-md border" />
+      <CopyButton text={text} tooltip="复制时间戳" className="h-7 w-7" />
    </div>
  );
 }
@@ -34,16 +34,15 @@ export default function ResultView({
        转换结果
      </span>

-      <div className="bg-card text-card-foreground border border-border p-4 sm:p-5 rounded-xl relative shadow-sm flex justify-between items-center gap-4 focus-within:ring-1 focus-within:ring-ring">
-        <span className="font-mono font-extrabold text-foreground break-all text-xl sm:text-2xl tracking-tight leading-tight select-all tabular-nums">
-          {result}
-        </span>
+      <div className="bg-card border p-4 rounded-lg flex items-center gap-3 justify-between">
+        <span className="break-all text-lg select-all flex-1">{result}</span>
+
        <CopyButton
          text={result}
          tooltip="复制结果"
          variant="ghost"
          size="icon"
-          className="h-7 w-7 text-muted-foreground hover:text-foreground"
+          className="h-7 w-7"
        />
      </div>
    </div>
@@ -28,10 +28,11 @@ const isValidPage = (page: unknown): page is PageType => {
 };

 /**
- * 校验页面列表是否合法
+ * 从页面列表中过滤非法项（如已移除的 dashboard），保留合法 PageType
 */
-const isValidPageList = (pages: unknown): pages is PageType[] => {
-  return Array.isArray(pages) && pages.every(isValidPage);
+const sanitizePageList = (pages: unknown): PageType[] | null => {
+  if (!Array.isArray(pages)) return null;
+  return pages.filter(isValidPage);
 };

 /**
@@ -47,6 +48,15 @@ const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[]
  return [...preserved, ...newItems];
 };

+/**
+ * 解析并合并页面列表：过滤非法项后与默认列表合并
+ */
+const resolvePageList = (pages: unknown, defaults: PageType[]): PageType[] => {
+  const sanitized = sanitizePageList(pages);
+  if (sanitized === null) return defaults;
+  return mergeWithDefaults(sanitized, defaults);
+};
+
 interface RouterContextType {
  currentPage: PageType;
  visiblePages: PageType[];
@@ -54,7 +64,6 @@ interface RouterContextType {
  recentlyUsedTools: PageType[];
  isLoaded: boolean;
  navigateTo: (page: PageType) => void;
-  goHome: () => void;
  setVisiblePages: (pages: PageType[]) => void;
  setPageOrder: (pages: PageType[]) => void;
 }
@@ -72,7 +81,7 @@ interface RouterProviderProps {

 export function RouterProvider({
  children,
-  defaultRoute = 'dashboard',
+  defaultRoute = 'timestamp',
  syncRoute = true,
  syncKey = 'app/currentRoute',
  visiblePagesKey = 'app/visiblePages',
@@ -82,26 +91,19 @@ export function RouterProvider({
    getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
  );

-  const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
-    const snapshot = getSyncSnapshot(
-      visiblePagesKey as string,
+  const [visiblePages, setVisiblePages] = useState<PageType[]>(() =>
+    resolvePageList(
+      getSyncSnapshot(visiblePagesKey as string, null),
      getDefaultVisibleFeatureKeys(),
-      isValidPageList,
+    ),
  );
-    return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
-  });

-  const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
-    const snapshot = getSyncSnapshot(
-      pageOrderKey as string,
-      getDefaultPageOrder(),
-      isValidPageList,
+  const [pageOrder, setPageOrder] = useState<PageType[]>(() =>
+    resolvePageList(getSyncSnapshot(pageOrderKey as string, null), getDefaultPageOrder()),
  );
-    return mergeWithDefaults(snapshot, getDefaultPageOrder());
-  });

-  const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(() =>
-    getSyncSnapshot('app/recentlyUsedTools', [], isValidPageList),
+  const [recentlyUsedTools, setRecentlyUsedTools] = useState<PageType[]>(
+    () => sanitizePageList(getSyncSnapshot('app/recentlyUsedTools', null)) ?? [],
  );

  const [isLoaded, setIsLoaded] = useState(false);
@@ -127,14 +129,15 @@ export function RouterProvider({
      if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
        setCurrentPage(savedRoute);
      }
-      if (isValidPageList(savedVisiblePages)) {
-        setVisiblePages(mergeWithDefaults(savedVisiblePages, getDefaultVisibleFeatureKeys()));
+      if (sanitizePageList(savedVisiblePages) !== null) {
+        setVisiblePages(resolvePageList(savedVisiblePages, getDefaultVisibleFeatureKeys()));
      }
-      if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
-        setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
+      if (sanitizePageList(savedPageOrder) !== null) {
+        setPageOrder(resolvePageList(savedPageOrder, getDefaultPageOrder()));
      }
-      if (isValidPageList(savedRecentTools)) {
-        setRecentlyUsedTools(savedRecentTools);
+      const sanitizedRecentTools = sanitizePageList(savedRecentTools);
+      if (sanitizedRecentTools !== null) {
+        setRecentlyUsedTools(sanitizedRecentTools);
      }
      canPersistRef.current = true;

@@ -250,20 +253,21 @@ export function RouterProvider({
      }
      if (changes[visiblePagesKey as string]) {
        const newPages = changes[visiblePagesKey as string].newValue;
-        if (isValidPageList(newPages)) {
-          setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
+        if (sanitizePageList(newPages) !== null) {
+          setVisiblePages(resolvePageList(newPages, getDefaultVisibleFeatureKeys()));
        }
      }
      if (changes[pageOrderKey as string]) {
        const newOrder = changes[pageOrderKey as string].newValue;
-        if (isValidPageList(newOrder)) {
-          setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
+        if (sanitizePageList(newOrder) !== null) {
+          setPageOrder(resolvePageList(newOrder, getDefaultPageOrder()));
        }
      }
      if (changes['app/recentlyUsedTools']) {
        const newRecent = changes['app/recentlyUsedTools'].newValue;
-        if (isValidPageList(newRecent)) {
-          setRecentlyUsedTools(newRecent);
+        const sanitizedRecent = sanitizePageList(newRecent);
+        if (sanitizedRecent !== null) {
+          setRecentlyUsedTools(sanitizedRecent);
        }
      }
      if (changes['contextMenu/pendingData']) {
@@ -295,12 +299,6 @@ export function RouterProvider({
    });
  };

-  const goHome = () => {
-    hasUserNavigatedRef.current = true;
-    canPersistRef.current = true;
-    setCurrentPage('dashboard');
-  };
-
  return (
    <RouterContext.Provider
      value={{
@@ -310,7 +308,6 @@ export function RouterProvider({
        recentlyUsedTools,
        isLoaded,
        navigateTo,
-        goHome,
        setVisiblePages,
        setPageOrder,
      }}
@@ -63,13 +63,13 @@ describe('RouterProvider', () => {
    mockStorageBatch();

    render(
-      <RouterProvider defaultRoute="dashboard">
+      <RouterProvider defaultRoute="timestamp">
        <TestComponent />
      </RouterProvider>,
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });

    expect(storageUtil.getMany).toHaveBeenCalledWith([
@@ -82,7 +82,7 @@ describe('RouterProvider', () => {
  });

  it('应该从指定的 syncKey 加载路由', async () => {
-    mockStorageBatch({ 'app/popupRoute': 'timestamp' });
+    mockStorageBatch({ 'app/popupRoute': 'jwt' });

    render(
      <RouterProvider syncKey="app/popupRoute">
@@ -91,7 +91,7 @@ describe('RouterProvider', () => {
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('jwt');
    });
  });

@@ -105,7 +105,7 @@ describe('RouterProvider', () => {
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });

    const btn = screen.getByTestId('navigate-btn');
@@ -143,7 +143,6 @@ describe('RouterProvider', () => {

  it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -175,14 +174,78 @@ describe('RouterProvider', () => {
      const visiblePages = screen.getByTestId('visible-pages').textContent!;
      const pageOrder = screen.getByTestId('page-order').textContent!;

-      expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
+      expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
      expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
    });
  });

+  it('storage 中 dashboard 路由无效时应回退到 timestamp', async () => {
+    mockStorageBatch({ 'app/popupRoute': 'dashboard' });
+
+    render(
+      <RouterProvider syncKey="app/popupRoute" defaultRoute="timestamp">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
+    });
+  });
+
+  it('storage 列表含 dashboard 时应过滤并保留其余自定义配置', async () => {
+    mockStorageBatch({
+      'app/popupVisiblePages': ['dashboard', 'jwt', 'timestamp'],
+      'app/popupPageOrder': ['jwt', 'dashboard', 'timestamp'],
+      'app/recentlyUsedTools': ['dashboard', 'jwt'],
+    });
+
+    render(
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    await waitFor(() => {
+      const visiblePages = screen.getByTestId('visible-pages').textContent!;
+      const pageOrder = screen.getByTestId('page-order').textContent!;
+
+      expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
+      expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
+      expect(visiblePages).not.toContain('dashboard');
+      expect(pageOrder).not.toContain('dashboard');
+    });
+  });
+
+  it('localStorage 快照含 dashboard 时应过滤并保留其余配置', async () => {
+    localStorage.setItem(
+      'snapshot/app/popupVisiblePages',
+      JSON.stringify(['dashboard', 'jwt', 'timestamp']),
+    );
+    localStorage.setItem(
+      'snapshot/app/popupPageOrder',
+      JSON.stringify(['jwt', 'dashboard', 'timestamp']),
+    );
+
+    mockStorageBatch();
+
+    render(
+      <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
+        <TestComponent />
+      </RouterProvider>,
+    );
+
+    const visiblePages = screen.getByTestId('visible-pages').textContent!;
+    const pageOrder = screen.getByTestId('page-order').textContent!;
+
+    expect(visiblePages.startsWith('jwt,timestamp')).toBe(true);
+    expect(pageOrder.startsWith('jwt,timestamp')).toBe(true);
+    expect(visiblePages).not.toContain('dashboard');
+    expect(pageOrder).not.toContain('dashboard');
+  });
+
  it('应该从 localStorage 快照合并缺失的新功能', async () => {
    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -232,7 +295,6 @@ describe('RouterProvider', () => {
      .calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;

    const oldVisiblePages = [
-      'dashboard',
      'timestamp',
      'storageCleaner',
      'qrCode',
@@ -260,7 +322,7 @@ describe('RouterProvider', () => {
      const visiblePages = screen.getByTestId('visible-pages').textContent!;
      const pageOrder = screen.getByTestId('page-order').textContent!;

-      expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
+      expect(visiblePages.startsWith('timestamp,storageCleaner')).toBe(true);
      expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
    });
  });
@@ -268,7 +330,7 @@ describe('RouterProvider', () => {
  it('localStorage 快照过期时，loadInitialData 完成前不应覆盖 chrome.storage', async () => {
    const staleRoute = 'timestamp';
    const correctRoute = 'jsonTools';
-    const defaultVisible = ['dashboard', 'timestamp', 'storageCleaner'];
+    const defaultVisible = ['timestamp', 'storageCleaner'];
    const defaultOrder = ['timestamp', 'storageCleaner'];

    localStorage.setItem('snapshot/app/currentRoute', JSON.stringify(staleRoute));
@@ -323,7 +385,7 @@ describe('RouterProvider', () => {
    );

    await waitFor(() => {
-      expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
    });
    expect(storageUtil.set).not.toHaveBeenCalled();
  });
@@ -336,7 +398,7 @@ describe('RouterProvider', () => {

    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
      await getBlocked;
-      return { 'app/currentRoute': 'dashboard' };
+      return { 'app/currentRoute': 'jwt' };
    });

    render(
@@ -93,11 +93,28 @@
  display: none;
 }

-@layer components {
-  .page-transition-dashboard {
-    @apply motion-reduce:transition-none;
-  }
+/* 细滚动条：仅作用于需要内部滚动的面板/结果区（覆盖上方的全局隐藏） */
+.diff-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.diff-scroll::-webkit-scrollbar {
+  display: block;
+  width: 6px;
+  height: 6px;
+}
+.diff-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.diff-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+.dark .diff-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.25);
+}

+@layer components {
  .page-transition-enter {
    @apply motion-reduce:transition-none;
    animation: tt-page-enter 200ms ease-out;
@@ -2,7 +2,6 @@
 * 应用页面类型定义
 */
 export type PageType =
-  | 'dashboard' // 仪表盘/首页
  | 'timestamp' // 时间戳转换工具
  | 'storageCleaner' // 存储清理工具
  | 'qrCode' // 二维码工具
@@ -88,10 +87,14 @@ export interface StorageSchema {
  'qrCode/qrExpanded': boolean;
  /** 二维码工具中 URL 部分是否展开 */
  'qrCode/urlExpanded': boolean;
-  /** 搜索历史记录 */
-  'app/searchHistory': string[];
  /** JSON 工具页面当前子模式 */
  'jsonTools/pageMode': JsonToolsPageMode;
+  /** JSON 工具：format/yaml/toml/minify 共享的输入内容 */
+  'jsonTools/input': string;
+  /** JSON 工具：diff 模式左侧输入内容 */
+  'jsonTools/diffLeft': string;
+  /** JSON 工具：diff 模式右侧输入内容 */
+  'jsonTools/diffRight': string;
  /** Base64 转换器页面当前子模式 */
  'base64Converter/pageMode': Base64ConverterPageMode;
  /** Base64 转换器「文件」子模式当前方向 */
@@ -37,7 +37,7 @@ describe('chromeStorage', () => {
    });

    it('应该支持数组类型值', async () => {
-      const pages = ['dashboard', 'timestamp'] as const;
+      const pages = ['timestamp', 'jwt'] as const;
      (chrome.storage.local.get as any).mockResolvedValue({ 'app/visiblePages': pages });

      const result = await storageUtil.get('app/visiblePages');
@@ -126,7 +126,7 @@ describe('chromeStorage', () => {
    });

    it('应该成功设置数组值', async () => {
-      const pages: Array<'dashboard' | 'timestamp'> = ['dashboard', 'timestamp'];
+      const pages: Array<'timestamp' | 'jwt'> = ['timestamp', 'jwt'];
      await storageUtil.set('app/visiblePages', pages);

      expect(chrome.storage.local.set).toHaveBeenCalledWith({ 'app/visiblePages': pages });
@@ -169,13 +169,11 @@ describe('useStorageState', () => {
  });

  it('加载失败时不应把快照默认值写回 Chrome Storage', async () => {
-    localStorage.setItem('snapshot/app/searchHistory', JSON.stringify([]));
+    localStorage.setItem('snapshot/qrCode/urlExpanded', JSON.stringify(true));

    (storageUtil.get as any).mockRejectedValue(new Error('Storage read failed'));

-    renderHook(() =>
-      useStorageState('app/searchHistory', [], (val): val is string[] => Array.isArray(val)),
-    );
+    renderHook(() => useStorageState('qrCode/urlExpanded', false));

    await waitFor(() => {
      expect(storageUtil.set).not.toHaveBeenCalled();
@@ -19,7 +19,6 @@ const buildPath = (parent: string, key: string, isArrayChild: boolean): string =
  }
  const needsEscaping = key.includes('.') || key.includes('[') || key.includes(' ');
  const formattedKey = needsEscaping ? `["${key}"]` : `.${key}`;
-
  return parent === ROOT_PATH ? `${ROOT_PATH}${formattedKey}` : `${parent}${formattedKey}`;
 };

@@ -30,104 +29,48 @@ const primitiveEqual = (a: unknown, b: unknown): boolean => {
  return a === b;
 };

-const diffNode = (
+// ---------- 迭代遍历框架 ----------
+
+interface StackFrame {
+  left: MaybeMissing;
+  right: MaybeMissing;
+  key: string;
+  path: string;
+  /** 子节点数量（组装时从 resultStack 弹出） */
+  childCount: number;
+  /** 是否已展开 */
+  assembled: boolean;
+  /** 分类结果缓存 */
+  leftObj: boolean;
+  rightObj: boolean;
+  leftArr: boolean;
+  rightArr: boolean;
+  leftIsContainer: boolean;
+  rightIsContainer: boolean;
+}
+
+const createLeafNode = (
+  key: string,
+  path: string,
+  type: DiffNode['type'],
+  oldValue: MaybeMissing,
+  newValue: MaybeMissing,
+): DiffNode => ({
+  key,
+  type,
+  oldValue: oldValue === SENTINEL ? undefined : oldValue,
+  newValue: newValue === SENTINEL ? undefined : newValue,
+  path,
+  isLeaf: true,
+  hasDiffInChildren: false,
+});
+
+const classifyPrimitive = (
  left: MaybeMissing,
  right: MaybeMissing,
  key: string,
  path: string,
-  diffPaths: string[],
-): DiffNode => {
-  if (left === SENTINEL && right !== SENTINEL) {
-    diffPaths.push(path);
-    return {
-      key,
-      type: 'added',
-      oldValue: undefined,
-      newValue: right,
-      path,
-      isLeaf: !isObject(right) && !isArray(right),
-      hasDiffInChildren: false,
-    };
-  }
-
-  if (right === SENTINEL && left !== SENTINEL) {
-    diffPaths.push(path);
-    return {
-      key,
-      type: 'removed',
-      oldValue: left,
-      newValue: undefined,
-      path,
-      isLeaf: !isObject(left) && !isArray(left),
-      hasDiffInChildren: false,
-    };
-  }
-
-  const leftObj = isObject(left);
-  const rightObj = isObject(right);
-  const leftArr = isArray(left);
-  const rightArr = isArray(right);
-
-  if (leftObj && rightObj) {
-    const keySet = new Set<string>();
-    const leftKeys = Object.keys(left);
-    const rightKeys = Object.keys(right);
-
-    for (let i = 0; i < leftKeys.length; i++) keySet.add(leftKeys[i]);
-    for (let i = 0; i < rightKeys.length; i++) keySet.add(rightKeys[i]);
-
-    const children: DiffNode[] = [];
-    keySet.forEach((k) => {
-      const childPath = buildPath(path, k, false);
-      const l: MaybeMissing = k in left ? left[k] : SENTINEL;
-      const r: MaybeMissing = k in right ? right[k] : SENTINEL;
-      children.push(diffNode(l, r, k, childPath, diffPaths));
-    });
-
-    const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
-
-    return {
-      key,
-      type: hasDiffInChildren ? 'modified' : 'unchanged',
-      oldValue: left,
-      newValue: right,
-      children,
-      path,
-      isLeaf: false,
-      hasDiffInChildren,
-    };
-  }
-
-  if (leftArr && rightArr) {
-    const len = Math.max(left.length, right.length);
-    const children: DiffNode[] = new Array(len);
-
-    for (let i = 0; i < len; i++) {
-      const k = String(i);
-      const childPath = buildPath(path, k, true);
-      const l: MaybeMissing = i < left.length ? left[i] : SENTINEL;
-      const r: MaybeMissing = i < right.length ? right[i] : SENTINEL;
-      children[i] = diffNode(l, r, k, childPath, diffPaths);
-    }
-
-    const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
-
-    return {
-      key,
-      type: hasDiffInChildren ? 'modified' : 'unchanged',
-      oldValue: left,
-      newValue: right,
-      children,
-      path,
-      isLeaf: false,
-      hasDiffInChildren,
-    };
-  }
-
-  const leftIsContainer = leftObj || leftArr;
-  const rightIsContainer = rightObj || rightArr;
-
-  if (!leftIsContainer && !rightIsContainer) {
+): DiffNode | null => {
  if (left === null || right === null) {
    if (left === null && right === null) {
      return {
@@ -140,8 +83,9 @@ const diffNode = (
        hasDiffInChildren: false,
      };
    }
-    } else if (typeof left === typeof right) {
-      if (primitiveEqual(left, right)) {
+    return null;
+  }
+  if (typeof left === typeof right && primitiveEqual(left, right)) {
    return {
      key,
      type: 'unchanged',
@@ -152,27 +96,172 @@ const diffNode = (
      hasDiffInChildren: false,
    };
  }
-    }
-  }
-
-  diffPaths.push(path);
-  return {
-    key,
-    type: 'modified',
-    oldValue: left,
-    newValue: right,
-    path,
-    isLeaf: !leftIsContainer && !rightIsContainer,
-    hasDiffInChildren: false,
-  };
+  return null;
 };

 /**
- * 比较两个 JSON 值的差异
+ * 合并对象 key：左全部 + 右独有的（无需 Set，O(K) in 查找）
+ */
+const mergedKeys = (left: Record<string, unknown>, right: Record<string, unknown>): string[] => {
+  const result: string[] = Object.keys(left);
+  for (const k of Object.keys(right)) {
+    if (!(k in left)) result.push(k);
+  }
+  return result;
+};
+
+/**
+ * 比较两个 JSON 值的差异（迭代版，显式栈替代递归）
 */
 export const diffJson = (left: unknown, right: unknown): DiffResult => {
  const diffPaths: string[] = [];
-  const root = diffNode(left, right, '', ROOT_PATH, diffPaths);
+
+  const rootFrame: StackFrame = {
+    left,
+    right,
+    key: '',
+    path: ROOT_PATH,
+    childCount: 0,
+    assembled: false,
+    leftObj: isObject(left),
+    rightObj: isObject(right),
+    leftArr: isArray(left),
+    rightArr: isArray(right),
+    leftIsContainer: isObject(left) || isArray(left),
+    rightIsContainer: isObject(right) || isArray(right),
+  };
+
+  const stack: StackFrame[] = [rootFrame];
+  const resultStack: DiffNode[] = [];
+
+  while (stack.length > 0) {
+    const frame = stack.pop()!;
+
+    // ---- 组装阶段：从 resultStack 弹出子节点 ----
+    if (frame.assembled) {
+      const { childCount } = frame;
+      const children: DiffNode[] = new Array(childCount);
+      // 子节点按正序压入 resultStack，弹出时逆序取
+      for (let i = childCount - 1; i >= 0; i--) {
+        children[i] = resultStack.pop()!;
+      }
+
+      const hasDiffInChildren = children.some((c) => c.type !== 'unchanged' || c.hasDiffInChildren);
+      const type: DiffNode['type'] = hasDiffInChildren ? 'modified' : 'unchanged';
+
+      const node: DiffNode = {
+        key: frame.key,
+        type,
+        oldValue: frame.left === SENTINEL ? undefined : frame.left,
+        newValue: frame.right === SENTINEL ? undefined : frame.right,
+        children,
+        path: frame.path,
+        isLeaf: false,
+        hasDiffInChildren,
+      };
+      resultStack.push(node);
+      continue;
+    }
+
+    const { left: l, right: r } = frame;
+
+    // ---- 一侧缺失 ----
+    if (l === SENTINEL && r !== SENTINEL) {
+      diffPaths.push(frame.path);
+      resultStack.push(createLeafNode(frame.key, frame.path, 'added', undefined, r));
+      continue;
+    }
+    if (r === SENTINEL && l !== SENTINEL) {
+      diffPaths.push(frame.path);
+      resultStack.push(createLeafNode(frame.key, frame.path, 'removed', l, undefined));
+      continue;
+    }
+
+    // ---- 双侧对象 ----
+    if (frame.leftObj && frame.rightObj) {
+      const keys = mergedKeys(l as Record<string, unknown>, r as Record<string, unknown>);
+      // 压入组装帧
+      stack.push({ ...frame, childCount: keys.length, assembled: true });
+      // 逆序压入子帧，保证正序处理
+      for (let i = keys.length - 1; i >= 0; i--) {
+        const k = keys[i];
+        const childPath = buildPath(frame.path, k, false);
+        const leftVal: MaybeMissing =
+          k in (l as Record<string, unknown>) ? (l as Record<string, unknown>)[k] : SENTINEL;
+        const rightVal: MaybeMissing =
+          k in (r as Record<string, unknown>) ? (r as Record<string, unknown>)[k] : SENTINEL;
+        stack.push({
+          left: leftVal,
+          right: rightVal,
+          key: k,
+          path: childPath,
+          childCount: 0,
+          assembled: false,
+          leftObj: isObject(leftVal),
+          rightObj: isObject(rightVal),
+          leftArr: isArray(leftVal),
+          rightArr: isArray(rightVal),
+          leftIsContainer: isObject(leftVal) || isArray(leftVal),
+          rightIsContainer: isObject(rightVal) || isArray(rightVal),
+        });
+      }
+      continue;
+    }
+
+    // ---- 双侧数组 ----
+    if (frame.leftArr && frame.rightArr) {
+      const leftArr = l as unknown[];
+      const rightArr = r as unknown[];
+      const len = Math.max(leftArr.length, rightArr.length);
+
+      stack.push({ ...frame, childCount: len, assembled: true });
+      for (let i = len - 1; i >= 0; i--) {
+        const k = String(i);
+        const childPath = buildPath(frame.path, k, true);
+        const leftVal: MaybeMissing = i < leftArr.length ? leftArr[i] : SENTINEL;
+        const rightVal: MaybeMissing = i < rightArr.length ? rightArr[i] : SENTINEL;
+        stack.push({
+          left: leftVal,
+          right: rightVal,
+          key: k,
+          path: childPath,
+          childCount: 0,
+          assembled: false,
+          leftObj: isObject(leftVal),
+          rightObj: isObject(rightVal),
+          leftArr: isArray(leftVal),
+          rightArr: isArray(rightVal),
+          leftIsContainer: isObject(leftVal) || isArray(leftVal),
+          rightIsContainer: isObject(rightVal) || isArray(rightVal),
+        });
+      }
+      continue;
+    }
+
+    // ---- 原始值比较 ----
+    if (!frame.leftIsContainer && !frame.rightIsContainer) {
+      const primitiveResult = classifyPrimitive(l, r, frame.key, frame.path);
+      if (primitiveResult) {
+        resultStack.push(primitiveResult);
+        continue;
+      }
+    }
+
+    // 类型不同或容器 vs 原始值 → modified
+    diffPaths.push(frame.path);
+    resultStack.push({
+      key: frame.key,
+      type: 'modified',
+      oldValue: l,
+      newValue: r,
+      path: frame.path,
+      isLeaf: !frame.leftIsContainer && !frame.rightIsContainer,
+      hasDiffInChildren: false,
+    });
+  }
+
+  const root = resultStack[resultStack.length - 1];
+
  return {
    root,
    diffPaths,
@@ -11,7 +11,6 @@ export default {
    './src/components/ErrorBoundary.tsx',
    './src/components/ErrorFallback.tsx',
    './src/components/PageErrorBoundary.tsx',
-    './src/components/PageSkeleton.tsx',
    './src/components/ui/button.tsx',
    './src/components/ui/input.tsx',
    './src/components/ui/sonner.tsx',
Author	SHA1	Message	Date
rsgltzyd	10817c3aac	refactor(json-tools): 重构状态管理逻辑并实现输入内容持久化	2026-07-14 20:16:09 +08:00
rsgltzyd	533ac84e22	feat(json-tools): 引入可折叠面板组件并优化布局交互	2026-07-14 20:04:19 +08:00
rsgltzyd	b7191c09bb	refactor(json-tools): 优化 JsonDiffPanel 交互体验并增强 TextInputArea 灵活性	2026-07-13 23:31:06 +08:00
rsgltzyd	60e74b5383	feat(json-tools): 实现响应式布局与窄屏手动比对模式	2026-07-13 23:23:49 +08:00
rsgltzyd	e252b9065b	style(ui): 优化 SwitchButtonGroup 交互样式并清理测试用例	2026-07-13 20:42:19 +08:00
rsgltzyd	bc851414b4	refactor(utils): 将 diffNode 实现从递归改为迭代遍历	2026-07-10 23:22:46 +08:00
rsgltzyd	e7639fef72	style: 增强 SwitchButtonGroup 的交互样式并移除冗余属性	2026-07-09 23:51:15 +08:00
rsgltzyd	a8c0809363	refactor: 优化组件导出并移除未使用的组件并清理冗余代码	2026-07-09 23:38:14 +08:00
rsgltzyd	fdbb51754d	refactor: 为 SelectItem 组件添加 cursor-pointer 类以改善用户体验	2026-07-09 23:36:52 +08:00
rsgltzyd	f0c3d9c173	refactor: 更新组件引用类型为 ComponentRef，以提高类型安全性	2026-07-09 23:28:59 +08:00
rsgltzyd	14d85e5265	refactor: 更新样式和组件结构以提升一致性和可读性 - 在 utils.ts 中引入 twMerge 以合并 Tailwind 类。 - 在 ConverterForm.tsx 中简化类名，移除冗余样式。 - 在 LiveClock.tsx 中调整样式，优化文本显示。 - 在 ResultView.tsx 中更新布局和样式，提升视觉效果。	2026-07-08 23:24:54 +08:00
rsgltzyd	c8c3c88d99	refactor: 移除 PageSkeleton 组件及相关测试，更新 RouterContainer 以简化加载逻辑	2026-07-06 20:05:52 +08:00
rsgltzyd	b487f71512	refactor: 移除 TopBar 组件，重构功能导航并引入主题切换按钮 - 删除 TopBar 及其相关组件和逻辑，简化布局结构。 - 新增 FeatureNav 组件，包含功能导航和主题切换按钮。 - 更新 README.md，反映新的组件结构和功能。 - 修改测试用例，确保新结构下的功能正常。	2026-07-05 22:30:13 +08:00
rsgltzyd	43038c5edb	refactor: 更新 RouterProvider 以过滤非法页面并合并配置	2026-07-05 22:20:04 +08:00
rsgltzyd	9aa7a51f0b	refactor: 移除 Dashboard 页面及相关功能，更新路由和组件逻辑 - 移除 Dashboard 相关的组件、特性和测试代码，简化项目结构。 - 更新 PageSkeleton 组件，默认渲染工具页面骨架。 - 修改 RouterContainer 和 RouterProvider 以适应新的默认路由策略，确保用户直接访问 timestamp 页面。 - 更新测试用例，确保在新结构下的功能正常。	2026-07-05 22:02:25 +08:00
rsgltzyd	d21e970f56	feat: 重构 Popup 布局，移除 Dashboard 页面并引入功能导航 - 更新 README.md，添加 Popup 功能导航文档链接。 - 新建 feature-nav-layout.md，详细描述 Popup 布局重构的背景、目标及设计。 - 移除 Dashboard 相关代码，更新 RouterProvider 和 TopBar 以适应新布局。 - 修改默认路由策略，确保新用户直接访问 timestamp 页面。	2026-07-05 21:55:22 +08:00