fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步

- 将 isRestrictedUrl 函数从 storageCleaner 移动到 restrictedUrls 模块，优化代码结构。
- 更新相关文件以引用新的位置，移除冗余的测试用例。

spec/README.md

@@ -0,0 +1,7 @@
+# Spec 目录
+
+功能规格、修复方案与验收标准文档。
+
+| 文档                                                                             | 状态              | 说明                                                 |
+| -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
+| [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |

spec/storage-cleaner/indexeddb-fix-plan.md

@@ -0,0 +1,435 @@
+# Storage Cleaner — IndexedDB 修复方案与验收标准
+
+> 创建时间: 2026-06-25
+> 状态: ✅ Phase 3 已完成（2026-06-25）
+> 关联模块: `src/utils/storageCleaner.ts`
+> 前置审查: Code Review（`storageCleaner.ts` 修改版）
+
+## 背景与目标
+
+本次修复针对 `storageCleaner.ts` 中 IndexedDB 清理逻辑及错误处理链路的审查结论，按优先级分三阶段实施。
+
+| 问题域              | 现状                                           | 目标                              |
+| ------------------- | ---------------------------------------------- | --------------------------------- |
+| IndexedDB fallback  | `store.clear()` 完成后立即 `db.close()`        | 等 transaction commit 后再关闭    |
+| deleteDatabase 超时 | 超时后仍可能触发 `onsuccess`，与 fallback 并发 | 单次删除生命周期内只 resolve 一次 |
+| 部分成功            | 多 DB 部分失败时 `count` 丢失                  | 失败结果保留已清理数量            |
+| 代码结构            | `runScript` / `runCleanScript` 重复            | 统一 executeScript 入口           |
+| 测试                | 缺多 DB 混合场景                               | 补单元测试覆盖                    |
+
+---
+
+## Phase 1 — 合并前必做（P1）
+
+### 1.1 等待 IndexedDB transaction 完成后再关闭连接
+
+#### 问题
+
+`clearObjectStores` 在 `Promise.all(clearStore...)` 结束后立刻 `db.close()`。单个 `clearReq.onsuccess` 只表示 request 完成，transaction 可能尚未 commit，存在清空被回滚的风险。
+
+#### 根因
+
+IndexedDB 规范中，transaction 的持久化以 `transaction.oncomplete` 为准，而非单个 request 的 `onsuccess`。
+
+#### 修复方案
+
+在注入脚本内的 `clearObjectStores` 中，增加 `waitForTransaction` 辅助函数：
+
+```typescript
+const waitForTransaction = (tx: IDBTransaction): Promise<void> =>
+  new Promise((resolve, reject) => {
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error ?? new Error('Transaction failed'));
+    tx.onabort = () => reject(tx.error ?? new Error('Transaction aborted'));
+  });
+```
+
+修改 `openReq.onsuccess` 分支：
+
+```typescript
+const transaction = db.transaction(storeNames, 'readwrite');
+const errors = (
+  await Promise.all(
+    storeNames.map((storeName) => clearStore(transaction.objectStore(storeName), storeName)),
+  )
+).filter((error): error is string => Boolean(error));
+
+try {
+  await waitForTransaction(transaction);
+} catch {
+  db.close();
+  resolve({
+    success: false,
+    errors: [`清空 IndexedDB 失败（${dbName}），请刷新后重试`],
+  });
+  return;
+}
+
+db.close();
+resolve({ success: errors.length === 0, errors });
+```
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts` — `injectClearIndexedDB` 内 `clearObjectStores`
+
+#### 新增测试
+
+```typescript
+it('should wait for transaction complete before closing db', async () => {
+  // mock: clear onsuccess 先于 transaction.oncomplete 触发
+  // 断言 db.close 在 transaction.oncomplete 之后调用
+});
+```
+
+---
+
+### 1.2 消除 deleteDatabase 超时竞态
+
+#### 问题
+
+超时 `resolve('timeout')` 后，`deleteReq.onsuccess` 仍可能触发；此时 fallback 的 `indexedDB.open` 与进行中的 `deleteDatabase` 可能并发，行为未定义。
+
+#### 修复方案
+
+为每个 DB 删除引入 **单次 settle** 状态：
+
+```typescript
+const waitForDeleteDatabase = (dbName: string, timeoutMs: number) =>
+  new Promise<'deleted' | 'blocked' | 'timeout' | 'error'>((resolve) => {
+    let settled = false;
+    const settle = (status: 'deleted' | 'blocked' | 'timeout' | 'error') => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timeout);
+      resolve(status);
+    };
+
+    const deleteReq = indexedDB.deleteDatabase(dbName);
+    const timeout = setTimeout(() => {
+      console.warn('IndexedDB delete timeout:', dbName);
+      settle('timeout');
+    }, timeoutMs);
+
+    deleteReq.onblocked = () => {
+      console.warn('IndexedDB delete blocked:', dbName);
+      settle('blocked');
+    };
+    deleteReq.onsuccess = () => settle('deleted');
+    deleteReq.onerror = () => settle('error');
+  });
+```
+
+#### timeout / blocked 后的 fallback 策略
+
+| 状态      | 行为                                                               |
+| --------- | ------------------------------------------------------------------ |
+| `blocked` | 立即 fallback `clearObjectStores`（页面仍占用连接，open 通常可行） |
+| `timeout` | 先 `await delay(100~200ms)` 再 fallback，降低与 delete 并发概率    |
+| `error`   | 不 fallback，直接报错                                              |
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts` — 替换现有 `new Promise` 删除逻辑
+
+#### 新增测试
+
+```typescript
+it('should ignore late onsuccess after delete timeout', async () => {
+  // deleteBehavior: timeout，5000ms 后 resolve timeout
+  // 6000ms 后再触发 onsuccess
+  // 断言：只走 fallback 一次，count 不因 late onsuccess 重复 +1
+});
+```
+
+---
+
+## Phase 2 — 建议同 PR 或紧接 follow-up（P2）
+
+### 2.1 IndexedDB 部分成功时保留 count
+
+#### 问题
+
+多 DB 场景返回 `{ count: 2, errors: ['...'] }` 时，`runCleanScript` 只返回 `{ success: false, error }`，用户看不到已清理 2 个库。
+
+#### 修复方案（推荐）
+
+扩展失败分支类型，可选 `count`：
+
+```typescript
+// src/types/storage.d.ts
+export type StorageCleanResult =
+  | { success: true; count: number }
+  | { success: false; error: string; count?: number }; // 部分成功时的已清理数
+```
+
+修改 `runCleanScript`：
+
+```typescript
+if (raw.errors?.length) {
+  const errorMsg = raw.errors.join('\n');
+  const partialHint = raw.count > 0 ? `（已成功清理 ${raw.count} 个数据库，但部分失败）\n` : '';
+  return {
+    success: false,
+    error: partialHint + errorMsg,
+    ...(raw.count > 0 ? { count: raw.count } : {}),
+  };
+}
+```
+
+#### UI 层（可选增强）
+
+`CleaningResult.tsx` 失败时若 `result.indexedDB?.count` 存在，可展示部分成功提示（非必须，error 字符串已含 hint 即可）。
+
+#### 涉及文件
+
+- `src/types/storage.d.ts`
+- `src/utils/storageCleaner.ts` — `runCleanScript`
+- `src/utils/__tests__/storageCleaner.test.ts`
+- （可选）`src/pages/StorageCleaner/components/CleaningResult.tsx`
+
+#### 新增测试
+
+```typescript
+it('should preserve partial count when some IndexedDB databases fail', async () => {
+  // 3 个 DB：2 成功删除，1 blocked 且 fallback 失败
+  // expect: success false, count 2, error 含「已成功清理 2 个」
+});
+```
+
+---
+
+### 2.2 统一 executeScript 调用入口
+
+#### 问题
+
+`runScript` 与 `runCleanScript` 各自调用 `browser.scripting.executeScript`，行为不一致（吞错 vs 抛错）。
+
+#### 修复方案
+
+抽取底层函数：
+
+```typescript
+type ExecuteScriptMode = 'fallback' | 'throw';
+
+async function executeInTab<T>(
+  tabId: number,
+  func: () => T | Promise<T>,
+  options: { errorLabel: string; mode: 'fallback'; fallback: T },
+): Promise<T>;
+async function executeInTab<T>(
+  tabId: number,
+  func: () => T | Promise<T>,
+  options: { errorLabel: string; mode: 'throw' },
+): Promise<T>;
+async function executeInTab<T>(...) {
+  try {
+    const [result] = await browser.scripting.executeScript({ target: { tabId }, func });
+    return (result?.result as T) ?? (options.mode === 'fallback' ? options.fallback : undefined as T);
+  } catch (error) {
+    console.error(`Failed to ${options.errorLabel}:`, error);
+    if (options.mode === 'throw') throw error;
+    return options.fallback;
+  }
+}
+```
+
+- `runScript` → `executeInTab(..., { mode: 'fallback', fallback })`
+- `runCleanScript` → `executeInTab(..., { mode: 'throw' })` + 结果解析
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts`
+
+#### 验收
+
+现有 11 个测试全部通过，无行为回归。
+
+---
+
+### 2.3 错误信息分隔符统一
+
+#### 问题
+
+`runCleanScript` 用 `'; '` 拼接，`clearStorage` 的 `result.error` 用 `'\n'`，UI 用 `break-all` 展示，多错误时可读性不一致。
+
+#### 修复方案
+
+IndexedDB 内部多错误统一改为 `'\n'`：
+
+```typescript
+error: raw.errors.join('\n');
+```
+
+#### 涉及文件
+
+- `src/utils/storageCleaner.ts`
+- 相关测试断言（若有 `'; '` 期望）
+
+---
+
+### 2.4 补充多 DB 混合场景测试
+
+| 用例               | 输入                           | 期望                                         |
+| ------------------ | ------------------------------ | -------------------------------------------- |
+| 全部成功           | 3 DB，均 delete success        | `success: true, count: 3`                    |
+| 部分 fallback 成功 | 2 success + 1 blocked→clear OK | `success: true, count: 3`                    |
+| 部分失败           | 2 success + 1 error            | `success: false, count: 2, error 含失败库名` |
+| 空库列表           | `databases()` 返回 `[]`        | `success: true, count: 0`                    |
+
+#### 涉及文件
+
+- `src/utils/__tests__/storageCleaner.test.ts`
+- 扩展 `createIndexedDBMock` 支持 per-db 不同 `deleteBehavior`
+
+---
+
+## Phase 3 — 可选优化（P3）
+
+### 3.1 超时常量提升到模块级
+
+```typescript
+// src/utils/storageCleaner.ts 或 src/pages/StorageCleaner/constants.ts
+const INDEXED_DB_DELETE_TIMEOUT_MS = 5000;
+const INDEXED_DB_CLEAR_STORE_TIMEOUT_MS = 5000;
+```
+
+注入脚本通过闭包引用（executeScript 会序列化 func，常量需在 func 外部定义并 capture，或仍写在 func 内但从模块常量赋值）。
+
+### 3.2 IndexedDB 逻辑拆分（长期）
+
+将 `clearObjectStores`、`waitForDeleteDatabase` 等抽到 `src/utils/indexedDbCleaner.ts` 的纯函数，注入层只做：
+
+```typescript
+async () => clearAllIndexedDBs(INDEXED_DB_DELETE_TIMEOUT_MS);
+```
+
+便于单测，不依赖 `mockExecuteScriptEval` 间接执行注入函数。工作量大，建议单独 PR。
+
+---
+
+## 实施顺序
+
+```mermaid
+flowchart TD
+  A[1.1 transaction.oncomplete] --> B[1.2 delete settle 防竞态]
+  B --> C[2.4 补多 DB 测试]
+  C --> D[2.1 部分成功 count]
+  D --> E[2.2 统一 executeInTab]
+  E --> F[2.3 错误分隔符]
+  F --> G[3.x 可选重构]
+```
+
+| 阶段    | 预估工作量 | 风险             |
+| ------- | ---------- | ---------------- |
+| Phase 1 | 0.5~1 天   | 低，逻辑局部     |
+| Phase 2 | 0.5~1 天   | 中，涉及类型扩展 |
+| Phase 3 | 1~2 天     | 低，可延后       |
+
+---
+
+## 验收标准
+
+### A. 自动化（CI 必须通过）
+
+```bash
+npm run test -- src/utils/__tests__/storageCleaner.test.ts
+npm run typecheck
+npm run lint
+```
+
+| 编号 | 标准                                                                           |
+| ---- | ------------------------------------------------------------------------------ |
+| A-1  | 全部单元测试通过，新增测试 ≥ 3（transaction 顺序、late onsuccess、多 DB 混合） |
+| A-2  | `tsc --noEmit` 无错误；若扩展 `StorageCleanResult`，所有引用处类型正确         |
+| A-3  | ESLint `--max-warnings=0` 通过                                                 |
+
+---
+
+### B. 功能行为
+
+| 编号 | 场景                                                 | 期望结果                                                                      |
+| ---- | ---------------------------------------------------- | ----------------------------------------------------------------------------- |
+| B-1  | 单 DB，`deleteDatabase` 成功                         | `indexedDB: { success: true, count: 1 }`，`overallSuccess: true`              |
+| B-2  | 单 DB，`deleteDatabase` blocked，fallback clear 成功 | `success: true, count: 1`；transaction 在 `oncomplete` 后 `db.close`          |
+| B-3  | 单 DB，delete 超时 5s，fallback clear 成功           | 5s 内进入 fallback；不因 late `onsuccess` 重复计数                            |
+| B-4  | fallback 中某 store clear hang 5s                    | `success: false`，error 含 `dbName/storeName`                                 |
+| B-5  | 3 DB：2 成功 + 1 失败                                | `success: false`，`count: 2`（Phase 2.1 后），error 含失败库名与部分成功提示  |
+| B-6  | `executeScript` 注入失败                             | `success: false`，**不得** `{ success: true, count: 0 }`                      |
+| B-7  | localStorage 成功 + cookies 失败                     | `overallSuccess: false`，`result.error` 为 `Cookies: ...`（换行分隔多项失败） |
+
+---
+
+### C. 回归与 UI
+
+| 编号 | 标准                                                                                                      |
+| ---- | --------------------------------------------------------------------------------------------------------- |
+| C-1  | `formatCleaningResult` 成功路径不变                                                                       |
+| C-2  | `CleaningResult` 失败时展示 `result.error`；含 `\n` 时多行可读（现有 `leading-relaxed break-all` 可接受） |
+| C-3  | `reloadAfterClean=true` 且 `overallSuccess=false` 时不刷新页面（`useStorageCleaner` 现有逻辑）            |
+| C-4  | Cookie 清理：domain 前导 `.` 剥离逻辑不变                                                                 |
+
+---
+
+### D. 手动验收（扩展环境）
+
+在 Chrome 加载 unpacked extension，选普通 HTTPS 页面：
+
+| 编号 | 步骤                                              | 期望                                                                    |
+| ---- | ------------------------------------------------- | ----------------------------------------------------------------------- |
+| D-1  | 页面写入 localStorage + IndexedDB，仅清 IndexedDB | 成功提示或明确错误；DevTools → Application → IndexedDB 数据为空或库已删 |
+| D-2  | 打开 DevTools 保持 IndexedDB 面板，执行清理       | 若 blocked，显示中文提示；fallback 成功后数据不可见                     |
+| D-3  | 勾选「清理后刷新」且全部成功                      | Toast「清理成功，即将刷新页面」，页面刷新                               |
+| D-4  | 部分失败                                          | 不刷新；结果区红色展示错误详情                                          |
+
+---
+
+### E. 代码质量
+
+| 编号 | 标准                                                               |
+| ---- | ------------------------------------------------------------------ |
+| E-1  | 注入脚本内无重复 `settled` / timeout 逻辑（删除与 clear 各自封装） |
+| E-2  | 错误文案仍为中文，含库名/store 名                                  |
+| E-3  | 无 `any`（测试文件除外）                                           |
+| E-4  | Phase 1 合并后，P1 项在 PR 描述中标注「已修复」并附测试名          |
+
+---
+
+## PR 检查清单
+
+```markdown
+## 修复内容
+
+- [ ] P1: transaction.oncomplete 后再 db.close
+- [ ] P1: deleteDatabase settle 防竞态
+- [ ] P2: 部分成功保留 count（可选）
+- [ ] P2: 多 DB 混合测试
+- [ ] P2: 错误信息 `\n` 分隔（可选）
+
+## 验收
+
+- [ ] npm run test / typecheck / lint 通过
+- [ ] 新增测试覆盖 B-2、B-3、B-5
+- [ ] 手动 D-1 ~ D-4 至少测 D-1、D-3
+```
+
+---
+
+## 风险与边界说明
+
+1. **fallback 清空 ≠ 删除库**：blocked 时只清 object store，库结构仍在；成功 `count` 表示「有效清理动作完成」，需在 UI/文档中说明（可选文案：「数据已清空，数据库结构可能仍存在」）。
+2. **timeout 延迟 fallback**：100~200ms 为经验值，无法完全消除竞态，只能降低概率；完全消除需浏览器不支持 abort delete 的前提下接受 best-effort。
+3. **类型扩展**：`StorageCleanResult` 加可选 `count` 为向后兼容；消费方用 `'count' in result && result.count` 判断即可。
+
+---
+
+## 相关文件索引
+
+| 文件                                                     | 说明                                         |
+| -------------------------------------------------------- | -------------------------------------------- |
+| `src/utils/storageCleaner.ts`                            | 核心清理逻辑                                 |
+| `src/utils/__tests__/storageCleaner.test.ts`             | 单元测试                                     |
+| `src/types/storage.d.ts`                                 | `StorageCleanResult` / `CleaningResult` 类型 |
+| `src/pages/StorageCleaner/constants.ts`                  | 选项标签与键名                               |
+| `src/pages/StorageCleaner/useStorageCleaner.ts`          | 清理流程编排                                 |
+| `src/pages/StorageCleaner/components/CleaningResult.tsx` | 结果展示 UI                                  |

src/components/CopyButton.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { copyTextToClipboard } from '@/utils/clipboard';
-import { cn } from '@/lib/utils';
-import { buttonVariants, type ButtonProps } from '@/components/ui/button';
+import { Button, type ButtonProps } from '@/components/ui/button';
 import { toast } from 'sonner';
 
 interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
@@ -47,17 +46,14 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   };
 
   return (
-    <button
+    <Button
       type="button"
       onClick={handleCopy}
       title={tooltip ?? '复制'}
       aria-label={tooltip ?? '复制'}
-      className={cn(
-        buttonVariants({ variant, size }),
-        copied &&
-          'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/10',
-        className,
-      )}
+      variant={variant}
+      size={size}
+      className={className}
       {...props}
     >
       {copied ? (
@@ -65,7 +61,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}
-    </button>
+    </Button>
   );
 };
 

src/components/EmptyPlaceholder.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  messageClassName?: string;
+}
+
+const CONTAINER_CLASSES =
+  'rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center select-none p-8 min-h-[120px]';
+
+const MESSAGE_CLASSES =
+  'text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed';
+
+export default function EmptyPlaceholder({
+  children,
+  className,
+  messageClassName,
+  ...props
+}: EmptyPlaceholderProps) {
+  return (
+    <div className={cn(CONTAINER_CLASSES, className)} {...props}>
+      {typeof children === 'string' || typeof children === 'number' ? (
+        <p className={cn(MESSAGE_CLASSES, messageClassName)}>{children}</p>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}

src/components/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertCircle, RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { ErrorFallback } from '@/components/ErrorFallback';
 
 interface Props {
   children: ReactNode;
@@ -38,32 +37,14 @@ class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex flex-col items-center justify-center mt-16 mx-auto max-w-md">
-          <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm">
-            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
-              <AlertCircle className="h-8 w-8" />
-            </div>
-            <h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
-            <p className="text-sm text-muted-foreground mb-6">
-              应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
-            </p>
-            {this.state.error && (
-              <div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
-                <pre className="font-mono text-xs whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
-                  {this.state.error.toString()}
-                </pre>
-              </div>
-            )}
-            <Button
-              variant="destructive"
-              onClick={this.handleReset}
-              className="rounded-lg font-bold shadow-sm"
-            >
-              <RefreshCw className="mr-2 h-4 w-4" />
-              刷新应用
-            </Button>
-          </div>
-        </div>
+        <ErrorFallback
+          variant="app"
+          title="糟糕，出了点问题"
+          description="应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。"
+          error={this.state.error}
+          actionLabel="刷新应用"
+          onAction={this.handleReset}
+        />
       );
     }
 

src/components/ErrorFallback.tsx

@@ -0,0 +1,94 @@
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export interface ErrorFallbackProps {
+  title: string;
+  description: string;
+  error: Error | null;
+  actionLabel: string;
+  onAction: () => void;
+  variant?: 'app' | 'page';
+  showStack?: boolean;
+  className?: string;
+}
+
+export function ErrorFallback({
+  title,
+  description,
+  error,
+  actionLabel,
+  onAction,
+  variant = 'page',
+  showStack = false,
+  className,
+}: ErrorFallbackProps) {
+  const isApp = variant === 'app';
+  const errorText = error ? (showStack ? error.stack || error.toString() : error.toString()) : null;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center',
+        isApp
+          ? 'mt-16 mx-auto max-w-md'
+          : 'flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200',
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          'p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm',
+          !isApp && 'max-w-md w-full',
+        )}
+      >
+        <div
+          className={cn(
+            'flex items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4',
+            isApp ? 'h-16 w-16' : 'h-12 w-12',
+          )}
+        >
+          <AlertCircle className={isApp ? 'h-8 w-8' : 'h-6 w-6'} />
+        </div>
+
+        {isApp ? (
+          <h2 className="text-xl font-extrabold text-destructive mb-2">{title}</h2>
+        ) : (
+          <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
+        )}
+
+        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
+          {description}
+        </p>
+
+        {errorText && (
+          <div
+            className={cn(
+              'rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left border border-border/40',
+              isApp ? 'mb-6 p-4 max-h-[200px] overflow-auto' : 'mb-5 p-3 max-h-40 overflow-y-auto',
+            )}
+          >
+            <pre
+              className={cn(
+                'font-mono whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700',
+                isApp ? 'text-xs' : 'text-[11px] leading-relaxed',
+              )}
+            >
+              {errorText}
+            </pre>
+          </div>
+        )}
+
+        <Button
+          variant="destructive"
+          size={isApp ? 'default' : 'sm'}
+          onClick={onAction}
+          className={cn(isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm')}
+        >
+          <RefreshCw className={isApp ? 'mr-2 h-4 w-4' : 'mr-1.5 h-3.5 w-3.5'} />
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/PageErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertCircle, RefreshCw } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { ErrorFallback } from '@/components/ErrorFallback';
 
 interface Props {
   children: ReactNode;
@@ -39,36 +38,15 @@ class PageErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
-          <div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
-            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
-              <AlertCircle className="h-6 w-6" />
-            </div>
-
-            <h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
-            <p className="text-xs text-muted-foreground mb-5">
-              该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
-            </p>
-
-            {this.state.error && (
-              <div className="mb-5 p-3 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-40 overflow-y-auto border border-border/40">
-                <pre className="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
-                  {this.state.error.stack || this.state.error.toString()}
-                </pre>
-              </div>
-            )}
-
-            <Button
-              variant="destructive"
-              size="sm"
-              onClick={this.handleRetry}
-              className="font-medium shadow-sm"
-            >
-              <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
-              重新尝试
-            </Button>
-          </div>
-        </div>
+        <ErrorFallback
+          variant="page"
+          title="该功能运行异常"
+          description="该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。"
+          error={this.state.error}
+          actionLabel="重新尝试"
+          onAction={this.handleRetry}
+          showStack
+        />
       );
     }
 

src/components/README.md

@@ -6,9 +6,9 @@
 
 | 组件                    | 用途                                                                           |
 | ----------------------- | ------------------------------------------------------------------------------ |
-| `TopBar.tsx`            | 顶部导航栏，集成搜索（含历史记录）、主题切换、语言切换、返回导航               |
 | `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
