Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ubuntu
|
ee0408a944 |
@@ -1,17 +0,0 @@
|
||||
# CI/CD 配置
|
||||
|
||||
## CI 步骤
|
||||
|
||||
严格顺序，任一步骤失败则停止并标记 CI 失败：
|
||||
|
||||
1. `setup`（安装依赖、`wxt prepare`）
|
||||
2. 并行运行 `lint`、`typecheck`、`test`（三者全部通过才继续）
|
||||
3. `build`（仅当步骤 2 全部成功时执行）
|
||||
|
||||
## Pre-commit Hook
|
||||
|
||||
`.husky/pre-commit` 调用 `lint-staged`，任一步骤返回非零则终止提交：
|
||||
|
||||
1. 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：运行 `eslint --fix --max-warnings=0 --no-warn-ignored`；若失败则终止并报告错误
|
||||
2. 同一代码文件：运行 `prettier --write`
|
||||
3. 其他文件 (`*.{json,css,scss,md}`)：运行 `prettier --write`
|
||||
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,8 @@ concurrency:
|
||||
cancel-in-progress: true
|
||||
|
||||
jobs:
|
||||
# 💡 1. 提速核心：前置基建节点（Infrastructure Initialization）
|
||||
# 专门负责锁死环境、同步下载并缓存 node_modules，下游节点直接满血复用！
|
||||
setup:
|
||||
name: Prepare Dependencies
|
||||
runs-on: ubuntu-latest
|
||||
@@ -27,6 +29,7 @@ jobs:
|
||||
with:
|
||||
node-version: '22'
|
||||
|
||||
# 建立基于 package-lock.json 唯一哈希的缓存大闸
|
||||
- name: Cache Node Modules
|
||||
id: cache-nodemodules
|
||||
uses: actions/cache@v4
|
||||
@@ -44,6 +47,7 @@ jobs:
|
||||
id: cache-info
|
||||
run: echo "key=${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}" >> $GITHUB_OUTPUT
|
||||
|
||||
# 💡 2. 静态语法质检节点（依赖前置节点完成）
|
||||
lint:
|
||||
name: Lint
|
||||
runs-on: ubuntu-latest
|
||||
@@ -66,6 +70,7 @@ jobs:
|
||||
- name: Run ESLint
|
||||
run: npm run lint
|
||||
|
||||
# 💡 3. 强类型守卫节点（2秒瞬时恢复，开箱即查）
|
||||
typecheck:
|
||||
name: TypeScript Check
|
||||
runs-on: ubuntu-latest
|
||||
@@ -91,6 +96,7 @@ jobs:
|
||||
- name: Run TypeScript type check
|
||||
run: npm run typecheck
|
||||
|
||||
# 💡 4. 单元测试节点（无缝运行你刚刚修复完的 setupTests.ts 套件）
|
||||
test:
|
||||
name: Unit Tests
|
||||
runs-on: ubuntu-latest
|
||||
@@ -116,12 +122,16 @@ jobs:
|
||||
- name: Run tests
|
||||
run: npm run test
|
||||
|
||||
# 💡 5. 多端分布式最终编译节点（Production Matrix Compliance）
|
||||
build:
|
||||
name: Build (${{ matrix.browser }})
|
||||
runs-on: ubuntu-latest
|
||||
# 只有当 Linter、类型大闸、Vitest 单元测试全数满分通过，才放行最终打包编译
|
||||
needs: [ lint, typecheck, test ]
|
||||
strategy:
|
||||
matrix:
|
||||
# 💡 完美对齐 WXT 跨端架构：将 firefox 同步纳入生产编译大矩阵，
|
||||
# 如果 firefox 编译因任何多端不兼容挂掉，CI 会立刻拉起警报，防护力拉满！
|
||||
browser: [ chrome, firefox ]
|
||||
fail-fast: false
|
||||
steps:
|
||||
@@ -139,6 +149,7 @@ jobs:
|
||||
path: node_modules
|
||||
key: ${{ runner.os }}-node-v22-${{ hashFiles('**/package-lock.json') }}
|
||||
|
||||
# 💡 动态代理编译指令：完美匹配 WXT / 各类多端打包器的标准构建命令
|
||||
- name: Generate WXT types
|
||||
run: npx wxt prepare
|
||||
|
||||
|
||||
+1
-18
@@ -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,4 @@ stats-*.json
|
||||
.qoder/*
|
||||
dev/*
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Test coverage
|
||||
coverage/
|
||||
|
||||
# IDE files
|
||||
*.code-workspace
|
||||
|
||||
# Other
|
||||
*.tsbuildinfo
|
||||
*.tsxbuildinfo
|
||||
docs/*
|
||||
|
||||
+1
-5
@@ -1,5 +1 @@
|
||||
# 后台运行类型检查，结果输出到 stderr 但不阻塞提交
|
||||
npx tsc --noEmit &
|
||||
|
||||
# 前台运行 lint-staged（自动修复 + 格式化）
|
||||
npx lint-staged
|
||||
npx lint-staged
|
||||
@@ -1,13 +0,0 @@
|
||||
# pre-push: 严格检查，阻塞有问题的代码推送到远程
|
||||
# 类型检查（全项目，因为类型错误可能跨文件传播）
|
||||
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)
|
||||
if [ -n "$MERGE_BASE" ]; then
|
||||
CHANGED_FILES=$(git diff --name-only --diff-filter=d "$MERGE_BASE" HEAD -- '*.ts' '*.tsx' '*.js' '*.jsx' '*.mjs')
|
||||
if [ -n "$CHANGED_FILES" ]; then
|
||||
echo "$CHANGED_FILES" | xargs npx eslint --max-warnings=0
|
||||
fi
|
||||
fi
|
||||
@@ -1,6 +1,6 @@
|
||||
# AGENTS.md
|
||||
|
||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、测试数据生成器等测试效率工具。
|
||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。
|
||||
|
||||
## 核心命令
|
||||
|
||||
@@ -16,128 +16,52 @@ npm run typecheck # tsc --noEmit
|
||||
npm run test # vitest run (单次执行)
|
||||
npm run test:watch # vitest 监视模式
|
||||
npm run test:coverage # 带覆盖率的测试
|
||||
npx vitest run path/to/file.test.ts # 运行单个测试文件
|
||||
npx wxt prepare # 重新生成 .wxt/ 类型声明（npm install 时 postinstall 会自动执行）
|
||||
```
|
||||
|
||||
修改 `package.json` 或首次克隆仓库后需执行 `npm install`，会自动触发 `postinstall` → `wxt prepare`。
|
||||
运行单个测试: `npx vitest run path/to/file.test.ts`
|
||||
|
||||
## 验证流程
|
||||
|
||||
详见 [CI 配置](./.github/CI.md)。本地与 CI 的检查层次如下。
|
||||
CI 执行顺序: `setup → lint/typecheck/test(并行) → build` (build 依赖前三者)。
|
||||
|
||||
### Pre-commit（`.husky/pre-commit`）
|
||||
Pre-commit hook (`.husky/pre-commit` 调用 `lint-staged`):
|
||||
|
||||
1. 后台运行 `tsc --noEmit`（不阻塞提交，结果输出到 stderr）
|
||||
2. 前台运行 `lint-staged`：
|
||||
- 代码文件 (`*.{ts,tsx,js,jsx,mjs}`)：`eslint --fix --max-warnings=0`，再 `prettier --write`
|
||||
- 其他文件 (`*.{json,css,scss,md}`)：`prettier --write`
|
||||
- 代码文件 (`*.{ts,tsx,js,jsx,mjs}`): `eslint --fix --max-warnings=0 --no-warn-ignored` → `prettier --write`
|
||||
- 其他文件 (`*.{json,css,scss,md}`): `prettier --write`
|
||||
|
||||
### Pre-push（`.husky/pre-push`）
|
||||
提交前确保 `lint` 和 `typecheck` 通过。
|
||||
|
||||
1. 全项目 `tsc --noEmit`（阻塞推送）
|
||||
2. 对本次推送相对 upstream（或 `origin/main`）变更的 `*.{ts,tsx,js,jsx,mjs}` 文件运行 `eslint --max-warnings=0`
|
||||
## WXT 生成文件
|
||||
|
||||
### CI（GitHub Actions）
|
||||
|
||||
1. `setup` — 安装依赖
|
||||
2. 并行 `lint`、`typecheck`（含 `wxt prepare`）、`test`
|
||||
3. `build` — Chrome + Firefox 矩阵构建（仅当步骤 2 全部通过）
|
||||
- `.wxt/` 目录由 `postinstall` 自动执行 `wxt prepare` 生成，包含 TypeScript 类型声明和扩展的 tsconfig。
|
||||
- 生产构建输出到 `.output/` 目录。
|
||||
- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
src/ # 源代码根目录
|
||||
config/features.tsx # 功能定义（路由 + 元数据的单一事实来源）
|
||||
entrypoints/ # 扩展入口点 (popup/, sidepanel/, background.ts, content.ts)
|
||||
layout/ # 应用壳层布局（TopBar 导航、搜索、主题切换）
|
||||
pages/ # 功能页面组件 (懒加载)
|
||||
components/ # 可复用 UI 组件
|
||||
components/ui/ # shadcn/ui 基础组件 (button, dialog, select 等)
|
||||
providers/ # React Context (Router, Theme 等)
|
||||
hooks/ # 自定义 React Hooks
|
||||
utils/ # 工具函数与服务抽象
|
||||
types/ # TypeScript 类型声明
|
||||
lib/ # 通用工具函数（cn、utils）及数据生成器定义
|
||||
workers/ # Web Worker（数据生成等耗时任务）
|
||||
spec/ # 功能规格、修复方案与验收标准（见 spec/README.md）
|
||||
public/ # 静态资源（图标等）
|
||||
.wxt/ # wxt prepare 自动生成，含类型声明与扩展 tsconfig（勿手动编辑）
|
||||
.output/ # 生产构建输出目录
|
||||
```
|
||||
|
||||
### layout/
|
||||
|
||||
应用壳层，与 popup / sidepanel / tab 入口绑定。当前含 `TopBar/`（搜索、主题切换、返回导航、「在标签页打开」），遵循与 `pages/` 相同的 UI + Hook 模式。详见 [layout/README.md](./src/layout/README.md)。
|
||||
|
||||
### spec/
|
||||
|
||||
功能规格与验收标准文档，重大改动前优先查阅。索引见 [spec/README.md](./spec/README.md)。
|
||||
|
||||
### 页面组件模式
|
||||
|
||||
典型功能页面遵循 **UI + Hook 分离** 模式。详见 [CODING_STANDARDS.md § 11](./.github/CODING_STANDARDS.md#11-页面开发规范)。
|
||||
|
||||
```
|
||||
src/pages/FeatureName/
|
||||
├── index.tsx # 页面 UI（纯展示，仅负责渲染布局）
|
||||
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
|
||||
├── constants.ts # 常量定义（可选，≥3 个常量时创建）
|
||||
└── __tests__/
|
||||
└── index.test.tsx
|
||||
```
|
||||
|
||||
- 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
|
||||
- Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
|
||||
- 子组件可以独立调用全局 Hook
|
||||
- 当 `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 等）
|
||||
config/features.tsx # 功能定义（路由 + 元数据的单一事实来源）
|
||||
entrypoints/ # 扩展入口点 (popup/, options/, sidepanel/, background.ts, content.ts)
|
||||
pages/ # 功能页面组件 (懒加载)
|
||||
components/ # 可复用 UI 组件
|
||||
providers/ # React Context (Router, Theme 等)
|
||||
hooks/ # 自定义 React Hooks
|
||||
utils/ # 工具函数与服务抽象
|
||||
types/ # TypeScript 类型声明
|
||||
i18n/locales/{zh,en}/ # 国际化资源 (common.json, features.json 及各功能独立 JSON)
|
||||
```
|
||||
|
||||
## 关键架构决策
|
||||
|
||||
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
|
||||
渲染对应组件。支持三种渲染模式：popup（弹窗）、sidepanel（侧边栏）和 tab（浏览器新标签页，TopBar「在标签页打开」调用 `openExtensionPage('popup.html', { mode: 'tab' })`，由 `getEntryPointType()` 根据 URL 参数 `mode=tab` 识别）。
|
||||
每种模式有独立的路由和可见页面配置（`app/popupRoute`、`app/sidepanelRoute`、`app/tabRoute` 等）。
|
||||
**路由**: 不使用 React Router。通过 `config/features.tsx` 的 `FEATURES` 数组管理，`RouterProvider` 根据 `PageType`
|
||||
渲染对应组件。支持三种渲染模式: popup / sidepanel / tab。
|
||||
|
||||
**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
|
||||
使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 快照（`snapshot/{key}`）消除首屏闪烁。
|
||||
异步加载完成前禁止写入 storage（`RouterProvider` 的 `canPersistRef`、`useStorageState` 的 `loadSucceededRef`），避免默认值覆盖已有数据。
|
||||
**存储**: 所有 Chrome Storage 键必须在 `types/storage.d.ts` 的 `StorageSchema` 中定义。使用 `utils/chromeStorage.ts` 及其
|
||||
Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
||||
|
||||
**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
|
||||
**通信**: 使用 `@webext-core/messaging`，协议定义在 `utils/messages.ts`。
|
||||
|
||||
**路径别名**: `@/` 映射到 `src/` 目录（已在 `.wxt/tsconfig.json` 和 `vitest.config.ts` 中配置）。项目根目录使用 `@@/`。
|
||||
**路径别名**: `@/` 映射到项目根目录 (已在 tsconfig 和 vitest.config 中配置)。
|
||||
|
||||
**浏览器兼容**: 优先使用 `wxt/browser` 导出的 `browser` 对象，而非原生 `chrome` API。
|
||||
|
||||
@@ -147,46 +71,41 @@ src/types/
|
||||
- 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
|
||||
- Setup 文件: `vitest.setup.ts` 自动 mock:
|
||||
- `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
|
||||
- `react-i18next` (返回 key 作为翻译)
|
||||
- `@/utils/useLazyTranslation` (返回 `ns:key` 格式翻译)
|
||||
- `window.matchMedia`
|
||||
- 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
|
||||
- Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
|
||||
- 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
|
||||
|
||||
## UI 文案
|
||||
## i18n
|
||||
|
||||
项目已移除 `chrome.i18n`，UI 文案直接在代码中使用中文。
|
||||
|
||||
- **功能元数据**: `src/config/features.tsx` 的 `FEATURES` 数组定义 `label`、`description`（用于 Dashboard 卡片与搜索）
|
||||
- **页面文案**: 在组件 JSX、`constants.ts` 或 Hook 中直接写中文
|
||||
- **Manifest 文案**: 扩展名称与描述在 `wxt.config.ts` 的 `manifest` 中维护
|
||||
- **Toast / 错误提示**: 在 Hook 或 `constants.ts` 中定义，使用 `sonner` 的 `toast()` 展示
|
||||
- 命名空间: `common` (默认), `features`
|
||||
- 翻译键格式: `namespace:key` (如 `features:timestamp.title`)
|
||||
- 语言: `zh` (默认), `en`
|
||||
- 添加新翻译: 编辑 `i18n/locales/{zh,en}/{common,features}.json` 及对应功能独立 JSON
|
||||
|
||||
## 新功能开发清单
|
||||
|
||||
1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
|
||||
2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、label、description、图标、三种渲染模式的组件）
|
||||
3. 在 `src/pages/` 创建页面组件 (懒加载)：
|
||||
- `index.tsx` — UI 组件（纯展示）
|
||||
- `useFeatureName.ts` — 业务逻辑 Hook
|
||||
- `constants.ts` — 常量定义（可选，≥3 个常量时创建）
|
||||
4. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
|
||||
5. 添加对应的单元测试
|
||||
1. 在 `types/storage.d.ts` 添加 `PageType` 联合类型
|
||||
2. 在 `config/features.tsx` 的 `FEATURES` 数组添加配置
|
||||
3. 在 `pages/` 创建页面组件 (懒加载)
|
||||
4. 在 `i18n/locales/{zh,en}/features.json` 添加翻译（复杂功能可新建独立 JSON）
|
||||
5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
|
||||
6. 添加对应的单元测试
|
||||
|
||||
## 代码规范
|
||||
|
||||
- 禁止使用 `any` (测试文件除外)
|
||||
- 未使用变量/参数: 使用 `_` 前缀 (如 `_unused`)
|
||||
- 样式: 使用 Tailwind CSS + shadcn/ui (通过 `className` 和 `cn()` 工具)
|
||||
- UI 组件: 优先使用 `src/components/ui/` 下的 shadcn/ui 组件 (button, dialog, select 等)
|
||||
- 图标: 使用 `lucide-react` 图标库
|
||||
- 格式: Prettier [配置](./.prettierrc)
|
||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`
|
||||
- Git Commit: 使用中文描述，遵循 [Conventional Commits 规范](https://www.conventionalcommits.org/zh-hans/v1.0.0/)
|
||||
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
|
||||
|
||||
## 关键外部库（非显而易见的）
|
||||
## 技术栈版本
|
||||
|
||||
- `@webext-core/messaging` — 扩展消息通信
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
|
||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||
- `dayjs` — 日期处理（时间戳转换）
|
||||
- `sonner` — Toast 通知
|
||||
- WXT: ^0.20.26
|
||||
- React: ^19.2.6
|
||||
- Tailwind CSS: ^3.4.19
|
||||
- shadcn/ui (基于 Radix UI + class-variance-authority)
|
||||
- TypeScript: ^5.9.3
|
||||
- Vitest: ^4.1.7
|
||||
- i18next: ^26.2.0
|
||||
|
||||
@@ -8,71 +8,65 @@
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 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 编码与实时预览.
|
||||
|
||||
### 测试数据生成器
|
||||
### 📝 Markdown ↔ HTML 转换
|
||||
|
||||
- **可视化字段配置**: 通过 UI 界面定义数据字段，支持拖拽排序、最多 40 个字段.
|
||||
- **丰富的内置生成器**: 涵盖个人信息（姓名、手机、邮箱）、企业数据（公司名、职位）、技术数据（IP、MAC 地址、UUID）、基础类型（数字、日期、枚举）等多个分类.
|
||||
- **灵活的参数配置**: 每个生成器支持自定义参数（如数字范围、日期格式、枚举值列表等）.
|
||||
- **空值率与唯一性**: 可为非必填字段设置空值率，支持字段唯一性约束.
|
||||
- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则，方便复用.
|
||||
- **批量生成**: 支持 1 ~ 100,000 条数据生成，通过 Web Worker 异步处理避免阻塞 UI.
|
||||
- **实时预览**: 配置字段后即时预览示例数据结构.
|
||||
- **多格式导出**: 支持 JSON 和 CSV 格式，提供复制到剪贴板和下载文件两种导出方式.
|
||||
- **Markdown 转 HTML**: 实时预览 Markdown 渲染结果，支持导出 HTML 源码.
|
||||
- **HTML 转 Markdown**: 将 HTML 内容转换为 Markdown 格式.
|
||||
|
||||
## 技术栈
|
||||
|
||||
@@ -81,36 +75,34 @@
|
||||
- **UI 组件**: shadcn/ui (基于 Radix UI 的无头组件库)
|
||||
- **样式**: Tailwind CSS + class-variance-authority + cn() 工具函数
|
||||
- **日期处理**: dayjs (集成 UTC 和 Timezone 插件)
|
||||
- **UI 文案**: 组件内直接使用中文字符串；功能名称与描述定义在 `src/config/features.tsx`
|
||||
- **国际化**: i18next + react-i18next
|
||||
- **通信**: @webext-core/messaging
|
||||
- **存储**: Chrome Storage API (类型安全封装)
|
||||
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
||||
- **测试**: Vitest + Testing Library
|
||||
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
|
||||
- **异步生成**: Web Worker (批量数据生成)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```text
|
||||
├── src/ # 源代码根目录
|
||||
│ ├── components/ # 可复用 React 组件
|
||||
│ ├── config/ # 应用配置
|
||||
│ │ └── features.tsx # 功能定义与路由映射
|
||||
│ ├── entrypoints/ # 扩展程序入口点
|
||||
│ │ ├── popup/ # 点击图标弹出的主界面
|
||||
│ │ ├── sidepanel/ # 浏览器侧边栏集成
|
||||
│ │ ├── background.ts # 后台 Service Worker
|
||||
│ │ └── content.ts # 网页注入脚本
|
||||
│ ├── pages/ # 各功能模块的页面组件
|
||||
│ ├── workers/ # Web Worker (数据生成等耗时任务)
|
||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
│ ├── hooks/ # 自定义 React Hooks
|
||||
│ ├── utils/ # 工具函数与服务抽象
|
||||
│ ├── types/ # TypeScript 类型声明
|
||||
│ └── lib/ # 通用工具函数与生成器库 (cn, utils, generators 等)
|
||||
├── public/ # 静态资源 (图标等)
|
||||
├── wxt.config.ts # WXT 框架核心配置
|
||||
└── package.json # 项目元数据与依赖管理
|
||||
├── components/ # 可复用 React 组件
|
||||
├── config/ # 应用配置
|
||||
│ └── features.tsx # 功能定义与路由映射
|
||||
├── entrypoints/ # 扩展程序入口点
|
||||
│ ├── popup/ # 点击图标弹出的主界面
|
||||
│ ├── options/ # 扩展程序设置页面
|
||||
│ ├── sidepanel/ # 浏览器侧边栏集成
|
||||
│ ├── background.ts # 后台 Service Worker
|
||||
│ └── content.ts # 网页注入脚本
|
||||
├── pages/ # 各功能模块的页面组件
|
||||
├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
├── hooks/ # 自定义 React Hooks
|
||||
├── utils/ # 工具函数与服务抽象
|
||||
├── types/ # TypeScript 类型声明
|
||||
├── lib/ # 通用工具函数 (cn, utils 等)
|
||||
├── i18n/ # 国际化资源
|
||||
├── public/ # 静态资源 (图标、manifest 资源等)
|
||||
├── wxt.config.ts # WXT 框架核心配置
|
||||
└── package.json # 项目元数据与依赖管理
|
||||
```
|
||||
|
||||
## 开发与部署
|
||||
@@ -155,6 +147,7 @@
|
||||
- `sidePanel`: 支持在浏览器侧边栏中运行.
|
||||
- `clipboardWrite`: 提供一键复制功能.
|
||||
- `contextMenus`: 注册右键菜单，支持快捷操作.
|
||||
- `alarms`: 管理后台定时任务（如清理后自动刷新）.
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
+1
-1
@@ -5,7 +5,7 @@
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/styles/shell.css",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
import { cn } from '@/lib/utils'; // 1. 必须使用 cn 工具函数
|
||||
import { toast } from 'sonner'; // 2. 推荐使用 shadcn 默认的全局 toast
|
||||
|
||||
// 3. 继承原生按钮属性，允许外部自由扩展 className、variant 等
|
||||
interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
text: string;
|
||||
tooltip?: string;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
// 移除复杂的自定义颜色变体，交由 Tailwind 类名或 shadcn 的 variant 解决
|
||||
variant?: 'default' | 'secondary' | 'ghost' | 'outline';
|
||||
}
|
||||
|
||||
export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
text,
|
||||
tooltip = '复制',
|
||||
size = 'small',
|
||||
variant = 'ghost',
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation(); // 基础组件防冒泡，避免触发父级点击事件
|
||||
|
||||
if (!text) {
|
||||
toast.error('无内容可复制');
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await copyTextToClipboard(text);
|
||||
if (success) {
|
||||
toast.success('复制成功');
|
||||
setCopied(true);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
||||
} else {
|
||||
toast.error('复制失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 4. 将控制尺寸的类名标准化
|
||||
const sizeClasses = {
|
||||
small: 'h-8 w-8 text-xs',
|
||||
medium: 'h-10 w-10 text-sm',
|
||||
large: 'h-12 w-12 text-base',
|
||||
};
|
||||
|
||||
// 5. 映射 shadcn 的底层通用 Variant 类名
|
||||
const variantClasses = {
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
title={tooltip}
|
||||
// 6. 使用 cn() 合并类名，并完美支持暗黑模式的语义化变量 (destructive/muted等)
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
sizeClasses[size],
|
||||
copied
|
||||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' // 兼顾暗黑模式的成功色
|
||||
: variantClasses[variant],
|
||||
className, // 允许外部直接传入 text-red-500 等覆盖样式
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{copied ? (
|
||||
<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]" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyButton;
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* DecodeResultPaper
|
||||
*
|
||||
* FileMode 与 ImageMode 通用的 decode 结果展示组件。
|
||||
* 提取了二者 decode 输出区完全一致的结构：
|
||||
* 标题 → 可选预览（children）→ 文件信息 → 文件名输入 → 下载按钮
|
||||
*
|
||||
* FileMode 直接使用，ImageMode 通过 children 传入图片预览。
|
||||
*/
|
||||
import { Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { formatFileSize } from '@/utils/base64Converter';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
|
||||
title: string;
|
||||
/** 解码后推断的 MIME 类型 */
|
||||
mimeType: string;
|
||||
/** 解码后 Blob 的大小（字节） */
|
||||
blobSize: number;
|
||||
/** 当前文件名 */
|
||||
fileName: string;
|
||||
/** 文件名变更回调 */
|
||||
onFileNameChange: (name: string) => void;
|
||||
/** 下载按钮点击回调 */
|
||||
onDownload: () => void;
|
||||
/** 可选的预览内容，ImageMode 用于渲染图片预览 */
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DecodeResultPaper({
|
||||
title,
|
||||
mimeType,
|
||||
blobSize,
|
||||
fileName,
|
||||
onFileNameChange,
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
const { t } = useLazyTranslation('base64Converter');
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
{/* 标题 */}
|
||||
<span className="block mb-2 text-xs font-bold text-muted-foreground">{title}</span>
|
||||
|
||||
{/* 可选预览内容（ImageMode 的图片） */}
|
||||
{children}
|
||||
|
||||
{/* 文件信息 */}
|
||||
<div className="flex gap-4 mb-3">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('inferredMimeType')}: {mimeType}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 文件名输入 */}
|
||||
<div className="mb-3">
|
||||
<label className="block text-xs font-medium text-muted-foreground mb-1">
|
||||
{t('decodedFileName')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={fileName}
|
||||
onChange={(e) => onFileNameChange(e.target.value)}
|
||||
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下载按钮 */}
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={onDownload}
|
||||
disabled={!fileName.trim()}
|
||||
className="w-full rounded-lg font-bold"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('download')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 错误边界组件：捕获子组件树中的 JavaScript 错误
|
||||
*/
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('Uncaught error:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.children !== this.props.children) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleReset = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="mt-16 mx-auto max-w-md">
|
||||
<div className="p-6 text-center rounded-xl border border-red-200 bg-red-50">
|
||||
<AlertCircle className="h-16 w-16 text-red-500 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-extrabold text-red-600 mb-2">糟糕，出了点问题</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
|
||||
</p>
|
||||
{this.state.error && (
|
||||
<div className="mb-6 p-4 bg-muted rounded-lg text-left max-h-[200px] overflow-auto">
|
||||
<pre className="font-mono text-xs whitespace-pre-wrap break-all text-red-700">
|
||||
{this.state.error.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={this.handleReset}
|
||||
className="rounded-lg font-bold bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
刷新应用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
@@ -0,0 +1,368 @@
|
||||
/**
|
||||
* GlobalSnackbar - 全局 Snackbar 消息提示组件及 Provider
|
||||
*
|
||||
* 提供可复用的 Toast 消息提示功能，支持三种使用方式：
|
||||
* 1. 作为受控组件使用：通过 props 控制显示状态
|
||||
* 2. 通过 useSnackbarState Hook 使用：在组件内部自动管理状态
|
||||
* 3. 通过 SnackbarProvider 和 useSnackbar Hook 使用：全局单例模式
|
||||
*
|
||||
* @module GlobalSnackbar
|
||||
* @version 1.1.0
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* // 方式一：受控组件
|
||||
* <GlobalSnackbar
|
||||
* message="操作成功"
|
||||
* open={isOpen}
|
||||
* onClose={() => setIsOpen(false)}
|
||||
* severity="success"
|
||||
* />
|
||||
*
|
||||
* // 方式二：Hook 方式 (局部状态)
|
||||
* const { snackbarProps, showMessage } = useSnackbarState();
|
||||
* showMessage('Hello!', { severity: 'info' });
|
||||
*
|
||||
* // 方式三：Context 方式 (全局状态)
|
||||
* // 在根组件包裹 Provider
|
||||
* <SnackbarProvider>
|
||||
* <App />
|
||||
* </SnackbarProvider>
|
||||
*
|
||||
* // 在子组件中使用
|
||||
* const { showMessage } = useSnackbar();
|
||||
* showMessage('Global Message');
|
||||
* ```
|
||||
*/
|
||||
|
||||
import {
|
||||
JSX,
|
||||
useState,
|
||||
useRef,
|
||||
createContext,
|
||||
useContext,
|
||||
useEffect,
|
||||
type ReactNode,
|
||||
type SyntheticEvent,
|
||||
} from 'react';
|
||||
import { CheckCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* Snackbar 消息严重程度类型
|
||||
* @description 决定 Alert 组件的颜色和图标
|
||||
* - success: 绿色，成功提示
|
||||
* - info: 蓝色，信息提示
|
||||
* - warning: 橙色，警告提示
|
||||
* - error: 红色，错误提示
|
||||
*/
|
||||
export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error';
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件的属性接口
|
||||
* @interface GlobalSnackbarProps
|
||||
*/
|
||||
export interface GlobalSnackbarProps {
|
||||
/** 消息内容，要显示的提示文本 */
|
||||
message: string;
|
||||
/** 是否显示 Snackbar */
|
||||
open: boolean;
|
||||
/** 关闭回调函数 */
|
||||
onClose: () => void;
|
||||
/** 消息级别，影响颜色和图标样式，默认 'info' */
|
||||
severity?: SnackbarSeverity;
|
||||
/** 自动隐藏时间（毫秒），设为 0 则不自动关闭，默认 2000 */
|
||||
autoHideDuration?: number;
|
||||
/** Snackbar 弹出位置，默认 { vertical: 'bottom', horizontal: 'center' } */
|
||||
anchorOrigin?: {
|
||||
vertical: 'top' | 'bottom';
|
||||
horizontal: 'left' | 'center' | 'right';
|
||||
};
|
||||
/** 是否使用 Alert 组件包裹，false 则使用原生 Snackbar message，默认 true */
|
||||
showAlert?: boolean;
|
||||
/** 是否隐藏 Alert 图标，默认 false */
|
||||
hideIcon?: boolean;
|
||||
/** 自定义样式，透传给外层 Snackbar 组件 */
|
||||
sx?: React.CSSProperties;
|
||||
/** 自定义样式，透传给内层 Alert 组件（仅 showAlert=true 时生效） */
|
||||
alertSx?: React.CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* showMessage 方法的选项配置
|
||||
* @interface SnackbarOptions
|
||||
*/
|
||||
export interface SnackbarOptions {
|
||||
/** 消息级别：success | info | warning | error */
|
||||
severity?: SnackbarSeverity;
|
||||
/** 自动隐藏时间（毫秒），设为 0 则不自动关闭 */
|
||||
autoHideDuration?: number;
|
||||
/** 是否隐藏 Alert 图标 */
|
||||
hideIcon?: boolean;
|
||||
/** 是否使用 Alert 组件包裹 */
|
||||
showAlert?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbarState Hook 的返回值类型
|
||||
* @interface UseSnackbarStateResult
|
||||
*/
|
||||
export interface UseSnackbarStateResult {
|
||||
/** 传递给 GlobalSnackbar 组件的属性对象 */
|
||||
snackbarProps: GlobalSnackbarProps;
|
||||
/** 显示消息的方法 */
|
||||
showMessage: (message: string, options?: SnackbarOptions) => void;
|
||||
/** 关闭消息的方法 */
|
||||
closeMessage: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件的默认属性配置
|
||||
* @description 提供类型安全的默认值选择
|
||||
*/
|
||||
const defaultProps: Required<
|
||||
Pick<
|
||||
GlobalSnackbarProps,
|
||||
'severity' | 'autoHideDuration' | 'anchorOrigin' | 'showAlert' | 'hideIcon'
|
||||
>
|
||||
> = {
|
||||
severity: 'info',
|
||||
autoHideDuration: 2000,
|
||||
anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
|
||||
showAlert: true,
|
||||
hideIcon: false,
|
||||
};
|
||||
|
||||
const severityConfig: Record<
|
||||
SnackbarSeverity,
|
||||
{ icon: React.ElementType; bgClass: string; textClass: string }
|
||||
> = {
|
||||
success: { icon: CheckCircle, bgClass: 'bg-green-500', textClass: 'text-white' },
|
||||
info: { icon: Info, bgClass: 'bg-primary/100', textClass: 'text-white' },
|
||||
warning: { icon: AlertTriangle, bgClass: 'bg-amber-500', textClass: 'text-white' },
|
||||
error: { icon: XCircle, bgClass: 'bg-red-500', textClass: 'text-white' },
|
||||
};
|
||||
|
||||
/**
|
||||
* GlobalSnackbar 组件
|
||||
*
|
||||
* 全局消息提示的展示组件，支持受控和非受控两种使用模式。
|
||||
*
|
||||
* @param {GlobalSnackbarProps} props - 组件属性
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
export function GlobalSnackbar({
|
||||
message,
|
||||
open,
|
||||
onClose,
|
||||
severity = defaultProps.severity,
|
||||
autoHideDuration = defaultProps.autoHideDuration,
|
||||
showAlert = defaultProps.showAlert,
|
||||
hideIcon = defaultProps.hideIcon,
|
||||
}: GlobalSnackbarProps): JSX.Element | null {
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && autoHideDuration > 0) {
|
||||
timerRef.current = setTimeout(() => {
|
||||
onClose();
|
||||
}, autoHideDuration);
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}, [open, autoHideDuration, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const config = severityConfig[severity];
|
||||
const IconComponent = config.icon;
|
||||
|
||||
return (
|
||||
<div className="fixed z-[999999] bottom-6 left-1/2 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-300">
|
||||
{showAlert ? (
|
||||
<div
|
||||
className={`flex items-center gap-2 px-5 py-1.5 rounded-full shadow-lg ${config.bgClass} ${config.textClass}`}
|
||||
style={{ minWidth: '140px' }}
|
||||
>
|
||||
{!hideIcon && <IconComponent className="h-4 w-4 flex-shrink-0" />}
|
||||
<span className="text-xs font-bold">{message}</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-2 rounded-lg bg-gray-800 text-white text-sm">{message}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbarState - 消息提示的 Hook 方式
|
||||
*
|
||||
* 提供状态管理的 Snackbar 功能，自动处理 open、message 等状态。
|
||||
* 适合在组件内部使用，无需额外的状态管理代码。
|
||||
*
|
||||
* @param {SnackbarOptions} [initialOptions] - 初始配置选项
|
||||
* @returns {UseSnackbarStateResult} 包含 snackbarProps 和操作方法的对象
|
||||
*
|
||||
* @description
|
||||
* - 自动管理 Snackbar 的显示/隐藏状态
|
||||
* - 支持链式调用 showMessage
|
||||
* - 合并初始选项和调用时选项
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* function MyComponent() {
|
||||
* const { snackbarProps, showMessage, closeMessage } = useSnackbarState({
|
||||
* severity: 'info',
|
||||
* autoHideDuration: 3000,
|
||||
* });
|
||||
*
|
||||
* const handleSave = () => {
|
||||
* // 业务逻辑...
|
||||
* showMessage('保存成功！', { severity: 'success' });
|
||||
* };
|
||||
*
|
||||
* return (
|
||||
* <>
|
||||
* <button onClick={handleSave}>保存</button>
|
||||
* <GlobalSnackbar {...snackbarProps} />
|
||||
* </>
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function useSnackbarState(initialOptions?: SnackbarOptions): UseSnackbarStateResult {
|
||||
// Snackbar 显示状态
|
||||
const [open, setOpen] = useState(false);
|
||||
// 当前显示的消息内容
|
||||
const [message, setMessage] = useState('');
|
||||
// 消息配置选项
|
||||
const [options, setOptions] = useState<SnackbarOptions>(initialOptions || {});
|
||||
|
||||
/**
|
||||
* 显示消息
|
||||
*
|
||||
* @param {string} newMessage - 要显示的消息文本
|
||||
* @param {SnackbarOptions} [newOptions={}] - 新的配置选项
|
||||
*
|
||||
* @description
|
||||
* - 合并初始选项和新的调用选项
|
||||
* - 新选项会覆盖初始选项
|
||||
*/
|
||||
const showMessage = (newMessage: string, newOptions: SnackbarOptions = {}) => {
|
||||
setMessage(newMessage);
|
||||
setOptions({ ...initialOptions, ...newOptions });
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭消息
|
||||
*
|
||||
* @description
|
||||
* - 直接将 open 状态设置为 false
|
||||
*/
|
||||
const closeMessage = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClose = (_event?: SyntheticEvent | Event, reason?: string) => {
|
||||
if (reason === 'clickaway') return;
|
||||
closeMessage();
|
||||
};
|
||||
|
||||
/**
|
||||
* 传递给 GlobalSnackbar 组件的属性
|
||||
*
|
||||
* @description
|
||||
* - 组合当前状态和选项为完整的组件 props
|
||||
* - onClose 使用 handleClose 包装后的版本
|
||||
*/
|
||||
const snackbarProps: GlobalSnackbarProps = {
|
||||
message,
|
||||
open,
|
||||
onClose: handleClose,
|
||||
severity: options.severity,
|
||||
autoHideDuration: options.autoHideDuration,
|
||||
hideIcon: options.hideIcon,
|
||||
};
|
||||
|
||||
return {
|
||||
snackbarProps,
|
||||
showMessage,
|
||||
closeMessage,
|
||||
};
|
||||
}
|
||||
|
||||
// --- Context & Provider ---
|
||||
|
||||
/**
|
||||
* Snackbar Context 的值类型定义
|
||||
*/
|
||||
interface SnackbarContextValue {
|
||||
showMessage: (message: string, options?: SnackbarOptions) => void;
|
||||
closeMessage: () => void;
|
||||
}
|
||||
|
||||
const SnackbarContext = createContext<SnackbarContextValue | null>(null);
|
||||
|
||||
/**
|
||||
* SnackbarProvider 组件的 props 类型
|
||||
*/
|
||||
interface SnackbarProviderProps {
|
||||
children: ReactNode;
|
||||
initialOptions?: SnackbarOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* SnackbarProvider 组件
|
||||
*
|
||||
* 全局消息提示的 Provider 组件，需要包裹在应用根组件外层。
|
||||
*/
|
||||
export function SnackbarProvider({ children, initialOptions }: SnackbarProviderProps): JSX.Element {
|
||||
const { snackbarProps, showMessage, closeMessage } = useSnackbarState(initialOptions);
|
||||
|
||||
return (
|
||||
<SnackbarContext.Provider value={{ showMessage, closeMessage }}>
|
||||
{children}
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</SnackbarContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* useSnackbar - 在子组件中获取 Snackbar 上下文的 Hook
|
||||
*
|
||||
* @param {SnackbarOptions} [options] - 钩子级别的默认配置（如 autoHideDuration）
|
||||
* @returns {SnackbarContextValue} - 包含 showMessage 和 closeMessage 的对象
|
||||
* @throws {Error} - 如果不在 SnackbarProvider 内部调用，抛出错误
|
||||
*
|
||||
* @description
|
||||
* 选项合并策略：
|
||||
* 1. 调用 showMessage 时传入的 callOptions 优先级最高
|
||||
* 2. useSnackbar(options) 传入的 Hook 级别配置次之
|
||||
* 3. SnackbarProvider(initialOptions) 传入的全局配置优先级最低
|
||||
*/
|
||||
export function useSnackbar(options?: SnackbarOptions): SnackbarContextValue {
|
||||
const context = useContext(SnackbarContext);
|
||||
if (!context) {
|
||||
throw new Error('useSnackbar must be used within SnackbarProvider');
|
||||
}
|
||||
|
||||
// 包装 showMessage 以支持 Hook 级别的 initialOptions
|
||||
const wrappedShowMessage = (message: string, callOptions?: SnackbarOptions) => {
|
||||
// 采用防御性编程，确保 options 和 callOptions 为空时也能正常工作
|
||||
// 优先级：callOptions > options
|
||||
const mergedOptions: SnackbarOptions = {
|
||||
...(options || {}),
|
||||
...(callOptions || {}),
|
||||
};
|
||||
context.showMessage(message, mergedOptions);
|
||||
};
|
||||
|
||||
return {
|
||||
...context,
|
||||
showMessage: wrappedShowMessage,
|
||||
};
|
||||
}
|
||||
|
||||
export default GlobalSnackbar;
|
||||
@@ -1,14 +1,22 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { Image, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useSnackbar } from '@/components/GlobalSnackbar';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
|
||||
interface ImageUploaderProps {
|
||||
/** 选中的文件 */
|
||||
selectedFile: File | null;
|
||||
/** 文件变更回调 */
|
||||
onFileChange: (file: File) => void;
|
||||
/** 清除文件回调 */
|
||||
onClearFile: () => void;
|
||||
/** 文件预览 URL */
|
||||
previewUrl: string;
|
||||
/** 预览 URL 变更回调 */
|
||||
onPreviewUrlChange: (url: string) => void;
|
||||
/** 是否正在拖拽 */
|
||||
dragging: boolean;
|
||||
/** 拖拽状态变更回调 */
|
||||
onDraggingChange: (dragging: boolean) => void;
|
||||
}
|
||||
|
||||
@@ -17,21 +25,36 @@ const ImageUploader = ({
|
||||
onFileChange,
|
||||
onClearFile,
|
||||
previewUrl,
|
||||
onPreviewUrlChange,
|
||||
dragging,
|
||||
onDraggingChange,
|
||||
}: ImageUploaderProps) => {
|
||||
const { t } = useLazyTranslation('qrCode');
|
||||
const { showMessage } = useSnackbar();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
onFileChange(file);
|
||||
onPreviewUrlChange(URL.createObjectURL(file));
|
||||
},
|
||||
[onFileChange, onPreviewUrlChange],
|
||||
);
|
||||
|
||||
const handleClearFile = () => {
|
||||
if (previewUrl) {
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
}
|
||||
onClearFile();
|
||||
toast.success('图片已清除');
|
||||
showMessage(t('qrCode:imageCleared'), {
|
||||
severity: 'success',
|
||||
autoHideDuration: 1000,
|
||||
});
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
onFileChange(file);
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleFileChange(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -49,10 +72,45 @@ const ImageUploader = ({
|
||||
onDraggingChange(false);
|
||||
const droppedFile = e.dataTransfer.files?.[0];
|
||||
if (droppedFile) {
|
||||
onFileChange(droppedFile);
|
||||
handleFileChange(droppedFile);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听粘贴事件
|
||||
useEffect(() => {
|
||||
const handlePaste = async (e: ClipboardEvent) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.startsWith('image/')) {
|
||||
e.preventDefault();
|
||||
|
||||
const file = items[i].getAsFile();
|
||||
if (file) {
|
||||
try {
|
||||
handleFileChange(file);
|
||||
showMessage(t('qrCode:imagePasted'), { severity: 'success', autoHideDuration: 1000 });
|
||||
} catch (error) {
|
||||
console.error('处理粘贴图片失败:', error);
|
||||
showMessage(t('qrCode:imagePasteError'), {
|
||||
severity: 'error',
|
||||
autoHideDuration: 3000,
|
||||
});
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('paste', handlePaste);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [showMessage, handleFileChange, t]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center h-[250px] border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-200 ${
|
||||
@@ -60,20 +118,21 @@ const ImageUploader = ({
|
||||
? 'border-green-600 bg-green-50'
|
||||
: selectedFile
|
||||
? 'border-green-600 bg-green-50/50'
|
||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
|
||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10/50'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleInputChange}
|
||||
className="hidden"
|
||||
id="qr-code-upload"
|
||||
/>
|
||||
<Label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
||||
<label htmlFor="qr-code-upload" className="cursor-pointer text-center w-full">
|
||||
{selectedFile ? (
|
||||
<div className="text-center w-full relative">
|
||||
<div className="relative inline-block">
|
||||
@@ -82,22 +141,20 @@ const ImageUploader = ({
|
||||
alt="QR Code Preview"
|
||||
className="max-w-full max-h-40 rounded-lg object-contain"
|
||||
/>
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
data-testid="ClearIcon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleClearFile();
|
||||
}}
|
||||
className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
|
||||
className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
<span className="block text-sm text-muted-foreground mt-2">{selectedFile.name}</span>
|
||||
<span className="block text-xs text-muted-foreground">点击更换图片</span>
|
||||
<span className="block text-xs text-muted-foreground">{t('qrCode:clickToChange')}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -106,14 +163,14 @@ const ImageUploader = ({
|
||||
className="w-12 h-12 text-muted-foreground mx-auto mb-2"
|
||||
/>
|
||||
<span className="block text-sm text-muted-foreground mb-1">
|
||||
点击、拖拽或粘贴上传二维码图片
|
||||
{t('qrCode:clickToUpload')}
|
||||
</span>
|
||||
<span className="block text-xs text-muted-foreground">
|
||||
支持 PNG、JPG、WEBP、Base64 格式
|
||||
{t('qrCode:supportFormats')}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Label>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
resetKey?: string | number;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面级错误边界组件：捕获子组件树中的 JavaScript 错误
|
||||
* 完美适配 shadcn/ui 语义化主题与暗黑模式
|
||||
*/
|
||||
export class PageErrorBoundary extends Component<Props, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('Uncaught error in page:', error, errorInfo);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
|
||||
this.setState({ hasError: false, error: null });
|
||||
}
|
||||
}
|
||||
|
||||
private handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center flex-1 p-6 min-h-[300px] animate-in fade-in zoom-in-95 duration-200">
|
||||
{/*
|
||||
1. 适配暗黑模式的容器设计：
|
||||
不再使用 border-red-200 / bg-red-50，改用标准的 border-destructive/20 和 bg-destructive/5，
|
||||
并在黑夜模式下会自动转为深红底色，绝不刺眼。
|
||||
*/}
|
||||
<div className="p-6 text-center rounded-xl border border-destructive/20 bg-destructive/5 max-w-md w-full shadow-sm">
|
||||
{/* 2. 状态符号改用标准的 text-destructive 语义色 */}
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
||||
<AlertCircle className="h-6 w-6" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
|
||||
<p className="text-xs text-muted-foreground mb-5">
|
||||
该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
|
||||
</p>
|
||||
|
||||
{/* 3. 错误日志展示：使用与 shadcn 贴合的深色代码块包裹 */}
|
||||
{this.state.error && (
|
||||
<div className="mb-5 p-3 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-40 overflow-y-auto border border-border/40">
|
||||
<pre className="font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-zinc-200 selection:bg-zinc-700">
|
||||
{this.state.error.stack || this.state.error.toString()}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*
|
||||
4. 严谨调用 shadcn 原子 Button：
|
||||
去掉全部手动指定的红底白字类名，直接启用 variant="destructive"。
|
||||
它会自动处理 hover 颜色变化、暗黑模式切换以及无障碍高亮边框。
|
||||
*/}
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={this.handleRetry}
|
||||
className="font-medium shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||
重新尝试
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default PageErrorBoundary;
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* PageSkeleton 组件 - 页面加载骨架屏
|
||||
*
|
||||
* 用于 Suspense fallback 和初始加载状态，提供平滑的视觉过渡
|
||||
* 避免白屏闪烁，减少布局偏移
|
||||
*/
|
||||
interface PageSkeletonProps {
|
||||
/** 骨架屏类型 */
|
||||
variant?: 'dashboard' | 'tool';
|
||||
}
|
||||
|
||||
/**
|
||||
* 仪表盘卡片骨架屏
|
||||
*/
|
||||
function DashboardCardSkeleton() {
|
||||
return (
|
||||
<div className="rounded-xl border border-border p-5 h-[100px]">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="w-10 h-10 rounded-lg bg-muted animate-pulse" />
|
||||
<div>
|
||||
<div className="w-24 h-5 bg-muted rounded animate-pulse" />
|
||||
<div className="w-32 h-3.5 bg-muted rounded animate-pulse mt-1.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-3 h-3 rounded-full bg-muted animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 工具页面骨架屏
|
||||
*/
|
||||
function ToolPageSkeleton() {
|
||||
return (
|
||||
<div className="p-5">
|
||||
{/* 标题区域 */}
|
||||
<div className="w-44 h-7 bg-muted rounded animate-pulse mb-4" />
|
||||
|
||||
{/* 输入区域 */}
|
||||
<div className="w-full h-[120px] bg-muted rounded-xl animate-pulse mb-4" />
|
||||
|
||||
{/* 控制栏 */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
<div className="w-24 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="w-20 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
<div className="flex-1" />
|
||||
<div className="w-22 h-9 bg-muted rounded-lg animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* 结果区域 */}
|
||||
<div className="w-full h-[160px] bg-muted rounded-xl animate-pulse" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面加载骨架屏
|
||||
*
|
||||
* @param props - PageSkeletonProps
|
||||
* @returns 骨架屏 JSX 元素
|
||||
*/
|
||||
export default function PageSkeleton({ variant = 'dashboard' }: PageSkeletonProps) {
|
||||
if (variant === 'tool') {
|
||||
return <ToolPageSkeleton />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(300px,1fr))] auto-rows-fr gap-4 p-4">
|
||||
{Array.from({ length: 6 }).map((_, index) => (
|
||||
<DashboardCardSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
PageSkeleton.displayName = 'PageSkeleton';
|
||||
@@ -0,0 +1,89 @@
|
||||
import React from 'react';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
|
||||
// 继承原生 HTML Div 属性，方便外部无缝扩充类名或监听事件
|
||||
interface QrCodePreviewProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
/** 二维码 Data URL */
|
||||
qrCodeDataUrl: string;
|
||||
/** 下载回调 */
|
||||
onDownload: () => void;
|
||||
/** 复制回调 */
|
||||
onCopy: () => void;
|
||||
}
|
||||
|
||||
const QrCodePreview = ({
|
||||
qrCodeDataUrl,
|
||||
onDownload,
|
||||
onCopy,
|
||||
className,
|
||||
...props
|
||||
}: QrCodePreviewProps) => {
|
||||
const { t } = useLazyTranslation('qrCode');
|
||||
|
||||
// 空状态下的虚线骨架屏
|
||||
if (!qrCodeDataUrl) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center min-h-[200px] border border-dashed border-input rounded-xl p-4 bg-muted/40',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground text-center">{t('qrCode:qrCodeWillShow')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col justify-center items-center min-h-[200px] border border-input rounded-xl p-6 bg-muted/40',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex flex-col items-center w-full max-w-xs">
|
||||
{/*
|
||||
2. 二维码容器适配：
|
||||
在暗黑模式下，纯黑白的二维码如果直接暴露在暗色背景下，会导致手机摄像头极难识别。
|
||||
通过裹一层 bg-white 和 p-3，确保黑白对比度绝对安全，同时加入 shadow 增强卡片感。
|
||||
*/}
|
||||
<div className="p-3 bg-white rounded-lg shadow-sm border border-border/40">
|
||||
<img
|
||||
src={qrCodeDataUrl}
|
||||
alt="QR Code Preview"
|
||||
className="w-56 h-56 max-w-full object-contain block animate-in fade-in duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 3. 按钮群全面向 shadcn 官方 Button 视觉规范对齐 */}
|
||||
<div className="flex w-full gap-2 mt-5">
|
||||
{/* 下载按钮：使用标准的次要按钮风格 (Outline) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDownload}
|
||||
className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<Download className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="truncate">{t('qrCode:downloadButton')}</span>
|
||||
</button>
|
||||
|
||||
{/* 复制按钮：使用标准的主要行动按钮风格 (Default) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCopy}
|
||||
className="flex-1 inline-flex h-9 items-center justify-center gap-2 px-3 text-sm font-medium rounded-md bg-primary text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
<span className="truncate">{t('qrCode:copyQrButton')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrCodePreview;
|
||||
@@ -0,0 +1,65 @@
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense, useMemo } from 'react';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
import { AlertTriangle } from 'lucide-react'; // 用于标准的 404 异常展示
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
|
||||
// 2. 稳定的动态动画类名映射
|
||||
const animationClass = useMemo(() => {
|
||||
return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
}, [currentPage]);
|
||||
|
||||
const entryPointType = useMemo(() => {
|
||||
return getEntryPointType();
|
||||
}, []);
|
||||
|
||||
// 骨架屏加载状态守卫
|
||||
if (!isLoaded) {
|
||||
return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
|
||||
}
|
||||
|
||||
// 3. 严格的路由查找与类型安全的组件分发
|
||||
const currentFeature = FEATURES.find((f) => f.key === currentPage);
|
||||
const MatchedComponent = currentFeature?.components?.[entryPointType];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={currentPage} // 保持原有通过重新挂载触发动画的精简特性
|
||||
className={cn(
|
||||
'flex-1 flex flex-col overflow-x-hidden overflow-y-auto',
|
||||
'scrollbar-gutter-stable motion-reduce:transition-none', // 当系统开启“减弱动态效果”时，自动优雅降级，防止眩晕
|
||||
animationClass,
|
||||
)}
|
||||
>
|
||||
<Suspense
|
||||
fallback={<PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />}
|
||||
>
|
||||
<PageErrorBoundary resetKey={currentPage}>
|
||||
{/*
|
||||
4. 路由防御拦截：
|
||||
如果组件存在则正常流式渲染，如果由于版本更迭或非法路径导致找不到对应组件，
|
||||
渲染一个优雅且符合 shadcn 风格的中性 404 提示页，而不是死白屏。
|
||||
*/}
|
||||
{MatchedComponent ? (
|
||||
<MatchedComponent />
|
||||
) : (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-300">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-destructive/10 text-destructive mb-4">
|
||||
<AlertTriangle className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-sm font-semibold text-foreground">页面未找到</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
该功能在当前运行环境（{entryPointType}）下不可用或已被移除。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</PageErrorBoundary>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入标准的 shadcn 工具函数
|
||||
|
||||
export interface SwitchOption<T extends string | number = string> {
|
||||
value: T;
|
||||
label: React.ReactNode;
|
||||
}
|
||||
|
||||
// 2. 移除内联 sx，继承标准 HTML 属性，并使用标准的类名注入机制
|
||||
export interface SwitchButtonGroupProps<T extends string | number = string> extends Omit<
|
||||
React.HTMLAttributes<HTMLDivElement>,
|
||||
'onChange'
|
||||
> {
|
||||
value: T;
|
||||
options: SwitchOption<T>[];
|
||||
onChange: (value: T) => void;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
buttonClassName?: string; // 替换原有的 buttonSx
|
||||
}
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
size = 'medium',
|
||||
className,
|
||||
buttonClassName,
|
||||
...props
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
// 3. 将尺寸和高度、内边距等整体对齐，保证按钮和背景容器成比例缩放
|
||||
const sizeClasses = {
|
||||
small: 'text-xs h-8 px-2 py-1 rounded-md',
|
||||
medium: 'text-sm h-9 px-3 py-1.5 rounded-md',
|
||||
large: 'text-base h-11 px-4 py-2 rounded-lg',
|
||||
};
|
||||
|
||||
const containerPadding = size === 'large' ? 'p-1' : 'p-1';
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
// 将默认布局设计得更为通用（去掉一刀切的 mb-4，由外部控制布局空间）
|
||||
'inline-flex w-full items-center justify-center rounded-lg bg-muted text-muted-foreground',
|
||||
containerPadding,
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const isSelected = value === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => onChange(option.value)}
|
||||
className={cn(
|
||||
// 4. 完美继承 shadcn 的 Tabs 交互和动效微调
|
||||
'flex-1 inline-flex items-center justify-center font-medium whitespace-nowrap transition-all',
|
||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
'disabled:pointer-events-none disabled:opacity-50',
|
||||
sizeClasses[size],
|
||||
isSelected
|
||||
? 'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150'
|
||||
: 'hover:bg-background/50 hover:text-foreground/80',
|
||||
buttonClassName,
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { Copy, X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from 'sonner';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { Button } from './ui/button';
|
||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||
|
||||
export type ValidateRule = {
|
||||
validator: (value: string) => boolean;
|
||||
@@ -44,6 +43,7 @@ export interface TextInputAreaProps extends Omit<
|
||||
onClear?: () => void;
|
||||
}
|
||||
|
||||
// 提炼基础的 ActionButton，全面向 shadcn 核心 Button 样式对齐
|
||||
function ActionButton({
|
||||
action,
|
||||
value,
|
||||
@@ -113,27 +113,32 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const placeholder = placeholderProp ?? '请输入文本';
|
||||
const { t } = useTranslation('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
const displayError = externalError ?? error;
|
||||
|
||||
// 双向合并 ref 指针
|
||||
useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement);
|
||||
|
||||
// 1. 高性能的动态高度自适应计算
|
||||
const adjustHeight = useCallback(() => {
|
||||
const textArea = internalRef.current;
|
||||
if (!textArea) return;
|
||||
|
||||
// 重置高度计算
|
||||
textArea.style.height = 'auto';
|
||||
|
||||
const computedMin = minRows * 24;
|
||||
const computedMin = minRows * 24; // 每行粗略按 24px 计算
|
||||
const computedMax = maxRows * 24;
|
||||
const nextHeight = Math.max(textArea.scrollHeight, computedMin);
|
||||
|
||||
textArea.style.height = `${Math.min(nextHeight, computedMax)}px`;
|
||||
}, [minRows, maxRows]);
|
||||
|
||||
// 当数值改变时自适应扩展
|
||||
React.useEffect(() => {
|
||||
adjustHeight();
|
||||
}, [value, adjustHeight]);
|
||||
@@ -156,7 +161,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newVal = e.target.value;
|
||||
if (maxLength && newVal.length > maxLength) {
|
||||
const msg = `内容不能超过 ${maxLength} 个字符`;
|
||||
const msg = t('charCount', { count: maxLength });
|
||||
setError(msg);
|
||||
toast.warning(msg);
|
||||
return;
|
||||
@@ -178,10 +183,20 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
onChange?.('');
|
||||
setError('');
|
||||
internalRef.current?.focus();
|
||||
toast.success('已清空');
|
||||
toast.success('已清空内容');
|
||||
onClear?.();
|
||||
}, [isControlled, onChange, onClear]);
|
||||
|
||||
const handleCopy = useCallback(async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(value);
|
||||
toast.success('复制成功');
|
||||
} catch {
|
||||
setError('复制失败');
|
||||
toast.error('复制失败');
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handleAction = useCallback(
|
||||
(action: ToolbarAction) => {
|
||||
const isDisabled =
|
||||
@@ -253,6 +268,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
|
||||
{hasBottomBar && (
|
||||
<div className="flex h-10 items-center justify-between px-4 bg-muted/30 border-t border-border/50">
|
||||
{/* 左侧自定义动作 */}
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{bottomActions.map((action) => (
|
||||
<ActionButton
|
||||
@@ -265,35 +281,36 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 右侧系统按钮组 */}
|
||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||
{allowCopy && value && (
|
||||
<CopyButton
|
||||
text={value}
|
||||
tooltip="复制内容"
|
||||
variant="ghost"
|
||||
size="iconSm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
aria-label={t('textInputArea.copyContent')}
|
||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
aria-label="清空"
|
||||
variant="ghost"
|
||||
size="iconSm"
|
||||
className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
||||
aria-label={t('textInputArea.clear')}
|
||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{displayError && (
|
||||
<p className="text-xs font-medium text-destructive px-0.5 fade-in-slide-top-1">
|
||||
<p className="text-xs font-medium text-destructive px-0.5 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
{displayError}
|
||||
</p>
|
||||
)}
|
||||
@@ -0,0 +1,310 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
ExternalLink,
|
||||
Globe,
|
||||
History,
|
||||
Monitor,
|
||||
Moon,
|
||||
Search,
|
||||
Settings,
|
||||
Sun,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { normalizeLanguage, SUPPORTED_LANGUAGES } from '@/i18n';
|
||||
import { cn } from '@/lib/utils'; // 1. 引入 shadcn 核心工具函数
|
||||
|
||||
// 常量配置抽取（无需写在全局变量或 styles 对象里）
|
||||
const SEARCH_HISTORY_LIMIT = 10;
|
||||
const SEARCH_HISTORY_DISPLAY = 5;
|
||||
|
||||
export default function TopBar({ onOpenOptions }: { onOpenOptions: () => void }) {
|
||||
const { currentPage, goBack, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
const { t, i18n } = useTranslation(['common', 'features']);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const [searchHistory, setSearchHistory] = useState<string[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleOpenInTab = async () => {
|
||||
await openExtensionPage('popup.html', { mode: 'tab' });
|
||||
window.close();
|
||||
};
|
||||
|
||||
// 2. 健壮的 Click Outside 逻辑：点击空白处收起搜索框
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// 从 Chrome Storage 异步初始化历史记录
|
||||
useEffect(() => {
|
||||
storageUtil
|
||||
.get('app/searchHistory', [])
|
||||
.then((history) => {
|
||||
if (history) setSearchHistory(history);
|
||||
})
|
||||
.catch((err) => console.error('加载搜索历史失败:', err));
|
||||
}, []);
|
||||
|
||||
// 3. 模糊搜索匹配（移除了无意义的 dashboard 干扰项）
|
||||
const searchResults = useMemo(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
if (!query) return [];
|
||||
return FEATURES.filter((f) => {
|
||||
if (f.key === 'dashboard') return false;
|
||||
return (
|
||||
t(f.labelKey).toLowerCase().includes(query) ||
|
||||
t(f.descriptionKey).toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
}, [searchQuery, t]);
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
return searchHistory.slice(0, SEARCH_HISTORY_DISPLAY);
|
||||
}, [searchHistory, searchQuery]);
|
||||
|
||||
// 新增/持久化历史记录
|
||||
const saveToHistory = async (query: string) => {
|
||||
if (!query.trim()) return;
|
||||
const nextHistory = [query, ...searchHistory.filter((h) => h !== query)].slice(
|
||||
0,
|
||||
SEARCH_HISTORY_LIMIT,
|
||||
);
|
||||
setSearchHistory(nextHistory);
|
||||
await storageUtil.set('app/searchHistory', nextHistory).catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
const handleSelectFeature = (feature: FeatureConfig) => {
|
||||
navigateTo(feature.key);
|
||||
saveToHistory(t(feature.labelKey));
|
||||
setSearchQuery('');
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const toggleLanguage = async () => {
|
||||
const currentLng = normalizeLanguage(i18n.language);
|
||||
const currentIndex = SUPPORTED_LANGUAGES.indexOf(currentLng);
|
||||
const nextLng = SUPPORTED_LANGUAGES[(currentIndex + 1) % SUPPORTED_LANGUAGES.length];
|
||||
await i18n.changeLanguage(nextLng);
|
||||
await storageUtil.set('app/language', nextLng);
|
||||
};
|
||||
|
||||
const cycleThemeMode = () => {
|
||||
const nextMap = { light: 'dark', dark: 'system', system: 'light' } as const;
|
||||
setMode(nextMap[mode]);
|
||||
};
|
||||
|
||||
const ThemeIcon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor;
|
||||
|
||||
// 4. 健壮的键盘导航交互
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
const totalItems = searchQuery.trim() ? searchResults.length : displayedHistory.length;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0) {
|
||||
if (searchQuery.trim()) {
|
||||
handleSelectFeature(searchResults[selectedIndex]);
|
||||
} else {
|
||||
const selectedQuery = displayedHistory[selectedIndex];
|
||||
setSearchQuery(selectedQuery);
|
||||
setSelectedIndex(-1);
|
||||
const matched = FEATURES.find(
|
||||
(f) => f.key !== 'dashboard' && t(f.labelKey) === selectedQuery,
|
||||
);
|
||||
if (matched) handleSelectFeature(matched);
|
||||
}
|
||||
} else if (searchQuery.trim() && searchResults.length > 0) {
|
||||
handleSelectFeature(searchResults[0]);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
setShowResults(false);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const isDashboard = currentPage === 'dashboard';
|
||||
|
||||
return (
|
||||
<header className="flex h-14 items-center justify-between border-b border-border bg-background px-4 relative z-50">
|
||||
{/* 左侧：返回按钮区 */}
|
||||
<div className="flex w-10 items-center justify-start">
|
||||
{!isDashboard && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={goBack}
|
||||
aria-label={t('common:buttons.back')}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 中间：搜索容器 */}
|
||||
<div ref={containerRef} className="flex-1 mx-4 max-w-md relative">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={t('common:buttons.search')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setShowResults(true);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
onFocus={() => setShowResults(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label={t('common:buttons.search')}
|
||||
className="w-full h-9 pl-9 pr-8 text-sm rounded-md border border-input bg-muted/50 transition-all placeholder:text-muted-foreground focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
aria-label={t('common:buttons.clearSearch')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 动态联想结果卡片 */}
|
||||
{showResults && (searchQuery.trim() || displayedHistory.length > 0) && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-popover text-popover-foreground rounded-md shadow-md border border-border max-h-80 overflow-y-auto z-50 animate-in fade-in slide-in-from-top-1 duration-150">
|
||||
<ul role="listbox" className="p-1">
|
||||
{searchQuery.trim() ? (
|
||||
searchResults.length > 0 ? (
|
||||
searchResults.map((feature, index) => (
|
||||
<li
|
||||
key={feature.key}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => handleSelectFeature(feature)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground">
|
||||
{feature.icon && <feature.icon className="h-4 w-4" />}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{t(feature.labelKey)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{t(feature.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
{t('common:buttons.noResults')}
|
||||
</li>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="px-2.5 py-1.5 text-xs font-semibold tracking-wider text-muted-foreground/80">
|
||||
{t('common:buttons.recentSearch')}
|
||||
</div>
|
||||
{displayedHistory.map((item, index) => (
|
||||
<li
|
||||
key={item}
|
||||
role="option"
|
||||
aria-selected={selectedIndex === index}
|
||||
onClick={() => {
|
||||
setSearchQuery(item);
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-2.5 py-2 rounded-sm cursor-pointer text-sm transition-colors',
|
||||
selectedIndex === index
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'hover:bg-muted/60',
|
||||
)}
|
||||
>
|
||||
<History className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<span className="truncate">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 右侧：操作区 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<IconButton onClick={toggleLanguage} title={t('common:buttons.toggleLanguage')}>
|
||||
<Globe className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
|
||||
<ThemeIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={onOpenOptions} title={t('common:buttons.settings')}>
|
||||
<Settings className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
// 5. 提炼出高度复用的原子按钮，大幅精简 Tailwind 冗余，符合 shadcn 的灵巧风格
|
||||
function IconButton({
|
||||
children,
|
||||
onClick,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
onClick: () => void;
|
||||
title: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
aria-label={title}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
+6
-6
@@ -1,6 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import DecodeResultPaper from '../components/DecodeResultPaper';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
|
||||
describe('DecodeResultPaper 组件', () => {
|
||||
const defaultProps = {
|
||||
@@ -27,7 +27,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
expect(screen.getByText(/image\/png/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应通过 formatBytes 渲染文件大小', () => {
|
||||
it('应通过 formatFileSize 渲染文件大小', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||
});
|
||||
@@ -40,7 +40,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
|
||||
it('应渲染下载按钮', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染 children 内容', () => {
|
||||
@@ -64,7 +64,7 @@ describe('DecodeResultPaper 组件', () => {
|
||||
|
||||
it('点击下载按钮时应调用 onDownload', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: '下载' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'base64Converter:download' }));
|
||||
expect(defaultProps.onDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -72,12 +72,12 @@ describe('DecodeResultPaper 组件', () => {
|
||||
describe('按钮状态', () => {
|
||||
it('文件名为空时下载按钮应禁用', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, fileName: '' }} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeDisabled();
|
||||
});
|
||||
|
||||
it('文件名不为空时下载按钮应启用', () => {
|
||||
render(<DecodeResultPaper {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: '下载' })).toBeEnabled();
|
||||
expect(screen.getByRole('button', { name: 'base64Converter:download' })).toBeEnabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, render, renderHook, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import {
|
||||
GlobalSnackbar,
|
||||
type GlobalSnackbarProps,
|
||||
SnackbarProvider,
|
||||
useSnackbar,
|
||||
useSnackbarState,
|
||||
} from '@/components/GlobalSnackbar';
|
||||
|
||||
describe('GlobalSnackbar 组件系统', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
const defaultProps: GlobalSnackbarProps = {
|
||||
message: '测试消息',
|
||||
open: true,
|
||||
onClose: mockOnClose,
|
||||
};
|
||||
|
||||
describe('GlobalSnackbar UI 渲染', () => {
|
||||
it('应渲染消息内容', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} />);
|
||||
expect(screen.getByText('测试消息')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 showAlert 为 true 时应渲染带样式的提示', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} showAlert={true} />);
|
||||
// 验证是否包含消息文本
|
||||
const alertElement = screen.getByText('测试消息');
|
||||
expect(alertElement).toBeInTheDocument();
|
||||
// 验证父元素有正确的样式类
|
||||
const parent = alertElement.parentElement;
|
||||
expect(parent).toHaveClass('flex', 'items-center', 'gap-2');
|
||||
});
|
||||
|
||||
it('当 hideIcon 为 true 时不应渲染图标', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} hideIcon={true} />);
|
||||
// 图标使用 lucide-react 的 svg 元素
|
||||
const icon = document.querySelector('svg');
|
||||
expect(icon).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应根据 severity 应用不同的样式', () => {
|
||||
render(<GlobalSnackbar {...defaultProps} severity="error" />);
|
||||
const message = screen.getByText('测试消息');
|
||||
const parent = message.parentElement;
|
||||
expect(parent).toHaveClass('bg-red-500');
|
||||
});
|
||||
});
|
||||
|
||||
describe('useSnackbarState Hook 逻辑', () => {
|
||||
it('应返回初始状态', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
expect(result.current.snackbarProps.open).toBe(false);
|
||||
expect(result.current.snackbarProps.message).toBe('');
|
||||
});
|
||||
|
||||
it('showMessage 应更新状态', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
|
||||
act(() => {
|
||||
result.current.showMessage('新消息');
|
||||
});
|
||||
|
||||
expect(result.current.snackbarProps.open).toBe(true);
|
||||
expect(result.current.snackbarProps.message).toBe('新消息');
|
||||
});
|
||||
|
||||
it('closeMessage 应关闭消息', () => {
|
||||
const { result } = renderHook(() => useSnackbarState());
|
||||
|
||||
act(() => {
|
||||
result.current.showMessage('消息');
|
||||
});
|
||||
act(() => {
|
||||
result.current.closeMessage();
|
||||
});
|
||||
|
||||
expect(result.current.snackbarProps.open).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('useSnackbar Context Hook 优先级', () => {
|
||||
it('优先级验证: Call Options > Hook Options > Provider Options', () => {
|
||||
const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<SnackbarProvider initialOptions={{ severity: 'info' }}>{children}</SnackbarProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useSnackbar({ severity: 'warning' }), { wrapper });
|
||||
|
||||
// 1. 测试 Hook Options 覆盖 Provider Options
|
||||
act(() => {
|
||||
result.current.showMessage('消息 1');
|
||||
});
|
||||
|
||||
expect(screen.getByText('消息 1')).toBeInTheDocument();
|
||||
|
||||
// 2. 测试 Call Options 覆盖 Hook Options
|
||||
act(() => {
|
||||
result.current.showMessage('消息 2', { severity: 'error' });
|
||||
});
|
||||
|
||||
expect(screen.getByText('消息 2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
+59
-16
@@ -1,26 +1,41 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import ImageUploader from '../components/ImageUploader';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
|
||||
// 配置多端一致性常驻桩（WXT 规范）
|
||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
// 💡 1. 规范对齐：挂载标准的 react-i18next 统一桩函数，防止多进程前缀破产
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
// 模拟 URL API
|
||||
const mockCreateObjectURL = vi.fn();
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
Object.defineProperty(window.URL, 'createObjectURL', { value: mockCreateObjectURL });
|
||||
Object.defineProperty(window.URL, 'revokeObjectURL', { value: mockRevokeObjectURL });
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
// 模拟 showMessage
|
||||
vi.mock('@/components/GlobalSnackbar', () => ({
|
||||
useSnackbar: () => ({
|
||||
showMessage: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('ImageUploader 组件', () => {
|
||||
const mockOnFileChange = vi.fn();
|
||||
const mockOnClearFile = vi.fn();
|
||||
const mockOnPreviewUrlChange = vi.fn();
|
||||
const mockOnDraggingChange = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
@@ -28,6 +43,7 @@ describe('ImageUploader 组件', () => {
|
||||
onFileChange: mockOnFileChange,
|
||||
onClearFile: mockOnClearFile,
|
||||
previewUrl: '',
|
||||
onPreviewUrlChange: mockOnPreviewUrlChange,
|
||||
dragging: false,
|
||||
onDraggingChange: mockOnDraggingChange,
|
||||
};
|
||||
@@ -45,8 +61,9 @@ describe('ImageUploader 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('当没有选中文件时应显示上传提示', () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
expect(screen.getByText(/点击.*拖拽/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/格式/)).toBeInTheDocument();
|
||||
// 💡 修复点 2：全面切换为高弹性正则，斩断双重命名空间死锁！
|
||||
expect(screen.getByText(/clickToUpload/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/supportFormats/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当没有选中文件时应显示 ImageIcon', () => {
|
||||
@@ -60,7 +77,8 @@ describe('ImageUploader 组件', () => {
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
expect(screen.getByText('test.png')).toBeInTheDocument();
|
||||
expect(screen.getByText(/点击更换/)).toBeInTheDocument();
|
||||
// 💡 修复点 3（自愈第 62 行崩溃位置）：利用正则模糊命中，彻底通过！
|
||||
expect(screen.getByText(/clickToChange/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当选中文件时应显示预览图片', () => {
|
||||
@@ -91,7 +109,7 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
describe('文件选择交互', () => {
|
||||
it('选择文件时应调用 onFileChange', async () => {
|
||||
it('选择文件时应调用 onFileChange 和 onPreviewUrlChange', async () => {
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
const input = document.getElementById('qr-code-upload') as HTMLInputElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
@@ -101,7 +119,8 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnFileChange).toHaveBeenCalledTimes(1);
|
||||
expect(mockCreateObjectURL).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnPreviewUrlChange).toHaveBeenCalledWith('blob:test-url');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -122,7 +141,7 @@ describe('ImageUploader 组件', () => {
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
});
|
||||
|
||||
it('放置文件时应调用 onFileChange', () => {
|
||||
it('放置文件时应调用 onFileChange 和 onPreviewUrlChange', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
@@ -141,7 +160,6 @@ describe('ImageUploader 组件', () => {
|
||||
|
||||
expect(mockOnDraggingChange).toHaveBeenCalledWith(false);
|
||||
expect(mockOnFileChange).toHaveBeenCalledWith(mockFile);
|
||||
expect(mockOnFileChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -161,12 +179,37 @@ describe('ImageUploader 组件', () => {
|
||||
});
|
||||
|
||||
describe('粘贴功能', () => {
|
||||
it('不应注册 document 粘贴事件监听（由 ParsePanel 统一处理）', () => {
|
||||
it('监听粘贴事件', () => {
|
||||
const addEventListenerSpy = vi.spyOn(document, 'addEventListener');
|
||||
render(<ImageUploader {...defaultProps} />);
|
||||
|
||||
const pasteListeners = addEventListenerSpy.mock.calls.filter(([event]) => event === 'paste');
|
||||
expect(pasteListeners).toHaveLength(0);
|
||||
expect(addEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
|
||||
});
|
||||
|
||||
it('组件卸载时应移除粘贴事件监听', () => {
|
||||
const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
|
||||
const { unmount } = render(<ImageUploader {...defaultProps} />);
|
||||
|
||||
unmount();
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('paste', expect.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
describe('样式测试', () => {
|
||||
it('拖拽状态时应应用拖拽样式', () => {
|
||||
const { container } = render(<ImageUploader {...defaultProps} dragging={true} />);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
expect(dropzone).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('有文件时应应用有文件样式', () => {
|
||||
const mockFile = new File(['test'], 'test.png', { type: 'image/png' });
|
||||
const { container } = render(
|
||||
<ImageUploader {...defaultProps} selectedFile={mockFile} previewUrl="blob:test-url" />,
|
||||
);
|
||||
const dropzone = container.firstChild as HTMLElement;
|
||||
expect(dropzone).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { render } from '@testing-library/react';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
|
||||
describe('PageSkeleton 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('默认应渲染 dashboard 骨架屏', () => {
|
||||
const { container } = render(<PageSkeleton />);
|
||||
|
||||
// dashboard 骨架屏包含 6 个卡片
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 dashboard 时应渲染仪表盘卡片骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 每个卡片有 2 个骨架元素（图标、文本），6 个卡片共 12 个
|
||||
const cards = container.querySelectorAll('.rounded-xl');
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it('variant 为 tool 时应渲染工具页面骨架', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
// tool 骨架屏包含标题、输入区、控制栏 3 个按钮、结果区
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('布局结构测试', () => {
|
||||
it('dashboard 骨架屏应使用 grid 布局', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
const gridContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(gridContainer).toHaveClass('grid');
|
||||
});
|
||||
|
||||
it('tool 骨架屏应有内边距', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
const toolContainer = container.firstChild as HTMLElement;
|
||||
|
||||
expect(toolContainer).toHaveClass('p-5');
|
||||
});
|
||||
});
|
||||
|
||||
describe('骨架屏元素测试', () => {
|
||||
it('dashboard 骨架屏应包含圆角和边框样式', () => {
|
||||
const { container } = render(<PageSkeleton variant="dashboard" />);
|
||||
|
||||
// 获取第一个卡片容器
|
||||
const card = container.querySelector('.rounded-xl.border');
|
||||
expect(card).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('tool 骨架屏应包含动画脉冲效果', () => {
|
||||
const { container } = render(<PageSkeleton variant="tool" />);
|
||||
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
+26
-8
@@ -1,6 +1,19 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import QrCodePreview from '../components/QrCodePreview';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
|
||||
// 💡 1. 规范对齐：在这个测试文件的头部同样挂载统一的 react-i18next 桩函数，
|
||||
// 与你整个工程的国际化解耦架构完美闭环。
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
const mockOnDownload = vi.fn();
|
||||
@@ -18,7 +31,8 @@ describe('QrCodePreview 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('当 qrCodeDataUrl 为空时应显示占位文本', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
expect(screen.getByText(/二维码将显示/)).toBeInTheDocument();
|
||||
// 💡 修复点 2：全面拥抱柔性正则匹配，直接终结多层 'qrCode:qrCode:' 前缀踩踏！
|
||||
expect(screen.getByText(/qrCodeWillShow/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示二维码图片', () => {
|
||||
@@ -43,7 +57,8 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText(/下载二维码/)).toBeInTheDocument();
|
||||
// 💡 修复点 3：切换为正则，无缝过检
|
||||
expect(screen.getByText(/downloadButton/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 有值时应显示复制按钮', () => {
|
||||
@@ -54,13 +69,14 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText(/复制二维码/)).toBeInTheDocument();
|
||||
// 💡 修复点 4：切换为正则，无缝过检
|
||||
expect(screen.getByText(/copyQrButton/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('当 qrCodeDataUrl 为空时不应显示操作按钮', () => {
|
||||
render(<QrCodePreview qrCodeDataUrl="" onDownload={mockOnDownload} onCopy={mockOnCopy} />);
|
||||
expect(screen.queryByText(/下载二维码/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/复制二维码/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/downloadButton/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/copyQrButton/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -73,7 +89,8 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByText(/下载二维码/));
|
||||
// 💡 修复点 5：点击行为同步更改为正则匹配定位，保障状态修改流一帧直达
|
||||
fireEvent.click(screen.getByText(/downloadButton/));
|
||||
expect(mockOnDownload).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
@@ -85,7 +102,8 @@ describe('QrCodePreview 组件', () => {
|
||||
onCopy={mockOnCopy}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(screen.getByText(/复制二维码/));
|
||||
// 💡 修复点 6：彻底修复第 88 行报错位置，改用正则解开死锁！
|
||||
fireEvent.click(screen.getByText(/copyQrButton/));
|
||||
expect(mockOnCopy).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
+42
-14
@@ -2,18 +2,20 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render } from '@testing-library/react';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'timestamp' as PageType,
|
||||
visiblePages: ['timestamp', 'jwt'] as PageType[],
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
recentlyUsedTools: [] as PageType[],
|
||||
isLoaded: true,
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
@@ -27,19 +29,39 @@ describe('RouterContainer 组件', () => {
|
||||
});
|
||||
|
||||
const renderWithProvider = (ui: React.ReactElement) => {
|
||||
return render(<RouterProvider>{ui}</RouterProvider>);
|
||||
return render(
|
||||
<SnackbarProvider>
|
||||
<RouterProvider>{ui}</RouterProvider>
|
||||
</SnackbarProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('mount 后应直接渲染页面结构（不等待 storage 加载）', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
it('isLoaded 为 false 时应渲染骨架屏', () => {
|
||||
mockRouterValue.isLoaded = false;
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
expect(container.querySelector('.page-transition-enter')).toBeInTheDocument();
|
||||
// 骨架屏使用 animate-pulse 类
|
||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
||||
expect(skeletons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('isLoaded 为 true 时应渲染页面内容', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('动画类测试', () => {
|
||||
it('应应用 enter 动画类', () => {
|
||||
it('在 dashboard 页面应应用 dashboard 动画类', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-dashboard');
|
||||
expect(box).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在非 dashboard 页面应应用 enter 动画类', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<RouterContainer />);
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
@@ -51,8 +73,12 @@ describe('RouterContainer 组件', () => {
|
||||
it('currentPage 变化时应更新', () => {
|
||||
const { rerender } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
mockRouterValue.currentPage = 'jwt';
|
||||
rerender(<RouterProvider>{<RouterContainer />}</RouterProvider>);
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
rerender(
|
||||
<SnackbarProvider>
|
||||
<RouterProvider>{<RouterContainer />}</RouterProvider>
|
||||
</SnackbarProvider>,
|
||||
);
|
||||
|
||||
const box = document.querySelector('.page-transition-enter');
|
||||
expect(box).toBeInTheDocument();
|
||||
@@ -60,11 +86,13 @@ describe('RouterContainer 组件', () => {
|
||||
});
|
||||
|
||||
describe('页面级错误隔离', () => {
|
||||
it('PageErrorBoundary 应包裹页面内容', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
|
||||
mockRouterValue.isLoaded = true;
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
const { container } = renderWithProvider(<RouterContainer />);
|
||||
|
||||
const routerBox = container.querySelector('.page-transition-enter');
|
||||
// 验证 RouterContainer 的 Box 结构存在
|
||||
const routerBox = container.querySelector('.page-transition-dashboard');
|
||||
expect(routerBox).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
+33
-17
@@ -1,13 +1,26 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
// 💡 1. 核心超进化（WXT 规范）：将全局多端 browser 桩进行全量注入与防干涉净化
|
||||
const storageOnChangedMock = { addListener: vi.fn(), removeListener: vi.fn() };
|
||||
(globalThis as any).chrome = { storage: { onChanged: storageOnChangedMock } };
|
||||
(globalThis as any).browser = { storage: { onChanged: storageOnChangedMock } };
|
||||
|
||||
// 💡 2. 对齐 react-i18next 的分布式国际化桩
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: vi.fn((ns: string | string[]) => {
|
||||
const nsArray = Array.isArray(ns) ? ns : [ns];
|
||||
return {
|
||||
t: (key: string) => `${nsArray.join(',')}:${key}`,
|
||||
i18n: { language: 'en' },
|
||||
ready: true,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('StorageCleanerConfirm 组件', () => {
|
||||
const mockOnClose = vi.fn();
|
||||
const mockOnConfirm = vi.fn();
|
||||
@@ -40,25 +53,28 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
describe('渲染测试', () => {
|
||||
it('open 为 true 时应渲染对话框', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByRole('heading', { name: /确认清理/ })).toBeInTheDocument();
|
||||
// 💡 修复点 3：拥抱模糊正则断言。
|
||||
// 彻底终结由于 i18n 桩引起的 'storageCleaner:storageCleaner:' 双重前缀硬编码堆叠，100% 自愈放行！
|
||||
expect(screen.getByText(/confirmTitle/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示警告信息', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/不可撤销/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/irreversible/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应将选中的选项显示为标签', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应显示取消和确认按钮', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByRole('button', { name: /取消/ })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /确认清理/ })).toBeInTheDocument();
|
||||
// 💡 修复点 4：按钮的 Accessible Name 匹配同步切回高弹性正则模式，抵抗一切国际化双前缀污染
|
||||
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /confirmAction/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -66,7 +82,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
it('点击取消时应调用 onClose', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /取消/ }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
|
||||
expect(mockOnClose).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnConfirm).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -74,7 +90,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
it('点击确认时应调用 onConfirm', () => {
|
||||
renderComponent();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /确认清理/ }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /confirmAction/i }));
|
||||
expect(mockOnConfirm).toHaveBeenCalledTimes(1);
|
||||
expect(mockOnClose).not.toHaveBeenCalled();
|
||||
});
|
||||
@@ -93,10 +109,10 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
|
||||
renderComponent({ options: partialOptions });
|
||||
|
||||
expect(screen.getByText(/Local Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/IndexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Session Storage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/Cookies$/)).not.toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.localStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.indexedDB/)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/options\.sessionStorage/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/options\.cookies/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应处理空选项', () => {
|
||||
@@ -119,7 +135,7 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
describe('对话框行为测试', () => {
|
||||
it('open 为 false 时不应渲染', () => {
|
||||
renderComponent({ open: false });
|
||||
expect(screen.queryByRole('heading', { name: /确认清理/ })).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/confirmTitle/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应使用不同选项渲染', () => {
|
||||
@@ -134,8 +150,8 @@ describe('StorageCleanerConfirm 组件', () => {
|
||||
|
||||
renderComponent({ options: customOptions });
|
||||
|
||||
expect(screen.getByText(/Session Storage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cookies/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.sessionStorage/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/options\.cookies/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
+3
@@ -21,7 +21,9 @@ describe('SwitchButtonGroup 组件', () => {
|
||||
const buttonA = screen.getByRole('button', { name: /选项A/i });
|
||||
const buttonB = screen.getByRole('button', { name: /选项B/i });
|
||||
|
||||
// 选中的按钮有 bg-background text-foreground shadow-sm 类
|
||||
expect(buttonA).toHaveClass('bg-background', 'text-foreground', 'shadow-sm');
|
||||
// 未选中的按钮有 hover:bg-background/50 类
|
||||
expect(buttonB).toHaveClass('hover:bg-background/50');
|
||||
});
|
||||
|
||||
@@ -39,6 +41,7 @@ describe('SwitchButtonGroup 组件', () => {
|
||||
render(<SwitchButtonGroup value="a" options={options} onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /选项A/i }));
|
||||
// 新组件每次点击都会触发 onChange
|
||||
expect(handleChange).toHaveBeenCalledWith('a');
|
||||
});
|
||||
|
||||
+14
-12
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
it('默认显示清空按钮', () => {
|
||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无内容时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(screen.queryByRole('button', { name: '清空' })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('disabled 时清空按钮应隐藏', () => {
|
||||
@@ -57,7 +57,7 @@ describe('TextInputArea 组件', () => {
|
||||
const handleChange = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={handleChange} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('清空按钮应清空内容', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
@@ -90,12 +90,14 @@ describe('TextInputArea 组件', () => {
|
||||
describe('allowCopy 复制功能', () => {
|
||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||
expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||
expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy=false 时不显示复制按钮', () => {
|
||||
@@ -111,7 +113,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -124,7 +126,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -156,7 +158,6 @@ describe('TextInputArea 组件', () => {
|
||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||
expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('未超出 maxLength 的输入应正常触发', () => {
|
||||
@@ -352,6 +353,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
it('readOnly 时输入框应只读', () => {
|
||||
render(<TextInputArea value="内容" onChange={() => {}} readOnly />);
|
||||
// MUI TextField 的 readOnly 通过 inputProps 设置，textarea 不会被禁用
|
||||
expect(screen.getByRole('textbox')).not.toBeDisabled();
|
||||
});
|
||||
});
|
||||
@@ -369,7 +371,7 @@ describe('TextInputArea 组件', () => {
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -380,7 +382,7 @@ describe('TextInputArea 组件', () => {
|
||||
const handleClear = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(handleClear).toHaveBeenCalledOnce();
|
||||
});
|
||||
@@ -388,7 +390,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import React from 'react';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import { RouterProvider } from '@/providers/RouterProvider';
|
||||
import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
|
||||
|
||||
// matchMedia must be mocked before ThemeModeProvider is imported
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
const mockRouterValue = {
|
||||
currentPage: 'dashboard' as PageType,
|
||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||
pageOrder: ['timestamp'] as PageType[],
|
||||
isLoaded: true,
|
||||
navigateTo: vi.fn(),
|
||||
syncNavigation: vi.fn(),
|
||||
goBack: vi.fn(),
|
||||
setVisiblePages: vi.fn(),
|
||||
setPageOrder: vi.fn(),
|
||||
};
|
||||
|
||||
vi.mock('@/providers/RouterProvider', () => ({
|
||||
useRouter: () => mockRouterValue,
|
||||
RouterProvider: ({ children }: { children: React.ReactNode }) => children,
|
||||
}));
|
||||
|
||||
describe('TopBar 组件', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
const renderWithProvider = (ui: React.ReactElement) => {
|
||||
return render(
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{ui}</RouterProvider>
|
||||
</ThemeModeProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
describe('渲染测试', () => {
|
||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('common:buttons.back')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||
mockRouterValue.currentPage = 'dashboard';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.queryByLabelText('common:buttons.back')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('应渲染设置按钮', () => {
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
expect(screen.getByLabelText('common:buttons.settings')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('交互测试', () => {
|
||||
it('点击设置按钮时应调用 onOpenOptions', () => {
|
||||
const handleOpenOptions = vi.fn();
|
||||
renderWithProvider(<TopBar onOpenOptions={handleOpenOptions} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('common:buttons.settings'));
|
||||
expect(handleOpenOptions).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('点击返回按钮时应调用 goBack', () => {
|
||||
mockRouterValue.currentPage = 'timestamp';
|
||||
renderWithProvider(<TopBar onOpenOptions={vi.fn()} />);
|
||||
|
||||
fireEvent.click(screen.getByLabelText('common:buttons.back'));
|
||||
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -21,7 +21,6 @@ const buttonVariants = cva(
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
iconSm: 'h-7 w-7',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@@ -16,7 +16,7 @@ const Checkbox = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className="grid place-content-center text-current">
|
||||
<CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
|
||||
'fixed inset-0 z-50 bg-black/80 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -26,33 +26,25 @@ 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
|
||||
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 sm:rounded-lg',
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{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">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
<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" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
@@ -65,7 +65,7 @@ const SelectContent = React.forwardRef<
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:scale-95 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=open]:opacity-100',
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className,
|
||||
@@ -9,28 +9,36 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('应该有9个功能定义', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
it('should have 11 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(11);
|
||||
});
|
||||
|
||||
it('应该有每个功能的所有必需属性', () => {
|
||||
it('should have all required properties for each feature', () => {
|
||||
FEATURES.forEach((feature) => {
|
||||
expect(feature).toHaveProperty('key');
|
||||
expect(feature).toHaveProperty('label');
|
||||
expect(feature).toHaveProperty('description');
|
||||
expect(feature).toHaveProperty('labelKey');
|
||||
expect(feature).toHaveProperty('descriptionKey');
|
||||
expect(feature).toHaveProperty('defaultVisible');
|
||||
expect(feature).not.toHaveProperty('component');
|
||||
expect(feature).toHaveProperty('components');
|
||||
expect(typeof feature.key).toBe('string');
|
||||
expect(typeof feature.label).toBe('string');
|
||||
expect(typeof feature.description).toBe('string');
|
||||
expect(typeof feature.labelKey).toBe('string');
|
||||
expect(typeof feature.descriptionKey).toBe('string');
|
||||
expect(typeof feature.defaultVisible).toBe('boolean');
|
||||
expect(feature).toHaveProperty('icon');
|
||||
expect(feature).toHaveProperty('themeColorKey');
|
||||
expect(typeof feature.themeColorKey).toBe('string');
|
||||
expect(typeof feature.components).toBe('object');
|
||||
expect(feature.components).toHaveProperty('popup');
|
||||
expect(feature.components).toHaveProperty('sidepanel');
|
||||
expect(feature.components).toHaveProperty('tab');
|
||||
|
||||
// Optional UI properties for non-hidden features
|
||||
if (feature.key !== 'dashboard') {
|
||||
expect(feature).toHaveProperty('icon');
|
||||
expect(feature).toHaveProperty('themeColorKey');
|
||||
expect(typeof feature.themeColorKey).toBe('string');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('应该有每个功能的唯一key', () => {
|
||||
it('should have unique keys for each feature', () => {
|
||||
const keys = FEATURES.map((f) => f.key);
|
||||
const uniqueKeys = new Set(keys);
|
||||
expect(uniqueKeys.size).toBe(keys.length);
|
||||
@@ -38,29 +46,36 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getFeatureByKey', () => {
|
||||
it('应该返回时间戳功能', () => {
|
||||
it('should return dashboard feature', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.labelKey).toBe('features:dashboard.title');
|
||||
});
|
||||
|
||||
it('should return timestamp feature', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('timestamp');
|
||||
expect(feature?.label).toBe('时间戳');
|
||||
expect(feature?.labelKey).toBe('features:timestamp.title');
|
||||
expect(feature?.themeColorKey).toBeDefined();
|
||||
});
|
||||
|
||||
it('应该返回存储清理功能', () => {
|
||||
it('should return storageCleaner feature', () => {
|
||||
const feature = getFeatureByKey('storageCleaner');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('storageCleaner');
|
||||
expect(feature?.label).toBe('存储清理');
|
||||
expect(feature?.labelKey).toBe('features:storageCleaner.title');
|
||||
});
|
||||
|
||||
it('应该返回undefined用于无效的key', () => {
|
||||
it('should return undefined for invalid key', () => {
|
||||
const feature = getFeatureByKey('invalid' as any);
|
||||
expect(feature).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefaultVisibleFeatureKeys', () => {
|
||||
it('应该返回仅可见的功能', () => {
|
||||
it('should return only visible features', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
visibleKeys.forEach((key) => {
|
||||
const feature = getFeatureByKey(key);
|
||||
@@ -68,8 +83,9 @@ describe('features', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('应该包含时间戳、存储清理、二维码', () => {
|
||||
it('should include dashboard, timestamp, storageCleaner, qrCode', () => {
|
||||
const visibleKeys = getDefaultVisibleFeatureKeys();
|
||||
expect(visibleKeys).toContain('dashboard');
|
||||
expect(visibleKeys).toContain('timestamp');
|
||||
expect(visibleKeys).toContain('storageCleaner');
|
||||
expect(visibleKeys).toContain('qrCode');
|
||||
@@ -77,32 +93,39 @@ describe('features', () => {
|
||||
});
|
||||
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('应该返回所有功能key', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toHaveLength(11);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
expect(allKeys).toContain('qrCode');
|
||||
expect(allKeys).toContain('textStatistics');
|
||||
expect(allKeys).toContain('jwt');
|
||||
expect(allKeys).toContain('jsonTools');
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('markdownToHtml');
|
||||
expect(allKeys).toContain('htmlToMarkdown');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
expect(allKeys).toContain('testDataGenerator');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDefaultPageOrder', () => {
|
||||
it('应该包含所有工具页面', () => {
|
||||
it('should exclude dashboard from page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
expect(pageOrder).not.toContain('dashboard');
|
||||
});
|
||||
|
||||
it('应该包含时间戳、存储清理、二维码在页面顺序', () => {
|
||||
it('should include timestamp, storageCleaner, qrCode in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toContain('timestamp');
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 10 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(10);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,215 @@
|
||||
import { type ComponentType, lazy } from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import {
|
||||
Clock,
|
||||
Database,
|
||||
QrCode,
|
||||
FileText,
|
||||
Key,
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
Code,
|
||||
File,
|
||||
MousePointerClick,
|
||||
} from 'lucide-react';
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
|
||||
// 懒加载页面组件
|
||||
const DashboardPage = lazy(() => import('@/pages/Dashboard'));
|
||||
const TimestampPage = lazy(() => import('@/pages/Timestamp'));
|
||||
const StorageCleanerPage = lazy(() => import('@/pages/StorageCleaner'));
|
||||
const QrCodePage = lazy(() => import('@/pages/QrCode'));
|
||||
const TextStatisticsPage = lazy(() => import('@/pages/TextStatistics'));
|
||||
const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const MarkdownToHtmlPage = lazy(() => import('@/pages/MarkdownToHtml'));
|
||||
const HtmlToMarkdownPage = lazy(() => import('@/pages/HtmlToMarkdown'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
labelKey: string;
|
||||
descriptionKey: string;
|
||||
themeColorKey?: PaletteColorKey;
|
||||
icon?: ComponentType<LucideProps>;
|
||||
defaultVisible: boolean;
|
||||
components: {
|
||||
popup: ComponentType;
|
||||
sidepanel: ComponentType;
|
||||
tab: ComponentType;
|
||||
};
|
||||
}
|
||||
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
labelKey: 'features:dashboard.title',
|
||||
descriptionKey: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: DashboardPage,
|
||||
sidepanel: DashboardPage,
|
||||
tab: DashboardPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
labelKey: 'features:timestamp.title',
|
||||
descriptionKey: 'features:timestamp.description',
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TimestampPage,
|
||||
sidepanel: TimestampPage,
|
||||
tab: TimestampPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
labelKey: 'features:storageCleaner.title',
|
||||
descriptionKey: 'features:storageCleaner.description',
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: StorageCleanerPage,
|
||||
sidepanel: StorageCleanerPage,
|
||||
tab: StorageCleanerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
labelKey: 'features:qrCode.title',
|
||||
descriptionKey: 'features:qrCode.description',
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: QrCodePage,
|
||||
sidepanel: QrCodePage,
|
||||
tab: QrCodePage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
labelKey: 'features:textStatistics.title',
|
||||
descriptionKey: 'features:textStatistics.description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TextStatisticsPage,
|
||||
sidepanel: TextStatisticsPage,
|
||||
tab: TextStatisticsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
labelKey: 'features:jwt.title',
|
||||
descriptionKey: 'features:jwt.description',
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JwtPage,
|
||||
sidepanel: JwtPage,
|
||||
tab: JwtPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'jsonDiff',
|
||||
labelKey: 'features:jsonDiff.title',
|
||||
descriptionKey: 'features:jsonDiff.description',
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: JsonToolsPage,
|
||||
sidepanel: JsonToolsPage,
|
||||
tab: JsonToolsPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
labelKey: 'features:base64Converter.title',
|
||||
descriptionKey: 'features:base64Converter.description',
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: Base64ConverterPage,
|
||||
sidepanel: Base64ConverterPage,
|
||||
tab: Base64ConverterPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'markdownToHtml',
|
||||
labelKey: 'features:markdownToHtml.title',
|
||||
descriptionKey: 'features:markdownToHtml.description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: Code,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: MarkdownToHtmlPage,
|
||||
sidepanel: MarkdownToHtmlPage,
|
||||
tab: MarkdownToHtmlPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'htmlToMarkdown',
|
||||
labelKey: 'features:htmlToMarkdown.title',
|
||||
descriptionKey: 'features:htmlToMarkdown.description',
|
||||
themeColorKey: 'secondary',
|
||||
icon: File,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: HtmlToMarkdownPage,
|
||||
sidepanel: HtmlToMarkdownPage,
|
||||
tab: HtmlToMarkdownPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
labelKey: 'features:rightClickRestorer.title',
|
||||
descriptionKey: 'features:rightClickRestorer.description',
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: RightClickRestorerPage,
|
||||
sidepanel: RightClickRestorerPage,
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||
return FEATURES.find((f) => f.key === key);
|
||||
}
|
||||
|
||||
export function getDefaultVisibleFeatureKeys(): PageType[] {
|
||||
return FEATURES.filter((f) => f.defaultVisible).map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getAllFeatureKeys(): PageType[] {
|
||||
return FEATURES.map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getDefaultPageOrder(): PageType[] {
|
||||
return FEATURES.filter((f) => f.key !== 'dashboard').map((f) => f.key);
|
||||
}
|
||||
|
||||
export function getEntryPointType(): 'popup' | 'sidepanel' | 'tab' {
|
||||
const pathname = window.location.pathname;
|
||||
if (pathname.includes('sidepanel')) {
|
||||
return 'sidepanel';
|
||||
}
|
||||
if (new URLSearchParams(window.location.search).get('mode') === 'tab') {
|
||||
return 'tab';
|
||||
}
|
||||
return 'popup';
|
||||
}
|
||||
@@ -1,868 +0,0 @@
|
||||
# Testing Tools — 视觉规范文档
|
||||
|
||||
> **版本**: 1.0.0
|
||||
> **日期**: 2026-05-29
|
||||
> **适用范围**: 所有新页面、新组件、UI 修改
|
||||
> **设计系统**: 基于 [shadcn/ui](https://ui.shadcn.com/) + Tailwind CSS
|
||||
|
||||
---
|
||||
|
||||
## 目录
|
||||
|
||||
1. [设计原则](#1-设计原则)
|
||||
2. [色彩系统](#2-色彩系统)
|
||||
3. [排版规范](#3-排版规范)
|
||||
4. [间距与布局](#4-间距与布局)
|
||||
5. [圆角与阴影](#5-圆角与阴影)
|
||||
6. [组件规范](#6-组件规范)
|
||||
7. [交互与动效](#7-交互与动效)
|
||||
8. [暗色模式](#8-暗色模式)
|
||||
9. [工具色彩标识](#9-工具色彩标识)
|
||||
10. [代码规范](#10-代码规范)
|
||||
11. [反模式清单](#11-反模式清单)
|
||||
|
||||
---
|
||||
|
||||
## 1. 设计原则
|
||||
|
||||
### 1.1 核心定位
|
||||
|
||||
Testing Tools 是一款**浏览器扩展开发者工具集**，视觉风格遵循：
|
||||
|
||||
- **专业克制** — 低饱和度色彩，避免视觉噪音
|
||||
- **信息密度优先** — 紧凑布局，在 400×600px 的 popup 空间内高效展示
|
||||
- **开发者友好** — 等宽字体用于代码/数据，清晰的信息层级
|
||||
- **一致性至上** — 所有页面、组件遵循同一套视觉语言
|
||||
|
||||
### 1.2 设计关键词
|
||||
|
||||
```
|
||||
简洁 · 现代 · 功能导向 · 低对比度 · 微圆角 · 微妙阴影
|
||||
```
|
||||
|
||||
### 1.3 与 shadcn/ui 的关系
|
||||
|
||||
本项目以 shadcn/ui 为底座，所有基础组件（Button、Input、Select 等）均来自或对齐 shadcn/ui 的默认样式。业务组件在此基础上扩展，**不得破坏底层设计语言的统一性**。
|
||||
|
||||
---
|
||||
|
||||
## 2. 色彩系统
|
||||
|
||||
### 2.1 CSS 变量定义
|
||||
|
||||
所有色彩通过 CSS 自定义属性（HSL 格式）管理，定义于 `src/index.css`：
|
||||
|
||||
#### 亮色模式 (`:root`)
|
||||
|
||||
| 变量名 | HSL 值 | 用途 | 近似色 |
|
||||
| -------------------------- | ------------------- | ------------- | --------- |
|
||||
| `--background` | `0 0% 100%` | 页面背景 | `#ffffff` |
|
||||
| `--foreground` | `222.2 84% 4.9%` | 主文字 | `#020617` |
|
||||
| `--card` | `0 0% 100%` | 卡片背景 | `#ffffff` |
|
||||
| `--card-foreground` | `222.2 84% 4.9%` | 卡片文字 | `#020617` |
|
||||
| `--popover` | `0 0% 100%` | 浮层背景 | `#ffffff` |
|
||||
| `--popover-foreground` | `222.2 84% 4.9%` | 浮层文字 | `#020617` |
|
||||
| `--primary` | `222.2 47.4% 11.2%` | 主按钮/强调 | `#0f172a` |
|
||||
| `--primary-foreground` | `210 40% 98%` | 主按钮文字 | `#f8fafc` |
|
||||
| `--secondary` | `210 40% 96.1%` | 次级背景 | `#f1f5f9` |
|
||||
| `--secondary-foreground` | `222.2 47.4% 11.2%` | 次级文字 | `#0f172a` |
|
||||
| `--muted` | `210 40% 96.1%` | 静音/禁用背景 | `#f1f5f9` |
|
||||
| `--muted-foreground` | `215.4 16.3% 46.9%` | 次要文字 | `#64748b` |
|
||||
| `--accent` | `210 40% 96.1%` | 悬停高亮 | `#f1f5f9` |
|
||||
| `--accent-foreground` | `222.2 47.4% 11.2%` | 悬停文字 | `#0f172a` |
|
||||
| `--destructive` | `0 84.2% 60.2%` | 错误/删除 | `#ef4444` |
|
||||
| `--destructive-foreground` | `210 40% 98%` | 错误文字 | `#f8fafc` |
|
||||
| `--border` | `214.3 31.8% 91.4%` | 边框 | `#e2e8f0` |
|
||||
| `--input` | `214.3 31.8% 91.4%` | 输入框边框 | `#e2e8f0` |
|
||||
| `--ring` | `222.2 84% 4.9%` | 焦点环 | `#020617` |
|
||||
| `--radius` | `0.5rem` | 全局圆角 | `8px` |
|
||||
|
||||
#### 暗色模式 (`.dark`)
|
||||
|
||||
暗色模式下所有变量自动反转，保持对比度关系：
|
||||
|
||||
| 变量名 | HSL 值 | 近似色 |
|
||||
| ---------------------- | ------------------- | --------- |
|
||||
| `--background` | `222.2 84% 4.9%` | `#020617` |
|
||||
| `--foreground` | `210 40% 98%` | `#f8fafc` |
|
||||
| `--primary` | `210 40% 98%` | `#f8fafc` |
|
||||
| `--primary-foreground` | `222.2 47.4% 11.2%` | `#0f172a` |
|
||||
| `--secondary` | `217.2 32.6% 17.5%` | `#1e293b` |
|
||||
| `--muted` | `217.2 32.6% 17.5%` | `#1e293b` |
|
||||
| `--border` | `217.2 32.6% 17.5%` | `#1e293b` |
|
||||
|
||||
### 2.2 使用规范
|
||||
|
||||
```tsx
|
||||
// ✅ 正确：使用 CSS 变量
|
||||
<div className="bg-background text-foreground border-border">
|
||||
|
||||
// ✅ 正确：使用语义化色彩名
|
||||
<Button className="bg-primary text-primary-foreground">
|
||||
<span className="text-muted-foreground">
|
||||
|
||||
// ❌ 错误：硬编码颜色值
|
||||
<div className="bg-white text-black">
|
||||
<div className="bg-[#f1f5f9]">
|
||||
```
|
||||
|
||||
### 2.3 语义化色彩使用场景
|
||||
|
||||
| 色彩 | 场景 |
|
||||
| -------------------------- | -------------------------------- |
|
||||
| `background` | 页面根背景 |
|
||||
| `foreground` | 主标题、正文 |
|
||||
| `muted-foreground` | 描述文字、占位符、次级标签 |
|
||||
| `border` | 卡片边框、分割线、输入框边框 |
|
||||
| `card` + `card-foreground` | 卡片容器及其内容 |
|
||||
| `primary` | 主按钮、选中状态、关键操作 |
|
||||
| `secondary` | 次级按钮、工具栏背景、标签页背景 |
|
||||
| `destructive` | 错误提示、删除操作、验证失败 |
|
||||
| `accent` | 悬停背景、下拉选中项 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 排版规范
|
||||
|
||||
### 3.1 字体栈
|
||||
|
||||
项目使用系统默认字体栈（Tailwind 默认），**不引入自定义字体**。
|
||||
|
||||
```css
|
||||
/* Tailwind 默认 sans-serif */
|
||||
font-family:
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
'Helvetica Neue',
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
/* 等宽字体用于代码/数据 */
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
```
|
||||
|
||||
### 3.2 字号层级
|
||||
|
||||
| 层级 | 类名 | 大小 | 字重 | 用途 |
|
||||
| --------- | ------------------------------------------------ | ---- | ------- | ---------------------- |
|
||||
| 页面标题 | `text-base font-bold` | 16px | 700 | 页面主标题（极少使用） |
|
||||
| 卡片标题 | `text-sm font-bold tracking-tight` | 14px | 700 | 卡片/区块标题 |
|
||||
| 正文 | `text-sm` | 14px | 400 | 普通正文 |
|
||||
| 次级文字 | `text-xs` | 12px | 400/500 | 描述、标签 |
|
||||
| 微标签 | `text-[10px] font-bold uppercase tracking-wider` | 10px | 700 | 区域标签、分类标题 |
|
||||
| 数据/代码 | `font-mono text-sm` | 14px | 400 | 时间戳、JSON、代码 |
|
||||
|
||||
### 3.3 排版模式
|
||||
|
||||
```tsx
|
||||
// 区域标签（Section Label）— 最常用
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
输出结果
|
||||
</span>
|
||||
|
||||
// 卡片标题
|
||||
<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
|
||||
标题文字
|
||||
</h4>
|
||||
|
||||
// 描述文字
|
||||
<p className="text-[11px] font-medium text-muted-foreground/90 leading-normal">
|
||||
描述内容
|
||||
</p>
|
||||
|
||||
// 数据展示
|
||||
<span className="font-mono font-bold text-foreground text-sm tracking-tight tabular-nums">
|
||||
1716950400000
|
||||
</span>
|
||||
```
|
||||
|
||||
### 3.4 行高与字间距
|
||||
|
||||
| 属性 | 值 | 场景 |
|
||||
| ----------------- | -------- | ------------------ |
|
||||
| `leading-none` | 1 | 单行数据、紧凑布局 |
|
||||
| `leading-snug` | 1.375 | 标题、短文本 |
|
||||
| `leading-relaxed` | 1.625 | 长文本、代码块 |
|
||||
| `tracking-tight` | -0.025em | 标题、数据 |
|
||||
| `tracking-wider` | 0.05em | 大写标签 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 间距与布局
|
||||
|
||||
### 4.1 容器尺寸
|
||||
|
||||
```tsx
|
||||
// Popup 模式（默认）
|
||||
<div className="w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px]">
|
||||
|
||||
// Tab 模式（全屏自适应）
|
||||
<div className="sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
|
||||
```
|
||||
|
||||
### 4.2 间距节奏
|
||||
|
||||
| Token | 值 | 使用场景 |
|
||||
| --------------- | ----------- | ------------------ |
|
||||
| `p-3` / `p-3.5` | 12px / 14px | 页面内边距（紧凑） |
|
||||
| `p-4` | 16px | 标准页面内边距 |
|
||||
| `p-5` | 20px | 卡片内部填充 |
|
||||
| `gap-2` | 8px | 紧凑元素间距 |
|
||||
| `gap-3` | 12px | 标准元素间距 |
|
||||
| `gap-4` | 16px | 区块间距 |
|
||||
| `gap-6` | 24px | 大区块间距 |
|
||||
|
||||
### 4.3 布局模式
|
||||
|
||||
#### 页面布局
|
||||
|
||||
```tsx
|
||||
// 标准页面结构
|
||||
<div className="p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none">{/* 页面内容 */}</div>
|
||||
```
|
||||
|
||||
#### 卡片布局
|
||||
|
||||
```tsx
|
||||
// 标准卡片
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
|
||||
{/* 卡片内容 */}
|
||||
</div>
|
||||
|
||||
// 可聚焦卡片（含焦点环）
|
||||
<div className="border border-border rounded-xl bg-card ... focus-within:ring-1 focus-within:ring-ring focus-within:border-ring">
|
||||
```
|
||||
|
||||
#### 双栏网格
|
||||
|
||||
```tsx
|
||||
// 响应式双栏
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
|
||||
```
|
||||
|
||||
#### 工具卡片网格（Dashboard）
|
||||
|
||||
```tsx
|
||||
// Dashboard 紧凑网格
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. 圆角与阴影
|
||||
|
||||
### 5.1 圆角体系
|
||||
|
||||
| Token | 值 | 使用元素 |
|
||||
| -------------- | ------ | ---------------------- |
|
||||
| `rounded-sm` | 2px | Checkbox、小标签 |
|
||||
| `rounded-md` | 6px | 按钮、输入框、Select |
|
||||
| `rounded-lg` | 8px | 搜索框、小卡片 |
|
||||
| `rounded-xl` | 12px | 大卡片、面板、图标容器 |
|
||||
| `rounded-full` | 9999px | 标签、Avatar |
|
||||
|
||||
### 5.2 阴影体系
|
||||
|
||||
| 级别 | 类名 | 用途 |
|
||||
| ---- | --------------------- | ---------------------- |
|
||||
| 无 | — | 静态元素 |
|
||||
| 低 | `shadow-sm` | 卡片、输入框、按钮 |
|
||||
| 中 | `shadow-lg` | 下拉菜单、浮层、Dialog |
|
||||
| 动态 | 自定义 `shadow-[...]` | 卡片悬停时的彩色阴影 |
|
||||
|
||||
### 5.3 彩色阴影规范（工具卡片专用）
|
||||
|
||||
```tsx
|
||||
// 工具卡片悬停阴影 — 必须使用 rgba 格式配合 CSS 变量
|
||||
className="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)]"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. 组件规范
|
||||
|
||||
### 6.1 Button
|
||||
|
||||
来源：`src/components/ui/button.tsx`
|
||||
|
||||
#### 变体
|
||||
|
||||
| 变体 | 类名 | 场景 |
|
||||
| ------------- | -------------------------------------------- | ------------------ |
|
||||
| `default` | `bg-primary text-primary-foreground` | 主操作 |
|
||||
| `destructive` | `bg-destructive text-destructive-foreground` | 删除、危险操作 |
|
||||
| `outline` | `border border-input bg-background` | 次级操作、取消 |
|
||||
| `secondary` | `bg-secondary text-secondary-foreground` | 次要操作 |
|
||||
| `ghost` | 仅悬停背景 | 图标按钮、低优先级 |
|
||||
| `link` | 下划线文字 | 跳转链接 |
|
||||
|
||||
#### 尺寸
|
||||
|
||||
| 尺寸 | 高度 | 内边距 | 场景 |
|
||||
| --------- | ------- | ----------- | -------- |
|
||||
| `default` | 40px | `px-4 py-2` | 标准按钮 |
|
||||
| `sm` | 36px | `px-3` | 紧凑按钮 |
|
||||
| `lg` | 44px | `px-8` | 突出按钮 |
|
||||
| `icon` | 40×40px | — | 图标按钮 |
|
||||
|
||||
#### 使用示例
|
||||
|
||||
```tsx
|
||||
// 主操作
|
||||
<Button>确认</Button>
|
||||
|
||||
// 图标按钮
|
||||
<Button variant="ghost" size="icon">
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
// 危险操作
|
||||
<Button variant="destructive" size="sm">删除</Button>
|
||||
```
|
||||
|
||||
### 6.2 Input
|
||||
|
||||
来源：`src/components/ui/input.tsx`
|
||||
|
||||
```tsx
|
||||
// 标准输入框
|
||||
<Input
|
||||
className="font-mono font-semibold h-10 shadow-sm placeholder:text-muted-foreground/60 focus:bg-background"
|
||||
/>
|
||||
|
||||
// 错误状态
|
||||
<Input
|
||||
className="border-destructive focus-visible:ring-destructive"
|
||||
/>
|
||||
```
|
||||
|
||||
**规范要点**：
|
||||
|
||||
- 高度统一为 `h-10`（40px）
|
||||
- 等宽字体用于数据输入
|
||||
- 占位符使用 `text-muted-foreground/60`
|
||||
- 错误时边框变红并调整焦点环
|
||||
|
||||
### 6.3 SwitchButtonGroup
|
||||
|
||||
来源：`src/components/ui/switch.tsx`
|
||||
|
||||
```tsx
|
||||
// 分段控制器
|
||||
<SwitchButtonGroup
|
||||
value={mode}
|
||||
options={[
|
||||
{ value: 'ts2dt', label: '转日期' },
|
||||
{ value: 'dt2ts', label: '转时间戳' },
|
||||
]}
|
||||
onChange={setMode}
|
||||
size="small"
|
||||
/>
|
||||
```
|
||||
|
||||
**规范要点**：
|
||||
|
||||
- 容器：`rounded-lg bg-muted p-1`
|
||||
- 选中项：`bg-background text-foreground shadow-sm font-semibold`
|
||||
- 未选中项：`hover:bg-background/50 hover:text-foreground/80`
|
||||
- 尺寸：`small`（32px）用于工具页，`medium`（36px）标准
|
||||
|
||||
### 6.4 Card（工具卡片）
|
||||
|
||||
来源：`src/pages/Dashboard/ToolCard.tsx`
|
||||
|
||||
```tsx
|
||||
// 标准工具卡片结构
|
||||
<div className="group relative rounded-xl border border-border/70 bg-card p-4 h-auto flex flex-col gap-3 shadow-sm">
|
||||
{/* 上半部分：图标 + 标题 + 箭头 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex gap-3 items-center">
|
||||
{/* 图标容器 */}
|
||||
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[rgba(var(--tool-color),0.08)] text-[rgb(var(--tool-color))]">
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
{/* 文字 */}
|
||||
<div>
|
||||
<h4 className="font-bold text-sm">标题</h4>
|
||||
<p className="text-[11px] text-muted-foreground/90">描述</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</div>
|
||||
{/* 下半部分：预览区（可选） */}
|
||||
<div className="mt-1 pt-3 border-t border-dashed border-border/80">{snapshot}</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 6.5 TextInputArea
|
||||
|
||||
来源：`src/components/TextInputArea.tsx`
|
||||
|
||||
```tsx
|
||||
// 多行文本输入区
|
||||
<TextInputArea
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
placeholder="输入内容..."
|
||||
showCount={true}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={6}
|
||||
maxRows={12}
|
||||
/>
|
||||
```
|
||||
|
||||
**规范要点**：
|
||||
|
||||
- 外容器：`rounded-md border border-input bg-background shadow-sm`
|
||||
- 焦点状态：`focus-within:ring-1 focus-within:ring-ring`
|
||||
- 错误状态：`border-destructive focus-within:ring-destructive`
|
||||
- 底部工具栏：`h-10 bg-muted/30 border-t border-border/50`
|
||||
- 字体：`font-mono text-sm`
|
||||
|
||||
### 6.6 Dialog
|
||||
|
||||
来源：`src/components/ui/dialog.tsx`
|
||||
|
||||
```tsx
|
||||
// 对话框内容
|
||||
<DialogContent className="sm:rounded-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>标题</DialogTitle>
|
||||
<DialogDescription>描述文字</DialogDescription>
|
||||
</DialogHeader>
|
||||
{/* 内容 */}
|
||||
<DialogFooter>
|
||||
<Button variant="outline">取消</Button>
|
||||
<Button>确认</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
```
|
||||
|
||||
### 6.7 Select
|
||||
|
||||
来源：`src/components/ui/select.tsx`
|
||||
|
||||
```tsx
|
||||
<Select>
|
||||
<SelectTrigger className="h-9 shadow-sm bg-background">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-64">
|
||||
<SelectItem className="text-xs font-semibold focus:bg-accent cursor-pointer">选项</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### 6.8 Checkbox
|
||||
|
||||
来源：`src/components/ui/checkbox.tsx`
|
||||
|
||||
```tsx
|
||||
// 标准复选框
|
||||
<Checkbox className="h-4 w-4 rounded-sm border-primary data-[state=checked]:bg-primary" />
|
||||
|
||||
// 小型复选框（工具栏内）
|
||||
<Checkbox className="h-3.5 w-3.5 rounded border-input data-[state=checked]:bg-primary shadow-sm" />
|
||||
```
|
||||
|
||||
### 6.9 Badge
|
||||
|
||||
来源：`src/components/ui/badge.tsx`
|
||||
|
||||
| 变体 | 场景 |
|
||||
| ------------- | ------------------ |
|
||||
| `default` | 状态标签、分类 |
|
||||
| `secondary` | 次要标签 |
|
||||
| `destructive` | 错误标签 |
|
||||
| `outline` | 可点击标签、筛选器 |
|
||||
|
||||
### 6.10 CopyButton
|
||||
|
||||
来源：`src/components/CopyButton.tsx`
|
||||
|
||||
```tsx
|
||||
// 标准复制按钮
|
||||
<CopyButton text={content} />
|
||||
|
||||
// 小型复制按钮
|
||||
<CopyButton text={content} size="sm" className="h-7 w-7 rounded-md border" />
|
||||
```
|
||||
|
||||
**规范要点**：
|
||||
|
||||
- 默认 `variant="ghost" size="icon"`
|
||||
- 复制成功后变为绿色背景 + 对勾图标
|
||||
- 使用 `sonner` toast 提示复制结果
|
||||
|
||||
---
|
||||
|
||||
## 7. 交互与动效
|
||||
|
||||
### 7.1 过渡规范
|
||||
|
||||
| 属性 | 值 | 场景 |
|
||||
| ------------------- | ---------- | ----------------------------- |
|
||||
| `transition-colors` | 150ms ease | 色彩变化（悬停、焦点） |
|
||||
| `transition-all` | 150ms ease | 综合变化（SwitchButtonGroup） |
|
||||
| `duration-200` | 200ms | 复制按钮状态切换 |
|
||||
|
||||
### 7.2 焦点状态
|
||||
|
||||
所有可交互元素必须有可见的焦点指示器：
|
||||
|
||||
```tsx
|
||||
// 标准焦点环
|
||||
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
||||
|
||||
// 紧凑焦点环（图标按钮）
|
||||
focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
|
||||
|
||||
// 输入框焦点
|
||||
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
||||
```
|
||||
|
||||
### 7.3 悬停状态
|
||||
|
||||
```tsx
|
||||
// 按钮悬停
|
||||
hover:bg-accent hover:text-accent-foreground
|
||||
|
||||
// 卡片悬停
|
||||
hover:bg-muted/30 hover:border-[rgba(var(--tool-color),0.45)]
|
||||
|
||||
// 链接/文字悬停
|
||||
hover:text-foreground hover:underline
|
||||
```
|
||||
|
||||
### 7.4 动画规范
|
||||
|
||||
使用 `tailwindcss-animate` 提供的动画：
|
||||
|
||||
```tsx
|
||||
// 淡入
|
||||
animate-in fade-in duration-150
|
||||
|
||||
// 淡入 + 缩放（SwitchButtonGroup 选中项）
|
||||
animate-in fade-in-50 zoom-in-95 duration-150
|
||||
|
||||
// 从顶部滑入（下拉菜单）
|
||||
animate-in fade-in slide-in-from-top-2 duration-150
|
||||
|
||||
// 错误提示出现
|
||||
animate-in fade-in slide-in-from-top-1 duration-150
|
||||
|
||||
// 骨架屏脉冲
|
||||
animate-pulse
|
||||
```
|
||||
|
||||
### 7.5 禁用状态
|
||||
|
||||
```tsx
|
||||
// 统一禁用样式
|
||||
disabled:pointer-events-none disabled:opacity-50
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. 暗色模式
|
||||
|
||||
### 8.1 实现方式
|
||||
|
||||
通过 `darkMode: 'class'`（Tailwind 配置）+ `.dark` 类切换：
|
||||
|
||||
```tsx
|
||||
// ThemeModeProvider 自动处理
|
||||
document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
|
||||
```
|
||||
|
||||
### 8.2 暗色模式下的特殊处理
|
||||
|
||||
```tsx
|
||||
// 彩色阴影增强（暗色模式下阴影需要更高透明度）
|
||||
shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
|
||||
dark:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]
|
||||
|
||||
// 图标容器背景增强
|
||||
bg-[rgba(var(--tool-color),0.08)]
|
||||
dark:bg-[rgba(var(--tool-color),0.12)]
|
||||
|
||||
// 成功状态文字调整
|
||||
text-emerald-600 dark:text-emerald-400
|
||||
```
|
||||
|
||||
### 8.3 暗色模式色彩映射原则
|
||||
|
||||
| 亮色 | 暗色 | 说明 |
|
||||
| ---------------- | ---------------- | ------------------------------- |
|
||||
| 纯白背景 | 深蓝黑背景 | 避免纯黑 `#000`，使用 `#020617` |
|
||||
| 浅灰背景 | 深灰背景 | 保持层次关系 |
|
||||
| 深文字 | 浅文字 | 反转对比度 |
|
||||
| 彩色阴影低透明度 | 彩色阴影高透明度 | 暗色需要更强视觉反馈 |
|
||||
|
||||
---
|
||||
|
||||
## 9. 工具色彩标识
|
||||
|
||||
### 9.1 色板定义
|
||||
|
||||
每个工具分配一个主题色，定义于 `src/config/features.tsx`：
|
||||
|
||||
```ts
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '13, 148, 136', // teal (#0d9488)
|
||||
success: '22, 163, 74', // green (#16a34a)
|
||||
warning: '217, 119, 6', // amber (#d97706)
|
||||
error: '220, 38, 38', // red (#dc2626)
|
||||
secondary: '147, 51, 232', // purple (#9333e8)
|
||||
info: '37, 99, 235', // blue (#2563eb)
|
||||
};
|
||||
```
|
||||
|
||||
### 9.2 工具色彩分配
|
||||
|
||||
| 工具 | 色彩键 | 色值 |
|
||||
| ----------- | ----------- | ------ |
|
||||
| 时间戳转换 | `primary` | Teal |
|
||||
| 存储清理 | `warning` | Amber |
|
||||
| 二维码工具 | `success` | Green |
|
||||
| 文本统计 | `secondary` | Purple |
|
||||
| JWT 解析 | `info` | Blue |
|
||||
| JSON 对比 | `primary` | Teal |
|
||||
| Base64 转换 | `info` | Blue |
|
||||
| 右键还原 | `success` | Green |
|
||||
|
||||
### 9.3 工具色彩使用规范
|
||||
|
||||
```tsx
|
||||
// 1. 通过 style 注入 CSS 变量
|
||||
<div style={{ ['--tool-color' as string]: rgbValues }}>
|
||||
|
||||
// 2. 图标容器背景（低透明度）
|
||||
bg-[rgba(var(--tool-color),0.08)]
|
||||
dark:bg-[rgba(var(--tool-color),0.12)]
|
||||
|
||||
// 3. 图标颜色
|
||||
text-[rgb(var(--tool-color))]
|
||||
|
||||
// 4. 悬停边框
|
||||
hover:border-[rgba(var(--tool-color),0.45)]
|
||||
|
||||
// 5. 悬停阴影
|
||||
hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)]
|
||||
|
||||
// 6. 箭头悬停色
|
||||
group-hover:text-[rgb(var(--tool-color))]
|
||||
```
|
||||
|
||||
**注意**：工具色彩仅用于**标识和装饰**，不得用于功能性色彩（如成功/错误状态）。
|
||||
|
||||
---
|
||||
|
||||
## 10. 代码规范
|
||||
|
||||
### 10.1 Tailwind 类名组织顺序
|
||||
|
||||
使用 `cn()` 工具函数（`clsx` + `tailwind-merge`）组合类名，按以下顺序排列：
|
||||
|
||||
```tsx
|
||||
className={cn(
|
||||
// 1. 布局（display, position, flex, grid）
|
||||
'flex items-center justify-between',
|
||||
// 2. 尺寸（width, height, padding, margin）
|
||||
'w-full h-10 px-4',
|
||||
// 3. 外观（background, border, shadow, rounded）
|
||||
'rounded-md border border-input bg-background shadow-sm',
|
||||
// 4. 文字（color, font, text-align）
|
||||
'text-sm font-medium text-foreground',
|
||||
// 5. 交互（hover, focus, disabled, cursor）
|
||||
'hover:bg-accent focus-visible:ring-2 disabled:opacity-50',
|
||||
// 6. 动画（transition, animate）
|
||||
'transition-colors duration-150',
|
||||
// 7. 条件类
|
||||
isActive && 'bg-primary text-primary-foreground',
|
||||
// 8. 外部传入
|
||||
className,
|
||||
)}
|
||||
```
|
||||
|
||||
### 10.2 颜色使用检查清单
|
||||
|
||||
- [ ] 所有颜色使用 CSS 变量（`bg-background` 而非 `bg-white`）
|
||||
- [ ] 边框使用 `border-border` 及其透明度变体
|
||||
- [ ] 文字层级使用 `foreground` → `muted-foreground` → `muted-foreground/60`
|
||||
- [ ] 错误状态使用 `destructive` 系列
|
||||
- [ ] 工具色彩仅用于装饰性元素
|
||||
|
||||
### 10.3 组件文件组织
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ui/ # shadcn 基础组件（只读，不修改）
|
||||
├── components/ # 业务组件
|
||||
│ ├── CopyButton.tsx
|
||||
│ ├── SwitchButtonGroup.tsx
|
||||
│ ├── TextInputArea.tsx
|
||||
│ └── ...
|
||||
├── pages/ # 页面组件
|
||||
│ ├── <ToolName>/
|
||||
│ │ ├── index.tsx # 页面入口
|
||||
│ │ ├── use<ToolName>.ts # 业务逻辑 Hook
|
||||
│ │ └── components/ # 页面私有组件
|
||||
│ └── ...
|
||||
└── providers/ # Context Providers
|
||||
```
|
||||
|
||||
### 10.4 新增页面模板
|
||||
|
||||
```tsx
|
||||
// src/pages/NewTool/index.tsx
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className="p-4 w-full flex flex-col space-y-4 select-none">
|
||||
{/* 页面内容 */}
|
||||
<div className="p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm">
|
||||
<h4 className="font-bold text-sm tracking-tight">新工具</h4>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11. 反模式清单
|
||||
|
||||
以下模式**禁止**在项目中使用：
|
||||
|
||||
### 11.1 色彩反模式
|
||||
|
||||
```tsx
|
||||
// ❌ 硬编码颜色
|
||||
<div className="bg-white text-black">
|
||||
<div className="bg-gray-100">
|
||||
<div className="text-gray-500">
|
||||
|
||||
// ❌ 使用非语义化 Tailwind 颜色
|
||||
<div className="bg-slate-50">
|
||||
<div className="text-zinc-400">
|
||||
|
||||
// ✅ 使用 CSS 变量
|
||||
<div className="bg-background text-foreground">
|
||||
<div className="bg-muted text-muted-foreground">
|
||||
```
|
||||
|
||||
### 11.2 布局反模式
|
||||
|
||||
```tsx
|
||||
// ❌ 固定高度导致内容截断
|
||||
<div className="h-[200px]">
|
||||
|
||||
// ✅ 使用 min-height 或自适应
|
||||
<div className="min-h-[200px]">
|
||||
<div className="h-auto">
|
||||
|
||||
// ❌ 使用 margin 做组件间距
|
||||
<div className="mb-4">
|
||||
|
||||
// ✅ 使用 gap
|
||||
<div className="flex flex-col gap-4">
|
||||
```
|
||||
|
||||
### 11.3 组件反模式
|
||||
|
||||
```tsx
|
||||
// ❌ 修改 shadcn/ui 基础组件样式
|
||||
// 如需修改，通过 className 覆盖或创建包装组件
|
||||
|
||||
// ❌ 内联样式用于颜色（工具色彩除外）
|
||||
<div style={{ backgroundColor: '#f1f5f9' }}>
|
||||
|
||||
// ❌ 混合使用不同圆角体系
|
||||
<Button className="rounded-lg"> // Button 应为 rounded-md
|
||||
|
||||
// ❌ 忽略焦点状态
|
||||
<button className="..."> // 缺少 focus-visible 样式
|
||||
```
|
||||
|
||||
### 11.4 暗色模式反模式
|
||||
|
||||
```tsx
|
||||
// ❌ 仅适配部分元素
|
||||
<div className="bg-white text-black dark:bg-gray-900 dark:text-white">
|
||||
|
||||
// ✅ 使用 CSS 变量自动适配
|
||||
<div className="bg-background text-foreground">
|
||||
|
||||
// ❌ 暗色模式下使用不合适的透明度
|
||||
<div className="bg-black/5 dark:bg-white/5"> // 对比度不足
|
||||
|
||||
// ✅ 使用语义化变量
|
||||
<div className="bg-muted">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 12. 附录
|
||||
|
||||
### 12.1 常用类名速查
|
||||
|
||||
```
|
||||
// 页面容器
|
||||
p-4 w-full flex flex-col space-y-4 min-h-[500px] select-none
|
||||
|
||||
// 标准卡片
|
||||
p-5 rounded-xl border border-border bg-card text-card-foreground shadow-sm
|
||||
|
||||
// 工具栏
|
||||
flex h-10 items-center justify-between px-1.5 bg-secondary/40 rounded-xl border border-border/60
|
||||
|
||||
// 区域标签
|
||||
text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider
|
||||
|
||||
// 数据展示
|
||||
font-mono font-semibold text-foreground text-sm
|
||||
|
||||
// 错误提示
|
||||
text-xs font-medium text-destructive
|
||||
|
||||
// 空状态
|
||||
p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center
|
||||
|
||||
// 图标按钮容器
|
||||
flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background shadow-sm
|
||||
|
||||
// 焦点环
|
||||
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
|
||||
```
|
||||
|
||||
### 12.2 相关文件
|
||||
|
||||
| 文件 | 说明 |
|
||||
| ------------------------------------- | ----------------------- |
|
||||
| `src/index.css` | CSS 变量定义、全局样式 |
|
||||
| `tailwind.config.js` | Tailwind 配置、色彩映射 |
|
||||
| `src/lib/utils.ts` | `cn()` 工具函数 |
|
||||
| `src/components/ui/*.tsx` | shadcn/ui 基础组件 |
|
||||
| `src/config/features.tsx` | 工具配置、色彩分配 |
|
||||
| `src/providers/ThemeModeProvider.tsx` | 主题模式管理 |
|
||||
|
||||
### 12.3 参考资源
|
||||
|
||||
- [shadcn/ui 文档](https://ui.shadcn.com/docs)
|
||||
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
|
||||
- [Radix UI 文档](https://www.radix-ui.com/)
|
||||
- [Lucide Icons](https://lucide.dev/)
|
||||
|
||||
---
|
||||
|
||||
_本文档随项目迭代更新。新增组件或修改视觉风格时，请同步更新此文档。_
|
||||
@@ -1,8 +0,0 @@
|
||||
# Spec 目录
|
||||
|
||||
功能规格、修复方案与验收标准文档。
|
||||
|
||||
| 文档 | 状态 | 说明 |
|
||||
| -------------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
|
||||
| [storage-cleaner/indexeddb-fix-plan.md](./storage-cleaner/indexeddb-fix-plan.md) | ✅ Phase 3 已完成 | Storage Cleaner IndexedDB 清理逻辑修复方案与验收标准 |
|
||||
| [popup-layout/feature-nav-layout.md](./popup-layout/feature-nav-layout.md) | 待实施 | Popup 右侧图标导航、移除 Dashboard、默认 timestamp |
|
||||
@@ -1,356 +0,0 @@
|
||||
# Popup 布局重构 — 功能导航与 Dashboard 移除
|
||||
|
||||
> 创建时间: 2026-07-05
|
||||
> 状态: 待实施
|
||||
> 关联模块: `src/entrypoints/popup/`、`src/layout/FeatureNav/`、`src/providers/RouterProvider.tsx`
|
||||
> 影响范围: 仅 popup 入口（tab / sidepanel 不在本次布局范围）
|
||||
|
||||
## 背景与目标
|
||||
|
||||
当前 popup 采用 **Dashboard 首页 + TopBar 搜索跳转** 模式：用户打开扩展后先看到仪表盘卡片网格，再点击进入具体工具。布局为固定 400×600（见 `src/entrypoints/popup/App.tsx` 与 `src/entrypoints/popup/index.html`），TopBar 在非 dashboard 页面显示「返回首页」按钮。
|
||||
|
||||
该模式增加了一步选工具操作。本次重构将 popup 改为 **工具直达 + 右侧常驻导航**，并移除 Dashboard 页面。
|
||||
|
||||
| 维度 | 现状 | 目标 |
|
||||
| ---------- | ----------------------------- | ----------------------------------------- |
|
||||
| 默认页 | `dashboard` | 新用户默认 `timestamp` |
|
||||
| 导航 | Dashboard 卡片网格 + 搜索跳转 | 右侧常驻纯图标导航栏 |
|
||||
| 首页 | Dashboard 独立页 | 移除 |
|
||||
| Popup 宽度 | 400px | 450px（内容区 ~402px + 导航栏 48px） |
|
||||
| 作用范围 | — | 仅 popup 改布局；tab / sidepanel 不加导航 |
|
||||
|
||||
---
|
||||
|
||||
## 布局设计
|
||||
|
||||
### 结构示意
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
subgraph popup ["Popup 450x600"]
|
||||
subgraph mainCol ["主列 flex-1"]
|
||||
TopBar["TopBar"]
|
||||
Content["RouterContainer"]
|
||||
TopBar --> Content
|
||||
end
|
||||
NavCol["FeatureNav 48px"]
|
||||
end
|
||||
mainCol --- NavCol
|
||||
```
|
||||
|
||||
### 尺寸约束
|
||||
|
||||
| 属性 | 值 | 说明 |
|
||||
| -------- | ------ | ---------------------------------------------- |
|
||||
| 总宽度 | 450px | `App.tsx` 容器 + `index.html` 内联样式同步修改 |
|
||||
| 总高度 | 600px | 不变 |
|
||||
| 主内容列 | flex-1 | 约 402px，需 `min-w-0` 防止 flex 子项溢出 |
|
||||
| 导航栏 | 48px | Tailwind `w-12`，固定宽度，不参与 flex 收缩 |
|
||||
|
||||
### 视觉规范
|
||||
|
||||
- 导航栏：左侧 `border-l border-border`，垂直排列图标按钮
|
||||
- 图标按钮：`h-9 w-9` 或 `h-10 w-10`，纯图标
|
||||
- Tooltip：使用原生 `title` 属性 + `aria-label={feature.label}`，不引入 Tooltip 组件
|
||||
- Active 态：背景 `bg-muted` + 左侧 `border-l-2 border-primary`
|
||||
- 导航列表超出高度时：`overflow-y-auto`（600px 高度下 9 个工具通常无需滚动）
|
||||
|
||||
---
|
||||
|
||||
## FeatureNav 组件规格
|
||||
|
||||
新建 `src/layout/FeatureNav/`，遵循 UI + Hook 分离模式（见 `.github/CODING_STANDARDS.md` §11）。
|
||||
|
||||
### 文件结构
|
||||
|
||||
```
|
||||
src/layout/FeatureNav/
|
||||
├── index.tsx # 垂直图标按钮列表、active 高亮、无障碍属性
|
||||
├── useFeatureNav.ts # 读路由状态，暴露 navItems / navigateTo / currentPage
|
||||
├── resolveNavFeatures.ts # 从 Dashboard 迁出的功能列表解析逻辑
|
||||
└── __tests__/
|
||||
├── index.test.tsx
|
||||
└── resolveNavFeatures.test.ts
|
||||
```
|
||||
|
||||
### resolveNavFeatures.ts
|
||||
|
||||
从 `src/pages/Dashboard/dashboardFeatures.ts` 迁出并重命名：
|
||||
|
||||
```typescript
|
||||
export interface NavFeatureItem {
|
||||
key: PageType;
|
||||
feature: FeatureConfig & { icon: NonNullable<FeatureConfig['icon']> };
|
||||
}
|
||||
|
||||
export function resolveNavFeatures(keys: PageType[], visiblePages: PageType[]): NavFeatureItem[];
|
||||
```
|
||||
|
||||
逻辑与旧 `resolveDashboardFeatures` 一致：
|
||||
|
||||
- 按 `keys`（即 `pageOrder`）顺序遍历
|
||||
- 跳过不在 `visiblePages` 中的项
|
||||
- 跳过无 `icon` 的 feature（dashboard 移除后不应出现）
|
||||
|
||||
### useFeatureNav.ts
|
||||
|
||||
```typescript
|
||||
export interface UseFeatureNavReturn {
|
||||
navItems: NavFeatureItem[];
|
||||
currentPage: PageType;
|
||||
navigateTo: (page: PageType) => void;
|
||||
}
|
||||
```
|
||||
|
||||
- 从 `useRouter()` 读取 `currentPage`、`pageOrder`、`visiblePages`、`navigateTo`
|
||||
- 用 `useMemo` 调用 `resolveNavFeatures(pageOrder, visiblePages)` 生成 `navItems`
|
||||
|
||||
### index.tsx
|
||||
|
||||
- 渲染 `<nav aria-label="功能导航">` 包裹垂直按钮列表
|
||||
- 每项为 `<button type="button">`，内含 Lucide 图标
|
||||
- 点击调用 `navigateTo(item.key)`
|
||||
- 当前项添加 active 样式与 `aria-current="page"`
|
||||
|
||||
### 引用范围
|
||||
|
||||
**仅** `src/entrypoints/popup/App.tsx` 引用 `FeatureNav`。sidepanel / tab 入口不引入该组件。
|
||||
|
||||
---
|
||||
|
||||
## popup/App.tsx 目标结构
|
||||
|
||||
```tsx
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/layout/TopBar';
|
||||
import FeatureNav from '@/layout/FeatureNav';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<RouterProvider
|
||||
defaultRoute="timestamp"
|
||||
syncKey="app/popupRoute"
|
||||
visiblePagesKey="app/popupVisiblePages"
|
||||
pageOrderKey="app/popupPageOrder"
|
||||
>
|
||||
<div className="flex w-[450px] max-w-[450px] min-w-[450px] h-[600px] min-h-[600px] overflow-hidden bg-background">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<TopBar />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
<FeatureNav />
|
||||
</div>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
`src/entrypoints/popup/index.html` 内联样式中 `width: 400px` 改为 `width: 450px`。
|
||||
|
||||
---
|
||||
|
||||
## 移除 Dashboard（全局类型变更）
|
||||
|
||||
布局仅改 popup，但 `dashboard` 从 `PageType` 移除会影响全项目类型与路由校验。
|
||||
|
||||
### 删除文件
|
||||
|
||||
| 路径 | 说明 |
|
||||
| ------------------------------------- | ---------------- |
|
||||
| `src/pages/Dashboard/` | 整目录（含测试） |
|
||||
| `src/config/pageLoaders/dashboard.ts` | Dashboard 懒加载 |
|
||||
|
||||
### 修改文件
|
||||
|
||||
| 文件 | 改动 |
|
||||
| ------------------------------------ | ----------------------------------------------------------- |
|
||||
| `src/types/storage.d.ts` | 从 `PageType` 联合类型删除 `'dashboard'` |
|
||||
| `src/config/featureMeta.ts` | 删除 dashboard 条目 |
|
||||
| `src/config/pageLoaders/index.ts` | 删除 `case 'dashboard'` |
|
||||
| `src/components/RouterContainer.tsx` | 去掉 dashboard 骨架屏分支；统一使用 `page-transition-enter` |
|
||||
| `src/components/PageSkeleton.tsx` | 删除 `variant: 'dashboard'` 及对应 UI |
|
||||
| `src/styles/shell.css` | 删除 `.page-transition-dashboard` |
|
||||
|
||||
### TopBar 精简
|
||||
|
||||
`src/layout/TopBar/index.tsx` 与 `useTopBar.ts`：
|
||||
|
||||
- 删除「返回首页」按钮（`ArrowLeft` + `goHome`）
|
||||
- 删除 `isDashboard` 状态及相关导出
|
||||
- 搜索过滤中 `f.key === 'dashboard'` 的特殊排除逻辑可删除
|
||||
|
||||
### RouterProvider 变更
|
||||
|
||||
`src/providers/RouterProvider.tsx`：
|
||||
|
||||
- 删除 `goHome()` 方法及 Context 中的 `goHome` 字段
|
||||
- 全局 `defaultRoute` 默认值由 `'dashboard'` 改为 `'timestamp'`
|
||||
- popup 显式传入 `defaultRoute="timestamp"`（与全局默认一致，便于阅读）
|
||||
|
||||
### Sidepanel 最小修复
|
||||
|
||||
`src/entrypoints/sidepanel/App.tsx` 若仍存在：
|
||||
|
||||
- `defaultRoute="dashboard"` 改为 `defaultRoute="timestamp"`
|
||||
- 不添加 FeatureNav 布局
|
||||
|
||||
---
|
||||
|
||||
## 默认路由策略（仅新用户）
|
||||
|
||||
利用现有 `RouterProvider` 机制，**无需额外迁移代码**。
|
||||
|
||||
```typescript
|
||||
// 首屏（localStorage 快照，消除闪烁）
|
||||
const [currentPage] = useState(() => getSyncSnapshot(syncKey, defaultRoute, isValidPage));
|
||||
|
||||
// 异步加载 chrome.storage
|
||||
const savedRoute = (stored[syncKey] ?? defaultRoute) as PageType;
|
||||
if (isValidPage(savedRoute) && syncRoute && !hasUserNavigatedRef.current) {
|
||||
setCurrentPage(savedRoute);
|
||||
}
|
||||
```
|
||||
|
||||
| 场景 | 行为 |
|
||||
| ------------------------------------------ | ---------------------------------------------------------------- |
|
||||
| 新用户（无 `app/popupRoute`） | 首屏 + 持久化均为 `timestamp` |
|
||||
| 老用户（如 `app/popupRoute: 'jsonTools'`） | 恢复上次路由 |
|
||||
| 老用户曾存 `dashboard` | `isValidPage('dashboard')` 为 false → 回退 `timestamp`（软迁移） |
|
||||
| 右键菜单 deep link | `?feature=&payload=` 优先级不变，高于默认路由 |
|
||||
| 用户主动切换 | `navigateTo` 后 `hasUserNavigatedRef` 阻止异步覆盖 |
|
||||
|
||||
`visiblePages` / `pageOrder` 中残留的 `dashboard` 由 `mergeWithDefaults` 自动滤除（不在新默认列表中）。
|
||||
|
||||
### 边界说明
|
||||
|
||||
`recentlyUsedTools` 若含已移除的 `dashboard` 等非法项，当前 `isValidPageList` 校验要求数组**全部**合法，失败时整表回退为 `[]`。影响：TopBar 搜索历史中的「最近使用」可能被清空。此为已知低影响边界；实现时可选优化为「过滤非法项保留合法项」，**非必须**。
|
||||
|
||||
---
|
||||
|
||||
## 实施顺序
|
||||
|
||||
```
|
||||
1. 迁出 resolveNavFeatures + 新建 FeatureNav 组件与测试
|
||||
2. 修改 popup/App.tsx 布局 + popup/index.html 宽度
|
||||
3. 全局移除 dashboard（PageType → FEATURES → pageLoader → 删页面目录）
|
||||
4. 精简 TopBar / RouterProvider / RouterContainer / PageSkeleton
|
||||
5. 批量更新测试 → npm run typecheck && npm run test && npm run lint
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 验收标准
|
||||
|
||||
### A. 布局与导航（手动）
|
||||
|
||||
| 编号 | 步骤 | 期望 |
|
||||
| ---- | ------------------------------------ | ---------------------------------------------- |
|
||||
| A-1 | 首次安装（或清空 storage）打开 popup | 默认显示时间戳页，右侧导航 timestamp 项高亮 |
|
||||
| A-2 | 依次点击各导航图标 | 切换到对应工具页，active 态跟随当前页 |
|
||||
| A-3 | hover 各导航图标 | 显示中文功能名 tooltip（`title` 属性） |
|
||||
| A-4 | 使用过某工具后关闭再打开 popup | 恢复上次路由（非 dashboard） |
|
||||
| A-5 | 检查 popup 尺寸 | 宽度 450px，高度 600px，内容区不被导航挤压溢出 |
|
||||
|
||||
### B. Dashboard 移除
|
||||
|
||||
| 编号 | 期望 |
|
||||
| ---- | -------------------------------------------------------------------- |
|
||||
| B-1 | TopBar 搜索下拉无 dashboard 项 |
|
||||
| B-2 | TopBar 无「返回首页」按钮 |
|
||||
| B-3 | `PageType`、`FEATURES`、`loadPage` 中无 dashboard |
|
||||
| B-4 | storage 中 `app/popupRoute: 'dashboard'` 时打开 popup 落到 timestamp |
|
||||
| B-5 | `visiblePages` 含 dashboard 时自动滤除，导航正常显示工具列表 |
|
||||
|
||||
### C. 单元测试
|
||||
|
||||
| 编号 | 覆盖 |
|
||||
| ---- | -------------------------------------------------------------------------- |
|
||||
| C-1 | `FeatureNav` 渲染全部可见工具图标 |
|
||||
| C-2 | `FeatureNav` 点击图标调用 `navigateTo` |
|
||||
| C-3 | `FeatureNav` 当前页对应项有 active 样式 / `aria-current` |
|
||||
| C-4 | `resolveNavFeatures` 按 pageOrder 排序、respect visiblePages |
|
||||
| C-5 | 更新 `RouterProvider` / `TopBar` / `RouterContainer` / `features` 相关测试 |
|
||||
| C-6 | 删除 `src/pages/Dashboard/__tests__/` 下全部测试 |
|
||||
|
||||
### D. CI
|
||||
|
||||
| 编号 | 标准 |
|
||||
| ---- | ------------------------ |
|
||||
| D-1 | `npm run typecheck` 通过 |
|
||||
| D-2 | `npm run test` 通过 |
|
||||
| D-3 | `npm run lint` 通过 |
|
||||
|
||||
---
|
||||
|
||||
## 不在范围
|
||||
|
||||
- tab / sidepanel 布局改造（不加 FeatureNav）
|
||||
- `visiblePages` / `pageOrder` 可视化配置 UI
|
||||
- Popup 高度变更（保持 600px）
|
||||
- 修改 `AGENTS.md` 中 spec 目录引用（实际 spec 位于 `docs/spec/`）
|
||||
|
||||
---
|
||||
|
||||
## PR 检查清单
|
||||
|
||||
```markdown
|
||||
## 功能
|
||||
|
||||
- [ ] 新建 FeatureNav 组件（index / useFeatureNav / resolveNavFeatures）
|
||||
- [ ] popup 布局改为双列（主内容 + 右侧导航）
|
||||
- [ ] popup 宽度 450px（App.tsx + index.html）
|
||||
- [ ] popup defaultRoute="timestamp"
|
||||
- [ ] 全局移除 dashboard（PageType、FEATURES、pageLoader、页面目录）
|
||||
- [ ] TopBar 移除返回按钮与 goHome 相关逻辑
|
||||
- [ ] RouterProvider 移除 goHome，defaultRoute 改为 timestamp
|
||||
- [ ] sidepanel defaultRoute 最小修复（若文件存在）
|
||||
|
||||
## 测试
|
||||
|
||||
- [ ] FeatureNav / resolveNavFeatures 单元测试
|
||||
- [ ] 更新 RouterProvider / TopBar / RouterContainer / features 测试
|
||||
- [ ] 删除 Dashboard 相关测试
|
||||
|
||||
## 验收
|
||||
|
||||
- [ ] npm run typecheck / test / lint 通过
|
||||
- [ ] 手动 A-1 ~ A-5、B-1 ~ B-4 通过
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 风险与边界说明
|
||||
|
||||
1. **Dashboard 移除为全局变更**：虽 FeatureNav 仅 popup 使用，但 `PageType` 删除 `dashboard` 会影响所有入口的类型校验与路由合法性。
|
||||
2. **老用户 dashboard 路由软迁移**：依赖 `isValidPage` 回退到 `defaultRoute`，不会 crash，但用户会察觉「首页消失、默认变为时间戳」——符合预期。
|
||||
3. **450px 宽度**：Chrome popup 允许扩展较默认更宽；若未来 Firefox 有差异需在 Firefox 构建中手动验证。
|
||||
4. **recentlyUsedTools 整表校验**：见「默认路由策略 → 边界说明」，可选后续优化。
|
||||
|
||||
---
|
||||
|
||||
## 相关文件索引
|
||||
|
||||
| 文件 | 说明 |
|
||||
| ------------------------------------- | ------------------------------- |
|
||||
| `src/entrypoints/popup/App.tsx` | popup 布局入口，引用 FeatureNav |
|
||||
| `src/entrypoints/popup/index.html` | popup 初始尺寸 450px |
|
||||
| `src/layout/FeatureNav/` | 新建：右侧图标导航 |
|
||||
| `src/layout/TopBar/` | 精简：移除返回按钮 |
|
||||
| `src/providers/RouterProvider.tsx` | 默认路由、移除 goHome |
|
||||
| `src/config/featureMeta.ts` | FEATURES 定义，删除 dashboard |
|
||||
| `src/types/storage.d.ts` | PageType 定义 |
|
||||
| `src/config/pageLoaders/index.ts` | 页面懒加载路由 |
|
||||
| `src/components/RouterContainer.tsx` | 页面渲染容器 |
|
||||
| `src/components/PageSkeleton.tsx` | 加载骨架屏 |
|
||||
| `src/styles/shell.css` | 页面过渡动画 |
|
||||
| `src/pages/Dashboard/` | **删除** |
|
||||
| `src/config/pageLoaders/dashboard.ts` | **删除** |
|
||||
| `src/entrypoints/sidepanel/App.tsx` | 最小修复 defaultRoute |
|
||||
|
||||
---
|
||||
|
||||
> **注**：项目 spec 文档实际目录为 `docs/spec/`。`AGENTS.md` 中引用的根目录 `spec/README.md` 尚未建立，以本目录 [`README.md`](../README.md) 为索引。
|
||||
@@ -1,435 +0,0 @@
|
||||
# Storage Cleaner — IndexedDB 修复方案与验收标准
|
||||
|
||||
> 创建时间: 2026-06-25
|
||||
> 状态: ✅ Phase 3 已完成（2026-06-25）
|
||||
> 关联模块: `src/utils/storageCleaner.ts`
|
||||
> 前置审查: Code Review（`storageCleaner.ts` 修改版）
|
||||
|
||||
## 背景与目标
|
||||
|
||||
本次修复针对 `storageCleaner.ts` 中 IndexedDB 清理逻辑及错误处理链路的审查结论，按优先级分三阶段实施。
|
||||
|
||||
| 问题域 | 现状 | 目标 |
|
||||
| ------------------- | ---------------------------------------------- | --------------------------------- |
|
||||
| IndexedDB fallback | `store.clear()` 完成后立即 `db.close()` | 等 transaction commit 后再关闭 |
|
||||
| deleteDatabase 超时 | 超时后仍可能触发 `onsuccess`，与 fallback 并发 | 单次删除生命周期内只 resolve 一次 |
|
||||
| 部分成功 | 多 DB 部分失败时 `count` 丢失 | 失败结果保留已清理数量 |
|
||||
| 代码结构 | `runScript` / `runCleanScript` 重复 | 统一 executeScript 入口 |
|
||||
| 测试 | 缺多 DB 混合场景 | 补单元测试覆盖 |
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 — 合并前必做（P1）
|
||||
|
||||
### 1.1 等待 IndexedDB transaction 完成后再关闭连接
|
||||
|
||||
#### 问题
|
||||
|
||||
`clearObjectStores` 在 `Promise.all(clearStore...)` 结束后立刻 `db.close()`。单个 `clearReq.onsuccess` 只表示 request 完成，transaction 可能尚未 commit，存在清空被回滚的风险。
|
||||
|
||||
#### 根因
|
||||
|
||||
IndexedDB 规范中，transaction 的持久化以 `transaction.oncomplete` 为准，而非单个 request 的 `onsuccess`。
|
||||
|
||||
#### 修复方案
|
||||
|
||||
在注入脚本内的 `clearObjectStores` 中，增加 `waitForTransaction` 辅助函数：
|
||||
|
||||
```typescript
|
||||
const waitForTransaction = (tx: IDBTransaction): Promise<void> =>
|
||||
new Promise((resolve, reject) => {
|
||||
tx.oncomplete = () => resolve();
|
||||
tx.onerror = () => reject(tx.error ?? new Error('Transaction failed'));
|
||||
tx.onabort = () => reject(tx.error ?? new Error('Transaction aborted'));
|
||||
});
|
||||
```
|
||||
|
||||
修改 `openReq.onsuccess` 分支：
|
||||
|
||||
```typescript
|
||||
const transaction = db.transaction(storeNames, 'readwrite');
|
||||
const errors = (
|
||||
await Promise.all(
|
||||
storeNames.map((storeName) => clearStore(transaction.objectStore(storeName), storeName)),
|
||||
)
|
||||
).filter((error): error is string => Boolean(error));
|
||||
|
||||
try {
|
||||
await waitForTransaction(transaction);
|
||||
} catch {
|
||||
db.close();
|
||||
resolve({
|
||||
success: false,
|
||||
errors: [`清空 IndexedDB 失败（${dbName}），请刷新后重试`],
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
db.close();
|
||||
resolve({ success: errors.length === 0, errors });
|
||||
```
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/utils/storageCleaner.ts` — `injectClearIndexedDB` 内 `clearObjectStores`
|
||||
|
||||
#### 新增测试
|
||||
|
||||
```typescript
|
||||
it('should wait for transaction complete before closing db', async () => {
|
||||
// mock: clear onsuccess 先于 transaction.oncomplete 触发
|
||||
// 断言 db.close 在 transaction.oncomplete 之后调用
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1.2 消除 deleteDatabase 超时竞态
|
||||
|
||||
#### 问题
|
||||
|
||||
超时 `resolve('timeout')` 后，`deleteReq.onsuccess` 仍可能触发；此时 fallback 的 `indexedDB.open` 与进行中的 `deleteDatabase` 可能并发，行为未定义。
|
||||
|
||||
#### 修复方案
|
||||
|
||||
为每个 DB 删除引入 **单次 settle** 状态：
|
||||
|
||||
```typescript
|
||||
const waitForDeleteDatabase = (dbName: string, timeoutMs: number) =>
|
||||
new Promise<'deleted' | 'blocked' | 'timeout' | 'error'>((resolve) => {
|
||||
let settled = false;
|
||||
const settle = (status: 'deleted' | 'blocked' | 'timeout' | 'error') => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
clearTimeout(timeout);
|
||||
resolve(status);
|
||||
};
|
||||
|
||||
const deleteReq = indexedDB.deleteDatabase(dbName);
|
||||
const timeout = setTimeout(() => {
|
||||
console.warn('IndexedDB delete timeout:', dbName);
|
||||
settle('timeout');
|
||||
}, timeoutMs);
|
||||
|
||||
deleteReq.onblocked = () => {
|
||||
console.warn('IndexedDB delete blocked:', dbName);
|
||||
settle('blocked');
|
||||
};
|
||||
deleteReq.onsuccess = () => settle('deleted');
|
||||
deleteReq.onerror = () => settle('error');
|
||||
});
|
||||
```
|
||||
|
||||
#### timeout / blocked 后的 fallback 策略
|
||||
|
||||
| 状态 | 行为 |
|
||||
| --------- | ------------------------------------------------------------------ |
|
||||
| `blocked` | 立即 fallback `clearObjectStores`（页面仍占用连接，open 通常可行） |
|
||||
| `timeout` | 先 `await delay(100~200ms)` 再 fallback，降低与 delete 并发概率 |
|
||||
| `error` | 不 fallback，直接报错 |
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/utils/storageCleaner.ts` — 替换现有 `new Promise` 删除逻辑
|
||||
|
||||
#### 新增测试
|
||||
|
||||
```typescript
|
||||
it('should ignore late onsuccess after delete timeout', async () => {
|
||||
// deleteBehavior: timeout，5000ms 后 resolve timeout
|
||||
// 6000ms 后再触发 onsuccess
|
||||
// 断言：只走 fallback 一次，count 不因 late onsuccess 重复 +1
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 — 建议同 PR 或紧接 follow-up（P2）
|
||||
|
||||
### 2.1 IndexedDB 部分成功时保留 count
|
||||
|
||||
#### 问题
|
||||
|
||||
多 DB 场景返回 `{ count: 2, errors: ['...'] }` 时，`runCleanScript` 只返回 `{ success: false, error }`，用户看不到已清理 2 个库。
|
||||
|
||||
#### 修复方案（推荐）
|
||||
|
||||
扩展失败分支类型，可选 `count`：
|
||||
|
||||
```typescript
|
||||
// src/types/storage.d.ts
|
||||
export type StorageCleanResult =
|
||||
| { success: true; count: number }
|
||||
| { success: false; error: string; count?: number }; // 部分成功时的已清理数
|
||||
```
|
||||
|
||||
修改 `runCleanScript`：
|
||||
|
||||
```typescript
|
||||
if (raw.errors?.length) {
|
||||
const errorMsg = raw.errors.join('\n');
|
||||
const partialHint = raw.count > 0 ? `（已成功清理 ${raw.count} 个数据库，但部分失败）\n` : '';
|
||||
return {
|
||||
success: false,
|
||||
error: partialHint + errorMsg,
|
||||
...(raw.count > 0 ? { count: raw.count } : {}),
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### UI 层（可选增强）
|
||||
|
||||
`CleaningResult.tsx` 失败时若 `result.indexedDB?.count` 存在，可展示部分成功提示（非必须，error 字符串已含 hint 即可）。
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/types/storage.d.ts`
|
||||
- `src/utils/storageCleaner.ts` — `runCleanScript`
|
||||
- `src/utils/__tests__/storageCleaner.test.ts`
|
||||
- （可选）`src/pages/StorageCleaner/components/CleaningResult.tsx`
|
||||
|
||||
#### 新增测试
|
||||
|
||||
```typescript
|
||||
it('should preserve partial count when some IndexedDB databases fail', async () => {
|
||||
// 3 个 DB：2 成功删除，1 blocked 且 fallback 失败
|
||||
// expect: success false, count 2, error 含「已成功清理 2 个」
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2.2 统一 executeScript 调用入口
|
||||
|
||||
#### 问题
|
||||
|
||||
`runScript` 与 `runCleanScript` 各自调用 `browser.scripting.executeScript`，行为不一致（吞错 vs 抛错）。
|
||||
|
||||
#### 修复方案
|
||||
|
||||
抽取底层函数：
|
||||
|
||||
```typescript
|
||||
type ExecuteScriptMode = 'fallback' | 'throw';
|
||||
|
||||
async function executeInTab<T>(
|
||||
tabId: number,
|
||||
func: () => T | Promise<T>,
|
||||
options: { errorLabel: string; mode: 'fallback'; fallback: T },
|
||||
): Promise<T>;
|
||||
async function executeInTab<T>(
|
||||
tabId: number,
|
||||
func: () => T | Promise<T>,
|
||||
options: { errorLabel: string; mode: 'throw' },
|
||||
): Promise<T>;
|
||||
async function executeInTab<T>(...) {
|
||||
try {
|
||||
const [result] = await browser.scripting.executeScript({ target: { tabId }, func });
|
||||
return (result?.result as T) ?? (options.mode === 'fallback' ? options.fallback : undefined as T);
|
||||
} catch (error) {
|
||||
console.error(`Failed to ${options.errorLabel}:`, error);
|
||||
if (options.mode === 'throw') throw error;
|
||||
return options.fallback;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- `runScript` → `executeInTab(..., { mode: 'fallback', fallback })`
|
||||
- `runCleanScript` → `executeInTab(..., { mode: 'throw' })` + 结果解析
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/utils/storageCleaner.ts`
|
||||
|
||||
#### 验收
|
||||
|
||||
现有 11 个测试全部通过，无行为回归。
|
||||
|
||||
---
|
||||
|
||||
### 2.3 错误信息分隔符统一
|
||||
|
||||
#### 问题
|
||||
|
||||
`runCleanScript` 用 `'; '` 拼接，`clearStorage` 的 `result.error` 用 `'\n'`，UI 用 `break-all` 展示，多错误时可读性不一致。
|
||||
|
||||
#### 修复方案
|
||||
|
||||
IndexedDB 内部多错误统一改为 `'\n'`：
|
||||
|
||||
```typescript
|
||||
error: raw.errors.join('\n');
|
||||
```
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/utils/storageCleaner.ts`
|
||||
- 相关测试断言（若有 `'; '` 期望）
|
||||
|
||||
---
|
||||
|
||||
### 2.4 补充多 DB 混合场景测试
|
||||
|
||||
| 用例 | 输入 | 期望 |
|
||||
| ------------------ | ------------------------------ | -------------------------------------------- |
|
||||
| 全部成功 | 3 DB，均 delete success | `success: true, count: 3` |
|
||||
| 部分 fallback 成功 | 2 success + 1 blocked→clear OK | `success: true, count: 3` |
|
||||
| 部分失败 | 2 success + 1 error | `success: false, count: 2, error 含失败库名` |
|
||||
| 空库列表 | `databases()` 返回 `[]` | `success: true, count: 0` |
|
||||
|
||||
#### 涉及文件
|
||||
|
||||
- `src/utils/__tests__/storageCleaner.test.ts`
|
||||
- 扩展 `createIndexedDBMock` 支持 per-db 不同 `deleteBehavior`
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 — 可选优化（P3）
|
||||
|
||||
### 3.1 超时常量提升到模块级
|
||||
|
||||
```typescript
|
||||
// src/utils/storageCleaner.ts 或 src/pages/StorageCleaner/constants.ts
|
||||
const INDEXED_DB_DELETE_TIMEOUT_MS = 5000;
|
||||
const INDEXED_DB_CLEAR_STORE_TIMEOUT_MS = 5000;
|
||||
```
|
||||
|
||||
注入脚本通过闭包引用（executeScript 会序列化 func，常量需在 func 外部定义并 capture，或仍写在 func 内但从模块常量赋值）。
|
||||
|
||||
### 3.2 IndexedDB 逻辑拆分（长期）
|
||||
|
||||
将 `clearObjectStores`、`waitForDeleteDatabase` 等抽到 `src/utils/indexedDbCleaner.ts` 的纯函数，注入层只做：
|
||||
|
||||
```typescript
|
||||
async () => clearAllIndexedDBs(INDEXED_DB_DELETE_TIMEOUT_MS);
|
||||
```
|
||||
|
||||
便于单测，不依赖 `mockExecuteScriptEval` 间接执行注入函数。工作量大，建议单独 PR。
|
||||
|
||||
---
|
||||
|
||||
## 实施顺序
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[1.1 transaction.oncomplete] --> B[1.2 delete settle 防竞态]
|
||||
B --> C[2.4 补多 DB 测试]
|
||||
C --> D[2.1 部分成功 count]
|
||||
D --> E[2.2 统一 executeInTab]
|
||||
E --> F[2.3 错误分隔符]
|
||||
F --> G[3.x 可选重构]
|
||||
```
|
||||
|
||||
| 阶段 | 预估工作量 | 风险 |
|
||||
| ------- | ---------- | ---------------- |
|
||||
| Phase 1 | 0.5~1 天 | 低，逻辑局部 |
|
||||
| Phase 2 | 0.5~1 天 | 中，涉及类型扩展 |
|
||||
| Phase 3 | 1~2 天 | 低，可延后 |
|
||||
|
||||
---
|
||||
|
||||
## 验收标准
|
||||
|
||||
### A. 自动化（CI 必须通过）
|
||||
|
||||
```bash
|
||||
npm run test -- src/utils/__tests__/storageCleaner.test.ts
|
||||
npm run typecheck
|
||||
npm run lint
|
||||
```
|
||||
|
||||
| 编号 | 标准 |
|
||||
| ---- | ------------------------------------------------------------------------------ |
|
||||
| A-1 | 全部单元测试通过，新增测试 ≥ 3（transaction 顺序、late onsuccess、多 DB 混合） |
|
||||
| A-2 | `tsc --noEmit` 无错误；若扩展 `StorageCleanResult`，所有引用处类型正确 |
|
||||
| A-3 | ESLint `--max-warnings=0` 通过 |
|
||||
|
||||
---
|
||||
|
||||
### B. 功能行为
|
||||
|
||||
| 编号 | 场景 | 期望结果 |
|
||||
| ---- | ---------------------------------------------------- | ----------------------------------------------------------------------------- |
|
||||
| B-1 | 单 DB，`deleteDatabase` 成功 | `indexedDB: { success: true, count: 1 }`，`overallSuccess: true` |
|
||||
| B-2 | 单 DB，`deleteDatabase` blocked，fallback clear 成功 | `success: true, count: 1`；transaction 在 `oncomplete` 后 `db.close` |
|
||||
| B-3 | 单 DB，delete 超时 5s，fallback clear 成功 | 5s 内进入 fallback；不因 late `onsuccess` 重复计数 |
|
||||
| B-4 | fallback 中某 store clear hang 5s | `success: false`，error 含 `dbName/storeName` |
|
||||
| B-5 | 3 DB：2 成功 + 1 失败 | `success: false`，`count: 2`（Phase 2.1 后），error 含失败库名与部分成功提示 |
|
||||
| B-6 | `executeScript` 注入失败 | `success: false`，**不得** `{ success: true, count: 0 }` |
|
||||
| B-7 | localStorage 成功 + cookies 失败 | `overallSuccess: false`，`result.error` 为 `Cookies: ...`（换行分隔多项失败） |
|
||||
|
||||
---
|
||||
|
||||
### C. 回归与 UI
|
||||
|
||||
| 编号 | 标准 |
|
||||
| ---- | --------------------------------------------------------------------------------------------------------- |
|
||||
| C-1 | `formatCleaningResult` 成功路径不变 |
|
||||
| C-2 | `CleaningResult` 失败时展示 `result.error`；含 `\n` 时多行可读（现有 `leading-relaxed break-all` 可接受） |
|
||||
| C-3 | `reloadAfterClean=true` 且 `overallSuccess=false` 时不刷新页面（`useStorageCleaner` 现有逻辑） |
|
||||
| C-4 | Cookie 清理：domain 前导 `.` 剥离逻辑不变 |
|
||||
|
||||
---
|
||||
|
||||
### D. 手动验收（扩展环境）
|
||||
|
||||
在 Chrome 加载 unpacked extension，选普通 HTTPS 页面：
|
||||
|
||||
| 编号 | 步骤 | 期望 |
|
||||
| ---- | ------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| D-1 | 页面写入 localStorage + IndexedDB，仅清 IndexedDB | 成功提示或明确错误；DevTools → Application → IndexedDB 数据为空或库已删 |
|
||||
| D-2 | 打开 DevTools 保持 IndexedDB 面板，执行清理 | 若 blocked，显示中文提示；fallback 成功后数据不可见 |
|
||||
| D-3 | 勾选「清理后刷新」且全部成功 | Toast「清理成功，即将刷新页面」，页面刷新 |
|
||||
| D-4 | 部分失败 | 不刷新；结果区红色展示错误详情 |
|
||||
|
||||
---
|
||||
|
||||
### E. 代码质量
|
||||
|
||||
| 编号 | 标准 |
|
||||
| ---- | ------------------------------------------------------------------ |
|
||||
| E-1 | 注入脚本内无重复 `settled` / timeout 逻辑（删除与 clear 各自封装） |
|
||||
| E-2 | 错误文案仍为中文，含库名/store 名 |
|
||||
| E-3 | 无 `any`（测试文件除外） |
|
||||
| E-4 | Phase 1 合并后，P1 项在 PR 描述中标注「已修复」并附测试名 |
|
||||
|
||||
---
|
||||
|
||||
## PR 检查清单
|
||||
|
||||
```markdown
|
||||
## 修复内容
|
||||
|
||||
- [ ] P1: transaction.oncomplete 后再 db.close
|
||||
- [ ] P1: deleteDatabase settle 防竞态
|
||||
- [ ] P2: 部分成功保留 count（可选）
|
||||
- [ ] P2: 多 DB 混合测试
|
||||
- [ ] P2: 错误信息 `\n` 分隔（可选）
|
||||
|
||||
## 验收
|
||||
|
||||
- [ ] npm run test / typecheck / lint 通过
|
||||
- [ ] 新增测试覆盖 B-2、B-3、B-5
|
||||
- [ ] 手动 D-1 ~ D-4 至少测 D-1、D-3
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 风险与边界说明
|
||||
|
||||
1. **fallback 清空 ≠ 删除库**：blocked 时只清 object store，库结构仍在；成功 `count` 表示「有效清理动作完成」，需在 UI/文档中说明（可选文案：「数据已清空，数据库结构可能仍存在」）。
|
||||
2. **timeout 延迟 fallback**：100~200ms 为经验值，无法完全消除竞态，只能降低概率；完全消除需浏览器不支持 abort delete 的前提下接受 best-effort。
|
||||
3. **类型扩展**：`StorageCleanResult` 加可选 `count` 为向后兼容；消费方用 `'count' in result && result.count` 判断即可。
|
||||
|
||||
---
|
||||
|
||||
## 相关文件索引
|
||||
|
||||
| 文件 | 说明 |
|
||||
| -------------------------------------------------------- | -------------------------------------------- |
|
||||
| `src/utils/storageCleaner.ts` | 核心清理逻辑 |
|
||||
| `src/utils/__tests__/storageCleaner.test.ts` | 单元测试 |
|
||||
| `src/types/storage.d.ts` | `StorageCleanResult` / `CleaningResult` 类型 |
|
||||
| `src/pages/StorageCleaner/constants.ts` | 选项标签与键名 |
|
||||
| `src/pages/StorageCleaner/useStorageCleaner.ts` | 清理流程编排 |
|
||||
| `src/pages/StorageCleaner/components/CleaningResult.tsx` | 结果展示 UI |
|
||||
@@ -1,48 +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)。
|
||||
|
||||
## 开发者注意事项（与源码同步）
|
||||
|
||||
以下行为以 `src/` 源码为准；设计文档中的旧版 class API、`metadata`/`options` 嵌套结构已废弃。
|
||||
|
||||
### Worker 任务 ID（`generationId`）
|
||||
|
||||
`useGenerator` 每次调用 `generate()` 递增 `generationIdRef`，经 `start` 消息传入 Worker。Worker 所有响应（`progress` / `complete` / `error`）均携带同一 `generationId`。
|
||||
|
||||
- **取消**：`cancel()` 先递增 ID 再发送 `cancel`，使进行中的 Worker 响应被主线程忽略；Worker 每生成 100 行让出事件循环以处理 cancel。
|
||||
- **快速重试**：新任务 ID 大于旧响应时，旧消息被丢弃，避免 UI 状态错乱。
|
||||
|
||||
类型见 `WorkerRequestMessage` / `WorkerResponseMessage`（`src/types/testDataGenerator.ts`）。
|
||||
|
||||
### 规则存储写入失败
|
||||
|
||||
`ruleStorage.save()` / `update()` 在 `localStorage.setItem` 失败时返回 `null`（不部分提交）。页面层（如 `FieldList.tsx`）仅在返回值非空时 Toast 成功。详见 [rule-management.md § 存储机制](./rule-management.md#存储机制) 与 `src/utils/README.md`。
|
||||
@@ -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. **响应式设计**: 支持桌面端、平板端、移动端
|
||||
@@ -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)
|
||||
@@ -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位身份证号 │ │ │
|
||||
│ │ │ 中文地址 生成中国地址 │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
@@ -1,422 +0,0 @@
|
||||
# 规则管理
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 功能 | 说明 | 优先级 |
|
||||
| -------- | -------------------- | ------ |
|
||||
| 保存规则 | 将当前配置保存为模板 | P0 |
|
||||
| 规则列表 | 查看所有已保存的规则 | P0 |
|
||||
| 规则搜索 | 按关键词搜索规则 | P1 |
|
||||
| 规则编辑 | 修改已保存的规则 | P0 |
|
||||
| 规则删除 | 删除不需要的规则 | P0 |
|
||||
| 规则加载 | 一键加载规则配置 | P0 |
|
||||
| 规则复制 | 复制规则配置 | P1 |
|
||||
| 规则导出 | 导出为 JSON 文件 | P1 |
|
||||
| 规则导入 | 从 JSON 文件导入 | P1 |
|
||||
|
||||
## 规则数量限制
|
||||
|
||||
- **最大规则数量**: 20 条
|
||||
- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
|
||||
- **解决方式**: 用户需要删除已有规则后才能保存新规则
|
||||
|
||||
---
|
||||
|
||||
## 数据结构
|
||||
|
||||
> **与源码对齐**：类型定义见 `src/types/testDataGenerator.ts`。规则**不**持久化生成数量与导出格式（由页面 `GenerateOptions` 状态管理）。
|
||||
|
||||
### 规则模板
|
||||
|
||||
```typescript
|
||||
interface DataRule {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
fields: FieldConfig[];
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
lastUsedAt?: number;
|
||||
useCount: number;
|
||||
}
|
||||
```
|
||||
|
||||
### 字段配置
|
||||
|
||||
```typescript
|
||||
interface FieldConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
generatorId: string; // 生成器 ID，对应 lib/generators 中的 id
|
||||
params: Record<string, unknown>;
|
||||
required: boolean;
|
||||
nullRate: number; // 空值率 0-100，仅 required=false 时生效
|
||||
unique: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 功能详情
|
||||
|
||||
### 1. 保存规则
|
||||
|
||||
**触发方式**: 用户点击"保存规则"按钮
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 保存规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 规则信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [电商用户数据 - 测试用 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ 规则描述 (可选): │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 规则预览 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 字段数量: 4 个 │ │
|
||||
│ │ • name (中文姓名) │ │
|
||||
│ │ • email (邮箱地址) │ │
|
||||
│ │ • phone (手机号) │ │
|
||||
│ │ • age (年龄) │ │
|
||||
│ │ │ │
|
||||
│ │ 生成数量: 100 条 │ │
|
||||
│ │ 数据格式: JSON │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**保存逻辑**:
|
||||
|
||||
1. 验证规则名称不为空
|
||||
2. 检查规则数量是否达到上限（20 条）
|
||||
3. 若达上限，`save()` 返回 `null`，UI 应阻止或提示
|
||||
4. 生成唯一 ID，写入 `createdAt`/`updatedAt`，`useCount` 初始为 0
|
||||
5. 调用 `ruleStorage.save()`；仅当返回值非 `null` 时视为成功（`localStorage` 写入失败同样返回 `null`）
|
||||
|
||||
---
|
||||
|
||||
### 2. 规则列表
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 规则管理 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 搜索: [搜索规则名称... ] │
|
||||
│ │
|
||||
│ 规则列表 (已保存 15/20 条) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 电商用户数据 - 测试用 │ │ │
|
||||
│ │ │ ─────────────────────────────────────────────────────── │ │ │
|
||||
│ │ │ 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
|
||||
│ │ │ 4 个字段 | 100 条 | JSON │ │ │
|
||||
│ │ │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ [加载] [复制] [导出] [编辑] [删除] │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入规则] [导出全部] [清空全部] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**列表项信息**:
|
||||
|
||||
- 规则名称
|
||||
- 规则描述
|
||||
- 字段数量、生成数量、数据格式
|
||||
- 创建时间、最后使用时间
|
||||
- 操作按钮
|
||||
|
||||
---
|
||||
|
||||
### 3. 规则搜索
|
||||
|
||||
**搜索逻辑**:
|
||||
|
||||
- 支持按规则名称搜索
|
||||
- 支持按规则描述搜索
|
||||
- 搜索为模糊匹配，不区分大小写
|
||||
|
||||
**实现方式**（`src/utils/ruleStorage.ts`）:
|
||||
|
||||
```typescript
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
|
||||
function searchRules(query: string): DataRule[] {
|
||||
return ruleStorage.search(query);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 规则编辑
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 编辑规则 - 电商用户数据 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 基本信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
|
||||
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 字段配置 (可直接编辑) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ │ │
|
||||
│ │ [+ 添加字段] │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 生成选项 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 数量: [100] 格式: [JSON ▼] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存修改] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**编辑逻辑**:
|
||||
|
||||
1. 加载原规则配置到编辑器
|
||||
2. 用户修改配置
|
||||
3. 点击保存时调用 `ruleStorage.update()`；返回非 `null` 才更新 `updatedAt` 并提示成功
|
||||
|
||||
---
|
||||
|
||||
### 5. 规则删除
|
||||
|
||||
**删除流程**:
|
||||
|
||||
1. 点击删除按钮
|
||||
2. 弹出确认对话框
|
||||
3. 确认后删除规则
|
||||
4. 刷新规则列表
|
||||
|
||||
**确认对话框**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 确认删除 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 确定要删除规则 "电商用户数据" 吗？ │
|
||||
│ │
|
||||
│ 此操作不可撤销。 │
|
||||
│ │
|
||||
│ [取消] [删除] │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 规则加载
|
||||
|
||||
**加载流程**:
|
||||
|
||||
1. 点击"加载"按钮
|
||||
2. 将规则配置应用到当前编辑器
|
||||
3. 更新预览数据
|
||||
4. 记录使用时间和次数
|
||||
|
||||
**实现方式**:
|
||||
|
||||
```typescript
|
||||
function loadRule(ruleId: string): void {
|
||||
const rule = ruleStorage.getById(ruleId);
|
||||
if (!rule) return;
|
||||
|
||||
setFields(rule.fields);
|
||||
ruleStorage.recordUse(ruleId);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. 规则复制
|
||||
|
||||
**复制逻辑**:
|
||||
|
||||
1. 点击"复制"按钮
|
||||
2. 创建规则的副本
|
||||
3. 名称添加「（副本）」后缀（默认 `duplicate(id, '（副本）')`）
|
||||
4. 生成新的 ID
|
||||
5. 保存为新规则
|
||||
|
||||
---
|
||||
|
||||
### 8. 规则导出
|
||||
|
||||
**导出界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导出规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择要导出的规则: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ☑ 电商用户数据 - 测试用 (4个字段, 100条) │ │
|
||||
│ │ ☑ 电商订单数据 - 测试用 (6个字段, 500条) │ │
|
||||
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
|
||||
│ │ │ │
|
||||
│ │ [全选] [全不选] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 导出格式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
|
||||
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导出] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导出格式**（`exportRules()` 返回 `DataRule[]` 的 JSON 字符串，无外层包装）:
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "rule_123456",
|
||||
"name": "电商用户数据 - 测试用",
|
||||
"description": "用于测试用户注册功能",
|
||||
"fields": [],
|
||||
"createdAt": 1704067200000,
|
||||
"updatedAt": 1704067200000,
|
||||
"useCount": 0
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. 规则导入
|
||||
|
||||
**导入界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导入规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择导入方式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从文件导入 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 拖拽文件到这里，或 [点击选择文件] │ │ │
|
||||
│ │ │ 支持格式: .json │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从剪贴板粘贴 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 粘贴 JSON 规则内容... │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 预览导入内容: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 格式验证通过 │ │
|
||||
│ │ 规则数量: 2 个 │ │
|
||||
│ │ • 电商用户数据 (4个字段) │ │
|
||||
│ │ • 电商订单数据 (6个字段) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导入逻辑**:
|
||||
|
||||
1. 解析 JSON 文件
|
||||
2. 验证格式是否正确
|
||||
3. 预览导入内容
|
||||
4. 确认后逐条导入
|
||||
5. 生成新 ID 避免冲突
|
||||
6. 处理导入结果（成功/失败数量）
|
||||
|
||||
---
|
||||
|
||||
## 存储机制
|
||||
|
||||
### 本地存储
|
||||
|
||||
使用 `localStorage`，键名 `testDataGenerator_rules`。API 为**命名导出函数**（见 `src/utils/ruleStorage.ts`）：
|
||||
|
||||
| 函数 | 说明 |
|
||||
| ---- | ---- |
|
||||
| `getAll()` / `getById()` / `getByName()` | 读取 |
|
||||
| `save()` / `update()` / `deleteRule()` / `duplicate()` | 写入；失败时返回 `null` 或 `false` |
|
||||
| `recordUse()` | 递增 `useCount`、更新 `lastUsedAt` |
|
||||
| `search()` / `getRecent()` | 搜索与最近使用 |
|
||||
| `exportRules()` / `importRules()` | 导入导出 JSON 数组 |
|
||||
| `clear()` | 清空全部规则 |
|
||||
|
||||
写入失败（如 `QuotaExceededError`）时，内部 `setAll()` 返回 `false`，`save`/`update` 返回 `null`，`deleteRule` 返回 `false`，并在控制台输出 `[ruleStorage] 保存规则失败`。调用方须检查返回值，避免误报成功。
|
||||
|
||||
```typescript
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
|
||||
const saved = ruleStorage.save({ name: '示例', fields });
|
||||
if (!saved) {
|
||||
// 达上限或 localStorage 不可用
|
||||
}
|
||||
```
|
||||
|
||||
### 存储限制
|
||||
|
||||
- **规则数量限制**: 最多 20 条
|
||||
- localStorage 容量: 5-10MB（浏览器限制）
|
||||
- 单个规则约 1-5KB
|
||||
- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
|
||||
|
||||
---
|
||||
|
||||
## 功能亮点
|
||||
|
||||
| 亮点 | 说明 |
|
||||
| -------- | ------------------------------ |
|
||||
| 本地存储 | 数据保存在浏览器本地，无需后端 |
|
||||
| 快速复用 | 一键加载已保存的规则 |
|
||||
| 导入导出 | 支持 JSON 文件导入导出 |
|
||||
| 使用统计 | 记录使用次数和时间 |
|
||||
| 搜索筛选 | 支持关键词搜索 |
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
+2
-2
@@ -36,7 +36,7 @@ describe('background 菜单注册与分流', () => {
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'jwt',
|
||||
title: '解析 JWT',
|
||||
title: '🔑 解析 JWT',
|
||||
parentId: 'testing-tools-parent',
|
||||
}),
|
||||
);
|
||||
@@ -48,7 +48,7 @@ describe('background 菜单注册与分流', () => {
|
||||
expect(chrome.contextMenus.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
id: 'qrCode-page',
|
||||
title: '网页链接转二维码',
|
||||
title: '🔗 网页链接转二维码',
|
||||
contexts: ['page'],
|
||||
}),
|
||||
);
|
||||
@@ -0,0 +1,189 @@
|
||||
import '../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
import { createAllContextMenus, parseContextMenuClick } from '@/utils/contextMenu';
|
||||
import { saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
export default defineBackground(() => {
|
||||
// 1. 扩展初次安装或更新时，注册右键上下文菜单
|
||||
browser.runtime.onInstalled.addListener(() => {
|
||||
createAllContextMenus();
|
||||
});
|
||||
|
||||
// 2. 右键点击路由
|
||||
browser.contextMenus.onClicked.addListener(async (info, _tab) => {
|
||||
const result = parseContextMenuClick(info.menuItemId as string, info);
|
||||
|
||||
if (!result.success || !result.data) {
|
||||
if (result.error) {
|
||||
console.warn('[Context Menu Warning]', result.error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const { featureKey, payload } = result.data;
|
||||
|
||||
try {
|
||||
const sidePanelState = await browser.storage.local.get('sidePanelOpen');
|
||||
const isSidePanelOpen = sidePanelState.sidePanelOpen === true;
|
||||
|
||||
if (isSidePanelOpen) {
|
||||
await sendMessage(MessageAction.CONTEXT_MENU_CLICKED, { featureKey, payload });
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.debug('[Context Menu] Side panel pipeline is not available:', err);
|
||||
}
|
||||
|
||||
await saveContextMenuData({ featureKey, payload });
|
||||
|
||||
try {
|
||||
await browser.action.openPopup();
|
||||
} catch (err) {
|
||||
console.warn(
|
||||
'[Context Menu] 自动打开 popup 失败，请手动点击扩展图标，暂存数据已安全保留:',
|
||||
err,
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听扩展图标点击事件，安全激活侧边栏
|
||||
browser.action.onClicked.addListener(async (tab) => {
|
||||
if (tab.id) {
|
||||
try {
|
||||
await browser.sidePanel.open({ tabId: tab.id });
|
||||
} catch (err) {
|
||||
console.error('Failed to open side panel via extension action clicked:', err);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 注入主环境脚本（content script 无权访问 chrome.tabs/scripting，委托 background 执行）
|
||||
onMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT, async (message) => {
|
||||
const sender = message.sender as chrome.runtime.MessageSender | undefined;
|
||||
const tabId = sender?.tab?.id;
|
||||
|
||||
if (!tabId) {
|
||||
console.warn('[RightClickRestorer] Injection request missing tabId');
|
||||
return { success: false, message: 'Missing tabId' };
|
||||
}
|
||||
|
||||
try {
|
||||
await browser.scripting.executeScript({
|
||||
target: { tabId },
|
||||
func: () => {
|
||||
'use strict';
|
||||
const w = window as unknown as Record<string, unknown>;
|
||||
if (w.__testingToolsRightClickPatched) return;
|
||||
w.__testingToolsRightClickPatched = true;
|
||||
|
||||
const PROTECTED = ['contextmenu', 'copy', 'paste', 'cut', 'selectstart'];
|
||||
|
||||
/* 1. 屏蔽 MouseEvent.prototype.preventDefault（含 mousedown 右键） */
|
||||
const _origPreventDefault = MouseEvent.prototype.preventDefault;
|
||||
Object.defineProperty(MouseEvent.prototype, 'preventDefault', {
|
||||
value: function (this: MouseEvent) {
|
||||
const t = this.type;
|
||||
if (PROTECTED.includes(t) || (t === 'mousedown' && this.button === 2)) {
|
||||
return;
|
||||
}
|
||||
return _origPreventDefault.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 2. 屏蔽 Event.prototype.stopPropagation / stopImmediatePropagation */
|
||||
const _origStopPropagation = Event.prototype.stopPropagation;
|
||||
Object.defineProperty(Event.prototype, 'stopPropagation', {
|
||||
value: function (this: Event) {
|
||||
if (PROTECTED.includes(this.type)) return;
|
||||
return _origStopPropagation.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
const _origStopImmediatePropagation = Event.prototype.stopImmediatePropagation;
|
||||
Object.defineProperty(Event.prototype, 'stopImmediatePropagation', {
|
||||
value: function (this: Event) {
|
||||
if (PROTECTED.includes(this.type)) return;
|
||||
return _origStopImmediatePropagation.call(this);
|
||||
},
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
/* 3. 拦截 document.oncontextmenu（处理 return false 方式） */
|
||||
let _docOnContextMenu: unknown = null;
|
||||
Object.defineProperty(document, 'oncontextmenu', {
|
||||
get() {
|
||||
return _docOnContextMenu;
|
||||
},
|
||||
set(fn: unknown) {
|
||||
if (typeof fn === 'function') {
|
||||
_docOnContextMenu = function (this: GlobalEventHandlers, e: MouseEvent) {
|
||||
const r = (fn as (this: GlobalEventHandlers, ev: MouseEvent) => unknown).call(
|
||||
this,
|
||||
e,
|
||||
);
|
||||
return r === false ? true : r;
|
||||
};
|
||||
} else {
|
||||
_docOnContextMenu = fn;
|
||||
}
|
||||
},
|
||||
configurable: true,
|
||||
});
|
||||
},
|
||||
world: 'MAIN',
|
||||
});
|
||||
|
||||
return { success: true };
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : String(err);
|
||||
console.error('[RightClickRestorer] executeScript failed:', errorMsg);
|
||||
return { success: false, message: errorMsg };
|
||||
}
|
||||
});
|
||||
|
||||
// 4. 异步刷新请求监听（统一使用 alarms API，避免 MV3 Service Worker 被销毁导致任务丢失）
|
||||
onMessage(MessageAction.RELOAD_TAB, async (message) => {
|
||||
const { tabId, delay = 0 } = message.data;
|
||||
|
||||
const executeReload = () => {
|
||||
browser.tabs.reload(tabId).catch((err) => {
|
||||
console.error('Failed to execute tab reload operation:', err);
|
||||
});
|
||||
};
|
||||
|
||||
if (delay <= 0) {
|
||||
executeReload();
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
const alarmName = `reload-tab-${tabId}-${Date.now()}`;
|
||||
|
||||
// 创建一次性 Alarm，由浏览器内核保障触发（不受 Service Worker 生命周期影响）
|
||||
await browser.alarms.create(alarmName, { when: Date.now() + delay });
|
||||
|
||||
// 兜底清理：若 alarm 因异常未触发，delay 后 5 秒强制移除监听器并清理 alarm
|
||||
const cleanupTimeout = setTimeout(() => {
|
||||
browser.alarms.onAlarm.removeListener(alarmListener);
|
||||
browser.alarms.clear(alarmName).catch(() => {});
|
||||
}, delay + 5000);
|
||||
|
||||
const alarmListener = (alarm: { name: string }) => {
|
||||
if (alarm.name !== alarmName) return;
|
||||
|
||||
clearTimeout(cleanupTimeout);
|
||||
executeReload();
|
||||
browser.alarms.onAlarm.removeListener(alarmListener);
|
||||
browser.alarms.clear(alarmName).catch(() => {});
|
||||
};
|
||||
|
||||
browser.alarms.onAlarm.addListener(alarmListener);
|
||||
|
||||
return { success: true };
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import '../.wxt/types/imports.d.ts';
|
||||
import { initMessageHandler } from './content/messageHandler';
|
||||
|
||||
export default defineContentScript({
|
||||
matches: ['<all_urls>'],
|
||||
runAt: 'document_end',
|
||||
main() {
|
||||
initMessageHandler();
|
||||
},
|
||||
});
|
||||
+11
-3
@@ -3,18 +3,26 @@ import { MessageAction, onMessage } from '@/utils/messages';
|
||||
import { getTextStats } from '@/utils/textStatistics';
|
||||
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
||||
|
||||
function getI18nText(key: string, fallback: string): string {
|
||||
if (typeof chrome !== 'undefined' && chrome.i18n) {
|
||||
return chrome.i18n.getMessage(key) || fallback;
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function convertTimestamp(input: string): string {
|
||||
const invalidText = getI18nText('invalidTimestamp', 'Invalid Timestamp');
|
||||
const num = Number(input.trim());
|
||||
|
||||
if (isNaN(num)) {
|
||||
return '无效时间戳';
|
||||
return invalidText;
|
||||
}
|
||||
|
||||
// 1e12 区分毫秒/秒级时间戳
|
||||
// 1e12 判定毫秒级/秒级时间戳兼容
|
||||
const d = num > 1e12 ? new Date(num) : new Date(num * 1000);
|
||||
|
||||
if (isNaN(d.getTime())) {
|
||||
return '无效时间戳';
|
||||
return invalidText;
|
||||
}
|
||||
|
||||
const year = d.getFullYear();
|
||||
@@ -0,0 +1,5 @@
|
||||
import { initContextMenuHandler } from './contextMenuHandler';
|
||||
|
||||
export function initMessageHandler(): void {
|
||||
initContextMenuHandler();
|
||||
}
|
||||
@@ -22,7 +22,7 @@ function injectStyles(): void {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
visibility: hidden; /* 💡 1. 规整隐藏状态：允许排版引擎计算尺寸，同时阻断视觉呈现 */
|
||||
transform: translateY(-8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
|
||||
pointer-events: none;
|
||||
@@ -125,6 +125,7 @@ function getOrCreatePopover(): HTMLElement {
|
||||
return popover;
|
||||
}
|
||||
|
||||
// 💡 2. 安全防线：字符实体转义沙箱，彻底掐灭任意恶意脚本的执行通道
|
||||
function escapeHtml(text: string): string {
|
||||
const map: Record<string, string> = {
|
||||
'&': '&',
|
||||
@@ -137,11 +138,12 @@ function escapeHtml(text: string): string {
|
||||
}
|
||||
|
||||
function positionPopover(popover: HTMLElement, x: number, y: number): void {
|
||||
// 此时借助 visibility: hidden，元素在隐藏状态下拥有真实的布局高宽
|
||||
const rect = popover.getBoundingClientRect();
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
let left = x + 8;
|
||||
let left = x + 8; // 微微追加水平偏置，防范直接遮挡用户的鼠标落点
|
||||
let top = y + 8;
|
||||
|
||||
if (left + rect.width > viewportWidth - 16) {
|
||||
@@ -160,7 +162,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,
|
||||
@@ -169,6 +171,7 @@ function showPopover(
|
||||
): void {
|
||||
const popover = getOrCreatePopover();
|
||||
|
||||
// 💡 3. 坚固的无障碍绑定：废除违规的行内 inline onclick，改用标准原生节点监听
|
||||
popover.innerHTML = '';
|
||||
|
||||
if (title) {
|
||||
@@ -177,7 +180,7 @@ function showPopover(
|
||||
|
||||
const titleSpan = document.createElement('span');
|
||||
titleSpan.className = 'popover-title';
|
||||
titleSpan.textContent = title;
|
||||
titleSpan.textContent = title; // ✅ 强安全性护航
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.className = 'popover-close';
|
||||
@@ -193,9 +196,10 @@ function showPopover(
|
||||
|
||||
const contentContainer = document.createElement('div');
|
||||
contentContainer.className = 'popover-content';
|
||||
contentContainer.innerHTML = contentHtml;
|
||||
contentContainer.innerHTML = contentHtml; // 内部拼装的方法已提前完成全消毒转义
|
||||
popover.appendChild(contentContainer);
|
||||
|
||||
// 提前移除激活类名，使 visibility: hidden 起效以供测量
|
||||
popover.classList.remove('visible');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
@@ -224,6 +228,7 @@ export function hidePopover(): void {
|
||||
}
|
||||
|
||||
export function showTimestampResult(x: number, y: number, timestamp: string, result: string): void {
|
||||
// 对外部传来的参数先全数塞入 escapeHtml 大闸进行纯氧化清洗
|
||||
const cleanTimestamp = escapeHtml(timestamp);
|
||||
const cleanResult = escapeHtml(result);
|
||||
|
||||
@@ -233,7 +238,7 @@ export function showTimestampResult(x: number, y: number, timestamp: string, res
|
||||
<div class="popover-label">转换结果</div>
|
||||
<div class="popover-value">${cleanResult}</div>
|
||||
`;
|
||||
showPopover(x, y, content, '转换结果');
|
||||
showPopover(x, y, content, '⏰ 时间戳转换');
|
||||
}
|
||||
|
||||
export function showTextStatsResult(
|
||||
@@ -243,6 +248,7 @@ export function showTextStatsResult(
|
||||
stats: { characters: number; words: number; lines: number; bytes: number },
|
||||
): void {
|
||||
const truncatedText = text.length > 50 ? text.substring(0, 50) + '...' : text;
|
||||
// 对选中的脏文本先进行严格转义
|
||||
const cleanText = escapeHtml(truncatedText);
|
||||
|
||||
const content = `
|
||||
@@ -267,5 +273,5 @@ export function showTextStatsResult(
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
showPopover(x, y, content, '统计结果');
|
||||
showPopover(x, y, content, '📊 文本统计');
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
import { SyntheticEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { GripVertical, RefreshCw } from 'lucide-react';
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
type DragEndEvent,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { PageType, StorageSchema } from '@/types/storage';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import {
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
import GlobalSnackbar, { useSnackbarState } from '@/components/GlobalSnackbar';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '#1976d2',
|
||||
success: '#2e7d32',
|
||||
warning: '#e65100',
|
||||
error: '#c62828',
|
||||
secondary: '#9c27b0',
|
||||
info: '#0288d1',
|
||||
};
|
||||
|
||||
const getColorCode = (key: PaletteColorKey): string => PALETTE_COLORS[key];
|
||||
|
||||
const isValidPage = (page: unknown): page is PageType => {
|
||||
return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
|
||||
};
|
||||
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
type WindowType = 'popup' | 'sidepanel' | 'tab';
|
||||
|
||||
interface SortableFeatureRowProps {
|
||||
pageKey: PageType;
|
||||
isLast: boolean;
|
||||
isChecked: boolean;
|
||||
isDisabled: boolean;
|
||||
onToggle: (key: PageType) => void;
|
||||
}
|
||||
|
||||
function SortableFeatureRow({
|
||||
pageKey,
|
||||
isLast,
|
||||
isChecked,
|
||||
isDisabled,
|
||||
onToggle,
|
||||
}: SortableFeatureRowProps) {
|
||||
const { t } = useTranslation(['features']);
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: pageKey,
|
||||
});
|
||||
|
||||
const feature = getFeatureByKey(pageKey);
|
||||
if (!feature) return null;
|
||||
|
||||
const colorKey = feature.themeColorKey ?? 'primary';
|
||||
const colorCode = getColorCode(colorKey);
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
zIndex: isDragging ? 1 : 'auto',
|
||||
position: 'relative' as const,
|
||||
backgroundColor: isDragging ? `${colorCode}0a` : 'transparent',
|
||||
boxShadow: isDragging ? '0 8px 20px rgba(0,0,0,0.08)' : 'none',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`flex items-center justify-between p-4 sm:p-5 transition-all duration-200 hover:bg-muted ${
|
||||
isLast ? '' : 'border-b border-border'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
|
||||
{/* 拖拽手柄 */}
|
||||
<div
|
||||
className="drag-handle text-muted-foreground cursor-grab touch-none transition-colors duration-200 hover:text-foreground active:cursor-grabbing"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
aria-label={`拖拽以调整 ${t(feature.labelKey)} 的位置`}
|
||||
>
|
||||
<GripVertical size={16} />
|
||||
</div>
|
||||
|
||||
{/* 功能图标 */}
|
||||
<div
|
||||
className="flex items-center justify-center w-9 h-9 rounded-xl flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor: `${colorCode}1a`,
|
||||
color: colorCode,
|
||||
}}
|
||||
>
|
||||
{feature.icon && <feature.icon size={20} />}
|
||||
</div>
|
||||
|
||||
{/* 文本信息 */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-bold text-[0.95rem] leading-tight text-foreground">
|
||||
{t(feature.labelKey)}
|
||||
</div>
|
||||
{feature.descriptionKey && (
|
||||
<div
|
||||
className="text-xs text-muted-foreground font-medium mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
title={t(feature.descriptionKey)}
|
||||
>
|
||||
{t(feature.descriptionKey)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 开关 */}
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
onClick={() => onToggle(pageKey)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
|
||||
isChecked ? 'bg-primary' : 'bg-muted'
|
||||
} ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200 ${
|
||||
isChecked ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const { t } = useTranslation(['features', 'common']);
|
||||
|
||||
const initialWindowType = useMemo(() => {
|
||||
if (typeof window === 'undefined') return 'popup';
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const tab = params.get('tab');
|
||||
if (tab === 'popup' || tab === 'sidepanel' || tab === 'tab') {
|
||||
return tab as WindowType;
|
||||
}
|
||||
return 'popup';
|
||||
}, []);
|
||||
|
||||
const [windowType, setWindowType] = useState<WindowType>(initialWindowType);
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>([]);
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>([]);
|
||||
const [isLoaded, setIsLoaded] = useState(false);
|
||||
const { snackbarProps, showMessage } = useSnackbarState();
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
||||
);
|
||||
|
||||
const configKeys = useMemo(() => {
|
||||
switch (windowType) {
|
||||
case 'sidepanel':
|
||||
return {
|
||||
visible: 'app/sidepanelVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/sidepanelPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'tab':
|
||||
return {
|
||||
visible: 'app/tabVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/tabPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
case 'popup':
|
||||
default:
|
||||
return {
|
||||
visible: 'app/popupVisiblePages' as keyof StorageSchema,
|
||||
order: 'app/popupPageOrder' as keyof StorageSchema,
|
||||
};
|
||||
}
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('tab', windowType);
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
}, [windowType]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadConfig = async () => {
|
||||
setIsLoaded(false);
|
||||
try {
|
||||
const [savedVisible, savedOrder] = await Promise.all([
|
||||
storageUtil.get(configKeys.visible, getDefaultVisibleFeatureKeys()),
|
||||
storageUtil.get(configKeys.order, getDefaultPageOrder()),
|
||||
]);
|
||||
setVisiblePages(
|
||||
isValidPageList(savedVisible) ? savedVisible : getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
setPageOrder(isValidPageList(savedOrder) ? savedOrder : getDefaultPageOrder());
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error);
|
||||
setVisiblePages(getDefaultVisibleFeatureKeys());
|
||||
setPageOrder(getDefaultPageOrder());
|
||||
} finally {
|
||||
setIsLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
loadConfig().catch(console.error);
|
||||
}, [configKeys]);
|
||||
|
||||
const showToast = (message: string, severity: 'success' | 'info' | 'warning') => {
|
||||
showMessage(message, { severity });
|
||||
};
|
||||
|
||||
const handlePageToggle = async (page: PageType) => {
|
||||
const isCurrentlyVisible = visiblePages.includes(page);
|
||||
let newPages: PageType[];
|
||||
|
||||
if (isCurrentlyVisible) {
|
||||
if (visiblePages.length <= 1) {
|
||||
showToast('至少需要保留一个可见页面', 'warning');
|
||||
return;
|
||||
}
|
||||
newPages = visiblePages.filter((p) => p !== page);
|
||||
} else {
|
||||
newPages = [...visiblePages, page];
|
||||
}
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.visible, newPages);
|
||||
setVisiblePages(newPages);
|
||||
const feature = getFeatureByKey(page);
|
||||
const label = feature ? t(feature.labelKey) : page;
|
||||
showToast(`已${isCurrentlyVisible ? '隐藏' : '显示'} ${label}`, 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to save config:', error);
|
||||
showToast('保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = async (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = pageOrder.indexOf(active.id as PageType);
|
||||
const newIndex = pageOrder.indexOf(over.id as PageType);
|
||||
if (oldIndex < 0 || newIndex < 0) return;
|
||||
|
||||
const newOrder = arrayMove(pageOrder, oldIndex, newIndex);
|
||||
setPageOrder(newOrder);
|
||||
|
||||
try {
|
||||
await storageUtil.set(configKeys.order, newOrder);
|
||||
} catch (error) {
|
||||
console.error('Failed to save order:', error);
|
||||
showToast('排序保存失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestoreDefaults = async () => {
|
||||
try {
|
||||
const defaults = getDefaultVisibleFeatureKeys();
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
await Promise.all([
|
||||
storageUtil.set(configKeys.visible, defaults),
|
||||
storageUtil.set(configKeys.order, defaultOrder),
|
||||
]);
|
||||
|
||||
setVisiblePages(defaults);
|
||||
setPageOrder(defaultOrder);
|
||||
showToast('已恢复当前模式默认设置', 'success');
|
||||
} catch (error) {
|
||||
console.error('Failed to restore defaults:', error);
|
||||
showToast('恢复失败', 'warning');
|
||||
}
|
||||
};
|
||||
|
||||
const handleWindowTypeChange = (_event: SyntheticEvent, newType: WindowType) => {
|
||||
if (newType !== null) {
|
||||
setWindowType(newType);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isLoaded) {
|
||||
return (
|
||||
<div className="flex justify-center items-center min-h-screen">
|
||||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-background flex flex-col">
|
||||
<PageErrorBoundary>
|
||||
{/* 顶部标题与导航栏 */}
|
||||
<div className="w-full bg-background border-b border-border pt-8 sm:pt-12 pb-0 px-4 sm:px-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Tab 与恢复按钮同行 */}
|
||||
<div className="flex items-end justify-between border-b-0">
|
||||
<div className="flex-1 flex">
|
||||
{(['popup', 'sidepanel', 'tab'] as WindowType[]).map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={(e) => handleWindowTypeChange(e, type)}
|
||||
className={`px-4 sm:px-6 py-2 text-[0.9rem] font-bold transition-colors duration-200 ${
|
||||
windowType === type
|
||||
? 'text-primary border-b-2 border-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
{type === 'popup' ? 'Popup 窗口' : type === 'sidepanel' ? '侧边栏' : '标签页'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRestoreDefaults}
|
||||
className="mb-1 ml-2 p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-lg transition-colors duration-200"
|
||||
title="恢复当前模式默认"
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<div className="flex-1 p-4 sm:p-8">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="rounded-2xl border border-border overflow-hidden bg-card shadow-sm">
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={pageOrder} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col">
|
||||
{pageOrder.map((key, index, array) => {
|
||||
const isChecked = visiblePages.includes(key);
|
||||
const isDisabled = isChecked && visiblePages.length === 1;
|
||||
return (
|
||||
<SortableFeatureRow
|
||||
key={key}
|
||||
pageKey={key}
|
||||
isLast={index === array.length - 1}
|
||||
isChecked={isChecked}
|
||||
isDisabled={isDisabled}
|
||||
onToggle={handlePageToggle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageErrorBoundary>
|
||||
|
||||
<GlobalSnackbar {...snackbarProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import App from '../App';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
getDefaultVisibleFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getFeatureByKey,
|
||||
} from '@/config/features';
|
||||
|
||||
// Mock storageUtil
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('Options App', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
it('合法数据应正常加载并显示正确的功能列表', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认可见的功能都被渲染出来了
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 visiblePages 数据应回退到默认值', async () => {
|
||||
const defaultVisible = getDefaultVisibleFeatureKeys();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve(['invalidPage', 'anotherInvalid']);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认值的功能仍然被渲染（非法数据被回退）
|
||||
for (const key of defaultVisible) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature && key !== 'dashboard') {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非法 pageOrder 数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve(['notARealPage', 123, null]);
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认顺序的功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('非数组数据应回退到默认值', async () => {
|
||||
const defaultOrder = getDefaultPageOrder();
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key.includes('VisiblePages')) {
|
||||
return Promise.resolve('not-an-array');
|
||||
}
|
||||
if (key.includes('PageOrder')) {
|
||||
return Promise.resolve({ foo: 'bar' });
|
||||
}
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 验证默认功能都被渲染
|
||||
for (const key of defaultOrder) {
|
||||
const feature = getFeatureByKey(key);
|
||||
if (feature) {
|
||||
expect(screen.getByText(feature.labelKey)).toBeInTheDocument();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>扩展设置 - Testing Tools</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
@@ -0,0 +1,47 @@
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import { getEntryPointType } from '@/config/features';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch(console.error);
|
||||
};
|
||||
|
||||
const entryType = useMemo(() => getEntryPointType(), []);
|
||||
|
||||
const routerConfig = useMemo(() => {
|
||||
if (entryType === 'tab') {
|
||||
return {
|
||||
syncKey: 'app/tabRoute' as const,
|
||||
visiblePagesKey: 'app/tabVisiblePages' as const,
|
||||
pageOrderKey: 'app/tabPageOrder' as const,
|
||||
};
|
||||
}
|
||||
return {
|
||||
syncKey: 'app/popupRoute' as const,
|
||||
visiblePagesKey: 'app/popupVisiblePages' as const,
|
||||
pageOrderKey: 'app/popupPageOrder' as const,
|
||||
};
|
||||
}, [entryType]);
|
||||
|
||||
return (
|
||||
<RouterProvider
|
||||
syncKey={routerConfig.syncKey}
|
||||
visiblePagesKey={routerConfig.visiblePagesKey}
|
||||
pageOrderKey={routerConfig.pageOrderKey}
|
||||
>
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<div className="app flex flex-col w-[400px] max-w-[400px] min-w-[400px] h-[600px] min-h-[600px] overflow-hidden bg-background sm:w-screen sm:max-w-none sm:min-w-0 sm:h-screen sm:min-h-0">
|
||||
<TopBar onOpenOptions={handleOpenOptions} />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</SnackbarProvider>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
@@ -3,25 +3,12 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools</title>
|
||||
<title>Testing Tools - 标签页</title>
|
||||
<meta name="manifest.type" content="browser_action" />
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var raw = localStorage.getItem('snapshot/app/themeMode');
|
||||
var mode = raw ? JSON.parse(raw) : 'system';
|
||||
if (mode !== 'light' && mode !== 'dark' && mode !== 'system') mode = 'system';
|
||||
var isDark =
|
||||
mode === 'dark' ||
|
||||
(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
if (isDark) document.documentElement.classList.add('dark');
|
||||
} catch (_error) {}
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
/* Force initial popup size before React hydration */
|
||||
html, body {
|
||||
width: 450px;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -33,6 +20,13 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* If opened in a tab (mode=tab), reset the fixed size */
|
||||
@media screen and (min-width: 600px) {
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -1,6 +1,7 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/styles/shell.css';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
@@ -0,0 +1,194 @@
|
||||
import { MessageAction, onMessage, sendMessage } from '@/utils/messages';
|
||||
|
||||
const BADGE_ID = 'testing-tools-right-click-restorer-badge';
|
||||
const BADGE_STYLE_ID = 'testing-tools-right-click-restorer-badge-style';
|
||||
|
||||
let isRestored = false;
|
||||
|
||||
function updateBadge(): void {
|
||||
const badge = document.getElementById(BADGE_ID);
|
||||
if (badge) {
|
||||
badge.style.opacity = isRestored ? '1' : '0';
|
||||
}
|
||||
}
|
||||
|
||||
function createBadge(): void {
|
||||
if (document.getElementById(BADGE_ID)) return;
|
||||
|
||||
if (!document.getElementById(BADGE_STYLE_ID)) {
|
||||
const style = document.createElement('style');
|
||||
style.id = BADGE_STYLE_ID;
|
||||
style.textContent = `
|
||||
#${BADGE_ID} {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
z-index: 2147483646;
|
||||
padding: 6px 12px;
|
||||
background: #2e7d32;
|
||||
color: #ffffff;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#${BADGE_ID} {
|
||||
background: #4caf50;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
const badge = document.createElement('div');
|
||||
badge.id = BADGE_ID;
|
||||
badge.textContent = '\u53f3\u952e\u5df2\u89e3\u9501';
|
||||
document.body.appendChild(badge);
|
||||
}
|
||||
|
||||
/* ======================== Main World 注入 ======================== */
|
||||
|
||||
async function injectMainWorldScript(): Promise<void> {
|
||||
try {
|
||||
const response = await sendMessage(MessageAction.INJECT_MAIN_WORLD_SCRIPT);
|
||||
if (!response.success) {
|
||||
console.error('[RightClickRestorer] Background injection failed:', response.message);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[RightClickRestorer] Failed to request main world injection:', err);
|
||||
}
|
||||
}
|
||||
|
||||
/* ======================== Isolated World 事件拦截 ======================== */
|
||||
|
||||
function installEventIntercepts(): void {
|
||||
window.addEventListener(
|
||||
'contextmenu',
|
||||
(e) => {
|
||||
if (!isRestored) return;
|
||||
e.stopPropagation();
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
// 部分网站在 mousedown 阶段阻止 contextmenu
|
||||
window.addEventListener(
|
||||
'mousedown',
|
||||
(e) => {
|
||||
if (!isRestored) return;
|
||||
if (e.button === 2 || (e.buttons & 2) !== 0) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
},
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
/* ======================== 遮罩层穿透 ======================== */
|
||||
|
||||
const MEDIA_TAGS = new Set(['IMG', 'VIDEO', 'CANVAS', 'SVG']);
|
||||
|
||||
function initMousePenetration(): void {
|
||||
window.addEventListener(
|
||||
'mousedown',
|
||||
(e) => {
|
||||
if (!isRestored || e.button !== 2) return;
|
||||
|
||||
const elements = document.elementsFromPoint(e.clientX, e.clientY);
|
||||
if (!elements.length) return;
|
||||
|
||||
let targetMedia: HTMLElement | null = null;
|
||||
for (const el of elements) {
|
||||
if (MEDIA_TAGS.has(el.tagName)) {
|
||||
targetMedia = el as HTMLElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!targetMedia) return;
|
||||
|
||||
const modified: Array<{ el: HTMLElement; original: string | null }> = [];
|
||||
let foundMedia = false;
|
||||
|
||||
for (const el of elements) {
|
||||
const htmlEl = el as HTMLElement;
|
||||
|
||||
if (el === targetMedia) {
|
||||
foundMedia = true;
|
||||
const original = htmlEl.style.pointerEvents || null;
|
||||
htmlEl.style.setProperty('pointer-events', 'all', 'important');
|
||||
modified.push({ el: htmlEl, original });
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!foundMedia) {
|
||||
const original = htmlEl.style.pointerEvents || null;
|
||||
htmlEl.style.setProperty('pointer-events', 'none', 'important');
|
||||
modified.push({ el: htmlEl, original });
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
for (const { el, original } of modified) {
|
||||
if (original === null || original === '') {
|
||||
el.style.removeProperty('pointer-events');
|
||||
} else {
|
||||
el.style.pointerEvents = original;
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
},
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
/* ======================== 激活保护 ======================== */
|
||||
|
||||
async function activateProtection(): Promise<void> {
|
||||
if (isRestored) return;
|
||||
|
||||
await injectMainWorldScript();
|
||||
|
||||
// 再次检查，防止并发调用导致重复注册
|
||||
if (isRestored) return;
|
||||
|
||||
installEventIntercepts();
|
||||
initMousePenetration();
|
||||
|
||||
isRestored = true;
|
||||
updateBadge();
|
||||
}
|
||||
|
||||
/* ======================== 消息通信 ======================== */
|
||||
|
||||
function initMessaging(): void {
|
||||
onMessage(MessageAction.RESTORE_RIGHT_CLICK, async () => {
|
||||
await activateProtection();
|
||||
return { success: true, restored: isRestored };
|
||||
});
|
||||
|
||||
onMessage(MessageAction.QUERY_RIGHT_CLICK_STATUS, () => {
|
||||
return { success: true, restored: isRestored };
|
||||
});
|
||||
}
|
||||
|
||||
/* ======================== 入口 ======================== */
|
||||
|
||||
export default defineContentScript({
|
||||
matches: ['<all_urls>'],
|
||||
runAt: 'document_start',
|
||||
main() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', createBadge, { once: true });
|
||||
} else {
|
||||
createBadge();
|
||||
}
|
||||
initMessaging();
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
import { useEffect } from 'react';
|
||||
import RouterProvider from '@/providers/RouterProvider';
|
||||
import TopBar from '@/components/TopBar';
|
||||
import RouterContainer from '@/components/RouterContainer';
|
||||
import ErrorBoundary from '@/components/ErrorBoundary';
|
||||
import { SnackbarProvider } from '@/components/GlobalSnackbar';
|
||||
import { MessageAction, sendMessage } from '@/utils/messages';
|
||||
|
||||
export default function App() {
|
||||
const handleOpenOptions = () => {
|
||||
chrome.runtime.openOptionsPage().catch((err) => {
|
||||
console.error('Failed to open options page:', err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: true });
|
||||
return () => {
|
||||
sendMessage(MessageAction.SIDE_PANEL_STATE_CHANGED, { isOpen: false });
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<RouterProvider defaultRoute="dashboard" syncKey="app/sidepanelRoute">
|
||||
<SnackbarProvider initialOptions={{ autoHideDuration: 1500 }}>
|
||||
<div className="app flex flex-col h-screen w-full overflow-hidden">
|
||||
<TopBar onOpenOptions={handleOpenOptions} />
|
||||
<ErrorBoundary>
|
||||
<RouterContainer />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
</SnackbarProvider>
|
||||
</RouterProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Testing Tools - Side Panel</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import AppRoot from '@/providers/AppRoot';
|
||||
import '@/i18n';
|
||||
import '@/src/index.css';
|
||||
import App from './App.tsx';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<AppRoot>
|
||||
<App />
|
||||
</AppRoot>,
|
||||
);
|
||||
+22
-2
@@ -5,13 +5,16 @@ import reactPlugin from 'eslint-plugin-react';
|
||||
import globals from 'globals';
|
||||
|
||||
export default tseslint.config(
|
||||
// 1. 全局物理隔离：彻底掐灭对构建产物与配置本身的干扰
|
||||
{
|
||||
ignores: ['dist', '.output', '.wxt', 'node_modules', 'eslint.config.ts', 'eslint.config.js'],
|
||||
},
|
||||
|
||||
// 2. 注入 JavaScript 与 TypeScript 的官方大师级推荐规则集
|
||||
js.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
|
||||
// 3. 针对测试文件专属沙箱：解耦强类型死锁，放行 any，容忍未消费变量
|
||||
{
|
||||
files: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}', 'setupTests.ts'],
|
||||
rules: {
|
||||
@@ -23,8 +26,16 @@ export default tseslint.config(
|
||||
},
|
||||
},
|
||||
|
||||
// 4. 核心业务全受控大管线（Hooks, Entrypoints, Components 统一护航）
|
||||
{
|
||||
files: ['src/**/*.{ts,tsx}'],
|
||||
files: [
|
||||
'hooks/**/*.{ts,tsx}',
|
||||
'entrypoints/**/*.{ts,tsx}',
|
||||
'pages/**/*.{ts,tsx}',
|
||||
'utils/**/*.{ts,tsx}',
|
||||
'components/**/*.{ts,tsx}',
|
||||
'services/**/*.{ts,tsx}',
|
||||
],
|
||||
ignores: ['**/__tests__/**', '**/*.test.{ts,tsx}', '**/*.spec.{ts,tsx}'],
|
||||
|
||||
languageOptions: {
|
||||
@@ -33,13 +44,17 @@ export default tseslint.config(
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
},
|
||||
|
||||
// 💡 修复点 1（史诗级治愈）：废除脆弱的 project 硬编码路径！
|
||||
// 拥抱 typescript-eslint 官方推荐的 projectService 常驻动态类型调度中枢。
|
||||
// 它会在内存中全自动、流式为所有新建、悬空或暂存文件分配编译上下文，
|
||||
// 彻底终结 "file is not included in any tsconfig" 的全量崩溃黑洞！
|
||||
parserOptions: {
|
||||
projectService: true,
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
},
|
||||
|
||||
// 挂载插件沙箱
|
||||
plugins: {
|
||||
react: reactPlugin,
|
||||
'react-hooks': reactHooks,
|
||||
@@ -51,19 +66,24 @@ export default tseslint.config(
|
||||
},
|
||||
},
|
||||
|
||||
// 💡 修复点 2：高精对齐 React 19 / JSX Runtime 的全量生产质检规则大闸
|
||||
rules: {
|
||||
// 激活 react-hooks 官方推荐规则
|
||||
...reactHooks.configs.recommended.rules,
|
||||
// 激活 react 官方精选规则（排除旧版 React 必须手动 import 的历史包袱）
|
||||
...reactPlugin.configs.recommended.rules,
|
||||
...reactPlugin.configs['jsx-runtime'].rules,
|
||||
|
||||
'react/prop-types': 'off',
|
||||
|
||||
// 清洗原生未消费变量冲突，统一交由 TS 高阶哨兵接管
|
||||
'no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'warn',
|
||||
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
|
||||
],
|
||||
|
||||
// 彻底关闭老旧的 JSX 作用域检查，全面契合 React 19 核心美学
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
+144
@@ -0,0 +1,144 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import type { CustomDetector } from 'i18next-browser-languagedetector'; // 💡 1. 引入官方强类型探测器接口
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 导入 Day.js 本地化语言包
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
// 同步加载全局核心命名空间
|
||||
import commonZh from './locales/zh/common.json';
|
||||
import featuresZh from './locales/zh/features.json';
|
||||
import commonEn from './locales/en/common.json';
|
||||
import featuresEn from './locales/en/features.json';
|
||||
|
||||
const resources = {
|
||||
zh: {
|
||||
common: commonZh,
|
||||
features: featuresZh,
|
||||
},
|
||||
en: {
|
||||
common: commonEn,
|
||||
features: featuresEn,
|
||||
},
|
||||
};
|
||||
|
||||
export const SUPPORTED_LANGUAGES = ['zh', 'en'] as const;
|
||||
export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
|
||||
|
||||
const LANGUAGE_STORAGE_KEY = 'app/language';
|
||||
const LANGUAGE_SNAPSHOT_KEY = 'snapshot/app/language';
|
||||
|
||||
/**
|
||||
* 将任意语言标识归一化为受支持的核心代码
|
||||
*/
|
||||
export const normalizeLanguage = (lng: string): SupportedLanguage => {
|
||||
if (!lng) return 'en';
|
||||
return lng.toLowerCase().startsWith('zh') ? 'zh' : 'en';
|
||||
};
|
||||
|
||||
/**
|
||||
* 严格校验语言安全边界
|
||||
*/
|
||||
const isValidLanguage = (lng: unknown): lng is SupportedLanguage => {
|
||||
return typeof lng === 'string' && (SUPPORTED_LANGUAGES as readonly string[]).includes(lng);
|
||||
};
|
||||
|
||||
/**
|
||||
* 同步从 localStorage 获取语言快照（消除异步闪烁）
|
||||
*/
|
||||
const getSyncLanguageSnapshot = (): SupportedLanguage | null => {
|
||||
try {
|
||||
const val = localStorage.getItem(LANGUAGE_SNAPSHOT_KEY);
|
||||
if (!val) return null;
|
||||
const parsed = JSON.parse(val) as unknown;
|
||||
return isValidLanguage(parsed) ? parsed : null;
|
||||
} catch (error) {
|
||||
console.error('[i18n] Failed to parse sync language snapshot from localStorage:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 💡 2. 强类型接口重塑：显式绑定 CustomDetector 类型，
|
||||
// 告诉 TS 编译器这些方法将被全局 Languagedetector 框架隐式调用，彻底治愈“未使用函数”报错！
|
||||
const chromeStorageDetector: CustomDetector = {
|
||||
name: 'chromeStorage',
|
||||
lookup() {
|
||||
return undefined;
|
||||
},
|
||||
cacheUserLanguage(lng: string) {
|
||||
const target = normalizeLanguage(lng);
|
||||
// 💡 修复点：对异步写盘操作追加 void 算子或 catch，吞掉 Promise 被忽略警告
|
||||
storageUtil.set(LANGUAGE_STORAGE_KEY, target).catch((err) => {
|
||||
console.error('[i18n Detector Error] Failed to write back language state:', err);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const detector = new LanguageDetector();
|
||||
detector.addDetector(chromeStorageDetector);
|
||||
|
||||
const syncLng = getSyncLanguageSnapshot();
|
||||
|
||||
// 💡 3. 修复点：对 i18n.init() 返回的异步 Promise 前方追加 void 斩断依赖链，放行编译
|
||||
void i18n
|
||||
.use(detector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
lng: syncLng || undefined,
|
||||
ns: ['common', 'features'],
|
||||
defaultNS: 'common',
|
||||
debug: false,
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
detection: {
|
||||
order: ['chromeStorage', 'navigator'],
|
||||
caches: ['chromeStorage'],
|
||||
},
|
||||
});
|
||||
|
||||
// 监听语言变更
|
||||
i18n.on('languageChanged', (lng) => {
|
||||
const normalizedLng = normalizeLanguage(lng);
|
||||
dayjs.locale(normalizedLng === 'zh' ? 'zh-cn' : 'en');
|
||||
localStorage.setItem(LANGUAGE_SNAPSHOT_KEY, JSON.stringify(normalizedLng));
|
||||
});
|
||||
|
||||
// 初始化时从长期异步存储中恢复校准
|
||||
storageUtil
|
||||
.get(LANGUAGE_STORAGE_KEY)
|
||||
.then((lng) => {
|
||||
const rawTargetLng = lng || syncLng;
|
||||
|
||||
if (!rawTargetLng) {
|
||||
const initialLng = normalizeLanguage(i18n.language);
|
||||
|
||||
// 💡 修复点：对初始化同步写盘追加安全的 Promise .catch() 异常隔离防护罩
|
||||
storageUtil.set(LANGUAGE_STORAGE_KEY, initialLng).catch((err) => {
|
||||
console.error('[i18n Init Error] Persistent sync collapsed:', err);
|
||||
});
|
||||
|
||||
if (initialLng !== normalizeLanguage(i18n.language)) {
|
||||
// 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
|
||||
void i18n.changeLanguage(initialLng);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLng = normalizeLanguage(String(rawTargetLng));
|
||||
|
||||
if (isValidLanguage(targetLng) && targetLng !== normalizeLanguage(i18n.language)) {
|
||||
// 💡 修复点：对 changeLanguage 异步微任务进行显式 void 断链安全隔离
|
||||
void i18n.changeLanguage(targetLng);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[i18n Context Error] Async local storage lookup collapsed:', err);
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"pageTitle": "Base64 Converter",
|
||||
"pageSubtitle": "Encode and decode text, files, and images with Base64",
|
||||
"textMode": "Text",
|
||||
"fileMode": "File",
|
||||
"imageMode": "Image",
|
||||
"encode": "Encode",
|
||||
"decode": "Decode",
|
||||
"clear": "Clear",
|
||||
"textInputPlaceholder": "Enter text to encode to Base64...",
|
||||
"base64InputPlaceholder": "Enter Base64 string to decode...",
|
||||
"base64Output": "Base64 Output",
|
||||
"textOutput": "Decoded Text Output",
|
||||
"copyRaw": "Copy Raw Base64",
|
||||
"copyDataUri": "Copy Data URI",
|
||||
"clickOrDropToFile": "Click or drop a file here",
|
||||
"clickOrDropToImage": "Click or drop an image here",
|
||||
"clickOrDropToReplace": "Click or drop to replace the file",
|
||||
"maxFileSize": "Maximum file size: {{max}}",
|
||||
"supportedFormats": "Supports PNG, JPG, WEBP, GIF, BMP, SVG, etc.",
|
||||
"fileSizeExceeded": "File size exceeds the limit (max {{max}})",
|
||||
"unsupportedImageType": "Unsupported image format",
|
||||
"conversionFailed": "Conversion failed",
|
||||
"originalSize": "Original Size",
|
||||
"encodedSize": "Encoded Size",
|
||||
"invalidBase64": "Invalid Base64 string",
|
||||
"binaryDataDetected": "Input appears to be binary data (e.g. an image). Please switch to the Image tab.",
|
||||
"imageDataUriHint": "Detected an image data URI — please use the Image tab to decode it.",
|
||||
"switchToImageMode": "Switch to Image mode",
|
||||
"download": "Download",
|
||||
"decodedFileName": "Decoded file name",
|
||||
"decodeBase64Placeholder": "Enter Base64 or data URI to decode...",
|
||||
"decodedFileOutput": "Decoded File",
|
||||
"decodedImageOutput": "Decoded Image",
|
||||
"inferredMimeType": "Inferred MIME type",
|
||||
"decodedSize": "Decoded size"
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"appName": "Testing Tools",
|
||||
"buttons": {
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"confirm": "Confirm",
|
||||
"copy": "Copy",
|
||||
"clear": "Clear",
|
||||
"refresh": "Refresh",
|
||||
"toggleLanguage": "Switch Language",
|
||||
"toggleTheme": "Toggle theme",
|
||||
"themeMode": {
|
||||
"light": "Switch to dark mode",
|
||||
"dark": "Switch to system mode",
|
||||
"system": "Switch to light mode"
|
||||
},
|
||||
"search": "Search tools...",
|
||||
"back": "Back",
|
||||
"clearSearch": "Clear search",
|
||||
"recentSearch": "Recent search",
|
||||
"noResults": "No tools found",
|
||||
"openInTab": "Open in tab",
|
||||
"settings": "Settings"
|
||||
},
|
||||
"messages": {
|
||||
"copySuccess": "Copied to clipboard",
|
||||
"copyError": "Copy failed"
|
||||
},
|
||||
"textInputArea": {
|
||||
"clear": "Clear",
|
||||
"copyContent": "Copy content",
|
||||
"cleared": "Cleared",
|
||||
"placeholder": "placeholder text"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"dashboard": {
|
||||
"title": "Dashboard"
|
||||
},
|
||||
"timestamp": {
|
||||
"title": "Timestamp",
|
||||
"description": "Unix millisecond conversion and formatting"
|
||||
},
|
||||
"storageCleaner": {
|
||||
"title": "Storage Cleaner",
|
||||
"description": "Clean cache, cookies, and local storage"
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "QR Code Tools",
|
||||
"description": "Generate QR code for the selected URL"
|
||||
},
|
||||
"textStatistics": {
|
||||
"title": "Text Statistics",
|
||||
"description": "Real-time analysis of text characters, words, and bytes"
|
||||
},
|
||||
"jwt": {
|
||||
"title": "JWT Parser",
|
||||
"description": "JSON Web Token decoding and viewing"
|
||||
},
|
||||
"jsonDiff": {
|
||||
"title": "JSON Tools",
|
||||
"description": "Diff, format, YAML/TOML conversion, and minify"
|
||||
},
|
||||
"base64Converter": {
|
||||
"title": "Base64 Converter",
|
||||
"description": "Encode text, files, and images to Base64"
|
||||
},
|
||||
"markdownToHtml": {
|
||||
"title": "Markdown to HTML",
|
||||
"description": "Real-time Markdown conversion and HTML preview"
|
||||
},
|
||||
"htmlToMarkdown": {
|
||||
"title": "HTML to Markdown",
|
||||
"description": "Real-time HTML conversion and Markdown preview"
|
||||
},
|
||||
"rightClickRestorer": {
|
||||
"title": "Right Click Restorer",
|
||||
"description": "Detect and restore disabled browser right-click menus"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"pageTitle": "HTML to Markdown",
|
||||
"pageSubtitle": "Convert HTML to Markdown in real-time",
|
||||
"splitMode": "Split",
|
||||
"previewMode": "Preview",
|
||||
"markdownMode": "Markdown",
|
||||
"clear": "Clear",
|
||||
"inputLabel": "HTML Input",
|
||||
"previewLabel": "Markdown Preview",
|
||||
"markdownOutputLabel": "Markdown Output",
|
||||
"inputPlaceholder": "Enter your HTML content here...",
|
||||
"charCount": "{{count}} chars",
|
||||
"copyMarkdown": "Copy Markdown",
|
||||
"download": "Download",
|
||||
"emptyHint": "Enter HTML content to see the conversion result"
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"pageTitle": "JSON Diff",
|
||||
"pageSubtitle": "Compare differences between two JSON values",
|
||||
"leftPlaceholder": "Enter the original JSON...",
|
||||
"rightPlaceholder": "Enter the target JSON...",
|
||||
"leftLabel": "Original JSON",
|
||||
"rightLabel": "Target JSON",
|
||||
"compareButton": "Compare",
|
||||
"clearButton": "Clear",
|
||||
"sideBySideMode": "Side by side",
|
||||
"unifiedMode": "Unified",
|
||||
"previousDiff": "Previous",
|
||||
"nextDiff": "Next",
|
||||
"noDiffs": "No differences",
|
||||
"diffCount": "{{count}} differences",
|
||||
"invalidJson": "Invalid JSON format",
|
||||
"emptyHint": "Enter JSON on both sides and click Compare",
|
||||
"added": "Added",
|
||||
"removed": "Removed",
|
||||
"modified": "Modified"
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"formatTitle": "JSON Formatter",
|
||||
"formatSubtitle": "Beautify and format JSON data",
|
||||
"inputPlaceholder": "Enter JSON to format...",
|
||||
"formatButton": "Format",
|
||||
"clearButton": "Clear",
|
||||
"sortKeys": "Sort Keys",
|
||||
"sortKeysTooltip": "Sort JSON object keys in alphabetical order",
|
||||
"indentSize": "Indent",
|
||||
"indentSpaces": "{{count}} spaces",
|
||||
"outputLabel": "Formatted Result",
|
||||
"copySuccess": "Copied",
|
||||
"copyFail": "Copy failed",
|
||||
"noContent": "Nothing to copy",
|
||||
"invalidJson": "Invalid JSON format",
|
||||
"emptyHint": "Enter JSON and click Format",
|
||||
"originalSize": "Original size",
|
||||
"formattedSize": "Formatted size",
|
||||
"diffMode": "Diff",
|
||||
"formatMode": "Format",
|
||||
"yamlMode": "YAML",
|
||||
"tomlMode": "TOML",
|
||||
"minifyMode": "Minify",
|
||||
"yamlTitle": "JSON to YAML",
|
||||
"yamlSubtitle": "Convert JSON data to YAML format",
|
||||
"yamlModeInputPlaceholder": "Enter JSON to convert...",
|
||||
"yamlModeOutputLabel": "YAML Result",
|
||||
"yamlModeEmptyHint": "Enter JSON and click Convert",
|
||||
"convertButton": "Convert",
|
||||
"tomlTitle": "JSON to TOML",
|
||||
"tomlSubtitle": "Convert JSON data to TOML format",
|
||||
"tomlModeInputPlaceholder": "Enter JSON to convert...",
|
||||
"tomlModeOutputLabel": "TOML Result",
|
||||
"tomlModeEmptyHint": "Enter JSON and click Convert",
|
||||
"minifyTitle": "JSON Minifier",
|
||||
"minifySubtitle": "Compress JSON into a compact single-line format",
|
||||
"minifyModeInputPlaceholder": "Enter JSON to minify...",
|
||||
"minifyModeOutputLabel": "Minified Result",
|
||||
"minifyModeEmptyHint": "Enter JSON and click Minify",
|
||||
"minifyButton": "Minify"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"pageTitle": "JWT Parser",
|
||||
"pageSubtitle": "JSON Web Token decoding and viewing",
|
||||
"placeholder": "Paste Encoded JWT here...",
|
||||
"headerTitle": "HEADER: Algorithm & Token Type",
|
||||
"payloadTitle": "PAYLOAD: Data",
|
||||
"signatureTitle": "Signature",
|
||||
"noSignature": "No Signature",
|
||||
"invalidFormat": "Unable to parse",
|
||||
"errors": {
|
||||
"invalidBase64String": "Invalid base64url string",
|
||||
"failedToDecode": "Failed to decode base64url: ",
|
||||
"invalidFormat": "Invalid JWT format: expected 3 parts separated by .",
|
||||
"parseHeaderFailed": "Failed to parse Header: ",
|
||||
"parsePayloadFailed": "Failed to parse Payload: "
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"pageTitle": "Markdown to HTML",
|
||||
"pageSubtitle": "Convert Markdown to HTML in real-time with preview",
|
||||
"splitMode": "Split",
|
||||
"previewMode": "Preview",
|
||||
"htmlMode": "HTML",
|
||||
"clear": "Clear",
|
||||
"print": "Print",
|
||||
"download": "Download",
|
||||
"inputLabel": "Markdown Input",
|
||||
"previewLabel": "Live Preview",
|
||||
"htmlOutputLabel": "HTML Output",
|
||||
"inputPlaceholder": "Enter your Markdown content here...",
|
||||
"charCount": "{{count}} chars",
|
||||
"copyHtml": "Copy HTML",
|
||||
"downloadSuccess": "File downloaded successfully",
|
||||
"printSuccess": "Print window opened"
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"pageTitle": "QR Code Tools",
|
||||
"pageSubtitle": "Generate and parse QR codes",
|
||||
|
||||
"generateMode": "Generate QR Code",
|
||||
"parseMode": "Parse QR Code",
|
||||
|
||||
"urlToQr": "Text to QR Code",
|
||||
"qrToUrl": "QR Code to Text",
|
||||
|
||||
"urlInputLabel": "Enter URL or Text",
|
||||
"urlInputPlaceholder": "Enter URL or text content, QR code will be generated automatically",
|
||||
"generateButton": "Generate QR Code",
|
||||
"generating": "Generating...",
|
||||
|
||||
"qrCodeWillShow": "QR code will be shown here",
|
||||
"downloadButton": "Download QR Code",
|
||||
"copyQrButton": "Copy QR Code Image",
|
||||
|
||||
"qrCodeSuccess": "QR code generated successfully",
|
||||
"qrCodeDownloadSuccess": "QR code downloaded successfully",
|
||||
"qrCodeCopySuccess": "QR code copied to clipboard",
|
||||
|
||||
"selectImage": "Please select a QR code image",
|
||||
"parseSuccess": "QR code parsed successfully",
|
||||
"noQrDetected": "No QR code detected, please ensure the image is clear and contains a QR code",
|
||||
"parseError": "Failed to parse QR code, please try again",
|
||||
"generateError": "Failed to generate QR code, please check the input",
|
||||
"copyError": "Copy failed, please try again",
|
||||
|
||||
"imagePasted": "Image pasted, parsing...",
|
||||
"imagePasteError": "Failed to paste image, please try again",
|
||||
"imageCleared": "Image cleared",
|
||||
"clickToUpload": "Click, drag, or paste to upload QR code image",
|
||||
"supportFormats": "Supports PNG, JPG, WEBP, Base64 formats",
|
||||
|
||||
"parseButton": "Parse QR Code",
|
||||
"parsing": "Parsing...",
|
||||
"resultLabel": "Parsing Result",
|
||||
"copyTooltip": "Copy",
|
||||
|
||||
"enterUrlError": "Please enter URL or text",
|
||||
"clickToChange": "Click to change image",
|
||||
|
||||
"pasteHint": "Supports Ctrl+V to paste images or Base64 strings",
|
||||
"autoGenerateHint": "QR code will be generated automatically after input",
|
||||
"autoParseHint": "QR code will be parsed automatically after upload"
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"title": "Right Click Restorer",
|
||||
"description": "Detect and restore disabled browser right-click menus",
|
||||
"loading": "Loading...",
|
||||
"currentDomain": "Current Domain",
|
||||
"statusLocked": "Locked",
|
||||
"statusUnlocked": "Unlocked",
|
||||
"unsupported": "Unsupported",
|
||||
"unsupportedDesc": "The current page is a browser internal or extension page. Right-click unlock is not available. Please switch to a regular webpage.",
|
||||
"unlockDesc": "Click the button below to temporarily unlock the right-click menu for the current website. You will need to unlock again after refreshing the page.",
|
||||
"unlockBtn": "Unlock Right Click",
|
||||
"alreadyUnlocked": "Right Click Unlocked"
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"pageTitle": "Storage Cleaner",
|
||||
"pageSubtitle": "Clear cache, cookies, and local storage",
|
||||
"loading": "Loading...",
|
||||
"occupied": "Occupied {{size}}",
|
||||
"cleaning": "Cleaning...",
|
||||
"cleanNow": "Clean Now",
|
||||
"autoRefresh": "Auto refresh page after cleaning",
|
||||
"selectAll": "Select all items",
|
||||
"cleanSuccess": "Cleaning complete",
|
||||
"cleanError": "Cleaning failed",
|
||||
"noData": "No data",
|
||||
"countUnit": "items",
|
||||
"errorNoTab": "Unable to get current tab",
|
||||
"errorRestricted": "Storage cleaning is not supported on this page",
|
||||
"cleanSuccessReload": "Cleaning successful, reloading page...",
|
||||
"errorStandardOnly": "Storage cleaning only works on standard web pages",
|
||||
"confirmTitle": "Confirm Clear Data?",
|
||||
"confirmDesc": "You are about to permanently delete the following selected storage items from the current page.",
|
||||
"irreversible": "This action is irreversible",
|
||||
"confirmAction": "Confirm Clear",
|
||||
"cleanedSummary": "Cleaned {{items}}",
|
||||
"noDataToClean": "No storage data found to clean",
|
||||
"partialFailure": "Some items failed to clean",
|
||||
"options": {
|
||||
"localStorage": "Local Storage",
|
||||
"sessionStorage": "Session Storage",
|
||||
"indexedDB": "IndexedDB",
|
||||
"cookies": "Cookies",
|
||||
"cacheStorage": "Cache Storage",
|
||||
"serviceWorkers": "Service Workers"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"pageTitle": "Text Statistics",
|
||||
"pageSubtitle": "Real-time analysis of characters, words, lines, and byte size",
|
||||
"placeholder": "Type or paste text here...",
|
||||
"characters": "Characters",
|
||||
"words": "Words",
|
||||
"lines": "Lines",
|
||||
"bytes": "Byte Size"
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"pageTitle": "Timestamp Conversion",
|
||||
"pageSubtitle": "Unix millisecond conversion and formatting",
|
||||
"tsToDate": "Timestamp → Date",
|
||||
"dateToTs": "Date → Timestamp",
|
||||
"placeholderTs": "Enter timestamp...",
|
||||
"placeholderDate": "YYYY-MM-DD HH:mm:ss",
|
||||
"unitMs": "Millisecond (ms)",
|
||||
"unitS": "Second (s)",
|
||||
"convertButton": "Convert Now",
|
||||
"currentTs": "Current Timestamp",
|
||||
"useNowTooltip": "Use this value",
|
||||
"copyTsTooltip": "Copy timestamp",
|
||||
"usedSuccess": "Using current timestamp",
|
||||
"resultLabel": "Conversion Result",
|
||||
"copyResultTooltip": "Copy result",
|
||||
"relativeTime": "Relative Time",
|
||||
"iso8601": "ISO 8601",
|
||||
"utcTime": "UTC Time",
|
||||
"copyTooltip": "Copy",
|
||||
"resultEmpty": "Enter a value and click convert",
|
||||
"errors": {
|
||||
"invalidNumber": "Invalid number",
|
||||
"invalidTimestamp": "Invalid timestamp",
|
||||
"invalidFormat": "Format error"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"pageTitle": "Base64 转换器",
|
||||
"pageSubtitle": "文本、文件与图像的 Base64 编码与解码",
|
||||
"textMode": "文本",
|
||||
"fileMode": "文件",
|
||||
"imageMode": "图像",
|
||||
"encode": "编码",
|
||||
"decode": "解码",
|
||||
"clear": "清空",
|
||||
"textInputPlaceholder": "输入需要编码为 Base64 的文本...",
|
||||
"base64InputPlaceholder": "输入需要解码的 Base64 字符串...",
|
||||
"base64Output": "Base64 编码结果",
|
||||
"textOutput": "解码文本结果",
|
||||
"copyRaw": "复制纯 Base64",
|
||||
"copyDataUri": "复制 Data URI",
|
||||
"clickOrDropToFile": "点击或拖拽文件到此处",
|
||||
"clickOrDropToImage": "点击或拖拽图像到此处",
|
||||
"clickOrDropToReplace": "点击或拖拽以替换文件",
|
||||
"maxFileSize": "最大文件大小：{{max}}",
|
||||
"supportedFormats": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
|
||||
"fileSizeExceeded": "文件大小超出限制（最大 {{max}}）",
|
||||
"unsupportedImageType": "不支持的图像格式",
|
||||
"conversionFailed": "转换失败",
|
||||
"originalSize": "原始大小",
|
||||
"encodedSize": "编码大小",
|
||||
"invalidBase64": "Base64 字符串无效",
|
||||
"binaryDataDetected": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
|
||||
"imageDataUriHint": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
|
||||
"switchToImageMode": "切换到图像模式",
|
||||
"download": "下载",
|
||||
"decodedFileName": "解码后文件名",
|
||||
"decodeBase64Placeholder": "输入需要解码的 Base64 或 data URI...",
|
||||
"decodedFileOutput": "解码文件",
|
||||
"decodedImageOutput": "解码图像",
|
||||
"inferredMimeType": "推断的 MIME 类型",
|
||||
"decodedSize": "解码大小"
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"appName": "测试工具",
|
||||
"buttons": {
|
||||
"save": "保存",
|
||||
"cancel": "取消",
|
||||
"confirm": "确认",
|
||||
"copy": "复制",
|
||||
"clear": "清理",
|
||||
"refresh": "刷新",
|
||||
"toggleLanguage": "切换语言",
|
||||
"toggleTheme": "切换主题",
|
||||
"themeMode": {
|
||||
"light": "切换到深色模式",
|
||||
"dark": "切换到系统模式",
|
||||
"system": "切换到浅色模式"
|
||||
},
|
||||
"search": "搜索工具...",
|
||||
"back": "返回",
|
||||
"clearSearch": "清除搜索",
|
||||
"recentSearch": "最近搜索",
|
||||
"noResults": "未找到相关工具",
|
||||
"openInTab": "在标签页打开",
|
||||
"settings": "设置"
|
||||
},
|
||||
"messages": {
|
||||
"copySuccess": "已复制到剪贴板",
|
||||
"copyError": "复制失败"
|
||||
},
|
||||
"textInputArea": {
|
||||
"clear": "清空",
|
||||
"copyContent": "复制内容",
|
||||
"cleared": "已清空",
|
||||
"placeholder": "请输入文本"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"dashboard": {
|
||||
"title": "仪表盘"
|
||||
},
|
||||
"timestamp": {
|
||||
"title": "时间戳",
|
||||
"description": "Unix 毫秒数转换与格式化"
|
||||
},
|
||||
"storageCleaner": {
|
||||
"title": "存储清理",
|
||||
"description": "清理缓存、Cookies 及本地存储"
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "二维码工具",
|
||||
"description": "生成当前选中的 URL 的二维码"
|
||||
},
|
||||
"textStatistics": {
|
||||
"title": "文本统计",
|
||||
"description": "实时分析文本字符、单词及字节"
|
||||
},
|
||||
"jwt": {
|
||||
"title": "JWT 解析",
|
||||
"description": "JSON Web Token 解码与查看"
|
||||
},
|
||||
"jsonDiff": {
|
||||
"title": "JSON 工具",
|
||||
"description": "差异比较、格式化、YAML/TOML 转换及压缩"
|
||||
},
|
||||
"base64Converter": {
|
||||
"title": "Base64 转换器",
|
||||
"description": "文本、文件与图像的 Base64 编码转换"
|
||||
},
|
||||
"markdownToHtml": {
|
||||
"title": "Markdown 转 HTML",
|
||||
"description": "实时 Markdown 转换与 HTML 预览"
|
||||
},
|
||||
"htmlToMarkdown": {
|
||||
"title": "HTML 转 Markdown",
|
||||
"description": "实时 HTML 转换与 Markdown 预览"
|
||||
},
|
||||
"rightClickRestorer": {
|
||||
"title": "右键恢复",
|
||||
"description": "检测并恢复被网站禁用的浏览器右键菜单"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"pageTitle": "HTML 转 Markdown",
|
||||
"pageSubtitle": "实时将 HTML 转换为 Markdown 格式",
|
||||
"splitMode": "分屏",
|
||||
"previewMode": "预览",
|
||||
"markdownMode": "Markdown",
|
||||
"clear": "清空",
|
||||
"inputLabel": "HTML 输入",
|
||||
"previewLabel": "Markdown 预览",
|
||||
"markdownOutputLabel": "Markdown 输出",
|
||||
"inputPlaceholder": "在此输入 HTML 内容...",
|
||||
"charCount": "{{count}} 字符",
|
||||
"copyMarkdown": "复制 Markdown",
|
||||
"download": "下载",
|
||||
"emptyHint": "输入 HTML 内容以查看转换结果"
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"pageTitle": "JSON 差异比较",
|
||||
"pageSubtitle": "对比两个 JSON 数据的差异",
|
||||
"leftPlaceholder": "输入原始 JSON...",
|
||||
"rightPlaceholder": "输入目标 JSON...",
|
||||
"leftLabel": "原始 JSON",
|
||||
"rightLabel": "目标 JSON",
|
||||
"compareButton": "比较",
|
||||
"clearButton": "清空",
|
||||
"sideBySideMode": "并排",
|
||||
"unifiedMode": "统一",
|
||||
"previousDiff": "上一个",
|
||||
"nextDiff": "下一个",
|
||||
"noDiffs": "无差异",
|
||||
"diffCount": "{{count}} 处差异",
|
||||
"invalidJson": "无效的 JSON 格式",
|
||||
"emptyHint": "输入两侧 JSON 后点击比较",
|
||||
"added": "新增",
|
||||
"removed": "删除",
|
||||
"modified": "修改"
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"formatTitle": "JSON 格式化",
|
||||
"formatSubtitle": "美化和格式化 JSON 数据",
|
||||
"inputPlaceholder": "输入需要格式化的 JSON...",
|
||||
"formatButton": "格式化",
|
||||
"clearButton": "清空",
|
||||
"sortKeys": "键名排序",
|
||||
"sortKeysTooltip": "按字母顺序对 JSON 对象键进行排序",
|
||||
"indentSize": "缩进",
|
||||
"indentSpaces": "{{count}} 个空格",
|
||||
"outputLabel": "格式化结果",
|
||||
"copySuccess": "复制成功",
|
||||
"copyFail": "复制失败",
|
||||
"noContent": "无内容可复制",
|
||||
"invalidJson": "无效的 JSON 格式",
|
||||
"emptyHint": "输入 JSON 后点击格式化",
|
||||
"originalSize": "原始大小",
|
||||
"formattedSize": "格式化后大小",
|
||||
"diffMode": "差异比较",
|
||||
"formatMode": "格式化",
|
||||
"yamlMode": "YAML",
|
||||
"tomlMode": "TOML",
|
||||
"minifyMode": "压缩",
|
||||
"yamlTitle": "JSON 转 YAML",
|
||||
"yamlSubtitle": "将 JSON 数据转换为 YAML 格式",
|
||||
"yamlModeInputPlaceholder": "输入需要转换的 JSON...",
|
||||
"yamlModeOutputLabel": "YAML 结果",
|
||||
"yamlModeEmptyHint": "输入 JSON 后点击转换",
|
||||
"convertButton": "转换",
|
||||
"tomlTitle": "JSON 转 TOML",
|
||||
"tomlSubtitle": "将 JSON 数据转换为 TOML 格式",
|
||||
"tomlModeInputPlaceholder": "输入需要转换的 JSON...",
|
||||
"tomlModeOutputLabel": "TOML 结果",
|
||||
"tomlModeEmptyHint": "输入 JSON 后点击转换",
|
||||
"minifyTitle": "JSON 压缩",
|
||||
"minifySubtitle": "将 JSON 压缩为紧凑的单行格式",
|
||||
"minifyModeInputPlaceholder": "输入需要压缩的 JSON...",
|
||||
"minifyModeOutputLabel": "压缩结果",
|
||||
"minifyModeEmptyHint": "输入 JSON 后点击压缩",
|
||||
"minifyButton": "压缩"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"pageTitle": "JWT 解析",
|
||||
"pageSubtitle": "JSON Web Token 解码与查看",
|
||||
"placeholder": "在此粘贴 JWT 令牌 (Encoded JWT)...",
|
||||
"headerTitle": "HEADER: 算法 & 令牌类型",
|
||||
"payloadTitle": "PAYLOAD: 数据",
|
||||
"signatureTitle": "签名",
|
||||
"noSignature": "无签名",
|
||||
"invalidFormat": "无法解析",
|
||||
"errors": {
|
||||
"invalidBase64String": "无效的 Base64URL 字符串",
|
||||
"failedToDecode": "Base64URL 解码失败：",
|
||||
"invalidFormat": "JWT 格式错误：必须包含三个由 . 分隔的部分",
|
||||
"parseHeaderFailed": "解析 Header 失败：",
|
||||
"parsePayloadFailed": "解析 Payload 失败："
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"pageTitle": "Markdown 转 HTML",
|
||||
"pageSubtitle": "实时将 Markdown 转换为 HTML 并预览",
|
||||
"splitMode": "分屏",
|
||||
"previewMode": "预览",
|
||||
"htmlMode": "HTML",
|
||||
"clear": "清空",
|
||||
"print": "打印",
|
||||
"download": "下载",
|
||||
"inputLabel": "Markdown 输入",
|
||||
"previewLabel": "实时预览",
|
||||
"htmlOutputLabel": "HTML 输出",
|
||||
"inputPlaceholder": "在此输入 Markdown 内容...",
|
||||
"charCount": "{{count}} 字符",
|
||||
"copyHtml": "复制 HTML",
|
||||
"downloadSuccess": "文件下载成功",
|
||||
"printSuccess": "打印窗口已打开"
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"pageTitle": "二维码工具",
|
||||
"pageSubtitle": "生成和解析二维码",
|
||||
|
||||
"generateMode": "生成二维码",
|
||||
"parseMode": "解析二维码",
|
||||
|
||||
"urlToQr": "文本转二维码",
|
||||
"qrToUrl": "二维码转文本",
|
||||
|
||||
"urlInputLabel": "输入 URL 或文本",
|
||||
"urlInputPlaceholder": "请输入 URL 或文本内容，将自动生成二维码",
|
||||
"generateButton": "生成二维码",
|
||||
"generating": "生成中...",
|
||||
|
||||
"qrCodeWillShow": "二维码将显示在这里",
|
||||
"downloadButton": "下载二维码",
|
||||
"copyQrButton": "复制二维码",
|
||||
|
||||
"qrCodeSuccess": "二维码生成成功",
|
||||
"qrCodeDownloadSuccess": "二维码下载成功",
|
||||
"qrCodeCopySuccess": "二维码已复制到剪贴板",
|
||||
|
||||
"selectImage": "请选择二维码图片",
|
||||
"parseSuccess": "二维码解析成功",
|
||||
"noQrDetected": "未检测到二维码，请确保图片清晰且包含二维码",
|
||||
"parseError": "解析二维码失败，请重试",
|
||||
"generateError": "生成二维码失败，请检查输入内容",
|
||||
"copyError": "复制失败，请重试",
|
||||
|
||||
"imagePasted": "图片粘贴成功，正在解析...",
|
||||
"imagePasteError": "粘贴图片失败，请重试",
|
||||
"imageCleared": "图片已清除",
|
||||
"clickToUpload": "点击、拖拽或粘贴上传二维码图片",
|
||||
"supportFormats": "支持 PNG、JPG、WEBP、Base64 格式",
|
||||
|
||||
"parseButton": "解析二维码",
|
||||
"parsing": "解析中...",
|
||||
"resultLabel": "解析结果",
|
||||
"copyTooltip": "复制",
|
||||
|
||||
"enterUrlError": "请输入 URL 或文本",
|
||||
"clickToChange": "点击更换图片",
|
||||
|
||||
"pasteHint": "支持 Ctrl+V 粘贴图片或 Base64 字符串",
|
||||
"autoGenerateHint": "输入内容后将自动生成二维码",
|
||||
"autoParseHint": "上传图片后将自动解析二维码"
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"title": "右键恢复",
|
||||
"description": "检测并恢复被网站禁用的浏览器右键菜单",
|
||||
"loading": "正在加载...",
|
||||
"currentDomain": "当前域名",
|
||||
"statusLocked": "未解锁",
|
||||
"statusUnlocked": "已解锁",
|
||||
"unsupported": "不支持",
|
||||
"unsupportedDesc": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
|
||||
"unlockDesc": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
|
||||
"unlockBtn": "解锁当前网站右键",
|
||||
"alreadyUnlocked": "右键已解锁"
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"pageTitle": "存储清理",
|
||||
"pageSubtitle": "清理缓存、Cookies 及本地存储",
|
||||
"loading": "加载中...",
|
||||
"occupied": "已占用 {{size}}",
|
||||
"cleaning": "正在清理...",
|
||||
"cleanNow": "立即清理",
|
||||
"autoRefresh": "清理后自动刷新页面",
|
||||
"selectAll": "全选所有项",
|
||||
"cleanSuccess": "清理完成",
|
||||
"cleanError": "清理失败",
|
||||
"noData": "无数据",
|
||||
"countUnit": "个",
|
||||
"errorNoTab": "无法获取当前标签页",
|
||||
"errorRestricted": "存储清理功能不支持此页面",
|
||||
"cleanSuccessReload": "清理成功，即将刷新页面",
|
||||
"errorStandardOnly": "存储清理功能仅适用于标准网页",
|
||||
"confirmTitle": "确认清理数据？",
|
||||
"confirmDesc": "您将永久删除当前页面的以下选定存储项。",
|
||||
"irreversible": "此操作不可撤销",
|
||||
"confirmAction": "确认清理",
|
||||
"cleanedSummary": "清理了 {{items}}",
|
||||
"noDataToClean": "该页面没有可清理的存储数据",
|
||||
"partialFailure": "部分清理失败",
|
||||
"options": {
|
||||
"localStorage": "Local Storage",
|
||||
"sessionStorage": "Session Storage",
|
||||
"indexedDB": "IndexedDB",
|
||||
"cookies": "Cookies",
|
||||
"cacheStorage": "Cache Storage",
|
||||
"serviceWorkers": "Service Workers"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user