fix(hooks): pre-push 无 upstream 时回退到 origin/main 对比

- contextMenu: srcUrl 检查限定为 qrCode-image 菜单项，避免其他菜单误返回图片 URL
- pre-push: eslint 改为只检查变更文件（git diff 过滤），tsc 保留全项目检查
- useQrCode: confirmGenerate 用 setTimeout 延迟生成，让 loading 状态先被 React 渲染
- tests: 生成相关测试改为 async + waitFor 适配异步 confirmGenerate

.github/CODING_STANDARDS.md

@@ -285,7 +285,8 @@ import { useThemeMode } from '@/providers/ThemeModeProvider';
 import { FeatureConfig, FEATURES } from '@/config/features';
 import { storageUtil } from '@/utils/chromeStorage';
 // 5. i18n
-import { useI18n } from '@/utils/chromeI18n';
+import { useTranslation } from 'react-i18next';
+import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
 // 6. 本地组件
 import TextMode from './TextMode';
 import { ZONES } from './constants';
@@ -294,7 +295,7 @@ import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { Button } from '@/components/ui/button';
 // 8. 工具函数 / Hook
 import { cn } from '@/lib/utils';
-import { useStorageState } from '@/utils/useStorageState';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 // 9. 类型
 import type { PageType, StorageSchema } from '@/types/storage';
 ```
@@ -400,22 +401,22 @@ className={cn(
 
 ## 5. 错误处理
 
-### 5.1 工具函数：可恢复错误返回可判断结果
+### 5.1 工具函数：结果对象模式
 
-可恢复的解析/校验错误应返回可判断的结果，避免工具层直接弹 Toast。确需保留底层异常的函数
+工具函数**不抛异常**，返回包含 `hasError` 和 `error` 字段的结果对象：
-（如 `formatJson` / `minifyJson`）必须在页面 Hook 或 UI 层捕获并转换为用户提示：
 
 ```typescript