+| `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                             |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
 | `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
 | `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |

src/components/SwitchButtonGroup.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
 export interface SwitchOption<T extends string | number = string> {
@@ -45,21 +46,20 @@ export default function SwitchButtonGroup<T extends string | number = string>({
       {...props}
     >
       {options.map((option) => (
-        <button
+        <Button
           key={option.value}
           type="button"
+          variant="ghost"
           onClick={() => onChange(option.value)}
           className={cn(
-            'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
-            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
-            'disabled:pointer-events-none disabled:opacity-50',
+            'flex-1 transition-all',
             SIZE_CLASSES[size],
             value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
             buttonClassName,
           )}
         >
           {option.label}
-        </button>
+        </Button>
       ))}
     </div>
   );

src/components/TextInputArea.tsx

@@ -3,6 +3,7 @@ import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
 import { CopyButton } from '@/components/CopyButton';
+import { Button } from './ui/button';
 
 export type ValidateRule = {
   validator: (value: string) => boolean;
@@ -273,14 +274,16 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                 <CopyButton text={value} tooltip={'复制内容'} size="sm" className="h-7 w-7 p-1" />
               )}
               {showClear && value && !disabled && !readOnly && (
-                <button
+                <Button
                   type="button"
                   onClick={handleClear}
                   aria-label={'清空'}
-                  className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <X className="h-4 w-4" />
-                </button>
+                </Button>
               )}
             </div>
           </div>

src/components/TopBar.tsx

@@ -1,315 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowLeft, ExternalLink, Monitor, Moon, Search, Sun, X } from 'lucide-react';
-import { useRouter } from '@/providers/RouterProvider';
-import { useThemeMode } from '@/providers/ThemeModeProvider';
-import { FeatureConfig, FEATURES } from '@/config/features';
-import { storageUtil } from '@/utils/chromeStorage';
-import { openExtensionPage } from '@/utils/chromeTabs';
-import { cn } from '@/lib/utils';
-
-const SEARCH_HISTORY_LIMIT = 10;
-const SEARCH_HISTORY_DISPLAY = 5;
-
-export default function TopBar() {
-  const { currentPage, goBack, navigateTo } = useRouter();
-  const { mode, setMode } = useThemeMode();
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showResults, setShowResults] = useState(false);
-  const [searchHistory, setSearchHistory] = useState<string[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleOpenInTab = async () => {
-    await openExtensionPage('popup.html', { mode: 'tab' });
-    window.close();
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setShowResults(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  // Cmd/Ctrl+K 快捷键聚焦搜索框
-  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);
-  }, []);
-
-  useEffect(() => {
-    storageUtil
-      .get('app/searchHistory', [])
-      .then((history) => {
-        if (history) setSearchHistory(history);
-      })
-      .catch((err) => console.error('加载搜索历史失败:', err));
-  }, []);
-
-  const searchResults = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return [];
-    return FEATURES.filter((f) => {
-      if (f.key === 'dashboard') return false;
-      return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
-    });
-  }, [searchQuery]);
-
-  const displayedHistory = useMemo(() => {
-    if (searchQuery.trim()) return [];
-    return searchHistory
-      .slice(0, SEARCH_HISTORY_DISPLAY)
-      .map((key) => ({ key, feature: FEATURES.find((f) => f.key === key) }))
-      .filter((item) => item.feature && item.feature.key !== 'dashboard');
-  }, [searchHistory, searchQuery]);
-
-  const saveToHistory = async (featureKey: string) => {
-    if (!featureKey.trim()) return;
-    const nextHistory = [featureKey, ...searchHistory.filter((h) => h !== featureKey)].slice(
-      0,
-      SEARCH_HISTORY_LIMIT,
-    );
-    setSearchHistory(nextHistory);
-    await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
-  };
-
-  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 handleKeyDown = (e: React.KeyboardEvent) => {
-    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      if (selectedIndex >= 0 && selectedIndex < totalItems) {
-        if (searchQuery.trim()) {
-          handleSelectFeature(searchResults[selectedIndex]);
-        } else {
-          const selected = displayedHistory[selectedIndex];
-          if (selected?.feature) {
-            handleSelectFeature(selected.feature);
-          }
-        }
-      } else if (searchQuery.trim() && searchResults.length > 0) {
-        handleSelectFeature(searchResults[0]);
-      }
-    } else if (e.key === 'Escape') {
-      setShowResults(false);
-      inputRef.current?.blur();
-    }
-  };
-
-  const isDashboard = currentPage === 'dashboard';
-
-  return (
-    <header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
-      {/* 左侧：返回按钮区 */}
-      <div className="flex w-10 items-center justify-start">
-        {!isDashboard && (
-          <button
-            type="button"
-            onClick={goBack}
-            aria-label={'返回'}
-            className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-
-      {/* 中间：搜索容器 */}
-      <div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
-        <div className="relative group">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 group-focus-within:text-muted-foreground transition-colors pointer-events-none" />
-          <input
-            ref={inputRef}
-            type="text"
-            placeholder={'搜索工具...'}
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setShowResults(true);
-              setSelectedIndex(-1);
-            }}
-            onFocus={() => setShowResults(true)}
-            onKeyDown={handleKeyDown}
-            aria-label={'搜索工具...'}
-            className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
-          />
-          {!searchQuery && (
-            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline-flex h-5 items-center gap-0.5 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 pointer-events-none">
-              ⌘K
-            </kbd>
-          )}
-          {searchQuery && (
-            <button
-              type="button"
-              onClick={() => {
-                setSearchQuery('');
-                setSelectedIndex(-1);
-              }}
-              aria-label={'清除搜索'}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
-            >
-              <X className="h-3 w-3" />
-            </button>
-          )}
-        </div>
-
-        {/* 动态联想结果卡片 */}
-        {showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
-          <div className="absolute top-full left-0 right-0 mt-1.5 bg-popover text-popover-foreground rounded-lg shadow-lg border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-2 duration-150">
-            <ul role="listbox" className="p-1.5">
-              {searchQuery.trim() ? (
-                searchResults.length > 0 ? (
-                  searchResults.map((feature, index) => (
-                    <li
-                      key={feature.key}
-                      role="option"
-                      aria-selected={selectedIndex === index}
-                      onClick={() => handleSelectFeature(feature)}
-                      className={cn(
-                        'flex items-center gap-3 px-3 py-2.5 rounded-md cursor-pointer text-sm transition-colors',
-                        selectedIndex === index
-                          ? 'bg-accent text-accent-foreground'
-                          : 'hover:bg-muted/60',
-                      )}
-                    >
-                      <div
-                        className={cn(
-                          '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="flex-1 min-w-0">
-                        <p className="font-medium text-foreground truncate">{feature.label}</p>
-                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {feature.description}
-                        </p>
-                      </div>
-                    </li>
-                  ))
-                ) : (
-                  <li className="px-4 py-6 text-center text-sm text-muted-foreground">
-                    {'未找到相关工具'}
-                  </li>
-                )
-              ) : (
-                <>
-                  <div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
-                    {'最近搜索'}
-                  </div>
-                  {displayedHistory.map((item, index) => (
-                    <li
-                      key={item.key}
-                      role="option"
-                      aria-selected={selectedIndex === index}
-                      onClick={() => item.feature && handleSelectFeature(item.feature)}
-                      className={cn(
-                        'flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer text-sm transition-colors',
-                        selectedIndex === index
-                          ? 'bg-accent text-accent-foreground'
-                          : 'hover:bg-muted/60',
-                      )}
-                    >
-                      <div
-                        className={cn(
-                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
-                          'bg-muted/80 text-muted-foreground',
-                        )}
-                      >
-                        {item.feature?.icon && <item.feature.icon className="h-4 w-4" />}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium text-foreground truncate">
-                          {item.feature?.label}
-                        </p>
-                        <p className="text-xs text-muted-foreground truncate mt-0.5">
-                          {item.feature?.description}
-                        </p>
-                      </div>
-                    </li>
-                  ))}
-                </>
-              )}
-            </ul>
-          </div>
-        )}
-      </div>
-
-      {/* 右侧：操作区 */}
-      <div className="flex items-center gap-1 shrink-0">
-        <IconButton
-          onClick={cycleThemeMode}
-          title={
-            mode === 'light'
-              ? '切换到深色模式'
-              : mode === 'dark'
-                ? '切换到系统模式'
-                : '切换到浅色模式'
-          }
-        >
-          <ThemeIcon className="h-4 w-4" />
-        </IconButton>
-        <IconButton onClick={handleOpenInTab} title={'在标签页打开'}>
-          <ExternalLink className="h-4 w-4" />
-        </IconButton>
-      </div>
-    </header>
-  );
-}
-
-// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
-function IconButton({
-  children,
-  onClick,
-  title,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-  title: string;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      title={title}
-      aria-label={title}
-      className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-    >
-      {children}
-    </button>
-  );
-}

src/components/__tests__/CopyButton.test.tsx

@@ -45,29 +45,6 @@ describe('CopyButton', () => {
     expect(mockedToast.success).toHaveBeenCalled();
   });
 
-  it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="test" />);
-
-    // 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
-    await user.click(screen.getByRole('button'));
-
-    await waitFor(() => {
-      expect(screen.getByRole('button').className).toContain('text-emerald');
-    });
-
-    // 1.5 秒后样式恢复
-    act(() => {
-      vi.advanceTimersByTime(1500);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByRole('button').className).not.toContain('text-emerald');
-    });
-  });
-
   it('复制空文本时弹出 error toast', async () => {
     const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
 

src/components/__tests__/EmptyPlaceholder.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
+
+describe('EmptyPlaceholder 组件', () => {
+  it('应渲染字符串提示文本', () => {
+    render(<EmptyPlaceholder>{'请输入内容'}</EmptyPlaceholder>);
+
+    expect(screen.getByText('请输入内容')).toBeInTheDocument();
+  });
+
+  it('应应用规范空状态容器样式', () => {
+    const { container } = render(<EmptyPlaceholder>{'提示'}</EmptyPlaceholder>);
+
+    const placeholder = container.firstChild;
+    expect(placeholder).toHaveClass(
+      'rounded-xl',
+      'bg-muted/30',
+      'border-dashed',
+      'border-border/80',
+      'min-h-[120px]',
+    );
+  });
+
+  it('应支持 className 自定义容器样式', () => {
+    const { container } = render(
+      <EmptyPlaceholder className="flex-1 min-h-[320px]">{'提示'}</EmptyPlaceholder>,
+    );
+
+    expect(container.firstChild).toHaveClass('flex-1', 'min-h-[320px]');
+  });
+
+  it('应支持 messageClassName 自定义文本样式', () => {
+    render(<EmptyPlaceholder messageClassName="text-sm max-w-none">{'提示'}</EmptyPlaceholder>);
+
+    expect(screen.getByText('提示')).toHaveClass('text-sm', 'max-w-none');
+  });
+
+  it('应支持 ReactNode 类型的 children', () => {
+    render(
+      <EmptyPlaceholder>
+        <span data-testid="custom-content">自定义内容</span>
+      </EmptyPlaceholder>,
+    );
+
+    expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+  });
+});

src/components/__tests__/RouterContainer.test.tsx

@@ -12,7 +12,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };

src/components/__tests__/StorageCleanerConfirm.test.tsx

@@ -94,7 +94,7 @@ describe('StorageCleanerConfirm 组件', () => {
       renderComponent({ options: partialOptions });
 
       expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
-      expect(screen.getByText(/站点存储/)).toBeInTheDocument();
+      expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
       expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
       expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
     });

src/config/README.md

@@ -1,44 +0,0 @@
-# config/
-
-应用级配置目录，存放功能特性的注册中心。
-
-## 文件说明
-
-| 文件           | 用途                                     |
-| -------------- | ---------------------------------------- |
-| `features.tsx` | 核心配置文件，定义所有工具功能的注册信息 |
-
-## features.tsx
-
-`FEATURES` 数组是路由和功能元数据的**单一事实来源**，每个功能定义包含：
-
-- `key`：页面类型标识（`PageType`）
-- `labelKey` / `descriptionKey`：i18n 翻译键
-- `themeColorKey`：主题色（`primary/success/warning/error/secondary/info`）
-- `icon`：lucide-react 图标组件
-- `defaultVisible`：默认是否可见
-- `components`：三种渲染模式的懒加载组件（`popup`、`sidepanel`、`tab`）
-
-## 已注册功能（11 个）
-
-| key                  | 图标              | 说明              |
-| -------------------- | ----------------- | ----------------- |
-| `dashboard`          | —                 | 仪表盘首页        |
-| `timestamp`          | Clock             | 时间戳转换工具    |
-| `storageCleaner`     | Database          | 存储清理工具      |
-| `qrCode`             | QrCode            | 二维码工具        |
-| `textStatistics`     | FileText          | 文本统计工具      |
-| `jwt`                | Key               | JWT 解析工具      |
-| `jsonDiff`           | GitCompareArrows  | JSON 差异比较工具 |
-| `base64Converter`    | ArrowLeftRight    | Base64 转换器     |
-| `markdownToHtml`     | Code              | Markdown 转 HTML  |
-| `htmlToMarkdown`     | File              | HTML 转 Markdown  |
-| `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具  |
-
-## 导出函数
-
-- `getFeatureByKey(key)` — 根据 key 获取功能配置
-- `getDefaultVisibleFeatureKeys()` — 获取默认可见的功能 key 列表
-- `getAllFeatureKeys()` — 获取所有功能 key 列表
-- `getDefaultPageOrder()` — 获取默认页面排序（不含 dashboard）
-- `getEntryPointType()` — 判断当前入口类型（popup/sidepanel/tab）

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

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+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 };
+});
+vi.mock('@/pages/StorageCleaner', () => {
+  pageLoadTracker.loaded.push('StorageCleaner');
+  return { default: () => null };
+});
+vi.mock('@/pages/QrCode', () => {
+  pageLoadTracker.loaded.push('QrCode');
+  return { default: () => null };
+});
+vi.mock('@/pages/TextStatistics', () => {
+  pageLoadTracker.loaded.push('TextStatistics');
+  return { default: () => null };
+});
+vi.mock('@/pages/Jwt', () => {
+  pageLoadTracker.loaded.push('Jwt');
+  return { default: () => null };
+});
+vi.mock('@/pages/JsonTools', () => {
+  pageLoadTracker.loaded.push('JsonTools');
+  return { default: () => null };
+});
+vi.mock('@/pages/Base64Converter', () => {
+  pageLoadTracker.loaded.push('Base64Converter');
+  return { default: () => null };
+});
+vi.mock('@/pages/RightClickRestorer', () => {
+  pageLoadTracker.loaded.push('RightClickRestorer');
+  return { default: () => null };
+});
+vi.mock('@/pages/TestDataGenerator', () => {
+  pageLoadTracker.loaded.push('TestDataGenerator');
+  return { default: () => null };
+});
+
+describe('features 懒加载', () => {
+  beforeEach(() => {
+    pageLoadTracker.loaded.length = 0;
+    vi.resetModules();
+  });
+
+  it('仅导入工具函数时不应加载任何页面模块', async () => {
+    const { getAllFeatureKeys, getDefaultPageOrder } = await import('@/config/features');
+
+    getAllFeatureKeys();
+    getDefaultPageOrder();
+
+    expect(pageLoadTracker.loaded).toEqual([]);
+  });
+
+  it('访问 FEATURES 元数据时不应加载任何页面模块', async () => {
+    const { FEATURES } = await import('@/config/features');
+
+    expect(FEATURES).toHaveLength(10);
+    expect(pageLoadTracker.loaded).toEqual([]);
+  });
+
+  it('渲染 lazy 组件时才应加载对应页面模块', async () => {
+    const React = await import('react');
+    const { render, waitFor } = await import('@testing-library/react');
+    const { FEATURES } = await import('@/config/features');
+
+    const DashboardPage = FEATURES.find((f) => f.key === 'dashboard')!.components.popup;
+
+    render(
+      React.createElement(React.Suspense, { fallback: null }, React.createElement(DashboardPage)),
+    );
+
+    await waitFor(() => {
+      expect(pageLoadTracker.loaded).toEqual(['Dashboard']);
+    });
+  });
+});

