fix(测试数据生成器): 修复规则覆盖保存误创建重复规则

覆盖同名规则时 handleSave(true) 未传入已有规则 id，save() 走新建分支
导致旧规则保留且产生同名重复项，getByName 仍返回旧数据。

.github/CODING_STANDARDS.md

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

components.json

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

docs/test-data-generator/README.md

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

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

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

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

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

src/components/CopyButton.tsx

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

src/components/ErrorFallback.tsx

@@ -30,7 +30,9 @@ export function ErrorFallback({
     <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] fade-in-zoom-95',
+        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,
       )}
     >
@@ -55,11 +57,7 @@ export function ErrorFallback({
           <h3 className="text-base font-semibold text-foreground mb-1.5">{title}</h3>
         )}
 
-        <p
+        <p className={cn('text-muted-foreground', isApp ? 'text-sm mb-6' : 'text-xs mb-5')}>
-          className={
-            isApp ? 'text-sm text-muted-foreground mb-6' : 'text-xs text-muted-foreground mb-5'
-          }
-        >
           {description}
         </p>
 
@@ -85,7 +83,7 @@ export function ErrorFallback({
           variant="destructive"
           size={isApp ? 'default' : 'sm'}
           onClick={onAction}
-          className={isApp ? 'rounded-lg font-bold shadow-sm' : 'font-medium shadow-sm'}
+          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}

src/components/PageSkeleton.tsx

@@ -46,7 +46,7 @@ function ToolPageSkeleton() {
         <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
         <div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
         <div className="flex-1" />
-        <div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
+        <div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
       </div>
 
       {/* 结果区域 */}

src/components/README.md

@@ -5,12 +5,12 @@
 ## 组件列表
 
 | 组件                    | 用途                                                                           |
-| ----------------------- | ------------------------------------------------------------------------------------------------------ |
+| ----------------------- | ------------------------------------------------------------------------------ |
 | `RouterContainer.tsx`   | 路由容器，根据当前路由动态渲染对应页面组件，集成错误边界和骨架屏               |
 | `SwitchButtonGroup.tsx` | 通用切换按钮组，支持 `small/medium/large` 三种尺寸，用于页面子模式切换         |
 | `EmptyPlaceholder.tsx`  | 虚线边框空状态占位，统一工具页「暂无结果」提示样式                             |
 | `TextInputArea.tsx`     | 增强文本输入区域，支持校验规则、工具栏操作、字符计数、清空                     |
-| `CopyButton.tsx`        | 一键复制按钮：复制成功后 1.5s 内切换为 Check 图标并应用 `text-emerald-500`；空内容/失败时 `toast` 提示 |
+| `CopyButton.tsx`        | 一键复制按钮，支持复制成功状态动画，封装 `copyTextToClipboard` 和 `toast` 反馈 |
 | `ImageUploader.tsx`     | 图片上传组件，支持拖拽上传、文件选择和预览                                     |
 | `QrCodePreview.tsx`     | 二维码预览组件，展示生成的二维码图片，提供复制和下载操作                       |
 | `DecodeResultPaper.tsx` | Base64 解码结果展示面板，显示 MIME 类型、文件大小、文件名输入和下载按钮        |

src/components/RouterContainer.tsx

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

src/components/SwitchButtonGroup.tsx

@@ -24,7 +24,8 @@ const SIZE_CLASSES = {
   large: 'text-base h-11 px-4 py-2 rounded-lg',
 } as const;
 
-const SELECTED_CLASSES = 'bg-background text-foreground shadow-sm font-semibold fade-in-zoom-95';
+const SELECTED_CLASSES =
+  'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
 const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
 
 export default function SwitchButtonGroup<T extends string | number = string>({

src/components/TextInputArea.tsx

@@ -267,13 +267,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
 
             <div className="flex items-center gap-1.5 ml-auto shrink-0">
               {allowCopy && value && (
-                <CopyButton
+                <CopyButton text={value} tooltip="复制内容" size="sm" className="h-7 w-7 p-1" />
-                  text={value}
-                  tooltip="复制内容"
-                  variant="ghost"
-                  size="iconSm"
-                  className="text-muted-foreground hover:text-foreground"
-                />
               )}
               {showClear && value && !disabled && !readOnly && (
                 <Button
@@ -281,8 +275,8 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
                   onClick={handleClear}
                   aria-label="清空"
                   variant="ghost"
-                  size="iconSm"
+                  size="icon"
-                  className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                  className="h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                 >
                   <X className="h-4 w-4" />
                 </Button>
@@ -293,7 +287,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
       </div>
 
       {displayError && (
-        <p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
+        <p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
           {displayError}
         </p>
       )}

src/components/__tests__/RouterContainer.test.tsx

@@ -9,13 +9,12 @@ const mockRouterValue = {
   currentPage: 'dashboard' as PageType,
   visiblePages: ['dashboard', 'timestamp'] as PageType[],
   pageOrder: ['timestamp'] as PageType[],
+  isLoaded: true,
   navigateTo: vi.fn(),
   syncNavigation: vi.fn(),
   goHome: vi.fn(),
   setVisiblePages: vi.fn(),
   setPageOrder: vi.fn(),
-  recentlyUsedTools: [] as PageType[],
-  isLoaded: true,
 };
 
 vi.mock('@/providers/RouterProvider', () => ({
@@ -33,7 +32,16 @@ describe('RouterContainer 组件', () => {
   };
 
   describe('渲染测试', () => {
-    it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
+    it('isLoaded 为 false 时应渲染骨架屏', () => {
+      mockRouterValue.isLoaded = false;
+      const { container } = renderWithProvider(<RouterContainer />);
+      // 骨架屏使用 animate-pulse 类
+      const skeletons = container.querySelectorAll('.animate-pulse');
+      expect(skeletons.length).toBeGreaterThan(0);
+    });
+
+    it('isLoaded 为 true 时应渲染页面内容', () => {
+      mockRouterValue.isLoaded = true;
       mockRouterValue.currentPage = 'dashboard';
       const { container } = renderWithProvider(<RouterContainer />);
       expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
@@ -69,7 +77,8 @@ describe('RouterContainer 组件', () => {
   });
 
   describe('页面级错误隔离', () => {
-    it('PageErrorBoundary 应包裹页面内容', () => {
+    it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
+      mockRouterValue.isLoaded = true;
       mockRouterValue.currentPage = 'dashboard';
       const { container } = renderWithProvider(<RouterContainer />);
 

src/components/ui/button.tsx

@@ -21,7 +21,6 @@ const buttonVariants = cva(
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
-        iconSm: 'h-7 w-7',
       },
     },
     defaultVariants: {

src/components/ui/checkbox.tsx

@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
+    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>

src/components/ui/dialog.tsx

@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
+      'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className,
       )}
       {...props}

src/components/ui/select.tsx

@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,

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

@@ -67,21 +67,19 @@ describe('features 懒加载', () => {
     expect(pageLoadTracker.loaded).toEqual([]);
   });
 
-  it('loadPage 应仅加载对应页面模块', async () => {
+  it('渲染 lazy 组件时才应加载对应页面模块', async () => {
-    const { loadPage } = await import('@/config/pageLoaders/index');
+    const React = await import('react');
+    const { render, waitFor } = await import('@testing-library/react');
+    const { FEATURES } = await import('@/config/features');
 
-    await loadPage('dashboard');
+    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']);
     });
-
-  it('loadPage 切换页面时不应加载无关页面模块', async () => {
-    const { loadPage } = await import('@/config/pageLoaders/index');
-
-    await loadPage('timestamp');
-
-    expect(pageLoadTracker.loaded).toEqual(['Timestamp']);
-    expect(pageLoadTracker.loaded).not.toContain('QrCode');
-    expect(pageLoadTracker.loaded).not.toContain('TestDataGenerator');
   });
 });

src/config/__tests__/features.test.ts

@@ -19,11 +19,15 @@ describe('features', () => {
         expect(feature).toHaveProperty('label');
         expect(feature).toHaveProperty('description');
         expect(feature).toHaveProperty('defaultVisible');
-        expect(feature).not.toHaveProperty('component');
+        expect(feature).toHaveProperty('components');
         expect(typeof feature.key).toBe('string');
         expect(typeof feature.label).toBe('string');
         expect(typeof feature.description).toBe('string');
         expect(typeof feature.defaultVisible).toBe('boolean');
+        expect(typeof feature.components).toBe('object');
+        expect(feature.components).toHaveProperty('popup');
+        expect(feature.components).toHaveProperty('sidepanel');
+        expect(feature.components).toHaveProperty('tab');
 
         if (feature.key !== 'dashboard') {
           expect(feature).toHaveProperty('icon');

src/config/features.ts

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

src/config/features.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+import { type ComponentType, lazy } from 'react';
 import type { LucideProps } from 'lucide-react';
 import type { PageType } from '@/types/storage';
 import {
@@ -15,6 +15,18 @@ import {
 
 export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
 
+// 懒加载页面组件
+const DashboardPage = lazy(() => import('@/pages/Dashboard'));
+const TimestampPage = lazy(() => import('@/pages/Timestamp'));
+const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
+const QrCodePage = lazy(() => import('@/pages/QrCode'));
+const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
+const JwtPage = lazy(() => import('@/pages/Jwt'));
+const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
+const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
+const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
+const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
+
 export interface FeatureConfig {
   key: PageType;
   label: string;
@@ -22,6 +34,11 @@ export interface FeatureConfig {
   themeColorKey?: PaletteColorKey;
   icon?: ComponentType<LucideProps>;
   defaultVisible: boolean;
+  components: {
+    popup: ComponentType;
+    sidepanel: ComponentType;
+    tab: ComponentType;
+  };
 }
 
 export const FEATURES: FeatureConfig[] = [
@@ -30,6 +47,11 @@ export const FEATURES: FeatureConfig[] = [
     label: '仪表盘',
     description: '',
     defaultVisible: true,
+    components: {
+      popup: DashboardPage,
+      sidepanel: DashboardPage,
+      tab: DashboardPage,
+    },
   },
   {
     key: 'timestamp',
@@ -38,6 +60,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'primary',
     icon: Clock,
     defaultVisible: true,
+    components: {
+      popup: TimestampPage,
+      sidepanel: TimestampPage,
+      tab: TimestampPage,
+    },
   },
   {
     key: 'storageCleaner',
@@ -46,6 +73,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'warning',
     icon: Database,
     defaultVisible: true,
+    components: {
+      popup: StorageCleanerPage,
+      sidepanel: StorageCleanerPage,
+      tab: StorageCleanerPage,
+    },
   },
   {
     key: 'qrCode',
@@ -54,6 +86,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'success',
     icon: QrCode,
     defaultVisible: true,
+    components: {
+      popup: QrCodePage,
+      sidepanel: QrCodePage,
+      tab: QrCodePage,
+    },
   },
   {
     key: 'textStatistics',
@@ -62,6 +99,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'secondary',
     icon: FileText,
     defaultVisible: true,
+    components: {
+      popup: TextStatisticsPage,
+      sidepanel: TextStatisticsPage,
+      tab: TextStatisticsPage,
+    },
   },
   {
     key: 'jwt',
@@ -70,6 +112,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'info',
     icon: Key,
     defaultVisible: true,
+    components: {
+      popup: JwtPage,
+      sidepanel: JwtPage,
+      tab: JwtPage,
+    },
   },
   {
     key: 'jsonTools',
@@ -78,6 +125,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'primary',
     icon: GitCompareArrows,
     defaultVisible: true,
+    components: {
+      popup: JsonToolsPage,
+      sidepanel: JsonToolsPage,
+      tab: JsonToolsPage,
+    },
   },
   {
     key: 'base64Converter',
@@ -86,6 +138,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'info',
     icon: ArrowLeftRight,
     defaultVisible: true,
+    components: {
+      popup: Base64ConverterPage,
+      sidepanel: Base64ConverterPage,
+      tab: Base64ConverterPage,
+    },
   },
   {
     key: 'rightClickRestorer',
@@ -94,6 +151,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'success',
     icon: MousePointerClick,
     defaultVisible: true,
+    components: {
+      popup: RightClickRestorerPage,
+      sidepanel: RightClickRestorerPage,
+      tab: RightClickRestorerPage,
+    },
   },
   {
     key: 'testDataGenerator',
@@ -102,6 +164,11 @@ export const FEATURES: FeatureConfig[] = [
     themeColorKey: 'warning',
     icon: FileSpreadsheet,
     defaultVisible: true,
+    components: {
+      popup: TestDataGeneratorPage,
+      sidepanel: TestDataGeneratorPage,
+      tab: TestDataGeneratorPage,
+    },
   },
 ];
 

src/config/pageLoaders/base64Converter.ts

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

src/config/pageLoaders/dashboard.ts

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

src/config/pageLoaders/index.ts

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

src/config/pageLoaders/jsonTools.ts

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

src/config/pageLoaders/jwt.ts

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

src/config/pageLoaders/qrCode.ts

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

src/config/pageLoaders/rightClickRestorer.ts

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

src/config/pageLoaders/storageCleaner.ts

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

src/config/pageLoaders/testDataGenerator.ts

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

src/config/pageLoaders/textStatistics.ts

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

src/config/pageLoaders/timestamp.ts

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

src/entrypoints/popup/App.tsx

@@ -25,7 +25,7 @@ export default function App() {
       visiblePagesKey={routerConfig.visiblePagesKey}
       pageOrderKey={routerConfig.pageOrderKey}
     >
-      <div className="flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
+      <div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
         <TopBar />
         <ErrorBoundary>
           <RouterContainer />

src/entrypoints/popup/main.tsx

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

src/entrypoints/sidepanel/App.tsx

@@ -15,7 +15,7 @@ export default function App() {
 
   return (
     <RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
-      <div className="flex flex-col h-screen w-full overflow-hidden">
+      <div className="app flex flex-col h-screen w-full overflow-hidden">
         <TopBar />
         <ErrorBoundary>
           <RouterContainer />

src/entrypoints/sidepanel/main.tsx

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

src/index.css

@@ -1,5 +1,3 @@
-@config "../../tailwind.shell.config.js";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -92,91 +90,3 @@
 ::-webkit-scrollbar {
   display: none;
 }
-
-@layer components {
-  .page-transition-dashboard {
-    @apply motion-reduce:transition-none;
-  }
-
-  .page-transition-enter {
-    @apply motion-reduce:transition-none;
-    animation: tt-page-enter 200ms ease-out;
-  }
-}
-
-@layer utilities {
-  .fade-in-150 {
-    animation: tt-fade-in 150ms ease-out forwards;
-  }
-
-  .fade-in-200 {
-    animation: tt-fade-in 200ms ease-out forwards;
-  }
-
-  .fade-in-300 {
-    animation: tt-fade-in 300ms ease-out forwards;
-  }
-
-  .fade-in-zoom-95 {
-    animation: tt-fade-in-zoom-95 150ms ease-out forwards;
-  }
-
-  .fade-in-slide-top-1 {
-    animation: tt-fade-in-slide-top-1 150ms ease-out forwards;
-  }
-
-  .fade-in-slide-top-2 {
-    animation: tt-fade-in-slide-top-2 150ms ease-out forwards;
-  }
-}
-
-@keyframes tt-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes tt-fade-in-zoom-95 {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes tt-fade-in-slide-top-1 {
-  from {
-    opacity: 0;
-    transform: translateY(-0.25rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes tt-fade-in-slide-top-2 {
-  from {
-    opacity: 0;
-    transform: translateY(-0.5rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes tt-page-enter {
-  from {
-    opacity: 0.92;
-  }
-  to {
-    opacity: 1;
-  }
-}

src/layout/TopBar/SearchDropdown.tsx

@@ -16,16 +16,16 @@ export default function SearchDropdown({
   selectedIndex,
   onSelect,
 }: SearchDropdownProps) {
-  const isSearching = !!searchQuery.trim();
+  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 fade-in-slide-top-2">
+    <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 && (
-          <li className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <div className="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
             最近搜索
-          </li>
+          </div>
         )}
         {isSearching && items.length === 0 ? (
           <li className="px-4 py-6 text-center text-sm text-muted-foreground">未找到相关工具</li>

src/layout/TopBar/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type RefObject } from 'react';
+import { type RefObject } from 'react';
 import { Search, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -9,7 +9,7 @@ interface SearchInputProps {
   searchQuery: string;
   onSearchQueryChange: (value: string) => void;
   onFocus: () => void;
-  onKeyDown: (e: KeyboardEvent) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
   onClear: () => void;
 }
 
@@ -26,6 +26,7 @@ export default function SearchInput({
       <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)}
@@ -34,7 +35,12 @@ export default function SearchInput({
         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 ? (
+      {!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"
@@ -45,10 +51,6 @@ export default function SearchInput({
         >
           <X className="h-3 w-3" />
         </Button>
-      ) : (
-        <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 items-center rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground/60 sm:inline-flex">
-          {getSearchShortcutLabel()}
-        </kbd>
       )}
     </div>
   );

src/layout/TopBar/index.tsx

@@ -33,7 +33,9 @@ export default function TopBar() {
       id: 'open-in-tab',
       icon: ExternalLink,
       title: '在标签页打开',
-      onClick: () => void handleOpenInTab(),
+      onClick: () => {
+        void handleOpenInTab();
+      },
     },
   ];
 

src/layout/TopBar/useTopBar.ts

@@ -1,11 +1,4 @@
-import {
+import { useEffect, useMemo, useRef, useState, type RefObject } from 'react';
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent as ReactKeyboardEvent,
-  type RefObject,
-} from 'react';
 import { Monitor, Moon, Sun } from 'lucide-react';
 import { useRouter } from '@/providers/RouterProvider';
 import { useThemeMode } from '@/providers/ThemeModeProvider';
@@ -28,7 +21,7 @@ export interface UseTopBarReturn {
   handleSearchQueryChange: (value: string) => void;
   handleSearchFocus: () => void;
   handleSelectFeature: (feature: FeatureConfig) => void;
-  handleKeyDown: (e: ReactKeyboardEvent) => void;
+  handleKeyDown: (e: React.KeyboardEvent) => void;
   cycleThemeMode: () => void;
   handleOpenInTab: () => Promise<void>;
   goHome: () => void;
@@ -87,7 +80,7 @@ export function useTopBar(): UseTopBarReturn {
     });
   }, [searchQuery]);
 
-  const recentFeatures = useMemo(() => {
+  const displayedHistory = useMemo(() => {
     if (searchQuery.trim()) return [];
     return searchHistory
       .slice(0, SEARCH_HISTORY_DISPLAY)
@@ -118,10 +111,8 @@ export function useTopBar(): UseTopBarReturn {
   const themeTitle =
     mode === 'light' ? '切换到深色模式' : mode === 'dark' ? '切换到系统模式' : '切换到浅色模式';
 
-  const handleKeyDown = (e: ReactKeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
-    const isSearching = !!searchQuery.trim();
+    const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
-    const items = isSearching ? searchResults : recentFeatures;
-    const totalItems = items.length;
 
     if (e.key === 'ArrowDown') {
       e.preventDefault();
@@ -131,12 +122,13 @@ export function useTopBar(): UseTopBarReturn {
       setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
     } else if (e.key === 'Enter') {
       e.preventDefault();
-      let feature: FeatureConfig | undefined;
+      const items = searchQuery.trim() ? searchResults : displayedHistory;
-      if (selectedIndex >= 0 && selectedIndex < totalItems) {
+      const feature =
-        feature = items[selectedIndex];
+        selectedIndex >= 0 && selectedIndex < totalItems
-      } else if (isSearching && searchResults.length > 0) {
+          ? items[selectedIndex]
-        feature = searchResults[0];
+          : searchQuery.trim() && searchResults.length > 0
-      }
+            ? searchResults[0]
+            : undefined;
       if (feature) handleSelectFeature(feature);
     } else if (e.key === 'Escape') {
       setShowResults(false);
@@ -157,12 +149,13 @@ export function useTopBar(): UseTopBarReturn {
 
   const handleSearchFocus = () => setShowResults(true);
 
-  const showDropdown = showResults && (!!searchQuery.trim() || recentFeatures.length > 0);
+  const showDropdown =
+    showResults && (searchQuery.trim().length > 0 || displayedHistory.length > 0);
 
   return {
     searchQuery,
     searchResults,
-    recentFeatures,
+    recentFeatures: displayedHistory,
     selectedIndex,
     showDropdown,
     isDashboard: currentPage === 'dashboard',

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs);
+  return twMerge(clsx(inputs));
 }

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

@@ -22,9 +22,7 @@ vi.mock('../components/TextMode', () => ({
 }));
 
 vi.mock('../components/Base64ConverterSection', () => ({
-  default: ({ mode }: { mode: 'file' | 'image' }) => (
+  default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
-    <div data-testid={`${mode}-mode`}>{mode.toUpperCase()} Mode</div>
-  ),
 }));
 
 const waitForStorageInit = () =>

src/pages/Base64Converter/components/Base64ConverterSection.tsx

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

src/pages/Dashboard/index.tsx

@@ -1,10 +1,11 @@
+import { cn } from '@/lib/utils';
 import { useDashboard } from './useDashboard';
 
 export default function Index() {
   const { visibleFeatures, recentFeatures, showRecent, navigateTo } = useDashboard();
 
   return (
-    <div className="flex flex-col gap-4 p-3.5 w-full h-auto select-none">
+    <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">
@@ -18,7 +19,12 @@ export default function Index() {
                   key={key}
                   type="button"
                   onClick={() => navigateTo(key)}
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border border-border/60 bg-card text-card-foreground hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
+                  className={cn(
+                    'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium',
+                    'border border-border/60 bg-card text-card-foreground',
+                    'hover:bg-muted/40 hover:border-primary/30',
+                    'transition-colors cursor-pointer',
+                  )}
                 >
                   <IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
                   {feature.label}
@@ -36,7 +42,9 @@ export default function Index() {
         {visibleFeatures.length === 0 ? (
           <p className="text-sm text-muted-foreground py-4 text-center">没有可用的工具</p>
         ) : (
-          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
+          <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 (
@@ -44,9 +52,20 @@ export default function Index() {
                   key={key}
                   type="button"
                   onClick={() => navigateTo(key)}
-                  className="group flex flex-col items-center justify-center gap-1.5 py-3 px-2 rounded-xl border border-border/50 bg-card hover:bg-muted/40 hover:border-primary/30 transition-colors cursor-pointer"
+                  className={cn(
+                    'group flex flex-col items-center justify-center gap-1.5',
+                    'py-3 px-2 rounded-xl border border-border/50 bg-card',
+                    'hover:bg-muted/40 hover:border-primary/30',
+                    'transition-colors cursor-pointer',
+                  )}
                 >
-                  <IconComponent className="h-5 w-5 text-muted-foreground/70 group-hover:text-foreground transition-colors" />
+                  <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>

src/pages/QrCode/components/QrCodePreview.tsx

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

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

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

src/pages/StorageCleaner/useStorageCleaner.ts

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

src/pages/TestDataGenerator/components/FieldList.tsx

@@ -286,7 +286,7 @@ export default function FieldList({
                 onClick={handleUpdateRule}
                 disabled={fields.length === 0}
                 className="h-8 gap-1.5 px-2.5"
-                title={editingRule ? `编辑中: ${editingRule.name}` : ''}
+                title={`编辑中: ${editingRule.name}`}
               >
                 <Save className="h-3.5 w-3.5" />
                 更新规则

src/pages/TestDataGenerator/components/GenerateButton.tsx

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

src/pages/TestDataGenerator/components/ResultPanel.tsx

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

src/pages/TestDataGenerator/components/RuleManager.tsx

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

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

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

src/pages/TestDataGenerator/hooks/useGenerator.ts

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

src/providers/RouterProvider.tsx

@@ -110,19 +110,13 @@ export function RouterProvider({
 
   const loadInitialData = useCallback(async () => {
     try {
-      const stored = await storageUtil.getMany([
+      const savedRoute = await storageUtil.get(syncKey, defaultRoute);
-        syncKey,
+      const savedVisiblePages = await storageUtil.get(
         visiblePagesKey,
-        pageOrderKey,
+        getDefaultVisibleFeatureKeys(),
-        'app/recentlyUsedTools',
+      );
-        'contextMenu/pendingData',
+      const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
-      ]);
+      const savedRecentTools = await storageUtil.get('app/recentlyUsedTools', []);
-
-      const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
-      const savedVisiblePages = (stored[visiblePagesKey] ??
-        getDefaultVisibleFeatureKeys()) as PageType[];
-      const savedPageOrder = (stored[pageOrderKey] ?? getDefaultPageOrder()) as PageType[];
-      const savedRecentTools = (stored['app/recentlyUsedTools'] ?? []) as PageType[];
 
       if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
         setCurrentPage(savedRoute);
@@ -137,11 +131,8 @@ export function RouterProvider({
         setRecentlyUsedTools(savedRecentTools);
       }
       canPersistRef.current = true;
-
-      return stored['contextMenu/pendingData'];
     } catch (error) {
       console.error('[Router Init Error] Core data fetch failed:', error);
-      return undefined;
     } finally {
       setIsLoaded(true);
     }
@@ -152,7 +143,7 @@ export function RouterProvider({
 
     // eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
     loadInitialData()
-      .then((pendingData) => {
+      .then(() => {
         if (cancelled) return;
 
         if (typeof window !== 'undefined') {
@@ -174,6 +165,9 @@ export function RouterProvider({
           }
         }
 
+        storageUtil
+          .get('contextMenu/pendingData')
+          .then((pendingData) => {
             if (
               pendingData &&
               isValidPage(pendingData.featureKey) &&
@@ -183,6 +177,8 @@ export function RouterProvider({
             }
           })
           .catch(console.error);
+      })
+      .catch(console.error);
 
     return () => {
       cancelled = true;

src/providers/ThemeModeProvider.tsx

@@ -13,7 +13,6 @@ import { storageUtil } from '@/utils/chromeStorage';
 import {
   applyResolvedThemeClass,
   getThemeSyncSnapshot,
-  hasThemeSyncSnapshot,
   isValidThemeMode,
   persistThemeModeSnapshot,
   resolveThemeMode,
@@ -69,10 +68,6 @@ export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
   );
 
   useEffect(() => {
-    if (hasThemeSyncSnapshot()) {
-      return;
-    }
-
     let cancelled = false;
 
     storageUtil

src/providers/__tests__/RouterProvider.test.tsx

@@ -7,24 +7,10 @@ import { storageUtil } from '@/utils/chromeStorage';
 vi.mock('@/utils/chromeStorage', () => ({
   storageUtil: {
     get: vi.fn(),
-    getMany: vi.fn(),
     set: vi.fn(() => Promise.resolve()),
   },
 }));
 
-/** 模拟批量 storage 读取，未指定的键由 Router 侧使用默认值 */
-function mockStorageBatch(map: Record<string, unknown> = {}) {
-  (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation((keys: string[]) => {
-    const result: Record<string, unknown> = {};
-    for (const key of keys) {
-      if (key in map) {
-        result[key] = map[key];
-      }
-    }
-    return Promise.resolve(result);
-  });
-}
-
 const TestComponent = () => {
   const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
   return (
@@ -60,7 +46,9 @@ describe('RouterProvider', () => {
   });
 
   it('应该使用默认值初始化路由', async () => {
-    mockStorageBatch();
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
+      Promise.resolve(defaultValue),
+    );
 
     render(
       <RouterProvider defaultRoute="dashboard">
@@ -71,18 +59,13 @@ describe('RouterProvider', () => {
     await waitFor(() => {
       expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
     });
-
-    expect(storageUtil.getMany).toHaveBeenCalledWith([
-      'app/currentRoute',
-      'app/visiblePages',
-      'app/pageOrder',
-      'app/recentlyUsedTools',
-      'contextMenu/pendingData',
-    ]);
   });
 
   it('应该从指定的 syncKey 加载路由', async () => {
-    mockStorageBatch({ 'app/sidepanelRoute': 'timestamp' });
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
+      if (key === 'app/sidepanelRoute') return Promise.resolve('timestamp');
+      return Promise.resolve(defaultValue);
+    });
 
     render(
       <RouterProvider syncKey="app/sidepanelRoute">
@@ -96,7 +79,9 @@ describe('RouterProvider', () => {
   });
 
   it('导航时应该更新指定的 syncKey', async () => {
-    mockStorageBatch();
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
+      Promise.resolve(defaultValue),
+    );
 
     render(
       <RouterProvider syncKey="app/popupRoute">
@@ -119,7 +104,10 @@ describe('RouterProvider', () => {
   });
 
   it('应该支持独立的标签页路由同步', async () => {
-    mockStorageBatch({ 'app/tabRoute': 'qrCode' });
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
+      if (key === 'app/tabRoute') return Promise.resolve('qrCode');
+      return Promise.resolve(defaultValue);
+    });
 
     render(
       <RouterProvider syncKey="app/tabRoute">
@@ -133,9 +121,11 @@ describe('RouterProvider', () => {
   });
 
   it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
-    mockStorageBatch({
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      'app/sidepanelVisiblePages': ['timestamp', 'storageCleaner'],
+      if (key === 'app/sidepanelVisiblePages')
-      'app/sidepanelPageOrder': ['storageCleaner', 'timestamp'],
+        return Promise.resolve(['timestamp', 'storageCleaner']);
+      if (key === 'app/sidepanelPageOrder') return Promise.resolve(['storageCleaner', 'timestamp']);
+      return Promise.resolve(defaultValue);
     });
 
     render(
@@ -177,9 +167,10 @@ describe('RouterProvider', () => {
       'jsonTools',
     ];
 
-    mockStorageBatch({
+    (storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
-      'app/popupVisiblePages': oldVisiblePages,
+      if (key === 'app/popupVisiblePages') return Promise.resolve(oldVisiblePages);
-      'app/popupPageOrder': oldPageOrder,
+      if (key === 'app/popupPageOrder') return Promise.resolve(oldPageOrder);
+      return Promise.resolve(defaultValue);
     });
 
     render(
@@ -218,7 +209,9 @@ describe('RouterProvider', () => {
     localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
     localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));
 
-    mockStorageBatch();
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
+      Promise.resolve(defaultValue),
+    );
 
     render(
       <RouterProvider>
@@ -233,7 +226,9 @@ describe('RouterProvider', () => {
   });
 
   it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
-    mockStorageBatch();
+    (storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
+      Promise.resolve(defaultValue),
+    );
 
     render(
       <RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
@@ -304,9 +299,9 @@ describe('RouterProvider', () => {
       resolveGet = resolve;
     });
 
-    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
+    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
       await getBlocked;
-      return Object.fromEntries(storage.entries());
+      return storage.get(key) ?? defaultValue;
     });
     (storageUtil.set as any).mockImplementation(async (key: string, value: unknown) => {
       storage.set(key, value);
@@ -329,9 +324,7 @@ describe('RouterProvider', () => {
   });
 
   it('初始化失败时仍应解除加载状态以便渲染页面', async () => {
-    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockRejectedValue(
+    (storageUtil.get as any).mockRejectedValue(new Error('Storage unavailable'));
-      new Error('Storage unavailable'),
-    );
 
     render(
       <RouterProvider>
@@ -351,9 +344,10 @@ describe('RouterProvider', () => {
       resolveGet = resolve;
     });
 
-    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(async () => {
+    (storageUtil.get as any).mockImplementation(async (key: string, defaultValue: unknown) => {
       await getBlocked;
-      return { 'app/currentRoute': 'dashboard' };
+      if (key === 'app/currentRoute') return 'dashboard';
+      return defaultValue;
     });
 
     render(
@@ -380,7 +374,7 @@ describe('RouterProvider', () => {
       resolveStorage = resolve;
     });
 
-    (storageUtil.getMany as ReturnType<typeof vi.fn>).mockImplementation(() => storagePromise);
+    (storageUtil.get as any).mockImplementation(() => storagePromise);
 
     const { unmount } = render(
       <RouterProvider>
@@ -389,7 +383,7 @@ describe('RouterProvider', () => {
     );
 
     unmount();
-    resolveStorage!({});
+    resolveStorage!('dashboard');
 
     await act(async () => {
       await new Promise((resolve) => setTimeout(resolve, 50));

src/providers/__tests__/ThemeModeProvider.test.tsx

@@ -46,7 +46,6 @@ describe('ThemeModeProvider', () => {
     expect(screen.getByTestId('mode')).toHaveTextContent('dark');
     expect(screen.getByTestId('resolved-mode')).toHaveTextContent('dark');
     expect(document.documentElement.classList.contains('dark')).toBe(true);
-    expect(storageUtil.get).not.toHaveBeenCalled();
   });
 
   it('异步恢复 storage 后应写回 snapshot', async () => {

src/styles/pages.css

@@ -1,3 +0,0 @@
-@config "../../tailwind.pages.config.js";
-
-@tailwind utilities;

src/types/README.md

@@ -39,9 +39,7 @@
 - `FieldConfig` — 字段配置（字段名、生成器、参数、必填、空值率、唯一性）
 - `DataRule` — 可保存/导入/导出的字段规则
 - `GeneratorDefinition` / `GeneratorParam` — 内置生成器定义和参数 Schema
-- `GenerateResult` / `GenerateProgress` — Worker 生成结果与进度
+- `GenerateResult` / `GenerateProgress` / `WorkerMessage` — Worker 生成结果、进度和消息协议
-- `WorkerRequestMessage` / `WorkerResponseMessage` — Worker 消息协议；每条响应携带 `generationId`，用于忽略过期任务（取消或快速重试时）
-- `WorkerMessage` — 已废弃，请使用上述两种消息类型
 - `ExportFile` — JSON/CSV 导出文件描述
 
 ## 修改 StorageSchema 的注意事项

src/types/css.d.ts

@@ -1,4 +0,0 @@
-declare module '*.css' {
-  const css: string;
-  export default css;
-}

src/utils/README.md

@@ -24,7 +24,7 @@
 | `textStatistics.ts`      | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
 | `format.ts`              | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
 | `dayjs.ts`               | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
-| `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制（见下方说明）        |
+| `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制                      |
 | `dataExporter.ts`        | 测试数据导出：JSON/CSV 转换、文件下载和复制到剪贴板                                                 |
 | `rightClickInjection.ts` | 右键恢复注入脚本：在页面上下文恢复 contextmenu/copy/paste 等事件默认行为                            |
 
@@ -36,23 +36,6 @@
 | `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
 | `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |
 
-### ruleStorage 写入失败处理
-
-`ruleStorage.ts` 使用函数式导出（非 class），存储键为 `testDataGenerator_rules`，最多 `MAX_RULES = 20` 条。
-
-写入经内部 `setAll()` 完成；`localStorage.setItem` 抛错（如配额超限）时返回 `false`，并 `console.error`，**不会部分提交**：
-
-| 方法           | 写入失败返回值               | 常见失败原因                                           |
-| -------------- | ---------------------------- | ------------------------------------------------------ |
-| `save()`       | `null`                       | 达上限、规则不存在（更新时）、`setItem` 异常           |
-| `update()`     | `null`                       | 规则不存在、`setItem` 异常                             |
-| `deleteRule()` | `false`                      | 规则不存在、`setItem` 异常                             |
-| `duplicate()`  | 仍可能返回对象但数据未持久化 | 见源码：`duplicate` 未检查 `setAll` 返回值（已知缺口） |
-
-调用方应检查返回值后再展示成功 Toast。页面层参考 `FieldList.tsx`：`save`/`update` 返回非空才提示「规则已保存/已更新」。
-
-规则仅持久化 `name`、`description`、`fields` 及时间戳/使用统计；生成数量与导出格式由页面状态管理，不写入规则。
-
 ### useStorageState 初始化防覆盖
 
 `useStorageState` 在挂载时从 storage 异步加载。写入 storage 需满足以下任一条件：

src/utils/__tests__/chromeStorage.test.ts

@@ -75,27 +75,6 @@ describe('chromeStorage', () => {
     });
   });
 
-  describe('getMany', () => {
-    it('应该一次读取多个键', async () => {
-      (chrome.storage.local.get as any).mockResolvedValue({
-        'app/theme': 'dark',
-        'app/popupRoute': 'timestamp',
-      });
-
-      const result = await storageUtil.getMany(['app/theme', 'app/popupRoute']);
-
-      expect(result).toEqual({ 'app/theme': 'dark', 'app/popupRoute': 'timestamp' });
-      expect(chrome.storage.local.get).toHaveBeenCalledWith(['app/theme', 'app/popupRoute']);
-    });
-
-    it('空键数组应直接返回空对象', async () => {
-      const result = await storageUtil.getMany([]);
-
-      expect(result).toEqual({});
-      expect(chrome.storage.local.get).not.toHaveBeenCalled();
-    });
-  });
-
   describe('get 类型签名', () => {
     it('无默认值时应推断为可选返回类型', () => {
       const _getWithoutDefault = () => storageUtil.get('app/theme');

src/utils/__tests__/useStorageState.test.ts

@@ -40,7 +40,6 @@ describe('useStorageState', () => {
 
     // 初始值应从快照恢复，而非默认值
     expect(result.current[0]).toBe(false);
-    expect(storageUtil.get).not.toHaveBeenCalled();
   });
 
   it('应该从 Chrome Storage 异步加载并覆盖初始值', async () => {
@@ -180,6 +179,5 @@ describe('useStorageState', () => {
     await waitFor(() => {
       expect(storageUtil.set).not.toHaveBeenCalled();
     });
-    expect(storageUtil.get).not.toHaveBeenCalled();
   });
 });

src/utils/chromeStorage.ts

@@ -18,26 +18,13 @@ class StorageUtils {
     key: K,
     defaultValue?: StorageSchema[K],
   ): Promise<StorageSchema[K] | undefined> {
-    const result = await this.getMany([key]);
+    const result = await chrome.storage.local.get([key]);
     if (defaultValue !== undefined) {
       return (result[key] ?? defaultValue) as StorageSchema[K];
     }
     return result[key] as StorageSchema[K] | undefined;
   }
 
-  /**
-   * 批量获取多个键（单次 IPC）
-   */
-  async getMany<K extends keyof StorageSchema>(
-    keys: readonly K[],
-  ): Promise<Partial<Pick<StorageSchema, K>>> {
-    if (keys.length === 0) {
-      return {};
-    }
-    const result = await chrome.storage.local.get([...keys]);
-    return result as Partial<Pick<StorageSchema, K>>;
-  }
-
   /**
    * 设置值
    * @param key

src/utils/syncSnapshot.ts

@@ -1,14 +1,3 @@
-/**
- * 检查 localStorage 中是否存在指定键的快照
- */
-export function hasSyncSnapshot(key: string): boolean {
-  try {
-    return localStorage.getItem(`snapshot/${key}`) !== null;
-  } catch {
-    return false;
-  }
-}
-
 /**
  * 从 localStorage 获取同步快照（用于消除异步加载产生的首屏闪烁）
  */

src/utils/themeSnapshot.ts

@@ -9,15 +9,6 @@ const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
 export const isValidThemeMode = (value: unknown): value is ThemeMode =>
   VALID_MODES.includes(value as ThemeMode);
 
-/** 检查 localStorage 中是否存在主题快照 */
-export const hasThemeSyncSnapshot = (): boolean => {
-  try {
-    return localStorage.getItem(THEME_MODE_SNAPSHOT_KEY) !== null;
-  } catch {
-    return false;
-  }
-};
-
 /**
  * 同步读取 localStorage 快照（首屏防闪烁）
  */

src/utils/useStorageState.ts

@@ -7,7 +7,7 @@ import {
   type SetStateAction,
 } from 'react';
 import { storageUtil } from '@/utils/chromeStorage';
-import { getSyncSnapshot, hasSyncSnapshot } from '@/utils/syncSnapshot';
+import { getSyncSnapshot } from '@/utils/syncSnapshot';
 import type { StorageSchema } from '@/types/storage';
 
 export const useStorageState = <K extends keyof StorageSchema>(
@@ -34,14 +34,6 @@ export const useStorageState = <K extends keyof StorageSchema>(
     let cancelled = false;
 
     const loadState = async () => {
-      if (hasSyncSnapshot(key as string)) {
-        if (!cancelled) {
-          setIsInitialized(true);
-          hasLoadedFromStorage.current = true;
-        }
-        return;
-      }
-
       try {
         const savedValue = await storageUtil.get(key, defaultValue);
         if (cancelled) return;

src/workers/generator.worker.ts

@@ -14,14 +14,10 @@ import type {
 /** 每生成 N 行让出一次事件循环，以便处理 cancel 消息 */
 const YIELD_EVERY = 100;
 
-/** 当前活跃生成任务 ID；新 start 会 supersede 旧任务 */
+// 生成结果缓存
-let activeGenerationId: number | null = null;
+let generatedData: Record<string, unknown>[] = [];
 let isCancelled = false;
 
-function shouldAbort(generationId: number): boolean {
-  return isCancelled || generationId !== activeGenerationId;
-}
-
 /**
  * Worker 消息处理器
  */
@@ -31,17 +27,12 @@ self.onmessage = async (e: MessageEvent<WorkerRequestMessage>) => {
 
   switch (type) {
     case 'start':
-      activeGenerationId = data.payload.generationId;
       isCancelled = false;
       await handleStart(data.payload);
       break;
     case 'cancel':
       isCancelled = true;
       break;
-    default: {
-      const _exhaustive: never = type;
-      return _exhaustive;
-    }
   }
 };
 
@@ -55,7 +46,7 @@ async function handleStart(payload: {
   csvMode: boolean;
 }): Promise<void> {
   const { generationId, fields, count } = payload;
-  const generatedData: Record<string, unknown>[] = [];
+  generatedData = [];
 
   try {
     // 验证所有生成器是否存在
@@ -76,8 +67,7 @@ async function handleStart(payload: {
 
     // 生成数据
     for (let i = 0; i < count; i++) {
-      if (shouldAbort(generationId)) {
+      if (isCancelled) {
-        if (generationId === activeGenerationId) {
         self.postMessage({
           type: 'complete',
           generationId,
@@ -86,7 +76,6 @@ async function handleStart(payload: {
             error: '生成已取消',
           },
         });
-        }
         return;
       }
 
@@ -159,8 +148,7 @@ async function handleStart(payload: {
       // 定期让出事件循环，使 cancel 消息能被处理
       if ((i + 1) % YIELD_EVERY === 0) {
         await new Promise<void>((resolve) => setTimeout(resolve, 0));
-        if (shouldAbort(generationId)) {
+        if (isCancelled) {
-          if (generationId === activeGenerationId) {
           self.postMessage({
             type: 'complete',
             generationId,
@@ -169,16 +157,11 @@ async function handleStart(payload: {
               error: '生成已取消',
             },
           });
-          }
           return;
         }
       }
     }
 
-    if (shouldAbort(generationId)) {
-      return;
-    }
-
     const duration = Date.now() - startTime;
     const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
 

tailwind.config.js

@@ -1 +1,34 @@
-export { default } from './tailwind.shell.config.js';
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./entrypoints/**/*.{js,ts,jsx,tsx}', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: 'hsl(var(--card))',
+        'card-foreground': 'hsl(var(--card-foreground))',
+        popover: 'hsl(var(--popover))',
+        'popover-foreground': 'hsl(var(--popover-foreground))',
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        secondary: 'hsl(var(--secondary))',
+        'secondary-foreground': 'hsl(var(--secondary-foreground))',
+        muted: 'hsl(var(--muted))',
+        'muted-foreground': 'hsl(var(--muted-foreground))',
+        accent: 'hsl(var(--accent))',
+        'accent-foreground': 'hsl(var(--accent-foreground))',
+        destructive: 'hsl(var(--destructive))',
+        'destructive-foreground': 'hsl(var(--destructive-foreground))',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: {
+        DEFAULT: 'var(--radius)',
+      },
+    },
+  },
+  plugins: [],
+};

tailwind.pages.config.js

@@ -1,22 +0,0 @@
-import { sharedTheme } from './tailwind.shared.js';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx}',
-    './src/components/CopyButton.tsx',
-    './src/components/TextInputArea.tsx',
-    './src/components/SwitchButtonGroup.tsx',
-    './src/components/EmptyPlaceholder.tsx',
-    './src/components/ui/badge.tsx',
-    './src/components/ui/checkbox.tsx',
-    './src/components/ui/dialog.tsx',
-    './src/components/ui/label.tsx',
-    './src/components/ui/select.tsx',
-    './src/components/ui/switch.tsx',
-    './src/styles/pages.css',
-  ],
-  theme: sharedTheme,
-  plugins: [],
-};

tailwind.shared.js

@@ -1,29 +0,0 @@
-/** @type {import('tailwindcss').Config['theme']} */
-export const sharedTheme = {
-  extend: {
-    colors: {
-      background: 'hsl(var(--background))',
-      foreground: 'hsl(var(--foreground))',
-      card: 'hsl(var(--card))',
-      'card-foreground': 'hsl(var(--card-foreground))',
-      popover: 'hsl(var(--popover))',
-      'popover-foreground': 'hsl(var(--popover-foreground))',
-      primary: 'hsl(var(--primary))',
-      'primary-foreground': 'hsl(var(--primary-foreground))',
-      secondary: 'hsl(var(--secondary))',
-      'secondary-foreground': 'hsl(var(--secondary-foreground))',
-      muted: 'hsl(var(--muted))',
-      'muted-foreground': 'hsl(var(--muted-foreground))',
-      accent: 'hsl(var(--accent))',
-      'accent-foreground': 'hsl(var(--accent-foreground))',
-      destructive: 'hsl(var(--destructive))',
-      'destructive-foreground': 'hsl(var(--destructive-foreground))',
-      border: 'hsl(var(--border))',
-      input: 'hsl(var(--input))',
-      ring: 'hsl(var(--ring))',
-    },
-    borderRadius: {
-      DEFAULT: 'var(--radius)',
-    },
-  },
-};

tailwind.shell.config.js

@@ -1,22 +0,0 @@
-import { sharedTheme } from './tailwind.shared.js';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [
-    './src/entrypoints/**/*.{js,ts,jsx,tsx}',
-    './src/layout/**/*.{js,ts,jsx,tsx}',
-    './src/providers/**/*.{js,ts,jsx,tsx}',
-    './src/components/RouterContainer.tsx',
-    './src/components/ErrorBoundary.tsx',
-    './src/components/ErrorFallback.tsx',
-    './src/components/PageErrorBoundary.tsx',
-    './src/components/PageSkeleton.tsx',
-    './src/components/ui/button.tsx',
-    './src/components/ui/input.tsx',
-    './src/components/ui/sonner.tsx',
-    './src/styles/shell.css',
-  ],
-  theme: sharedTheme,
-  plugins: [],
-};

wxt.config.ts

@@ -22,10 +22,14 @@ function manualChunksForHtmlOnly(): Plugin {
           ) {
             return 'vendor-react';
           }
-
+          // 二维码活态感知依赖分流
-          // qrious / qr-scanner / @dnd-kit 不单独拆 vendor chunk：
+          if (id.includes('qr-scanner') || id.includes('qrious')) {
-          // 独立 vendor 会与 Vite preload 辅助函数共 chunk，被 App Shell 静态拉取。
+            return 'vendor-qr';
-          // 这些依赖随各自页面 async chunk 加载即可。
+          }
+          // 拖拽排序高级组件分流
+          if (id.includes('@dnd-kit')) {
+            return 'vendor-dnd';
+          }
 
           return undefined;
         },
@@ -73,7 +77,6 @@ export default defineConfig({
   vite: () => ({
     plugins: [manualChunksForHtmlOnly()],
     build: {
-      modulePreload: false,
       minify: 'terser',
       terserOptions: {
         format: { ascii_only: true, comments: false },