-// ✅ 可恢复校验返回错误消息，调用方据此展示 UI
+// ✅ 结果对象模式
-export function validateJson(text: string): string | null {
+export function markdownToHtml(markdown: string): MarkdownToHtmlResult {
-  if (!text.trim()) {
-    return null;
-  }
   try {
-    JSON.parse(text.trim());
+    ...
-    return null;
+    return { html, originalLength, htmlLength, hasError: false };
-  } catch (e) {
+  } catch (error) {
-    return e instanceof SyntaxError ? e.message : 'Invalid JSON';
+    return {
+      html: '', ...
+      hasError: true,
+      error: error instanceof Error ? error.message : 'Markdown 解析失败',
+    };
   }
 }
 ```
@@ -657,7 +658,7 @@ export function useTimestampConverter(): UseTimestampConverterReturn { ... }
 
 ```
 src/utils/useStorageState.ts          — Chrome Storage 状态持久化
-src/utils/chromeI18n.ts               — chrome.i18n wrapper 与 useI18n
+src/utils/useLazyTranslation.ts       — i18n 懒加载
 src/utils/useContextMenuData.ts       — 右键菜单数据
 src/utils/useDebounce.ts              — 防抖
 src/pages/Timestamp/useTimestampConverter.ts    — 页面级 Hook
@@ -670,48 +671,43 @@ src/pages/StorageCleaner/useStorageCleaner.ts  — 页面级 Hook
 
 ### 9.1 翻译键格式
 
-- 使用 Chrome 扩展标准的 `chrome.i18n`，通过 `src/utils/chromeI18n.ts` 暴露 `useI18n`
+- 命名空间：`common`（默认）、`features`
-- 翻译 key 存放在 `public/_locales/zh_CN/messages.json`
+- 翻译键格式：`namespace:key`（如 `features:timestamp.title`）
-- 直接 key：`t('dashboard_title')` → 查找 `dashboard_title`
+- 语言：`zh`（默认）、`en`
-- 命名空间兼容写法：`t('common:buttons.search')` → 查找 `common_buttons_search`
-- 命名空间参数：`useI18n(['common', 'features'])` 会尝试 `common_key`、`features_key`
 
 ### 9.2 翻译文件结构
 
 ```
-public/_locales/zh_CN/messages.json        — Chrome 扩展默认语言包
+i18n/locales/{zh,en}/common.json           — 全局通用翻译
-wxt.config.ts                              — manifest.default_locale = 'zh_CN'
+i18n/locales/{zh,en}/features.json         — 功能模块标题和描述
+i18n/locales/{zh,en}/{功能名}.json         — 各功能独立翻译
 ```
 
 ### 9.3 使用方式
 
 ```typescript
-// ✅ 页面组件 / 子组件 — 使用 useI18n
+// ✅ 页面组件 — 使用 useLazyTranslation
-import { useI18n } from '@/utils/chromeI18n';
+import { useLazyTranslation } from '@/utils/useLazyTranslation';
 
 export default function Index() {
-  const { t } = useI18n('timestamp');
+  const { t } = useLazyTranslation('timestamp');
-  return <h1>{t('timestamp_title')}</h1>;
+  return <h1>{t('timestamp:title')}</h1>;
 }
 
-// ✅ 带占位符
+// ✅ 全局组件 — 使用 useTranslation
-export function NotFoundMessage() {
+import { useTranslation } from 'react-i18next';
-  const { t } = useI18n('router');
+
-  return <p>{t('router_notFoundDescription', { entryPointType: 'popup' })}</p>;
+export function TopBar() {
+  const { t } = useTranslation(['common', 'features']);
+  return <span>{t('common:settings')}</span>;
 }
 ```
 
 ### 9.4 添加新翻译
 
-1. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome 扩展格式的消息：
+1. 在 `i18n/locales/{zh,en}/features.json` 添加功能标题和描述
-   ```json
+2. 创建 `i18n/locales/{zh,en}/{功能名}.json` 添加功能专属翻译
-   {
+3. 在 `utils/useLazyTranslation.ts` 的 `localeModules` 中注册新命名空间
-     "feature_title": { "message": "功能标题" },
-     "feature_description": { "message": "功能描述" }
-   }
-   ```
-2. key 使用下划线分隔，避免点号；`useI18n` 会把 `namespace:key.path` 兼容转换为下划线
-3. `chrome.i18n` 不支持运行时动态切换语言，浏览器语言变化后需要刷新扩展页面
 
 ---
 
@@ -1087,7 +1083,7 @@ export default function Index() {
 4. ✅ 业务逻辑提取到 `useXxx.ts` Hook（index.tsx 不超过 150 行）
 5. ✅ 需要持久化的 UI 状态使用 `useStorageState`
 6. ✅ 常量 ≥3 个时提取到 `constants.ts`
-7. ✅ 在 `public/_locales/zh_CN/messages.json` 添加翻译
+7. ✅ 在 `i18n/locales/{zh,en}/` 添加翻译
 8. ✅ 创建 `__tests__/index.test.tsx` 测试文件
 9. ✅ 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 10. ✅ 运行 `npm run lint && npm run typecheck && npm run test` 全部通过
@@ -1107,8 +1103,8 @@ export default function Index() {
 | `src/hooks/`         | 自定义 React Hooks                                           |
 | `src/utils/`         | 工具函数与服务抽象                                           |
 | `src/types/`         | TypeScript 类型声明                                          |
-| `src/lib/`           | 通用工具函数与生成器库（cn、utils、generators）              |
+| `src/lib/`           | 通用工具函数（cn、utils）                                    |
-| `public/`            | 静态资源与 Chrome `_locales` 语言包                          |
+| `public/`            | 静态资源                                                     |
 
 ---
 

.github/copilot-instructions.md

@@ -1,6 +1,6 @@
 # Copilot 指令
 
-基于 WXT 框架的浏览器扩展项目（React 19 + TypeScript），为开发者和测试人员提供效率工具：时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、测试数据生成器等。
+基于 WXT 框架的浏览器扩展项目（React 19 + TypeScript），为开发者和测试人员提供效率工具：时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等。
 
 ## 核心命令
 
@@ -74,10 +74,10 @@ pages/FeatureName/
 1. 在 `types/storage.d.ts` 的 `PageType` 联合类型中添加新成员
 2. 在 `config/features.tsx` 的 `FEATURES` 数组中添加配置（key、翻译键、图标、三种渲染模式组件）
 3. 在 `pages/` 目录创建页面组件（懒加载）：
-   - `index.tsx` — 使用 `useI18n` 的 UI 组件
+   - `index.tsx` — 使用 `useLazyTranslation` 的 UI 组件
    - `useFeatureName.ts` — 业务逻辑 Hook
    - `constants.ts` — 常量（可选）
-4. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome i18n 翻译
+4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON 文件）
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
 
@@ -102,7 +102,7 @@ pages/FeatureName/
 
 ### 代码分割
 
-`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-qr、vendor-dnd），无需手动配置。
+`wxt.config.ts` 通过 `manualChunksForHtmlOnly()` 自动分组 vendor 依赖（vendor-react、vendor-i18n、vendor-qr、vendor-dnd），无需手动配置。
 
 ### 代码风格
 
@@ -118,7 +118,8 @@ pages/FeatureName/
 - 全局变量：`vitest/globals`（describe、it、expect 等无需导入）
 - Setup 文件：`vitest.setup.ts` 自动 mock 以下内容：
   - `chrome.*` / `browser.*` API（storage、tabs、runtime、cookies 等）
-  - `@/utils/chromeI18n`（从 `public/_locales/zh_CN/messages.json` 加载真实翻译）
+  - `react-i18next`（返回 key 作为翻译）
+  - `@/utils/useLazyTranslation`（返回 `ns:key` 格式）
   - `window.matchMedia`
 - 测试文件命名：`__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - 使用 `vi.mock()` 进行模块级 mock；避免重复 mock `vitest.setup.ts` 中已有的内容
@@ -126,12 +127,12 @@ pages/FeatureName/
 
 ### 国际化（i18n）
 
-- 使用 Chrome 扩展标准 `chrome.i18n`
+- 命名空间：`common`（默认）、`features`
-- 默认语言目录：`public/_locales/zh_CN/messages.json`
+- 翻译键格式：`namespace:key`（如 `features:timestamp.title`）
-- 使用方式：`import { useI18n } from '@/utils/chromeI18n'`
+- 语言：`zh`（默认）、`en`
-- 翻译键格式：直接 key（如 `timestamp_title`）；兼容 `namespace:key.path` 并转换为下划线
+- 翻译文件：`i18n/locales/{zh,en}/{common,features}.json` + 各功能独立 JSON 文件
-- 回退策略：缺失翻译返回 key 本身，并在开发模式下记录 warning
+- 使用 `useLazyTranslation` Hook 加载功能专属翻译
-- 限制：`chrome.i18n` 跟随浏览器语言，不能在运行时动态切换语言
+- 回退策略：缺失的翻译键回退到 `zh`，若仍缺失则返回占位格式 `namespace:key`
 
 ### WXT 生成文件
 

.gitignore

@@ -14,11 +14,6 @@ stats-*.json
 .wxt
 .vitest
 
-# Environment variables
-.env
-.env.local
-.env.*.local
-
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -35,16 +30,5 @@ stats-*.json
 .qoder/*
 dev/*
 
-# Build outputs
+docs/*
-dist/
+!docs/VISUAL_STYLE_GUIDE.md
-build/
-
-# Test coverage
-coverage/
-
-# IDE files
-*.code-workspace
-
-# Other
-*.tsbuildinfo
-*.tsxbuildinfo

.husky/pre-push

@@ -4,10 +4,8 @@ npx tsc --noEmit
 
 # ESLint 严格检查（仅检查本次推送的变更文件，不阻塞不相关的旧代码）
 # 新分支无 upstream 时，回退到与 origin/main 对比
-MERGE_BASE=$(git merge-base HEAD @{upstream} 2>/dev/null || git merge-base HEAD origin/main 2>/dev/null)
+BASE=$(git rev-parse --verify @{upstream} 2>/dev/null && echo "@{upstream}" || echo "origin/main")
-if [ -n "$MERGE_BASE" ]; then
+CHANGED_FILES=$(git diff --name-only --diff-filter=d "$BASE"...HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
-  CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
+if [ -n "$CHANGED_FILES" ]; then
-  if [ -n "$CHANGED_FILES" ]; then
+  echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
-    echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
-  fi
 fi

AGENTS.md

@@ -1,6 +1,6 @@
 # AGENTS.md
 
-WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、测试数据生成器等测试效率工具。
+WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
 
 ## 核心命令
 
@@ -54,7 +54,6 @@ src/                   # 源代码根目录
   utils/                 # 工具函数与服务抽象
   types/                 # TypeScript 类型声明
   lib/                   # 通用工具函数（cn、utils）
-  workers/               # Web Worker（数据生成等耗时任务）
 public/                # 静态资源（图标、_locales 等）
 ```
 
@@ -77,38 +76,6 @@ src/pages/FeatureName/
 - 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
 - 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
 
-### 测试数据生成器模块
-
-```
-src/pages/TestDataGenerator/
-├── index.tsx                    # 主页面（字段配置 + 标签页切换）
-├── hooks/useGenerator.ts        # Web Worker 管理 Hook（创建、复用、通信、销毁）
-└── components/
-    ├── FieldList.tsx            # 字段列表（虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存）
-    ├── FieldItem.tsx            # 字段卡片展示
-    ├── FieldEditor.tsx          # 字段编辑器（名称校验、生成器选择、参数配置）
-    ├── GeneratorSelector.tsx    # 生成器选择器（分类 + 搜索）
-    ├── GeneratorConfig.tsx      # 生成器参数表单（动态渲染 string/number/boolean/select/array）
-    ├── GenerateOptions.tsx      # 生成选项（数量、格式）
-    ├── GenerateButton.tsx       # 生成按钮 + 进度条
-    ├── DataPreview.tsx          # 示例数据预览（JSON 语法高亮）
-    ├── ResultPanel.tsx          # 生成结果状态面板
-    ├── ExportPanel.tsx          # 导出面板（复制/下载 JSON/CSV）
-    └── RuleManager.tsx          # 规则管理（CRUD、搜索、导入/导出）
-
-src/utils/
-├── ruleStorage.ts               # 规则持久化存储（localStorage）
-└── dataExporter.ts              # 数据导出工具（JSON/CSV 转换、下载、剪贴板）
-
-src/lib/generators/              # 内置生成器定义（个人信息、企业、技术、基础类型）
-
-src/workers/
-└── generator.worker.ts          # 数据生成 Web Worker
-
-src/types/
-└── testDataGenerator.ts         # 类型定义（FieldConfig, DataRule, GeneratorDefinition 等）
-```
-
 ## 关键架构决策
 
 **路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
@@ -133,7 +100,7 @@ src/types/
 - 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
 - Setup 文件: `vitest.setup.ts` 自动 mock:
   - `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
-  - `@/utils/chromeI18n` (从 `public/_locales/zh_CN/messages.json` 加载真实翻译)
+  - `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
   - `window.matchMedia`
 - 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
 - Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
@@ -143,8 +110,8 @@ src/types/
 
 项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
 
-- **翻译文件**: `public/_locales/zh_CN/messages.json`（Chrome 扩展标准格式）
+- **翻译文件**: `public/_locales/{zh,en}/messages.json`（Chrome 扩展标准格式）
-- **默认语言**: `zh_CN`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
+- **默认语言**: `zh`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
 - **使用方式**: `import { useI18n } from '@/utils/chromeI18n'`
 - **翻译键格式**:
   - 直接 key: `t('dashboard_title')` → 查找 `dashboard_title`
@@ -163,7 +130,7 @@ src/types/
    - `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
    - `useFeatureName.ts` — 业务逻辑 Hook
    - `constants.ts` — 常量（可选）
-4. 在 `public/_locales/zh_CN/messages.json` 添加翻译
+4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
 5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
 6. 添加对应的单元测试
 
@@ -176,13 +143,11 @@ src/types/
 - 图标: 使用 `lucide-react` 图标库
 - 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
 - ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
-- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
 
 ## 关键外部库（非显而易见的）
 
 - `@webext-core/messaging` — 扩展消息通信
-- `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
+- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
 - `qrious` + `qr-scanner` — 二维码生成与解析
 - `dayjs` — 日期处理（时间戳转换）
 - `sonner` — Toast 通知（替代传统 snackbar）
-- Web Worker — 批量数据生成（`src/workers/generator.worker.ts`），避免阻塞 UI 线程

README.md

@@ -8,72 +8,61 @@
 
 ## 功能特性
 
-### Dashboard 首页
+### 🚀 Dashboard 首页
 
 - **工具导航**: 快速访问所有可用工具.
 - **个性化定制**: 支持自定义工具的排序和可见性.
 - **实时预览**: 在卡片上直接查看实时数据（如当前时间戳）.
 
-### 时间戳转换工具
+### ⏰ 时间戳转换工具
 
 - **实时显示**: 毫秒级精度显示当前系统时间.
 - **双向转换**: 日期字符串与 Unix 时间戳（秒/毫秒）之间的无缝转换.
 - **多时区支持**: 预设常用时区（亚洲/上海、美洲/纽约、欧洲/伦敦），支持快速切换.
 - **快捷操作**: 一键复制转换结果，支持多种格式.
 
-### 存储清理工具
+### 🧹 存储清理工具
 
 - **智能识别**: 自动检测并显示当前活动标签页的域名.
 - **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
 - **细粒度控制**: 可根据需要选择特定的清理项.
 - **自动刷新**: 提供清理后自动刷新页面的选项，确保状态同步.
 
-### 文本统计工具
+### 📝 文本统计工具
 
 - **实时分析**: 键入即统计，无需额外操作.
 - **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
 - **性能优化**: 采用高性能分词算法，支持大文本处理.
 
-### JWT 解析工具
+### 🔑 JWT 解析工具
 
 - **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
 - **格式化显示**: 以着色和格式化的 JSON 视图展示数据，方便阅读.
 - **安全检查**: 自动去除 `Bearer` 前缀，处理异常输入并提供友好提示.
 - **签名查看**: 展示 JWT 签名部分，辅助验证令牌完整性.
 
-### 右键恢复工具
+### 🖱️ 右键恢复工具
 
 - **当前页面检测**: 自动识别当前活动标签页的域名.
 - **一键恢复**: 解除网站对右键菜单的限制，恢复复制、粘贴等基础操作.
 - **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
 
-### 二维码工具
+### 🖼️ 二维码工具
 
 - **生成器**: 将当前 URL 或自定义文本快速转换为二维码，支持下载.
 - **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
 
-### JSON 工具
+### 🔄 JSON 工具
 
 - **差异比较**: 对比两段 JSON 数据，高亮展示差异.
 - **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
 
-### Base64 转换器
+### 🧰 Base64 转换器
 
 - **文本编解码**: 支持文本内容的 Base64 编码与解码.
 - **文件转换**: 支持文件与 Base64 字符串互转.
 - **图像预览**: 支持图片 Base64 编码与实时预览.
 
-### 测试数据生成器
-
-- **可视化字段配置**: 通过 UI 界面定义数据字段，支持拖拽排序、最多 40 个字段.
-- **丰富的内置生成器**: 涵盖个人信息（姓名、手机、邮箱）、企业数据（公司名、职位）、技术数据（IP、MAC 地址、UUID）、基础类型（数字、日期、枚举）等多个分类.
-- **灵活的参数配置**: 每个生成器支持自定义参数（如数字范围、日期格式、枚举值列表等）.
-- **空值率与唯一性**: 可为非必填字段设置空值率，支持字段唯一性约束.
-- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则，方便复用.
-- **批量生成**: 支持 1 ~ 100,000 条数据生成，通过 Web Worker 异步处理避免阻塞 UI.
-- **实时预览**: 配置字段后即时预览示例数据结构.
-- **多格式导出**: 支持 JSON 和 CSV 格式，提供复制到剪贴板和下载文件两种导出方式.
-
 ## 技术栈
 
 - **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
@@ -81,13 +70,11 @@
 - **UI 组件**: shadcn/ui (基于 Radix UI 的无头组件库)
 - **样式**: Tailwind CSS + class-variance-authority + cn() 工具函数
 - **日期处理**: dayjs (集成 UTC 和 Timezone 插件)
-- **国际化**: Chrome `chrome.i18n` + `public/_locales/zh_CN/messages.json`
+- **国际化**: i18next + react-i18next
 - **通信**: @webext-core/messaging
 - **存储**: Chrome Storage API (类型安全封装)
 - **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
 - **测试**: Vitest + Testing Library
-- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
-- **异步生成**: Web Worker (批量数据生成)
 
 ## 项目结构
 
@@ -102,13 +89,12 @@
 │   │   ├── background.ts  # 后台 Service Worker
 │   │   └── content.ts     # 网页注入脚本
 │   ├── pages/             # 各功能模块的页面组件
-│   ├── workers/           # Web Worker (数据生成等耗时任务)
 │   ├── providers/         # 全局状态提供者 (Router, Theme 等)
 │   ├── hooks/             # 自定义 React Hooks
 │   ├── utils/             # 工具函数与服务抽象
 │   ├── types/             # TypeScript 类型声明
-│   └── lib/               # 通用工具函数与生成器库 (cn, utils, generators 等)
+│   └── lib/               # 通用工具函数 (cn, utils 等)
-├── public/                # 静态资源 (图标、_locales 本地化资源等)
+├── public/                # 静态资源 (图标、manifest 资源等)
 ├── wxt.config.ts          # WXT 框架核心配置
 └── package.json           # 项目元数据与依赖管理
 ```
@@ -155,6 +141,7 @@
 - `sidePanel`: 支持在浏览器侧边栏中运行.
 - `clipboardWrite`: 提供一键复制功能.
 - `contextMenus`: 注册右键菜单，支持快捷操作.
+- `alarms`: 管理后台定时任务（如清理后自动刷新）.
 
 ## 浏览器支持
 

docs/test-data-generator/README.md

@@ -1,31 +0,0 @@
-# 测试数据生成器 - 功能设计文档
-
-> 版本: v1.0
-> 创建时间: 2024-01-20
-> 状态: 已实现（见 `src/pages/TestDataGenerator/`、`src/lib/generators/`、`src/workers/generator.worker.ts`）
-
-## 产品定位
-
-**轻量级可视化测试数据生成器**
-
-- 纯前端工具，无需后端
-- 可视化配置，无需编码
-- 本地生成，数据安全
-
-## 目录
-
-- [核心功能](./core-features.md)
-- [生成器库](./generators.md)
-- [规则管理](./rule-management.md)
-- [界面设计](./ui-design.md)
-- [技术实现](./technical-implementation.md)
-
-## 当前实现入口
-
-- 页面入口：`src/pages/TestDataGenerator/index.tsx`
-- Worker：`src/workers/generator.worker.ts`
-- 生成器库：`src/lib/generators/`
-- 规则存储：`src/utils/ruleStorage.ts`
-- 导出工具：`src/utils/dataExporter.ts`
-
-实现约束与任务完成状态记录在 [TASKS.md](./TASKS.md)。

docs/test-data-generator/TASKS.md

@@ -1,384 +0,0 @@
-# 测试数据生成器 - 实现任务列表
-
-> 创建时间: 2026-06-06
-> 状态: ✅ 已完成
-
-## 总体进度
-
-| 子功能                     | 状态      | 预估工时  |
-| -------------------------- | --------- | --------- |
-| 1. 类型定义与项目配置      | ✅ 已完成 | 0.5h      |
-| 2. 生成器库                | ✅ 已完成 | 4h        |
-| 3. Web Worker 数据生成引擎 | ✅ 已完成 | 2h        |
-| 4. 规则存储与管理          | ✅ 已完成 | 2h        |
-| 5. 数据导出功能            | ✅ 已完成 | 1h        |
-| 6. UI 组件开发             | ✅ 已完成 | 6h        |
-| 7. 页面集成与注册          | ✅ 已完成 | 1h        |
-| 8. 测试与优化              | ✅ 已完成 | 2h        |
-| **总计**                   |           | **18.5h** |
-
----
-
-## 1. 类型定义与项目配置
-
-**目标**: 创建所有必要的类型定义文件，配置项目注册新功能
-
-### 任务清单
-
-- [x] 1.1 创建 `src/types/testDataGenerator.ts` 类型定义文件
-  - [x] 定义 `FieldConfig` 接口
-  - [x] 定义 `DataRule` 接口
-  - [x] 定义 `GeneratorDefinition` 接口
-  - [x] 定义 `GeneratorParam` 接口
-  - [x] 定义 `GenerateResult` 接口
-  - [x] 定义 `ExportFile` 接口
-
-- [x] 1.2 更新 `src/types/storage.d.ts`
-  - [x] 在 `PageType` 中添加 `'testDataGenerator'`
-  - [x] 在 `StorageSchema` 中添加测试数据生成器相关配置（如需要）
-
-- [x] 1.3 更新 `src/config/features.tsx`
-  - [x] 导入 TestDataGenerator 页面组件
-  - [x] 添加新功能配置到 `FEATURES` 数组
-  - [x] 选择合适的图标（如 `Database` 或 `FileSpreadsheet`）
-
-- [x] 1.4 更新国际化配置
-  - [x] 添加 `testDataGenerator_title` 翻译
-  - [x] 添加 `testDataGenerator_description` 翻译
-
----
-
-## 2. 生成器库
-
-**目标**: 实现 21 个数据生成器，支持多种生成策略
-
-### 任务清单
-
-#### 2.1 生成器基础框架
-
-- [x] 2.1.1 创建 `src/lib/generators/types.ts`
-  - [x] 定义生成器内部类型（与 `testDataGenerator.ts` 分离）
-
-- [x] 2.1.2 创建 `src/lib/generators/index.ts`
-  - [x] 导出所有生成器
-  - [x] 导出 `generatorCategories` 配置
-
-#### 2.2 个人信息生成器 (6个)
-
-- [x] 2.2.1 创建 `src/lib/generators/personal.ts`
-  - [x] 实现 `chineseName` 生成器
-    - [x] `generate()` 方法
-    - [x] `generateAtIndex()` 方法
-  - [x] 实现 `email` 生成器
-    - [x] `generate()` 方法
-    - [x] `generateAtIndex()` 方法
-  - [x] 实现 `chinesePhone` 生成器
-    - [x] `generate()` 方法
-    - [x] `generateAtIndex()` 方法
-  - [x] 实现 `idCard` 生成器
-    - [x] `generate()` 方法
-    - [x] `generateAtIndex()` 方法
-  - [x] 实现 `chineseAddress` 生成器
-    - [x] `generate()` 方法
-    - [x] `generateAtIndex()` 方法
-  - [x] 实现 `age` 生成器
-    - [x] `generate()` 方法（支持 realistic/uniform/demographic 策略）
-    - [x] `generateAtIndex()` 方法
-    - [x] 实现 `normalRandom()` 辅助函数
-    - [x] 实现 `demographicRandom()` 辅助函数
-
-#### 2.3 业务数据生成器 (8个)
-
-- [x] 2.3.1 创建 `src/lib/generators/business.ts`
-  - [x] 实现 `orderId` 生成器
-  - [x] 实现 `price` 生成器
-    - [x] 实现 `generatePsychologicalPrice()` 辅助函数
-    - [x] 实现 `generateRealisticPrice()` 辅助函数
-  - [x] 实现 `date` 生成器
-    - [x] 实现 `formatDate()` 辅助函数
-  - [x] 实现 `status` 生成器
-  - [x] 实现 `quantity` 生成器
-    - [x] 实现 `poissonRandom()` 辅助函数
-  - [x] 实现 `rating` 生成器
-    - [x] 实现 `skewedRandom()` 辅助函数
-  - [x] 实现 `discount` 生成器
-    - [x] 实现 `generatePsychologicalDiscount()` 辅助函数
-  - [x] 实现 `stock` 生成器
-    - [x] 实现 `exponentialRandom()` 辅助函数
-
-#### 2.4 技术数据生成器 (3个)
-
-- [x] 2.4.1 创建 `src/lib/generators/technical.ts`
-  - [x] 实现 `uuid` 生成器
-  - [x] 实现 `ipv4` 生成器
-  - [x] 实现 `url` 生成器
-
-#### 2.5 基础类型生成器 (4个)
-
-- [x] 2.5.1 创建 `src/lib/generators/basic.ts`
-  - [x] 实现 `randomInt` 生成器
-  - [x] 实现 `randomFloat` 生成器
-  - [x] 实现 `randomString` 生成器
-  - [x] 实现 `fromList` 生成器
-
----
-
-## 3. Web Worker 数据生成引擎
-
-**目标**: 实现后台数据生成，支持进度回调和取消
-
-### 任务清单
-
-- [x] 3.1 创建 `src/workers/generator.worker.ts`
-  - [x] 实现 `self.onmessage` 处理器
-  - [x] 验证生成器是否存在
-  - [x] 实现数据生成循环
-  - [x] 实现空值率控制逻辑
-  - [x] 实现唯一性约束逻辑
-    - [x] 小数据量：随机生成 + 重试（100次上限）
-    - [x] 大数据量：索引生成策略
-  - [x] 实现进度回调（每1000条）
-  - [x] 实现完成回调（包含统计数据）
-  - [x] 实现错误回调
-
-- [x] 3.2 创建 `src/pages/TestDataGenerator/hooks/useGenerator.ts`
-  - [x] 实现 Worker 创建和销毁
-  - [x] 实现 `generate()` 方法
-  - [x] 实现 `terminate()` 方法
-  - [x] 管理进度状态
-  - [x] 管理生成结果状态
-
----
-
-## 4. 规则存储与管理
-
-**目标**: 实现规则的持久化存储和管理功能
-
-### 任务清单
-
-- [x] 4.1 创建 `src/utils/ruleStorage.ts`
-  - [x] 定义 `STORAGE_KEY` 常量
-  - [x] 定义 `MAX_RULES = 20` 常量
-  - [x] 实现 `getAll()` 方法
-  - [x] 实现 `getById()` 方法
-  - [x] 实现 `getCount()` 方法
-  - [x] 实现 `isMaxReached()` 方法
-  - [x] 实现 `save()` 方法（含数量限制检查）
-  - [x] 实现 `update()` 方法
-  - [x] 实现 `delete()` 方法
-  - [x] 实现 `duplicate()` 方法
-  - [x] 实现 `recordUse()` 方法
-  - [x] 实现 `search()` 方法
-  - [x] 实现 `getRecent()` 方法
-  - [x] 实现 `export()` 方法
-  - [x] 实现 `import()` 方法（含格式验证）
-  - [x] 实现 `clear()` 方法
-  - [x] 实现 `validateRule()` 私有方法
-
----
-
-## 5. 数据导出功能
-
-**目标**: 实现 JSON 和 CSV 格式的数据导出
-
-### 任务清单
-
-- [x] 5.1 创建 `src/utils/dataExporter.ts`
-  - [x] 实现 `toJSON()` 静态方法
-  - [x] 实现 `toCSV()` 静态方法
-  - [x] 实现 `escapeCSV()` 私有方法
-  - [x] 实现 `exportByFormat()` 静态方法
-  - [x] 实现 `toMultipleFiles()` 静态方法
-  - [x] 实现 `toSingleFile()` 静态方法
-  - [x] 实现 `getMimeType()` 私有方法
-  - [x] 实现 `download()` 静态方法
-  - [x] 实现 `downloadMultiple()` 静态方法
-
----
-
-## 6. UI 组件开发
-
-**目标**: 实现所有界面组件，遵循视觉规范
-
-### 任务清单
-
-#### 6.1 页面组件
-
-- [x] 6.1.1 创建 `src/pages/TestDataGenerator/index.tsx` 主页面
-  - [x] 实现左右分栏布局（60% / 40%）
-  - [x] 集成所有子组件
-  - [x] 管理页面状态
-
-#### 6.2 字段管理组件
-
-- [x] 6.2.1 创建 `src/pages/TestDataGenerator/components/FieldList.tsx`
-  - [x] 实现字段列表展示
-  - [x] 实现添加字段按钮
-  - [x] 实现字段拖拽排序（可选，使用上移/下移按钮）
-
-- [x] 6.2.2 创建 `src/pages/TestDataGenerator/components/FieldItem.tsx`
-  - [x] 实现单个字段项展示
-  - [x] 实现字段名编辑
-  - [x] 实现生成器切换下拉框
-  - [x] 实现配置按钮
-  - [x] 实现删除按钮
-  - [x] 实现上移/下移按钮
-
-- [x] 6.2.3 创建 `src/pages/TestDataGenerator/components/FieldEditor.tsx`
-  - [x] 实现基础配置区（字段名、描述）
-  - [x] 实现必填/选填切换
-  - [x] 实现空值率配置（仅选填时显示）
-    - [x] 滑块组件
-    - [x] 预设按钮（低/中/高）
-  - [x] 实现唯一性约束开关
-
-#### 6.3 生成器相关组件
-
-- [x] 6.3.1 创建 `src/pages/TestDataGenerator/components/GeneratorSelector.tsx`
-  - [x] 实现分类展示（个人信息/业务数据/技术数据/基础类型）
-  - [x] 实现搜索功能
-  - [x] 实现生成器选择
-
-- [x] 6.3.2 创建 `src/pages/TestDataGenerator/components/GeneratorConfig.tsx`
-  - [x] 实现参数配置表单
-  - [x] 支持不同参数类型（string/number/boolean/select/array）
-  - [x] 实时预览更新
-
-#### 6.4 数据预览组件
-
-- [x] 6.4.1 创建 `src/pages/TestDataGenerator/components/DataPreview.tsx`
-  - [x] 实现 JSON 格式预览
-  - [x] 实现 CSV 格式预览
-  - [x] 实现格式切换按钮
-  - [x] 实现数据分页
-  - [x] 实现复制功能
-
-#### 6.5 生成选项组件
-
-- [x] 6.5.1 创建 `src/pages/TestDataGenerator/components/GenerateOptions.tsx`
-  - [x] 实现生成数量配置（预设 + 自定义）
-  - [x] 实现数据格式选择（JSON/CSV）
-  - [x] 实现默认空值率配置
-
-- [x] 6.5.2 创建 `src/pages/TestDataGenerator/components/GenerateButton.tsx`
-  - [x] 实现生成按钮
-  - [x] 实现加载状态
-  - [x] 实现进度条显示
-
-#### 6.6 导出组件
-
-- [x] 6.6.1 创建 `src/pages/TestDataGenerator/components/ExportPanel.tsx`
-  - [x] 实现导出选项（复制/下载 JSON/下载 CSV）
-  - [x] 实现下载逻辑
-
-#### 6.7 结果展示组件
-
-- [x] 6.7.1 创建 `src/pages/TestDataGenerator/components/ResultPanel.tsx`
-  - [x] 实现成功状态展示
-  - [x] 实现警告状态展示（部分字段失败）
-  - [x] 实现错误状态展示
-  - [x] 实现数据统计展示
-
-#### 6.8 规则管理组件
-
-- [x] 6.8.1 创建 `src/pages/TestDataGenerator/components/RuleManager.tsx`
-  - [x] 实现规则列表展示
-  - [x] 实现搜索功能
-  - [x] 实现加载/编辑/删除/复制按钮
-  - [x] 实现导入/导出功能
-  - [x] 实现规则数量显示（已保存 X/20 条）
-
----
-
-## 7. 页面集成与注册
-
-**目标**: 将新功能集成到应用中
-
-### 任务清单
-
-- [x] 7.1 更新路由配置
-  - [x] 确保 `RouterProvider` 支持新页面类型
-
-- [x] 7.2 更新功能注册
-  - [x] 验证 `features.tsx` 配置正确
-  - [x] 验证图标显示正常
-
-- [x] 7.3 更新仪表盘
-  - [x] 在 Dashboard 中显示新工具卡片
-
----
-
-## 8. 测试与优化
-
-**目标**: 确保功能稳定性和性能
-
-### 任务清单
-
-#### 8.1 单元测试
-
-- [x] 8.1.1 创建生成器测试
-  - [x] `src/lib/generators/__tests__/personal.test.ts`
-  - [x] `src/lib/generators/__tests__/business.test.ts`
-  - [x] `src/lib/generators/__tests__/technical.test.ts`
-  - [x] `src/lib/generators/__tests__/basic.test.ts`
-
-- [x] 8.1.2 创建工具函数测试
-  - [x] `src/utils/__tests__/ruleStorage.test.ts`
-  - [x] `src/utils/__tests__/dataExporter.test.ts`
-
-#### 8.2 集成测试
-
-- [x] 8.2.1 创建页面测试
-  - [x] `src/pages/TestDataGenerator/__tests__/TestDataGenerator.test.tsx`
-
-#### 8.3 性能优化
-
-- [x] 8.3.1 验证 Web Worker 性能
-  - [x] 测试 10000+ 条数据生成
-  - [x] 验证 UI 不阻塞
-
-- [x] 8.3.2 验证内存使用
-  - [x] 检查大数据量时的内存占用
-  - [x] 确保无内存泄漏
-
-#### 8.4 代码质量
-
-- [x] 8.4.1 代码审查
-  - [x] 遵循项目代码规范
-  - [x] 遵循视觉规范文档
-
-- [x] 8.4.2 文档更新
-  - [x] 更新 AGENTS.md（如需要）
-
----
-
-## 依赖关系
-
-```
-1. 类型定义与项目配置
-    ↓
-2. 生成器库
-    ↓
-3. Web Worker 数据生成引擎 (依赖 2)
-    ↓
-4. 规则存储与管理
-    ↓
-5. 数据导出功能
-    ↓
-6. UI 组件开发 (依赖 1, 2, 3, 4, 5)
-    ↓
-7. 页面集成与注册 (依赖 6)
-    ↓
-8. 测试与优化 (依赖 7)
-```
-
----
-
-## 注意事项
-
-1. **遵循视觉规范**: 所有 UI 组件必须遵循 `docs/VISUAL_STYLE_GUIDE.md`
-2. **使用现有组件**: 优先使用 `src/components/ui/` 中的 shadcn/ui 组件
-3. **TypeScript 严格模式**: 确保类型安全
-4. **错误处理**: 使用 `sonner` 库进行 Toast 提示
-5. **性能考虑**: 大数据量生成必须使用 Web Worker
-6. **响应式设计**: 支持桌面端、平板端、移动端

docs/test-data-generator/core-features.md

@@ -1,238 +0,0 @@
-# 核心功能
-
-## 功能概览
-
-| 功能模块       | 功能点        | 说明               | 优先级 |
-| -------------- | ------------- | ------------------ | ------ |
-| **字段配置**   | 添加字段      | 可视化添加数据字段 | P0     |
-|                | 删除字段      | 删除不需要的字段   | P0     |
-|                | 字段排序      | 拖拽调整字段顺序   | P1     |
-|                | 字段命名      | 自定义字段名称     | P0     |
-|                | 必填/选填设置 | 控制字段是否必填   | P0     |
-|                | 空值率配置    | 选填字段空值概率   | P1     |
-| **生成器系统** | 生成器选择    | 从生成器库中选择   | P0     |
-|                | 参数配置      | 配置生成器参数     | P0     |
-|                | 实时预览      | 配置时查看生成结果 | P1     |
-| **数据生成**   | 批量生成      | 支持 10000+ 条数据 | P0     |
-|                | 唯一性约束    | 保证字段值唯一     | P1     |
-|                | 组合策略      | 自动选择生成策略   | P1     |
-|                | 数据预览      | 生成前预览数据     | P1     |
-| **数据导出**   | JSON 导出     | 导出为 JSON 格式   | P0     |
-|                | CSV 导出      | 导出为 CSV 格式    | P0     |
-
-## 功能详情
-
-### 1. 字段配置
-
-#### 添加字段
-
-- 用户点击"添加字段"按钮
-- 弹出生成器选择器
-- 选择生成器后，自动创建新字段
-- 字段默认名称为生成器名称
-
-#### 删除字段
-
-- 每个字段右侧有删除按钮
-- 点击后弹出确认对话框
-- 确认后删除该字段
-
-#### 字段排序
-
-- 支持拖拽排序
-- 支持上移/下移按钮
-- 排序后预览数据同步更新
-
-#### 字段命名
-
-- 字段名称可自定义
-- 支持中英文命名
-- 同一规则内字段名不可重复
-
-#### 必填/选填设置
-
-- 每个字段可设置为"必填"或"选填"
-- **必填字段**: 100% 生成数据
-- **选填字段**: 可配置空值概率（0-100%）
-- 默认所有字段为必填
-
-#### 空值率配置
-
-- 选填字段可单独设置空值率
-- 提供预设值：低（20%）、中（50%）、高（80%）
-- 支持滑块精细调节（0-100%）
-- 未单独设置的选填字段使用全局默认空值率
-
----
-
-### 2. 生成器系统
-
-#### 生成器选择
-
-- 以分类方式展示生成器
-- 支持搜索生成器
-- 点击选择后添加到字段配置
-
-#### 价格生成器（业务数据）
-
-生成真实的价格数据，支持多种策略：
-
-| 策略     | 说明                           | 适用场景     |
-| -------- | ------------------------------ | ------------ |
-| 真实分布 | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
-| 均匀随机 | 所有价格等概率                 | 测试数据     |
-| 心理定价 | .99/.98/.95 结尾               | 营销场景     |
-
-**参数配置**：
-
-- 最低价/最高价：控制价格区间
-- 小数位数：0（整数）、1、2 位
-- 生成策略：选择分布类型
-
-#### 年龄生成器（个人信息）
-
-生成真实分布的年龄数据：
-
-| 策略     | 说明                         | 适用场景     |
-| -------- | ---------------------------- | ------------ |
-| 真实分布 | 正态分布，均值 35，标准差 10 | 通用用户数据 |
-| 人口比例 | 按中国人口年龄比例分布       | 市场调研数据 |
-| 均匀随机 | 所有年龄等概率               | 测试数据     |
-
-**参数配置**：
-
-- 最小年龄/最大年龄：控制年龄区间
-- 生成策略：选择分布类型
-
-#### 数量生成器（业务数据）
-
-生成真实分布的数量数据：
-
-| 策略     | 说明                        | 适用场景 |
-| -------- | --------------------------- | -------- |
-| 真实分布 | 泊松分布，大多数购买 1-3 件 | 零售订单 |
-| 批发模式 | 10-100 之间均匀分布         | 批发订单 |
-| 均匀随机 | 所有数量等概率              | 测试数据 |
-
-**参数配置**：
-
-- 最小值/最大值：控制数量区间
-- 生成策略：选择分布类型
-
-#### 评分生成器（业务数据）
-
-生成真实分布的评分数据：
-
-| 策略     | 说明               | 适用场景 |
-| -------- | ------------------ | -------- |
-| 真实分布 | 偏态分布，偏向高分 | 电商平台 |
-| 严格评价 | 偏态分布，偏向低分 | 严格评审 |
-| 均匀随机 | 所有评分等概率     | 测试数据 |
-
-**参数配置**：
-
-- 最低分/最高分：控制评分区间
-- 小数位数：0、1 位
-- 生成策略：选择分布类型
-
-#### 折扣生成器（业务数据）
-
-生成真实分布的折扣数据：
-
-| 策略     | 说明                     | 适用场景 |
-| -------- | ------------------------ | -------- |
-| 心理定价 | 常见折扣点（8折、9折等） | 电商促销 |
-| 清仓模式 | 大折扣区间（3-7折）      | 清仓处理 |
-| 均匀随机 | 所有折扣等概率           | 测试数据 |
-
-**参数配置**：
-
-- 最低折扣/最高折扣：控制折扣区间（0.1-0.9）
-- 生成策略：选择分布类型
-
-#### 库存生成器（业务数据）
-
-生成真实分布的库存数据：
-
-| 策略     | 说明                     | 适用场景 |
-| -------- | ------------------------ | -------- |
-| 真实分布 | 指数分布，大多数库存较少 | 通用商品 |
-| 热销商品 | 低库存区间（0-50）       | 热销商品 |
-| 均匀随机 | 所有库存等概率           | 测试数据 |
-
-**参数配置**：
-
-- 最小库存/最大库存：控制库存区间
-- 生成策略：选择分布类型
-
-#### 参数配置
-
-- 每个生成器有对应的参数配置界面
-- 必填参数标记星号
-- 修改参数后实时预览更新
-
-#### 实时预览
-
-- 配置参数时，右侧预览区实时更新
-- 显示 5-10 条示例数据
-- 帮助用户确认配置是否正确
-
----
-
-### 3. 数据生成
-
-#### 批量生成
-
-- 支持配置生成数量
-- 使用 Web Worker 后台生成
-- 支持 10000+ 条数据
-- 生成过程中显示进度条
-
-#### 唯一性约束
-
-- 每个字段可单独设置唯一性约束
-- 启用后，该字段生成的值不会重复
-- 如果无法生成唯一值，使用重试机制
-
-#### 组合策略（唯一性生成）
-
-系统根据数据量自动选择最优生成策略：
-
-| 数据量    | 策略            | 说明                   |
-| --------- | --------------- | ---------------------- |
-| ≤ 1000 条 | 随机生成 + 重试 | 保证随机性，性能可接受 |
-| > 1000 条 | 索引生成        | 高性能，保证唯一性     |
-
-**实现方式**：
-
-- 生成器提供两个方法：`generate()` 和 `generateAtIndex()`
-- `generate()`: 随机生成，用于小数据量或非唯一性字段
-- `generateAtIndex()`: 索引生成，用于大数据量唯一性字段
-- 系统根据配置自动选择合适的方法
-
-**示例**：
-
-- 手机号字段：`generateAtIndex(params, index)` 使用 index 生成唯一手机号
-- 姓名字段：`generateAtIndex(params, index)` 使用 index 组合姓和名
-
-#### 数据预览
-
-- 生成前可预览数据
-- 显示前 10 条数据
-- 支持分页查看更多数据
-
----
-
-### 4. 数据导出
-
-#### JSON 导出
-
-- 导出为标准 JSON 格式
-- 支持压缩和格式化两种模式
-- 包含字段名和数据
-
-#### CSV 导出
-
-- 导出为 CSV 格式
-- 自动处理逗号转义
-- 支持中文编码 (UTF-8 with BOM)

docs/test-data-generator/generators.md

@@ -1,702 +0,0 @@
-# 生成器库
-
-## 分类概览
-
-| 分类     | 生成器数量 | 说明                                             |
-| -------- | ---------- | ------------------------------------------------ |
-| 个人信息 | 6 个       | 中文姓名、邮箱、手机号、年龄等                   |
-| 业务数据 | 8 个       | 订单号、价格、日期、状态、数量、评分、折扣、库存 |
-| 技术数据 | 3 个       | UUID、IP地址、URL                                |
-| 基础类型 | 4 个       | 整数、浮点数、字符串等                           |
-| **总计** | **21 个**  |                                                  |
-
----
-
-## 个人信息生成器
-
-### 1. 中文姓名 (chineseName)
-
-**说明**: 生成中文姓名，如张三、李四
-
-**参数**:
-
-| 参数名          | 类型                         | 必填 | 默认值             | 说明         |
-| --------------- | ---------------------------- | ---- | ------------------ | ------------ |
-| surnamePool     | string \| string[]           | 否   | 百家姓前100个      | 姓氏池       |
-| givenNameLength | { min: number, max: number } | 否   | { min: 1, max: 2 } | 名字长度范围 |
-
-**示例**:
-
-```json
-{
-  "name": "name",
-  "generator": "chineseName",
-  "params": {
-    "surnamePool": ["张", "王", "李", "赵"],
-    "givenNameLength": { "min": 1, "max": 2 }
-  }
-}
-```
-
-**生成结果**: 张伟, 李娜, 王强, 赵敏
-
----
-
-### 2. 邮箱地址 (email)
-
-**说明**: 生成邮箱地址
-
-**参数**:
-
-| 参数名    | 类型                 | 必填 | 默认值                                                       | 说明       |
-| --------- | -------------------- | ---- | ------------------------------------------------------------ | ---------- |
-| domains   | string[]             | 否   | ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com'] | 域名列表   |
-| nameStyle | 'pinyin' \| 'random' | 否   | 'pinyin'                                                     | 用户名风格 |
-
-**示例**:
-
-```json
-{
-  "name": "email",
-  "generator": "email",
-  "params": {
-    "domains": ["qq.com", "163.com"],
-    "nameStyle": "pinyin"
-  }
-}
-```
-
-**生成结果**: zhangwei@qq.com, lina@163.com
-
----
-
-### 3. 中国手机号 (chinesePhone)
-
-**说明**: 生成 11 位中国手机号
-
-**参数**:
-
-| 参数名 | 类型     | 必填 | 默认值         | 说明       |
-| ------ | -------- | ---- | -------------- | ---------- |
-| prefix | string[] | 否   | 常见手机号前缀 | 手机号前缀 |
-
-**示例**:
-
-```json
-{
-  "name": "phone",
-  "generator": "chinesePhone",
-  "params": {
-    "prefix": ["138", "139", "150", "151"]
-  }
-}
-```
-
-**生成结果**: 13812345678, 15087654321
-
----
-
-### 4. 身份证号 (idCard)
-
-**说明**: 生成 18 位中国身份证号
-
-**参数**:
-
-| 参数名 | 类型   | 必填 | 默认值 | 说明   |
-| ------ | ------ | ---- | ------ | ------ |
-| region | string | 否   | 随机   | 地区码 |
-
-**示例**:
-
-```json
-{
-  "name": "idCard",
-  "generator": "idCard",
-  "params": {
-    "region": "110101"
-  }
-}
-```
-
-**生成结果**: 110101199001011234
-
----
-
-### 5. 中文地址 (chineseAddress)
-
-**说明**: 生成中国地址
-
-**参数**:
-
-| 参数名 | 类型                           | 必填 | 默认值 | 说明     |
-| ------ | ------------------------------ | ---- | ------ | -------- |
-| level  | 'full' \| 'province' \| 'city' | 否   | 'full' | 详细程度 |
-
-**示例**:
-
-```json
-{
-  "name": "address",
-  "generator": "chineseAddress",
-  "params": {
-    "level": "full"
-  }
-}
-```
-
-**生成结果**: 北京市朝阳区建国路88号
-
----
-
-### 6. 年龄 (age)
-
-**说明**: 生成真实分布的年龄数据
-
-**参数**:
-
-| 参数名   | 类型                                      | 必填 | 默认值      | 说明     |
-| -------- | ----------------------------------------- | ---- | ----------- | -------- |
-| min      | number                                    | 否   | 1           | 最小年龄 |
-| max      | number                                    | 否   | 100         | 最大年龄 |
-| strategy | 'realistic' \| 'demographic' \| 'uniform' | 否   | 'realistic' | 生成策略 |
-
-**策略说明**:
-
-| 策略        | 说明                         | 适用场景     |
-| ----------- | ---------------------------- | ------------ |
-| realistic   | 正态分布，均值 35，标准差 10 | 通用用户数据 |
-| demographic | 按中国人口年龄比例分布       | 市场调研数据 |
-| uniform     | 均匀随机                     | 测试数据     |
-
-**示例**:
-
-```json
-{
-  "name": "age",
-  "generator": "age",
-  "params": {
-    "min": 18,
-    "max": 65,
-    "strategy": "realistic"
-  }
-}
-```
-
-**生成结果**: 28, 42, 35, 51, 23
-
----
-
-## 业务数据生成器
-
-### 1. 订单号 (orderId)
-
-**说明**: 生成订单号
-
-**参数**:
-
-| 参数名       | 类型    | 必填 | 默认值 | 说明         |
-| ------------ | ------- | ---- | ------ | ------------ |
-| prefix       | string  | 否   | 'ORD'  | 前缀         |
-| dateIncluded | boolean | 否   | true   | 是否包含日期 |
-
-**示例**:
-
-```json
-{
-  "name": "orderId",
-  "generator": "orderId",
-  "params": {
-    "prefix": "ORD",
-    "dateIncluded": true
-  }
-}
-```
-
-**生成结果**: ORD20240115001, ORD20240115002
-
----
-
-### 2. 价格 (price)
-
-**说明**: 生成真实的价格数据，支持多种分布策略
-
-**参数**:
-
-| 参数名   | 类型                                        | 必填 | 默认值      | 说明     |
-| -------- | ------------------------------------------- | ---- | ----------- | -------- |
-| min      | number                                      | 是   | 1           | 最低价   |
-| max      | number                                      | 是   | 9999        | 最高价   |
-| decimals | 0 \| 1 \| 2                                 | 否   | 2           | 小数位数 |
-| strategy | 'realistic' \| 'uniform' \| 'psychological' | 否   | 'realistic' | 生成策略 |
-
-**生成策略说明**:
-
-| 策略          | 说明                           | 适用场景     |
-| ------------- | ------------------------------ | ------------ |
-| realistic     | 对数正态分布，模拟真实商品价格 | 通用电商场景 |
-| uniform       | 均匀随机，所有价格等概率       | 测试数据     |
-| psychological | 心理定价，.99/.98/.95 结尾     | 营销场景     |
-
-**示例**:
-
-```json
-{
-  "name": "price",
-  "generator": "price",
-  "params": {
-    "min": 10,
-    "max": 5000,
-    "decimals": 2,
-    "strategy": "realistic"
-  }
-}
-```
-
-**生成结果**:
-
-- 真实分布: 299.00, 1599.50, 49.99, 1299.00
-- 心理定价: 299.99, 1599.98, 49.95, 1299.99
-- 均匀随机: 1234.56, 5678.90, 890.12
-
----
-
-### 3. 日期时间 (date)
-
-**说明**: 生成日期时间
-
-**参数**:
-
-| 参数名 | 类型   | 必填 | 默认值                | 说明     |
-| ------ | ------ | ---- | --------------------- | -------- |
-| format | string | 否   | 'YYYY-MM-DD HH:mm:ss' | 日期格式 |
-| min    | string | 否   | '2020-01-01'          | 最早日期 |
-| max    | string | 否   | 当前日期              | 最晚日期 |
-
-**示例**:
-
-```json
-{
-  "name": "createdAt",
-  "generator": "date",
-  "params": {
-    "format": "YYYY-MM-DD HH:mm:ss",
-    "min": "2024-01-01"
-  }
-}
-```
-
-**生成结果**: 2024-01-15 14:30:22
-
----
-
-### 4. 状态 (status)
-
-**说明**: 从选项中随机选择
-
-**参数**:
-
-| 参数名  | 类型     | 必填 | 默认值   | 说明         |
-| ------- | -------- | ---- | -------- | ------------ |
-| options | string[] | 是   | -        | 状态选项列表 |
-| weights | number[] | 否   | 均匀分布 | 各选项权重   |
-
-**示例**:
-
-```json
-{
-  "name": "status",
-  "generator": "status",
-  "params": {
-    "options": ["pending", "paid", "shipped", "completed"],
-    "weights": [30, 40, 20, 10]
-  }
-}
-```
-
-**生成结果**: pending, paid, shipped, completed
-
----
-
-### 5. 数量 (quantity)
-
-**说明**: 生成真实分布的数量数据
-
-**参数**:
-
-| 参数名   | 类型                               | 必填 | 默认值      | 说明     |
-| -------- | ---------------------------------- | ---- | ----------- | -------- |
-| min      | number                             | 否   | 1           | 最小值   |
-| max      | number                             | 否   | 100         | 最大值   |
-| strategy | 'realistic' \| 'bulk' \| 'uniform' | 否   | 'realistic' | 生成策略 |
-
-**策略说明**:
-
-| 策略      | 说明                        | 适用场景 |
-| --------- | --------------------------- | -------- |
-| realistic | 泊松分布，大多数购买 1-3 件 | 零售订单 |
-| bulk      | 10-100 之间均匀分布         | 批发订单 |
-| uniform   | 均匀随机                    | 测试数据 |
-
-**示例**:
-
-```json
-{
-  "name": "quantity",
-  "generator": "quantity",
-  "params": {
-    "min": 1,
-    "max": 50,
-    "strategy": "realistic"
-  }
-}
-```
-
-**生成结果**: 2, 1, 5, 3, 1
-
----
-
-### 6. 评分 (rating)
-
-**说明**: 生成真实分布的评分数据
-
-**参数**:
-
-| 参数名   | 类型                                 | 必填 | 默认值      | 说明     |
-| -------- | ------------------------------------ | ---- | ----------- | -------- |
-| min      | number                               | 否   | 1           | 最低分   |
-| max      | number                               | 否   | 5           | 最高分   |
-| decimals | number                               | 否   | 1           | 小数位数 |
-| strategy | 'realistic' \| 'strict' \| 'uniform' | 否   | 'realistic' | 生成策略 |
-
-**策略说明**:
-
-| 策略      | 说明               | 适用场景 |
-| --------- | ------------------ | -------- |
-| realistic | 偏态分布，偏向高分 | 电商平台 |
-| strict    | 偏态分布，偏向低分 | 严格评审 |
-| uniform   | 均匀随机           | 测试数据 |
-
-**示例**:
-
-```json
-{
-  "name": "rating",
-  "generator": "rating",
-  "params": {
-    "min": 1,
-    "max": 5,
-    "decimals": 1,
-    "strategy": "realistic"
-  }
-}
-```
-
-**生成结果**: 4.5, 4.8, 3.9, 5.0, 4.2
-
----
-
-### 7. 折扣 (discount)
-
-**说明**: 生成真实分布的折扣数据
-
-**参数**:
-
-| 参数名   | 类型                                        | 必填 | 默认值          | 说明     |
-| -------- | ------------------------------------------- | ---- | --------------- | -------- |
-| min      | number                                      | 否   | 0.1             | 最低折扣 |
-| max      | number                                      | 否   | 0.9             | 最高折扣 |
-| strategy | 'psychological' \| 'clearance' \| 'uniform' | 否   | 'psychological' | 生成策略 |
-
-**策略说明**:
-
-| 策略          | 说明                     | 适用场景 |
-| ------------- | ------------------------ | -------- |
-| psychological | 常见折扣点（8折、9折等） | 电商促销 |
-| clearance     | 大折扣区间（3-7折）      | 清仓处理 |
-| uniform       | 均匀随机                 | 测试数据 |
-
-**示例**:
-
-```json
-{
-  "name": "discount",
-  "generator": "discount",
-  "params": {
-    "min": 0.1,
-    "max": 0.9,
-    "strategy": "psychological"
-  }
-}
-```
-
-**生成结果**: 0.80, 0.90, 0.85, 0.95, 0.70
-
----
-
-### 8. 库存 (stock)
-
-**说明**: 生成真实分布的库存数据
-
-**参数**:
-
-| 参数名   | 类型                              | 必填 | 默认值      | 说明     |
-| -------- | --------------------------------- | ---- | ----------- | -------- |
-| min      | number                            | 否   | 0           | 最小库存 |
-| max      | number                            | 否   | 1000        | 最大库存 |
-| strategy | 'realistic' \| 'hot' \| 'uniform' | 否   | 'realistic' | 生成策略 |
-
-**策略说明**:
-
-| 策略      | 说明                     | 适用场景 |
-| --------- | ------------------------ | -------- |
-| realistic | 指数分布，大多数库存较少 | 通用商品 |
-| hot       | 低库存区间（0-50）       | 热销商品 |
-| uniform   | 均匀随机                 | 测试数据 |
-
-**示例**:
-
-```json
-{
-  "name": "stock",
-  "generator": "stock",
-  "params": {
-    "min": 0,
-    "max": 500,
-    "strategy": "realistic"
-  }
-}
-```
-
-**生成结果**: 23, 8, 156, 45, 12
-
----
-
-## 技术数据生成器
-
-### 1. UUID (uuid)
-
-**说明**: 生成 UUID
-
-**参数**:
-
-| 参数名  | 类型         | 必填 | 默认值 | 说明      |
-| ------- | ------------ | ---- | ------ | --------- |
-| version | 'v4' \| 'v1' | 否   | 'v4'   | UUID 版本 |
-
-**示例**:
-
-```json
-{
-  "name": "id",
-  "generator": "uuid",
-  "params": {
-    "version": "v4"
-  }
-}
-```
-
-**生成结果**: 550e8400-e29b-41d4-a716-446655440000
-
----
-
-### 2. IPv4 地址 (ipv4)
-
-**说明**: 生成 IPv4 地址
-
-**参数**:
-
-| 参数名  | 类型    | 必填 | 默认值 | 说明         |
-| ------- | ------- | ---- | ------ | ------------ |
-| private | boolean | 否   | false  | 是否私有地址 |
-
-**示例**:
-
-```json
-{
-  "name": "ip",
-  "generator": "ipv4",
-  "params": {
-    "private": true
-  }
-}
-```
-
-**生成结果**: 192.168.1.1, 10.0.0.1
-
----
-
-### 3. URL (url)
-
-**说明**: 生成 URL
-
-**参数**:
-
-| 参数名   | 类型              | 必填 | 默认值        | 说明 |
-| -------- | ----------------- | ---- | ------------- | ---- |
-| protocol | 'http' \| 'https' | 否   | 'https'       | 协议 |
-| domain   | string            | 否   | 'example.com' | 域名 |
-
-**示例**:
-
-```json
-{
-  "name": "website",
-  "generator": "url",
-  "params": {
-    "protocol": "https",
-    "domain": "shop.com"
-  }
-}
-```
-
-**生成结果**: https://shop.com/product/123
-
----
-
-## 基础类型生成器
-
-### 1. 随机整数 (randomInt)
-
-**说明**: 生成指定范围的随机整数
-
-**参数**:
-
-| 参数名 | 类型   | 必填 | 默认值 | 说明   |
-| ------ | ------ | ---- | ------ | ------ |
-| min    | number | 是   | -      | 最小值 |
-| max    | number | 是   | -      | 最大值 |
-
-**示例**:
-
-```json
-{
-  "name": "age",
-  "generator": "randomInt",
-  "params": {
-    "min": 18,
-    "max": 60
-  }
-}
-```
-
-**生成结果**: 25, 42, 18, 60
-
----
-
-### 2. 随机浮点数 (randomFloat)
-
-**说明**: 生成指定范围的随机浮点数
-
-**参数**:
-
-| 参数名   | 类型   | 必填 | 默认值 | 说明     |
-| -------- | ------ | ---- | ------ | -------- |
-| min      | number | 是   | -      | 最小值   |
-| max      | number | 是   | -      | 最大值   |
-| decimals | number | 否   | 2      | 小数位数 |
-
-**示例**:
-
-```json
-{
-  "name": "score",
-  "generator": "randomFloat",
-  "params": {
-    "min": 0,
-    "max": 100,
-    "decimals": 1
-  }
-}
-```
-
-**生成结果**: 85.3, 42.7, 99.9
-
----
-
-### 3. 随机字符串 (randomString)
-
-**说明**: 生成指定长度的随机字符串
-
-**参数**:
-
-| 参数名  | 类型   | 必填 | 默认值         | 说明       |
-| ------- | ------ | ---- | -------------- | ---------- |
-| length  | number | 是   | -              | 字符串长度 |
-| charset | string | 否   | 'alphanumeric' | 字符集     |
-
-**示例**:
-
-```json
-{
-  "name": "code",
-  "generator": "randomString",
-  "params": {
-    "length": 8,
-    "charset": "alphanumeric"
-  }
-}
-```
-
-**生成结果**: aB3kL9mN, xY7zW2pQ
-
----
-
-### 4. 从列表选择 (fromList)
-
-**说明**: 从选项列表中随机选择
-
-**参数**:
-
-| 参数名  | 类型     | 必填 | 默认值   | 说明     |
-| ------- | -------- | ---- | -------- | -------- |
-| options | any[]    | 是   | -        | 选项列表 |
-| weights | number[] | 否   | 均匀分布 | 权重     |
-
-**示例**:
-
-```json
-{
-  "name": "category",
-  "generator": "fromList",
-  "params": {
-    "options": ["电子产品", "服装", "食品", "图书"],
-    "weights": [40, 30, 20, 10]
-  }
-}
-```
-
-**生成结果**: 电子产品, 服装, 食品
-
----
-
-## 生成器选择界面
-
-### 界面设计
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  选择生成器                                                       │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  搜索: [搜索生成器...                                          ] │
-│                                                                     │
-│  分类筛选                                                        │
-│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐      │
-│  │ 全部    │ │ 个人信息 │ │ 业务数据 │ │ 技术数据 │ │ 基础类型 │      │
-│  └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘      │
-│                                                                     │
-│  生成器列表                                                       │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │  个人信息                                                     │ │
-│  │  ┌─────────────────────────────────────────────────────────┐ │ │
-│  │  │ 中文姓名        生成中文姓名，如张三                     │ │ │
-│  │  │ 邮箱地址        生成邮箱地址                            │ │ │
-│  │  │ 中国手机号      生成11位手机号                          │ │ │
-│  │  │ 身份证号        生成18位身份证号                        │ │ │
-│  │  │ 中文地址        生成中国地址                            │ │ │
-│  │  └─────────────────────────────────────────────────────────┘ │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```

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

@@ -1,481 +0,0 @@
-# 规则管理
-
-## 功能概览
-
-| 功能     | 说明                 | 优先级 |
-| -------- | -------------------- | ------ |
-| 保存规则 | 将当前配置保存为模板 | P0     |
-| 规则列表 | 查看所有已保存的规则 | P0     |
-| 规则搜索 | 按关键词搜索规则     | P1     |
-| 规则编辑 | 修改已保存的规则     | P0     |
-| 规则删除 | 删除不需要的规则     | P0     |
-| 规则加载 | 一键加载规则配置     | P0     |
-| 规则复制 | 复制规则配置         | P1     |
-| 规则导出 | 导出为 JSON 文件     | P1     |
-| 规则导入 | 从 JSON 文件导入     | P1     |
-
-## 规则数量限制
-
-- **最大规则数量**: 20 条
-- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
-- **解决方式**: 用户需要删除已有规则后才能保存新规则
-
----
-
-## 数据结构
-
-### 规则模板
-
-```typescript
-interface DataRule {
-  id: string; // 唯一标识
-  name: string; // 规则名称
-  description?: string; // 规则描述
-  fields: FieldConfig[]; // 字段配置
-  options: {
-    total: number; // 生成数量
-    format: 'json' | 'csv';
-    defaultEmptyRate: number; // 默认空值率（0-100）
-  };
-  metadata: {
-    createdAt: number; // 创建时间
-    updatedAt: number; // 更新时间
-    lastUsedAt?: number; // 最后使用时间
-    useCount: number; // 使用次数
-  };
-}
-```
-
-### 字段配置
-
-```typescript
-interface FieldConfig {
-  id: string; // 字段唯一标识
-  name: string; // 字段名
-  generator: string; // 生成器名称
-  params: Record<string, any>; // 生成器参数
-  unique: boolean; // 唯一性约束
-  required: boolean; // 是否必填
-  emptyRate?: number; // 选填字段的空值概率（0-100）
-}
-```
-
----
-
-## 功能详情
-
-### 1. 保存规则
-
-**触发方式**: 用户点击"保存规则"按钮
-
-**界面设计**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  保存规则                                                            │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  规则信息                                                            │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │  规则名称:                                                     │ │
-│  │  ┌─────────────────────────────────────────────────────────┐ │ │
-│  │  │ [电商用户数据 - 测试用                                  ]│ │ │
-│  │  └─────────────────────────────────────────────────────────┘ │ │
-│  │                                                               │ │
-│  │  规则描述 (可选):                                              │ │
-│  │  ┌─────────────────────────────────────────────────────────┐ │ │
-│  │  │ [用于测试用户注册功能，包含姓名、邮箱、手机号            ]│ │ │
-│  │  └─────────────────────────────────────────────────────────┘ │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  规则预览                                                            │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 字段数量: 4 个                                                 │ │
-│  │ • name (中文姓名)                                              │ │
-│  │ • email (邮箱地址)                                             │ │
-│  │ • phone (手机号)                                               │ │
-│  │ • age (年龄)                                                   │ │
-│  │                                                               │ │
-│  │ 生成数量: 100 条                                               │ │
-│  │ 数据格式: JSON                                                 │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [保存]  [取消]                                                      │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**保存逻辑**:
-
-1. 验证规则名称不为空
-2. 检查规则数量是否达到上限（20 条）
-3. 如果达到上限，显示提示"已达到最大规则数量"
-4. 生成唯一 ID
-5. 设置创建时间和更新时间
-6. 初始化使用次数为 0
-7. 保存到 localStorage
-
----
-
-### 2. 规则列表
-
-**界面设计**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  规则管理                                                            │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  搜索: [搜索规则名称...                                            ] │
-│                                                                     │
-│  规则列表 (已保存 15/20 条)                                          │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │                                                               │ │
-│  │  ┌─────────────────────────────────────────────────────────┐ │ │
-│  │  │ 电商用户数据 - 测试用                                     │ │ │
-│  │  │ ─────────────────────────────────────────────────────── │ │ │
-│  │  │ 用于测试用户注册功能，包含姓名、邮箱、手机号              │ │ │
-│  │  │ 4 个字段 | 100 条 | JSON                                  │ │ │
-│  │  │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用        │ │ │
-│  │  │                                                         │ │ │
-│  │  │ [加载]  [复制]  [导出]  [编辑]  [删除]                     │ │ │
-│  │  └─────────────────────────────────────────────────────────┘ │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [导入规则]  [导出全部]  [清空全部]                                  │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**列表项信息**:
-
-- 规则名称
-- 规则描述
-- 字段数量、生成数量、数据格式
-- 创建时间、最后使用时间
-- 操作按钮
-
----
-
-### 3. 规则搜索
-
-**搜索逻辑**:
-
-- 支持按规则名称搜索
-- 支持按规则描述搜索
-- 搜索为模糊匹配，不区分大小写
-
-**实现方式**:
-
-```typescript
-search(keyword: string): DataRule[] {
-  const rules = this.getAll();
-  const lowerKeyword = keyword.toLowerCase();
-
-  return rules.filter(r =>
-    r.name.toLowerCase().includes(lowerKeyword) ||
-    r.description?.toLowerCase().includes(lowerKeyword)
-  );
-}
-```
-
----
-
-### 4. 规则编辑
-
-**界面设计**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  编辑规则 - 电商用户数据                                             │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  基本信息                                                            │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 规则名称: [电商用户数据 - 测试用                              ]│ │
-│  │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号        ]│ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  字段配置 (可直接编辑)                                                │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │                                                               │ │
-│  │  1. name        [中文姓名 ▼]  [配置] [删除] [上移][下移]      │ │
-│  │  2. email       [邮箱地址 ▼]  [配置] [删除] [上移][下移]      │ │
-│  │  3. phone       [手机号   ▼]  [配置] [删除] [上移][下移]      │ │
-│  │  4. age         [年龄     ▼]  [配置] [删除] [上移][下移]      │ │
-│  │                                                               │ │
-│  │  [+ 添加字段]                                                 │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  生成选项                                                            │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 数量: [100]  格式: [JSON ▼]                                   │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [保存修改]  [取消]                                                  │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**编辑逻辑**:
-
-1. 加载原规则配置到编辑器
-2. 用户修改配置
-3. 点击保存时更新规则
-4. 更新 metadata.updatedAt
-5. 保存到 localStorage
-
----
-
-### 5. 规则删除
-
-**删除流程**:
-
-1. 点击删除按钮
-2. 弹出确认对话框
-3. 确认后删除规则
-4. 刷新规则列表
-
-**确认对话框**:
-
-```
-┌─────────────────────────────────────────┐
-│  确认删除                            │
-├─────────────────────────────────────────┤
-│                                         │
-│  确定要删除规则 "电商用户数据" 吗？      │
-│                                         │
-│  此操作不可撤销。                        │
-│                                         │
-│  [取消]  [删除]                     │
-│                                         │
-└─────────────────────────────────────────┘
-```
-
----
-
-### 6. 规则加载
-
-**加载流程**:
-
-1. 点击"加载"按钮
-2. 将规则配置应用到当前编辑器
-3. 更新预览数据
-4. 记录使用时间和次数
-
-**实现方式**:
-
-```typescript
-loadRule(ruleId: string): void {
-  const rule = this.storage.getById(ruleId);
-
-  // 应用规则配置
-  this.setFields(rule.fields);
-  this.setOptions(rule.options);
-
-  // 记录使用
-  this.storage.recordUse(ruleId);
-
-  // 更新预览
-  this.updatePreview();
-}
-```
-
----
-
-### 7. 规则复制
-
-**复制逻辑**:
-
-1. 点击"复制"按钮
-2. 创建规则的副本
-3. 名称添加"(副本)"后缀
-4. 生成新的 ID
-5. 保存为新规则
-
----
-
-### 8. 规则导出
-
-**导出界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  导出规则                                                            │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  选择要导出的规则:                                                    │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ ☑ 电商用户数据 - 测试用 (4个字段, 100条)                       │ │
-│  │ ☑ 电商订单数据 - 测试用 (6个字段, 500条)                       │ │
-│  │ ☐ 用户登录数据 - 测试用 (3个字段, 50条)                       │ │
-│  │                                                               │ │
-│  │ [全选]  [全不选]                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  导出格式:                                                            │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ ○ 导出为单个 JSON 文件 (所有规则合并)                          │ │
-│  │ ● 导出为多个 JSON 文件 (每个规则一个文件)                      │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [导出]  [取消]                                                      │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**导出格式**:
-
-```json
-{
-  "version": "1.0",
-  "exportedAt": "2024-01-20T10:15:45.000Z",
-  "rules": [
-    {
-      "id": "rule_123456",
-      "name": "电商用户数据 - 测试用",
-      "description": "用于测试用户注册功能",
-      "fields": [...],
-      "options": {...},
-      "metadata": {...}
-    }
-  ]
-}
-```
-
----
-
-### 9. 规则导入
-
-**导入界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  导入规则                                                            │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  选择导入方式:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │                                                               │ │
-│  │  ○ 从文件导入                                                 │ │
-│  │    ┌─────────────────────────────────────────────────────┐   │ │
-│  │    │ 拖拽文件到这里，或 [点击选择文件]                      │   │ │
-│  │    │ 支持格式: .json                                      │   │ │
-│  │    └─────────────────────────────────────────────────────┘   │ │
-│  │                                                               │ │
-│  │  ○ 从剪贴板粘贴                                               │ │
-│  │    ┌─────────────────────────────────────────────────────┐   │ │
-│  │    │ 粘贴 JSON 规则内容...                                │   │ │
-│  │    └─────────────────────────────────────────────────────┘   │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  预览导入内容:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 格式验证通过                                                   │ │
-│  │ 规则数量: 2 个                                                │ │
-│  │ • 电商用户数据 (4个字段)                                       │ │
-│  │ • 电商订单数据 (6个字段)                                       │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [导入]  [取消]                                                      │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**导入逻辑**:
-
-1. 解析 JSON 文件
-2. 验证格式是否正确
-3. 预览导入内容
-4. 确认后逐条导入
-5. 生成新 ID 避免冲突
-6. 处理导入结果（成功/失败数量）
-
----
-
-## 存储机制
-
-### 本地存储
-
-使用 localStorage 存储规则数据:
-
-```typescript
-class RuleStorage {
-  private readonly STORAGE_KEY = 'testDataGenerator_rules';
-
-  // 获取所有规则
-  getAll(): DataRule[] {
-    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));
-    }
-  }
-}
-```
-
-### 存储限制
-
-- **规则数量限制**: 最多 20 条
-- localStorage 容量: 5-10MB（浏览器限制）
-- 单个规则约 1-5KB
-- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
-
----
-
-## 功能亮点
-
-| 亮点     | 说明                           |
-| -------- | ------------------------------ |
-| 本地存储 | 数据保存在浏览器本地，无需后端 |
-| 快速复用 | 一键加载已保存的规则           |
-| 导入导出 | 支持 JSON 文件导入导出         |
-| 使用统计 | 记录使用次数和时间             |
-| 搜索筛选 | 支持关键词搜索                 |

docs/test-data-generator/ui-design.md

@@ -1,489 +0,0 @@
-# 界面设计
-
-## 设计原则
-
-1. **简洁直观** - 一目了然的布局
-2. **操作便捷** - 减少点击次数
-3. **实时反馈** - 配置即预览
-4. **响应式** - 支持多种屏幕尺寸
-
----
-
-## 页面结构
-
-### 主页面布局
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  🧪 测试数据生成器                                          [帮助] │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  ┌─────────────────────────────────────┐ ┌───────────────────────┐ │
-│  │  字段配置                             │ │  数据预览              │ │
-│  │                                     │ │                       │ │
-│  │  [+ 添加字段]                        │ │  [实时预览数据]       │ │
-│  │                                     │ │                       │ │
-│  │  字段列表...                         │ │                       │ │
-│  │                                     │ │                       │ │
-│  └─────────────────────────────────────┘ └───────────────────────┘ │
-│                                                                     │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │  生成选项                                                       │ │
-│  │  数量、格式、约束...                                          │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │  操作栏                                                     │ │
-│  │  [生成]  [保存规则]  [规则管理]                       │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-## 组件设计
-
-### 1. 字段列表组件
-
-**功能**: 展示和管理所有字段
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  字段配置                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  [+ 添加字段]                                                        │
-│                                                                     │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 1. name        [中文姓名 ▼]  [配置] [删除] [上移][下移]             │ │
-│  │ 2. email       [邮箱地址 ▼]  [配置] [删除] [上移][下移]             │ │
-│  │ 3. phone       [手机号   ▼]  [配置] [删除] [上移][下移]             │ │
-│  │ 4. age         [年龄     ▼]  [配置] [删除] [上移][下移]             │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [+ 添加字段]                                                        │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**交互**:
-
-- 点击字段名可编辑
-- 点击生成器下拉框可切换生成器
-- 点击 配置 展开参数配置
-- 点击 删除 删除字段
-- 点击 上移下移 调整顺序
-
----
-
-### 2. 字段配置组件
-
-**功能**: 配置单个字段的详细参数
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  字段配置                                                            │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  基础配置                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 字段名称:  [name                                         ]   │ │
-│  │ 字段描述:  [用户姓名                                     ]   │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  生成器选择                                                      │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 分类: [个人信息 ▼]                                         │   │
-│  │ 生成器: [中文姓名 ▼]                                        │   │
-│  │ 说明: 生成中文姓名，如张三、李四                           │   │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  参数配置                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 姓氏池: [百家姓前100 ▼]                                      │ │
-│  │ 名字长度: [1] ~ [2]                                          │ │
-│  │ ☑ 唯一性约束                                                 │ │
-│  │ ☑ 必填                                                       │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  空值率设置 (仅选填字段显示)                                       │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 空值概率: [====|----] 50%                                     │ │
-│  │ 预设: [低 20%] [中 50%] [高 80%]                              │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  预览示例                                                         │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 张伟, 李娜, 王强, 赵敏, 刘洋                                  │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [保存]  [取消]                                                │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**交互说明**:
-
-- **必填复选框**: 勾选后该字段必填，100% 生成数据
-- **空值率设置**: 仅当选填时显示，控制该字段生成空值的概率
-- **预设按钮**: 快速设置常用空值率（低/中/高）
-- **空值率滑块**: 精细调节空值概率（0-100%）
-
----
-
-### 3. 数据预览组件
-
-**功能**: 实时预览生成的数据
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  数据预览                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  预览: 前 10 条                                                   │
-│                                                                     │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ {                                                             │ │
-│  │   "name": "张伟",                                             │ │
-│  │   "email": "zhangwei@qq.com",                                 │ │
-│  │   "phone": "13812345678",                                     │ │
-│  │   "age": 28                                                   │ │
-│  │ },                                                            │ │
-│  │ {                                                             │ │
-│  │   "name": "李娜",                                             │ │
-│  │   "email": "lina@163.com",                                    │ │
-│  │   "phone": "13987654321",                                     │ │
-│  │   "age": 35                                                   │ │
-│  │ },                                                            │ │
-│  │ ...                                                           │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  格式切换:                                                        │
-│  [JSON]  [CSV]                                                      │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**功能**:
-
-- 实时更新预览
-- 支持格式切换
-- 分页显示更多数据
-- 一键复制
-
----
-
-### 4. 生成选项组件
-
-**功能**: 配置生成参数
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  生成选项                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  ┌─────────────────┐ ┌─────────────────┐ ┌───────────────────────┐ │
-│  │ 生成数量      │ │ 数据格式      │ │ 约束条件           │ │
-│  │                 │ │                 │ │                       │ │
-│  │ [100         ] │ │ ○ JSON          │ │ ☑ name 唯一          │ │
-│  │ [10 ▼]          │ │ ○ CSV           │ │ ☑ email 唯一         │ │
-│  │ [100 ▼]         │ │                 │ │ ☑ phone 唯一         │ │
-│  │ [自定义    ]  │ │                 │ │ ☐ age 唯一           │ │
-│  │                 │ │                 │ │                       │ │
-│  └─────────────────┘ └─────────────────┘ └───────────────────────┘ │
-│                                                                     │
-│  默认空值率 (选填字段)                                             │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 空值概率: [====|----] 50%                                     │ │
-│  │ 预设: [低 20%] [中 50%] [高 80%]                              │ │
-│  │ 说明: 未单独设置空值率的选填字段将使用此默认值                │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-### 5. 操作栏组件
-
-**功能**: 顶部操作按钮
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  操作栏                                                           │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  [生成数据]  [保存规则]  [规则管理]  [导入规则]  [导出]│
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-### 6. 生成结果组件
-
-**功能**: 展示生成结果，包含成功、警告、错误三种状态
-
-**成功状态界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  生成结果                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  生成完成                                                          │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [成功图标] 成功生成 100 条数据，耗时 1234ms                  │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  数据统计:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ • 总条数: 100                                                 │ │
-│  │ • 成功条数: 100                                               │ │
-│  │ • 失败条数: 0                                                 │ │
-│  │ • 文件大小: 12.5 KB                                           │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  数据预览:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [JSON 格式预览...]                                            │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  导出选项:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [复制全部]  [下载 JSON]  [下载 CSV]                           │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [关闭]                                                           │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**警告状态界面（部分字段失败）**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  生成结果                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  部分字段生成失败                                                  │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [警告图标] 有 2 个字段生成失败                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  失败详情:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [警告图标] "phone" - 重试 100 次后仍存在重复                  │ │
-│  │ [警告图标] "email" - 重试 100 次后仍存在重复                  │ │
-│  │                                                               │ │
-│  │ 提示: 这些字段的值已设置为空，您可以尝试减少生成数量          │ │
-│  │       或调整字段配置                                          │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  数据统计:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ • 总条数: 100                                                 │ │
-│  │ • 成功条数: 98                                                │ │
-│  │ • 失败条数: 2                                                 │ │
-│  │ • 文件大小: 12.3 KB                                           │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  数据预览:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [JSON 格式预览...]                                            │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  导出选项:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [复制全部]  [下载 JSON]  [下载 CSV]                           │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [关闭]                                                           │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-**错误状态界面（生成失败）**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  生成失败                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ [错误图标] 生成过程中发生错误                                │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  错误详情:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │                                                               │ │
-│  │  错误类型: 生成器不存在                                      │ │
-│  │  错误信息: 字段 "phone" 的生成器 "chinesePhone1" 不存在      │ │
-│  │  错误位置: 字段配置第 2 行                                   │ │
-│  │                                                               │ │
-│  │  建议操作:                                                   │ │
-│  │  1. 检查字段配置中的生成器名称是否正确                       │ │
-│  │  2. 确认该生成器已正确注册                                   │ │
-│  │                                                               │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [重新配置]  [关闭]                                                │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-### 6.1 Toast 提示组件
-
-**功能**: 显示临时提示信息
-
-**成功提示**:
-
-```
-┌─────────────────────────────────────┐
-│ [成功图标] 数据生成成功             │
-└─────────────────────────────────────┘
-```
-
-**警告提示**:
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│ [警告图标] 有 2 个字段生成失败：phone、email               │
-└─────────────────────────────────────────────────────────────┘
-```
-
-**错误提示**:
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│ [错误图标] 生成失败：生成器 "xxx" 不存在                   │
-└─────────────────────────────────────────────────────────────┘
-```
-
----
-
-### 6.2 Modal 提示组件
-
-**功能**: 显示严重错误的模态框
-
-**错误模态框**:
-
-```
-┌─────────────────────────────────────────────────────────────┐
-│                                                             │
-│  ┌───────────────────────────────────────────────────────┐ │
-│  │                                                       │ │
-│  │  [错误图标] 生成失败                                  │ │
-│  │                                                       │ │
-│  │  字段 "phone" 的生成器 "chinesePhone1" 不存在        │ │
-│  │                                                       │ │
-│  │  请检查字段配置中的生成器名称是否正确                 │ │
-│  │                                                       │ │
-│  │  ─────────────────────────────────────────────────── │ │
-│  │                                                       │ │
-│  │                    [ 确定 ]                           │ │
-│  │                                                       │ │
-│  └───────────────────────────────────────────────────────┘ │
-│                                                             │
-└─────────────────────────────────────────────────────────────┘
-```
-
----
-
-### 7. 规则管理组件
-
-**功能**: 管理已保存的规则
-
-**界面**:
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│  规则管理                                                         │
-├─────────────────────────────────────────────────────────────────────┤
-│                                                                     │
-│  搜索: [搜索规则名称...                                          ] │
-│                                                                     │
-│  规则列表:                                                        │
-│  ┌───────────────────────────────────────────────────────────────┐ │
-│  │ 电商用户数据 - 测试用                                       │ │
-│  │    用于测试用户注册功能                                     │ │
-│  │    4 个字段 | 100 条 | JSON                                │ │
-│  │    2024-01-15 创建 | 使用 12 次                           │ │
-│  │    [加载]  [编辑]  [导出]  [删除]                 │ │
-│  │                                                               │ │
-│  │ 电商订单数据 - 测试用                                       │ │
-│  │    用于测试订单功能                                         │ │
-│  │    6 个字段 | 500 条 | JSON                                │ │
-│  │    2024-01-16 创建 | 使用 8 次                            │ │
-│  │    [加载]  [编辑]  [导出]  [删除]                 │ │
-│  └───────────────────────────────────────────────────────────────┘ │
-│                                                                     │
-│  [导入规则]  [导出全部]                                        │
-│                                                                     │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
----
-
-## 响应式设计
-
-### 桌面端 (>1024px)
-
-- 左右分栏布局
-- 字段配置区占 60%
-- 数据预览区占 40%
-
----
-
-## 交互细节
-
-### 拖拽排序
-
-- 字段支持拖拽排序（基于 @dnd-kit/sortable）
-- 拖拽手柄（GripVertical 图标）位于字段左侧
-- 拖拽时显示半透明效果和阴影
-- 释放后立即生效，自动更新字段顺序
-
-### 实时预览
-
-- 配置参数时实时更新预览
-- 延迟 300ms 防抖，避免频繁重渲染
-- 预览最多显示 10 条示例数据
-- 生成完成后切换为完整结果预览
-
-### 虚拟列表
-
-- 数据量超过 100 条时自动启用虚拟滚动
-- 仅渲染可见区域的行，大幅减少 DOM 节点
-- 行高固定 20px，支持快速滚动
-
----
-
-## 主题支持
-
-### 浅色主题
-
-- 背景色: #ffffff
-- 文字色: #333333
-- 边框色: #e0e0e0
-- 主题色: #3b82f6
-
-### 深色主题
-
-- 背景色: #1a1a1a
-- 文字色: #ffffff
-- 边框色: #404040
-- 主题色: #60a5fa

public/README.md

@@ -12,24 +12,9 @@
 | `icon/48.png`  | 48×48 图标（扩展管理页）         |
 | `icon/96.png`  | 96×96 图标                       |
 | `icon/128.png` | 128×128 图标（Chrome Web Store） |
-| `_locales/`    | Chrome 扩展本地化资源            |
+| `wxt.svg`      | WXT 框架标志 SVG 图标            |
-
-## 本地化资源
-
-项目使用 Chrome 扩展标准 `chrome.i18n`，默认语言在 `wxt.config.ts` 中配置为 `zh_CN`。
-
-| 文件/目录                      | 用途                                               |
-| ------------------------------ | -------------------------------------------------- |
-| `_locales/zh_CN/messages.json` | 默认中文语言包，包含功能名、描述、按钮、提示等翻译 |
-
-添加或修改文案时：
-
-- 使用 Chrome 扩展消息格式：`"key": { "message": "文本" }`
-- key 使用下划线分隔，例如 `testDataGenerator_title`
-- 代码中通过 `useI18n` 或 `getMessage` 读取，不要新增 `i18n/locales` 目录
 
 ## 注意事项
 
 - 修改图标后需同步更新 `wxt.config.ts` 中的 manifest 配置
 - 图标格式推荐使用 PNG，确保透明背景
-- 修改 `_locales` 后需确认 `manifest.default_locale` 与语言目录名一致

public/_locales/zh_CN/messages.json

@@ -7,6 +7,7 @@
     "message": "清理",
     "description": "Translation key: buttons_clear"
   },
+
   "messages_copySuccess": {
     "message": "已复制到剪贴板",
     "description": "Translation key: messages_copySuccess"
@@ -895,6 +896,7 @@
     "message": "在标签页打开",
     "description": "Translation key: buttons_openInTab"
   },
+
   "common_errorBoundary_title": {
     "message": "糟糕，出了点问题",
     "description": "Translation key: errorBoundary_title"
@@ -918,387 +920,5 @@
   "common_pageErrorBoundary_description": {
     "message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
     "description": "Translation key: pageErrorBoundary_description"
-  },
-  "testDataGenerator_title": {
-    "message": "测试数据生成器",
-    "description": "Translation key: testDataGenerator_title"
-  },
-  "testDataGenerator_description": {
-    "message": "自定义字段配置，批量生成测试数据",
-    "description": "Translation key: testDataGenerator_description"
-  },
-  "testDataGenerator_fields": {
-    "message": "字段",
-    "description": "Translation key: testDataGenerator_fields"
-  },
-  "testDataGenerator_addField": {
-    "message": "添加字段",
-    "description": "Translation key: testDataGenerator_addField"
-  },
-  "testDataGenerator_noFields": {
-    "message": "暂无字段",
-    "description": "Translation key: testDataGenerator_noFields"
-  },
-  "testDataGenerator_addFieldHint": {
-    "message": "点击上方按钮添加第一个字段",
-    "description": "Translation key: testDataGenerator_addFieldHint"
-  },
-  "testDataGenerator_unique": {
-    "message": "唯一",
-    "description": "Translation key: testDataGenerator_unique"
-  },
-  "testDataGenerator_fieldName": {
-    "message": "字段名称",
-    "description": "Translation key: testDataGenerator_fieldName"
-  },
-  "testDataGenerator_fieldNamePlaceholder": {
-    "message": "请输入字段名称",
-    "description": "Translation key: testDataGenerator_fieldNamePlaceholder"
-  },
-  "testDataGenerator_fieldDescription": {
-    "message": "字段描述",
-    "description": "Translation key: testDataGenerator_fieldDescription"
-  },
-  "testDataGenerator_fieldDescriptionPlaceholder": {
-    "message": "可选，添加字段说明",
-    "description": "Translation key: testDataGenerator_fieldDescriptionPlaceholder"
-  },
-  "testDataGenerator_required": {
-    "message": "必填",
-    "description": "Translation key: testDataGenerator_required"
-  },
-  "testDataGenerator_nullRate": {
-    "message": "空值率",
-    "description": "Translation key: testDataGenerator_nullRate"
-  },
-  "testDataGenerator_uniqueConstraint": {
-    "message": "唯一性约束",
-    "description": "Translation key: testDataGenerator_uniqueConstraint"
-  },
-  "testDataGenerator_generator": {
-    "message": "数据生成器",
-    "description": "Translation key: testDataGenerator_generator"
-  },
-  "testDataGenerator_generatorParams": {
-    "message": "生成器参数",
-    "description": "Translation key: testDataGenerator_generatorParams"
-  },
-  "testDataGenerator_searchGenerator": {
-    "message": "搜索生成器...",
-    "description": "Translation key: testDataGenerator_searchGenerator"
-  },
-  "testDataGenerator_searchResults": {
-    "message": "搜索结果",
-    "description": "Translation key: testDataGenerator_searchResults"
-  },
-  "testDataGenerator_fieldConfig": {
-    "message": "字段配置",
-    "description": "Translation key: testDataGenerator_fieldConfig"
-  },
-  "testDataGenerator_ruleManagement": {
-    "message": "规则管理",
-    "description": "Translation key: testDataGenerator_ruleManagement"
-  },
-  "testDataGenerator_selectFieldToEdit": {
-    "message": "选择左侧字段进行编辑",
-    "description": "Translation key: testDataGenerator_selectFieldToEdit"
-  },
-  "testDataGenerator_count": {
-    "message": "生成数量",
-    "description": "Translation key: testDataGenerator_count"
-  },
-  "testDataGenerator_format": {
-    "message": "数据格式",
-    "description": "Translation key: testDataGenerator_format"
-  },
-  "testDataGenerator_generate": {
-    "message": "生成数据",
-    "description": "Translation key: testDataGenerator_generate"
-  },
-  "testDataGenerator_cancel": {
-    "message": "取消",
-    "description": "Translation key: testDataGenerator_cancel"
-  },
-  "testDataGenerator_progress": {
-    "message": "已生成 {{current}} / {{total}} 条",
-    "description": "Translation key: testDataGenerator_progress"
-  },
-  "testDataGenerator_estimatedTime": {
-    "message": "预计剩余 {{time}} 秒",
-    "description": "Translation key: testDataGenerator_estimatedTime"
-  },
-  "testDataGenerator_dataPreview": {
-    "message": "数据预览",
-    "description": "Translation key: testDataGenerator_dataPreview"
-  },
-  "testDataGenerator_noData": {
-    "message": "暂无数据",
-    "description": "Translation key: testDataGenerator_noData"
-  },
-  "testDataGenerator_noDataHint": {
-    "message": "配置字段后点击「生成数据」按钮",
-    "description": "Translation key: testDataGenerator_noDataHint"
-  },
-  "testDataGenerator_sampleData": {
-    "message": "示例数据",
-    "description": "Translation key: testDataGenerator_sampleData"
-  },
-  "testDataGenerator_copied": {
-    "message": "已复制",
-    "description": "Translation key: testDataGenerator_copied"
-  },
-  "testDataGenerator_copy": {
-    "message": "复制",
-    "description": "Translation key: testDataGenerator_copy"
-  },
-  "testDataGenerator_pageInfo": {
-    "message": "第 {{current}} / {{total}} 页",
-    "description": "Translation key: testDataGenerator_pageInfo"
-  },
-  "testDataGenerator_prevPage": {
-    "message": "上一页",
-    "description": "Translation key: testDataGenerator_prevPage"
-  },
-  "testDataGenerator_nextPage": {
-    "message": "下一页",
-    "description": "Translation key: testDataGenerator_nextPage"
-  },
-  "testDataGenerator_success": {
-    "message": "生成成功",
-    "description": "Translation key: testDataGenerator_success"
-  },
-  "testDataGenerator_generateSuccess": {
-    "message": "生成完成",
-    "description": "Translation key: testDataGenerator_generateSuccess"
-  },
-  "testDataGenerator_records": {
-    "message": "条数据",
-    "description": "Translation key: testDataGenerator_records"
-  },
-  "testDataGenerator_partialSuccess": {
-    "message": "部分成功",
-    "description": "Translation key: testDataGenerator_partialSuccess"
-  },
-  "testDataGenerator_failed": {
-    "message": "生成失败",
-    "description": "Translation key: testDataGenerator_failed"
-  },
-  "testDataGenerator_totalCount": {
-    "message": "总条数",
-    "description": "Translation key: testDataGenerator_totalCount"
-  },
-  "testDataGenerator_successCount": {
-    "message": "成功",
-    "description": "Translation key: testDataGenerator_successCount"
-  },
-  "testDataGenerator_duration": {
-    "message": "耗时",
-    "description": "Translation key: testDataGenerator_duration"
-  },
-  "testDataGenerator_warnings": {
-    "message": "警告",
-    "description": "Translation key: testDataGenerator_warnings"
-  },
-  "testDataGenerator_moreWarnings": {
-    "message": "还有 {{count}} 条警告",
-    "description": "Translation key: testDataGenerator_moreWarnings"
-  },
-  "testDataGenerator_export": {
-    "message": "导出数据",
-    "description": "Translation key: testDataGenerator_export"
-  },
-  "testDataGenerator_copyJSON": {
-    "message": "复制 JSON",
-    "description": "Translation key: testDataGenerator_copyJSON"
-  },
-  "testDataGenerator_copyCSV": {
-    "message": "复制 CSV",
-    "description": "Translation key: testDataGenerator_copyCSV"
-  },
-  "testDataGenerator_downloadJSON": {
-    "message": "下载 JSON",
-    "description": "Translation key: testDataGenerator_downloadJSON"
-  },
-  "testDataGenerator_downloadCSV": {
-    "message": "下载 CSV",
-    "description": "Translation key: testDataGenerator_downloadCSV"
-  },
-  "testDataGenerator_saveRule": {
-    "message": "保存规则",
-    "description": "Translation key: testDataGenerator_saveRule"
-  },
-  "testDataGenerator_import": {
-    "message": "导入",
-    "description": "Translation key: testDataGenerator_import"
-  },
-  "testDataGenerator_exportRules": {
-    "message": "导出规则",
-    "description": "Translation key: testDataGenerator_exportRules"
-  },
-  "testDataGenerator_ruleCount": {
-    "message": "已保存 {{count}}/{{max}} 条",
-    "description": "Translation key: testDataGenerator_ruleCount"
-  },
-  "testDataGenerator_searchRules": {
-    "message": "搜索规则...",
-    "description": "Translation key: testDataGenerator_searchRules"
-  },
-  "testDataGenerator_saveNewRule": {
-    "message": "保存新规则",
-    "description": "Translation key: testDataGenerator_saveNewRule"
-  },
-  "testDataGenerator_ruleNamePlaceholder": {
-    "message": "规则名称",
-    "description": "Translation key: testDataGenerator_ruleNamePlaceholder"
-  },
-  "testDataGenerator_ruleDescPlaceholder": {
-    "message": "规则描述（可选）",
-    "description": "Translation key: testDataGenerator_ruleDescPlaceholder"
-  },
-  "testDataGenerator_confirm": {
-    "message": "确认",
-    "description": "Translation key: testDataGenerator_confirm"
-  },
-  "testDataGenerator_done": {
-    "message": "完成",
-    "description": "Translation key: testDataGenerator_done"
-  },
-  "testDataGenerator_noSearchResults": {
-    "message": "未找到匹配的规则",
-    "description": "Translation key: testDataGenerator_noSearchResults"
-  },
-  "testDataGenerator_noRules": {
-    "message": "暂无保存的规则",
-    "description": "Translation key: testDataGenerator_noRules"
-  },
-  "testDataGenerator_usedTimes": {
-    "message": "使用 {{count}} 次",
-    "description": "Translation key: testDataGenerator_usedTimes"
-  },
-  "testDataGenerator_load": {
-    "message": "加载",
-    "description": "Translation key: testDataGenerator_load"
-  },
-  "testDataGenerator_duplicate": {
-    "message": "复制",
-    "description": "Translation key: testDataGenerator_duplicate"
-  },
-  "testDataGenerator_delete": {
-    "message": "删除",
-    "description": "Translation key: testDataGenerator_delete"
-  },
-  "testDataGenerator_virtualMode": {
-    "message": "虚拟列表模式（共 $ 行）"
-  },
-  "testDataGenerator_totalRows": {
-    "message": "共 $ 条数据"
-  },
-  "testDataGenerator_ruleSaved": {
-    "message": "规则已保存",
-    "description": "Translation key: testDataGenerator_ruleSaved"
-  },
-  "testDataGenerator_ruleLoaded": {
-    "message": "已加载规则「{{name}}」",
-    "description": "Translation key: testDataGenerator_ruleLoaded"
-  },
-  "testDataGenerator_ruleDeleted": {
-    "message": "规则已删除",
-    "description": "Translation key: testDataGenerator_ruleDeleted"
-  },
-  "testDataGenerator_ruleDuplicated": {
-    "message": "规则已复制",
-    "description": "Translation key: testDataGenerator_ruleDuplicated"
-  },
-  "testDataGenerator_exportSuccess": {
-    "message": "规则已导出",
-    "description": "Translation key: testDataGenerator_exportSuccess"
-  },
-  "testDataGenerator_importSuccess": {
-    "message": "成功导入 {{count}} 条规则",
-    "description": "Translation key: testDataGenerator_importSuccess"
-  },
-  "testDataGenerator_importFailed": {
-    "message": "{{count}} 条规则导入失败",
-    "description": "Translation key: testDataGenerator_importFailed"
-  },
-  "testDataGenerator_confirmDeleteTitle": {
-    "message": "确认删除规则",
-    "description": "Translation key: testDataGenerator_confirmDeleteTitle"
-  },
-  "testDataGenerator_confirmDeleteDescription": {
-    "message": "确定要删除规则「{{name}}」吗？此操作不可撤销。",
-    "description": "Translation key: testDataGenerator_confirmDeleteDescription"
-  },
-  "testDataGenerator_ruleNameDuplicate": {
-    "message": "已存在同名规则，是否覆盖保存？",
-    "description": "Translation key: testDataGenerator_ruleNameDuplicate"
-  },
-  "testDataGenerator_overwrite": {
-    "message": "覆盖",
-    "description": "Translation key: testDataGenerator_overwrite"
-  },
-  "testDataGenerator_edit": {
-    "message": "编辑",
-    "description": "Translation key: testDataGenerator_edit"
-  },
-  "testDataGenerator_ruleUpdated": {
-    "message": "规则已更新",
-    "description": "Translation key: testDataGenerator_ruleUpdated"
-  },
-  "testDataGenerator_editing": {
-    "message": "编辑中",
-    "description": "Translation key: testDataGenerator_editing"
-  },
-  "testDataGenerator_editingRule": {
-    "message": "正在编辑规则「{{name}}」",
-    "description": "Translation key: testDataGenerator_editingRule"
-  },
-  "testDataGenerator_updateRule": {
-    "message": "更新规则",
-    "description": "Translation key: testDataGenerator_updateRule"
-  },
-  "testDataGenerator_saveAs": {
-    "message": "另存为",
-    "description": "Translation key: testDataGenerator_saveAs"
-  },
-  "testDataGenerator_noGeneratorParams": {
-    "message": "此生成器无可配置参数",
-    "description": "Translation key: testDataGenerator_noGeneratorParams"
-  },
-  "testDataGenerator_enabled": {
-    "message": "启用",
-    "description": "Translation key: testDataGenerator_enabled"
-  },
-  "testDataGenerator_disabled": {
-    "message": "禁用",
-    "description": "Translation key: testDataGenerator_disabled"
-  },
-  "testDataGenerator_commaSeparated": {
-    "message": "用逗号分隔多个值",
-    "description": "Translation key: testDataGenerator_commaSeparated"
-  },
-  "testDataGenerator_copySuccess": {
-    "message": "已复制到剪贴板",
-    "description": "Translation key: testDataGenerator_copySuccess"
-  },
-  "testDataGenerator_copyFailed": {
-    "message": "复制失败",
-    "description": "Translation key: testDataGenerator_copyFailed"
-  },
-  "testDataGenerator_fieldNameEmpty": {
-    "message": "字段名称不能为空",
-    "description": "Translation key: testDataGenerator_fieldNameEmpty"
-  },
-  "testDataGenerator_fieldNameDuplicate": {
-    "message": "字段名称已存在",
-    "description": "Translation key: testDataGenerator_fieldNameDuplicate"
-  },
-  "testDataGenerator_fieldNameInvalid": {
-    "message": "字段名称只能包含字母、数字和下划线",
-    "description": "Translation key: testDataGenerator_fieldNameInvalid"
-  },
-  "testDataGenerator_ruleCopySuffix": {
-    "message": "（副本）",
-    "description": "Translation key: testDataGenerator_ruleCopySuffix"
   }
 }

src/components/CopyButton.tsx

@@ -53,7 +53,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       type="button"
       onClick={handleCopy}
       title={tooltip ?? t('buttons.copy')}
-      aria-label={tooltip ?? t('buttons.copy')}
       className={cn(
         buttonVariants({ variant, size }),
         copied &&
@@ -63,7 +62,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       {...props}
     >
       {copied ? (
-        <Check className="h-[1.2em] w-[1.2em]" />
+        <Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
       ) : (
         <Copy className="h-[1.2em] w-[1.2em]" />
       )}

src/components/CopyButton/__tests__/index.test.tsx

@@ -1,194 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// unmock the globally-mocked component so we test the real implementation
-vi.unmock('@/components/CopyButton');
-
-vi.mock('@/utils/clipboard', () => ({
-  copyTextToClipboard: vi.fn(),
-}));
-
-vi.mock('sonner', () => ({
-  toast: {
-    success: vi.fn(),
-    error: vi.fn(),
-  },
-}));
-
-import { CopyButton } from '@/components/CopyButton';
-import { copyTextToClipboard } from '@/utils/clipboard';
-import { toast } from 'sonner';
-
-const mockedCopy = vi.mocked(copyTextToClipboard);
-const mockedToast = vi.mocked(toast);
-
-describe('CopyButton', () => {
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="hello world" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalledWith('hello world');
-    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 });
-
-    render(<CopyButton text="" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).not.toHaveBeenCalled();
-    expect(mockedToast.error).toHaveBeenCalled();
-  });
-
-  it('复制失败时弹出 error toast', async () => {
-    mockedCopy.mockResolvedValue(false);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="something" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalledWith('something');
-    expect(mockedToast.error).toHaveBeenCalled();
-  });
-
-  // ==================== 新增测试 ====================
-
-  it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
-    render(<CopyButton text="initial" />);
-
-    const button = screen.getByRole('button');
-    expect(button.className).not.toContain('text-emerald');
-    // 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
-    expect(button).toHaveAttribute('aria-label');
-  });
-
-  it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
-    render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('title', '自定义提示');
-    expect(button).toHaveAttribute('aria-label', '自定义提示');
-  });
-
-  it('className 被正确透传到按钮', () => {
-    render(<CopyButton text="class-test" className="my-custom-class" />);
-
-    const button = screen.getByRole('button');
-    expect(button.className).toContain('my-custom-class');
-  });
-
-  it('点击事件阻止冒泡', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    const parentClick = vi.fn();
-
-    render(
-      <div onClick={parentClick}>
-        <CopyButton text="stop-propagation" />
-      </div>,
-    );
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalled();
-    expect(parentClick).not.toHaveBeenCalled();
-  });
-
-  it('组件卸载时清除定时器，不触发状态更新警告', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    const { unmount } = render(<CopyButton text="unmount-test" />);
-
-    await user.click(screen.getByRole('button'));
-
-    // 在 1.5 秒超时到期前卸载组件
-    act(() => {
-      vi.advanceTimersByTime(500);
-    });
-
-    // 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
-    expect(() => unmount()).not.toThrow();
-
-    // 前进剩余时间，确认没有异常
-    act(() => {
-      vi.advanceTimersByTime(2000);
-    });
-  });
-
-  it('快速连续点击不会创建多个重叠定时器', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="rapid-click" />);
-
-    const button = screen.getByRole('button');
-
-    // 快速点击 3 次
-    await user.click(button);
-    await user.click(button);
-    await user.click(button);
-
-    // copyTextToClipboard 应该被调用 3 次（每次点击都执行）
-    expect(mockedCopy).toHaveBeenCalledTimes(3);
-
-    // 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
-    //  advance 1.5 秒后，copied 状态应恢复为 false
-    act(() => {
-      vi.advanceTimersByTime(1500);
-    });
-
-    await waitFor(() => {
-      expect(button.className).not.toContain('text-emerald');
-    });
-  });
-
-  it('其他 button props 通过 ...props 透传', () => {
-    render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('data-testid', 'copy-btn');
-    expect(button).toBeDisabled();
-    expect(button).toHaveAttribute('id', 'copy-button-id');
-  });
-});

src/components/__tests__/CopyButton.test.tsx

@@ -1,194 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// unmock the globally-mocked component so we test the real implementation
-vi.unmock('@/components/CopyButton');
-
-vi.mock('@/utils/clipboard', () => ({
-  copyTextToClipboard: vi.fn(),
-}));
-
-vi.mock('sonner', () => ({
-  toast: {
-    success: vi.fn(),
-    error: vi.fn(),
-  },
-}));
-
-import { CopyButton } from '@/components/CopyButton';
-import { copyTextToClipboard } from '@/utils/clipboard';
-import { toast } from 'sonner';
-
-const mockedCopy = vi.mocked(copyTextToClipboard);
-const mockedToast = vi.mocked(toast);
-
-describe('CopyButton', () => {
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="hello world" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalledWith('hello world');
-    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 });
-
-    render(<CopyButton text="" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).not.toHaveBeenCalled();
-    expect(mockedToast.error).toHaveBeenCalled();
-  });
-
-  it('复制失败时弹出 error toast', async () => {
-    mockedCopy.mockResolvedValue(false);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="something" />);
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalledWith('something');
-    expect(mockedToast.error).toHaveBeenCalled();
-  });
-
-  // ==================== 新增测试 ====================
-
-  it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
-    render(<CopyButton text="initial" />);
-
-    const button = screen.getByRole('button');
-    expect(button.className).not.toContain('text-emerald');
-    // 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
-    expect(button).toHaveAttribute('aria-label');
-  });
-
-  it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
-    render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('title', '自定义提示');
-    expect(button).toHaveAttribute('aria-label', '自定义提示');
-  });
-
-  it('className 被正确透传到按钮', () => {
-    render(<CopyButton text="class-test" className="my-custom-class" />);
-
-    const button = screen.getByRole('button');
-    expect(button.className).toContain('my-custom-class');
-  });
-
-  it('点击事件阻止冒泡', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    const parentClick = vi.fn();
-
-    render(
-      <div onClick={parentClick}>
-        <CopyButton text="stop-propagation" />
-      </div>,
-    );
-
-    await user.click(screen.getByRole('button'));
-
-    expect(mockedCopy).toHaveBeenCalled();
-    expect(parentClick).not.toHaveBeenCalled();
-  });
-
-  it('组件卸载时清除定时器，不触发状态更新警告', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    const { unmount } = render(<CopyButton text="unmount-test" />);
-
-    await user.click(screen.getByRole('button'));
-
-    // 在 1.5 秒超时到期前卸载组件
-    act(() => {
-      vi.advanceTimersByTime(500);
-    });
-
-    // 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
-    expect(() => unmount()).not.toThrow();
-
-    // 前进剩余时间，确认没有异常
-    act(() => {
-      vi.advanceTimersByTime(2000);
-    });
-  });
-
-  it('快速连续点击不会创建多个重叠定时器', async () => {
-    mockedCopy.mockResolvedValue(true);
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-
-    render(<CopyButton text="rapid-click" />);
-
-    const button = screen.getByRole('button');
-
-    // 快速点击 3 次
-    await user.click(button);
-    await user.click(button);
-    await user.click(button);
-
-    // copyTextToClipboard 应该被调用 3 次（每次点击都执行）
-    expect(mockedCopy).toHaveBeenCalledTimes(3);
-
-    // 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
-    //  advance 1.5 秒后，copied 状态应恢复为 false
-    act(() => {
-      vi.advanceTimersByTime(1500);
-    });
-
-    await waitFor(() => {
-      expect(button.className).not.toContain('text-emerald');
-    });
-  });
-
-  it('其他 button props 通过 ...props 透传', () => {
-    render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
-
-    const button = screen.getByRole('button');
-    expect(button).toHaveAttribute('data-testid', 'copy-btn');
-    expect(button).toBeDisabled();
-    expect(button).toHaveAttribute('id', 'copy-button-id');
-  });
-});

src/components/__tests__/ToolCard.test.tsx

@@ -0,0 +1,118 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ToolCard from '@/pages/Dashboard/ToolCard';
+import { Clock } from 'lucide-react';
+
+describe('ToolCard 组件', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('渲染测试', () => {
+    it('应渲染标题和描述', () => {
+      render(
+        <ToolCard
+          title="测试工具"
+          description="这是一个测试工具"
+          colorKey="primary"
+          icon={Clock}
+          onNavigate={() => {}}
+        />,
+      );
+
+      expect(screen.getByText('测试工具')).toBeInTheDocument();
+      expect(screen.getByText('这是一个测试工具')).toBeInTheDocument();
+    });
+
+    it('无描述时仅渲染标题', () => {
+      render(<ToolCard title="仅标题" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
+
+      expect(screen.getByText('仅标题')).toBeInTheDocument();
+    });
+
+    it('应渲染图标', () => {
+      const { container } = render(
+        <ToolCard title="带图标" colorKey="primary" icon={Clock} onNavigate={() => {}} />,
+      );
+
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+    });
+
+    it('提供快照内容时应渲染快照', () => {
+      render(
+        <ToolCard
+          title="带快照"
+          colorKey="primary"
+          icon={Clock}
+          onNavigate={() => {}}
+          snapshot={<div data-testid="snapshot">快照内容</div>}
+        />,
+      );
+
+      expect(screen.getByTestId('snapshot')).toBeInTheDocument();
+    });
+
+    it('未提供快照时不渲染快照区域', () => {
+      const { container } = render(
+        <ToolCard
+          title="无快照"
+          colorKey="primary"
+          icon={Clock}
+          onClick={() => {}}
+          onNavigate={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+        />,
+      );
+
+      expect(container.querySelector('[data-testid="snapshot"]')).not.toBeInTheDocument();
+    });
+
+    it('应使用 CardActionArea 渲染，支持键盘聚焦', () => {
+      render(<ToolCard title="可聚焦" colorKey="primary" icon={Clock} onNavigate={() => {}} />);
+
+      const button = screen.getByRole('button', { name: /可聚焦/ });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('交互测试', () => {
+    it('点击时应调用 onClick', () => {
+      const handleClick = vi.fn();
+      render(<ToolCard title="可点击" colorKey="primary" icon={Clock} onNavigate={handleClick} />);
+
+      const button = screen.getByRole('button', { name: /可点击/ });
+      fireEvent.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('按 Enter 键时应调用 onClick', async () => {
+      const handleClick = vi.fn();
+      render(
+        <ToolCard title="键盘可触发" colorKey="primary" icon={Clock} onNavigate={handleClick} />,
+      );
+
+      const button = screen.getByRole('button', { name: /键盘可触发/ });
+      await act(async () => {
+        button.focus();
+        await userEvent.keyboard('{Enter}');
+      });
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('样式测试', () => {
+    it('应应用自定义颜色代码', () => {
+      const { container } = render(
+        <ToolCard title="自定义颜色" colorKey="warning" icon={Clock} onNavigate={() => {}} />,
+      );
+
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+    });
+  });
+});

src/components/ui/dialog.tsx

@@ -26,16 +26,10 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-interface DialogContentProps extends React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
-> {
-  showCloseButton?: boolean;
-}
-
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, showCloseButton = true, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -47,12 +41,10 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      {showCloseButton && (
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
-          <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
-          <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
-        </DialogPrimitive.Close>
-      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

src/components/ui/sonner.tsx

@@ -1,26 +0,0 @@
-import { Toaster as Sonner } from 'sonner';
-import { useThemeMode } from '@/providers/ThemeModeProvider';
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-export function Toaster(props: ToasterProps) {
-  const { resolvedMode } = useThemeMode();
-
-  return (
-    <Sonner
-      theme={resolvedMode}
-      className="toaster group"
-      position="bottom-center"
-      toastOptions={{
-        classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
-          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-        },
-      }}
-      {...props}
-    />
-  );
-}

src/config/README.md

@@ -19,7 +19,7 @@
 - `defaultVisible`：默认是否可见
 - `components`：三种渲染模式的懒加载组件（`popup`、`sidepanel`、`tab`）
 
-## 已注册功能（10 个）
+## 已注册功能（11 个）
 
 | key                  | 图标              | 说明              |
 | -------------------- | ----------------- | ----------------- |
@@ -31,8 +31,9 @@
 | `jwt`                | Key               | JWT 解析工具      |
 | `jsonDiff`           | GitCompareArrows  | JSON 差异比较工具 |
 | `base64Converter`    | ArrowLeftRight    | Base64 转换器     |
+| `markdownToHtml`     | Code              | Markdown 转 HTML  |
+| `htmlToMarkdown`     | File              | HTML 转 Markdown  |
 | `rightClickRestorer` | MousePointerClick | 右键菜单恢复工具  |
-| `testDataGenerator`  | FileSpreadsheet   | 测试数据生成器    |
 
 ## 导出函数
 

src/config/__tests__/features.test.ts

@@ -9,8 +9,8 @@ import {
 
 describe('features', () => {
   describe('FEATURES', () => {
-    it('should have 10 features defined', () => {
+    it('should have 9 features defined', () => {
-      expect(FEATURES).toHaveLength(10);
+      expect(FEATURES).toHaveLength(9);
     });
 
     it('should have all required properties for each feature', () => {
@@ -95,7 +95,7 @@ describe('features', () => {
   describe('getAllFeatureKeys', () => {
     it('should return all feature keys', () => {
       const allKeys = getAllFeatureKeys();
-      expect(allKeys).toHaveLength(10);
+      expect(allKeys).toHaveLength(9);
       expect(allKeys).toContain('dashboard');
       expect(allKeys).toContain('timestamp');
       expect(allKeys).toContain('storageCleaner');
@@ -105,7 +105,6 @@ describe('features', () => {
       expect(allKeys).toContain('jsonDiff');
       expect(allKeys).toContain('base64Converter');
       expect(allKeys).toContain('rightClickRestorer');
-      expect(allKeys).toContain('testDataGenerator');
     });
   });
 
@@ -122,9 +121,9 @@ describe('features', () => {
       expect(pageOrder).toContain('qrCode');
     });
 
-    it('should have 9 items in page order', () => {
+    it('should have 8 items in page order', () => {
       const pageOrder = getDefaultPageOrder();
-      expect(pageOrder).toHaveLength(9);
+      expect(pageOrder).toHaveLength(8);
     });
   });
 });

src/config/features.tsx

@@ -10,7 +10,6 @@ import {
   GitCompareArrows,
   ArrowLeftRight,
   MousePointerClick,
-  FileSpreadsheet,
 } from 'lucide-react';
 
 export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
@@ -25,7 +24,6 @@ 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;
@@ -157,19 +155,6 @@ export const FEATURES: FeatureConfig[] = [
       tab: RightClickRestorerPage,
     },
   },
-  {
-    key: 'testDataGenerator',
-    labelKey: 'testDataGenerator_title',
-    descriptionKey: 'testDataGenerator_description',
-    themeColorKey: 'warning',
-    icon: FileSpreadsheet,
-    defaultVisible: true,
-    components: {
-      popup: TestDataGeneratorPage,
-      sidepanel: TestDataGeneratorPage,
-      tab: TestDataGeneratorPage,
-    },
-  },
 ];
 
 export function getFeatureByKey(key: PageType): FeatureConfig | undefined {

src/entrypoints/content/uiPopover.ts

@@ -161,7 +161,7 @@ function positionPopover(popover: HTMLElement, x: number, y: number): void {
 
 let hideTimeout: ReturnType<typeof setTimeout> | null = null;
 
-function showPopover(
+export function showPopover(
   x: number,
   y: number,
   contentHtml: string,

src/lib/README.md

@@ -4,10 +4,9 @@
 
 ## 文件说明
 
-| 文件/目录     | 用途                                   |
+| 文件       | 用途                                 |
-| ------------- | -------------------------------------- |
+| ---------- | ------------------------------------ |
-| `utils.ts`    | `cn()` 函数 — shadcn/ui 标准工具函数   |
+| `utils.ts` | `cn()` 函数 — shadcn/ui 标准工具函数 |
-| `generators/` | 测试数据生成器内置生成器库和分类注册表 |
 
 ## cn()
 
@@ -25,32 +24,3 @@ import { cn } from '@/lib/utils';
 ```
 
 所有需要动态合并 Tailwind 类名的场景都应使用 `cn()`，而非手动拼接字符串。
-
-## generators/
-
-测试数据生成器的核心生成器库，供 `src/workers/generator.worker.ts` 在后台线程中按字段配置生成数据。
-
-| 文件           | 用途                                           |
-| -------------- | ---------------------------------------------- |
-| `index.ts`     | 聚合所有生成器，导出分类、查找和搜索函数       |
-| `personal.ts`  | 个人信息生成器（姓名、邮箱、手机号、身份证等） |
-| `business.ts`  | 业务数据生成器（订单号、价格、日期、状态等）   |
-| `technical.ts` | 技术数据生成器（UUID、IPv4、URL）              |
-| `basic.ts`     | 基础类型生成器（整数、浮点数、布尔值、字符串） |
-| `types.ts`     | 生成器库内部类型与通用选项                     |
-
-使用示例：
-
-```typescript
-import { getGeneratorById, searchGenerators } from '@/lib/generators';
-
-const generator = getGeneratorById('chineseName');
-const value = generator?.generate({});
-const matched = searchGenerators('uuid');
-```
-
-约束：
-
-- 新增生成器必须实现 `GeneratorDefinition`，并加入所属分类文件的导出列表。
-- 需要唯一值或大批量稳定输出时，优先实现 `generateAtIndex(params, index)`。
-- 新增分类时同步更新 `generatorCategories`，并确保 `GeneratorSelector` 能展示该分类。

src/lib/generators/basic.ts

@@ -1,227 +0,0 @@
-/**
- * 基础类型生成器
- * 包含：随机整数、随机浮点数、随机字符串、从列表选择
- */
-
-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)];
-}
-
-/**
- * 随机整数生成器
- */
-export const randomIntGenerator: GeneratorDefinition = {
-  id: 'randomInt',
-  name: '随机整数',
-  description: '生成指定范围内的随机整数',
-  categoryId: 'basic',
-  params: [
-    {
-      key: 'min',
-      label: '最小值',
-      type: 'number',
-      defaultValue: 0,
-      description: '整数最小值',
-    },
-    {
-      key: 'max',
-      label: '最大值',
-      type: 'number',
-      defaultValue: 100,
-      description: '整数最大值',
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 0;
-    const max = (params.max as number) || 100;
-    return String(randomInt(min, max));
-  },
-  generateAtIndex: (params, index) => {
-    const min = (params.min as number) || 0;
-    const max = (params.max as number) || 100;
-    const range = max - min + 1;
-    return String(min + (index % range));
-  },
-};
-
-/**
- * 随机浮点数生成器
- */
-export const randomFloat: GeneratorDefinition = {
-  id: 'randomFloat',
-  name: '随机浮点数',
-  description: '生成指定范围内的随机浮点数',
-  categoryId: 'basic',
-  params: [
-    {
-      key: 'min',
-      label: '最小值',
-      type: 'number',
-      defaultValue: 0,
-      description: '浮点数最小值',
-    },
-    {
-      key: 'max',
-      label: '最大值',
-      type: 'number',
-      defaultValue: 100,
-      description: '浮点数最大值',
-    },
-    {
-      key: 'decimals',
-      label: '小数位数',
-      type: 'number',
-      defaultValue: 2,
-      min: 0,
-      max: 10,
-      description: '小数位数',
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 0;
-    const max = (params.max as number) || 100;
-    const decimals = (params.decimals as number) ?? 2;
-    const value = min + Math.random() * (max - min);
-    return value.toFixed(decimals);
-  },
-};
-
-/**
- * 随机字符串生成器
- */
-export const randomString: GeneratorDefinition = {
-  id: 'randomString',
-  name: '随机字符串',
-  description: '生成指定长度的随机字符串',
-  categoryId: 'basic',
-  params: [
-    {
-      key: 'length',
-      label: '字符串长度',
-      type: 'number',
-      defaultValue: 10,
-      min: 1,
-      max: 100,
-      description: '字符串长度',
-    },
-    {
-      key: 'charset',
-      label: '字符集',
-      type: 'select',
-      defaultValue: 'alphanumeric',
-      description: '使用的字符集',
-      options: [
-        { label: '字母数字', value: 'alphanumeric' },
-        { label: '仅字母', value: 'alpha' },
-        { label: '仅数字', value: 'numeric' },
-        { label: '小写字母', value: 'lowercase' },
-        { label: '大写字母', value: 'uppercase' },
-        { label: '十六进制', value: 'hex' },
-        { label: 'Base64', value: 'base64' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const length = (params.length as number) || 10;
-    const charset = (params.charset as string) || 'alphanumeric';
-
-    const charsets: Record<string, string> = {
-      alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
-      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-      numeric: '0123456789',
-      lowercase: 'abcdefghijklmnopqrstuvwxyz',
-      uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-      hex: '0123456789abcdef',
-      base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
-    };
-
-    const chars = charsets[charset] || charsets.alphanumeric;
-    let result = '';
-    for (let i = 0; i < length; i++) {
-      result += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return result;
-  },
-  generateAtIndex: (params, index) => {
-    const length = (params.length as number) || 10;
-    const charset = (params.charset as string) || 'alphanumeric';
-
-    const charsets: Record<string, string> = {
-      alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
-      alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-      numeric: '0123456789',
-      lowercase: 'abcdefghijklmnopqrstuvwxyz',
-      uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-      hex: '0123456789abcdef',
-      base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
-    };
-
-    const chars = charsets[charset] || charsets.alphanumeric;
-    const base = String(index).padStart(length, '0');
-    let result = '';
-    for (let i = 0; i < length; i++) {
-      const charIndex = parseInt(base[i]) || 0;
-      result += chars[charIndex % chars.length];
-    }
-    return result;
-  },
-};
-
-/**
- * 从列表选择生成器
- */
-export const fromList: GeneratorDefinition = {
-  id: 'fromList',
-  name: '从列表选择',
-  description: '从自定义列表中随机选择',
-  categoryId: 'basic',
-  params: [
-    {
-      key: 'values',
-      label: '列表值',
-      type: 'string',
-      defaultValue: '',
-      description: '列表值，用逗号分隔',
-      placeholder: '值1,值2,值3',
-    },
-    {
-      key: 'allowDuplicate',
-      label: '允许重复',
-      type: 'boolean',
-      defaultValue: true,
-      description: '是否允许重复选择',
-    },
-  ],
-  generate: (params) => {
-    const valuesStr = (params.values as string) || '';
-    const values = valuesStr
-      .split(',')
-      .map((v) => v.trim())
-      .filter((v) => v);
-
-    if (values.length === 0) {
-      return '（请配置列表值）';
-    }
-
-    return randomPick(values);
-  },
-};
-
-export const basicGenerators: GeneratorDefinition[] = [
-  randomIntGenerator,
-  randomFloat,
-  randomString,
-  fromList,
-];

src/lib/generators/business.ts

@@ -1,561 +0,0 @@
-/**
- * 业务数据生成器
- * 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
- */
-
-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)];
-}
-
-/**
- * 格式化日期
- */
-function formatDate(date: Date, format: string): string {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
-
-  return format
-    .replace('YYYY', String(year))
-    .replace('MM', month)
-    .replace('DD', day)
-    .replace('HH', hours)
-    .replace('mm', minutes)
-    .replace('ss', seconds);
-}
-
-/**
- * 订单号生成器
- */
-export const orderId: GeneratorDefinition = {
-  id: 'orderId',
-  name: '订单号',
-  description: '生成随机订单号',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'prefix',
-      label: '前缀',
-      type: 'string',
-      defaultValue: 'ORD',
-      description: '订单号前缀',
-      placeholder: '请输入前缀',
-    },
-    {
-      key: 'length',
-      label: '数字长度',
-      type: 'number',
-      defaultValue: 10,
-      min: 6,
-      max: 20,
-      description: '订单号数字部分长度',
-    },
-  ],
-  generate: (params) => {
-    const prefix = (params.prefix as string) || 'ORD';
-    const length = (params.length as number) || 10;
-    const maxNum = Math.pow(10, length) - 1;
-    const num = String(randomInt(0, maxNum)).padStart(length, '0');
-    return `${prefix}${num}`;
-  },
-  generateAtIndex: (params, index) => {
-    const prefix = (params.prefix as string) || 'ORD';
-    const length = (params.length as number) || 10;
-    const num = String(index + 1).padStart(length, '0');
-    return `${prefix}${num}`;
-  },
-};
-
-/**
- * 价格生成器
- */
-export const price: GeneratorDefinition = {
-  id: 'price',
-  name: '价格',
-  description: '生成随机价格',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'min',
-      label: '最低价格',
-      type: 'number',
-      defaultValue: 1,
-      min: 0,
-      description: '价格最小值',
-    },
-    {
-      key: 'max',
-      label: '最高价格',
-      type: 'number',
-      defaultValue: 1000,
-      min: 0,
-      description: '价格最大值',
-    },
-    {
-      key: 'decimals',
-      label: '小数位数',
-      type: 'number',
-      defaultValue: 2,
-      min: 0,
-      max: 4,
-      description: '价格小数位数',
-    },
-    {
-      key: 'strategy',
-      label: '生成策略',
-      type: 'select',
-      defaultValue: 'random',
-      description: '价格生成策略',
-      options: [
-        { label: '随机', value: 'random' },
-        { label: '心理定价', value: 'psychological' },
-        { label: '真实分布', value: 'realistic' },
-      ],
-    },
-    {
-      key: 'currency',
-      label: '货币符号',
-      type: 'string',
-      defaultValue: '¥',
-      description: '货币符号',
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 1;
-    const max = (params.max as number) || 1000;
-    const decimals = (params.decimals as number) ?? 2;
-    const strategy = (params.strategy as string) || 'random';
-    const currency = (params.currency as string) || '¥';
-
-    let value: number;
-    if (strategy === 'psychological') {
-      value = generatePsychologicalPrice(min, max);
-    } else if (strategy === 'realistic') {
-      value = generateRealisticPrice(min, max);
-    } else {
-      value = min + Math.random() * (max - min);
-    }
-
-    return `${currency}${value.toFixed(decimals)}`;
-  },
-};
-
-/**
- * 生成心理定价（如 9.99, 19.9, 99）
- */
-function generatePsychologicalPrice(min: number, max: number): number {
-  const patterns = [
-    () => {
-      const base = randomInt(Math.ceil(min), Math.floor(max / 10));
-      return base * 10 - 0.01;
-    },
-    () => {
-      const base = randomInt(Math.ceil(min / 10), Math.floor(max / 10));
-      return base * 10 - 1;
-    },
-    () => {
-      const base = randomInt(Math.ceil(min / 100), Math.floor(max / 100));
-      return base * 100 - 1;
-    },
-  ];
-
-  let price = randomPick(patterns)();
-  if (price < min) price = min;
-  if (price > max) price = max;
-  return price;
-}
-
-/**
- * 生成真实分布价格（对数正态分布）
- */
-function generateRealisticPrice(min: number, max: number): number {
-  const mean = (Math.log(min) + Math.log(max)) / 2;
-  const stdDev = (Math.log(max) - Math.log(min)) / 4;
-  let u = 0,
-    v = 0;
-  while (u === 0) u = Math.random();
-  while (v === 0) v = Math.random();
-  const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-  const value = Math.exp(mean + num * stdDev);
-  return Math.max(min, Math.min(max, value));
-}
-
-/**
- * 日期生成器
- */
-export const date: GeneratorDefinition = {
-  id: 'date',
-  name: '日期',
-  description: '生成随机日期',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'startDate',
-      label: '开始日期',
-      type: 'string',
-      defaultValue: '2020-01-01',
-      description: '日期范围开始',
-      placeholder: 'YYYY-MM-DD',
-    },
-    {
-      key: 'endDate',
-      label: '结束日期',
-      type: 'string',
-      defaultValue: '2025-12-31',
-      description: '日期范围结束',
-      placeholder: 'YYYY-MM-DD',
-    },
-    {
-      key: 'format',
-      label: '日期格式',
-      type: 'select',
-      defaultValue: 'YYYY-MM-DD',
-      description: '输出格式',
-      options: [
-        { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
-        { label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
-        { label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
-        { label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const startStr = (params.startDate as string) || '2020-01-01';
-    const endStr = (params.endDate as string) || '2025-12-31';
-    const format = (params.format as string) || 'YYYY-MM-DD';
-
-    const start = new Date(startStr).getTime();
-    const end = new Date(endStr).getTime();
-    const randomTime = start + Math.random() * (end - start);
-    const date = new Date(randomTime);
-
-    return formatDate(date, format);
-  },
-};
-
-/**
- * 状态生成器
- */
-export const status: GeneratorDefinition = {
-  id: 'status',
-  name: '状态',
-  description: '生成随机状态',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'type',
-      label: '状态类型',
-      type: 'select',
-      defaultValue: 'order',
-      description: '选择状态类型',
-      options: [
-        { label: '订单状态', value: 'order' },
-        { label: '用户状态', value: 'user' },
-        { label: '审核状态', value: 'review' },
-        { label: '支付状态', value: 'payment' },
-        { label: '自定义', value: 'custom' },
-      ],
-    },
-    {
-      key: 'customValues',
-      label: '自定义值',
-      type: 'string',
-      defaultValue: '',
-      description: '自定义状态值，用逗号分隔',
-      placeholder: '状态1,状态2,状态3',
-    },
-  ],
-  generate: (params) => {
-    const type = (params.type as string) || 'order';
-
-    const statusMap: Record<string, string[]> = {
-      order: ['待付款', '待发货', '已发货', '已完成', '已取消', '已退款'],
-      user: ['活跃', '未激活', '已禁用', '已注销'],
-      review: ['待审核', '审核中', '已通过', '已拒绝'],
-      payment: ['待支付', '支付中', '支付成功', '支付失败', '已退款'],
-    };
-
-    if (type === 'custom') {
-      const customValues = (params.customValues as string) || '';
-      const values = customValues.split(',').filter((v) => v.trim());
-      if (values.length > 0) {
-        return randomPick(values);
-      }
-      return '未知状态';
-    }
-
-    return randomPick(statusMap[type] || statusMap.order);
-  },
-};
-
-/**
- * 数量生成器
- */
-export const quantity: GeneratorDefinition = {
-  id: 'quantity',
-  name: '数量',
-  description: '生成随机数量',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'min',
-      label: '最小值',
-      type: 'number',
-      defaultValue: 1,
-      min: 0,
-      description: '数量最小值',
-    },
-    {
-      key: 'max',
-      label: '最大值',
-      type: 'number',
-      defaultValue: 100,
-      min: 0,
-      description: '数量最大值',
-    },
-    {
-      key: 'distribution',
-      label: '分布方式',
-      type: 'select',
-      defaultValue: 'uniform',
-      description: '数量分布方式',
-      options: [
-        { label: '均匀分布', value: 'uniform' },
-        { label: '泊松分布', value: 'poisson' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 1;
-    const max = (params.max as number) || 100;
-    const distribution = (params.distribution as string) || 'uniform';
-
-    if (distribution === 'poisson') {
-      return String(poissonRandom(Math.floor((min + max) / 2)));
-    }
-    return String(randomInt(min, max));
-  },
-};
-
-/**
- * 泊松分布随机数
- */
-function poissonRandom(lambda: number): number {
-  const L = Math.exp(-lambda);
-  let k = 0;
-  let p = 1;
-  do {
-    k++;
-    p *= Math.random();
-  } while (p > L);
-  return k - 1;
-}
-
-/**
- * 评分生成器
- */
-export const rating: GeneratorDefinition = {
-  id: 'rating',
-  name: '评分',
-  description: '生成随机评分',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'min',
-      label: '最低分',
-      type: 'number',
-      defaultValue: 1,
-      min: 0,
-      max: 10,
-      description: '评分最小值',
-    },
-    {
-      key: 'max',
-      label: '最高分',
-      type: 'number',
-      defaultValue: 5,
-      min: 0,
-      max: 10,
-      description: '评分最大值',
-    },
-    {
-      key: 'decimals',
-      label: '小数位数',
-      type: 'number',
-      defaultValue: 1,
-      min: 0,
-      max: 2,
-      description: '评分小数位数',
-    },
-    {
-      key: 'skewed',
-      label: '偏向高分',
-      type: 'boolean',
-      defaultValue: true,
-      description: '是否偏向高分（模拟真实评分分布）',
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 1;
-    const max = (params.max as number) || 5;
-    const decimals = (params.decimals as number) ?? 1;
-    const skewed = params.skewed !== false;
-
-    if (skewed) {
-      return skewedRandom(min, max).toFixed(decimals);
-    }
-    return (min + Math.random() * (max - min)).toFixed(decimals);
-  },
-};
-
-/**
- * 偏向高分的随机数（模拟真实评分分布）
- */
-function skewedRandom(min: number, max: number): number {
-  // 使用 Beta 分布模拟评分偏向
-  const alpha = 3;
-  const beta = 1;
-  let u = 0,
-    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);
-  return min + x * (max - min);
-}
-
-/**
- * 折扣生成器
- */
-export const discount: GeneratorDefinition = {
-  id: 'discount',
-  name: '折扣',
-  description: '生成随机折扣',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'min',
-      label: '最低折扣',
-      type: 'number',
-      defaultValue: 1,
-      min: 0,
-      max: 100,
-      description: '折扣最小值（百分比）',
-    },
-    {
-      key: 'max',
-      label: '最高折扣',
-      type: 'number',
-      defaultValue: 50,
-      min: 0,
-      max: 100,
-      description: '折扣最大值（百分比）',
-    },
-    {
-      key: 'strategy',
-      label: '生成策略',
-      type: 'select',
-      defaultValue: 'random',
-      description: '折扣生成策略',
-      options: [
-        { label: '随机', value: 'random' },
-        { label: '心理定价', value: 'psychological' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 1;
-    const max = (params.max as number) || 50;
-    const strategy = (params.strategy as string) || 'random';
-
-    let discount: number;
-    if (strategy === 'psychological') {
-      discount = generatePsychologicalDiscount(min, max);
-    } else {
-      discount = randomInt(min, max);
-    }
-    return `${discount}%`;
-  },
-};
-
-/**
- * 生成心理折扣（如 5%, 10%, 20%, 30%）
- */
-function generatePsychologicalDiscount(min: number, max: number): number {
-  const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
-  const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
-  if (validDiscounts.length > 0) {
-    return randomPick(validDiscounts);
-  }
-  return randomInt(min, max);
-}
-
-/**
- * 库存生成器
- */
-export const stock: GeneratorDefinition = {
-  id: 'stock',
-  name: '库存',
-  description: '生成随机库存数量',
-  categoryId: 'business',
-  params: [
-    {
-      key: 'min',
-      label: '最小库存',
-      type: 'number',
-      defaultValue: 0,
-      min: 0,
-      description: '库存最小值',
-    },
-    {
-      key: 'max',
-      label: '最大库存',
-      type: 'number',
-      defaultValue: 1000,
-      min: 0,
-      description: '库存最大值',
-    },
-    {
-      key: 'allowZero',
-      label: '允许为零',
-      type: 'boolean',
-      defaultValue: true,
-      description: '是否允许库存为零',
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 0;
-    const max = (params.max as number) || 1000;
-    const allowZero = params.allowZero !== false;
-
-    if (allowZero) {
-      return String(randomInt(min, max));
-    }
-    return String(randomInt(Math.max(1, min), max));
-  },
-};
-
-export const businessGenerators: GeneratorDefinition[] = [
-  orderId,
-  price,
-  date,
-  status,
-  quantity,
-  rating,
-  discount,
-  stock,
-];

src/lib/generators/index.ts

@@ -1,57 +0,0 @@
-/**
- * 生成器库索引
- * 导出所有生成器和分类配置
- */
-
-import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
-import { personalGenerators } from './personal';
-import { businessGenerators } from './business';
-import { technicalGenerators } from './technical';
-import { basicGenerators } from './basic';
-
-/**
- * 生成器分类配置
- */
-export const generatorCategories: GeneratorCategory[] = [
-  { id: 'personal', name: '个人信息', icon: 'User' },
-  { id: 'business', name: '业务数据', icon: 'Briefcase' },
-  { id: 'technical', name: '技术数据', icon: 'Code' },
-  { id: 'basic', name: '基础类型', icon: 'Hash' },
-];
-
-/**
- * 所有生成器列表
- */
-export const allGenerators: GeneratorDefinition[] = [
-  ...personalGenerators,
-  ...businessGenerators,
-  ...technicalGenerators,
-  ...basicGenerators,
-];
-
-/**
- * 根据 ID 获取生成器
- */
-export function getGeneratorById(id: string): GeneratorDefinition | undefined {
-  return allGenerators.find((g) => g.id === id);
-}
-
-/**
- * 根据分类 ID 获取生成器列表
- */
-export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
-  return allGenerators.filter((g) => g.categoryId === categoryId);
-}
-
-/**
- * 搜索生成器
- */
-export function searchGenerators(query: string): GeneratorDefinition[] {
-  const lowerQuery = query.toLowerCase();
-  return allGenerators.filter(
-    (g) =>
-      g.name.toLowerCase().includes(lowerQuery) ||
-      g.description.toLowerCase().includes(lowerQuery) ||
-      g.id.toLowerCase().includes(lowerQuery),
-  );
-}

src/lib/generators/personal.ts

@@ -1,465 +0,0 @@
-/**
- * 个人信息生成器
- * 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
- */
-
-import type { GeneratorDefinition } from '@/types/testDataGenerator';
-
-// 中文姓氏
-const SURNAMES = [
-  '王',
-  '李',
-  '张',
-  '刘',
-  '陈',
-  '杨',
-  '赵',
-  '黄',
-  '周',
-  '吴',
-  '徐',
-  '孙',
-  '胡',
-  '朱',
-  '高',
-  '林',
-  '何',
-  '郭',
-  '马',
-  '罗',
-  '梁',
-  '宋',
-  '郑',
-  '谢',
-  '韩',
-  '唐',
-  '冯',
-  '于',
-  '董',
-  '萧',
-  '程',
-  '曹',
-  '袁',
-  '邓',
-  '许',
-  '傅',
-  '沈',
-  '曾',
-  '彭',
-  '吕',
-  '苏',
-  '卢',
-  '蒋',
-  '蔡',
-  '贾',
-  '丁',
-  '魏',
-  '薛',
-  '叶',
-  '阎',
-];
-
-// 中文名字常用字
-const NAME_CHARS = [
-  '伟',
-  '芳',
-  '娜',
-  '秀英',
-  '敏',
-  '静',
-  '丽',
-  '强',
-  '磊',
-  '洋',
-  '艳',
-  '勇',
-  '军',
-  '杰',
-  '娟',
-  '涛',
-  '明',
-  '超',
-  '秀兰',
-  '霞',
-  '平',
-  '刚',
-  '桂英',
-  '文',
-  '华',
-  '飞',
-  '鑫',
-  '浩',
-  '凯',
-  '宁',
-  '建',
-  '峰',
-  '辉',
-  '成',
-  '宇',
-  '博',
-  '泽',
-  '思',
-  '睿',
-  '晨',
-  '阳',
-  '雪',
-  '冰',
-  '琳',
-  '瑶',
-  '婷',
-  '欣',
-  '悦',
-  '佳',
-  '慧',
-];
-
-// 邮箱域名
-const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
-
-// 省份
-const PROVINCES = [
-  '北京市',
-  '天津市',
-  '上海市',
-  '重庆市',
-  '河北省',
-  '山西省',
-  '辽宁省',
-  '吉林省',
-  '黑龙江省',
-  '江苏省',
-  '浙江省',
-  '安徽省',
-  '福建省',
-  '江西省',
-  '山东省',
-  '河南省',
-  '湖北省',
-  '湖南省',
-  '广东省',
-  '海南省',
-  '四川省',
-  '贵州省',
-  '云南省',
-  '陕西省',
-  '甘肃省',
-  '青海省',
-  '台湾省',
-  '内蒙古自治区',
-  '广西壮族自治区',
-  '西藏自治区',
-  '宁夏回族自治区',
-  '新疆维吾尔自治区',
-];
-
-// 城市
-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)];
-}
-
-/**
- * 中文姓名生成器
- */
-export const chineseName: GeneratorDefinition = {
-  id: 'chineseName',
-  name: '中文姓名',
-  description: '生成随机中文姓名',
-  categoryId: 'personal',
-  params: [],
-  generate: () => {
-    const surname = randomPick(SURNAMES);
-    const name = randomPick(NAME_CHARS);
-    return surname + name;
-  },
-};
-
-/**
- * 邮箱生成器
- */
-export const email: GeneratorDefinition = {
-  id: 'email',
-  name: '邮箱',
-  description: '生成随机邮箱地址',
-  categoryId: 'personal',
-  params: [
-    {
-      key: 'domain',
-      label: '邮箱域名',
-      type: 'select',
-      defaultValue: 'random',
-      description: '选择邮箱域名',
-      options: [
-        { label: '随机', value: 'random' },
-        ...EMAIL_DOMAINS.map((d) => ({ label: d, value: d })),
-      ],
-    },
-  ],
-  generate: (params) => {
-    const domain =
-      params.domain === 'random' ? randomPick(EMAIL_DOMAINS) : (params.domain as string);
-    const username = Math.random().toString(36).substring(2, 10);
-    return `${username}@${domain}`;
-  },
-};
-
-/**
- * 手机号生成器
- */
-export const chinesePhone: GeneratorDefinition = {
-  id: 'chinesePhone',
-  name: '手机号',
-  description: '生成随机中国手机号码',
-  categoryId: 'personal',
-  params: [
-    {
-      key: 'prefix',
-      label: '号段前缀',
-      type: 'select',
-      defaultValue: 'random',
-      description: '选择手机号前缀',
-      options: [
-        { label: '随机', value: 'random' },
-        { label: '138', value: '138' },
-        { label: '139', value: '139' },
-        { label: '158', value: '158' },
-        { label: '188', value: '188' },
-        { label: '177', value: '177' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const prefixes = ['138', '139', '158', '188', '177', '136', '159', '186', '135', '150'];
-    const prefix = params.prefix === 'random' ? randomPick(prefixes) : (params.prefix as string);
-    const suffix = String(randomInt(10000000, 99999999));
-    return prefix + suffix;
-  },
-};
-
-/**
- * 身份证号生成器
- */
-export const idCard: GeneratorDefinition = {
-  id: 'idCard',
-  name: '身份证号',
-  description: '生成随机身份证号码',
-  categoryId: 'personal',
-  params: [
-    {
-      key: 'region',
-      label: '地区',
-      type: 'select',
-      defaultValue: 'random',
-      description: '选择身份证前6位地区码',
-      options: [
-        { label: '随机', value: 'random' },
-        { label: '北京', value: '110101' },
-        { label: '上海', value: '310101' },
-        { label: '广州', value: '440103' },
-        { label: '深圳', value: '440305' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
-    const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
-
-    // 出生日期 1960-2005年
-    const year = randomInt(1960, 2005);
-    const month = String(randomInt(1, 12)).padStart(2, '0');
-    const day = String(randomInt(1, 28)).padStart(2, '0');
-    const birthday = `${year}${month}${day}`;
-
-    // 顺序码
-    const sequence = String(randomInt(1, 999)).padStart(3, '0');
-
-    // 前17位
-    const prefix17 = region + birthday + sequence;
-
-    // 校验码
-    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
-    const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
-    let sum = 0;
-    for (let i = 0; i < 17; i++) {
-      sum += parseInt(prefix17[i]) * weights[i];
-    }
-    const checkCode = checkCodes[sum % 11];
-
-    return prefix17 + checkCode;
-  },
-  generateAtIndex: (params, index) => {
-    const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
-    const region =
-      params.region === 'random' ? regions[index % regions.length] : (params.region as string);
-
-    const year = 1990;
-    const month = String(randomInt(1, 12)).padStart(2, '0');
-    const day = String(randomInt(1, 28)).padStart(2, '0');
-    const birthday = `${year}${month}${day}`;
-
-    const sequence = String(index + 1).padStart(3, '0');
-    const prefix17 = region + birthday + sequence;
-
-    const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
-    const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
-    let sum = 0;
-    for (let i = 0; i < 17; i++) {
-      sum += parseInt(prefix17[i]) * weights[i];
-    }
-    const checkCode = checkCodes[sum % 11];
-
-    return prefix17 + checkCode;
-  },
-};
-
-/**
- * 中文地址生成器
- */
-export const chineseAddress: GeneratorDefinition = {
-  id: 'chineseAddress',
-  name: '中文地址',
-  description: '生成随机中文地址',
-  categoryId: 'personal',
-  params: [
-    {
-      key: 'includeDetail',
-      label: '包含详细地址',
-      type: 'boolean',
-      defaultValue: true,
-      description: '是否包含街道门牌号',
-    },
-  ],
-  generate: (params) => {
-    const province = randomPick(PROVINCES);
-    const cities = CITIES[province] || ['市区'];
-    const city = randomPick(cities);
-    const district = `区${randomInt(1, 20)}号`;
-
-    if (params.includeDetail) {
-      const street = `路${randomInt(1, 200)}号`;
-      return `${province}${city}${district}${street}`;
-    }
-    return `${province}${city}${district}`;
-  },
-};
-
-/**
- * 年龄生成器
- */
-export const age: GeneratorDefinition = {
-  id: 'age',
-  name: '年龄',
-  description: '生成随机年龄',
-  categoryId: 'personal',
-  params: [
-    {
-      key: 'min',
-      label: '最小年龄',
-      type: 'number',
-      defaultValue: 18,
-      min: 0,
-      max: 150,
-      description: '年龄最小值',
-    },
-    {
-      key: 'max',
-      label: '最大年龄',
-      type: 'number',
-      defaultValue: 65,
-      min: 0,
-      max: 150,
-      description: '年龄最大值',
-    },
-    {
-      key: 'distribution',
-      label: '分布方式',
-      type: 'select',
-      defaultValue: 'uniform',
-      description: '年龄分布方式',
-      options: [
-        { label: '均匀分布', value: 'uniform' },
-        { label: '正态分布', value: 'normal' },
-        { label: '人口统计分布', value: 'demographic' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const min = (params.min as number) || 18;
-    const max = (params.max as number) || 65;
-    const distribution = (params.distribution as string) || 'uniform';
-
-    if (distribution === 'normal') {
-      return String(normalRandom(min, max));
-    } else if (distribution === 'demographic') {
-      return String(demographicRandom());
-    }
-    return String(randomInt(min, max));
-  },
-};
-
-/**
- * 正态分布随机数
- */
-function normalRandom(min: number, max: number): number {
-  const mean = (min + max) / 2;
-  const stdDev = (max - min) / 6;
-  let u = 0,
-    v = 0;
-  while (u === 0) u = Math.random();
-  while (v === 0) v = Math.random();
-  const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-  const value = Math.round(mean + num * stdDev);
-  return Math.max(min, Math.min(max, value));
-}
-
-/**
- * 人口统计分布随机数（模拟真实年龄分布）
- */
-function demographicRandom(): number {
-  const ageGroups = [
-    { min: 0, max: 14, weight: 0.18 },
-    { min: 15, max: 24, weight: 0.12 },
-    { min: 25, max: 34, weight: 0.18 },
-    { min: 35, max: 44, weight: 0.17 },
-    { min: 45, max: 54, weight: 0.16 },
-    { min: 55, max: 64, weight: 0.12 },
-    { min: 65, max: 100, weight: 0.07 },
-  ];
-
-  const random = Math.random();
-  let cumulative = 0;
-  for (const group of ageGroups) {
-    cumulative += group.weight;
-    if (random <= cumulative) {
-      return randomInt(group.min, group.max);
-    }
-  }
-  return randomInt(25, 34);
-}
-
-export const personalGenerators: GeneratorDefinition[] = [
-  chineseName,
-  email,
-  chinesePhone,
-  idCard,
-  chineseAddress,
-  age,
-];

src/lib/generators/technical.ts

@@ -1,268 +0,0 @@
-/**
- * 技术数据生成器
- * 包含：UUID、IPv4、URL
- */
-
-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)];
-}
-
-/**
- * UUID 生成器
- */
-export const uuid: GeneratorDefinition = {
-  id: 'uuid',
-  name: 'UUID',
-  description: '生成随机 UUID',
-  categoryId: 'technical',
-  params: [
-    {
-      key: 'version',
-      label: 'UUID 版本',
-      type: 'select',
-      defaultValue: 'v4',
-      description: 'UUID 版本',
-      options: [
-        { label: 'v4 (随机)', value: 'v4' },
-        { label: 'v1 (时间戳)', value: 'v1' },
-      ],
-    },
-    {
-      key: 'uppercase',
-      label: '大写字母',
-      type: 'boolean',
-      defaultValue: false,
-      description: '是否使用大写字母',
-    },
-    {
-      key: 'noDashes',
-      label: '无连字符',
-      type: 'boolean',
-      defaultValue: false,
-      description: '是否省略连字符',
-    },
-  ],
-  generate: (params) => {
-    const version = (params.version as string) || 'v4';
-    const uppercase = params.uppercase === true;
-    const noDashes = params.noDashes === true;
-
-    let result: string;
-    if (version === 'v1') {
-      result = generateUUIDv1();
-    } else {
-      result = generateUUIDv4();
-    }
-
-    if (uppercase) {
-      result = result.toUpperCase();
-    }
-
-    if (noDashes) {
-      result = result.replace(/-/g, '');
-    }
-
-    return result;
-  },
-};
-
-/**
- * 生成 UUID v4
- */
-function generateUUIDv4(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-}
-
-/**
- * 生成 UUID v1（简化版本，模拟时间戳）
- */
-function generateUUIDv1(): string {
-  const now = Date.now();
-  const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
-  const timeMid = ((now >> 32) & 0xffff).toString(16).padStart(4, '0');
-  const timeHi = ((now >> 48) & 0x0fff) | 0x1000;
-  const clockSeq = randomInt(0, 0x3fff) | 0x8000;
-  const node = Array.from({ length: 6 }, () =>
-    randomInt(0, 255).toString(16).padStart(2, '0'),
-  ).join('');
-
-  return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
-}
-
-/**
- * IPv4 生成器
- */
-export const ipv4: GeneratorDefinition = {
-  id: 'ipv4',
-  name: 'IPv4',
-  description: '生成随机 IPv4 地址',
-  categoryId: 'technical',
-  params: [
-    {
-      key: 'type',
-      label: '地址类型',
-      type: 'select',
-      defaultValue: 'random',
-      description: 'IP 地址类型',
-      options: [
-        { label: '完全随机', value: 'random' },
-        { label: '内网地址', value: 'private' },
-        { label: '公网地址', value: 'public' },
-        { label: '环回地址', value: 'loopback' },
-      ],
-    },
-  ],
-  generate: (params) => {
-    const type = (params.type as string) || 'random';
-
-    if (type === 'private') {
-      return generatePrivateIPv4();
-    } else if (type === 'loopback') {
-      return '127.0.0.1';
-    } else if (type === 'public') {
-      return generatePublicIPv4();
-    }
-    return generateRandomIPv4();
-  },
-};
-
-/**
- * 生成完全随机 IPv4
- */
-function generateRandomIPv4(): string {
-  return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
-}
-
-/**
- * 生成内网 IPv4
- */
-function generatePrivateIPv4(): string {
-  const ranges = [
-    { prefix: '10', second: () => randomInt(0, 255) },
-    { prefix: '172', second: () => randomInt(16, 31) },
-    { prefix: '192.168', second: () => randomInt(0, 255) },
-  ];
-  const range = randomPick(ranges);
-
-  if (range.prefix === '192.168') {
-    return `192.168.${range.second()}.${randomInt(1, 254)}`;
-  }
-  return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
-}
-
-/**
- * 生成公网 IPv4
- */
-function generatePublicIPv4(): string {
-  let first: number;
-  do {
-    first = randomInt(1, 255);
-  } while (first === 10 || first === 127 || first === 192 || first === 172);
-
-  return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
-}
-
-/**
- * URL 生成器
- */
-export const url: GeneratorDefinition = {
-  id: 'url',
-  name: 'URL',
-  description: '生成随机 URL',
-  categoryId: 'technical',
-  params: [
-    {
-      key: 'protocol',
-      label: '协议',
-      type: 'select',
-      defaultValue: 'https',
-      description: 'URL 协议',
-      options: [
-        { label: 'HTTPS', value: 'https' },
-        { label: 'HTTP', value: 'http' },
-        { label: '随机', value: 'random' },
-      ],
-    },
-    {
-      key: 'type',
-      label: 'URL 类型',
-      type: 'select',
-      defaultValue: 'website',
-      description: 'URL 类型',
-      options: [
-        { label: '网站', value: 'website' },
-        { label: 'API', value: 'api' },
-        { label: '图片', value: 'image' },
-        { label: '文件', value: 'file' },
-      ],
-    },
-    {
-      key: 'includePath',
-      label: '包含路径',
-      type: 'boolean',
-      defaultValue: true,
-      description: '是否包含路径',
-    },
-  ],
-  generate: (params) => {
-    const protocol = (params.protocol as string) || 'https';
-    const type = (params.type as string) || 'website';
-    const includePath = params.includePath !== false;
-
-    const actualProtocol = protocol === 'random' ? randomPick(['http', 'https']) : protocol;
-
-    const domains = [
-      'example.com',
-      'test.org',
-      'demo.net',
-      'sample.io',
-      'api.service.com',
-      'cdn.static.com',
-      'img.media.com',
-    ];
-    const domain = randomPick(domains);
-
-    let path = '';
-    if (includePath) {
-      if (type === 'api') {
-        path = `/api/v${randomInt(1, 3)}/${randomPick(['users', 'products', 'orders', 'items'])}`;
-      } else if (type === 'image') {
-        path = `/images/${randomPick(['avatar', 'banner', 'logo', 'photo'])}/${randomInt(1, 1000)}.jpg`;
-      } else if (type === 'file') {
-        path = `/files/${randomPick(['document', 'report', 'data'])}/${randomInt(1, 100)}.pdf`;
-      } else {
-        path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
-      }
-    }
-
-    // 添加查询参数
-    let query = '';
-    if (Math.random() > 0.5) {
-      const params = new URLSearchParams();
-      params.set('id', String(randomInt(1, 10000)));
-      if (Math.random() > 0.5) params.set('page', String(randomInt(1, 100)));
-      if (Math.random() > 0.7) params.set('lang', randomPick(['zh', 'en', 'ja']));
-      query = `?${params.toString()}`;
-    }
-
-    return `${actualProtocol}://${domain}${path}${query}`;
-  },
-};
-
-export const technicalGenerators: GeneratorDefinition[] = [uuid, ipv4, url];

src/lib/generators/types.ts

@@ -1,48 +0,0 @@
-/**
- * 生成器内部类型定义
- * 与 testDataGenerator.ts 分离，用于生成器库内部
- */
-
-import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
-
-export type { GeneratorDefinition, GeneratorCategory };
-
-/**
- * 生成器注册表
- */
-export interface GeneratorRegistry {
-  /** 分类列表 */
-  categories: GeneratorCategory[];
-  /** 生成器列表 */
-  generators: GeneratorDefinition[];
-}
-
-/**
- * 随机数生成选项
- */
-export interface RandomOptions {
-  /** 最小值 */
-  min?: number;
-  /** 最大值 */
-  max?: number;
-  /** 是否包含最小值 */
-  includeMin?: boolean;
-  /** 是否包含最大值 */
-  includeMax?: boolean;
-}
-
-/**
- * 字符集选项
- */
-export interface CharsetOptions {
-  /** 是否包含大写字母 */
-  uppercase?: boolean;
-  /** 是否包含小写字母 */
-  lowercase?: boolean;
-  /** 是否包含数字 */
-  digits?: boolean;
-  /** 是否包含特殊字符 */
-  special?: boolean;
-  /** 自定义字符集 */
-  custom?: string;
-}

src/pages/Base64Converter/Base64ConverterSection.tsx

@@ -1,7 +1,7 @@
 import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
 import TextInputArea from '@/components/TextInputArea';
 import { useI18n } from '@/utils/chromeI18n';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import DecodeResultPaper from '@/components/DecodeResultPaper';
 import { Button } from '@/components/ui/button';
 import { downloadBlob, formatFileSize } from '@/utils/base64Converter';

src/pages/Base64Converter/TextMode.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import TextInputArea from '@/components/TextInputArea';
 import { useI18n } from '@/utils/chromeI18n';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import { base64ToText, textToBase64 } from '@/utils/base64Converter';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import { useContextMenuData } from '@/utils/useContextMenuData';

src/pages/Dashboard/ToolCard.tsx

@@ -0,0 +1,107 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { LucideProps } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
+import type { PaletteColorKey } from '@/config/features';
+import { cn } from '@/lib/utils';
+
+const PALETTE_COLORS: Record<PaletteColorKey, string> = {
+  primary: '13, 148, 136', // teal
+  success: '22, 163, 74', // green
+  warning: '217, 119, 6', // amber (存储清理的橙色轴)
+  error: '220, 38, 38', // red
+  secondary: '147, 51, 232',
+  info: '37, 99, 235', // blue
+};
+
+export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  snapshot?: React.ReactNode;
+  colorKey: PaletteColorKey;
+  icon: ComponentType<LucideProps>;
+  onNavigate: () => void;
+}
+
+export default function ToolCard({
+  title,
+  description,
+  snapshot,
+  colorKey,
+  icon: IconComponent,
+  onNavigate,
+  className,
+  ...props
+}: ToolCardProps) {
+  const rgbValues = PALETTE_COLORS[colorKey];
+
+  return (
+    <div
+      style={{
+        ['--tool-color' as string]: rgbValues,
+      }}
+      /* 💡 核心修复点：
+        - 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
+        - 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
+      */
+      className={cn(
+        'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
+        'hover:bg-muted/30',
+        'hover:border-[rgba(var(--tool-color),0.45)]',
+        'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
+        className,
+      )}
+      {...props}
+    >
+      {/* 上半部分：核心信息交互排版轴 */}
+      <div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
+        <div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
+          {/* 左侧圆形图标容器 */}
+          <div
+            className={cn(
+              'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
+              'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
+              'text-[rgb(var(--tool-color))]',
+            )}
+          >
+            <IconComponent className="h-5 w-5 shrink-0" />
+          </div>
+
+          {/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
+          <div className="flex-1 min-w-0 flex flex-col">
+            <h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
+              {title}
+            </h4>
+            {description && (
+              <p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* 右侧指示小箭头 */}
+        <div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
+          <ChevronRight className="h-4 w-4" />
+        </div>
+
+        {/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
+        <button
+          type="button"
+          onClick={onNavigate}
+          aria-label={`进入 ${title}`}
+          className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
+        />
+      </div>
+
+      {/* 下半部分：未来的动态预览沙箱独立承载区 */}
+      {snapshot != null && (
+        <div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
+          {snapshot}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ToolCard.displayName = 'ToolCard';

src/pages/JsonTools/JsonConvertSection.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useI18n } from '@/utils/chromeI18n';
 import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import TextInputArea from '@/components/TextInputArea';
 import { validateJson } from '@/utils/jsonFormatter';
 import { cn } from '@/lib/utils';

src/pages/JsonTools/JsonFormatSection.tsx

@@ -7,7 +7,7 @@ import {
   validateJson,
 } from '@/utils/jsonFormatter';
 import { formatBytes } from '@/utils/format';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import SwitchButtonGroup from '@/components/SwitchButtonGroup';
 import TextInputArea from '@/components/TextInputArea';
 import { Checkbox } from '@/components/ui/checkbox';

src/pages/Jwt/JwtSection.tsx

@@ -1,4 +1,4 @@
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import { useI18n } from '@/utils/chromeI18n';
 import { stringifyJson } from '@/utils/jwt';
 import { cn } from '@/lib/utils';

src/pages/Jwt/index.tsx

@@ -1,5 +1,5 @@
 import TextInputArea from '@/components/TextInputArea';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import JwtSection from './JwtSection';
 import { useJwt } from './useJwt';
 import { useI18n } from '@/utils/chromeI18n';

src/pages/README.md

@@ -113,6 +113,14 @@ Base64 编解码工具，支持文本/文件/图片三种模式。
 | `TextMode.tsx`               | 文本模式              |
 | `Base64ConverterSection.tsx` | 文件/图片通用转换区域 |
 
+### MarkdownToHtml/
+
+Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
+
+### HtmlToMarkdown/
+
+HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
+
 ### RightClickRestorer/
 
 右键菜单恢复工具，解除网站对右键的限制。
@@ -122,32 +130,11 @@ Base64 编解码工具，支持文本/文件/图片三种模式。
 | `index.tsx`                | 页面 UI       |
 | `useRightClickRestorer.ts` | 业务逻辑 Hook |
 
-### TestDataGenerator/
-
-测试数据生成器，支持可视化字段配置、规则复用、Web Worker 批量生成和 JSON/CSV 导出。
-
-| 文件/目录                    | 用途                                              |
-| ---------------------------- | ------------------------------------------------- |
-| `index.tsx`                  | 主页面，管理字段配置、规则标签页和生成结果        |
-| `hooks/useGenerator.ts`      | Worker 生命周期与消息通信，暴露生成/取消/清理操作 |
-| `components/FieldList.tsx`   | 字段列表、拖拽排序、虚拟滚动和规则保存入口        |
-| `components/FieldEditor.tsx` | 字段名称、生成器、参数、必填/空值率/唯一性配置    |
-| `components/RuleManager.tsx` | 规则搜索、加载、编辑、复制、删除、导入和导出      |
-| `components/ExportPanel.tsx` | 生成结果复制和 JSON/CSV 下载                      |
-
-约束与注意事项：
-
-- 字段数量最多 40 个（`FieldList.MAX_FIELDS`）。
-- 生成数量为 1 ~ 100,000，预设值包含 50、100、1,000、5,000、10,000。
-- 大批量生成通过 `src/workers/generator.worker.ts` 执行，避免阻塞 UI；Worker 每 1,000 条或结束时回传进度。
-- 规则通过 `src/utils/ruleStorage.ts` 存入 `localStorage`，最多保存 20 条规则。
-- 内置生成器位于 `src/lib/generators/`，按个人信息、业务数据、技术数据、基础类型分类。
-
 ## 新增页面
 
 1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型成员
 2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
 3. 在 `pages/` 创建页面目录（遵循上述结构）
-4. 在 `public/_locales/zh_CN/messages.json` 添加 Chrome i18n 翻译
+4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译
 5. 如需新权限，更新 `wxt.config.ts`
 6. 添加对应的单元测试

src/pages/TestDataGenerator/components/DataPreview.tsx

@@ -1,114 +0,0 @@
-/**
- * 数据预览组件
- * 展示一条示例数据，展示数据结构
- */
-
-import { useMemo } from 'react';
-import { FileJson, FileText } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
-import { getGeneratorById } from '@/lib/generators';
-import type { FieldConfig } from '@/types/testDataGenerator';
-
-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 }[] = [];
-    const entries = Object.entries(data);
-
-    entries.forEach(([key, value], index) => {
-      const isLast = index === entries.length - 1;
-      const formattedValue =
-        value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
-      lines.push({ indent: '  ', key, value: formattedValue, isLast });
-    });
-
-    return lines;
-  }, [data]);
-
-  return (
-    <pre className="text-sm font-mono leading-relaxed">
-      <span className="text-muted-foreground">{'{'}</span>
-      {formatted.map((line, i) => (
-        <div key={i} className="flex">
-          <span className="text-muted-foreground">{line.indent}</span>
-          <span className="text-blue-500 dark:text-blue-400">&quot;{line.key}&quot;</span>
-          <span className="text-muted-foreground">{': '}</span>
-          <span className={getValueColor(line.value)}>{line.value}</span>
-          {!line.isLast && <span className="text-muted-foreground">,</span>}
-        </div>
-      ))}
-      <span className="text-muted-foreground">{'}'}</span>
-    </pre>
-  );
-}
-
-/** 根据值类型返回颜色类名 */
-function getValueColor(value: string): string {
-  if (value === 'null') return 'text-muted-foreground';
-  if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
-  if (/^\d+$/.test(value)) return 'text-amber-600 dark:text-amber-400';
-  if (value === 'true' || value === 'false') return 'text-purple-600 dark:text-purple-400';
-  return 'text-foreground';
-}
-
-export default function DataPreview({ fields }: DataPreviewProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  // 生成一条示例数据
-  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;
-      }
-      const generator = getGeneratorById(field.generatorId);
-      if (generator) {
-        record[field.name] = generator.generate(field.params);
-      } else {
-        record[field.name] = null;
-      }
-    }
-    return record;
-  }, [fields]);
-
-  if (!sampleData) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full text-center">
-        <FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
-        <p className="text-xs text-muted-foreground/50">{t('testDataGenerator_noDataHint')}</p>
-      </div>
-    );
-  }
-
-  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">
-            <FileText className="h-3 w-3 text-primary" />
-          </div>
-          <span className="text-xs font-medium text-muted-foreground">
-            {t('testDataGenerator_sampleData')}
-          </span>
-        </div>
-        <span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
-          {Object.keys(sampleData).length} {t('testDataGenerator_fields')}
-        </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>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/ExportPanel.tsx

@@ -1,81 +0,0 @@
-/**
- * 导出面板组件
- * 提供复制、下载 JSON、下载 CSV 选项
- */
-
-import { Copy, Download } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useI18n } from '@/utils/chromeI18n';
-import { DataExporter } from '@/utils/dataExporter';
-import type { GenerateResult } from '@/types/testDataGenerator';
-
-interface ExportPanelProps {
-  result: GenerateResult | null;
-}
-
-export default function ExportPanel({ result }: ExportPanelProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  if (!result?.data || result.data.length === 0) {
-    return null;
-  }
-
-  const handleCopyJSON = async () => {
-    const content = DataExporter.toJSON(result.data!);
-    const success = await DataExporter.copyToClipboard(content);
-    if (success) {
-      toast.success(t('testDataGenerator_copySuccess'));
-    } else {
-      toast.error(t('testDataGenerator_copyFailed'));
-    }
-  };
-
-  const handleCopyCSV = async () => {
-    const content = DataExporter.toCSV(result.data!);
-    const success = await DataExporter.copyToClipboard(content);
-    if (success) {
-      toast.success(t('testDataGenerator_copySuccess'));
-    } else {
-      toast.error(t('testDataGenerator_copyFailed'));
-    }
-  };
-
-  const handleDownloadJSON = () => {
-    const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
-    DataExporter.download(file);
-  };
-
-  const handleDownloadCSV = () => {
-    const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
-    DataExporter.download(file);
-  };
-
-  return (
-    <div className="space-y-2">
-      <h4 className="text-sm font-medium text-foreground">{t('testDataGenerator_export')}</h4>
-
-      <div className="grid grid-cols-2 gap-2">
-        <Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
-          <Copy className="h-4 w-4" />
-          {t('testDataGenerator_copyJSON')}
-        </Button>
-
-        <Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
-          <Copy className="h-4 w-4" />
-          {t('testDataGenerator_copyCSV')}
-        </Button>
-
-        <Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
-          <Download className="h-4 w-4" />
-          {t('testDataGenerator_downloadJSON')}
-        </Button>
-
-        <Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
-          <Download className="h-4 w-4" />
-          {t('testDataGenerator_downloadCSV')}
-        </Button>
-      </div>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/FieldEditor.tsx

@@ -1,230 +0,0 @@
-/**
- * 字段编辑器组件
- * 编辑单个字段的详细配置
- */
-
-import { useState, useCallback } from 'react';
-import { useI18n } from '@/utils/chromeI18n';
-import { Input } from '@/components/ui/input';
-import { Switch } from '@/components/ui/switch';
-import { Badge } from '@/components/ui/badge';
-import { getGeneratorById } from '@/lib/generators';
-import type { FieldConfig } from '@/types/testDataGenerator';
-import GeneratorSelector from './GeneratorSelector';
-import GeneratorConfig from './GeneratorConfig';
-
-interface FieldEditorProps {
-  field: FieldConfig;
-  onChange: (field: FieldConfig) => void;
-  /** 所有字段名列表，用于检测重复 */
-  allFieldNames?: string[];
-}
-
-export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
-  const { t } = useI18n('testDataGenerator');
-  const generator = getGeneratorById(field.generatorId);
-  const [nameError, setNameError] = useState<string | null>(null);
-
-  const validateFieldName = useCallback(
-    (name: string): string | null => {
-      const trimmed = name.trim();
-      if (!trimmed) {
-        return t('testDataGenerator_fieldNameEmpty');
-      }
-      if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
-        return t('testDataGenerator_fieldNameInvalid');
-      }
-      const isDuplicate = allFieldNames.some(
-        (n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
-      );
-      if (isDuplicate) {
-        return t('testDataGenerator_fieldNameDuplicate');
-      }
-      return null;
-    },
-    [allFieldNames, field.name, t],
-  );
-
-  const handleNameChange = (name: string) => {
-    onChange({ ...field, name });
-    // 实时校验
-    const error = validateFieldName(name);
-    setNameError(error);
-  };
-
-  const handleDescriptionChange = (description: string) => {
-    onChange({ ...field, description });
-  };
-
-  const handleRequiredChange = (required: boolean) => {
-    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 {
-      onChange({ ...field, nullRate: clampedRate, required: false });
-    }
-  };
-
-  const handleUniqueChange = (unique: boolean) => {
-    onChange({ ...field, unique });
-  };
-
-  const handleGeneratorChange = (generatorId: string) => {
-    const generator = getGeneratorById(generatorId);
-    const defaultParams: Record<string, unknown> = {};
-    generator?.params.forEach((p) => {
-      defaultParams[p.key] = p.defaultValue;
-    });
-    onChange({
-      ...field,
-      generatorId,
-      params: defaultParams,
-    });
-  };
-
-  const handleParamsChange = (params: Record<string, unknown>) => {
-    onChange({ ...field, params });
-  };
-
-  const nullRatePresets = [
-    { label: '5%', value: 5 },
-    { label: '20%', value: 20 },
-    { label: '50%', value: 50 },
-    { label: '75%', value: 75 },
-  ];
-
-  return (
-    <div className="space-y-5">
-      {/* 基础配置 */}
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-foreground">
-              {t('testDataGenerator_fieldName')}
-            </label>
-            <span className="text-xs text-muted-foreground">{field.name.length}/20</span>
-          </div>
-          <Input
-            value={field.name}
-            onChange={(e) => handleNameChange(e.target.value)}
-            placeholder={t('testDataGenerator_fieldNamePlaceholder')}
-            maxLength={20}
-            className={`h-9 ${nameError ? 'border-destructive' : ''}`}
-          />
-          {nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
-        </div>
-
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <label className="text-sm font-medium text-foreground">
-              {t('testDataGenerator_fieldDescription')}
-            </label>
-            <span className="text-xs text-muted-foreground">
-              {(field.description || '').length}/50
-            </span>
-          </div>
-          <Input
-            value={field.description || ''}
-            onChange={(e) => handleDescriptionChange(e.target.value)}
-            placeholder={t('testDataGenerator_fieldDescriptionPlaceholder')}
-            maxLength={50}
-            className="h-9"
-          />
-        </div>
-      </div>
-
-      {/* 必填/选填配置 */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_required')}
-          </label>
-          <Switch checked={field.required} onCheckedChange={handleRequiredChange} />
-        </div>
-
-        {!field.required && (
-          <div className="space-y-2 pl-1">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                {t('testDataGenerator_nullRate')}
-              </span>
-              <Badge variant="secondary" className="text-xs">
-                {field.nullRate}%
-              </Badge>
-            </div>
-            <Input
-              type="number"
-              value={field.nullRate}
-              onChange={(e) => {
-                const value = Number(e.target.value);
-                if (value >= 0 && value <= 100) {
-                  handleNullRateChange(value);
-                }
-              }}
-              min={0}
-              max={100}
-              step={5}
-              className="h-9 w-full"
-            />
-            <div className="flex gap-2">
-              {nullRatePresets.map((preset) => (
-                <button
-                  key={preset.value}
-                  onClick={() => handleNullRateChange(preset.value)}
-                  className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
-                    field.nullRate === preset.value
-                      ? 'bg-primary text-primary-foreground'
-                      : 'bg-muted text-muted-foreground hover:bg-muted/80'
-                  }`}
-                >
-                  {preset.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* 唯一性约束 */}
-      <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_uniqueConstraint')}
-        </label>
-        <Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
-      </div>
-
-      {/* 生成器选择 */}
-      <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_generator')}
-        </label>
-        <GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
-      </div>
-
-      {/* 生成器参数配置 */}
-      {generator && (
-        <div className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            {t('testDataGenerator_generatorParams')}
-          </label>
-          <GeneratorConfig
-            generator={generator}
-            params={field.params}
-            onChange={handleParamsChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/FieldItem.tsx

@@ -1,59 +0,0 @@
-/**
- * 字段项组件
- * 展示单个字段的基本信息，适配固定高度卡片
- */
-
-import { useI18n } from '@/utils/chromeI18n';
-import { getGeneratorById } from '@/lib/generators';
-import { Badge } from '@/components/ui/badge';
-import type { FieldConfig } from '@/types/testDataGenerator';
-
-interface FieldItemProps {
-  field: FieldConfig;
-  onClick: () => void;
-}
-
-export default function FieldItem({ field, onClick }: FieldItemProps) {
-  const { t } = useI18n('testDataGenerator');
-  const generator = getGeneratorById(field.generatorId);
-
-  return (
-    <div
-      className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
-      onClick={onClick}
-    >
-      <div
-        className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
-      >
-        {/* 第一行：字段名 + 标签 */}
-        <div className="flex items-center gap-1.5 overflow-hidden">
-          <span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
-            {field.name}
-          </span>
-          <Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
-            {generator?.name || field.generatorId}
-          </Badge>
-          {!field.required && (
-            <Badge
-              variant="outline"
-              className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
-            >
-              {field.nullRate}%
-            </Badge>
-          )}
-          {field.unique && (
-            <Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
-              {t('testDataGenerator_unique')}
-            </Badge>
-          )}
-        </div>
-        {/* 第二行：描述 */}
-        {field.description && (
-          <p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
-            {field.description}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/FieldList.tsx

@@ -1,466 +0,0 @@
-/**
- * 字段列表组件
- * 展示所有字段配置，支持添加、删除、拖拽排序
- * 超过 5 条时启用虚拟列表滚动
- */
-
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { useI18n } from '@/utils/chromeI18n';
-import * as ruleStorage from '@/utils/ruleStorage';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-  type DragStartEvent,
-  DragOverlay,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
-import FieldItem from './FieldItem';
-
-/** 最大字段数量 */
-export const MAX_FIELDS = 40;
-
-/** 虚拟列表配置 */
-const VISIBLE_COUNT = 5;
-const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
-const ROW_GAP = 8;
-const OVERSCAN = 2;
-const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
-
-interface FieldListProps {
-  fields: FieldConfig[];
-  onUpdate: (index: number, field: FieldConfig) => void;
-  onRemove: (index: number) => void;
-  onAdd: () => void;
-  onEdit: (index: number) => void;
-  onReorder: (oldIndex: number, newIndex: number) => void;
-  editingRule?: DataRule | null;
-  onRuleSaved?: () => void;
-}
-
-/** 可排序的字段项 */
-function SortableFieldItem({
-  field,
-  onEdit,
-  onRemove,
-}: {
-  field: FieldConfig;
-  onEdit: () => void;
-  onRemove: () => void;
-}) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: field.id,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 10 : 0,
-    height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={`group relative rounded-lg border transition-all ${
-        isDragging
-          ? 'border-primary shadow-lg'
-          : 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
-      }`}
-    >
-      <div className="flex items-center gap-2 h-full px-3 py-2">
-        {/* 拖拽手柄 */}
-        <button
-          className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
-          {...attributes}
-          {...listeners}
-        >
-          <GripVertical className="h-4 w-4 text-muted-foreground" />
-        </button>
-
-        <div className="flex-1 min-w-0">
-          <FieldItem field={field} onClick={onEdit} />
-        </div>
-
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
-          onClick={onRemove}
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default function FieldList({
-  fields,
-  onUpdate: _onUpdate,
-  onRemove,
-  onAdd,
-  onEdit,
-  onReorder,
-  editingRule,
-  onRuleSaved,
-}: FieldListProps) {
-  const { t } = useI18n('testDataGenerator');
-  const [scrollTop, setScrollTop] = useState(0);
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [showSaveDialog, setShowSaveDialog] = useState(false);
-  const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
-  const [ruleName, setRuleName] = useState('');
-  const [ruleDescription, setRuleDescription] = useState('');
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: 5 },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  const handleDragStart = (event: DragStartEvent) => {
-    setActiveId(String(event.active.id));
-  };
-
-  // 拖拽时的滚轮滚动处理
-  useEffect(() => {
-    if (!activeId || !containerRef.current) return;
-
-    const container = containerRef.current;
-
-    const handleWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      // 滚动容器
-      const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
-      const newScrollTop = Math.max(
-        0,
-        Math.min(
-          container.scrollHeight - container.clientHeight,
-          container.scrollTop + scrollAmount,
-        ),
-      );
-      container.scrollTop = newScrollTop;
-      setScrollTop(newScrollTop);
-    };
-
-    // 在 document 级别监听，使用 capture 阶段以优先处理
-    document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
-
-    return () => {
-      document.removeEventListener('wheel', handleWheel, { capture: true });
-    };
-  }, [activeId]);
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    setActiveId(null);
-    if (!over || active.id === over.id) return;
-
-    const oldIndex = fields.findIndex((f) => f.id === active.id);
-    const newIndex = fields.findIndex((f) => f.id === over.id);
-    if (oldIndex !== -1 && newIndex !== -1) {
-      onReorder(oldIndex, newIndex);
-    }
-  };
-
-  const handleScroll = useCallback(() => {
-    if (containerRef.current) {
-      setScrollTop(containerRef.current.scrollTop);
-    }
-  }, []);
-
-  const isVirtual = fields.length > VISIBLE_COUNT;
-  const totalHeight = fields.length * ROW_HEIGHT;
-  const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
-  // 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
-  const containerStyle =
-    fields.length < VISIBLE_COUNT
-      ? { height: 'auto' as const, overflowY: 'visible' as const }
-      : { height: fixedContainerHeight, overflowY: 'auto' as const };
-
-  // 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
-  const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
-  const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
-  const visibleEnd = Math.min(
-    fields.length,
-    Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
-  );
-  const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
-
-  // 查找拖拽中的项目（用于 DragOverlay）
-  const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
-
-  const isMaxReached = fields.length >= MAX_FIELDS;
-
-  // 编辑模式下，保存时更新原规则
-  const handleUpdateRule = useCallback(() => {
-    if (!editingRule) return;
-
-    const updated = ruleStorage.update(editingRule.id, {
-      fields: fields,
-    });
-
-    if (updated) {
-      toast.success(t('testDataGenerator_ruleUpdated'));
-      onRuleSaved?.();
-    }
-  }, [editingRule, fields, t, onRuleSaved]);
-
-  // 新建规则或另存为
-  const handleSave = useCallback(
-    (overwrite = false) => {
-      if (!ruleName.trim()) return;
-
-      const trimmedName = ruleName.trim();
-
-      // 检查名称是否重复
-      if (!overwrite) {
-        const existingRule = ruleStorage.getByName(trimmedName);
-        if (existingRule) {
-          setShowConfirmOverwrite(true);
-          return;
-        }
-      }
-
-      const newRule = ruleStorage.save({
-        name: trimmedName,
-        description: ruleDescription.trim(),
-        fields: fields,
-      });
-
-      if (newRule) {
-        setShowSaveDialog(false);
-        setShowConfirmOverwrite(false);
-        setRuleName('');
-        setRuleDescription('');
-        toast.success(t('testDataGenerator_ruleSaved'));
-        onRuleSaved?.();
-      }
-    },
-    [ruleName, ruleDescription, fields, t, onRuleSaved],
-  );
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_fields')} ({fields.length}/{MAX_FIELDS})
-        </h3>
-        <div className="flex items-center gap-2">
-          {editingRule ? (
-            <>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleUpdateRule}
-                disabled={fields.length === 0}
-                className="h-8 gap-1.5 px-2.5"
-                title={`${t('testDataGenerator_editing')}: ${editingRule.name}`}
-              >
-                <Save className="h-3.5 w-3.5" />
-                {t('testDataGenerator_updateRule')}
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setShowSaveDialog(true)}
-                disabled={fields.length === 0}
-                className="h-8 px-2"
-              >
-                {t('testDataGenerator_saveAs')}
-              </Button>
-            </>
-          ) : (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setShowSaveDialog(true)}
-              disabled={fields.length === 0}
-              className="h-8 gap-1.5 px-2.5"
-            >
-              <Save className="h-3.5 w-3.5" />
-              {t('testDataGenerator_saveRule')}
-            </Button>
-          )}
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onAdd}
-            disabled={isMaxReached}
-            className="h-8 gap-1.5 px-2.5"
-          >
-            <Plus className="h-4 w-4" />
-            {t('testDataGenerator_addField')}
-          </Button>
-        </div>
-      </div>
-
-      <div className="flex-1 min-h-0">
-        {fields.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-8 text-center">
-            <GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
-            <p className="text-sm text-muted-foreground">{t('testDataGenerator_noFields')}</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">
-              {t('testDataGenerator_addFieldHint')}
-            </p>
-          </div>
-        ) : (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-          >
-            <SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
-              <div
-                ref={containerRef}
-                className="overflow-y-auto"
-                style={containerStyle}
-                onScroll={handleScroll}
-              >
-                {isVirtual ? (
-                  /* 虚拟滚动模式 */
-                  <div style={{ height: totalHeight, position: 'relative' }}>
-                    <div
-                      style={{
-                        position: 'absolute',
-                        top: visibleStart * ROW_HEIGHT,
-                        left: 0,
-                        right: 0,
-                      }}
-                    >
-                      {visibleFields.map((field, vi) => {
-                        const realIndex = fields.findIndex((f) => f.id === field.id);
-                        const isLast = visibleStart + vi === fields.length - 1;
-                        return (
-                          <div
-                            key={field.id}
-                            style={{
-                              height: ROW_HEIGHT,
-                              paddingBottom: isLast ? 0 : ROW_GAP,
-                            }}
-                          >
-                            <SortableFieldItem
-                              field={field}
-                              onEdit={() => onEdit(realIndex)}
-                              onRemove={() => onRemove(realIndex)}
-                            />
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ) : (
-                  /* 普通模式（≤5 条） */
-                  <div className="space-y-2">
-                    {fields.map((field, index) => (
-                      <SortableFieldItem
-                        key={field.id}
-                        field={field}
-                        onEdit={() => onEdit(index)}
-                        onRemove={() => onRemove(index)}
-                      />
-                    ))}
-                  </div>
-                )}
-              </div>
-            </SortableContext>
-            <DragOverlay>
-              {activeField ? (
-                <div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
-                  <div className="flex items-center gap-2 h-full px-3 py-2">
-                    <div className="p-1">
-                      <GripVertical className="h-4 w-4 text-muted-foreground" />
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <FieldItem field={activeField} onClick={() => {}} />
-                    </div>
-                    <div className="h-8 w-8 shrink-0" />
-                  </div>
-                </div>
-              ) : null}
-            </DragOverlay>
-          </DndContext>
-        )}
-      </div>
-
-      {/* 保存规则对话框 */}
-      <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
-        <DialogContent
-          showCloseButton={false}
-          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
-        >
-          <div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
-            <Input
-              value={ruleName}
-              onChange={(e) => setRuleName(e.target.value)}
-              placeholder={t('testDataGenerator_ruleNamePlaceholder')}
-              className="h-9"
-            />
-            <Input
-              value={ruleDescription}
-              onChange={(e) => setRuleDescription(e.target.value)}
-              placeholder={t('testDataGenerator_ruleDescPlaceholder')}
-              className="h-9"
-            />
-          </div>
-          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
-            <Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
-              {t('testDataGenerator_cancel')}
-            </Button>
-            <Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
-              {t('testDataGenerator_confirm')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 覆盖确认对话框 */}
-      <Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
-        <DialogContent
-          showCloseButton={false}
-          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
-        >
-          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            <p className="text-sm text-muted-foreground">
-              {t('testDataGenerator_ruleNameDuplicate')}
-            </p>
-          </div>
-          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
-            <Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
-              {t('testDataGenerator_cancel')}
-            </Button>
-            <Button size="sm" onClick={() => handleSave(true)}>
-              {t('testDataGenerator_overwrite')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/GenerateButton.tsx

@@ -1,73 +0,0 @@
-/**
- * 生成按钮组件
- * 显示生成按钮、加载状态和进度条
- */
-
-import { Play, Square } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { useI18n } from '@/utils/chromeI18n';
-import type { GenerateProgress } from '@/types/testDataGenerator';
-
-interface GenerateButtonProps {
-  onClick: () => void;
-  onCancel: () => void;
-  isGenerating: boolean;
-  progress: GenerateProgress | null;
-  disabled?: boolean;
-}
-
-export default function GenerateButton({
-  onClick,
-  onCancel,
-  isGenerating,
-  progress,
-  disabled,
-}: GenerateButtonProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  return (
-    <div className="space-y-3">
-      {isGenerating ? (
-        <>
-          <Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
-            <Square className="h-5 w-5" />
-            {t('testDataGenerator_cancel')}
-          </Button>
-
-          {/* 进度条 */}
-          {progress && (
-            <div className="space-y-2">
-              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <span>
-                  {t('testDataGenerator_progress', {
-                    current: progress.generated.toLocaleString(),
-                    total: progress.total.toLocaleString(),
-                  })}
-                </span>
-                <span>{progress.progress}%</span>
-              </div>
-              <div className="h-2 bg-muted rounded-full overflow-hidden">
-                <div
-                  className="h-full bg-primary transition-all duration-300"
-                  style={{ width: `${progress.progress}%` }}
-                />
-              </div>
-              {progress.estimatedTimeLeft !== undefined && (
-                <p className="text-xs text-muted-foreground text-center">
-                  {t('testDataGenerator_estimatedTime', {
-                    time: Math.ceil(progress.estimatedTimeLeft / 1000),
-                  })}
-                </p>
-              )}
-            </div>
-          )}
-        </>
-      ) : (
-        <Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
-          <Play className="h-5 w-5" />
-          {t('testDataGenerator_generate')}
-        </Button>
-      )}
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/GenerateOptions.tsx

@@ -1,91 +0,0 @@
-/**
- * 生成选项组件
- * 配置生成数量、数据格式等选项
- */
-
-import { useI18n } from '@/utils/chromeI18n';
-import { Input } from '@/components/ui/input';
-
-interface GenerateOptionsProps {
-  count: number;
-  onCountChange: (count: number) => void;
-  format: 'json' | 'csv';
-  onFormatChange: (format: 'json' | 'csv') => void;
-}
-
-const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
-
-const FORMAT_OPTIONS = [
-  { value: 'json' as const, label: 'JSON' },
-  { value: 'csv' as const, label: 'CSV' },
-];
-
-export default function GenerateOptions({
-  count,
-  onCountChange,
-  format,
-  onFormatChange,
-}: GenerateOptionsProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  return (
-    <div className="space-y-4">
-      {/* 生成数量 */}
-      <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_count')}
-        </label>
-        <div className="flex flex-wrap gap-2">
-          {COUNT_PRESETS.map((preset) => (
-            <button
-              key={preset}
-              onClick={() => onCountChange(preset)}
-              className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
-                count === preset
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
-              }`}
-            >
-              {preset.toLocaleString()}
-            </button>
-          ))}
-        </div>
-        <Input
-          type="number"
-          value={count}
-          onChange={(e) => {
-            const value = Number(e.target.value);
-            if (value > 0 && value <= 100000) {
-              onCountChange(value);
-            }
-          }}
-          min={1}
-          max={100000}
-          className="h-9"
-        />
-      </div>
-
-      {/* 数据格式 */}
-      <div className="space-y-2">
-        <label className="text-sm font-medium text-foreground">
-          {t('testDataGenerator_format')}
-        </label>
-        <div className="flex gap-2">
-          {FORMAT_OPTIONS.map((option) => (
-            <button
-              key={option.value}
-              onClick={() => onFormatChange(option.value)}
-              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
-                format === option.value
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-muted text-muted-foreground hover:bg-muted/80'
-              }`}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/GeneratorConfig.tsx

@@ -1,126 +0,0 @@
-/**
- * 生成器配置组件
- * 根据生成器参数定义动态渲染配置表单
- */
-
-import { Input } from '@/components/ui/input';
-import { Switch } from '@/components/ui/switch';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { useI18n } from '@/utils/chromeI18n';
-import type { GeneratorDefinition } from '@/types/testDataGenerator';
-
-interface GeneratorConfigProps {
-  generator: GeneratorDefinition;
-  params: Record<string, unknown>;
-  onChange: (params: Record<string, unknown>) => void;
-}
-
-export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
-  const { t } = useI18n('testDataGenerator');
-  const handleParamChange = (key: string, value: unknown) => {
-    onChange({ ...params, [key]: value });
-  };
-
-  if (generator.params.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground py-2">
-        {t('testDataGenerator_noGeneratorParams')}
-      </p>
-    );
-  }
-
-  return (
-    <div className="space-y-4 p-3 rounded-lg bg-muted/30">
-      {generator.params.map((param) => (
-        <div key={param.key} className="space-y-2">
-          <label className="text-sm font-medium text-foreground">
-            {param.label}
-            {param.required && <span className="text-destructive ml-1">*</span>}
-          </label>
-          {param.description && (
-            <p className="text-xs text-muted-foreground">{param.description}</p>
-          )}
-
-          {param.type === 'string' && (
-            <Input
-              value={String(params[param.key] ?? param.defaultValue)}
-              onChange={(e) => handleParamChange(param.key, e.target.value)}
-              placeholder={param.placeholder}
-              className="h-9"
-            />
-          )}
-
-          {param.type === 'number' && (
-            <Input
-              type="number"
-              value={Number(params[param.key] ?? param.defaultValue)}
-              onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
-              min={param.min}
-              max={param.max}
-              className="h-9"
-            />
-          )}
-
-          {param.type === 'boolean' && (
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                {params[param.key] !== false
-                  ? t('testDataGenerator_enabled')
-                  : t('testDataGenerator_disabled')}
-              </span>
-              <Switch
-                checked={params[param.key] !== false}
-                onCheckedChange={(checked) => handleParamChange(param.key, checked)}
-              />
-            </div>
-          )}
-
-          {param.type === 'select' && (
-            <Select
-              value={String(params[param.key] ?? param.defaultValue)}
-              onValueChange={(value) => handleParamChange(param.key, value)}
-            >
-              <SelectTrigger className="h-9">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {param.options?.map((option) => (
-                  <SelectItem key={String(option.value)} value={String(option.value)}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )}
-
-          {param.type === 'array' && (
-            <Input
-              value={
-                Array.isArray(params[param.key])
-                  ? (params[param.key] as string[]).join(', ')
-                  : String(param.defaultValue || '')
-              }
-              onChange={(e) =>
-                handleParamChange(
-                  param.key,
-                  e.target.value
-                    .split(',')
-                    .map((s) => s.trim())
-                    .filter(Boolean),
-                )
-              }
-              placeholder={t('testDataGenerator_commaSeparated')}
-              className="h-9"
-            />
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/GeneratorSelector.tsx

@@ -1,90 +0,0 @@
-/**
- * 生成器选择器组件
- * 以分类形式展示所有可用生成器
- */
-
-import { useState } from 'react';
-import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { useI18n } from '@/utils/chromeI18n';
-import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
-
-interface GeneratorSelectorProps {
-  selectedId: string;
-  onChange: (id: string) => void;
-}
-
-const categoryIcons: Record<string, React.ComponentType<{ className?: string }>> = {
-  personal: User,
-  business: Briefcase,
-  technical: Code,
-  basic: Hash,
-};
-
-export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
-  const { t } = useI18n('testDataGenerator');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
-
-  const generators = searchQuery
-    ? searchGenerators(searchQuery)
-    : getGeneratorsByCategory(activeCategory);
-
-  return (
-    <div className="space-y-3">
-      {/* 搜索框 */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-        <Input
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder={t('testDataGenerator_searchGenerator')}
-          className="pl-9 h-9"
-        />
-      </div>
-
-      {/* 分类标签 */}
-      {!searchQuery && (
-        <div className="flex flex-wrap gap-2">
-          {generatorCategories.map((category) => {
-            const Icon = categoryIcons[category.id];
-            return (
-              <button
-                key={category.id}
-                onClick={() => setActiveCategory(category.id)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
-                  activeCategory === category.id
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
-                }`}
-              >
-                {Icon && <Icon className="h-3.5 w-3.5" />}
-                {category.name}
-              </button>
-            );
-          })}
-        </div>
-      )}
-
-      {/* 生成器列表 */}
-      <div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
-        {generators.map((generator) => (
-          <button
-            key={generator.id}
-            onClick={() => onChange(generator.id)}
-            className={`flex flex-col items-start p-2 text-left rounded-md border transition-colors ${
-              selectedId === generator.id
-                ? 'border-primary bg-primary/5'
-                : 'border-border hover:border-muted-foreground/30'
-            }`}
-          >
-            <span className="text-sm font-medium text-foreground">{generator.name}</span>
-            <span className="text-xs text-muted-foreground line-clamp-1">
-              {generator.description}
-            </span>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/ResultPanel.tsx

@@ -1,115 +0,0 @@
-/**
- * 结果面板组件
- * 展示生成结果的状态和统计信息
- */
-
-import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
-import type { GenerateResult } from '@/types/testDataGenerator';
-
-interface ResultPanelProps {
-  result: GenerateResult | null;
-}
-
-export default function ResultPanel({ result }: ResultPanelProps) {
-  const { t } = useI18n('testDataGenerator');
-
-  if (!result) return null;
-
-  const getStatusIcon = () => {
-    if (result.success && (!result.warnings || result.warnings.length === 0)) {
-      return <CheckCircle className="h-5 w-5 text-green-500" />;
-    }
-    if (result.success && result.warnings && result.warnings.length > 0) {
-      return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
-    }
-    return <XCircle className="h-5 w-5 text-destructive" />;
-  };
-
-  const getStatusText = () => {
-    if (result.success && (!result.warnings || result.warnings.length === 0)) {
-      return t('testDataGenerator_success');
-    }
-    if (result.success && result.warnings && result.warnings.length > 0) {
-      return t('testDataGenerator_partialSuccess');
-    }
-    return t('testDataGenerator_failed');
-  };
-
-  return (
-    <div className="space-y-3">
-      {/* 状态标题 */}
-      <div className="flex items-center gap-2">
-        {getStatusIcon()}
-        <span className="text-sm font-medium text-foreground">{getStatusText()}</span>
-      </div>
-
-      {/* 统计信息 */}
-      {result.stats && (
-        <div className="grid grid-cols-3 gap-3">
-          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
-            <Database className="h-4 w-4 text-muted-foreground mb-1" />
-            <span className="text-lg font-semibold text-foreground">
-              {result.stats.total.toLocaleString()}
-            </span>
-            <span className="text-xs text-muted-foreground">
-              {t('testDataGenerator_totalCount')}
-            </span>
-          </div>
-
-          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
-            <CheckCircle className="h-4 w-4 text-green-500 mb-1" />
-            <span className="text-lg font-semibold text-green-500">
-              {result.stats.success.toLocaleString()}
-            </span>
-            <span className="text-xs text-muted-foreground">
-              {t('testDataGenerator_successCount')}
-            </span>
-          </div>
-
-          <div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
-            <Clock className="h-4 w-4 text-muted-foreground mb-1" />
-            <span className="text-lg font-semibold text-foreground">
-              {(result.stats.duration / 1000).toFixed(2)}s
-            </span>
-            <span className="text-xs text-muted-foreground">{t('testDataGenerator_duration')}</span>
-          </div>
-        </div>
-      )}
-
-      {/* 警告信息 */}
-      {result.warnings && result.warnings.length > 0 && (
-        <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
-          <div className="flex items-center gap-2 mb-2">
-            <AlertTriangle className="h-4 w-4 text-yellow-500" />
-            <span className="text-sm font-medium text-yellow-500">
-              {t('testDataGenerator_warnings')}
-            </span>
-          </div>
-          <ul className="list-disc list-inside space-y-1">
-            {result.warnings.slice(0, 5).map((warning, index) => (
-              <li key={index} className="text-xs text-yellow-500/80">
-                {warning}
-              </li>
-            ))}
-            {result.warnings.length > 5 && (
-              <li className="text-xs text-yellow-500/80">
-                ... {t('testDataGenerator_moreWarnings', { count: result.warnings.length - 5 })}
-              </li>
-            )}
-          </ul>
-        </div>
-      )}
-
-      {/* 错误信息 */}
-      {result.error && (
-        <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
-          <div className="flex items-center gap-2">
-            <XCircle className="h-4 w-4 text-destructive" />
-            <span className="text-sm text-destructive">{result.error}</span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/TestDataGenerator/components/RuleManager.tsx

@@ -1,324 +0,0 @@
-/**
- * 规则管理器组件
- * 管理测试数据生成规则的加载、删除等操作
- */
-
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import {
-  Search,
-  Upload,
-  Download,
-  Trash2,
-  Copy,
-  Edit,
-  Clock,
-  Tag,
-  Loader2,
-  FolderOpen,
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { useI18n } from '@/utils/chromeI18n';
-import * as ruleStorage from '@/utils/ruleStorage';
-import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
-
-interface RuleManagerProps {
-  onLoad: (fields: FieldConfig[]) => void;
-  onEdit?: (rule: DataRule) => void;
-  onRulesChanged?: () => void;
-}
-
-export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
-  const { t, i18n } = useI18n('testDataGenerator');
-  const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
-  const [searchQuery, setSearchQuery] = useState('');
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
-  const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
-  const [isImporting, setIsImporting] = useState(false);
-  const [isExporting, setIsExporting] = useState(false);
-
-  const loadRules = useCallback(() => {
-    setRules(ruleStorage.getAll());
-  }, []);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearchQuery(searchQuery);
-    }, 250);
-    return () => clearTimeout(timer);
-  }, [searchQuery]);
-
-  const filteredRules = useMemo(() => {
-    if (!debouncedSearchQuery) return rules;
-    const query = debouncedSearchQuery.toLowerCase();
-    return rules.filter(
-      (rule) =>
-        rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
-    );
-  }, [rules, debouncedSearchQuery]);
-
-  const handleLoad = useCallback(
-    (rule: DataRule) => {
-      onLoad(rule.fields);
-      ruleStorage.recordUse(rule.id);
-      loadRules();
-      toast.success(t('testDataGenerator_ruleLoaded', { name: rule.name }));
-    },
-    [onLoad, loadRules, t],
-  );
-
-  const handleDelete = useCallback(() => {
-    if (!ruleToDelete) return;
-    ruleStorage.deleteRule(ruleToDelete.id);
-    loadRules();
-    setRuleToDelete(null);
-    toast.success(t('testDataGenerator_ruleDeleted'));
-    onRulesChanged?.();
-  }, [ruleToDelete, loadRules, t, onRulesChanged]);
-
-  const handleDuplicate = useCallback(
-    (id: string) => {
-      const result = ruleStorage.duplicate(id, t('testDataGenerator_ruleCopySuffix'));
-      if (result) {
-        loadRules();
-        toast.success(t('testDataGenerator_ruleDuplicated'));
-        onRulesChanged?.();
-      }
-    },
-    [loadRules, t, onRulesChanged],
-  );
-
-  const handleEdit = useCallback(
-    (rule: DataRule) => {
-      onEdit?.(rule);
-    },
-    [onEdit],
-  );
-
-  const handleExport = useCallback(() => {
-    try {
-      setIsExporting(true);
-      const json = ruleStorage.exportRules();
-      const blob = new Blob([json], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      try {
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = 'test-data-rules.json';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      } finally {
-        URL.revokeObjectURL(url);
-      }
-      toast.success(t('testDataGenerator_exportSuccess'));
-    } catch (error) {
-      console.error('[RuleManager] 导出失败:', error);
-      toast.error(t('testDataGenerator_exportFailed'));
-    } finally {
-      setIsExporting(false);
-    }
-  }, [t]);
-
-  const handleImport = useCallback(() => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = '.json';
-    input.onchange = async (e) => {
-      try {
-        setIsImporting(true);
-        const file = (e.target as HTMLInputElement).files?.[0];
-        if (!file) return;
-
-        const text = await file.text();
-        const result = ruleStorage.importRules(text);
-
-        if (result.success > 0) {
-          toast.success(t('testDataGenerator_importSuccess', { count: result.success }));
-        }
-
-        if (result.failed > 0) {
-          toast.error(t('testDataGenerator_importFailed', { count: result.failed }));
-          console.warn('[RuleManager] 导入警告:', result.errors);
-        }
-
-        loadRules();
-        onRulesChanged?.();
-      } catch (error) {
-        console.error('[RuleManager] 导入失败:', error);
-        toast.error(t('testDataGenerator_importFailed'));
-      } finally {
-        setIsImporting(false);
-      }
-    };
-    input.click();
-  }, [loadRules, t, onRulesChanged]);
-
-  const formatDate = useCallback(
-    (timestamp: number) => {
-      return new Date(timestamp).toLocaleDateString(i18n.language || 'zh-CN', {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-    [i18n.language],
-  );
-
-  return (
-    <div className="space-y-4">
-      {/* 删除确认对话框 */}
-      <Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
-        <DialogContent
-          showCloseButton={false}
-          className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
-        >
-          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            <p className="text-sm text-muted-foreground">
-              {t('testDataGenerator_confirmDeleteDescription', { name: ruleToDelete?.name ?? '' })}
-            </p>
-          </div>
-          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
-            <Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
-              {t('testDataGenerator_cancel')}
-            </Button>
-            <Button variant="destructive" size="sm" onClick={handleDelete}>
-              {t('testDataGenerator_confirm')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* 工具栏 */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleImport}
-          disabled={isImporting}
-          className="h-8 gap-1.5"
-        >
-          {isImporting ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Upload className="h-4 w-4" />
-          )}
-          {t('testDataGenerator_import')}
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleExport}
-          disabled={isExporting || rules.length === 0}
-          className="h-8 gap-1.5"
-        >
-          {isExporting ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
-          ) : (
-            <Download className="h-4 w-4" />
-          )}
-          {t('testDataGenerator_export')}
-        </Button>
-      </div>
-
-      {/* 搜索框 */}
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-        <Input
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
-          placeholder={t('testDataGenerator_searchRules')}
-          className="pl-9 pr-24 h-9"
-          maxLength={20}
-        />
-        <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none">
-          {t('testDataGenerator_ruleCount', { count: rules.length, max: 20 })}
-        </span>
-      </div>
-
-      {/* 规则列表 */}
-      <div className="space-y-2 max-h-64 overflow-y-auto">
-        {filteredRules.length === 0 ? (
-          <div className="text-center py-6">
-            <Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
-            <p className="text-sm text-muted-foreground">
-              {debouncedSearchQuery
-                ? t('testDataGenerator_noSearchResults')
-                : t('testDataGenerator_noRules')}
-            </p>
-          </div>
-        ) : (
-          filteredRules.map((rule) => (
-            <div
-              key={rule.id}
-              className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
-            >
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {rule.fields.length} {t('testDataGenerator_fields')}
-                  </span>
-                </div>
-                {rule.description && (
-                  <p className="text-xs text-muted-foreground truncate mt-0.5">
-                    {rule.description}
-                  </p>
-                )}
-                <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
-                  <span className="flex items-center gap-1">
-                    <Clock className="h-3 w-3" />
-                    {formatDate(rule.updatedAt)}
-                  </span>
-                  <span>{t('testDataGenerator_usedTimes', { count: rule.useCount })}</span>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  onClick={() => handleLoad(rule)}
-                  title={t('testDataGenerator_load')}
-                >
-                  <FolderOpen className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  onClick={() => handleEdit(rule)}
-                  title={t('testDataGenerator_edit')}
-                >
-                  <Edit className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  onClick={() => handleDuplicate(rule.id)}
-                  title={t('testDataGenerator_duplicate')}
-                >
-                  <Copy className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-destructive hover:text-destructive"
-                  onClick={() => setRuleToDelete(rule)}
-                  title={t('testDataGenerator_delete')}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,189 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// Mock dependencies
-vi.mock('@/utils/ruleStorage', () => ({
-  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 RuleManager from '../RuleManager';
-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: 'Test Rule',
-  description: 'Test description',
-  fields: mockFields,
-  createdAt: Date.now(),
-  updatedAt: Date.now(),
-  useCount: 0,
-};
-
-describe('RuleManager', () => {
-  const defaultProps = {
-    onLoad: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockedRuleStorage.getAll.mockReturnValue([]);
-  });
-
-  it('should render empty state when no rules', () => {
-    render(<RuleManager {...defaultProps} />);
-
-    expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
-  });
-
-  it('should render rule list when rules exist', () => {
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    expect(screen.getByText('Test Rule')).toBeInTheDocument();
-    expect(screen.getByText('Test description')).toBeInTheDocument();
-  });
-
-  it('should load rule when load button clicked', async () => {
-    const user = userEvent.setup();
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    const loadButton = screen.getByTitle('加载');
-    await user.click(loadButton);
-
-    expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
-    expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
-    // Note: t() mock doesn't handle placeholders, so we just check it was called
-    expect(mockedToast.success).toHaveBeenCalled();
-  });
-
-  it('should show delete confirmation dialog', async () => {
-    const user = userEvent.setup();
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    const deleteButton = screen.getByTitle('删除');
-    await user.click(deleteButton);
-
-    expect(screen.getByText(/确定要删除规则/)).toBeInTheDocument();
-  });
-
-  it('should delete rule after confirmation', async () => {
-    const user = userEvent.setup();
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    // Open delete dialog
-    await user.click(screen.getByTitle('删除'));
-
-    // Confirm delete
-    await user.click(screen.getByText('确认'));
-
-    expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
-    expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
-  });
-
-  it('should duplicate rule when duplicate button clicked', async () => {
-    const user = userEvent.setup();
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-    mockedRuleStorage.duplicate.mockReturnValue({
-      ...mockRule,
-      id: 'rule-2',
-      name: 'Test Rule（副本）',
-    });
-
-    render(<RuleManager {...defaultProps} />);
-
-    await user.click(screen.getByTitle('复制'));
-
-    expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
-    expect(mockedToast.success).toHaveBeenCalled();
-  });
-
-  it('should update search input value', async () => {
-    const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
-    mockedRuleStorage.getAll.mockReturnValue(rules);
-
-    render(<RuleManager {...defaultProps} />);
-
-    // Initially both rules should be visible
-    expect(screen.getByText('Test Rule')).toBeInTheDocument();
-    expect(screen.getByText('Another Rule')).toBeInTheDocument();
-
-    // Verify search input exists and is interactive
-    const searchInput = screen.getByPlaceholderText('搜索规则...');
-    expect(searchInput).toBeInTheDocument();
-    expect(searchInput).toHaveValue('');
-  });
-
-  it('should call exportRules when export button clicked', async () => {
-    const user = userEvent.setup();
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    // Mock URL methods and body methods after render to avoid interfering with createRoot
-    const mockCreateObjectURL = vi.fn(() => 'blob:mock');
-    const mockRevokeObjectURL = vi.fn();
-    vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
-    vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
-    vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
-    vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
-
-    const buttons = screen.getAllByRole('button');
-    const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
-    expect(exportButton).toBeDefined();
-
-    await user.click(exportButton!);
-
-    expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
-    expect(mockCreateObjectURL).toHaveBeenCalled();
-
-    vi.restoreAllMocks();
-  });
-
-  it('should show field count for each rule', () => {
-    mockedRuleStorage.getAll.mockReturnValue([mockRule]);
-
-    render(<RuleManager {...defaultProps} />);
-
-    // The component shows "{count} 字段" format
-    expect(screen.getByText(/字段/)).toBeInTheDocument();
-  });
-});

src/pages/TestDataGenerator/hooks/useGenerator.ts

@@ -1,148 +0,0 @@
-/**
- * 数据生成器 Hook
- * 管理 Web Worker 的创建、销毁和通信
- */
-
-import { useState, useRef, useCallback, useEffect } from 'react';
-import type {
-  FieldConfig,
-  GenerateResult,
-  GenerateProgress,
-  WorkerMessage,
-} from '@/types/testDataGenerator';
-
-export interface UseGeneratorReturn {
-  /** 是否正在生成 */
-  isGenerating: boolean;
-  /** 生成进度 */
-  progress: GenerateProgress | null;
-  /** 生成结果 */
-  result: GenerateResult | null;
-  /** 错误信息 */
-  error: string | null;
-  /** 开始生成 */
-  generate: (fields: FieldConfig[], count: number, csvMode?: boolean) => void;
-  /** 取消生成 */
-  cancel: () => void;
-  /** 清除结果 */
-  clearResult: () => void;
-}
-
-export function useGenerator(): UseGeneratorReturn {
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [progress, setProgress] = useState<GenerateProgress | null>(null);
-  const [result, setResult] = useState<GenerateResult | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const workerRef = useRef<Worker | null>(null);
-
-  // 清理 Worker
-  useEffect(() => {
-    return () => {
-      if (workerRef.current) {
-        workerRef.current.terminate();
-        workerRef.current = null;
-      }
-    };
-  }, []);
-
-  /**
-   * 创建或复用 Worker
-   */
-  const getWorker = useCallback((): Worker => {
-    if (workerRef.current) {
-      return workerRef.current;
-    }
-
-    const worker = new Worker(new URL('@/workers/generator.worker.ts', import.meta.url), {
-      type: 'module',
-    });
-
-    worker.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const data = e.data;
-      const { type } = data;
-
-      switch (type) {
-        case 'progress':
-          setProgress(data.payload as GenerateProgress);
-          break;
-        case 'complete':
-          setIsGenerating(false);
-          setResult(data.payload as GenerateResult);
-          setProgress(null);
-          break;
-        case 'error':
-          setIsGenerating(false);
-          setError((data.payload as { error: string }).error);
-          setProgress(null);
-          break;
-      }
-    };
-
-    worker.onerror = (err) => {
-      console.error('[useGenerator] Worker 错误:', err);
-      setIsGenerating(false);
-      setError(err.message || 'Worker 运行错误');
-      setProgress(null);
-      // Worker 出错后销毁，下次重新创建
-      workerRef.current?.terminate();
-      workerRef.current = null;
-    };
-
-    workerRef.current = worker;
-    return worker;
-  }, []);
-
-  /**
-   * 开始生成
-   */
-  const generate = useCallback(
-    (fields: FieldConfig[], count: number, csvMode = false) => {
-      if (isGenerating) return;
-
-      setIsGenerating(true);
-      setProgress(null);
-      setResult(null);
-      setError(null);
-
-      const worker = getWorker();
-      const message: WorkerMessage = {
-        type: 'start',
-        payload: { fields, count, csvMode },
-      };
-      worker.postMessage(message);
-    },
-    [isGenerating, getWorker],
-  );
-
-  /**
-   * 取消生成
-   */
-  const cancel = useCallback(() => {
-    if (workerRef.current && isGenerating) {
-      const message: WorkerMessage = { type: 'cancel' };
-      workerRef.current.postMessage(message);
-      setIsGenerating(false);
-      setProgress(null);
-    }
-  }, [isGenerating]);
-
-  /**
-   * 清除结果
-   */
-  const clearResult = useCallback(() => {
-    setResult(null);
-    setProgress(null);
-    setError(null);
-  }, []);
-
-  return {
-    isGenerating,
-    progress,
-    result,
-    error,
-    generate,
-    cancel,
-    clearResult,
-  };
-}

src/pages/TestDataGenerator/index.tsx

@@ -1,306 +0,0 @@
-/**
- * 测试数据生成器主页面
- */
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { Settings, Database, Tag } from 'lucide-react';
-import { useI18n } from '@/utils/chromeI18n';
-import { cn } from '@/lib/utils';
-import { useGenerator } from './hooks/useGenerator';
-import type { FieldConfig, GenerateResult, DataRule } from '@/types/testDataGenerator';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { toast } from 'sonner';
-
-// 生成唯一 ID 的辅助函数
-function generateId(): string {
-  return `field_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-}
-
-import FieldList, { MAX_FIELDS } from './components/FieldList';
-import FieldEditor from './components/FieldEditor';
-import GenerateOptions from './components/GenerateOptions';
-import GenerateButton from './components/GenerateButton';
-import DataPreview from './components/DataPreview';
-import ResultPanel from './components/ResultPanel';
-import ExportPanel from './components/ExportPanel';
-import RuleManager from './components/RuleManager';
-
-type TabType = 'fields' | 'rules';
-
-export default function TestDataGeneratorPage() {
-  const { t } = useI18n('testDataGenerator');
-  const { isGenerating, progress, result, error, generate, cancel, clearResult } = useGenerator();
-
-  // 字段配置
-  const [fields, setFields] = useState<FieldConfig[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
-  const [editingRule, setEditingRule] = useState<DataRule | null>(null);
-
-  // 生成选项
-  const [count, setCount] = useState(100);
-  const [format, setFormat] = useState<'json' | 'csv'>('json');
-
-  // 当前标签页
-  const [activeTab, setActiveTab] = useState<TabType>('fields');
-
-  // 生成完成时显示 toast 提示（避免重复触发）
-  const lastToastResultRef = useRef<GenerateResult | null>(null);
-
-  // 生成完成时显示 toast 提示（避免重复触发）
-  useEffect(() => {
-    if (result?.success && result.stats && result !== lastToastResultRef.current) {
-      lastToastResultRef.current = result;
-      toast.success(t('testDataGenerator_generateSuccess'), {
-        description: `${result.stats.total} ${t('testDataGenerator_records')}`,
-      });
-    }
-  }, [result, t]);
-
-  // 添加新字段
-  const handleAddField = useCallback(() => {
-    setFields((prev) => {
-      if (prev.length >= MAX_FIELDS) return prev;
-      const newField: FieldConfig = {
-        id: generateId(),
-        name: `field${prev.length + 1}`,
-        generatorId: 'chineseName',
-        params: {},
-        required: true,
-        nullRate: 0,
-        unique: false,
-      };
-      setSelectedIndex(prev.length);
-      return [...prev, newField];
-    });
-  }, []);
-
-  // 更新字段
-  const handleUpdateField = useCallback((index: number, field: FieldConfig) => {
-    setFields((prev) => {
-      const newFields = [...prev];
-      newFields[index] = field;
-      return newFields;
-    });
-  }, []);
-
-  // 删除字段
-  const handleRemoveField = useCallback((index: number) => {
-    setFields((prev) => prev.filter((_, i) => i !== index));
-    setSelectedIndex((prev) => {
-      if (prev === index) return null;
-      if (prev !== null && prev > index) return prev - 1;
-      return prev;
-    });
-  }, []);
-
-  // 拖拽排序
-  const handleReorder = useCallback((oldIndex: number, newIndex: number) => {
-    setFields((prev) => {
-      const newFields = [...prev];
-      const [moved] = newFields.splice(oldIndex, 1);
-      newFields.splice(newIndex, 0, moved);
-      return newFields;
-    });
-    setSelectedIndex((prev) => {
-      if (prev === oldIndex) return newIndex;
-      if (prev !== null) {
-        if (oldIndex < prev && newIndex >= prev) return prev - 1;
-        if (oldIndex > prev && newIndex <= prev) return prev + 1;
-      }
-      return prev;
-    });
-  }, []);
-
-  // 加载规则
-  const handleLoadRule = useCallback(
-    (loadedFields: FieldConfig[]) => {
-      setFields(loadedFields);
-      setSelectedIndex(null);
-      setEditingRule(null);
-      clearResult();
-    },
-    [clearResult],
-  );
-
-  // 编辑规则
-  const handleEditRule = useCallback(
-    (rule: DataRule) => {
-      setFields(rule.fields);
-      setSelectedIndex(null);
-      setEditingRule(rule);
-      setActiveTab('fields');
-      clearResult();
-      toast.success(t('testDataGenerator_editingRule', { name: rule.name }));
-    },
-    [clearResult, t],
-  );
-
-  // 保存规则成功后清除编辑状态
-  const handleRuleSaved = useCallback(() => {
-    setEditingRule(null);
-  }, []);
-
-  // 开始生成
-  const handleGenerate = useCallback(() => {
-    if (fields.length === 0) return;
-    generate(fields, count, format === 'csv');
-  }, [fields, count, format, generate]);
-
-  // 获取选中的字段（-1 或 null 表示未选中）
-  const selectedField = selectedIndex !== null && selectedIndex >= 0 ? fields[selectedIndex] : null;
-
-  // 打开字段编辑器
-  const handleOpenEditor = useCallback((index: number) => {
-    setSelectedIndex(index);
-    setIsEditorOpen(true);
-  }, []);
-
-  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">
-        {/* 主要内容区域 - 左右分栏 */}
-        <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 items-start">
-          {/* 左侧面板 - 字段配置 */}
-          <div className="lg:col-span-3 space-y-4">
-            {/* 标签页切换 */}
-            <div className="flex gap-1 p-1 bg-muted rounded-lg">
-              <button
-                onClick={() => setActiveTab('fields')}
-                className={cn(
-                  'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
-                  activeTab === 'fields'
-                    ? 'bg-background text-foreground shadow-sm'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                <Settings className="h-4 w-4" />
-                {t('testDataGenerator_fieldConfig')}
-              </button>
-              <button
-                onClick={() => setActiveTab('rules')}
-                className={cn(
-                  'flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-colors',
-                  activeTab === 'rules'
-                    ? 'bg-background text-foreground shadow-sm'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                <Tag className="h-4 w-4" />
-                {t('testDataGenerator_ruleManagement')}
-              </button>
-            </div>
-
-            {/* 字段配置标签页 */}
-            {activeTab === 'fields' && (
-              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-                <FieldList
-                  fields={fields}
-                  onUpdate={handleUpdateField}
-                  onRemove={handleRemoveField}
-                  onAdd={handleAddField}
-                  onEdit={handleOpenEditor}
-                  onReorder={handleReorder}
-                  editingRule={editingRule}
-                  onRuleSaved={handleRuleSaved}
-                />
-              </div>
-            )}
-
-            {/* 规则管理标签页 */}
-            {activeTab === 'rules' && (
-              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-                <RuleManager onLoad={handleLoadRule} onEdit={handleEditRule} />
-              </div>
-            )}
-
-            {/* 生成选项 */}
-            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-              <GenerateOptions
-                count={count}
-                onCountChange={setCount}
-                format={format}
-                onFormatChange={setFormat}
-              />
-            </div>
-
-            {/* 生成按钮 */}
-            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-              <GenerateButton
-                onClick={handleGenerate}
-                onCancel={cancel}
-                isGenerating={isGenerating}
-                progress={progress}
-                disabled={fields.length === 0}
-              />
-            </div>
-          </div>
-
-          {/* 右侧面板 - 数据预览和结果 */}
-          <div className="lg:col-span-2 space-y-4">
-            {/* 结果状态 */}
-            {/* 仅在失败或有警告时显示结果面板 */}
-            {((result && !result.success) ||
-              (result?.warnings && result.warnings.length > 0) ||
-              error) && (
-              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-                {error ? (
-                  <div className="flex items-center gap-2 text-destructive">
-                    <span className="text-sm">{error}</span>
-                  </div>
-                ) : (
-                  <ResultPanel result={result} />
-                )}
-              </div>
-            )}
-
-            {/* 数据预览 */}
-            <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-              <h3 className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
-                <Database className="h-4 w-4" />
-                {t('testDataGenerator_dataPreview')}
-              </h3>
-              <div className="h-[280px]">
-                <DataPreview fields={fields} />
-              </div>
-            </div>
-
-            {/* 导出面板 */}
-            {result?.data && result.data.length > 0 && (
-              <div className="p-4 rounded-xl border border-border bg-card shadow-sm">
-                <ExportPanel result={result} />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* 字段编辑弹窗 */}
-      <Dialog open={isEditorOpen} onOpenChange={setIsEditorOpen}>
-        <DialogContent
-          showCloseButton={false}
-          className="w-[calc(100vw-2rem)] max-w-[520px] max-h-[calc(100vh-2rem)] p-0 pt-6 flex flex-col"
-        >
-          <div className="flex-1 overflow-y-auto px-6 pb-4">
-            {selectedField && selectedIndex !== null && (
-              <FieldEditor
-                field={selectedField}
-                onChange={(updatedField) => handleUpdateField(selectedIndex, updatedField)}
-                allFieldNames={fields.map((f) => f.name)}
-              />
-            )}
-          </div>
-          <div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
-            <Button variant="ghost" size="sm" onClick={() => setIsEditorOpen(false)}>
-              {t('testDataGenerator_cancel')}
-            </Button>
-            <Button size="sm" onClick={() => setIsEditorOpen(false)}>
-              {t('testDataGenerator_done')}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

src/pages/Timestamp/LiveClock.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Clock } from 'lucide-react';
 import { toast } from 'sonner';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import type { UnitType } from './constants';
 import { msToUnit } from './constants';
 import { useI18n } from '@/utils/chromeI18n';

src/pages/Timestamp/ResultView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CopyButton } from '@/components/CopyButton';
+import CopyButton from '@/components/CopyButton';
 import { useI18n } from '@/utils/chromeI18n';
 import { cn } from '@/lib/utils';
 

src/providers/AppRoot.tsx

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

src/types/README.md

@@ -10,10 +10,12 @@
 
 **页面类型：**
 
-- `PageType` — 所有页面类型的联合类型（含 `dashboard`、`timestamp`、`storageCleaner`、`testDataGenerator` 等）
+- `PageType` — 所有页面类型的联合类型（`dashboard` | `timestamp` | `storageCleaner` | ...）
 - `JsonToolsPageMode` — JSON 工具子模式（`diff` | `format` | `yaml` | `toml` | `minify`）
 - `Base64ConverterPageMode` — Base64 子模式（`text` | `file` | `image`）
 - `Base64ConvertDirection` — 编解码方向（`encode` | `decode`）
+- `MarkdownToHtmlPreviewMode` — Markdown 预览模式（`split` | `preview` | `html`）
+- `HtmlToMarkdownPreviewMode` — HTML 预览模式（`split` | `preview` | `markdown`）
 
 **存储 Schema：**
 
@@ -32,16 +34,6 @@
 
 `qrious` 库的类型声明，定义 QR 码生成选项和 `QRious` 类。
 
-### testDataGenerator.ts
-
-测试数据生成器共享类型，包含：
-
-- `FieldConfig` — 字段配置（字段名、生成器、参数、必填、空值率、唯一性）
-- `DataRule` — 可保存/导入/导出的字段规则
-- `GeneratorDefinition` / `GeneratorParam` — 内置生成器定义和参数 Schema
-- `GenerateResult` / `GenerateProgress` / `WorkerMessage` — Worker 生成结果、进度和消息协议
-- `ExportFile` — JSON/CSV 导出文件描述
-
 ## 修改 StorageSchema 的注意事项
 
 修改 `StorageSchema` 时，必须：

src/types/storage.d.ts

@@ -10,8 +10,7 @@ export type PageType =
   | 'jwt' // JWT 解析工具
   | 'jsonDiff' // JSON 差异比较工具
   | 'base64Converter' // Base64 转换器工具
-  | 'rightClickRestorer' // 右键菜单恢复工具
+  | 'rightClickRestorer'; // 右键菜单恢复工具
-  | 'testDataGenerator'; // 测试数据生成器工具
 
 /**
  * JSON 工具页面子模式类型定义

src/types/testDataGenerator.ts

@@ -1,178 +0,0 @@
-/**
- * 测试数据生成器类型定义
- */
-
-/**
- * 字段配置
- */
-export interface FieldConfig {
-  /** 字段唯一 ID */
-  id: string;
-  /** 字段名称 */
-  name: string;
-  /** 字段描述（可选） */
-  description?: string;
-  /** 使用的生成器 ID */
-  generatorId: string;
-  /** 生成器参数 */
-  params: Record<string, unknown>;
-  /** 是否必填 */
-  required: boolean;
-  /** 空值率（0-100），仅在 required=false 时生效 */
-  nullRate: number;
-  /** 是否唯一约束 */
-  unique: boolean;
-}
-
-/**
- * 数据规则
- */
-export interface DataRule {
-  /** 规则唯一 ID */
-  id: string;
-  /** 规则名称 */
-  name: string;
-  /** 规则描述 */
-  description?: string;
-  /** 字段配置列表 */
-  fields: FieldConfig[];
-  /** 创建时间 */
-  createdAt: number;
-  /** 更新时间 */
-  updatedAt: number;
-  /** 最后使用时间 */
-  lastUsedAt?: number;
-  /** 使用次数 */
-  useCount: number;
-}
-
-/**
- * 生成器参数定义
- */
-export interface GeneratorParam {
-  /** 参数键名 */
-  key: string;
-  /** 参数显示名称 */
-  label: string;
-  /** 参数类型 */
-  type: 'string' | 'number' | 'boolean' | 'select' | 'array';
-  /** 默认值 */
-  defaultValue: unknown;
-  /** 是否必填 */
-  required?: boolean;
-  /** 参数描述 */
-  description?: string;
-  /** 仅当 type=select 时，可选值列表 */
-  options?: { label: string; value: unknown }[];
-  /** 最小值（仅当 type=number 时） */
-  min?: number;
-  /** 最大值（仅当 type=number 时） */
-  max?: number;
-  /** 占位符文本（仅当 type=string 时） */
-  placeholder?: string;
-}
-
-/**
- * 生成器定义
- */
-export interface GeneratorDefinition {
-  /** 生成器唯一 ID */
-  id: string;
-  /** 生成器显示名称 */
-  name: string;
-  /** 生成器描述 */
-  description: string;
-  /** 分类 ID */
-  categoryId: string;
-  /** 参数定义列表 */
-  params: GeneratorParam[];
-  /** 生成函数 */
-  generate: (params: Record<string, unknown>) => string;
-  /** 在指定索引生成（用于保证唯一性时的确定性生成） */
-  generateAtIndex?: (params: Record<string, unknown>, index: number) => string;
-}
-
-/**
- * 生成器分类
- */
-export interface GeneratorCategory {
-  /** 分类 ID */
-  id: string;
-  /** 分类名称 */
-  name: string;
-  /** 分类图标 */
-  icon: string;
-}
-
-/**
- * 数据生成结果
- */
-export interface GenerateResult {
-  /** 是否成功 */
-  success: boolean;
-  /** 生成的数据（JSON 格式） */
-  data?: Record<string, unknown>[];
-  /** 错误信息 */
-  error?: string;
-  /** 警告信息（如某些字段生成失败） */
-  warnings?: string[];
-  /** 生成统计 */
-  stats?: {
-    /** 总条数 */
-    total: number;
-    /** 成功条数 */
-    success: number;
-    /** 失败条数 */
-    failed: number;
-    /** 生成耗时（毫秒） */
-    duration: number;
-  };
-}
-
-/**
- * 导出文件配置
- */
-export interface ExportFile {
-  /** 文件名（不含扩展名） */
-  filename: string;
-  /** 文件内容 */
-  content: string;
-  /** MIME 类型 */
-  mimeType: string;
-}
-
-/**
- * 生成进度信息
- */
-export interface GenerateProgress {
-  /** 当前进度（0-100） */
-  progress: number;
-  /** 已生成条数 */
-  generated: number;
-  /** 总条数 */
-  total: number;
-  /** 预计剩余时间（毫秒） */
-  estimatedTimeLeft?: number;
-}
-
-/**
- * Worker 消息类型
- */
-export type WorkerMessage =
-  | { type: 'start'; payload: WorkerStartPayload }
-  | { type: 'progress'; payload: GenerateProgress }
-  | { type: 'complete'; payload: GenerateResult }
-  | { type: 'error'; payload: { error: string } }
-  | { type: 'cancel' };
-
-/**
- * Worker 启动参数
- */
-export interface WorkerStartPayload {
-  /** 字段配置列表 */
-  fields: FieldConfig[];
-  /** 生成数量 */
-  count: number;
-  /** 是否生成 CSV 格式 */
-  csvMode: boolean;
-}

src/utils/README.md

@@ -4,40 +4,39 @@
 
 ## 工具函数
 
-| 文件                     | 用途                                                                                                |
+| 文件                 | 用途                                                                                                |
-| ------------------------ | --------------------------------------------------------------------------------------------------- |
+| -------------------- | --------------------------------------------------------------------------------------------------- |
-| `chromeStorage.ts`       | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
+| `chromeStorage.ts`   | Chrome Storage API 封装：类型安全的 `StorageUtils` 类，提供 `get/set/remove` 方法                   |
-| `chromeTabs.ts`          | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
+| `chromeTabs.ts`      | Chrome Tabs API 封装：获取活动标签页、获取域名、在新标签页打开扩展页面                              |
-| `clipboard.ts`           | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
+| `clipboard.ts`       | 剪贴板操作：`copyTextToClipboard`（文本）、`copyImageToClipboard`（图片）                           |
-| `messages.ts`            | 扩展消息通信：基于 `@webext-core/messaging`，定义 `MessageAction` 枚举和 `ProtocolMap` 类型安全映射 |
+| `messages.ts`        | 扩展消息通信：基于 `@webext-core/messaging`，定义 `MessageAction` 枚举和 `ProtocolMap` 类型安全映射 |
-| `contextMenu.ts`         | 右键菜单配置与操作：定义菜单项、创建菜单、解析点击事件、ID→PageType 映射                            |
+| `contextMenu.ts`     | 右键菜单配置与操作：定义菜单项、创建菜单、解析点击事件、ID→PageType 映射                            |
-| `base64Converter.ts`     | Base64 编解码：文本↔Base64、文件↔Base64、图片预览，定义文件大小限制和图像 MIME 类型                 |
+| `base64Converter.ts` | Base64 编解码：文本↔Base64、文件↔Base64、图片预览，定义文件大小限制和图像 MIME 类型                 |
-| `jwt.ts`                 | JWT 解析：Base64URL 解码、解析 Header/Payload/Signature、JSON 格式化输出                            |
+| `jwt.ts`             | JWT 解析：Base64URL 解码、解析 Header/Payload/Signature、JSON 格式化输出                            |
-| `jsonFormatter.ts`       | JSON 格式化/压缩：支持缩进、按键排序、minify                                                        |
+| `jsonFormatter.ts`   | JSON 格式化/压缩：支持缩进、按键排序、minify                                                        |
-| `jsonToYaml.ts`          | JSON→YAML 转换                                                                                      |
+| `jsonToYaml.ts`      | JSON→YAML 转换                                                                                      |
-| `jsonToToml.ts`          | JSON→TOML 转换                                                                                      |
+| `jsonToToml.ts`      | JSON→TOML 转换                                                                                      |
-| `qrCodeParser.ts`        | 二维码解析：基于 `qr-scanner` 库从文件中解析二维码                                                  |
+| `markdownToHtml.ts`  | Markdown→HTML 转换：基于 `marked` 库，支持 GFM 和换行转换                                           |
-| `storageCleaner.ts`      | 存储清理：获取当前标签页、检测受限 URL、计算 Cookie/Storage 大小、清理操作                          |
+| `htmlToMarkdown.ts`  | HTML→Markdown 转换：基于 DOMParser 解析                                                             |
-| `textStatistics.ts`      | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
+| `qrCodeParser.ts`    | 二维码解析：基于 `qr-scanner` 库从文件中解析二维码                                                  |
-| `format.ts`              | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
+| `storageCleaner.ts`  | 存储清理：获取当前标签页、检测受限 URL、计算 Cookie/Storage 大小、清理操作                          |
-| `dayjs.ts`               | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
+| `textStatistics.ts`  | 文本统计：使用 `Intl.Segmenter` 计算字符数/单词数/行数/字节大小                                     |
-| `chromeI18n.ts`          | Chrome `chrome.i18n` 包装：提供 `getMessage` 和兼容 React 使用的 `useI18n` Hook                     |
+| `format.ts`          | 通用格式化：`formatBytes` 将字节转为可读字符串（B/KB/MB/GB/TB）                                     |
-| `ruleStorage.ts`         | 测试数据生成器规则存储：基于 `localStorage` 的 CRUD、搜索、导入/导出和数量限制                      |
+| `dayjs.ts`           | Day.js 初始化：扩展 UTC、Timezone、RelativeTime 插件，加载中文本地化                                |
-| `dataExporter.ts`        | 测试数据导出：JSON/CSV 转换、文件下载和复制到剪贴板                                                 |
-| `rightClickInjection.ts` | 右键恢复注入脚本：在页面上下文恢复 contextmenu/copy/paste 等事件默认行为                            |
 
 ## 自定义 Hooks
 
 | 文件                    | 用途                                                                                                           |
 | ----------------------- | -------------------------------------------------------------------------------------------------------------- |
 | `useStorageState.ts`    | Chrome Storage 状态 Hook：类似 `useState`，值自动同步到 `chrome.storage`，使用 `localStorage` 快照消除首屏闪烁 |
+| `useLazyTranslation.ts` | 懒加载翻译 Hook：按需动态导入 i18n 命名空间，支持预加载和缓存                                                  |
 | `useContextMenuData.ts` | 右键菜单数据 Hook：从 storage 读取待处理数据，匹配 featureKey 后消费并触发回调                                 |
 | `useDebounce.ts`        | 防抖 Hook：对值进行延迟更新，避免频繁触发                                                                      |
 
 ## 使用约定
 
 - 工具函数使用**命名导出**（`export function xxx()`）
-- 工具层不直接展示 Toast；可恢复错误返回可判断结果，需要抛出的解析/转换错误由页面 Hook 或 UI 层捕获
+- 工具函数**不抛异常**，返回包含 `hasError` 和 `error` 字段的结果对象
 - Hook 使用 `use` 前缀命名，定义返回值接口类型
 - 存储操作使用 `chromeStorage.ts` 的 `storageUtil` 封装，不要直接调用 `chrome.storage`
 - 消息通信使用 `messages.ts` 的 `sendMessage`/`onMessage`，不要使用原生 `chrome.runtime.sendMessage`

src/utils/__tests__/chromeTabs.test.ts

@@ -1,7 +1,101 @@
 import { describe, expect, it, vi } from 'vitest';
-import { openExtensionPage } from '@/utils/chromeTabs';
+import {
+  getActiveTab,
+  getActiveTabDomain,
+  openExtensionPage,
+  ensureContentScriptInjected,
+} from '@/utils/chromeTabs';
 
 describe('chromeTabs', () => {
+  describe('getActiveTab', () => {
+    it('应该返回当前活动标签页', async () => {
+      const mockTab = { id: 1, url: 'https://example.com', title: 'Example' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTab();
+
+      expect(result).toEqual(mockTab);
+      expect(chrome.tabs.query).toHaveBeenCalledWith({ active: true, currentWindow: true });
+    });
+
+    it('当没有活动标签页时应返回 null', async () => {
+      (chrome.tabs.query as any).mockResolvedValue([]);
+
+      const result = await getActiveTab();
+
+      expect(result).toBeNull();
+    });
+
+    it('当查询失败时应返回 null 并记录错误', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      (chrome.tabs.query as any).mockRejectedValue(new Error('Permission denied'));
+
+      const result = await getActiveTab();
+
+      expect(result).toBeNull();
+      expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getActiveTabDomain', () => {
+    it('应该返回当前活动标签页的域名', async () => {
+      const mockTab = { id: 1, url: 'https://example.com/path?query=1' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('example.com');
+    });
+
+    it('应该处理带有端口的 URL', async () => {
+      const mockTab = { id: 1, url: 'https://example.com:8080/path' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('example.com');
+    });
+
+    it('当标签页没有 URL 时应返回空字符串', async () => {
+      const mockTab = { id: 1 } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('');
+    });
+
+    it('当没有活动标签页时应返回空字符串', async () => {
+      (chrome.tabs.query as any).mockResolvedValue([]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('');
+    });
+
+    it('当 URL 解析失败时应返回空字符串并记录错误', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const mockTab = { id: 1, url: 'not-a-valid-url' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('');
+      expect(consoleSpy).toHaveBeenCalledWith('解析域名失败:', expect.any(Error));
+      consoleSpy.mockRestore();
+    });
+
+    it('应该处理 chrome-extension URL', async () => {
+      const mockTab = { id: 1, url: 'chrome-extension://abc123/popup.html' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await getActiveTabDomain();
+
+      expect(result).toBe('abc123');
+    });
+  });
+
   describe('openExtensionPage', () => {
     it('应该在新标签页中打开扩展页面', async () => {
       await openExtensionPage('popup.html');
@@ -22,4 +116,44 @@ describe('chromeTabs', () => {
       consoleSpy.mockRestore();
     });
   });
+
+  describe('ensureContentScriptInjected', () => {
+    it('当存在活动标签页时应返回 true', async () => {
+      const mockTab = { id: 123, url: 'https://example.com' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await ensureContentScriptInjected();
+
+      expect(result).toBe(true);
+    });
+
+    it('当没有活动标签页时应返回 false', async () => {
+      (chrome.tabs.query as any).mockResolvedValue([]);
+
+      const result = await ensureContentScriptInjected();
+
+      expect(result).toBe(false);
+    });
+
+    it('当标签页没有 id 时应返回 false', async () => {
+      const mockTab = { url: 'https://example.com' } as chrome.tabs.Tab;
+      (chrome.tabs.query as any).mockResolvedValue([mockTab]);
+
+      const result = await ensureContentScriptInjected();
+
+      expect(result).toBe(false);
+    });
+
+    it('当整体操作失败时应返回 false 并记录错误', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      (chrome.tabs.query as any).mockRejectedValue(new Error('Query failed'));
+
+      const result = await ensureContentScriptInjected();
+
+      expect(result).toBe(false);
+      // getActiveTab catches the error and logs "获取活动标签页失败"
+      expect(consoleSpy).toHaveBeenCalledWith('获取活动标签页失败:', expect.any(Error));
+      consoleSpy.mockRestore();
+    });
+  });
 });

src/utils/__tests__/clipboard.test.ts

@@ -1,5 +1,14 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, beforeAll } from 'vitest';
-import { copyTextToClipboard } from '@/utils/clipboard';
+import { copyTextToClipboard, copyImageToClipboard } from '@/utils/clipboard';
+
+// Mock ClipboardItem for test environment
+class MockClipboardItem {
+  constructor(public items: Record<string, Blob>) {}
+}
+
+beforeAll(() => {
+  (globalThis as any).ClipboardItem = MockClipboardItem;
+});
 
 describe('clipboard', () => {
   describe('copyTextToClipboard', () => {
@@ -22,4 +31,27 @@ describe('clipboard', () => {
       expect(result).toBe(false);
     });
   });
+
+  describe('copyImageToClipboard', () => {
+    it('复制成功时应返回 true', async () => {
+      const write = vi.fn().mockResolvedValue(undefined);
+      Object.assign(navigator, { clipboard: { write } });
+
+      const blob = new Blob(['png data'], { type: 'image/png' });
+      const result = await copyImageToClipboard(blob);
+
+      expect(result).toBe(true);
+      expect(write).toHaveBeenCalledTimes(1);
+    });
+
+    it('复制失败时应返回 false', async () => {
+      const write = vi.fn().mockRejectedValue(new Error('Permission denied'));
+      Object.assign(navigator, { clipboard: { write } });
+
+      const blob = new Blob(['png data'], { type: 'image/png' });
+      const result = await copyImageToClipboard(blob);
+
+      expect(result).toBe(false);
+    });
+  });
 });

src/utils/__tests__/useContextMenuData.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
-import { useContextMenuData, saveContextMenuData } from '@/utils/useContextMenuData';
+import {
+  useContextMenuData,
+  saveContextMenuData,
+  clearContextMenuData,
+} from '@/utils/useContextMenuData';
 
 describe('useContextMenuData', () => {
   beforeEach(() => {
@@ -44,6 +48,14 @@ describe('useContextMenuData', () => {
     });
   });
 
+  describe('clearContextMenuData', () => {
+    it('应该从 storage 中删除数据', async () => {
+      await clearContextMenuData();
+
+      expect(chrome.storage.local.remove).toHaveBeenCalledWith(['contextMenu/pendingData']);
+    });
+  });
+
   describe('useContextMenuData Hook', () => {
     it('当 storage 中有匹配数据时应调用 onData 回调', async () => {
       const mockData = {

src/utils/base64Converter.ts

@@ -8,7 +8,7 @@ import { formatBytes } from './format';
 export const MAX_FILE_SIZE = 10 * 1024 * 1024;
 
 /** 支持的图像 MIME 类型 */
-const SUPPORTED_IMAGE_TYPES = [
+export const SUPPORTED_IMAGE_TYPES = [
   'image/png',
   'image/jpeg',
   'image/jpg',
@@ -20,7 +20,7 @@ const SUPPORTED_IMAGE_TYPES = [
 ] as const;
 
 /** 支持的图像文件扩展名 */
-const SUPPORTED_IMAGE_EXTENSIONS = [
+export const SUPPORTED_IMAGE_EXTENSIONS = [
   '.png',
   '.jpg',
   '.jpeg',
@@ -34,7 +34,7 @@ const SUPPORTED_IMAGE_EXTENSIONS = [
 /**
  * 文本转 Base64 编码结果
  */
-interface TextToBase64Result {
+export interface TextToBase64Result {
   /** Base64 编码结果 */
   output: string;
   /** 原始字节数 */
@@ -226,7 +226,7 @@ export function formatFileSize(bytes: number): string {
 /**
  * Base64 解码为二进制后的产物
  */
-interface Base64ToBlobResult {
+export interface Base64ToBlobResult {
   /** 解码后的 Blob */
   blob: Blob;
   /** 推断出的 MIME 类型 */

src/utils/chromeI18n.ts

@@ -26,8 +26,12 @@ export function useI18n(namespace?: string | string[]) {
   const namespaces = Array.isArray(namespace) ? namespace : namespace ? [namespace] : [];
 
   const t = (key: string, options?: Record<string, unknown>): string => {
-    // 统一将分隔符转换为下划线，兼容 'namespace:key.path' 和 'key.path' 两种写法
+    let msgId = key;
-    const msgId = key.replace(':', '_').replace(/\./g, '_');
+
+    // 处理 namespace:key 格式（兼容原 i18next 用法）
+    if (key.includes(':')) {
+      msgId = key.replace(':', '_').replace(/\./g, '_');
+    }
 
     // 先尝试直接查找 key
     let message = getMessage(msgId);
@@ -66,3 +70,11 @@ export function useI18n(namespace?: string | string[]) {
     isLoaded: true,
   };
 }
+
+/**
+ * 预加载命名空间（无操作，兼容 useLazyTranslation）
+ */
+export async function preloadNamespaces(_namespaces: string[]): Promise<void> {
+  // chrome.i18n 是同步的，无需预加载
+  return Promise.resolve();
+}

src/utils/chromeTabs.ts

@@ -2,6 +2,35 @@
  * Chrome 标签页相关工具函数
  */
 
+/**
+ * 获取当前活动的标签页
+ */
+export async function getActiveTab(): Promise<chrome.tabs.Tab | null> {
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    return tab || null;
+  } catch (error) {
+    console.error('获取活动标签页失败:', error);
+    return null;
+  }
+}
+
+/**
+ * 获取当前活动的标签页域名
+ */
+export async function getActiveTabDomain(): Promise<string> {
+  const tab = await getActiveTab();
+  if (tab?.url) {
+    try {
+      const url = new URL(tab.url);
+      return url.hostname;
+    } catch (e) {
+      console.error('解析域名失败:', e);
+    }
+  }
+  return '';
+}
+
 /**
  * 在新标签页中打开扩展页面
  * @param page - 扩展页面路径（如 'popup.html'）
@@ -21,3 +50,28 @@ export async function openExtensionPage(
     console.error('打开扩展页面失败:', error);
   }
 }
+
+/**
+ * 确保内容脚本已注入
+ */
+export async function ensureContentScriptInjected(): Promise<boolean> {
+  try {
+    const tab = await getActiveTab();
+    if (!tab?.id) return false;
+
+    try {
+      return true;
+    } catch (e) {
+      console.log('内容脚本未注入，尝试注入...');
+      console.error('注入内容脚本失败:', e);
+      await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        files: ['/content-scripts/content.js'],
+      });
+      return true;
+    }
+  } catch (error) {
+    console.error('注入内容脚本失败:', error);
+    return false;
+  }
+}

src/utils/clipboard.ts

@@ -11,3 +11,21 @@ export async function copyTextToClipboard(text: string): Promise<boolean> {
     return false;
   }
 }
+
+/**
+ * 复制图片到剪贴板
+ * @param blob 要复制的图片
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyImageToClipboard(blob: Blob): Promise<boolean> {
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        'image/png': blob,
+      }),
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}

src/utils/contextMenu.ts

@@ -1,18 +1,18 @@
 import type { PageType } from '@/types/storage';
 
-interface ContextMenuItemConfig {
+export interface ContextMenuItemConfig {
   id: string;
   title: string;
   contexts: [`${chrome.contextMenus.ContextType}`, ...`${chrome.contextMenus.ContextType}`[]];
   parentId?: string;
 }
 
-interface ContextMenuClickedInfo {
+export interface ContextMenuClickedInfo {
   featureKey: PageType;
   payload: string;
 }
 
-interface ParseResult {
+export interface ParseResult {
   success: boolean;
   data?: ContextMenuClickedInfo;
   error?: string;

src/utils/dataExporter.ts

@@ -1,133 +0,0 @@
-/**
- * 数据导出工具
- * 实现 JSON 和 CSV 格式的数据导出
- */
-
-import type { ExportFile } from '@/types/testDataGenerator';
-
-/**
- * 数据导出器
- */
-export class DataExporter {
-  /**
-   * 将数据转换为 JSON 字符串
-   */
-  static toJSON(data: Record<string, unknown>[], pretty = true): string {
-    return JSON.stringify(data, null, pretty ? 2 : undefined);
-  }
-
-  /**
-   * 将数据转换为 CSV 字符串
-   */
-  static toCSV(data: Record<string, unknown>[]): string {
-    if (data.length === 0) return '';
-
-    // 获取所有列名
-    const headers = Array.from(new Set(data.flatMap((row) => Object.keys(row))));
-
-    // 构建 CSV 内容
-    const rows = [
-      headers.map((h) => this.escapeCSV(h)).join(','),
-      ...data.map((row) => headers.map((h) => this.escapeCSV(String(row[h] ?? ''))).join(',')),
-    ];
-
-    return rows.join('\n');
-  }
-
-  /**
-   * 转义 CSV 字段
-   */
-  private static escapeCSV(value: string): string {
-    // 如果包含逗号、引号、换行符，需要用引号包裹
-    if (value.includes(',') || value.includes('"') || value.includes('\n')) {
-      return `"${value.replace(/"/g, '""')}"`;
-    }
-    return value;
-  }
-
-  /**
-   * 根据格式导出数据
-   */
-  static exportByFormat(data: Record<string, unknown>[], format: 'json' | 'csv'): string {
-    if (format === 'csv') {
-      return this.toCSV(data);
-    }
-    return this.toJSON(data);
-  }
-
-  /**
-   * 导出为多个文件
-   */
-  static toMultipleFiles(
-    data: Record<string, unknown>[],
-    formats: ('json' | 'csv')[],
-    filename = 'test-data',
-  ): ExportFile[] {
-    return formats.map((format) => ({
-      filename,
-      content: this.exportByFormat(data, format),
-      mimeType: this.getMimeType(format),
-    }));
-  }
-
-  /**
-   * 导出为单个文件
-   */
-  static toSingleFile(
-    data: Record<string, unknown>[],
-    format: 'json' | 'csv',
-    filename = 'test-data',
-  ): ExportFile {
-    return {
-      filename,
-      content: this.exportByFormat(data, format),
-      mimeType: this.getMimeType(format),
-    };
-  }
-
-  /**
-   * 获取 MIME 类型
-   */
-  private static getMimeType(format: string): string {
-    const mimeTypes: Record<string, string> = {
-      json: 'application/json',
-      csv: 'text/csv',
-    };
-    return mimeTypes[format] || 'application/octet-stream';
-  }
-
-  /**
-   * 下载文件
-   */
-  static download(file: ExportFile): void {
-    const blob = new Blob([file.content], { type: file.mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${file.filename}.${file.mimeType === 'application/json' ? 'json' : 'csv'}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }
-
-  /**
-   * 下载多个文件
-   */
-  static downloadMultiple(files: ExportFile[]): void {
-    files.forEach((file) => this.download(file));
-  }
-
-  /**
-   * 复制到剪贴板
-   */
-  static async copyToClipboard(content: string): Promise<boolean> {
-    try {
-      await navigator.clipboard.writeText(content);
-      return true;
-    } catch (error) {
-      console.error('[DataExporter] 复制失败:', error);
-      return false;
-    }
-  }
-}

src/utils/jsonFormatter.ts

@@ -71,7 +71,7 @@ export function formatJson(text: string, options: JsonFormatOptions): JsonFormat
 /**
  * JSON 压缩结果
  */
-interface JsonMinifyResult {
+export interface JsonMinifyResult {
   /** 压缩后的 JSON 字符串 */
   minified: string;
   /** 原始输入的字节大小 */

src/utils/jsonToToml.ts

@@ -1,7 +1,7 @@
 /**
  * JSON 转 TOML 转换结果
  */
-interface JsonToTomlResult {
+export interface JsonToTomlResult {
   /** 转换后的 TOML 字符串 */
   output: string;
   /** 原始输入的字节大小 */

src/utils/jsonToYaml.ts

@@ -1,7 +1,7 @@
 /**
  * JSON 转 YAML 转换结果
  */
-interface JsonToYamlResult {
+export interface JsonToYamlResult {
   /** 转换后的 YAML 字符串 */
   output: string;
   /** 原始输入的字节大小 */

src/utils/jwt.ts

@@ -4,13 +4,13 @@
 
 import { getMessage } from '@/utils/chromeI18n';
 
-interface JwtHeader {
+export interface JwtHeader {
   alg: string;
   typ?: string;
   [key: string]: unknown;
 }
 
-interface JwtPayload {
+export interface JwtPayload {
   iss?: string;
   sub?: string;
   aud?: string | string[];

src/utils/qrCodeParser.ts

@@ -1,6 +1,6 @@
 import QrScanner from 'qr-scanner';
 
-interface QrCodeParseResult {
+export interface QrCodeParseResult {
   success: boolean;
   data?: string;
   error?: string;

src/utils/ruleStorage.ts

@@ -1,339 +0,0 @@
-/**
- * 规则存储工具
- * 实现测试数据生成器规则的持久化存储和管理
- */
-
-import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
-
-/** 存储键名 */
-const STORAGE_KEY = 'testDataGenerator_rules';
-
-/** 最大规则数量 */
-const MAX_RULES = 20;
-
-/**
- * 获取所有规则
- */
-export function getAll(): DataRule[] {
-  try {
-    const data = localStorage.getItem(STORAGE_KEY);
-    if (!data) return [];
-    return JSON.parse(data) as DataRule[];
-  } catch (error) {
-    console.error('[ruleStorage] 获取规则列表失败:', error);
-    return [];
-  }
-}
-
-/**
- * 根据 ID 获取规则
- */
-export function getById(id: string): DataRule | undefined {
-  const rules = getAll();
-  return rules.find((rule) => rule.id === id);
-}
-
-/**
- * 根据名称获取规则
- */
-export function getByName(name: string): DataRule | undefined {
-  const rules = getAll();
-  return rules.find((rule) => rule.name === name);
-}
-
-/**
- * 获取规则数量
- */
-export function getCount(): number {
-  return getAll().length;
-}
-
-/**
- * 是否达到最大数量限制
- */
-export function isMaxReached(): boolean {
-  return getCount() >= MAX_RULES;
-}
-
-/**
- * 保存规则（新增或更新）
- */
-export function save(
-  rule: Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'> & { id?: string },
-): DataRule | null {
-  const rules = getAll();
-  const now = Date.now();
-
-  // 新增规则
-  if (!rule.id) {
-    if (isMaxReached()) {
-      console.warn('[ruleStorage] 规则数量已达上限');
-      return null;
-    }
-    const newRule: DataRule = {
-      ...rule,
-      id: generateId(),
-      createdAt: now,
-      updatedAt: now,
-      useCount: 0,
-    };
-    rules.unshift(newRule);
-    setAll(rules);
-    return newRule;
-  }
-
-  // 更新规则
-  const index = rules.findIndex((r) => r.id === rule.id);
-  if (index === -1) {
-    console.warn('[ruleStorage] 规则不存在:', rule.id);
-    return null;
-  }
-  const updatedRule: DataRule = {
-    ...rules[index],
-    ...rule,
-    id: rule.id,
-    updatedAt: now,
-  };
-  rules[index] = updatedRule;
-  setAll(rules);
-  return updatedRule;
-}
-
-/**
- * 更新规则
- */
-export function update(id: string, updates: Partial<DataRule>): DataRule | null {
-  const rules = getAll();
-  const index = rules.findIndex((r) => r.id === id);
-  if (index === -1) {
-    console.warn('[ruleStorage] 规则不存在:', id);
-    return null;
-  }
-
-  const updatedRule: DataRule = {
-    ...rules[index],
-    ...updates,
-    id: rules[index].id, // 确保 ID 不被覆盖
-    updatedAt: Date.now(),
-  };
-  rules[index] = updatedRule;
-  setAll(rules);
-  return updatedRule;
-}
-
-/**
- * 删除规则
- */
-export function deleteRule(id: string): boolean {
-  const rules = getAll();
-  const index = rules.findIndex((r) => r.id === id);
-  if (index === -1) {
-    console.warn('[ruleStorage] 规则不存在:', id);
-    return false;
-  }
-  rules.splice(index, 1);
-  setAll(rules);
-  return true;
-}
-
-/**
- * 复制规则
- * @param id 规则 ID
- * @param copySuffix 复制后缀，默认为中文「（副本）」，可通过 i18n 传入
- */
-export function duplicate(id: string, copySuffix = '（副本）'): DataRule | null {
-  const rule = getById(id);
-  if (!rule) {
-    console.warn('[ruleStorage] 规则不存在:', id);
-    return null;
-  }
-
-  if (isMaxReached()) {
-    console.warn('[ruleStorage] 规则数量已达上限');
-    return null;
-  }
-
-  const now = Date.now();
-  const newRule: DataRule = {
-    ...rule,
-    id: generateId(),
-    name: `${rule.name}${copySuffix}`,
-    createdAt: now,
-    updatedAt: now,
-    useCount: 0,
-  };
-
-  const rules = getAll();
-  rules.unshift(newRule);
-  setAll(rules);
-  return newRule;
-}
-
-/**
- * 记录规则使用
- */
-export function recordUse(id: string): void {
-  const rules = getAll();
-  const index = rules.findIndex((r) => r.id === id);
-  if (index === -1) return;
-
-  rules[index].useCount += 1;
-  rules[index].lastUsedAt = Date.now();
-  setAll(rules);
-}
-
-/**
- * 搜索规则
- */
-export function search(query: string): DataRule[] {
-  const rules = getAll();
-  const lowerQuery = query.toLowerCase();
-  return rules.filter(
-    (rule) =>
-      rule.name.toLowerCase().includes(lowerQuery) ||
-      rule.description?.toLowerCase().includes(lowerQuery),
-  );
-}
-
-/**
- * 获取最近使用的规则
- */
-export function getRecent(count = 5): DataRule[] {
-  const rules = getAll();
-  return [...rules]
-    .filter((rule) => rule.lastUsedAt)
-    .sort((a, b) => (b.lastUsedAt || 0) - (a.lastUsedAt || 0))
-    .slice(0, count);
-}
-
-/**
- * 导出规则（JSON 字符串）
- */
-export function exportRules(ids?: string[]): string {
-  const rules = getAll();
-  const exportData = ids ? rules.filter((r) => ids.includes(r.id)) : rules;
-  return JSON.stringify(exportData, null, 2);
-}
-
-/**
- * 导入规则
- */
-export function importRules(jsonString: string): {
-  success: number;
-  failed: number;
-  errors: string[];
-} {
-  const result = { success: 0, failed: 0, errors: [] as string[] };
-
-  try {
-    const data = JSON.parse(jsonString);
-    if (!Array.isArray(data)) {
-      result.failed = 1;
-      result.errors.push('导入数据格式错误：不是数组');
-      return result;
-    }
-
-    for (const item of data) {
-      const validation = validateRule(item);
-      if (!validation.valid) {
-        result.failed++;
-        result.errors.push(`规则 "${item.name || '未知'}": ${validation.error}`);
-        continue;
-      }
-
-      const saved = save(item as Omit<DataRule, 'id' | 'createdAt' | 'updatedAt' | 'useCount'>);
-      if (saved) {
-        result.success++;
-      } else {
-        result.failed++;
-        result.errors.push(`规则 "${item.name}" 保存失败`);
-      }
-    }
-  } catch (error) {
-    result.failed = 1;
-    result.errors.push(`导入失败: ${error}`);
-  }
-
-  return result;
-}
-
-/**
- * 清空所有规则
- */
-export function clear(): void {
-  localStorage.removeItem(STORAGE_KEY);
-}
-
-/**
- * 保存所有规则到存储
- */
-function setAll(rules: DataRule[]): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(rules));
-  } catch (error) {
-    console.error('[ruleStorage] 保存规则失败:', error);
-  }
-}
-
-/**
- * 生成唯一 ID
- */
-export function generateId(): string {
-  return `rule_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-}
-
-/**
- * 验证规则格式
- */
-function validateRule(rule: unknown): { valid: boolean; error?: string } {
-  if (!rule || typeof rule !== 'object') {
-    return { valid: false, error: '规则格式无效' };
-  }
-
-  const obj = rule as Record<string, unknown>;
-
-  if (!obj.name || typeof obj.name !== 'string') {
-    return { valid: false, error: '缺少规则名称' };
-  }
-
-  if (!obj.fields || !Array.isArray(obj.fields)) {
-    return { valid: false, error: '缺少字段配置' };
-  }
-
-  for (const field of obj.fields) {
-    const fieldValidation = validateField(field);
-    if (!fieldValidation.valid) {
-      return {
-        valid: false,
-        error: `字段 "${(field as FieldConfig).name || '未知'}": ${fieldValidation.error}`,
-      };
-    }
-  }
-
-  return { valid: true };
-}
-
-/**
- * 验证字段配置
- */
-function validateField(field: unknown): { valid: boolean; error?: string } {
-  if (!field || typeof field !== 'object') {
-    return { valid: false, error: '字段格式无效' };
-  }
-
-  const obj = field as Record<string, unknown>;
-
-  if (!obj.name || typeof obj.name !== 'string') {
-    return { valid: false, error: '缺少字段名称' };
-  }
-
-  if (!obj.generatorId || typeof obj.generatorId !== 'string') {
-    return { valid: false, error: '缺少生成器 ID' };
-  }
-
-  if (typeof obj.required !== 'boolean') {
-    return { valid: false, error: '缺少必填标识' };
-  }
-
-  return { valid: true };
-}

src/utils/storageCleaner.ts

@@ -224,7 +224,7 @@ async function runCleanScript(
   return { success: false, error: 'No result returned' };
 }
 
-async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
+export async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     () => {
@@ -236,7 +236,7 @@ async function injectClearLocalStorage(tabId: number): Promise<StorageCleanResul
   );
 }
 
-async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
+export async function injectClearSessionStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     () => {
@@ -248,7 +248,7 @@ async function injectClearSessionStorage(tabId: number): Promise<StorageCleanRes
   );
 }
 
-async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
+export async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -292,7 +292,7 @@ async function injectClearIndexedDB(tabId: number): Promise<StorageCleanResult>
   );
 }
 
-async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
+export async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -309,7 +309,7 @@ async function injectClearCacheStorage(tabId: number): Promise<StorageCleanResul
   );
 }
 
-async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
+export async function injectUnregisterServiceWorkers(tabId: number): Promise<StorageCleanResult> {
   return runCleanScript(
     tabId,
     async () => {
@@ -381,3 +381,10 @@ export function formatCleaningResult(
 
   return t('storageCleaner:cleanedSummary', { items: parts.join(', ') });
 }
+
+export function isEmptyResult(result: CleaningResult): boolean {
+  const values = Object.values(result).filter(
+    (r): r is StorageCleanResult => r?.success === true && r.count > 0,
+  );
+  return values.length === 0;
+}

src/utils/useContextMenuData.ts

@@ -90,3 +90,10 @@ export async function saveContextMenuData(
   };
   await storageUtil.set(STORAGE_KEY, pendingData);
 }
+
+/**
+ * 清除右键菜单待处理数据
+ */
+export async function clearContextMenuData(): Promise<void> {
+  await storageUtil.remove(STORAGE_KEY);
+}

src/utils/useDebounce.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * useDebounce Hook - 防抖值
+ *
+ * @param value - 需要防抖的值
+ * @param delay - 延迟时间（毫秒）
+ * @returns 防抖后的值
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

src/workers/generator.worker.ts

@@ -1,165 +0,0 @@
-/**
- * 测试数据生成器 Web Worker
- * 在后台线程中执行数据生成，避免阻塞 UI
- */
-
-import { getGeneratorById } from '@/lib/generators';
-import type {
-  FieldConfig,
-  WorkerMessage,
-  GenerateResult,
-  GenerateProgress,
-} from '@/types/testDataGenerator';
-
-// 生成结果缓存
-let generatedData: Record<string, unknown>[] = [];
-let isCancelled = false;
-
-/**
- * Worker 消息处理器
- */
-self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const data = e.data;
-  const { type } = data;
-
-  switch (type) {
-    case 'start':
-      isCancelled = false;
-      await handleStart(data.payload);
-      break;
-    case 'cancel':
-      isCancelled = true;
-      break;
-  }
-};
-
-/**
- * 处理开始生成消息
- */
-async function handleStart(payload: {
-  fields: FieldConfig[];
-  count: number;
-  csvMode: boolean;
-}): Promise<void> {
-  const { fields, count } = payload;
-  generatedData = [];
-
-  try {
-    // 验证所有生成器是否存在
-    for (const field of fields) {
-      const generator = getGeneratorById(field.generatorId);
-      if (!generator) {
-        self.postMessage({
-          type: 'error',
-          payload: { error: `生成器 "${field.generatorId}" 不存在` },
-        });
-        return;
-      }
-    }
-
-    const startTime = Date.now();
-    const warnings: string[] = [];
-
-    // 生成数据
-    for (let i = 0; i < count; i++) {
-      if (isCancelled) {
-        self.postMessage({
-          type: 'complete',
-          payload: {
-            success: false,
-            error: '生成已取消',
-          },
-        });
-        return;
-      }
-
-      const record: Record<string, unknown> = {};
-
-      for (const field of fields) {
-        const generator = getGeneratorById(field.generatorId);
-        if (!generator) continue;
-
-        // 空值率控制
-        if (!field.required && Math.random() * 100 < field.nullRate) {
-          record[field.name] = null;
-          continue;
-        }
-
-        try {
-          // 唯一性约束处理
-          if (field.unique) {
-            let value: string | undefined;
-            const maxRetries = 100;
-            let retryCount = 0;
-
-            // 小数据量：随机生成 + 重试
-            if (count <= 1000) {
-              while (retryCount < maxRetries) {
-                value = generator.generate(field.params);
-                const isUnique = !generatedData.some((item) => item[field.name] === value);
-                if (isUnique) break;
-                retryCount++;
-                value = undefined;
-              }
-            } else {
-              // 大数据量：使用索引生成策略
-              if (generator.generateAtIndex) {
-                value = generator.generateAtIndex(field.params, i);
-              } else {
-                // 回退到随机生成
-                value = generator.generate(field.params);
-              }
-            }
-
-            if (value !== undefined) {
-              record[field.name] = value;
-            } else {
-              warnings.push(`字段 "${field.name}" 第 ${i + 1} 行唯一值生成失败`);
-              record[field.name] = generator.generate(field.params);
-            }
-          } else {
-            record[field.name] = generator.generate(field.params);
-          }
-        } catch (error) {
-          warnings.push(`字段 "${field.name}" 第 ${i + 1} 行生成错误: ${error}`);
-          record[field.name] = null;
-        }
-      }
-
-      generatedData.push(record);
-
-      // 进度回调（每1000条）
-      if ((i + 1) % 1000 === 0 || i === count - 1) {
-        const progress: GenerateProgress = {
-          progress: Math.round(((i + 1) / count) * 100),
-          generated: i + 1,
-          total: count,
-          estimatedTimeLeft: Math.round(((Date.now() - startTime) / (i + 1)) * (count - i - 1)),
-        };
-        self.postMessage({ type: 'progress', payload: progress });
-      }
-    }
-
-    const duration = Date.now() - startTime;
-    const successCount = generatedData.filter((item) => Object.keys(item).length > 0).length;
-
-    const result: GenerateResult = {
-      success: true,
-      data: generatedData,
-      warnings: warnings.length > 0 ? warnings : undefined,
-      stats: {
-        total: count,
-        success: successCount,
-        failed: count - successCount,
-        duration,
-      },
-    };
-
-    self.postMessage({ type: 'complete', payload: result });
-  } catch (error) {
-    self.postMessage({
-      type: 'error',
-      payload: { error: `生成失败: ${error}` },
-    });
-  }
-}

wxt.config.ts

@@ -58,20 +58,8 @@ export default defineConfig({
       'contextMenus',
     ],
     host_permissions: ['<all_urls>'],
-    icons: {
-      '16': 'icon/16.png',
-      '32': 'icon/32.png',
-      '48': 'icon/48.png',
-      '96': 'icon/96.png',
-      '128': 'icon/128.png',
-    },
     action: {
       default_title: '__MSG_appName__',
-      default_icon: {
-        '16': 'icon/16.png',
-        '32': 'icon/32.png',
-        '48': 'icon/48.png',
-      },
     },
     side_panel: {
       default_path: 'entrypoints/sidepanel/index.html',