src/config/__tests__/features.test.ts

@@ -9,11 +9,11 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 10 features defined', () => {
+    it('应该有10个功能定义', () => {
       expect(FEATURES).toHaveLength(10);
     });
 
-    it('should have all required properties for each feature', () => {
+    it('应该有每个功能的所有必需属性', () => {
       FEATURES.forEach((feature) => {
         expect(feature).toHaveProperty('key');
         expect(feature).toHaveProperty('label');
@@ -29,7 +29,6 @@ describe('features', () => {
         expect(feature.components).toHaveProperty('sidepanel');
         expect(feature.components).toHaveProperty('tab');
 
-        // Optional UI properties for non-hidden features
         if (feature.key !== 'dashboard') {
           expect(feature).toHaveProperty('icon');
           expect(feature).toHaveProperty('themeColorKey');
@@ -38,7 +37,7 @@ describe('features', () => {
       });
     });
 
-    it('should have unique keys for each feature', () => {
+    it('应该有每个功能的唯一key', () => {
       const keys = FEATURES.map((f) => f.key);
       const uniqueKeys = new Set(keys);
       expect(uniqueKeys.size).toBe(keys.length);
@@ -46,14 +45,14 @@ describe('features', () => {
   });
 
   describe('getFeatureByKey', () => {
-    it('should return dashboard feature', () => {
+    it('应该返回dashboard功能', () => {
       const feature = getFeatureByKey('dashboard');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('dashboard');
       expect(feature?.label).toBe('仪表盘');
     });
 
-    it('should return timestamp feature', () => {
+    it('应该返回时间戳功能', () => {
       const feature = getFeatureByKey('timestamp');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('timestamp');
@@ -61,21 +60,21 @@ describe('features', () => {
       expect(feature?.themeColorKey).toBeDefined();
     });
 
-    it('should return storageCleaner feature', () => {
+    it('应该返回存储清理功能', () => {
       const feature = getFeatureByKey('storageCleaner');
       expect(feature).toBeDefined();
       expect(feature?.key).toBe('storageCleaner');
       expect(feature?.label).toBe('存储清理');
     });
 
-    it('should return undefined for invalid key', () => {
+    it('应该返回undefined用于无效的key', () => {
       const feature = getFeatureByKey('invalid' as any);
       expect(feature).toBeUndefined();
     });
   });
 
   describe('getDefaultVisibleFeatureKeys', () => {
-    it('should return only visible features', () => {
+    it('应该返回仅可见的功能', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
       visibleKeys.forEach((key) => {
         const feature = getFeatureByKey(key);
@@ -83,7 +82,7 @@ describe('features', () => {
       });
     });
 
-    it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
+    it('应该包含仪表盘、时间戳、存储清理、二维码', () => {
       const visibleKeys = getDefaultVisibleFeatureKeys();
       expect(visibleKeys).toContain('dashboard');
       expect(visibleKeys).toContain('timestamp');
@@ -93,7 +92,7 @@ describe('features', () => {
   });
 
   describe('getAllFeatureKeys', () => {
-    it('should return all feature keys', () => {
+    it('应该返回所有功能key', () => {
       const allKeys = getAllFeatureKeys();
       expect(allKeys).toHaveLength(10);
       expect(allKeys).toContain('dashboard');
@@ -102,7 +101,7 @@ describe('features', () => {
       expect(allKeys).toContain('qrCode');
       expect(allKeys).toContain('textStatistics');
       expect(allKeys).toContain('jwt');
-      expect(allKeys).toContain('jsonDiff');
+      expect(allKeys).toContain('jsonTools');
       expect(allKeys).toContain('base64Converter');
       expect(allKeys).toContain('rightClickRestorer');
       expect(allKeys).toContain('testDataGenerator');
@@ -110,19 +109,19 @@ describe('features', () => {
   });
 
   describe('getDefaultPageOrder', () => {
-    it('should exclude dashboard from page order', () => {
+    it('应该排除仪表盘从页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).not.toContain('dashboard');
     });
 
-    it('should include timestamp, storageCleaner, qrCode in page order', () => {
+    it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).toContain('timestamp');
       expect(pageOrder).toContain('storageCleaner');
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 9 items in page order', () => {
+    it('应该有9个项目在页面顺序', () => {
       const pageOrder = getDefaultPageOrder();
       expect(pageOrder).toHaveLength(9);
     });

src/config/features.tsx

@@ -119,7 +119,7 @@ export const FEATURES: FeatureConfig[] = [
     },
   },
   {
-    key: 'jsonDiff',
+    key: 'jsonTools',
     label: 'JSON 工具',
     description: '差异比较、格式化、YAML/TOML 转换及压缩',
     themeColorKey: 'primary',

src/entrypoints/README.md

@@ -16,11 +16,11 @@ WXT 框架要求的扩展生命周期入口点，对应 Chrome Extension 的各
 
 Popup 弹窗页面（点击扩展图标弹出）。
 
-| 文件         | 用途                                                                           |
-| ------------ | ------------------------------------------------------------------------------ |
-| `index.html` | HTML 入口                                                                      |
-| `main.tsx`   | React 挂载点                                                                   |
-| `App.tsx`    | 根组件，组装 `RouterProvider` + `TopBar` + `ErrorBoundary` + `RouterContainer` |
+| 文件         | 用途                                                                                  |
+| ------------ | ------------------------------------------------------------------------------------- |
+| `index.html` | HTML 入口                                                                             |
+| `main.tsx`   | React 挂载点                                                                          |
+| `App.tsx`    | 根组件，组装 `RouterProvider` + `layout/TopBar` + `ErrorBoundary` + `RouterContainer` |
 
 ### sidepanel/
 

src/entrypoints/background.ts

@@ -65,8 +65,8 @@ export default defineBackground(() => {
     const tabId = sender?.tab?.id;
 
     if (!tabId) {
-      console.warn('[RightClickRestorer] Injection request missing tabId');
-      return { success: false, message: 'Missing tabId' };
+      console.warn('[RightClickRestorer] 注入请求缺少 tabId');
+      return { success: false, message: '缺少 tabId' };
     }
 
     try {
@@ -79,7 +79,7 @@ export default defineBackground(() => {
       return { success: true };
     } catch (err) {
       const errorMsg = err instanceof Error ? err.message : String(err);
-      console.error('[RightClickRestorer] executeScript failed:', errorMsg);
+      console.error('[RightClickRestorer] 执行脚本失败:', errorMsg);
       return { success: false, message: errorMsg };
     }
   });

src/entrypoints/content/uiPopover.ts

@@ -137,12 +137,11 @@ function escapeHtml(text: string): string {
 }
 
 function positionPopover(popover: HTMLElement, x: number, y: number): void {
-  // 此时借助 visibility: hidden，元素在隐藏状态下拥有真实的布局高宽
   const rect = popover.getBoundingClientRect();
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
 
-  let left = x + 8; // 微微追加水平偏置，防范直接遮挡用户的鼠标落点
+  let left = x + 8;
   let top = y + 8;
 
   if (left + rect.width > viewportWidth - 16) {
@@ -178,7 +177,7 @@ function showPopover(
 
     const titleSpan = document.createElement('span');
     titleSpan.className = 'popover-title';
-    titleSpan.textContent = title; // ✅ 强安全性护航
+    titleSpan.textContent = title;
 
     const closeBtn = document.createElement('button');
     closeBtn.className = 'popover-close';
@@ -194,10 +193,9 @@ function showPopover(
 
   const contentContainer = document.createElement('div');
   contentContainer.className = 'popover-content';
-  contentContainer.innerHTML = contentHtml; // 内部拼装的方法已提前完成全消毒转义
+  contentContainer.innerHTML = contentHtml;
   popover.appendChild(contentContainer);
 
-  // 提前移除激活类名，使 visibility: hidden 起效以供测量
   popover.classList.remove('visible');
 
   requestAnimationFrame(() => {
@@ -226,7 +224,6 @@ export function hidePopover(): void {
 }
 
 export function showTimestampResult(x: number, y: number, timestamp: string, result: string): void {
-  // 对外部传来的参数先全数塞入 escapeHtml 大闸进行纯氧化清洗
   const cleanTimestamp = escapeHtml(timestamp);
   const cleanResult = escapeHtml(result);
 
@@ -236,7 +233,7 @@ export function showTimestampResult(x: number, y: number, timestamp: string, res
     <div class="popover-label">转换结果</div>
     <div class="popover-value">${cleanResult}</div>
   `;
-  showPopover(x, y, content, '⏰ 时间戳转换');
+  showPopover(x, y, content, '转换结果');
 }
 
 export function showTextStatsResult(
@@ -246,7 +243,6 @@ export function showTextStatsResult(
   stats: { characters: number; words: number; lines: number; bytes: number },
 ): void {
   const truncatedText = text.length > 50 ? text.substring(0, 50) + '...' : text;
-  // 对选中的脏文本先进行严格转义
   const cleanText = escapeHtml(truncatedText);
 
   const content = `
@@ -271,5 +267,5 @@ export function showTextStatsResult(
       </div>
     </div>
   `;
-  showPopover(x, y, content, '📊 文本统计');
+  showPopover(x, y, content, '统计结果');
 }

src/entrypoints/popup/App.tsx

@@ -1,5 +1,5 @@
 import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { getEntryPointType } from '@/config/features';

src/entrypoints/popup/index.html

@@ -5,6 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Testing Tools - 标签页</title>
     <meta name="manifest.type" content="browser_action" />
+    <script>
+      (function () {
+        try {
+          var raw = localStorage.getItem('snapshot/app/themeMode');
+          var mode = raw ? JSON.parse(raw) : 'system';
+          if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
+          var isDark =
+            mode === 'dark' ||
+            (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+          if (isDark) document.documentElement.classList.add('dark');
+        } catch (_error) {}
+      })();
+    </script>
     <style>
       /* Force initial popup size before React hydration */
       html, body {

src/entrypoints/popup/main.tsx

@@ -1,8 +1,11 @@
 import ReactDOM from 'react-dom/client';
+import { applyThemeFromSnapshot } from '@/utils/themeSnapshot';
 import AppRoot from '@/providers/AppRoot';
 import '@/index.css';
 import App from './App.tsx';
 
+applyThemeFromSnapshot();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <AppRoot>
     <App />

src/entrypoints/sidepanel/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import RouterProvider from '@/providers/RouterProvider';
-import TopBar from '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import RouterContainer from '@/components/RouterContainer';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import { MessageAction, sendMessage } from '@/utils/messages';

src/entrypoints/sidepanel/index.html

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

src/entrypoints/sidepanel/main.tsx

@@ -1,8 +1,11 @@
 import ReactDOM from 'react-dom/client';
+import { applyThemeFromSnapshot } from '@/utils/themeSnapshot';
 import AppRoot from '@/providers/AppRoot';
 import '@/index.css';
 import App from './App.tsx';
 
+applyThemeFromSnapshot();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <AppRoot>
     <App />

src/layout/README.md

@@ -0,0 +1,26 @@
+# layout/
+
+应用壳层布局组件目录，存放与扩展入口（popup / sidepanel / tab）绑定的布局 UI，与 `components/` 中的通用可复用组件区分。
+
+## 组件列表
+
+| 目录      | 用途                                                           |
+| --------- | -------------------------------------------------------------- |
+| `TopBar/` | 顶部导航栏：搜索（含历史记录）、主题切换、返回导航、标签页打开 |
+
+## 目录结构
+
+遵循与 `pages/` 相同的 UI + Hook 分离模式：
+
+```
+layout/TopBar/
+├── index.tsx              # 布局入口
+├── useTopBar.ts           # 业务逻辑 Hook
+├── constants.ts           # 常量
+├── SearchInput.tsx        # 搜索输入框
+├── SearchDropdown.tsx     # 搜索结果/历史下拉面板
+├── SearchResultItem.tsx   # 单条搜索结果项
+├── TopBarActions.tsx      # 右侧操作按钮组
+└── __tests__/
+    └── index.test.tsx
+```

src/layout/TopBar/SearchDropdown.tsx

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

src/layout/TopBar/SearchInput.tsx

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

src/layout/TopBar/SearchResultItem.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type FeatureConfig } from '@/config/features';
+import { cn } from '@/lib/utils';
+
+interface SearchResultItemProps {
+  feature: FeatureConfig;
+  selected: boolean;
+  onSelect: (feature: FeatureConfig) => void;
+}
+
+const SearchResultItem = React.memo(({ 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>
+  );
+});
+SearchResultItem.displayName = 'SearchResultItem';
+
+export default SearchResultItem;

src/layout/TopBar/TopBarActions.tsx

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

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

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

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

@@ -2,7 +2,7 @@ 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 '@/components/TopBar';
+import TopBar from '@/layout/TopBar';
 import { RouterProvider } from '@/providers/RouterProvider';
 import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
 
@@ -27,7 +27,7 @@ const mockRouterValue = {
   isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
-  goBack: vi.fn(),
+  goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
 };
@@ -54,23 +54,23 @@ describe('TopBar 组件', () => {
     it('不在 dashboard 时应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
-      expect(screen.getByLabelText('返回')).toBeInTheDocument();
+      expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
     });
 
     it('在 dashboard 上不应渲染返回按钮', () => {
       mockRouterValue.currentPage = 'dashboard';
       renderWithProvider(<TopBar />);
-      expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
+      expect(screen.queryByLabelText('返回首页')).not.toBeInTheDocument();
     });
   });
 
   describe('交互测试', () => {
-    it('点击返回按钮时应调用 goBack', () => {
+    it('点击返回按钮时应调用 goHome', () => {
       mockRouterValue.currentPage = 'timestamp';
       renderWithProvider(<TopBar />);
 
-      fireEvent.click(screen.getByLabelText('返回'));
-      expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
+      fireEvent.click(screen.getByLabelText('返回首页'));
+      expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
     });
   });
 });

src/layout/TopBar/constants.ts

@@ -0,0 +1,11 @@
+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 {
+  if (typeof navigator === 'undefined') return 'Ctrl+K';
+  return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
+}

src/layout/TopBar/index.tsx

@@ -0,0 +1,91 @@
+import { ArrowLeft, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import SearchDropdown from './SearchDropdown';
+import SearchInput from './SearchInput';
+import TopBarActions from './TopBarActions';
+import { useTopBar } from './useTopBar';
+
+export default function TopBar() {
+  const {
+    searchQuery,
+    showResults,
+    searchResults,
+    recentFeatures,
+    selectedIndex,
+    isDashboard,
+    ThemeIcon,
+    themeTitle,
+    containerRef,
+    inputRef,
+    setSearchQuery,
+    setShowResults,
+    setSelectedIndex,
+    handleSelectFeature,
+    handleKeyDown,
+    cycleThemeMode,
+    handleOpenInTab,
+    goHome,
+    clearSearch,
+  } = useTopBar();
+
+  const actions = [
+    { id: 'theme', icon: ThemeIcon, title: themeTitle, onClick: cycleThemeMode },
+    {
+      id: 'open-in-tab',
+      icon: ExternalLink,
+      title: '在标签页打开',
+      onClick: () => {
+        void handleOpenInTab();
+      },
+    },
+  ];
+
+  const handleSearchQueryChange = (value: string) => {
+    setSearchQuery(value);
+    setShowResults(true);
+    setSelectedIndex(-1);
+  };
+
+  const showDropdown = showResults && (searchQuery.trim() || recentFeatures.length > 0);
+
+  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={() => setShowResults(true)}
+          onKeyDown={handleKeyDown}
+          onClear={clearSearch}
+        />
+        {showDropdown && (
+          <SearchDropdown
+            searchQuery={searchQuery}
+            searchResults={searchResults}
+            recentFeatures={recentFeatures}
+            selectedIndex={selectedIndex}
+            onSelect={handleSelectFeature}
+          />
+        )}
+      </div>
+
+      <TopBarActions actions={actions} />
+    </header>
+  );
+}

src/layout/TopBar/useTopBar.ts

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

src/lib/generators/__tests__/random.test.ts

@@ -0,0 +1,22 @@
+import { randomInt, randomPick } from '@/lib/generators/random';
+
+describe('generators/random', () => {
+  it('randomInt 应返回闭区间内的整数', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.5);
+
+    expect(randomInt(1, 10)).toBe(6);
+    expect(randomInt(5, 5)).toBe(5);
+  });
+
+  it('randomPick 应对单元素数组返回该元素', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0);
+
+    expect(randomPick(['only'])).toBe('only');
+  });
+
+  it('randomPick 应返回数组中的元素', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.99);
+
+    expect(randomPick(['a', 'b', 'c'])).toBe('c');
+  });
+});

src/lib/generators/basic.ts

@@ -4,20 +4,7 @@
  */
 
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
-
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
+import { randomInt, randomPick } from './random';
 
 /**
  * 随机整数生成器

src/lib/generators/business.ts

@@ -4,20 +4,7 @@
  */
 
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
-
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
+import { randomInt, randomPick } from './random';
 
 /**
  * 格式化日期
@@ -434,7 +421,7 @@ function skewedRandom(min: number, max: number): number {
     v = 0;
   while (u === 0) u = Math.random();
   while (v === 0) v = Math.random();
-  const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
+  const x = Math.pow(u, 1 / alpha) / (Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta));
   return min + x * (max - min);
 }
 

src/lib/generators/personal.ts

@@ -4,6 +4,7 @@
  */
 
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
+import { randomInt, randomPick } from './random';
 
 // 中文姓氏
 const SURNAMES = [
@@ -162,20 +163,6 @@ const CITIES: Record<string, string[]> = {
   四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
 };
 
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
 /**
  * 中文姓名生成器
  */

src/lib/generators/random.ts

@@ -0,0 +1,7 @@
+export function randomInt(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function randomPick<T>(arr: readonly T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}

src/lib/generators/technical.ts

@@ -4,20 +4,7 @@
  */
 
 import type { GeneratorDefinition } from '@/types/testDataGenerator';
-
-/**
- * 生成随机整数
- */
-function randomInt(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-/**
- * 从数组中随机选择
- */
-function randomPick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
+import { randomInt, randomPick } from './random';
 
 /**
  * UUID 生成器

src/pages/Base64Converter/components/Base64ConverterSection.tsx

@@ -41,6 +41,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
     setCustomFileName,
     resetAll,
     safeFileSelect,
+    maxFileSizeStr,
   } = useBase64Converter({ mode });
 
   const handleDirectionChange = (next: Base64ConvertDirection) => {
@@ -136,7 +137,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
                   {mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
                 </span>
                 <span className="text-[10px] font-medium text-muted-foreground/60">
-                  {'最大文件大小：{{max}}'}
+                  {`最大文件大小：${maxFileSizeStr}`}
                 </span>
                 {mode === 'image' && (
                   <span className="text-[10px] font-medium text-muted-foreground/50">

src/pages/Base64Converter/components/DecodeResultPaper.tsx

@@ -14,7 +14,7 @@ import { Label } from '@/components/ui/label';
 import { formatBytes } from '@/utils/format';
 
 interface DecodeResultPaperProps {
-  /** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
+  /** 标题文案 */
   title: string;
   /** 解码后推断的 MIME 类型 */
   mimeType: string;

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

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

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

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

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

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

src/pages/Dashboard/dashboardFeatures.ts

@@ -0,0 +1,38 @@
+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;
+}
+
+/**
+ * 将页面 key 列表解析为 Dashboard 可展示的工具项。
+ * 过滤条件：在 visiblePages 中且 feature 配置了 icon。
+ */
+export function resolveDashboardFeatures(
+  keys: PageType[],
+  visiblePages: PageType[],
+): DashboardFeatureItem[] {
+  const visibleSet = new Set(visiblePages);
+  const items: DashboardFeatureItem[] = [];
+
+  for (const key of keys) {
+    if (!visibleSet.has(key)) continue;
+
+    const feature = getFeatureByKey(key);
+    if (!feature || !isDashboardFeature(feature)) continue;
+
+    items.push({ key, feature });
+  }
+
+  return items;
+}

src/pages/Dashboard/index.tsx

@@ -1,28 +1,11 @@
-import { useRouter } from '@/providers/RouterProvider';
-import { getFeatureByKey } from '@/config/features';
-import type { PageType } from '@/types/storage';
 import { cn } from '@/lib/utils';
+import { useDashboard } from './useDashboard';
 
 export default function Index() {
-  const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
-
-  const visibleSet = new Set<string>(visiblePages);
-
-  const visibleFeatures = pageOrder
-    .filter((key) => visibleSet.has(key))
-    .map((key) => ({ key, feature: getFeatureByKey(key) }))
-    .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
-
-  const recentFeatures = recentlyUsedTools
-    .filter((key) => visibleSet.has(key))
-    .map((key) => ({ key, feature: getFeatureByKey(key) }))
-    .filter((item) => item.feature?.themeColorKey && item.feature.icon != null);
-
-  const showRecent = recentFeatures.length > 0;
+  const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
 
   return (
     <div className={cn('flex flex-col gap-4 p-3.5 w-full h-auto select-none')}>
-      {/* 最近使用 */}
       {showRecent && (
         <div className="flex flex-col gap-2">
           <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
@@ -30,12 +13,12 @@ export default function Index() {
           </h3>
           <div className="flex flex-wrap gap-2">
             {recentFeatures.map(({ key, feature }) => {
-              const IconComponent = feature!.icon!;
+              const IconComponent = feature.icon;
               return (
                 <button
                   key={key}
                   type="button"
-                  onClick={() => navigateTo(key as PageType)}
+                  onClick={() => navigateTo(key)}
                   className={cn(
                     'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
                     'border border-border/60 bg-card text-card-foreground',
@@ -44,7 +27,7 @@ export default function Index() {
                   )}
                 >
                   <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  {feature!.label}
+                  {feature.label}
                 </button>
               );
             })}
@@ -52,40 +35,45 @@ export default function Index() {
         </div>
       )}
 
-      {/* 全部工具 — 紧凑 Grid */}
       <div className="flex flex-col gap-2">
         <h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
           {'全部工具'}
         </h3>
-        <div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
-          {visibleFeatures.map(({ key, feature }) => {
-            const IconComponent = feature!.icon!;
-            return (
-              <button
-                key={key}
-                type="button"
-                onClick={() => navigateTo(key as PageType)}
-                className={cn(
-                  'group flex flex-col items-center justify-center gap-1.5',
-                  'py-3 px-2 rounded-xl border border-border/50 bg-card',
-                  'hover:bg-muted/40 hover:border-primary/30',
-                  'transition-colors cursor-pointer',
-                )}
-              >
-                <IconComponent
+        {visibleFeatures.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">{'没有可用的工具'}</p>
+        ) : (
+          <div
+            className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}
+          >
+            {visibleFeatures.map(({ key, feature }) => {
+              const IconComponent = feature.icon;
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => navigateTo(key)}
                   className={cn(
-                    'h-5 w-5 text-muted-foreground/70',
-                    'group-hover:text-foreground',
-                    'transition-colors',
+                    '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',
                   )}
-                />
-                <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>
+                >
+                  <IconComponent
+                    className={cn(
+                      'h-5 w-5 text-muted-foreground/70',
+                      'group-hover:text-foreground',
+                      'transition-colors',
+                    )}
+                  />
+                  <span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
+                    {feature.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );

src/pages/Dashboard/useDashboard.ts

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

src/pages/JsonTools/components/JsonConvertSection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import TextInputArea from '@/components/TextInputArea';
+import JsonResultPanel from './JsonResultPanel';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';
 import type { ConvertFunction, ConvertResult } from '../types';
@@ -97,46 +97,17 @@ export default function JsonConvertSection({
 
       {/* Result display */}
       {result && result.output ? (
-        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-          <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">
-                {labels.outputLabel}
-              </span>
-
-              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
-                <span>
-                  {'原始大小'}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.originalBytes)}
-                  </span>
-                </span>
-                <span className="text-border/60">|</span>
-                <span>
-                  {'格式化后大小'}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.outputBytes)}
-                  </span>
-                </span>
-              </div>
-            </div>
-
-            <CopyButton
-              text={result.output}
-              className="h-6 w-6 rounded-md border text-muted-foreground"
-            />
-          </div>
-
-          <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[380px] overflow-y-auto leading-relaxed select-text">
-            {result.output}
-          </div>
-        </div>
+        <JsonResultPanel
+          title={labels.outputLabel}
+          content={result.output}
+          originalBytes={result.originalBytes}
+          outputBytes={result.outputBytes}
+          maxHeight="380px"
+        />
       ) : (
-        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
-          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
-          </p>
-        </div>
+        <EmptyPlaceholder>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
+        </EmptyPlaceholder>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonFormatSection.tsx

@@ -5,10 +5,10 @@ import {
   type JsonFormatResult,
   validateJson,
 } from '@/utils/jsonFormatter';
-import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
+import JsonResultPanel from './JsonResultPanel';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
@@ -112,48 +112,16 @@ export default function JsonFormatSection() {
 
       {/* 格式化结果流面板展示 */}
       {result && result.formatted ? (
-        <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-          {/* 结果栏头部 */}
-          <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">
-                {'格式化结果'}
-              </span>
-
-              <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
-                <span>
-                  {'原始大小'}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.originalBytes)}
-                  </span>
-                </span>
-                <span className="text-border/60">|</span>
-                <span>
-                  {'格式化后大小'}:{' '}
-                  <span className="font-semibold text-foreground/80">
-                    {formatBytes(result.formattedBytes)}
-                  </span>
-                </span>
-              </div>
-            </div>
-
-            <CopyButton
-              text={result.formatted}
-              className="h-6 w-6 rounded-md border text-muted-foreground"
-            />
-          </div>
-
-          <div className="p-4 font-mono text-xs text-foreground/90 whitespace-pre-wrap break-all max-h-[420px] overflow-y-auto leading-relaxed select-text">
-            {result.formatted}
-          </div>
-        </div>
+        <JsonResultPanel
+          title="格式化结果"
+          content={result.formatted}
+          originalBytes={result.originalBytes}
+          outputBytes={result.formattedBytes}
+        />
       ) : (
-        /* 空状态指示引导区 */
-        <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
-          <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
-            {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
-          </p>
-        </div>
+        <EmptyPlaceholder>
+          {error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
+        </EmptyPlaceholder>
       )}
     </div>
   );

src/pages/JsonTools/components/JsonResultPanel.tsx

@@ -0,0 +1,53 @@
+import { formatBytes } from '@/utils/format';
+import { CopyButton } from '@/components/CopyButton';
+
+export interface JsonResultPanelProps {
+  title: string;
+  content: string;
+  originalBytes: number;
+  outputBytes: number;
+  outputSizeLabel?: string;
+  maxHeight?: string;
+}
+
+export default function JsonResultPanel({
+  title,
+  content,
+  originalBytes,
+  outputBytes,
+  outputSizeLabel = '格式化后大小',
+  maxHeight = '420px',
+}: JsonResultPanelProps) {
+  return (
+    <div className="relative rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
+      <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">
+            {title}
+          </span>
+
+          <div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
+            <span>
+              {'原始大小'}:{' '}
+              <span className="font-semibold text-foreground/80">{formatBytes(originalBytes)}</span>
+            </span>
+            <span className="text-border/60">|</span>
+            <span>
+              {outputSizeLabel}:{' '}
+              <span className="font-semibold text-foreground/80">{formatBytes(outputBytes)}</span>
+            </span>
+          </div>
+        </div>
+
+        <CopyButton text={content} className="h-6 w-6 rounded-md border text-muted-foreground" />
+      </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 }}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}

src/pages/JsonTools/index.tsx

@@ -4,6 +4,7 @@ import DiffNavigator from './components/DiffNavigator';
 import JsonFormatSection from './components/JsonFormatSection';
 import JsonConvertSection from './components/JsonConvertSection';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { useJsonTools } from './useJsonTools';
 import type { JsonToolsPageMode } from '@/types/storage';
 import type { ViewMode } from './types';
@@ -95,13 +96,11 @@ export default function Index() {
               <DiffResult result={diffResult} viewMode={viewMode} activePath={activePath} />
             </div>
           ) : (
-            <div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
-              <p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
-                {leftError || rightError
-                  ? '请修正上方 JSON 的语法错误以开启实时流式比对'
-                  : '输入两侧 JSON 后点击比较'}
-              </p>
-            </div>
+            <EmptyPlaceholder className="min-h-[140px]" messageClassName="max-w-[260px]">
+              {leftError || rightError
+                ? '请修正上方 JSON 的语法错误以开启实时流式比对'
+                : '输入两侧 JSON 后点击比较'}
+            </EmptyPlaceholder>
           )}
         </div>
       ) : pageMode === 'format' ? (

src/pages/Jwt/JwtSection.tsx

@@ -1,36 +0,0 @@
-import { CopyButton } from '@/components/CopyButton';
-import { stringifyJson } from '@/utils/jwt';
-import { cn } from '@/lib/utils';
-
-interface JwtSectionProps {
-  title: string;
-  content: unknown;
-  colorClass: string;
-  bgClass: string;
-  borderClass: string;
-}
-
-export default function JwtSection({
-  title,
-  content,
-  colorClass,
-  bgClass,
-  borderClass,
-}: JwtSectionProps) {
-  return (
-    <div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
-      <div className="flex justify-between items-center mb-2 select-none">
-        <span className={cn('text-xs font-bold tracking-wider uppercase', colorClass)}>
-          {title}
-        </span>
-        <CopyButton
-          text={JSON.stringify(content)}
-          className="h-6 w-6 rounded-md border text-muted-foreground"
-        />
-      </div>
-      <pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
-        {content ? stringifyJson(content) : '无法解析'}
-      </pre>
-    </div>
-  );
-}

src/pages/Jwt/components/JwtCopyBlock.tsx

@@ -0,0 +1,30 @@
+import { CopyButton } from '@/components/CopyButton';
+import { cn } from '@/lib/utils';
+
+interface JwtCopyBlockProps {
+  title: string;
+  copyText: string;
+  titleClassName?: string;
+  containerClassName?: string;
+  children: React.ReactNode;
+}
+
+export default function JwtCopyBlock({
+  title,
+  copyText,
+  titleClassName,
+  containerClassName,
+  children,
+}: JwtCopyBlockProps) {
+  return (
+    <div className={cn('p-4 rounded-xl border shadow-sm', containerClassName)}>
+      <div className="flex justify-between items-center mb-2 select-none">
+        <span className={cn('text-xs font-bold tracking-wider uppercase', titleClassName)}>
+          {title}
+        </span>
+        <CopyButton text={copyText} className="h-6 w-6 rounded-md border text-muted-foreground" />
+      </div>
+      {children}
+    </div>
+  );
+}

src/pages/Jwt/components/JwtResultView.tsx

@@ -0,0 +1,49 @@
+import { stringifyJson } from '@/utils/jwt';
+import type { JwtResult } from '@/utils/jwt';
+import { cn } from '@/lib/utils';
+import {
+  JWT_JSON_CONTENT_CLASS,
+  JWT_SECTION_CONFIG,
+  JWT_SIGNATURE_SECTION,
+  JWT_TEXT_CONTENT_CLASS,
+} from '../constants';
+import JwtCopyBlock from './JwtCopyBlock';
+
+interface JwtResultViewProps {
+  result: JwtResult;
+}
+
+export default function JwtResultView({ result }: JwtResultViewProps) {
+  return (
+    <div className="flex flex-col gap-4">
+      {JWT_SECTION_CONFIG.map(({ contentKey, title, colorClass, bgClass, borderClass }) => {
+        const content = result[contentKey];
+
+        return (
+          <JwtCopyBlock
+            key={contentKey}
+            title={title}
+            copyText={JSON.stringify(content)}
+            titleClassName={colorClass}
+            containerClassName={cn('border-solid', bgClass, borderClass)}
+          >
+            <pre className={JWT_JSON_CONTENT_CLASS}>
+              {content ? stringifyJson(content) : '无法解析'}
+            </pre>
+          </JwtCopyBlock>
+        );
+      })}
+
+      <JwtCopyBlock
+        title={JWT_SIGNATURE_SECTION.title}
+        copyText={result.signature || ''}
+        titleClassName={JWT_SIGNATURE_SECTION.titleClassName}
+        containerClassName={JWT_SIGNATURE_SECTION.containerClassName}
+      >
+        <span className={JWT_TEXT_CONTENT_CLASS}>
+          {result.signature || JWT_SIGNATURE_SECTION.emptyLabel}
+        </span>
+      </JwtCopyBlock>
+    </div>
+  );
+}

src/pages/Jwt/constants.ts

@@ -0,0 +1,41 @@
+export const JWT_INPUT_PLACEHOLDER = '在此粘贴 JWT 令牌 (Encoded JWT)...';
+
+export type JwtSectionContentKey = 'header' | 'payload';
+
+export interface JwtSectionConfig {
+  contentKey: JwtSectionContentKey;
+  title: string;
+  colorClass: string;
+  borderClass: string;
+  bgClass: string;
+}
+
+export const JWT_SECTION_CONFIG: JwtSectionConfig[] = [
+  {
+    contentKey: 'header',
+    title: 'HEADER: 算法 & 令牌类型',
+    colorClass: 'text-[#fb015b] dark:text-rose-400',
+    borderClass: 'border-[#fb015b]/20 dark:border-rose-500/20',
+    bgClass: 'bg-[#fb015b]/5 dark:bg-rose-500/5',
+  },
+  {
+    contentKey: 'payload',
+    title: 'PAYLOAD: 数据',
+    colorClass: 'text-[#a03aff] dark:text-purple-400',
+    borderClass: 'border-[#a03aff]/20 dark:border-purple-500/20',
+    bgClass: 'bg-[#a03aff]/5 dark:bg-purple-500/5',
+  },
+];
+
+export const JWT_SIGNATURE_SECTION = {
+  title: '签名',
+  titleClassName: 'text-muted-foreground/90',
+  containerClassName: 'border border-border bg-secondary/40',
+  emptyLabel: '无签名',
+} as const;
+
+export const JWT_JSON_CONTENT_CLASS =
+  'm-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text';
+
+export const JWT_TEXT_CONTENT_CLASS =
+  'block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text';

src/pages/Jwt/index.tsx

@@ -1,67 +1,26 @@
 import TextInputArea from '@/components/TextInputArea';
-import { CopyButton } from '@/components/CopyButton';
-import JwtSection from './JwtSection';
+import JwtResultView from './components/JwtResultView';
+import { JWT_INPUT_PLACEHOLDER } from './constants';
 import { useJwt } from './useJwt';
 
 export default function Index() {
   const { jwtInput, result, handleChange, handleClear } = useJwt();
 
   return (
-    <div className="p-4 w-full flex flex-col space-y-4 select-none">
-      <div className="flex flex-col gap-4">
-        <TextInputArea
-          minRows={5}
-          maxRows={10}
-          placeholder={'在此粘贴 JWT 令牌 (Encoded JWT)...'}
-          value={jwtInput}
-          onChange={handleChange}
-          allowCopy={true}
-          showClear={true}
-          externalError={result?.error || undefined}
-          onClear={handleClear}
-        />
+    <div className="p-4 w-full flex flex-col gap-4 select-none">
+      <TextInputArea
+        minRows={5}
+        maxRows={10}
+        placeholder={JWT_INPUT_PLACEHOLDER}
+        value={jwtInput}
+        onChange={handleChange}
+        allowCopy={true}
+        showClear={true}
+        externalError={result?.error || undefined}
+        onClear={handleClear}
+      />
 
-        {result && !result.error && (
-          <div className="flex flex-col gap-4">
-            <JwtSection
-              title={'HEADER: 算法 & 令牌类型'}
-              content={result.header}
-              colorClass="text-[#fb015b] dark:text-rose-400"
-              borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
-              bgClass="bg-[#fb015b]/5 dark:bg-rose-500/5"
-            />
-
-            <JwtSection
-              title={'PAYLOAD: 数据'}
-              content={result.payload}
-              colorClass="text-[#a03aff] dark:text-purple-400"
-              borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
-              bgClass="bg-[#a03aff]/5 dark:bg-purple-500/5"
-            />
-
-            <div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
-              <div className="flex justify-between items-center mb-2">
-                <span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
-                  {'签名'}
-                </span>
-                <CopyButton
-                  text={result.signature || ''}
-                  className="h-6 w-6 rounded-md border text-muted-foreground"
-                />
-              </div>
-              <span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
-                {result.signature || '无签名'}
-              </span>
-            </div>
-          </div>
-        )}
-
-        {result?.error && (
-          <div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
-            <p className="text-xs font-semibold text-muted-foreground/80">{'无效的 JSON 格式'}</p>
-          </div>
-        )}
-      </div>
+      {result && !result.error && <JwtResultView result={result} />}
     </div>
   );
 }

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

@@ -23,7 +23,6 @@ vi.mock('sonner', () => ({
 describe('ImageUploader 组件', () => {
   const mockOnFileChange = vi.fn();
   const mockOnClearFile = vi.fn();
-  const mockOnPreviewUrlChange = vi.fn();
   const mockOnDraggingChange = vi.fn();
 
   const defaultProps = {
@@ -31,7 +30,6 @@ describe('ImageUploader 组件', () => {
     onFileChange: mockOnFileChange,
     onClearFile: mockOnClearFile,
     previewUrl: '',
-    onPreviewUrlChange: mockOnPreviewUrlChange,
     dragging: false,
     onDraggingChange: mockOnDraggingChange,
   };
@@ -95,7 +93,7 @@ describe('ImageUploader 组件', () => {
   });
 
   describe('文件选择交互', () => {
-    it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
+    it('选择文件时应调用 onFileChange', async () => {
       render(<ImageUploader {...defaultProps} />);
       const input = document.getElementById('qr-code-upload') as HTMLInputElement;
       const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
@@ -105,8 +103,7 @@ describe('ImageUploader 组件', () => {
       });
 
       expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
-      expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
-      expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
+      expect(mockOnFileChange).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -127,7 +124,7 @@ describe('ImageUploader 组件', () => {
       expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
     });
 
-    it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
+    it('放置文件时应调用 onFileChange', () => {
       const { container } = render(<ImageUploader {...defaultProps} />);
       const dropzone = container.firstChild as HTMLElement;
       const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
@@ -146,6 +143,7 @@ describe('ImageUploader 组件', () => {
 
       expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
       expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
+      expect(mockOnFileChange).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -165,20 +163,12 @@ describe('ImageUploader 组件', () => {
   });
 
   describe('粘贴功能', () => {
-    it('监听粘贴事件', () => {
+    it('不应注册 document 粘贴事件监听（由 ParsePanel 统一处理）', () => {
       const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
       render(<ImageUploader {...defaultProps} />);
 
-      expect(addEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
-    });
-
-    it('组件卸载时应移除粘贴事件监听', () => {
-      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
-      const { unmount } = render(<ImageUploader {...defaultProps} />);
-
-      unmount();
-
-      expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
+      const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
+      expect(pasteListeners).toHaveLength(0);
     });
   });
 

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

@@ -0,0 +1,151 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { toast } from 'sonner';
+import ParsePanel from '../components/ParsePanel';
+import type { QrCodeParserState } from '../types';
+
+const mockHandleFileChange = vi.fn();
+const mockHandleClearFile = vi.fn();
+const mockSetParserState = vi.fn();
+
+let mockParserState: QrCodeParserState = {
+  selectedFile: null,
+  previewUrl: '',
+  dragging: false,
+  decodedResult: '',
+  parsing: false,
+  parseError: '',
+};
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('../contexts/QrCodeContext', () => ({
+  useQrCodeContext: () => ({
+    parserState: mockParserState,
+    setParserState: mockSetParserState,
+    handleFileChange: mockHandleFileChange,
+    handleClearFile: mockHandleClearFile,
+  }),
+}));
+
+function createImagePasteEvent(file: File) {
+  const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
+  Object.defineProperty(pasteEvent, 'clipboardData', {
+    value: {
+      items: [
+        {
+          type: file.type,
+          getAsFile: () => file,
+        },
+      ],
+      getData: () => '',
+    },
+  });
+  Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
+  return pasteEvent;
+}
+
+function createBase64PasteEvent(dataUrl: string) {
+  const pasteEvent = new Event('paste', { bubbles: true }) as ClipboardEvent;
+  Object.defineProperty(pasteEvent, 'clipboardData', {
+    value: {
+      items: [],
+      getData: (type: string) => (type === 'text/plain' ? dataUrl : ''),
+    },
+  });
+  Object.defineProperty(pasteEvent, 'preventDefault', { value: vi.fn() });
+  return pasteEvent;
+}
+
+describe('ParsePanel 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockParserState = {
+      selectedFile: null,
+      previewUrl: '',
+      dragging: false,
+      decodedResult: '',
+      parsing: false,
+      parseError: '',
+    };
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('粘贴功能', () => {
+    it('粘贴图片时应只处理一次', async () => {
+      render(<ParsePanel />);
+      const mockFile = new File(['img'], 'paste.png', { type: 'image/png' });
+
+      await act(async () => {
+        document.dispatchEvent(createImagePasteEvent(mockFile));
+      });
+
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
+      expect(toast.success).toHaveBeenCalledTimes(1);
+      expect(toast.success).toHaveBeenCalledWith('图片粘贴成功，正在解析...');
+    });
+
+    it('与 ImageUploader 同时挂载时 document 上只应有一个 paste 监听', () => {
+      const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
+      render(<ParsePanel />);
+
+      const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
+      expect(pasteListeners).toHaveLength(1);
+    });
+
+    it('粘贴 Base64 data URI 时应转换为文件并只处理一次', async () => {
+      const dataUrl = 'data:image/png;base64,abcd';
+      const mockBlob = new Blob(['img'], { type: 'image/png' });
+      vi.stubGlobal(
+        'fetch',
+        vi.fn().mockResolvedValue({
+          blob: () => Promise.resolve(mockBlob),
+        }),
+      );
+
+      render(<ParsePanel />);
+
+      await act(async () => {
+        document.dispatchEvent(createBase64PasteEvent(dataUrl));
+      });
+
+      expect(fetch).toHaveBeenCalledWith(dataUrl);
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(
+        expect.objectContaining({ name: 'pasted-image.png', type: 'image/png' }),
+      );
+      expect(toast.success).toHaveBeenCalledTimes(1);
+    });
+
+    it('已上传图片时粘贴仍应只处理一次', async () => {
+      mockParserState = {
+        selectedFile: new File(['existing'], 'existing.png', { type: 'image/png' }),
+        previewUrl: 'blob:existing',
+        dragging: false,
+        decodedResult: 'decoded-text',
+        parsing: false,
+        parseError: '',
+      };
+
+      render(<ParsePanel />);
+      expect(screen.getByText('已上传图片')).toBeInTheDocument();
+
+      const mockFile = new File(['new'], 'new.png', { type: 'image/png' });
+      await act(async () => {
+        document.dispatchEvent(createImagePasteEvent(mockFile));
+      });
+
+      expect(mockHandleFileChange).toHaveBeenCalledTimes(1);
+      expect(mockHandleFileChange).toHaveBeenCalledWith(mockFile);
+    });
+  });
+});

src/pages/QrCode/components/ImageUploader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Image, X } from 'lucide-react';
 import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
@@ -13,8 +13,6 @@ interface ImageUploaderProps {
   onClearFile: () => void;
   /** 文件预览 URL */
   previewUrl: string;
-  /** 预览 URL 变更回调 */
-  onPreviewUrlChange: (url: string) => void;
   /** 是否正在拖拽 */
   dragging: boolean;
   /** 拖拽状态变更回调 */
@@ -26,7 +24,6 @@ const ImageUploader = ({
   onFileChange,
   onClearFile,
   previewUrl,
-  onPreviewUrlChange,
   dragging,
   onDraggingChange,
 }: ImageUploaderProps) => {
@@ -35,9 +32,8 @@ const ImageUploader = ({
   const handleFileChange = useCallback(
     (file: File) => {
       onFileChange(file);
-      onPreviewUrlChange(URL.createObjectURL(file));
     },
-    [onFileChange, onPreviewUrlChange],
+    [onFileChange],
   );
 
   const handleClearFile = useCallback(() => {
@@ -72,38 +68,6 @@ const ImageUploader = ({
     }
   };
 
-  // 监听粘贴事件
-  useEffect(() => {
-    const handlePaste = async (e: ClipboardEvent) => {
-      const items = e.clipboardData?.items;
-      if (!items) return;
-
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type.startsWith('image/')) {
-          e.preventDefault();
-
-          const file = items[i].getAsFile();
-          if (file) {
-            try {
-              handleFileChange(file);
-              toast.success('图片粘贴成功，正在解析...');
-            } catch (error) {
-              console.error('处理粘贴图片失败:', error);
-              toast.error('粘贴图片失败，请重试');
-            }
-          }
-          break;
-        }
-      }
-    };
-
-    document.addEventListener('paste', handlePaste);
-
-    return () => {
-      document.removeEventListener('paste', handlePaste);
-    };
-  }, [handleFileChange]);
-
   return (
     <div
       className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${

src/pages/QrCode/components/ParsePanel.tsx

@@ -65,7 +65,6 @@ export default function ParsePanel() {
           onFileChange={handleFileChange}
           onClearFile={handleClearFile}
           previewUrl={parserState.previewUrl}
-          onPreviewUrlChange={(url) => setParserState((prev) => ({ ...prev, previewUrl: url }))}
           dragging={parserState.dragging}
           onDraggingChange={(dragging) => setParserState((prev) => ({ ...prev, dragging }))}
         />

src/pages/QrCode/components/QrCodePreview.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Copy, Download } from 'lucide-react';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 
@@ -26,17 +27,13 @@ const QrCodePreview = ({
   // 空状态下的虚线骨架屏
   if (!qrCodeDataUrl) {
     return (
-      <div
-        className={cn(
-          'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
-          className,
-        )}
+      <EmptyPlaceholder
+        className={cn('min-h-[200px] p-4', className)}
+        messageClassName="text-sm text-muted-foreground max-w-none"
         {...props}
       >
-        <p className="text-sm text-muted-foreground text-center">
-          {placeholderText || '二维码将显示在这里'}
-        </p>
-      </div>
+        {placeholderText || '二维码将显示在这里'}
+      </EmptyPlaceholder>
     );
   }
 

src/pages/QrCode/hooks/useQrCode.ts

@@ -6,10 +6,8 @@ import { useContextMenuData } from '@/utils/useContextMenuData';
 import type { QrCodeContextValue } from '../contexts/QrCodeContext';
 import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
 
-/** 防抖延迟时间（毫秒） */
 const DEBOUNCE_DELAY = 500;
 
-/** 检测文本是否为URL格式 */
 function isUrl(text: string): boolean {
   const trimmed = text.trim();
   if (!trimmed) return false;
@@ -99,7 +97,6 @@ export function useQrCode(): QrCodeContextValue {
 
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // 清除防抖定时器
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current) {
@@ -108,7 +105,6 @@ export function useQrCode(): QrCodeContextValue {
     };
   }, []);
 
-  /** 自动检测URL并生成二维码 */
   const autoGenerateIfUrl = useCallback((text: string) => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -149,7 +145,6 @@ export function useQrCode(): QrCodeContextValue {
     [autoGenerateIfUrl],
   );
 
-  /** 手动触发生成二维码（用于非URL文本） */
   const confirmGenerate = useCallback(() => {
     const text = generatorState.textToEncode.trim();
 
@@ -159,10 +154,8 @@ export function useQrCode(): QrCodeContextValue {
       return;
     }
 
-    // 先设置 loading 状态，让 React 渲染加载动画
     setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
 
-    // 延迟到下一帧生成，确保 loading 状态先被渲染显示
     setTimeout(() => {
       const qrCodeDataUrl = generateQrCodeDataUrl(text);
 
@@ -186,7 +179,6 @@ export function useQrCode(): QrCodeContextValue {
     }, 0);
   }, [generatorState.textToEncode]);
 
-  /** 返回编辑态，保留上次输入内容 */
   const backToEdit = useCallback(() => {
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -200,7 +192,6 @@ export function useQrCode(): QrCodeContextValue {
     }));
   }, []);
 
-  /** 从图片URL解析二维码 */
   const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
     try {
       setParserState((prev) => ({
@@ -212,7 +203,6 @@ export function useQrCode(): QrCodeContextValue {
         selectedFile: null,
       }));
 
-      // 从URL获取图片并转换为File对象
       const response = await fetch(imageUrl);
       const blob = await response.blob();
       const file = new File([blob], 'qrcode-image.png', { type: blob.type });
@@ -239,35 +229,19 @@ export function useQrCode(): QrCodeContextValue {
     }
   }, []);
 
-  /** 右键菜单传入URL时，自动生成二维码或解析图片 */
   const handleContextMenuData = useCallback(
     (payload: string) => {
-      // 检测是否为图片URL，如果是则切换到解析模式
       if (isImageUrl(payload)) {
         setMode('parse');
         void parseQrCodeFromUrl(payload);
         return;
       }
 
-      // 非图片URL，生成二维码
       setMode('generate');
 
-      // 直接生成二维码，无需等待
       const qrCodeDataUrl = generateQrCodeDataUrl(payload);
 
-      if (qrCodeDataUrl) {
-        // 生成成功，直接跳转到预览态
-        setGeneratorState((prev) => ({
-          ...prev,
-          step: 'preview',
-          textToEncode: payload,
-          savedText: payload.trim(),
-          qrCodeDataUrl,
-          generating: false,
-          inputError: '',
-        }));
-      } else {
-        // 生成失败，停留在输入态，显示文本供用户编辑
+      if (!qrCodeDataUrl) {
         setGeneratorState((prev) => ({
           ...prev,
           step: 'input',
@@ -284,7 +258,6 @@ export function useQrCode(): QrCodeContextValue {
 
   useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
 
-  // 反向活态解析二维码算法
   const parseQrCode = useCallback(async (file: File) => {
     try {
       setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
@@ -354,7 +327,6 @@ export function useQrCode(): QrCodeContextValue {
         };
       });
 
-      // 触发解析安全的后台 Promise
       parseQrCode(file).catch((err) => {
         console.error('Parser standalone task thread exploded:', err);
       });
@@ -362,7 +334,6 @@ export function useQrCode(): QrCodeContextValue {
     [parseQrCode],
   );
 
-  // 清除解析受控文件
   const handleClearFile = useCallback(() => {
     setParserState((prev) => {
       if (prev.previewUrl) {

src/pages/QrCode/index.tsx

@@ -9,7 +9,6 @@ import type { QrCodeMode } from './types';
 export default function Index() {
   const qrCode = useQrCode();
 
-  // 模式选项驱动骨架
   const modeOptions = [
     { value: 'generate' as QrCodeMode, label: '文本转二维码' },
     { value: 'parse' as QrCodeMode, label: '二维码转文本' },

src/pages/README.md

@@ -22,10 +22,9 @@ pages/FeatureName/
 
 仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
 
-| 文件           | 用途                                         |
-| -------------- | -------------------------------------------- |
-| `index.tsx`    | 页面组件，渲染工具卡片网格                   |
-| `ToolCard.tsx` | 工具卡片组件，展示图标、标题、描述和实时数据 |
+| 文件        | 用途                       |
+| ----------- | -------------------------- |
+| `index.tsx` | 页面组件，渲染工具卡片网格 |
 
 ### Timestamp/
 

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

@@ -8,8 +8,7 @@ vi.mock('../useRightClickRestorer', () => ({
   useRightClickRestorer: () => ({
     domain: 'example.com',
     isLoading: false,
-    isUnlocked: false,
-    isUnsupported: false,
+    status: 'locked',
     unlock: mockUnlock,
   }),
 }));

src/pages/RightClickRestorer/__tests__/useRightClickRestorer.test.ts

@@ -26,8 +26,7 @@ describe('useRightClickRestorer', () => {
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
     expect(result.current.domain).toBe('example.com');
-    expect(result.current.isUnlocked).toBe(false);
-    expect(result.current.isUnsupported).toBe(false);
+    expect(result.current.status).toBe('locked');
     expect(sendMessageToContent).toHaveBeenCalledWith('queryRightClickStatus');
   });
 
@@ -39,8 +38,7 @@ describe('useRightClickRestorer', () => {
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
-    expect(result.current.isUnsupported).toBe(true);
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('unsupported');
     expect(sendMessageToContent).not.toHaveBeenCalled();
   });
 
@@ -56,7 +54,7 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(true);
+    expect(result.current.status).toBe('unlocked');
     expect(sendMessageToContent).toHaveBeenLastCalledWith('restoreRightClick');
   });
 
@@ -72,7 +70,7 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('unsupported');
     expect(sendMessageToContent).not.toHaveBeenCalled();
   });
 
@@ -87,6 +85,6 @@ describe('useRightClickRestorer', () => {
       await result.current.unlock();
     });
 
-    expect(result.current.isUnlocked).toBe(false);
+    expect(result.current.status).toBe('locked');
   });
 });

src/pages/RightClickRestorer/constants.ts

@@ -0,0 +1,59 @@
+import type { LucideIcon } from 'lucide-react';
+import { AlertTriangle, MousePointerClick, Shield, ShieldCheck } from 'lucide-react';
+
+export type RestorerStatus = 'unsupported' | 'locked' | 'unlocked';
+
+export const CARD_CLASS =
+  'w-full p-4 rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden space-y-3';
+
+export const LOADING_TEXT = '正在加载...';
+
+export const DOMAIN_LABEL = '当前域名';
+
+interface StatusConfig {
+  badgeVariant: 'default' | 'secondary' | 'destructive';
+  badgeClassName: string;
+  badgeIcon: LucideIcon;
+  badgeLabel: string;
+  description: string;
+  buttonIcon: LucideIcon;
+  buttonLabel: string;
+  buttonDisabled: boolean;
+  buttonVariant: 'default' | 'secondary';
+}
+
+export const STATUS_CONFIG: Record<RestorerStatus, StatusConfig> = {
+  unsupported: {
+    badgeVariant: 'destructive',
+    badgeClassName: 'gap-1 shrink-0',
+    badgeIcon: AlertTriangle,
+    badgeLabel: '不支持',
+    description: '当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。',
+    buttonIcon: AlertTriangle,
+    buttonLabel: '不支持',
+    buttonDisabled: true,
+    buttonVariant: 'secondary',
+  },
+  locked: {
+    badgeVariant: 'secondary',
+    badgeClassName: 'gap-1 shrink-0',
+    badgeIcon: Shield,
+    badgeLabel: '未解锁',
+    description: '点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。',
+    buttonIcon: MousePointerClick,
+    buttonLabel: '解锁当前网站右键',
+    buttonDisabled: false,
+    buttonVariant: 'default',
+  },
+  unlocked: {
+    badgeVariant: 'default',
+    badgeClassName: 'gap-1 bg-green-600 hover:bg-green-700 shrink-0',
+    badgeIcon: ShieldCheck,
+    badgeLabel: '已解锁',
+    description: '点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。',
+    buttonIcon: MousePointerClick,
+    buttonLabel: '右键已解锁',
+    buttonDisabled: true,
+    buttonVariant: 'secondary',
+  },
+};

src/pages/RightClickRestorer/index.tsx

@@ -1,82 +1,52 @@
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
-import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
+import { Loader2 } from 'lucide-react';
+import { CARD_CLASS, DOMAIN_LABEL, LOADING_TEXT, STATUS_CONFIG } from './constants';
 import { useRightClickRestorer } from './useRightClickRestorer';
 
 export default function Index() {
-  const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
+  const { domain, isLoading, status, unlock } = useRightClickRestorer();
 
   if (isLoading) {
     return (
       <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
+        <Loader2 className="h-6 w-6 text-muted-foreground/80 animate-spin" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {'正在加载...'}
+          {LOADING_TEXT}
         </span>
       </div>
     );
   }
 
+  const config = STATUS_CONFIG[status];
+  const BadgeIcon = config.badgeIcon;
+  const ButtonIcon = config.buttonIcon;
+
   return (
     <div className="p-4 w-full flex flex-col space-y-4">
-      {/* Current Domain */}
-      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-        <div className="p-4">
-          <Label className="text-sm font-medium">{'当前域名'}</Label>
-          <div className="mt-2 flex items-center justify-between gap-2">
-            <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
-              {domain || '—'}
-            </code>
-            {isUnsupported ? (
-              <Badge variant="destructive" className="gap-1 shrink-0">
-                <AlertTriangle className="h-3 w-3" />
-                {'不支持'}
-              </Badge>
-            ) : isUnlocked ? (
-              <Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
-                <ShieldCheck className="h-3 w-3" />
-                {'已解锁'}
-              </Badge>
-            ) : (
-              <Badge variant="secondary" className="gap-1 shrink-0">
-                <Shield className="h-3 w-3" />
-                {'未解锁'}
-              </Badge>
-            )}
-          </div>
+      <div className={CARD_CLASS}>
+        <Label className="text-sm font-medium">{DOMAIN_LABEL}</Label>
+        <div className="flex items-center justify-between gap-2">
+          <code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
+            {domain || '—'}
+          </code>
+          <Badge variant={config.badgeVariant} className={config.badgeClassName}>
+            <BadgeIcon className="h-3 w-3" />
+            {config.badgeLabel}
+          </Badge>
         </div>
-      </div>
 
-      {/* Unlock Action */}
-      <div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
-        <div className="p-4 space-y-3">
-          {isUnsupported ? (
-            <>
-              <p className="text-xs text-muted-foreground">
-                {'当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。'}
-              </p>
-              <Button className="w-full gap-2" disabled variant="secondary">
-                <AlertTriangle className="h-4 w-4" />
-                {'不支持'}
-              </Button>
-            </>
-          ) : (
-            <>
-              <p className="text-xs text-muted-foreground">
-                {'点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。'}
-              </p>
-              <Button
-                className="w-full gap-2"
-                onClick={() => void unlock()}
-                disabled={isUnlocked}
-                variant={isUnlocked ? 'secondary' : 'default'}
-              >
-                <MousePointerClick className="h-4 w-4" />
-                {isUnlocked ? '右键已解锁' : '解锁当前网站右键'}
-              </Button>
-            </>
-          )}
-        </div>
+        <p className="text-xs text-muted-foreground">{config.description}</p>
+        <Button
+          className="w-full gap-2"
+          disabled={config.buttonDisabled}
+          variant={config.buttonVariant}
+          onClick={config.buttonDisabled ? undefined : () => void unlock()}
+        >
+          <ButtonIcon className="h-4 w-4" />
+          {config.buttonLabel}
+        </Button>
       </div>
     </div>
   );

src/pages/RightClickRestorer/useRightClickRestorer.ts

@@ -1,29 +1,17 @@
 import { useEffect, useState } from 'react';
 import { MessageAction, sendMessageToContent } from '@/utils/messages';
+import { isUnsupportedPageUrl } from '@/utils/restrictedUrls';
+import type { RestorerStatus } from './constants';
 
-const UNSUPPORTED_PROTOCOLS = new Set([
-  'chrome:',
-  'chrome-extension:',
-  'about:',
-  'edge:',
-  'brave:',
-]);
-
-function isUnsupportedPage(url: string | undefined): boolean {
-  if (!url) return true;
-  try {
-    const protocol = new URL(url).protocol;
-    return UNSUPPORTED_PROTOCOLS.has(protocol);
-  } catch {
-    return true;
-  }
+function deriveStatus(isUnsupported: boolean, isUnlocked: boolean): RestorerStatus {
+  if (isUnsupported) return 'unsupported';
+  return isUnlocked ? 'unlocked' : 'locked';
 }
 
 export interface UseRightClickRestorerReturn {
   domain: string;
   isLoading: boolean;
-  isUnlocked: boolean;
-  isUnsupported: boolean;
+  status: RestorerStatus;
   unlock: () => Promise<void>;
 }
 
@@ -41,7 +29,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
 
         setDomain(url ? new URL(url).hostname : '');
 
-        if (isUnsupportedPage(url)) {
+        if (isUnsupportedPageUrl(url)) {
           setIsUnsupported(true);
           return;
         }
@@ -76,8 +64,7 @@ export function useRightClickRestorer(): UseRightClickRestorerReturn {
   return {
     domain,
     isLoading,
-    isUnlocked,
-    isUnsupported,
+    status: deriveStatus(isUnsupported, isUnlocked),
     unlock,
   };
 }

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

@@ -1,6 +1,9 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
+import { browser } from 'wxt/browser';
 import Index from '../index';
+import { clearStorage, getCookieSize, getCurrentTab } from '@/utils/storageCleaner';
+import { toast } from 'sonner';
 
 // Mock the chrome APIs
 vi.mock('@/utils/chromeStorage', () => ({
@@ -12,7 +15,6 @@ vi.mock('@/utils/chromeStorage', () => ({
 
 vi.mock('@/utils/storageCleaner', () => ({
   getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
-  isRestrictedUrl: vi.fn().mockReturnValue(false),
   getCookieSize: vi.fn().mockResolvedValue(0),
   getLocalStorageSize: vi.fn().mockResolvedValue(0),
   getSessionStorageSize: vi.fn().mockResolvedValue(0),
@@ -23,10 +25,82 @@ vi.mock('@/utils/storageCleaner', () => ({
   formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
 }));
 
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    warning: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
 describe('StorageCleaner 页面', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getCurrentTab).mockResolvedValue({ id: 1, url: 'https://example.com' } as any);
+    vi.mocked(clearStorage).mockResolvedValue({ overallSuccess: true });
+  });
+
   it('应该渲染初始化加载状态', () => {
-    // storageCleaner:initializing 的中文文案为「正在读取站点数据...」
     render(<Index />);
-    expect(screen.getByText(/正在读取站点数据/)).toBeInTheDocument();
+    expect(screen.getByText(/正在读取数据/)).toBeInTheDocument();
+  });
+
+  it('读取当前标签页失败时应显示错误提示', async () => {
+    vi.mocked(getCurrentTab).mockRejectedValueOnce(new Error('Tabs unavailable'));
+
+    render(<Index />);
+
+    expect(await screen.findByText('读取数据失败')).toBeInTheDocument();
+  });
+
+  it('确认清理前如果当前标签页变为受限页面，不应执行清理', async () => {
+    render(<Index />);
+
+    const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
+    fireEvent.click(cleanButton);
+
+    vi.mocked(getCurrentTab).mockResolvedValueOnce({
+      id: 1,
+      url: 'chrome://extensions',
+    } as any);
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => {
+      expect(clearStorage).not.toHaveBeenCalled();
+      expect(toast.warning).toHaveBeenCalledWith('存储清理功能不支持此页面');
+    });
+  });
+
+  it('自动刷新后应等待标签页完成加载并重新读取信息后再允许再次清理', async () => {
+    const tabUpdatedListeners: Array<(tabId: number, changeInfo: { status?: string }) => void> = [];
+    (browser.tabs.onUpdated.addListener as any).mockImplementation((listener: any) => {
+      tabUpdatedListeners.push(listener);
+    });
+    (browser.tabs.onUpdated.removeListener as any).mockImplementation((listener: any) => {
+      const index = tabUpdatedListeners.indexOf(listener);
+      if (index >= 0) tabUpdatedListeners.splice(index, 1);
+    });
+
+    render(<Index />);
+
+    const cleanButton = await screen.findByRole('button', { name: /立即清理/ });
+    fireEvent.click(cleanButton);
+    fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
+
+    await waitFor(() => expect(browser.tabs.reload).toHaveBeenCalledWith(1));
+
+    const loadingButton = screen.getByRole('button', { name: /正在清理/ });
+    expect(loadingButton).toBeDisabled();
+    fireEvent.click(loadingButton);
+    expect(clearStorage).toHaveBeenCalledTimes(1);
+
+    const reloadListener = tabUpdatedListeners.at(-1);
+    expect(reloadListener).toBeDefined();
+    reloadListener?.(1, { status: 'complete' });
+
+    await waitFor(() => {
+      expect(getCookieSize).toHaveBeenCalledTimes(2);
+      expect(screen.getByRole('button', { name: /立即清理/ })).not.toBeDisabled();
+    });
   });
 });

src/pages/StorageCleaner/components/OptionItem.tsx

@@ -2,17 +2,9 @@ import React from 'react';
 import { formatBytes } from '@/utils/format';
 import { cn } from '@/lib/utils';
 import type { StorageSizeInfo } from '../useStorageCleaner';
+import { OPTION_LABELS } from '../constants';
 import { Checkbox } from '@/components/ui/checkbox';
 
-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
   labelKey: string;
   checked: boolean;
@@ -30,7 +22,8 @@ export default function OptionItem({
 }: OptionItemProps) {
   const sizeValue = sizeInfo?.value;
   const isCount = sizeInfo?.displayType === 'count';
-  const label = OPTION_LABELS[labelKey] || labelKey;
+  const label =
+    labelKey in OPTION_LABELS ? OPTION_LABELS[labelKey as keyof typeof OPTION_LABELS] : labelKey;
 
   return (
     <div

src/pages/StorageCleaner/components/StorageCleanerConfirm.tsx

@@ -10,6 +10,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { AlertTriangle } from 'lucide-react';
 import type { StorageCleanerOptions } from '@/types/storage';
+import { OPTION_LABELS } from '../constants';
 import { cn } from '@/lib/utils';
 
 export interface StorageCleanerConfirmProps {
@@ -19,15 +20,6 @@ export interface StorageCleanerConfirmProps {
   options: StorageCleanerOptions;
 }
 
-const OPTION_LABELS: Record<string, string> = {
-  localStorage: 'Local Storage',
-  sessionStorage: 'Session Storage',
-  indexedDB: '站点存储',
-  cookies: 'Cookies',
-  cacheStorage: 'Cache Storage',
-  serviceWorkers: 'Service Workers',
-};
-
 export function StorageCleanerConfirm({
   open,
   onClose,
@@ -36,7 +28,9 @@ export function StorageCleanerConfirm({
 }: StorageCleanerConfirmProps) {
   const selectedOptions = Object.entries(options)
     .filter(([_, value]) => value)
-    .map(([key, _]) => OPTION_LABELS[key] || key);
+    .map(([key]) =>
+      key in OPTION_LABELS ? OPTION_LABELS[key as keyof typeof OPTION_LABELS] : key,
+    );
 
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>

src/pages/StorageCleaner/components/StorageOptionsGrid.tsx

@@ -5,6 +5,7 @@ import OptionItem from './OptionItem';
 import { cn } from '@/lib/utils';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { CLEAN_OPTION_KEYS } from '../constants';
 
 interface StorageOptionsGridProps extends React.HTMLAttributes<HTMLDivElement> {
   options: StorageCleanerOptions;
@@ -25,15 +26,6 @@ export default function StorageOptionsGrid({
   className,
   ...props
 }: StorageOptionsGridProps) {
-  const optionKeys: (keyof StorageCleanerOptions)[] = [
-    'localStorage',
-    'sessionStorage',
-    'indexedDB',
-    'cookies',
-    'cacheStorage',
-    'serviceWorkers',
-  ];
-
   const handleToggleAll = () => {
     onSelectAll(!allSelected);
   };
@@ -42,7 +34,7 @@ export default function StorageOptionsGrid({
     <div className={cn('w-full overflow-hidden', className)} {...props}>
       <div className="px-3.5 pt-3.5 pb-2">
         <div className="grid grid-cols-2 gap-2 items-stretch">
-          {optionKeys.map((key) => (
+          {CLEAN_OPTION_KEYS.map((key) => (
             <OptionItem
               key={key}
               labelKey={key}

src/pages/StorageCleaner/constants.ts

@@ -0,0 +1,19 @@
+import type { StorageCleanerOptions } from '@/types/storage';
+
+export const CLEAN_OPTION_KEYS = [
+  'localStorage',
+  'sessionStorage',
+  'indexedDB',
+  'cookies',
+  'cacheStorage',
+  'serviceWorkers',
+] as const satisfies readonly (keyof StorageCleanerOptions)[];
+
+export const OPTION_LABELS: Record<(typeof CLEAN_OPTION_KEYS)[number], string> = {
+  localStorage: 'Local Storage',
+  sessionStorage: 'Session Storage',
+  indexedDB: 'IndexedDB',
+  cookies: 'Cookies',
+  cacheStorage: 'Cache Storage',
+  serviceWorkers: 'Service Workers',
+};

src/pages/StorageCleaner/index.tsx

@@ -33,7 +33,7 @@ export default function Index() {
       <div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
         <Loader2 className="h-6 w-6 text-muted-foreground/80" />
         <span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
-          {'正在读取站点数据...'}
+          {'正在读取数据...'}
         </span>
       </div>
     );

src/pages/StorageCleaner/useStorageCleaner.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { browser } from 'wxt/browser';
 import { storageUtil } from '@/utils/chromeStorage';
 import type {
   CleaningResult,
@@ -14,8 +15,8 @@ import {
   getOriginStorageEstimate,
   getServiceWorkerCount,
   getSessionStorageSize,
-  isRestrictedUrl,
 } from '@/utils/storageCleaner';
+import { isRestrictedUrl } from '@/utils/restrictedUrls';
 import { toast } from 'sonner';
 
 const DEFAULT_OPTIONS: StorageCleanerOptions = {
@@ -32,6 +33,36 @@ const DEFAULT_PREFERENCES: StorageCleanerPreferences = {
   selectedTypes: DEFAULT_OPTIONS,
 };
 
+const RELOAD_COMPLETE_TIMEOUT_MS = 10_000;
+
+async function reloadTabAndWaitForComplete(tabId: number): Promise<void> {
+  await new Promise<void>((resolve, reject) => {
+    function cleanup() {
+      clearTimeout(timeoutId);
+      browser.tabs.onUpdated.removeListener(handleUpdated);
+    }
+
+    function finish() {
+      cleanup();
+      resolve();
+    }
+
+    function handleUpdated(updatedTabId: number, changeInfo: { status?: string }) {
+      if (updatedTabId === tabId && changeInfo.status === 'complete') {
+        finish();
+      }
+    }
+
+    const timeoutId = setTimeout(finish, RELOAD_COMPLETE_TIMEOUT_MS);
+    browser.tabs.onUpdated.addListener(handleUpdated);
+
+    browser.tabs.reload(tabId).catch((err) => {
+      cleanup();
+      reject(err);
+    });
+  });
+}
+
 export interface StorageSizeInfo {
   value: number;
   displayType: 'bytes' | 'count';
@@ -128,6 +159,11 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
         cacheStorage: { value: cacheCount, displayType: 'count' },
         serviceWorkers: { value: swCount, displayType: 'count' },
       });
+    } catch (err) {
+      console.error('Failed to load storage cleaner info:', err);
+      if (currentRequestId === requestIdRef.current) {
+        setError('读取数据失败');
+      }
     } finally {
       if (currentRequestId === requestIdRef.current) {
         setIsInitializing(false);
@@ -158,14 +194,14 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
       }
     };
 
-    chrome.tabs.onActivated.addListener(handleTabChange);
-    chrome.tabs.onUpdated.addListener(handleTabUpdated);
-    chrome.windows.onFocusChanged.addListener(handleTabChange);
+    browser.tabs.onActivated.addListener(handleTabChange);
+    browser.tabs.onUpdated.addListener(handleTabUpdated);
+    browser.windows.onFocusChanged.addListener(handleTabChange);
 
     return () => {
-      chrome.tabs.onActivated.removeListener(handleTabChange);
-      chrome.tabs.onUpdated.removeListener(handleTabUpdated);
-      chrome.windows.onFocusChanged.removeListener(handleTabChange);
+      browser.tabs.onActivated.removeListener(handleTabChange);
+      browser.tabs.onUpdated.removeListener(handleTabUpdated);
+      browser.windows.onFocusChanged.removeListener(handleTabChange);
     };
   }, [debouncedLoadInfo]);
 
@@ -174,9 +210,15 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
 
     if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
     storageTimerRef.current = setTimeout(async () => {
-      await storageUtil
-        .set('storageCleaner/preferences', { reloadAfterClean, selectedTypes: options })
-        .catch(console.error);
+      try {
+        await storageUtil.set('storageCleaner/preferences', {
+          reloadAfterClean,
+          selectedTypes: options,
+        });
+      } catch (err) {
+        console.error('Failed to save storage cleaner preferences:', err);
+        toast.warning('偏好保存失败，本次设置可能不会保留');
+      }
     }, 500);
   }, [options, reloadAfterClean, isInitializing]);
 
@@ -203,19 +245,27 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
     if (loadingRef.current) return;
 
     const tab = await getCurrentTab();
-    if (!tab || !tab.id || !tab.url) {
+    if (!tab || tab.id === undefined || !tab.url) {
       toast.warning('无法获取当前标签页');
       return;
     }
 
+    if (isRestrictedUrl(tab.url)) {
+      toast.warning('存储清理功能不支持此页面');
+      setShowConfirm(false);
+      return;
+    }
+
     setLoading(true);
+    setShowConfirm(false);
     try {
       const cleaningResult = await clearStorage(tab.id, tab.url, options);
       setResult(cleaningResult);
 
       if (reloadAfterClean && cleaningResult.overallSuccess) {
         toast.success('清理成功，即将刷新页面');
-        await chrome.tabs.reload(tab.id);
+        await reloadTabAndWaitForComplete(tab.id);
+        await loadInfo();
       } else {
         await loadInfo();
       }

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

@@ -0,0 +1,82 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+vi.mock('../hooks/useGenerator', () => ({
+  useGenerator: () => ({
+    isGenerating: false,
+    progress: null,
+    result: null,
+    error: null,
+    generate: vi.fn(),
+    cancel: vi.fn(),
+    clearResult: vi.fn(),
+  }),
+}));
+
+vi.mock('@/utils/ruleStorage', () => ({
+  MAX_RULES: 20,
+  getAll: vi.fn(() => []),
+  save: vi.fn(),
+  deleteRule: vi.fn(),
+  duplicate: vi.fn(),
+  recordUse: vi.fn(),
+  search: vi.fn(() => []),
+  exportRules: vi.fn(() => '[]'),
+  importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+import TestDataGeneratorPage from '../index';
+import * as ruleStorage from '@/utils/ruleStorage';
+import { toast } from 'sonner';
+import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
+
+const mockedRuleStorage = vi.mocked(ruleStorage);
+const mockedToast = vi.mocked(toast);
+
+const mockFields: FieldConfig[] = [
+  {
+    id: 'field-1',
+    name: 'name',
+    generatorId: 'string',
+    params: {},
+    required: true,
+    nullRate: 0,
+    unique: false,
+  },
+];
+
+const mockRule: DataRule = {
+  id: 'rule-1',
+  name: '用户数据规则',
+  description: '测试规则',
+  fields: mockFields,
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  useCount: 0,
+};
+
+describe('TestDataGeneratorPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+  });
+
+  it('编辑规则时应显示包含规则名的 toast', async () => {
+    const user = userEvent.setup();
+    render(<TestDataGeneratorPage />);
+
+    await user.click(screen.getByText('规则管理'));
+    await user.click(screen.getByTitle('编辑'));
+
+    expect(mockedToast.success).toHaveBeenCalledWith('正在编辑规则「用户数据规则」');
+    expect(mockedToast.success).not.toHaveBeenCalledWith(expect.stringContaining('{{name}}'));
+  });
+});

src/pages/TestDataGenerator/components/DataPreview.tsx

@@ -1,6 +1,5 @@
 /**
  * 数据预览组件
- * 展示一条示例数据，展示数据结构
  */
 
 import { useMemo } from 'react';
@@ -12,7 +11,6 @@ interface DataPreviewProps {
   fields: FieldConfig[];
 }
 
-/** JSON 语法高亮渲染 */
 function JsonHighlight({ data }: { data: Record<string, unknown> }) {
   const formatted = useMemo(() => {
     const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
@@ -45,7 +43,6 @@ function JsonHighlight({ data }: { data: Record<string, unknown> }) {
   );
 }
 
-/** 根据值类型返回颜色类名 */
 function getValueColor(value: string): string {
   if (value === 'null') return 'text-muted-foreground';
   if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
@@ -55,13 +52,11 @@ function getValueColor(value: string): string {
 }
 
 export default function DataPreview({ fields }: DataPreviewProps) {
-  // 生成一条示例数据
   const sampleData = useMemo(() => {
     if (fields.length === 0) return null;
 
     const record: Record<string, unknown> = {};
     for (const field of fields) {
-      // 非必填字段预览显示 null
       if (!field.required) {
         record[field.name] = null;
         continue;
@@ -87,7 +82,6 @@ export default function DataPreview({ fields }: DataPreviewProps) {
 
   return (
     <div className="flex flex-col h-full">
-      {/* 示例标签 */}
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
@@ -100,7 +94,6 @@ export default function DataPreview({ fields }: DataPreviewProps) {
         </span>
       </div>
 
-      {/* 示例数据展示 */}
       <div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
         <JsonHighlight data={sampleData} />
       </div>

src/pages/TestDataGenerator/components/FieldEditor.tsx

@@ -1,6 +1,5 @@
 /**
  * 字段编辑器组件
- * 编辑单个字段的详细配置
  */
 
 import { useState, useCallback } from 'react';
@@ -16,7 +15,6 @@ import GeneratorConfig from './GeneratorConfig';
 interface FieldEditorProps {
   field: FieldConfig;
   onChange: (field: FieldConfig) => void;
-  /** 所有字段名列表，用于检测重复 */
   allFieldNames?: string[];
 }
 
@@ -46,7 +44,6 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
   const handleNameChange = (name: string) => {
     onChange({ ...field, name });
-    // 实时校验
     const error = validateFieldName(name);
     setNameError(error);
   };
@@ -59,15 +56,12 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
     onChange({
       ...field,
       required,
-      // 切换为必填时清零，切换为非必填时默认 100%
       nullRate: required ? 0 : 100,
     });
   };
 
   const handleNullRateChange = (nullRate: number) => {
-    // 限制范围 0-100
     const clampedRate = Math.max(0, Math.min(100, nullRate));
-    // 空值率为 0 时自动设为必填
     if (clampedRate === 0) {
       onChange({ ...field, nullRate: clampedRate, required: true });
     } else {
@@ -105,7 +99,6 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
 
   return (
     <div className="space-y-5">
-      {/* 基础配置 */}
       <div className="space-y-4">
         <div className="space-y-2">
           <div className="flex items-center justify-between">
@@ -139,7 +132,6 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
         </div>
       </div>
 
-      {/* 必填/选填配置 */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <Label className="text-sm font-medium text-foreground">{'必填'}</Label>
@@ -187,19 +179,16 @@ export default function FieldEditor({ field, onChange, allFieldNames = [] }: Fie
         )}
       </div>
 
-      {/* 唯一性约束 */}
       <div className="flex items-center justify-between">
         <Label className="text-sm font-medium text-foreground">{'唯一性约束'}</Label>
         <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
       </div>
 
-      {/* 生成器选择 */}
       <div className="space-y-2">
         <Label className="text-sm font-medium text-foreground">{'数据生成器'}</Label>
         <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
       </div>
 
-      {/* 生成器参数配置 */}
       {generator && (
         <div className="space-y-2">
           <Label className="text-sm font-medium text-foreground">{'生成器参数'}</Label>

src/pages/TestDataGenerator/components/GenerateButton.tsx

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

src/pages/TestDataGenerator/components/ResultPanel.tsx

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

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import ResultPanel from '../ResultPanel';
+import type { GenerateResult } from '@/types/testDataGenerator';
+
+function createResult(overrides: Partial<GenerateResult> = {}): GenerateResult {
+  return {
+    success: true,
+    warnings: [],
+    stats: {
+      total: 100,
+      success: 100,
+      failed: 0,
+      duration: 1200,
+    },
+    ...overrides,
+  };
+}
+
+describe('ResultPanel', () => {
+  it('警告超过 5 条时应显示剩余警告数量', () => {
+    const warnings = Array.from({ length: 8 }, (_, index) => `警告 ${index + 1}`);
+
+    render(<ResultPanel result={createResult({ warnings })} />);
+
+    expect(screen.getByText('警告 1')).toBeInTheDocument();
+    expect(screen.getByText('警告 5')).toBeInTheDocument();
+    expect(screen.queryByText('警告 6')).not.toBeInTheDocument();
+    expect(screen.getByText('... 还有 3 条警告')).toBeInTheDocument();
+    expect(screen.queryByText(/\{\{count\}\}/)).not.toBeInTheDocument();
+  });
+
+  it('警告不超过 5 条时不应显示剩余提示', () => {
+    const warnings = ['警告 1', '警告 2', '警告 3'];
+
+    render(<ResultPanel result={createResult({ warnings })} />);
+
+    expect(screen.getByText('警告 1')).toBeInTheDocument();
+    expect(screen.getByText('警告 3')).toBeInTheDocument();
+    expect(screen.queryByText(/还有 \d+ 条警告/)).not.toBeInTheDocument();
+  });
+});

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

@@ -178,6 +178,18 @@ describe('RuleManager', () => {
     vi.restoreAllMocks();
   });
 
+  it('should call onEdit when edit button clicked', async () => {
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
+
+    render(<RuleManager {...defaultProps} onEdit={onEdit} />);
+
+    await user.click(screen.getByTitle('编辑'));
+
+    expect(onEdit).toHaveBeenCalledWith(mockRule);
+  });
+
   it('should show saved rule count', () => {
     mockedRuleStorage.getAll.mockReturnValue([mockRule]);
 

src/pages/TestDataGenerator/index.tsx

@@ -130,7 +130,7 @@ export default function TestDataGeneratorPage() {
       setEditingRule(rule);
       setActiveTab('fields');
       clearResult();
-      toast.success('正在编辑规则「{{name}}」');
+      toast.success(`正在编辑规则「${rule.name}」`);
     },
     [clearResult],
   );

src/pages/TextStatistics/components/StatCard.tsx

@@ -0,0 +1,17 @@
+interface StatCardProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+export default function StatCard({ label, value }: StatCardProps) {
+  return (
+    <div className="flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring">
+      <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
+        {label}
+      </span>
+      <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
+        {value}
+      </span>
+    </div>
+  );
+}

src/pages/TextStatistics/index.tsx

@@ -1,18 +1,11 @@
 import TextInputArea from '@/components/TextInputArea';
 import { formatBytes } from '@/utils/format';
+import StatCard from './components/StatCard';
 import { useTextStatistics } from './useTextStatistics';
-import { cn } from '@/lib/utils';
 
 export default function Index() {
   const { text, stats, setText } = useTextStatistics();
 
-  const statItems = [
-    { label: '字符数', value: stats.characters },
-    { label: '单词数', value: stats.words },
-    { label: '行数', value: stats.lines },
-    { label: '字节大小', value: formatBytes(stats.bytes) },
-  ];
-
   return (
     <div className="p-4 w-full space-y-4">
       <TextInputArea
@@ -26,22 +19,10 @@ export default function Index() {
       />
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
-        {statItems.map((item) => (
-          <div
-            key={item.label}
-            className={cn(
-              'flex flex-col justify-center items-center p-4 text-center rounded-xl border border-border bg-card shadow-sm text-card-foreground',
-              'hover:-translate-y-0.5 hover:shadow-md hover:border-primary/50 focus-within:ring-1 focus-within:ring-ring',
-            )}
-          >
-            <span className="text-xs font-medium text-muted-foreground tracking-wider mb-1 select-none">
-              {item.label}
-            </span>
-            <span className="font-mono text-lg md:text-2xl font-extrabold text-primary break-all tracking-tight leading-none tabular-nums select-all">
-              {item.value}
-            </span>
-          </div>
-        ))}
+        <StatCard label="字符数" value={stats.characters} />
+        <StatCard label="单词数" value={stats.words} />
+        <StatCard label="行数" value={stats.lines} />
+        <StatCard label="字节大小" value={formatBytes(stats.bytes)} />
       </div>
     </div>
   );

src/pages/TextStatistics/useTextStatistics.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { getTextStats, type TextStats } from '@/utils/textStatistics';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
@@ -10,6 +10,12 @@ export interface UseTextStatisticsReturn {
 
 export function useTextStatistics(): UseTextStatisticsReturn {
   const [text, setText] = useState('');
+  const [debouncedText, setDebouncedText] = useState('');
+
+  useEffect(() => {
+    const handle = setTimeout(() => setDebouncedText(text), 200);
+    return () => clearTimeout(handle);
+  }, [text]);
 
   const handleContextMenuData = useCallback((payload: string) => {
     setText(payload);
@@ -17,7 +23,7 @@ export function useTextStatistics(): UseTextStatisticsReturn {
 
   useContextMenuData({ featureKey: 'textStatistics', onData: handleContextMenuData });
 
-  const stats = getTextStats(text);
+  const stats = useMemo(() => getTextStats(debouncedText), [debouncedText]);
 
   return { text, stats, setText };
 }

src/pages/Timestamp/components/ConverterForm.tsx

@@ -0,0 +1,76 @@
+import SwitchButtonGroup from '@/components/SwitchButtonGroup';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { MODE_OPTIONS, UNIT_OPTIONS, ZONES, type ZoneType } from '../constants';
+import type { UseTimestampConverterReturn } from '../useTimestampConverter';
+import ToolCard from './ToolCard';
+
+type ConverterFormProps = Omit<UseTimestampConverterReturn, 'result' | 'handleUseNow'>;
+
+export default function ConverterForm({
+  mode,
+  input,
+  unit,
+  zone,
+  error,
+  inputPlaceholder,
+  setMode,
+  setInput,
+  setUnit,
+  setZone,
+}: ConverterFormProps) {
+  return (
+    <ToolCard className="gap-4">
+      <SwitchButtonGroup value={mode} options={MODE_OPTIONS} onChange={setMode} size="small" />
+
+      <div className="flex flex-col gap-1.5">
+        <Input
+          type="text"
+          placeholder={inputPlaceholder}
+          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',
+          )}
+        />
+
+        {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
+      </div>
+
+      <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
+        <SwitchButtonGroup
+          value={unit}
+          options={UNIT_OPTIONS}
+          onChange={setUnit}
+          size="small"
+          className="sm:w-auto shrink-0"
+        />
+
+        <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
+          <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
+            <SelectValue placeholder="选择时区" />
+          </SelectTrigger>
+          <SelectContent className="max-h-64 font-mono">
+            {ZONES.map((z) => (
+              <SelectItem
+                key={z}
+                value={z}
+                className="text-xs font-semibold focus:bg-accent cursor-pointer"
+              >
+                {z}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </ToolCard>
+  );
+}

src/pages/Timestamp/components/LiveClock.tsx

@@ -5,6 +5,7 @@ import { CopyButton } from '@/components/CopyButton';
 import type { UnitType } from '../constants';
 import { msToUnit } from '../constants';
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 interface LiveClockProps extends React.HTMLAttributes<HTMLDivElement> {
   unit: UnitType;
@@ -40,17 +41,19 @@ export default function LiveClock({ unit, onUseNow, className, ...props }: LiveC
         {text}
       </span>
 
-      <button
+      <Button
         type="button"
         onClick={() => {
           onUseNow(rawTime);
           toast.success('已使用当前时间戳');
         }}
         title={'填充到下方'}
-        className="flex h-7 w-7 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 text-muted-foreground hover:text-foreground"
       >
         <Clock className="w-3.5 h-3.5" />
-      </button>
+      </Button>
 
       <CopyButton text={text} tooltip={'复制时间戳'} className="h-7 w-7 rounded-md border" />
     </div>

src/pages/Timestamp/components/ResultView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CopyButton } from '@/components/CopyButton';
+import EmptyPlaceholder from '@/components/EmptyPlaceholder';
 import { cn } from '@/lib/utils';
 
 interface ResultViewProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,15 +17,13 @@ export default function ResultView({
   if (!result) {
     if (!showEmptyPlaceholder) return null;
     return (
-      <div
-        className={cn(
-          'flex-1 flex items-center justify-center text-sm font-medium border border-dashed border-border/60 rounded-xl py-12 px-4 text-center text-muted-foreground bg-muted/20 min-h-[320px]',
-          className,
-        )}
+      <EmptyPlaceholder
+        className={cn('flex-1 min-h-[320px]', className)}
+        messageClassName="text-sm font-medium text-muted-foreground max-w-none"
         {...props}
       >
         {'请输入并点击转换'}
-      </div>
+      </EmptyPlaceholder>
     );
   }
 
@@ -41,7 +40,9 @@ export default function ResultView({
         <CopyButton
           text={result}
           tooltip={'复制结果'}
-          className="h-8 w-8 rounded-md shrink-0 border"
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 text-muted-foreground hover:text-foreground"
         />
       </div>
     </div>

src/pages/Timestamp/components/ToolCard.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { CARD_CLASS } from '../constants';
+
+interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export default function ToolCard({ children, className, ...props }: ToolCardProps) {
+  return (
+    <div className={cn(CARD_CLASS, className)} {...props}>
+      {children}
+    </div>
+  );
+}

src/pages/Timestamp/constants.ts

@@ -9,14 +9,30 @@ export type ModeType = 'ts2dt' | 'dt2ts';
 export type UnitType = 'ms' | 's';
 export type ZoneType = (typeof ZONES)[number];
 
+export const MODE_OPTIONS: { value: ModeType; label: string }[] = [
+  { value: 'ts2dt', label: '时间戳转日期' },
+  { value: 'dt2ts', label: '日期转时间戳' },
+];
+
+export const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
+  { value: 'ms', label: '毫秒' },
+  { value: 's', label: '秒' },
+];
+
+export const INPUT_PLACEHOLDERS: Record<ModeType, string> = {
+  ts2dt: '输入时间戳...',
+  dt2ts: 'YYYY-MM-DD HH:mm:ss',
+};
+
+export const CARD_CLASS =
+  'p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col';
+
 const DIVISORS: Record<UnitType, number> = { ms: 1, s: 1000 };
 
-/** Convert milliseconds to display value based on unit. */
 export function msToUnit(ms: number, unit: UnitType): number {
   return Math.floor(ms / DIVISORS[unit]);
 }
 
-/** Build a dayjs object from a numeric timestamp according to unit. */
 export function dayjsFromTimestamp(ts: number, unit: UnitType): Dayjs {
   return unit === 'ms' ? dayjs(ts) : dayjs.unix(ts);
 }

src/pages/Timestamp/index.tsx

@@ -1,108 +1,22 @@
-import SwitchButtonGroup from '@/components/SwitchButtonGroup';
-import { ZONES } from './constants';
-import type { ModeType, UnitType, ZoneType } from './constants';
 import LiveClock from './components/LiveClock';
+import ConverterForm from './components/ConverterForm';
 import ResultView from './components/ResultView';
+import ToolCard from './components/ToolCard';
 import { useTimestampConverter } from './useTimestampConverter';
-import { cn } from '@/lib/utils';
-
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-const MODE_OPTIONS: { value: ModeType; label: string }[] = [
-  { value: 'ts2dt', label: '时间戳转日期' },
-  { value: 'dt2ts', label: '日期转时间戳' },
-];
-
-const UNIT_OPTIONS: { value: UnitType; label: string }[] = [
-  { value: 'ms', label: '毫秒' },
-  { value: 's', label: '秒' },
-];
 
 export default function Index() {
-  const {
-    mode,
-    input,
-    unit,
-    zone,
-    result,
-    error,
-    setMode,
-    setInput,
-    setUnit,
-    setZone,
-    handleUseNow,
-  } = useTimestampConverter();
+  const { result, handleUseNow, ...formProps } = useTimestampConverter();
 
   return (
-    <div className="min-h-screen bg-background text-foreground antialiased selection:bg-primary/20">
-      <div className="max-w-7xl mx-auto p-4 sm:p-6 space-y-4">
-        <LiveClock unit={unit} onUseNow={handleUseNow} />
+    <div className="p-4 w-full flex flex-col space-y-4 select-none">
+      <LiveClock unit={formProps.unit} onUseNow={handleUseNow} />
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
-          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col justify-between">
-            <div className="flex flex-col gap-4">
-              <SwitchButtonGroup
-                value={mode}
-                options={MODE_OPTIONS}
-                onChange={setMode}
-                size="small"
-              />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
+        <ConverterForm {...formProps} />
 
-              <div className="flex flex-col gap-1.5">
-                <Input
-                  type="text"
-                  placeholder={mode === 'ts2dt' ? '输入时间戳...' : 'YYYY-MM-DD HH:mm:ss'}
-                  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',
-                  )}
-                />
-
-                {error && <p className="text-destructive text-xs font-medium px-0.5">{error}</p>}
-              </div>
-
-              <div className="flex flex-col sm:flex-row items-stretch gap-3 w-full">
-                <SwitchButtonGroup
-                  value={unit}
-                  options={UNIT_OPTIONS}
-                  onChange={setUnit}
-                  size="small"
-                  className="sm:w-auto shrink-0"
-                />
-
-                <Select value={zone} onValueChange={(v: string) => setZone(v as ZoneType)}>
-                  <SelectTrigger className="flex-1 font-mono font-semibold h-9 shadow-sm bg-background">
-                    <SelectValue placeholder="选择时区" />
-                  </SelectTrigger>
-                  <SelectContent className="max-h-64 font-mono">
-                    {ZONES.map((z) => (
-                      <SelectItem
-                        key={z}
-                        value={z}
-                        className="text-xs font-semibold focus:bg-accent cursor-pointer"
-                      >
-                        {z}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </div>
-
-          <div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm h-full flex flex-col">
-            <ResultView result={result} showEmptyPlaceholder />
-          </div>
-        </div>
+        <ToolCard className="h-full">
+          <ResultView result={result} showEmptyPlaceholder />
+        </ToolCard>
       </div>
     </div>
   );

src/pages/Timestamp/useTimestampConverter.ts

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import dayjs from '@/utils/dayjs';
 import type { UnitType, ZoneType, ModeType } from './constants';
-import { DATE_FORMAT, msToUnit, dayjsFromTimestamp } from './constants';
+import { DATE_FORMAT, INPUT_PLACEHOLDERS, msToUnit, dayjsFromTimestamp } from './constants';
 import { useContextMenuData } from '@/utils/useContextMenuData';
 
 export interface UseTimestampConverterReturn {
@@ -11,6 +11,7 @@ export interface UseTimestampConverterReturn {
   zone: ZoneType;
   result: string;
   error: string;
+  inputPlaceholder: string;
 
   setMode: (mode: ModeType) => void;
   setInput: (value: string) => void;
@@ -100,6 +101,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn {
     zone,
     result,
     error,
+    inputPlaceholder: INPUT_PLACEHOLDERS[mode],
     setMode: handleSetMode,
     setInput,
     setUnit,

src/providers/AppRoot.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ThemeModeProvider } from './ThemeModeProvider';
-import { RouterProvider } from './RouterProvider';
 import { Toaster } from '@/components/ui/sonner';
 
 interface AppRootProps {
@@ -11,7 +10,7 @@ export default function AppRoot({ children }: AppRootProps) {
   return (
     <React.StrictMode>
       <ThemeModeProvider>
-        <RouterProvider>{children}</RouterProvider>
+        {children}
         <Toaster />
       </ThemeModeProvider>
     </React.StrictMode>