Compare commits
54 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 雨霖铃
|
ec92afa294 | ||
|
雨霖铃
|
618f3c36f2 | ||
|
雨霖铃
|
24c83de56d | ||
|
雨霖铃
|
9c5f5c8cfe | ||
|
雨霖铃
|
016173a9c5 | ||
|
雨霖铃
|
30d3561726 | ||
|
雨霖铃
|
1f9288f780 | ||
|
雨霖铃
|
355a94d116 | ||
|
雨霖铃
|
3f73adc015 | ||
|
雨霖铃
|
86870864a9 | ||
|
雨霖铃
|
1a285fc4c1 | ||
|
雨霖铃
|
9a0c8ba850 | ||
|
雨霖铃
|
6c7b7294b4 | ||
|
雨霖铃
|
a2e07a9115 | ||
|
雨霖铃
|
2464a5fea6 | ||
|
雨霖铃
|
78f5292b00 | ||
|
雨霖铃
|
5a2589cc57 | ||
|
雨霖铃
|
64db60d75e | ||
|
雨霖铃
|
7090ba3251 | ||
|
雨霖铃
|
31b6edf06b | ||
|
雨霖铃
|
a374bf456d | ||
|
雨霖铃
|
ea10b27c14 | ||
|
雨霖铃
|
40443c8fc5 | ||
|
雨霖铃
|
ee4a45630e | ||
|
雨霖铃
|
4a423889d9 | ||
|
雨霖铃
|
ee78e314d3 | ||
|
雨霖铃
|
ee77c97b56 | ||
|
雨霖铃
|
aa8b84af50 | ||
|
雨霖铃
|
707f17ac84 | ||
|
雨霖铃
|
af0b2d8ed1 | ||
|
雨霖铃
|
49e7f1ea55 | ||
|
雨霖铃
|
1a92e88934 | ||
|
雨霖铃
|
2b84eda24f | ||
|
雨霖铃
|
7f22b95aa2 | ||
|
雨霖铃
|
9990d86270 | ||
|
雨霖铃
|
ea0552e8aa | ||
|
雨霖铃
|
97098c3abe | ||
|
雨霖铃
|
7afce94d93 | ||
|
雨霖铃
|
e2b76a5f86 | ||
|
雨霖铃
|
1ab79785b6 | ||
|
雨霖铃
|
c40b66b703 | ||
|
雨霖铃
|
f55fd4338d | ||
|
雨霖铃
|
27c1cf37e3 | ||
|
雨霖铃
|
2520d72eb1 | ||
|
LingandRX
|
4d038203a7 | ||
|
LingandRX
|
2c45ddada9 | ||
|
LingandRX
|
a0b1ade662 | ||
|
雨霖铃
|
d964e27c9d | ||
|
LingandRX
|
359326c6da | ||
|
雨霖铃
|
10644fae95 | ||
|
雨霖铃
|
77f722b575 | ||
|
LingandRX
|
0624b609be | ||
|
Ubuntu
|
f551428142 | ||
|
LingandRX
|
1ae057ccfa |
@@ -0,0 +1,17 @@
|
||||
# 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`
|
||||
+18
-2
@@ -14,6 +14,11 @@ stats-*.json
|
||||
.wxt
|
||||
.vitest
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
@@ -30,5 +35,16 @@ stats-*.json
|
||||
.qoder/*
|
||||
dev/*
|
||||
|
||||
docs/*
|
||||
!docs/VISUAL_STYLE_GUIDE.md
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Test coverage
|
||||
coverage/
|
||||
|
||||
# IDE files
|
||||
*.code-workspace
|
||||
|
||||
# Other
|
||||
*.tsbuildinfo
|
||||
*.tsxbuildinfo
|
||||
|
||||
+10
-3
@@ -1,6 +1,13 @@
|
||||
# pre-push: 严格检查，阻塞有问题的代码推送到远程
|
||||
# 类型检查
|
||||
# 类型检查（全项目，因为类型错误可能跨文件传播）
|
||||
npx tsc --noEmit
|
||||
|
||||
# ESLint 严格检查（不允许 warning）
|
||||
npx eslint . --max-warnings=0
|
||||
# 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、Markdown 等测试效率工具。
|
||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
|
||||
|
||||
## 核心命令
|
||||
|
||||
@@ -18,27 +18,9 @@ npm run test:watch # vitest 监视模式
|
||||
npm run test:coverage # 带覆盖率的测试
|
||||
```
|
||||
|
||||
运行单个测试: `npx vitest run path/to/file.test.ts`
|
||||
|
||||
## 验证流程
|
||||
|
||||
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`
|
||||
|
||||
## WXT 生成文件
|
||||
|
||||
- `.wxt/` 目录由 `postinstall` 自动执行 `wxt prepare` 生成，包含 TypeScript 类型声明和扩展的 tsconfig。
|
||||
- 生产构建输出到 `.output/` 目录。
|
||||
- `tsconfig.json` 继承自 `./.wxt/tsconfig.json`。
|
||||
详见 [CI 配置](./.github/CI.md)
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -54,6 +36,7 @@ src/ # 源代码根目录
|
||||
utils/ # 工具函数与服务抽象
|
||||
types/ # TypeScript 类型声明
|
||||
lib/ # 通用工具函数（cn、utils）
|
||||
workers/ # Web Worker（数据生成等耗时任务）
|
||||
public/ # 静态资源（图标、_locales 等）
|
||||
```
|
||||
|
||||
@@ -72,7 +55,7 @@ src/pages/FeatureName/
|
||||
|
||||
- 页面入口组件统一命名为 `Index`，通过 `export default function Index()` 导出
|
||||
- Hook 负责所有状态管理和业务逻辑，通过返回值暴露给页面
|
||||
- 子组件可以独立调用 `useI18n` 等全局 Hook
|
||||
- 子组件可以独立调用全局 Hook
|
||||
- 当 `index.tsx` 超过 150 行时，必须拆分为 UI + Hook 模式
|
||||
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
||||
|
||||
@@ -84,7 +67,6 @@ src/pages/FeatureName/
|
||||
|
||||
**存储**: 所有 Chrome Storage 键必须在 `src/types/storage.d.ts` 的 `StorageSchema` 中定义，键名使用 kebab-case 格式（如 `app/currentRoute`）。
|
||||
使用 `src/utils/chromeStorage.ts` 及其 Hook。Router 同时使用 `chrome.storage.local` 和 `localStorage` 做快照以消除首屏闪烁。
|
||||
修改 StorageSchema 时，必须在 `src/utils/chromeStorage.ts` 添加版本迁移函数，并在测试中覆盖迁移场景。
|
||||
|
||||
**通信**: 使用 `@webext-core/messaging`，协议定义在 `src/utils/messages.ts`。
|
||||
|
||||
@@ -100,39 +82,21 @@ src/pages/FeatureName/
|
||||
- 全局变量: `vitest/globals` (describe, it, expect 等无需导入)
|
||||
- Setup 文件: `vitest.setup.ts` 自动 mock:
|
||||
- `chrome.*` / `browser.*` API (storage, tabs, runtime, cookies 等)
|
||||
- `@/utils/chromeI18n` (从 `public/_locales/zh/messages.json` 加载真实翻译)
|
||||
- `window.matchMedia`
|
||||
- 测试文件命名: `__tests__/*.test.{ts,tsx}` 或 `*.test.{ts,tsx}`
|
||||
- Mock 模式: 使用 `vi.mock()` 进行模块级 mock，避免在测试文件中重复 mock 代码
|
||||
- 测试工具: `@testing-library/react` + `@testing-library/user-event` 进行组件测试
|
||||
|
||||
## i18n (chrome.i18n)
|
||||
|
||||
项目使用 Chrome 扩展标准的 `chrome.i18n` API 进行本地化，通过 `src/utils/chromeI18n.ts` 提供类型安全的 React Hook 包装。
|
||||
|
||||
- **翻译文件**: `public/_locales/{zh,en}/messages.json`（Chrome 扩展标准格式）
|
||||
- **默认语言**: `zh`（在 `wxt.config.ts` 的 `manifest.default_locale` 中配置）
|
||||
- **使用方式**: `import { useI18n } from '@/utils/chromeI18n'`
|
||||
- **翻译键格式**:
|
||||
- 直接 key: `t('dashboard_title')` → 查找 `dashboard_title`
|
||||
- 命名空间格式（兼容旧用法）: `t('common:buttons.search')` → 查找 `common_buttons_search`
|
||||
- 带命名空间参数: `useI18n(['common', 'features'])`，会自动尝试 `common_key`、`features_key`
|
||||
- **占位符支持**: `t('router_notFoundDescription', { entryPointType: 'popup' })`
|
||||
- **Hook 返回值**: `{ t, i18n: { language, changeLanguage }, isLoaded }`
|
||||
- **回退策略**: 当翻译 key 未命中时，返回 key 本身（开发模式下在控制台记录 warning）
|
||||
- **限制**: `chrome.i18n` 无法动态切换语言，语言跟随浏览器设置，切换后需刷新页面
|
||||
|
||||
## 新功能开发清单
|
||||
|
||||
1. 在 `src/types/storage.d.ts` 添加 `PageType` 联合类型
|
||||
2. 在 `src/config/features.tsx` 的 `FEATURES` 数组添加配置（指定 key、翻译键、图标、三种渲染模式的组件）
|
||||
3. 在 `src/pages/` 创建页面组件 (懒加载)：
|
||||
- `index.tsx` — UI 组件，使用 `useI18n` 获取翻译
|
||||
- `useFeatureName.ts` — 业务逻辑 Hook
|
||||
- `index.tsx` — UI 组件
|
||||
- `use{FeatureName}.ts` — 业务逻辑 Hook
|
||||
- `constants.ts` — 常量（可选）
|
||||
4. 在 `public/_locales/zh/messages.json`（及 `en/messages.json`）添加翻译
|
||||
5. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`
|
||||
6. 添加对应的单元测试
|
||||
4. 如需新权限，更新 `wxt.config.ts` 的 `manifest.permissions`；如有不使用的权限，需移除
|
||||
5. 添加对应的单元测试
|
||||
|
||||
## 代码规范
|
||||
|
||||
@@ -143,11 +107,13 @@ src/pages/FeatureName/
|
||||
- 图标: 使用 `lucide-react` 图标库
|
||||
- 格式: Prettier (`.prettierrc`: 100 字符宽, 单引号, 尾逗号 all, LF 换行)
|
||||
- ESLint 使用 `typescript-eslint` 的 `projectService: true`（无需手动维护 project 路径）
|
||||
- **Git Commit**: 必须使用中文描述，遵循 Conventional Commits 规范（如 `fix(组件名): 描述`、`feat(功能名): 描述`）
|
||||
- **测试维护**: 新增/编辑已有功能/组件时，需要针对相关的测试进行更新
|
||||
|
||||
## 关键外部库（非显而易见的）
|
||||
|
||||
- `@webext-core/messaging` — 扩展消息通信
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理）
|
||||
- `@dnd-kit` — 拖拽排序（用于页面顺序管理和字段列表排序）
|
||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||
- `dayjs` — 日期处理（时间戳转换）
|
||||
- `sonner` — Toast 通知（替代传统 snackbar）
|
||||
|
||||
@@ -8,61 +8,72 @@
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 🚀 Dashboard 首页
|
||||
### Dashboard 首页
|
||||
|
||||
- **工具导航**: 快速访问所有可用工具.
|
||||
- **个性化定制**: 支持自定义工具的排序和可见性.
|
||||
- **实时预览**: 在卡片上直接查看实时数据（如当前时间戳）.
|
||||
|
||||
### ⏰ 时间戳转换工具
|
||||
### 时间戳转换工具
|
||||
|
||||
- **实时显示**: 毫秒级精度显示当前系统时间.
|
||||
- **双向转换**: 日期字符串与 Unix 时间戳（秒/毫秒）之间的无缝转换.
|
||||
- **多时区支持**: 预设常用时区（亚洲/上海、美洲/纽约、欧洲/伦敦），支持快速切换.
|
||||
- **快捷操作**: 一键复制转换结果，支持多种格式.
|
||||
|
||||
### 🧹 存储清理工具
|
||||
### 存储清理工具
|
||||
|
||||
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
||||
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
||||
- **细粒度控制**: 可根据需要选择特定的清理项.
|
||||
- **自动刷新**: 提供清理后自动刷新页面的选项，确保状态同步.
|
||||
|
||||
### 📝 文本统计工具
|
||||
### 文本统计工具
|
||||
|
||||
- **实时分析**: 键入即统计，无需额外操作.
|
||||
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
||||
- **性能优化**: 采用高性能分词算法，支持大文本处理.
|
||||
|
||||
### 🔑 JWT 解析工具
|
||||
### JWT 解析工具
|
||||
|
||||
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
||||
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据，方便阅读.
|
||||
- **安全检查**: 自动去除 `Bearer` 前缀，处理异常输入并提供友好提示.
|
||||
- **签名查看**: 展示 JWT 签名部分，辅助验证令牌完整性.
|
||||
|
||||
### 🖱️ 右键恢复工具
|
||||
### 右键恢复工具
|
||||
|
||||
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
||||
- **一键恢复**: 解除网站对右键菜单的限制，恢复复制、粘贴等基础操作.
|
||||
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
||||
|
||||
### 🖼️ 二维码工具
|
||||
### 二维码工具
|
||||
|
||||
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码，支持下载.
|
||||
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
||||
|
||||
### 🔄 JSON 工具
|
||||
### JSON 工具
|
||||
|
||||
- **差异比较**: 对比两段 JSON 数据，高亮展示差异.
|
||||
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
||||
|
||||
### 🧰 Base64 转换器
|
||||
### Base64 转换器
|
||||
|
||||
- **文本编解码**: 支持文本内容的 Base64 编码与解码.
|
||||
- **文件转换**: 支持文件与 Base64 字符串互转.
|
||||
- **图像预览**: 支持图片 Base64 编码与实时预览.
|
||||
|
||||
### 测试数据生成器
|
||||
|
||||
- **可视化字段配置**: 通过 UI 界面定义数据字段，支持拖拽排序、最多 40 个字段.
|
||||
- **丰富的内置生成器**: 涵盖个人信息（姓名、手机、邮箱）、企业数据（公司名、职位）、技术数据（IP、MAC 地址、UUID）、基础类型（数字、日期、枚举）等多个分类.
|
||||
- **灵活的参数配置**: 每个生成器支持自定义参数（如数字范围、日期格式、枚举值列表等）.
|
||||
- **空值率与唯一性**: 可为非必填字段设置空值率，支持字段唯一性约束.
|
||||
- **规则管理**: 保存、加载、编辑、复制、导入/导出字段配置规则，方便复用.
|
||||
- **批量生成**: 支持 1 ~ 100,000 条数据生成，通过 Web Worker 异步处理避免阻塞 UI.
|
||||
- **实时预览**: 配置字段后即时预览示例数据结构.
|
||||
- **多格式导出**: 支持 JSON 和 CSV 格式，提供复制到剪贴板和下载文件两种导出方式.
|
||||
|
||||
## 技术栈
|
||||
|
||||
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
||||
@@ -75,6 +86,8 @@
|
||||
- **存储**: Chrome Storage API (类型安全封装)
|
||||
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
||||
- **测试**: Vitest + Testing Library
|
||||
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
|
||||
- **异步生成**: Web Worker (批量数据生成)
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -89,6 +102,7 @@
|
||||
│ │ ├── background.ts # 后台 Service Worker
|
||||
│ │ └── content.ts # 网页注入脚本
|
||||
│ ├── pages/ # 各功能模块的页面组件
|
||||
│ ├── workers/ # Web Worker (数据生成等耗时任务)
|
||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||
│ ├── hooks/ # 自定义 React Hooks
|
||||
│ ├── utils/ # 工具函数与服务抽象
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# 测试数据生成器 - 功能设计文档
|
||||
|
||||
> 版本: v1.0
|
||||
> 创建时间: 2024-01-20
|
||||
> 状态: 待 Review
|
||||
|
||||
## 产品定位
|
||||
|
||||
**轻量级可视化测试数据生成器**
|
||||
|
||||
- 纯前端工具，无需后端
|
||||
- 可视化配置，无需编码
|
||||
- 本地生成，数据安全
|
||||
|
||||
## 目录
|
||||
|
||||
- [核心功能](./core-features.md)
|
||||
- [生成器库](./generators.md)
|
||||
- [规则管理](./rule-management.md)
|
||||
- [界面设计](./ui-design.md)
|
||||
- [技术实现](./technical-implementation.md)
|
||||
@@ -0,0 +1,384 @@
|
||||
# 测试数据生成器 - 实现任务列表
|
||||
|
||||
> 创建时间: 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. **响应式设计**: 支持桌面端、平板端、移动端
|
||||
@@ -0,0 +1,238 @@
|
||||
# 核心功能
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 功能模块 | 功能点 | 说明 | 优先级 |
|
||||
| -------------- | ------------- | ------------------ | ------ |
|
||||
| **字段配置** | 添加字段 | 可视化添加数据字段 | 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)
|
||||
@@ -0,0 +1,702 @@
|
||||
# 生成器库
|
||||
|
||||
## 分类概览
|
||||
|
||||
| 分类 | 生成器数量 | 说明 |
|
||||
| -------- | ---------- | ------------------------------------------------ |
|
||||
| 个人信息 | 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位身份证号 │ │ │
|
||||
│ │ │ 中文地址 生成中国地址 │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
@@ -0,0 +1,481 @@
|
||||
# 规则管理
|
||||
|
||||
## 功能概览
|
||||
|
||||
| 功能 | 说明 | 优先级 |
|
||||
| -------- | -------------------- | ------ |
|
||||
| 保存规则 | 将当前配置保存为模板 | P0 |
|
||||
| 规则列表 | 查看所有已保存的规则 | P0 |
|
||||
| 规则搜索 | 按关键词搜索规则 | P1 |
|
||||
| 规则编辑 | 修改已保存的规则 | P0 |
|
||||
| 规则删除 | 删除不需要的规则 | P0 |
|
||||
| 规则加载 | 一键加载规则配置 | P0 |
|
||||
| 规则复制 | 复制规则配置 | P1 |
|
||||
| 规则导出 | 导出为 JSON 文件 | P1 |
|
||||
| 规则导入 | 从 JSON 文件导入 | P1 |
|
||||
|
||||
## 规则数量限制
|
||||
|
||||
- **最大规则数量**: 20 条
|
||||
- **超出限制**: 当规则数量达到 20 条时，保存按钮置灰，提示"已达到最大规则数量"
|
||||
- **解决方式**: 用户需要删除已有规则后才能保存新规则
|
||||
|
||||
---
|
||||
|
||||
## 数据结构
|
||||
|
||||
### 规则模板
|
||||
|
||||
```typescript
|
||||
interface DataRule {
|
||||
id: string; // 唯一标识
|
||||
name: string; // 规则名称
|
||||
description?: string; // 规则描述
|
||||
fields: FieldConfig[]; // 字段配置
|
||||
options: {
|
||||
total: number; // 生成数量
|
||||
format: 'json' | 'csv';
|
||||
defaultEmptyRate: number; // 默认空值率（0-100）
|
||||
};
|
||||
metadata: {
|
||||
createdAt: number; // 创建时间
|
||||
updatedAt: number; // 更新时间
|
||||
lastUsedAt?: number; // 最后使用时间
|
||||
useCount: number; // 使用次数
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 字段配置
|
||||
|
||||
```typescript
|
||||
interface FieldConfig {
|
||||
id: string; // 字段唯一标识
|
||||
name: string; // 字段名
|
||||
generator: string; // 生成器名称
|
||||
params: Record<string, any>; // 生成器参数
|
||||
unique: boolean; // 唯一性约束
|
||||
required: boolean; // 是否必填
|
||||
emptyRate?: number; // 选填字段的空值概率（0-100）
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 功能详情
|
||||
|
||||
### 1. 保存规则
|
||||
|
||||
**触发方式**: 用户点击"保存规则"按钮
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 保存规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 规则信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [电商用户数据 - 测试用 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ 规则描述 (可选): │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 规则预览 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 字段数量: 4 个 │ │
|
||||
│ │ • name (中文姓名) │ │
|
||||
│ │ • email (邮箱地址) │ │
|
||||
│ │ • phone (手机号) │ │
|
||||
│ │ • age (年龄) │ │
|
||||
│ │ │ │
|
||||
│ │ 生成数量: 100 条 │ │
|
||||
│ │ 数据格式: JSON │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**保存逻辑**:
|
||||
|
||||
1. 验证规则名称不为空
|
||||
2. 检查规则数量是否达到上限（20 条）
|
||||
3. 如果达到上限，显示提示"已达到最大规则数量"
|
||||
4. 生成唯一 ID
|
||||
5. 设置创建时间和更新时间
|
||||
6. 初始化使用次数为 0
|
||||
7. 保存到 localStorage
|
||||
|
||||
---
|
||||
|
||||
### 2. 规则列表
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 规则管理 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 搜索: [搜索规则名称... ] │
|
||||
│ │
|
||||
│ 规则列表 (已保存 15/20 条) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 电商用户数据 - 测试用 │ │ │
|
||||
│ │ │ ─────────────────────────────────────────────────────── │ │ │
|
||||
│ │ │ 用于测试用户注册功能，包含姓名、邮箱、手机号 │ │ │
|
||||
│ │ │ 4 个字段 | 100 条 | JSON │ │ │
|
||||
│ │ │ 2024-01-15 14:30 创建 | 2024-01-20 10:15 最后使用 │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ [加载] [复制] [导出] [编辑] [删除] │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入规则] [导出全部] [清空全部] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**列表项信息**:
|
||||
|
||||
- 规则名称
|
||||
- 规则描述
|
||||
- 字段数量、生成数量、数据格式
|
||||
- 创建时间、最后使用时间
|
||||
- 操作按钮
|
||||
|
||||
---
|
||||
|
||||
### 3. 规则搜索
|
||||
|
||||
**搜索逻辑**:
|
||||
|
||||
- 支持按规则名称搜索
|
||||
- 支持按规则描述搜索
|
||||
- 搜索为模糊匹配，不区分大小写
|
||||
|
||||
**实现方式**:
|
||||
|
||||
```typescript
|
||||
search(keyword: string): DataRule[] {
|
||||
const rules = this.getAll();
|
||||
const lowerKeyword = keyword.toLowerCase();
|
||||
|
||||
return rules.filter(r =>
|
||||
r.name.toLowerCase().includes(lowerKeyword) ||
|
||||
r.description?.toLowerCase().includes(lowerKeyword)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. 规则编辑
|
||||
|
||||
**界面设计**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 编辑规则 - 电商用户数据 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 基本信息 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 规则名称: [电商用户数据 - 测试用 ]│ │
|
||||
│ │ 规则描述: [用于测试用户注册功能，包含姓名、邮箱、手机号 ]│ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 字段配置 (可直接编辑) │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ 1. name [中文姓名 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 2. email [邮箱地址 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 3. phone [手机号 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ 4. age [年龄 ▼] [配置] [删除] [上移][下移] │ │
|
||||
│ │ │ │
|
||||
│ │ [+ 添加字段] │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 生成选项 │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 数量: [100] 格式: [JSON ▼] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [保存修改] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**编辑逻辑**:
|
||||
|
||||
1. 加载原规则配置到编辑器
|
||||
2. 用户修改配置
|
||||
3. 点击保存时更新规则
|
||||
4. 更新 metadata.updatedAt
|
||||
5. 保存到 localStorage
|
||||
|
||||
---
|
||||
|
||||
### 5. 规则删除
|
||||
|
||||
**删除流程**:
|
||||
|
||||
1. 点击删除按钮
|
||||
2. 弹出确认对话框
|
||||
3. 确认后删除规则
|
||||
4. 刷新规则列表
|
||||
|
||||
**确认对话框**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────┐
|
||||
│ 确认删除 │
|
||||
├─────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 确定要删除规则 "电商用户数据" 吗？ │
|
||||
│ │
|
||||
│ 此操作不可撤销。 │
|
||||
│ │
|
||||
│ [取消] [删除] │
|
||||
│ │
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. 规则加载
|
||||
|
||||
**加载流程**:
|
||||
|
||||
1. 点击"加载"按钮
|
||||
2. 将规则配置应用到当前编辑器
|
||||
3. 更新预览数据
|
||||
4. 记录使用时间和次数
|
||||
|
||||
**实现方式**:
|
||||
|
||||
```typescript
|
||||
loadRule(ruleId: string): void {
|
||||
const rule = this.storage.getById(ruleId);
|
||||
|
||||
// 应用规则配置
|
||||
this.setFields(rule.fields);
|
||||
this.setOptions(rule.options);
|
||||
|
||||
// 记录使用
|
||||
this.storage.recordUse(ruleId);
|
||||
|
||||
// 更新预览
|
||||
this.updatePreview();
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. 规则复制
|
||||
|
||||
**复制逻辑**:
|
||||
|
||||
1. 点击"复制"按钮
|
||||
2. 创建规则的副本
|
||||
3. 名称添加"(副本)"后缀
|
||||
4. 生成新的 ID
|
||||
5. 保存为新规则
|
||||
|
||||
---
|
||||
|
||||
### 8. 规则导出
|
||||
|
||||
**导出界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导出规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择要导出的规则: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ☑ 电商用户数据 - 测试用 (4个字段, 100条) │ │
|
||||
│ │ ☑ 电商订单数据 - 测试用 (6个字段, 500条) │ │
|
||||
│ │ ☐ 用户登录数据 - 测试用 (3个字段, 50条) │ │
|
||||
│ │ │ │
|
||||
│ │ [全选] [全不选] │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 导出格式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ○ 导出为单个 JSON 文件 (所有规则合并) │ │
|
||||
│ │ ● 导出为多个 JSON 文件 (每个规则一个文件) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导出] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导出格式**:
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "1.0",
|
||||
"exportedAt": "2024-01-20T10:15:45.000Z",
|
||||
"rules": [
|
||||
{
|
||||
"id": "rule_123456",
|
||||
"name": "电商用户数据 - 测试用",
|
||||
"description": "用于测试用户注册功能",
|
||||
"fields": [...],
|
||||
"options": {...},
|
||||
"metadata": {...}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 9. 规则导入
|
||||
|
||||
**导入界面**:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────┐
|
||||
│ 导入规则 │
|
||||
├─────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 选择导入方式: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从文件导入 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 拖拽文件到这里，或 [点击选择文件] │ │ │
|
||||
│ │ │ 支持格式: .json │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ○ 从剪贴板粘贴 │ │
|
||||
│ │ ┌─────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 粘贴 JSON 规则内容... │ │ │
|
||||
│ │ └─────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ 预览导入内容: │
|
||||
│ ┌───────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 格式验证通过 │ │
|
||||
│ │ 规则数量: 2 个 │ │
|
||||
│ │ • 电商用户数据 (4个字段) │ │
|
||||
│ │ • 电商订单数据 (6个字段) │ │
|
||||
│ └───────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [导入] [取消] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**导入逻辑**:
|
||||
|
||||
1. 解析 JSON 文件
|
||||
2. 验证格式是否正确
|
||||
3. 预览导入内容
|
||||
4. 确认后逐条导入
|
||||
5. 生成新 ID 避免冲突
|
||||
6. 处理导入结果（成功/失败数量）
|
||||
|
||||
---
|
||||
|
||||
## 存储机制
|
||||
|
||||
### 本地存储
|
||||
|
||||
使用 localStorage 存储规则数据:
|
||||
|
||||
```typescript
|
||||
class RuleStorage {
|
||||
private readonly STORAGE_KEY = 'testDataGenerator_rules';
|
||||
|
||||
// 获取所有规则
|
||||
getAll(): DataRule[] {
|
||||
const data = localStorage.getItem(this.STORAGE_KEY);
|
||||
return data ? JSON.parse(data) : [];
|
||||
}
|
||||
|
||||
// 保存规则
|
||||
save(rule: DataRule): { success: boolean; message?: string } {
|
||||
const rules = this.getAll();
|
||||
|
||||
// 规则数量限制：最多 20 条
|
||||
const MAX_RULES = 20;
|
||||
if (rules.length >= MAX_RULES) {
|
||||
return {
|
||||
success: false,
|
||||
message: `已达到最大规则数量（${MAX_RULES}条），请删除一些规则后再保存`,
|
||||
};
|
||||
}
|
||||
|
||||
rules.push(rule);
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
// 更新规则
|
||||
update(id: string, updates: Partial<DataRule>): void {
|
||||
const rules = this.getAll();
|
||||
const index = rules.findIndex((r) => r.id === id);
|
||||
if (index !== -1) {
|
||||
rules[index] = { ...rules[index], ...updates };
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
}
|
||||
}
|
||||
|
||||
// 删除规则
|
||||
delete(id: string): void {
|
||||
const rules = this.getAll();
|
||||
const filtered = rules.filter((r) => r.id !== id);
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
|
||||
}
|
||||
|
||||
// 记录使用
|
||||
recordUse(id: string): void {
|
||||
const rules = this.getAll();
|
||||
const rule = rules.find((r) => r.id === id);
|
||||
if (rule) {
|
||||
rule.metadata.lastUsedAt = Date.now();
|
||||
rule.metadata.useCount++;
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(rules));
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 存储限制
|
||||
|
||||
- **规则数量限制**: 最多 20 条
|
||||
- localStorage 容量: 5-10MB（浏览器限制）
|
||||
- 单个规则约 1-5KB
|
||||
- 预计可存储 1000-5000 个规则（但受数量限制，最多 20 条）
|
||||
|
||||
---
|
||||
|
||||
## 功能亮点
|
||||
|
||||
| 亮点 | 说明 |
|
||||
| -------- | ------------------------------ |
|
||||
| 本地存储 | 数据保存在浏览器本地，无需后端 |
|
||||
| 快速复用 | 一键加载已保存的规则 |
|
||||
| 导入导出 | 支持 JSON 文件导入导出 |
|
||||
| 使用统计 | 记录使用次数和时间 |
|
||||
| 搜索筛选 | 支持关键词搜索 |
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,489 @@
|
||||
# 界面设计
|
||||
|
||||
## 设计原则
|
||||
|
||||
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
|
||||
@@ -12,7 +12,6 @@
|
||||
| `icon/48.png` | 48×48 图标（扩展管理页） |
|
||||
| `icon/96.png` | 96×96 图标 |
|
||||
| `icon/128.png` | 128×128 图标（Chrome Web Store） |
|
||||
| `wxt.svg` | WXT 框架标志 SVG 图标 |
|
||||
|
||||
## 注意事项
|
||||
|
||||
|
||||
@@ -1,924 +0,0 @@
|
||||
{
|
||||
"buttons_copy": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: buttons_copy"
|
||||
},
|
||||
"buttons_clear": {
|
||||
"message": "清理",
|
||||
"description": "Translation key: buttons_clear"
|
||||
},
|
||||
|
||||
"messages_copySuccess": {
|
||||
"message": "已复制到剪贴板",
|
||||
"description": "Translation key: messages_copySuccess"
|
||||
},
|
||||
"messages_copyError": {
|
||||
"message": "复制失败",
|
||||
"description": "Translation key: messages_copyError"
|
||||
},
|
||||
"messages_copyEmpty": {
|
||||
"message": "无内容可复制",
|
||||
"description": "Translation key: messages_copyEmpty"
|
||||
},
|
||||
"errorBoundary_title": {
|
||||
"message": "糟糕，出了点问题",
|
||||
"description": "Translation key: errorBoundary_title"
|
||||
},
|
||||
"errorBoundary_description": {
|
||||
"message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
|
||||
"description": "Translation key: errorBoundary_description"
|
||||
},
|
||||
"errorBoundary_refresh": {
|
||||
"message": "刷新应用",
|
||||
"description": "Translation key: errorBoundary_refresh"
|
||||
},
|
||||
"errorBoundary_retry": {
|
||||
"message": "重新尝试",
|
||||
"description": "Translation key: errorBoundary_retry"
|
||||
},
|
||||
"pageErrorBoundary_title": {
|
||||
"message": "该功能运行异常",
|
||||
"description": "Translation key: pageErrorBoundary_title"
|
||||
},
|
||||
"pageErrorBoundary_description": {
|
||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||
"description": "Translation key: pageErrorBoundary_description"
|
||||
},
|
||||
"router_notFound": {
|
||||
"message": "页面未找到",
|
||||
"description": "Translation key: router_notFound"
|
||||
},
|
||||
"router_notFoundDescription": {
|
||||
"message": "该功能在当前运行环境（{{entryPointType}}）下不可用或已被移除。",
|
||||
"description": "Translation key: router_notFoundDescription"
|
||||
},
|
||||
"textInputArea_clear": {
|
||||
"message": "清空",
|
||||
"description": "Translation key: textInputArea_clear"
|
||||
},
|
||||
"textInputArea_copyContent": {
|
||||
"message": "复制内容",
|
||||
"description": "Translation key: textInputArea_copyContent"
|
||||
},
|
||||
"textInputArea_cleared": {
|
||||
"message": "已清空",
|
||||
"description": "Translation key: textInputArea_cleared"
|
||||
},
|
||||
"textInputArea_placeholder": {
|
||||
"message": "请输入文本",
|
||||
"description": "Translation key: textInputArea_placeholder"
|
||||
},
|
||||
"dashboard_title": {
|
||||
"message": "仪表盘",
|
||||
"description": "Translation key: dashboard_title"
|
||||
},
|
||||
"dashboard_searchPlaceholder": {
|
||||
"message": "搜索工具...",
|
||||
"description": "Translation key: dashboard_searchPlaceholder"
|
||||
},
|
||||
"dashboard_recentlyUsed": {
|
||||
"message": "最近使用",
|
||||
"description": "Translation key: dashboard_recentlyUsed"
|
||||
},
|
||||
"dashboard_allTools": {
|
||||
"message": "全部工具",
|
||||
"description": "Translation key: dashboard_allTools"
|
||||
},
|
||||
"timestamp_title": {
|
||||
"message": "时间戳",
|
||||
"description": "Translation key: timestamp_title"
|
||||
},
|
||||
"timestamp_description": {
|
||||
"message": "Unix 毫秒数转换与格式化",
|
||||
"description": "Translation key: timestamp_description"
|
||||
},
|
||||
"storageCleaner_title": {
|
||||
"message": "存储清理",
|
||||
"description": "Translation key: storageCleaner_title"
|
||||
},
|
||||
"storageCleaner_description": {
|
||||
"message": "清理缓存、Cookies 及本地存储",
|
||||
"description": "Translation key: storageCleaner_description"
|
||||
},
|
||||
"qrCode_title": {
|
||||
"message": "二维码工具",
|
||||
"description": "Translation key: qrCode_title"
|
||||
},
|
||||
"qrCode_description": {
|
||||
"message": "生成当前选中的 URL 的二维码",
|
||||
"description": "Translation key: qrCode_description"
|
||||
},
|
||||
"textStatistics_title": {
|
||||
"message": "文本统计",
|
||||
"description": "Translation key: textStatistics_title"
|
||||
},
|
||||
"textStatistics_description": {
|
||||
"message": "实时分析文本字符、单词及字节",
|
||||
"description": "Translation key: textStatistics_description"
|
||||
},
|
||||
"jwt_title": {
|
||||
"message": "JWT 解析",
|
||||
"description": "Translation key: jwt_title"
|
||||
},
|
||||
"jwt_description": {
|
||||
"message": "JSON Web Token 解码与查看",
|
||||
"description": "Translation key: jwt_description"
|
||||
},
|
||||
"jsonDiff_title": {
|
||||
"message": "JSON 工具",
|
||||
"description": "Translation key: jsonDiff_title"
|
||||
},
|
||||
"jsonDiff_description": {
|
||||
"message": "差异比较、格式化、YAML/TOML 转换及压缩",
|
||||
"description": "Translation key: jsonDiff_description"
|
||||
},
|
||||
"base64Converter_title": {
|
||||
"message": "Base64 转换器",
|
||||
"description": "Translation key: base64Converter_title"
|
||||
},
|
||||
"base64Converter_description": {
|
||||
"message": "文本、文件与图像的 Base64 编码转换",
|
||||
"description": "Translation key: base64Converter_description"
|
||||
},
|
||||
"rightClickRestorer_title": {
|
||||
"message": "右键恢复",
|
||||
"description": "Translation key: rightClickRestorer_title"
|
||||
},
|
||||
"rightClickRestorer_description": {
|
||||
"message": "检测并恢复被网站禁用的浏览器右键菜单",
|
||||
"description": "Translation key: rightClickRestorer_description"
|
||||
},
|
||||
"base64Converter_pageTitle": {
|
||||
"message": "Base64 转换器",
|
||||
"description": "Translation key: base64Converter_pageTitle"
|
||||
},
|
||||
"base64Converter_textMode": {
|
||||
"message": "文本",
|
||||
"description": "Translation key: base64Converter_textMode"
|
||||
},
|
||||
"base64Converter_fileMode": {
|
||||
"message": "文件",
|
||||
"description": "Translation key: base64Converter_fileMode"
|
||||
},
|
||||
"base64Converter_imageMode": {
|
||||
"message": "图像",
|
||||
"description": "Translation key: base64Converter_imageMode"
|
||||
},
|
||||
"base64Converter_encode": {
|
||||
"message": "编码",
|
||||
"description": "Translation key: base64Converter_encode"
|
||||
},
|
||||
"base64Converter_decode": {
|
||||
"message": "解码",
|
||||
"description": "Translation key: base64Converter_decode"
|
||||
},
|
||||
"base64Converter_clear": {
|
||||
"message": "清空",
|
||||
"description": "Translation key: base64Converter_clear"
|
||||
},
|
||||
"base64Converter_textInputPlaceholder": {
|
||||
"message": "输入需要编码为 Base64 的文本...",
|
||||
"description": "Translation key: base64Converter_textInputPlaceholder"
|
||||
},
|
||||
"base64Converter_base64InputPlaceholder": {
|
||||
"message": "输入需要解码的 Base64 字符串...",
|
||||
"description": "Translation key: base64Converter_base64InputPlaceholder"
|
||||
},
|
||||
"base64Converter_base64Output": {
|
||||
"message": "Base64 编码结果",
|
||||
"description": "Translation key: base64Converter_base64Output"
|
||||
},
|
||||
"base64Converter_textOutput": {
|
||||
"message": "解码文本结果",
|
||||
"description": "Translation key: base64Converter_textOutput"
|
||||
},
|
||||
"base64Converter_copyRaw": {
|
||||
"message": "复制纯 Base64",
|
||||
"description": "Translation key: base64Converter_copyRaw"
|
||||
},
|
||||
"base64Converter_copyDataUri": {
|
||||
"message": "复制 Data URI",
|
||||
"description": "Translation key: base64Converter_copyDataUri"
|
||||
},
|
||||
"base64Converter_clickOrDropToFile": {
|
||||
"message": "点击或拖拽文件到此处",
|
||||
"description": "Translation key: base64Converter_clickOrDropToFile"
|
||||
},
|
||||
"base64Converter_clickOrDropToImage": {
|
||||
"message": "点击或拖拽图像到此处",
|
||||
"description": "Translation key: base64Converter_clickOrDropToImage"
|
||||
},
|
||||
"base64Converter_clickOrDropToReplace": {
|
||||
"message": "点击或拖拽以替换文件",
|
||||
"description": "Translation key: base64Converter_clickOrDropToReplace"
|
||||
},
|
||||
"base64Converter_maxFileSize": {
|
||||
"message": "最大文件大小：{{max}}",
|
||||
"description": "Translation key: base64Converter_maxFileSize"
|
||||
},
|
||||
"base64Converter_supportedFormats": {
|
||||
"message": "支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式",
|
||||
"description": "Translation key: base64Converter_supportedFormats"
|
||||
},
|
||||
"base64Converter_fileSizeExceeded": {
|
||||
"message": "文件大小超出限制（最大 {{max}}）",
|
||||
"description": "Translation key: base64Converter_fileSizeExceeded"
|
||||
},
|
||||
"base64Converter_unsupportedImageType": {
|
||||
"message": "不支持的图像格式",
|
||||
"description": "Translation key: base64Converter_unsupportedImageType"
|
||||
},
|
||||
"base64Converter_conversionFailed": {
|
||||
"message": "转换失败",
|
||||
"description": "Translation key: base64Converter_conversionFailed"
|
||||
},
|
||||
"base64Converter_originalSize": {
|
||||
"message": "原始大小",
|
||||
"description": "Translation key: base64Converter_originalSize"
|
||||
},
|
||||
"base64Converter_encodedSize": {
|
||||
"message": "编码大小",
|
||||
"description": "Translation key: base64Converter_encodedSize"
|
||||
},
|
||||
"base64Converter_invalidBase64": {
|
||||
"message": "Base64 字符串无效",
|
||||
"description": "Translation key: base64Converter_invalidBase64"
|
||||
},
|
||||
"base64Converter_binaryDataDetected": {
|
||||
"message": "输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。",
|
||||
"description": "Translation key: base64Converter_binaryDataDetected"
|
||||
},
|
||||
"base64Converter_imageDataUriHint": {
|
||||
"message": "检测到图片的 data URI，请使用「图像」选项卡进行解码。",
|
||||
"description": "Translation key: base64Converter_imageDataUriHint"
|
||||
},
|
||||
"base64Converter_switchToImageMode": {
|
||||
"message": "切换到图像模式",
|
||||
"description": "Translation key: base64Converter_switchToImageMode"
|
||||
},
|
||||
"base64Converter_download": {
|
||||
"message": "下载",
|
||||
"description": "Translation key: base64Converter_download"
|
||||
},
|
||||
"base64Converter_decodedFileName": {
|
||||
"message": "解码后文件名",
|
||||
"description": "Translation key: base64Converter_decodedFileName"
|
||||
},
|
||||
"base64Converter_decodeBase64Placeholder": {
|
||||
"message": "输入需要解码的 Base64 或 data URI...",
|
||||
"description": "Translation key: base64Converter_decodeBase64Placeholder"
|
||||
},
|
||||
"base64Converter_decodedFileOutput": {
|
||||
"message": "解码文件",
|
||||
"description": "Translation key: base64Converter_decodedFileOutput"
|
||||
},
|
||||
"base64Converter_decodedImageOutput": {
|
||||
"message": "解码图像",
|
||||
"description": "Translation key: base64Converter_decodedImageOutput"
|
||||
},
|
||||
"base64Converter_inferredMimeType": {
|
||||
"message": "推断的 MIME 类型",
|
||||
"description": "Translation key: base64Converter_inferredMimeType"
|
||||
},
|
||||
"base64Converter_decodedSize": {
|
||||
"message": "解码大小",
|
||||
"description": "Translation key: base64Converter_decodedSize"
|
||||
},
|
||||
"jsonDiff_pageTitle": {
|
||||
"message": "JSON 差异比较",
|
||||
"description": "Translation key: jsonDiff_pageTitle"
|
||||
},
|
||||
"jsonDiff_leftPlaceholder": {
|
||||
"message": "输入原始 JSON...",
|
||||
"description": "Translation key: jsonDiff_leftPlaceholder"
|
||||
},
|
||||
"jsonDiff_rightPlaceholder": {
|
||||
"message": "输入目标 JSON...",
|
||||
"description": "Translation key: jsonDiff_rightPlaceholder"
|
||||
},
|
||||
"jsonDiff_leftLabel": {
|
||||
"message": "原始 JSON",
|
||||
"description": "Translation key: jsonDiff_leftLabel"
|
||||
},
|
||||
"jsonDiff_rightLabel": {
|
||||
"message": "目标 JSON",
|
||||
"description": "Translation key: jsonDiff_rightLabel"
|
||||
},
|
||||
"jsonDiff_sideBySideMode": {
|
||||
"message": "并排",
|
||||
"description": "Translation key: jsonDiff_sideBySideMode"
|
||||
},
|
||||
"jsonDiff_unifiedMode": {
|
||||
"message": "统一",
|
||||
"description": "Translation key: jsonDiff_unifiedMode"
|
||||
},
|
||||
"jsonDiff_previousDiff": {
|
||||
"message": "上一个",
|
||||
"description": "Translation key: jsonDiff_previousDiff"
|
||||
},
|
||||
"jsonDiff_nextDiff": {
|
||||
"message": "下一个",
|
||||
"description": "Translation key: jsonDiff_nextDiff"
|
||||
},
|
||||
"jsonDiff_noDiffs": {
|
||||
"message": "无差异",
|
||||
"description": "Translation key: jsonDiff_noDiffs"
|
||||
},
|
||||
"jsonDiff_invalidJson": {
|
||||
"message": "无效的 JSON 格式",
|
||||
"description": "Translation key: jsonDiff_invalidJson"
|
||||
},
|
||||
"jsonDiff_emptyHint": {
|
||||
"message": "输入两侧 JSON 后点击比较",
|
||||
"description": "Translation key: jsonDiff_emptyHint"
|
||||
},
|
||||
"jsonDiff_fixErrorHint": {
|
||||
"message": "请修正上方 JSON 的语法错误以开启实时流式比对",
|
||||
"description": "Translation key: jsonDiff_fixErrorHint"
|
||||
},
|
||||
"jsonDiff_added": {
|
||||
"message": "新增",
|
||||
"description": "Translation key: jsonDiff_added"
|
||||
},
|
||||
"jsonDiff_removed": {
|
||||
"message": "删除",
|
||||
"description": "Translation key: jsonDiff_removed"
|
||||
},
|
||||
"jsonDiff_modified": {
|
||||
"message": "修改",
|
||||
"description": "Translation key: jsonDiff_modified"
|
||||
},
|
||||
"jsonFormat_inputPlaceholder": {
|
||||
"message": "输入需要格式化的 JSON...",
|
||||
"description": "Translation key: jsonFormat_inputPlaceholder"
|
||||
},
|
||||
"jsonFormat_sortKeys": {
|
||||
"message": "键名排序",
|
||||
"description": "Translation key: jsonFormat_sortKeys"
|
||||
},
|
||||
"jsonFormat_indentSize": {
|
||||
"message": "缩进",
|
||||
"description": "Translation key: jsonFormat_indentSize"
|
||||
},
|
||||
"jsonFormat_outputLabel": {
|
||||
"message": "格式化结果",
|
||||
"description": "Translation key: jsonFormat_outputLabel"
|
||||
},
|
||||
"jsonFormat_invalidJson": {
|
||||
"message": "无效的 JSON 格式",
|
||||
"description": "Translation key: jsonFormat_invalidJson"
|
||||
},
|
||||
"jsonFormat_emptyHint": {
|
||||
"message": "输入 JSON 后点击格式化",
|
||||
"description": "Translation key: jsonFormat_emptyHint"
|
||||
},
|
||||
"jsonFormat_fixErrorHint": {
|
||||
"message": "请修正上方 JSON 的语法错误以开启实时流式格式化",
|
||||
"description": "Translation key: jsonFormat_fixErrorHint"
|
||||
},
|
||||
"jsonFormat_originalSize": {
|
||||
"message": "原始大小",
|
||||
"description": "Translation key: jsonFormat_originalSize"
|
||||
},
|
||||
"jsonFormat_formattedSize": {
|
||||
"message": "格式化后大小",
|
||||
"description": "Translation key: jsonFormat_formattedSize"
|
||||
},
|
||||
"jsonFormat_diffMode": {
|
||||
"message": "差异比较",
|
||||
"description": "Translation key: jsonFormat_diffMode"
|
||||
},
|
||||
"jsonFormat_formatMode": {
|
||||
"message": "格式化",
|
||||
"description": "Translation key: jsonFormat_formatMode"
|
||||
},
|
||||
"jsonFormat_yamlMode": {
|
||||
"message": "YAML",
|
||||
"description": "Translation key: jsonFormat_yamlMode"
|
||||
},
|
||||
"jsonFormat_tomlMode": {
|
||||
"message": "TOML",
|
||||
"description": "Translation key: jsonFormat_tomlMode"
|
||||
},
|
||||
"jsonFormat_minifyMode": {
|
||||
"message": "压缩",
|
||||
"description": "Translation key: jsonFormat_minifyMode"
|
||||
},
|
||||
"jsonFormat_yamlModeInputPlaceholder": {
|
||||
"message": "输入需要转换的 JSON...",
|
||||
"description": "Translation key: jsonFormat_yamlModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_yamlModeOutputLabel": {
|
||||
"message": "YAML 结果",
|
||||
"description": "Translation key: jsonFormat_yamlModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_yamlModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击转换",
|
||||
"description": "Translation key: jsonFormat_yamlModeEmptyHint"
|
||||
},
|
||||
"jsonFormat_tomlModeInputPlaceholder": {
|
||||
"message": "输入需要转换的 JSON...",
|
||||
"description": "Translation key: jsonFormat_tomlModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_tomlModeOutputLabel": {
|
||||
"message": "TOML 结果",
|
||||
"description": "Translation key: jsonFormat_tomlModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_tomlModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击转换",
|
||||
"description": "Translation key: jsonFormat_tomlModeEmptyHint"
|
||||
},
|
||||
"jsonFormat_minifyModeInputPlaceholder": {
|
||||
"message": "输入需要压缩的 JSON...",
|
||||
"description": "Translation key: jsonFormat_minifyModeInputPlaceholder"
|
||||
},
|
||||
"jsonFormat_minifyModeOutputLabel": {
|
||||
"message": "压缩结果",
|
||||
"description": "Translation key: jsonFormat_minifyModeOutputLabel"
|
||||
},
|
||||
"jsonFormat_minifyModeEmptyHint": {
|
||||
"message": "输入 JSON 后点击压缩",
|
||||
"description": "Translation key: jsonFormat_minifyModeEmptyHint"
|
||||
},
|
||||
"jwt_pageTitle": {
|
||||
"message": "JWT 解析",
|
||||
"description": "Translation key: jwt_pageTitle"
|
||||
},
|
||||
"jwt_placeholder": {
|
||||
"message": "在此粘贴 JWT 令牌 (Encoded JWT)...",
|
||||
"description": "Translation key: jwt_placeholder"
|
||||
},
|
||||
"jwt_headerTitle": {
|
||||
"message": "HEADER: 算法 & 令牌类型",
|
||||
"description": "Translation key: jwt_headerTitle"
|
||||
},
|
||||
"jwt_payloadTitle": {
|
||||
"message": "PAYLOAD: 数据",
|
||||
"description": "Translation key: jwt_payloadTitle"
|
||||
},
|
||||
"jwt_signatureTitle": {
|
||||
"message": "签名",
|
||||
"description": "Translation key: jwt_signatureTitle"
|
||||
},
|
||||
"jwt_noSignature": {
|
||||
"message": "无签名",
|
||||
"description": "Translation key: jwt_noSignature"
|
||||
},
|
||||
"jwt_invalidFormat": {
|
||||
"message": "无法解析",
|
||||
"description": "Translation key: jwt_invalidFormat"
|
||||
},
|
||||
"jwt_errors_invalidBase64String": {
|
||||
"message": "无效的 Base64URL 字符串",
|
||||
"description": "Translation key: jwt_errors_invalidBase64String"
|
||||
},
|
||||
"jwt_errors_failedToDecode": {
|
||||
"message": "Base64URL 解码失败：",
|
||||
"description": "Translation key: jwt_errors_failedToDecode"
|
||||
},
|
||||
"jwt_errors_invalidFormat": {
|
||||
"message": "JWT 格式错误：必须包含三个由 . 分隔的部分",
|
||||
"description": "Translation key: jwt_errors_invalidFormat"
|
||||
},
|
||||
"jwt_errors_parseHeaderFailed": {
|
||||
"message": "解析 Header 失败：",
|
||||
"description": "Translation key: jwt_errors_parseHeaderFailed"
|
||||
},
|
||||
"jwt_errors_parsePayloadFailed": {
|
||||
"message": "解析 Payload 失败：",
|
||||
"description": "Translation key: jwt_errors_parsePayloadFailed"
|
||||
},
|
||||
"qrCode_pageTitle": {
|
||||
"message": "二维码工具",
|
||||
"description": "Translation key: qrCode_pageTitle"
|
||||
},
|
||||
"qrCode_urlToQr": {
|
||||
"message": "文本转二维码",
|
||||
"description": "Translation key: qrCode_urlToQr"
|
||||
},
|
||||
"qrCode_qrToUrl": {
|
||||
"message": "二维码转文本",
|
||||
"description": "Translation key: qrCode_qrToUrl"
|
||||
},
|
||||
"qrCode_urlInputLabel": {
|
||||
"message": "输入 URL 或文本",
|
||||
"description": "Translation key: qrCode_urlInputLabel"
|
||||
},
|
||||
"qrCode_urlInputPlaceholder": {
|
||||
"message": "请输入 URL 或文本内容，将自动生成二维码",
|
||||
"description": "Translation key: qrCode_urlInputPlaceholder"
|
||||
},
|
||||
"qrCode_generating": {
|
||||
"message": "生成中...",
|
||||
"description": "Translation key: qrCode_generating"
|
||||
},
|
||||
"qrCode_qrCodeWillShow": {
|
||||
"message": "二维码将显示在这里",
|
||||
"description": "Translation key: qrCode_qrCodeWillShow"
|
||||
},
|
||||
"qrCode_downloadButton": {
|
||||
"message": "下载二维码",
|
||||
"description": "Translation key: qrCode_downloadButton"
|
||||
},
|
||||
"qrCode_copyQrButton": {
|
||||
"message": "复制二维码",
|
||||
"description": "Translation key: qrCode_copyQrButton"
|
||||
},
|
||||
"qrCode_qrCodeDownloadSuccess": {
|
||||
"message": "二维码下载成功",
|
||||
"description": "Translation key: qrCode_qrCodeDownloadSuccess"
|
||||
},
|
||||
"qrCode_qrCodeCopySuccess": {
|
||||
"message": "二维码已复制到剪贴板",
|
||||
"description": "Translation key: qrCode_qrCodeCopySuccess"
|
||||
},
|
||||
"qrCode_parseSuccess": {
|
||||
"message": "二维码解析成功",
|
||||
"description": "Translation key: qrCode_parseSuccess"
|
||||
},
|
||||
"qrCode_noQrDetected": {
|
||||
"message": "未检测到二维码，请确保图片清晰且包含二维码",
|
||||
"description": "Translation key: qrCode_noQrDetected"
|
||||
},
|
||||
"qrCode_parseError": {
|
||||
"message": "解析二维码失败，请重试",
|
||||
"description": "Translation key: qrCode_parseError"
|
||||
},
|
||||
"qrCode_copyError": {
|
||||
"message": "复制失败，请重试",
|
||||
"description": "Translation key: qrCode_copyError"
|
||||
},
|
||||
"qrCode_imagePasted": {
|
||||
"message": "图片粘贴成功，正在解析...",
|
||||
"description": "Translation key: qrCode_imagePasted"
|
||||
},
|
||||
"qrCode_imagePasteError": {
|
||||
"message": "粘贴图片失败，请重试",
|
||||
"description": "Translation key: qrCode_imagePasteError"
|
||||
},
|
||||
"qrCode_imageCleared": {
|
||||
"message": "图片已清除",
|
||||
"description": "Translation key: qrCode_imageCleared"
|
||||
},
|
||||
"qrCode_clickToUpload": {
|
||||
"message": "点击、拖拽或粘贴上传二维码图片",
|
||||
"description": "Translation key: qrCode_clickToUpload"
|
||||
},
|
||||
"qrCode_supportFormats": {
|
||||
"message": "支持 PNG、JPG、WEBP、Base64 格式",
|
||||
"description": "Translation key: qrCode_supportFormats"
|
||||
},
|
||||
"qrCode_resultLabel": {
|
||||
"message": "解析结果",
|
||||
"description": "Translation key: qrCode_resultLabel"
|
||||
},
|
||||
"qrCode_clickToChange": {
|
||||
"message": "点击更换图片",
|
||||
"description": "Translation key: qrCode_clickToChange"
|
||||
},
|
||||
"qrCode_generateButton": {
|
||||
"message": "生成二维码",
|
||||
"description": "Translation key: qrCode_generateButton"
|
||||
},
|
||||
"qrCode_editButton": {
|
||||
"message": "编辑",
|
||||
"description": "Translation key: qrCode_editButton"
|
||||
},
|
||||
"qrCode_textPreviewLabel": {
|
||||
"message": "原始文本",
|
||||
"description": "Translation key: qrCode_textPreviewLabel"
|
||||
},
|
||||
"qrCode_generateFirstHint": {
|
||||
"message": "输入文本后点击「生成二维码」按钮",
|
||||
"description": "Translation key: qrCode_generateFirstHint"
|
||||
},
|
||||
"qrCode_inputRequired": {
|
||||
"message": "请输入内容",
|
||||
"description": "Translation key: qrCode_inputRequired"
|
||||
},
|
||||
"qrCode_generateError": {
|
||||
"message": "生成二维码失败，请重试",
|
||||
"description": "Translation key: qrCode_generateError"
|
||||
},
|
||||
"qrCode_uploadedImage": {
|
||||
"message": "已上传图片",
|
||||
"description": "Translation key: qrCode_uploadedImage"
|
||||
},
|
||||
"qrCode_reuploadButton": {
|
||||
"message": "重新上传",
|
||||
"description": "Translation key: qrCode_reuploadButton"
|
||||
},
|
||||
"qrCode_parsing": {
|
||||
"message": "解析中...",
|
||||
"description": "Translation key: qrCode_parsing"
|
||||
},
|
||||
"qrCode_resultPlaceholder": {
|
||||
"message": "解析结果将显示在此处",
|
||||
"description": "Translation key: qrCode_resultPlaceholder"
|
||||
},
|
||||
"qrCode_imageToQr": {
|
||||
"message": "解析图片二维码",
|
||||
"description": "Translation key: qrCode_imageToQr"
|
||||
},
|
||||
"rightClickRestorer_loading": {
|
||||
"message": "正在加载...",
|
||||
"description": "Translation key: rightClickRestorer_loading"
|
||||
},
|
||||
"rightClickRestorer_currentDomain": {
|
||||
"message": "当前域名",
|
||||
"description": "Translation key: rightClickRestorer_currentDomain"
|
||||
},
|
||||
"rightClickRestorer_statusLocked": {
|
||||
"message": "未解锁",
|
||||
"description": "Translation key: rightClickRestorer_statusLocked"
|
||||
},
|
||||
"rightClickRestorer_statusUnlocked": {
|
||||
"message": "已解锁",
|
||||
"description": "Translation key: rightClickRestorer_statusUnlocked"
|
||||
},
|
||||
"rightClickRestorer_unsupported": {
|
||||
"message": "不支持",
|
||||
"description": "Translation key: rightClickRestorer_unsupported"
|
||||
},
|
||||
"rightClickRestorer_unsupportedDesc": {
|
||||
"message": "当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。",
|
||||
"description": "Translation key: rightClickRestorer_unsupportedDesc"
|
||||
},
|
||||
"rightClickRestorer_unlockDesc": {
|
||||
"message": "点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。",
|
||||
"description": "Translation key: rightClickRestorer_unlockDesc"
|
||||
},
|
||||
"rightClickRestorer_unlockBtn": {
|
||||
"message": "解锁当前网站右键",
|
||||
"description": "Translation key: rightClickRestorer_unlockBtn"
|
||||
},
|
||||
"rightClickRestorer_alreadyUnlocked": {
|
||||
"message": "右键已解锁",
|
||||
"description": "Translation key: rightClickRestorer_alreadyUnlocked"
|
||||
},
|
||||
"storageCleaner_pageTitle": {
|
||||
"message": "存储清理",
|
||||
"description": "Translation key: storageCleaner_pageTitle"
|
||||
},
|
||||
"storageCleaner_loading": {
|
||||
"message": "加载中...",
|
||||
"description": "Translation key: storageCleaner_loading"
|
||||
},
|
||||
"storageCleaner_initializing": {
|
||||
"message": "正在读取站点数据...",
|
||||
"description": "Translation key: storageCleaner_initializing"
|
||||
},
|
||||
"storageCleaner_cleaning": {
|
||||
"message": "正在清理...",
|
||||
"description": "Translation key: storageCleaner_cleaning"
|
||||
},
|
||||
"storageCleaner_cleanNow": {
|
||||
"message": "立即清理",
|
||||
"description": "Translation key: storageCleaner_cleanNow"
|
||||
},
|
||||
"storageCleaner_autoRefresh": {
|
||||
"message": "清理后自动刷新页面",
|
||||
"description": "Translation key: storageCleaner_autoRefresh"
|
||||
},
|
||||
"storageCleaner_selectAll": {
|
||||
"message": "全选所有项",
|
||||
"description": "Translation key: storageCleaner_selectAll"
|
||||
},
|
||||
"storageCleaner_noData": {
|
||||
"message": "无数据",
|
||||
"description": "Translation key: storageCleaner_noData"
|
||||
},
|
||||
"storageCleaner_errorNoTab": {
|
||||
"message": "无法获取当前标签页",
|
||||
"description": "Translation key: storageCleaner_errorNoTab"
|
||||
},
|
||||
"storageCleaner_errorRestricted": {
|
||||
"message": "存储清理功能不支持此页面",
|
||||
"description": "Translation key: storageCleaner_errorRestricted"
|
||||
},
|
||||
"storageCleaner_cleanSuccessReload": {
|
||||
"message": "清理成功，即将刷新页面",
|
||||
"description": "Translation key: storageCleaner_cleanSuccessReload"
|
||||
},
|
||||
"storageCleaner_errorStandardOnly": {
|
||||
"message": "存储清理功能仅适用于标准网页",
|
||||
"description": "Translation key: storageCleaner_errorStandardOnly"
|
||||
},
|
||||
"storageCleaner_confirmTitle": {
|
||||
"message": "确认清理数据？",
|
||||
"description": "Translation key: storageCleaner_confirmTitle"
|
||||
},
|
||||
"storageCleaner_confirmDesc": {
|
||||
"message": "您将永久删除当前页面的以下选定存储项。",
|
||||
"description": "Translation key: storageCleaner_confirmDesc"
|
||||
},
|
||||
"storageCleaner_irreversible": {
|
||||
"message": "此操作不可撤销",
|
||||
"description": "Translation key: storageCleaner_irreversible"
|
||||
},
|
||||
"storageCleaner_confirmAction": {
|
||||
"message": "确认清理",
|
||||
"description": "Translation key: storageCleaner_confirmAction"
|
||||
},
|
||||
"storageCleaner_cleanedSummary": {
|
||||
"message": "清理了 {{items}}",
|
||||
"description": "Translation key: storageCleaner_cleanedSummary"
|
||||
},
|
||||
"storageCleaner_noDataToClean": {
|
||||
"message": "该页面没有可清理的存储数据",
|
||||
"description": "Translation key: storageCleaner_noDataToClean"
|
||||
},
|
||||
"storageCleaner_partialFailure": {
|
||||
"message": "部分清理失败",
|
||||
"description": "Translation key: storageCleaner_partialFailure"
|
||||
},
|
||||
"storageCleaner_options_localStorage": {
|
||||
"message": "Local Storage",
|
||||
"description": "Translation key: storageCleaner_options_localStorage"
|
||||
},
|
||||
"storageCleaner_options_sessionStorage": {
|
||||
"message": "Session Storage",
|
||||
"description": "Translation key: storageCleaner_options_sessionStorage"
|
||||
},
|
||||
"storageCleaner_options_indexedDB": {
|
||||
"message": "站点存储",
|
||||
"description": "Translation key: storageCleaner_options_indexedDB"
|
||||
},
|
||||
"storageCleaner_options_cookies": {
|
||||
"message": "Cookies",
|
||||
"description": "Translation key: storageCleaner_options_cookies"
|
||||
},
|
||||
"storageCleaner_options_cacheStorage": {
|
||||
"message": "Cache Storage",
|
||||
"description": "Translation key: storageCleaner_options_cacheStorage"
|
||||
},
|
||||
"storageCleaner_options_serviceWorkers": {
|
||||
"message": "Service Workers",
|
||||
"description": "Translation key: storageCleaner_options_serviceWorkers"
|
||||
},
|
||||
"textStatistics_pageTitle": {
|
||||
"message": "文本统计",
|
||||
"description": "Translation key: textStatistics_pageTitle"
|
||||
},
|
||||
"textStatistics_placeholder": {
|
||||
"message": "在此输入或粘贴文本...",
|
||||
"description": "Translation key: textStatistics_placeholder"
|
||||
},
|
||||
"textStatistics_characters": {
|
||||
"message": "字符数",
|
||||
"description": "Translation key: textStatistics_characters"
|
||||
},
|
||||
"textStatistics_words": {
|
||||
"message": "单词数",
|
||||
"description": "Translation key: textStatistics_words"
|
||||
},
|
||||
"textStatistics_lines": {
|
||||
"message": "行数",
|
||||
"description": "Translation key: textStatistics_lines"
|
||||
},
|
||||
"textStatistics_bytes": {
|
||||
"message": "字节大小",
|
||||
"description": "Translation key: textStatistics_bytes"
|
||||
},
|
||||
"timestamp_pageTitle": {
|
||||
"message": "时间戳转换",
|
||||
"description": "Translation key: timestamp_pageTitle"
|
||||
},
|
||||
"timestamp_tsToDate": {
|
||||
"message": "时间戳 → 日期",
|
||||
"description": "Translation key: timestamp_tsToDate"
|
||||
},
|
||||
"timestamp_dateToTs": {
|
||||
"message": "日期 → 时间戳",
|
||||
"description": "Translation key: timestamp_dateToTs"
|
||||
},
|
||||
"timestamp_placeholderTs": {
|
||||
"message": "输入时间戳...",
|
||||
"description": "Translation key: timestamp_placeholderTs"
|
||||
},
|
||||
"timestamp_placeholderDate": {
|
||||
"message": "YYYY-MM-DD HH:mm:ss",
|
||||
"description": "Translation key: timestamp_placeholderDate"
|
||||
},
|
||||
"timestamp_unitMs": {
|
||||
"message": "毫秒 (ms)",
|
||||
"description": "Translation key: timestamp_unitMs"
|
||||
},
|
||||
"timestamp_unitS": {
|
||||
"message": "秒 (s)",
|
||||
"description": "Translation key: timestamp_unitS"
|
||||
},
|
||||
"timestamp_currentTs": {
|
||||
"message": "当前时间戳",
|
||||
"description": "Translation key: timestamp_currentTs"
|
||||
},
|
||||
"timestamp_useNowTooltip": {
|
||||
"message": "填充到下方",
|
||||
"description": "Translation key: timestamp_useNowTooltip"
|
||||
},
|
||||
"timestamp_copyTsTooltip": {
|
||||
"message": "复制时间戳",
|
||||
"description": "Translation key: timestamp_copyTsTooltip"
|
||||
},
|
||||
"timestamp_usedSuccess": {
|
||||
"message": "已使用当前时间戳",
|
||||
"description": "Translation key: timestamp_usedSuccess"
|
||||
},
|
||||
"timestamp_resultLabel": {
|
||||
"message": "转换结果",
|
||||
"description": "Translation key: timestamp_resultLabel"
|
||||
},
|
||||
"timestamp_copyResultTooltip": {
|
||||
"message": "复制结果",
|
||||
"description": "Translation key: timestamp_copyResultTooltip"
|
||||
},
|
||||
"timestamp_relativeTime": {
|
||||
"message": "相对时间",
|
||||
"description": "Translation key: timestamp_relativeTime"
|
||||
},
|
||||
"timestamp_iso8601": {
|
||||
"message": "ISO 8601",
|
||||
"description": "Translation key: timestamp_iso8601"
|
||||
},
|
||||
"timestamp_utcTime": {
|
||||
"message": "UTC 时间",
|
||||
"description": "Translation key: timestamp_utcTime"
|
||||
},
|
||||
"timestamp_copyTooltip": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: timestamp_copyTooltip"
|
||||
},
|
||||
"timestamp_resultEmpty": {
|
||||
"message": "请输入并点击转换",
|
||||
"description": "Translation key: timestamp_resultEmpty"
|
||||
},
|
||||
"common_buttons_cancel": {
|
||||
"message": "取消",
|
||||
"description": "Translation key: buttons_cancel"
|
||||
},
|
||||
"common_buttons_copy": {
|
||||
"message": "复制",
|
||||
"description": "Translation key: buttons_copy"
|
||||
},
|
||||
"common_buttons_themeMode_light": {
|
||||
"message": "切换到深色模式",
|
||||
"description": "Translation key: buttons_themeMode_light"
|
||||
},
|
||||
"common_buttons_themeMode_dark": {
|
||||
"message": "切换到系统模式",
|
||||
"description": "Translation key: buttons_themeMode_dark"
|
||||
},
|
||||
"common_buttons_themeMode_system": {
|
||||
"message": "切换到浅色模式",
|
||||
"description": "Translation key: buttons_themeMode_system"
|
||||
},
|
||||
"common_buttons_search": {
|
||||
"message": "搜索工具...",
|
||||
"description": "Translation key: buttons_search"
|
||||
},
|
||||
"common_buttons_back": {
|
||||
"message": "返回",
|
||||
"description": "Translation key: buttons_back"
|
||||
},
|
||||
"common_buttons_clearSearch": {
|
||||
"message": "清除搜索",
|
||||
"description": "Translation key: buttons_clearSearch"
|
||||
},
|
||||
"common_buttons_recentSearch": {
|
||||
"message": "最近搜索",
|
||||
"description": "Translation key: buttons_recentSearch"
|
||||
},
|
||||
"common_buttons_noResults": {
|
||||
"message": "未找到相关工具",
|
||||
"description": "Translation key: buttons_noResults"
|
||||
},
|
||||
"common_buttons_openInTab": {
|
||||
"message": "在标签页打开",
|
||||
"description": "Translation key: buttons_openInTab"
|
||||
},
|
||||
|
||||
"common_errorBoundary_title": {
|
||||
"message": "糟糕，出了点问题",
|
||||
"description": "Translation key: errorBoundary_title"
|
||||
},
|
||||
"common_errorBoundary_description": {
|
||||
"message": "应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。",
|
||||
"description": "Translation key: errorBoundary_description"
|
||||
},
|
||||
"common_errorBoundary_refresh": {
|
||||
"message": "刷新应用",
|
||||
"description": "Translation key: errorBoundary_refresh"
|
||||
},
|
||||
"common_errorBoundary_retry": {
|
||||
"message": "重新尝试",
|
||||
"description": "Translation key: errorBoundary_retry"
|
||||
},
|
||||
"common_pageErrorBoundary_title": {
|
||||
"message": "该功能运行异常",
|
||||
"description": "Translation key: pageErrorBoundary_title"
|
||||
},
|
||||
"common_pageErrorBoundary_description": {
|
||||
"message": "该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。",
|
||||
"description": "Translation key: pageErrorBoundary_description"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 932 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 5.2 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -4,7 +4,6 @@ import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buttonVariants, type ButtonProps } from '@/components/ui/button';
|
||||
import { toast } from 'sonner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onClick'> {
|
||||
text: string;
|
||||
@@ -19,7 +18,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
const { t } = useI18n('common');
|
||||
const [copied, setCopied] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
@@ -33,18 +31,18 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
e.stopPropagation();
|
||||
|
||||
if (!text) {
|
||||
toast.error(t('messages.copyEmpty'));
|
||||
toast.error('无内容可复制');
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await copyTextToClipboard(text);
|
||||
if (success) {
|
||||
toast.success(t('messages.copySuccess'));
|
||||
toast.success('已复制到剪贴板');
|
||||
setCopied(true);
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
timerRef.current = setTimeout(() => setCopied(false), 1500);
|
||||
} else {
|
||||
toast.error(t('messages.copyError'));
|
||||
toast.error('复制失败');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -52,7 +50,8 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
title={tooltip ?? t('buttons.copy')}
|
||||
title={tooltip ?? '复制'}
|
||||
aria-label={tooltip ?? '复制'}
|
||||
className={cn(
|
||||
buttonVariants({ variant, size }),
|
||||
copied &&
|
||||
@@ -62,7 +61,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
|
||||
{...props}
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-[1.2em] w-[1.2em] animate-in fade-in zoom-in-75 duration-200" />
|
||||
<Check className="h-[1.2em] w-[1.2em]" />
|
||||
) : (
|
||||
<Copy className="h-[1.2em] w-[1.2em]" />
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
@@ -44,11 +43,9 @@ class ErrorBoundary extends Component<Props, State> {
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive mx-auto mb-4">
|
||||
<AlertCircle className="h-8 w-8" />
|
||||
</div>
|
||||
<h2 className="text-xl font-extrabold text-destructive mb-2">
|
||||
{getMessage('errorBoundary_title')}
|
||||
</h2>
|
||||
<h2 className="text-xl font-extrabold text-destructive mb-2">糟糕，出了点问题</h2>
|
||||
<p className="text-sm text-muted-foreground mb-6">
|
||||
{getMessage('errorBoundary_description')}
|
||||
应用遇到了一些意外错误。您可以尝试刷新页面或重置应用。
|
||||
</p>
|
||||
{this.state.error && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-zinc-950 dark:bg-zinc-900 text-left max-h-[200px] overflow-auto border border-border/40">
|
||||
@@ -63,7 +60,7 @@ class ErrorBoundary extends Component<Props, State> {
|
||||
className="rounded-lg font-bold shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
{getMessage('errorBoundary_refresh')}
|
||||
刷新应用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Component, ErrorInfo, ReactNode } from 'react';
|
||||
import { AlertCircle, RefreshCw } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
@@ -46,11 +45,9 @@ class PageErrorBoundary extends Component<Props, State> {
|
||||
<AlertCircle className="h-6 w-6" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">
|
||||
{getMessage('pageErrorBoundary_title')}
|
||||
</h3>
|
||||
<h3 className="text-base font-semibold text-foreground mb-1.5">该功能运行异常</h3>
|
||||
<p className="text-xs text-muted-foreground mb-5">
|
||||
{getMessage('pageErrorBoundary_description')}
|
||||
该页面在加载或渲染时遇到了内部脚本错误。您可以尝试重试，或者通过导航菜单切换到其他工具。
|
||||
</p>
|
||||
|
||||
{this.state.error && (
|
||||
@@ -68,7 +65,7 @@ class PageErrorBoundary extends Component<Props, State> {
|
||||
className="font-medium shadow-sm"
|
||||
>
|
||||
<RefreshCw className="mr-1.5 h-3.5 w-3.5" />
|
||||
{getMessage('errorBoundary_retry')}
|
||||
重新尝试
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { FEATURES, getEntryPointType } from '@/config/features';
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { Suspense } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import PageErrorBoundary from '@/components/PageErrorBoundary';
|
||||
import PageSkeleton from '@/components/PageSkeleton';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -11,7 +10,6 @@ const entryPointType = getEntryPointType();
|
||||
|
||||
export default function RouterContainer() {
|
||||
const { currentPage, isLoaded } = useRouter();
|
||||
const { t } = useI18n('common');
|
||||
|
||||
const animationClass =
|
||||
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||
@@ -43,9 +41,9 @@ export default function RouterContainer() {
|
||||
<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">{t('router.notFound')}</h3>
|
||||
<h3 className="text-sm font-semibold text-foreground">{'页面未找到'}</h3>
|
||||
<p className="text-xs text-muted-foreground mt-1 max-w-[240px]">
|
||||
{t('router.notFoundDescription', { entryPointType })}
|
||||
{`该功能在当前运行环境（${entryPointType}）下不可用或已被移除。`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -17,6 +17,16 @@ export interface SwitchButtonGroupProps<T extends string | number = string> exte
|
||||
buttonClassName?: string;
|
||||
}
|
||||
|
||||
const SIZE_CLASSES = {
|
||||
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',
|
||||
} as const;
|
||||
|
||||
const SELECTED_CLASSES =
|
||||
'bg-background text-foreground shadow-sm font-semibold animate-in fade-in-50 zoom-in-95 duration-150';
|
||||
const UNSELECTED_CLASSES = 'hover:bg-background/50 hover:text-foreground/80';
|
||||
|
||||
export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
value,
|
||||
options,
|
||||
@@ -26,12 +36,6 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
buttonClassName,
|
||||
...props
|
||||
}: SwitchButtonGroupProps<T>) {
|
||||
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',
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -40,10 +44,7 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const isSelected = value === option.value;
|
||||
|
||||
return (
|
||||
{options.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
@@ -52,17 +53,14 @@ export default function SwitchButtonGroup<T extends string | number = string>({
|
||||
'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',
|
||||
SIZE_CLASSES[size],
|
||||
value === option.value ? SELECTED_CLASSES : UNSELECTED_CLASSES,
|
||||
buttonClassName,
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from 'sonner'; // 推荐使用 shadcn 的默认 Toast
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
@@ -114,8 +113,7 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
const [internalValue, setInternalValue] = useState(defaultValue);
|
||||
const [error, setError] = useState<string>('');
|
||||
|
||||
const { t } = useI18n('common');
|
||||
const placeholder = placeholderProp ?? t('textInputArea.placeholder');
|
||||
const placeholder = placeholderProp ?? '请输入文本';
|
||||
|
||||
const isControlled = controlledValue !== undefined;
|
||||
const value = isControlled ? controlledValue : internalValue;
|
||||
@@ -159,7 +157,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 = t('charCount', { count: maxLength });
|
||||
const msg = `内容不能超过 ${maxLength} 个字符`;
|
||||
setError(msg);
|
||||
toast.warning(msg);
|
||||
return;
|
||||
@@ -181,9 +179,9 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
onChange?.('');
|
||||
setError('');
|
||||
internalRef.current?.focus();
|
||||
toast.success(t('textInputArea.cleared'));
|
||||
toast.success('已清空');
|
||||
onClear?.();
|
||||
}, [isControlled, onChange, onClear, t]);
|
||||
}, [isControlled, onChange, onClear]);
|
||||
|
||||
const handleAction = useCallback(
|
||||
(action: ToolbarAction) => {
|
||||
@@ -272,18 +270,13 @@ const TextInputArea = forwardRef<HTMLTextAreaElement, TextInputAreaProps>((props
|
||||
{/* 右侧系统按钮组 */}
|
||||
<div className="flex items-center gap-1.5 ml-auto shrink-0">
|
||||
{allowCopy && value && (
|
||||
<CopyButton
|
||||
text={value}
|
||||
tooltip={t('textInputArea.copyContent')}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-1"
|
||||
/>
|
||||
<CopyButton text={value} tooltip={'复制内容'} size="sm" className="h-7 w-7 p-1" />
|
||||
)}
|
||||
{showClear && value && !disabled && !readOnly && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClear}
|
||||
aria-label={t('textInputArea.clear')}
|
||||
aria-label={'清空'}
|
||||
className="p-1 h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
|
||||
+23
-21
@@ -5,7 +5,6 @@ import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
import { FeatureConfig, FEATURES } from '@/config/features';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import { openExtensionPage } from '@/utils/chromeTabs';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const SEARCH_HISTORY_LIMIT = 10;
|
||||
@@ -14,7 +13,6 @@ const SEARCH_HISTORY_DISPLAY = 5;
|
||||
export default function TopBar() {
|
||||
const { currentPage, goBack, navigateTo } = useRouter();
|
||||
const { mode, setMode } = useThemeMode();
|
||||
const { t } = useI18n(['common', 'features']);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
@@ -66,12 +64,9 @@ export default function TopBar() {
|
||||
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)
|
||||
);
|
||||
return f.label.toLowerCase().includes(query) || f.description.toLowerCase().includes(query);
|
||||
});
|
||||
}, [searchQuery, t]);
|
||||
}, [searchQuery]);
|
||||
|
||||
const displayedHistory = useMemo(() => {
|
||||
if (searchQuery.trim()) return [];
|
||||
@@ -144,7 +139,7 @@ export default function TopBar() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={goBack}
|
||||
aria-label={t('common_buttons_back')}
|
||||
aria-label={'返回'}
|
||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
@@ -159,7 +154,7 @@ export default function TopBar() {
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={t('common_buttons_search')}
|
||||
placeholder={'搜索工具...'}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
@@ -168,7 +163,7 @@ export default function TopBar() {
|
||||
}}
|
||||
onFocus={() => setShowResults(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
aria-label={t('common_buttons_search')}
|
||||
aria-label={'搜索工具...'}
|
||||
className="w-full h-9 pl-9 pr-16 text-sm rounded-lg border border-border/60 bg-muted/40 transition-all placeholder:text-muted-foreground/50 focus:bg-background focus:outline-none focus:ring-1 focus:ring-ring focus:border-input"
|
||||
/>
|
||||
{!searchQuery && (
|
||||
@@ -183,7 +178,7 @@ export default function TopBar() {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(-1);
|
||||
}}
|
||||
aria-label={t('common:buttons.clearSearch')}
|
||||
aria-label={'清除搜索'}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
@@ -219,24 +214,22 @@ export default function TopBar() {
|
||||
{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="font-medium text-foreground truncate">{feature.label}</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{t(feature.descriptionKey)}
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-4 py-6 text-center text-sm text-muted-foreground">
|
||||
{t('common:buttons.noResults')}
|
||||
{'未找到相关工具'}
|
||||
</li>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<div className="px-3 py-1.5 text-[11px] font-semibold tracking-wider text-muted-foreground/60 uppercase">
|
||||
{t('common:buttons.recentSearch')}
|
||||
{'最近搜索'}
|
||||
</div>
|
||||
{displayedHistory.map((item, index) => (
|
||||
<li
|
||||
@@ -261,10 +254,10 @@ export default function TopBar() {
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{item.feature && t(item.feature.labelKey)}
|
||||
{item.feature?.label}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{item.feature && t(item.feature.descriptionKey)}
|
||||
{item.feature?.description}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
@@ -278,10 +271,19 @@ export default function TopBar() {
|
||||
|
||||
{/* 右侧：操作区 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<IconButton onClick={cycleThemeMode} title={t(`common:buttons.themeMode.${mode}`)}>
|
||||
<IconButton
|
||||
onClick={cycleThemeMode}
|
||||
title={
|
||||
mode === 'light'
|
||||
? '切换到深色模式'
|
||||
: mode === 'dark'
|
||||
? '切换到系统模式'
|
||||
: '切换到浅色模式'
|
||||
}
|
||||
>
|
||||
<ThemeIcon className="h-4 w-4" />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleOpenInTab} title={t('common:buttons.openInTab')}>
|
||||
<IconButton onClick={handleOpenInTab} title={'在标签页打开'}>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// unmock the globally-mocked component so we test the real implementation
|
||||
vi.unmock('@/components/CopyButton');
|
||||
|
||||
vi.mock('@/utils/clipboard', () => ({
|
||||
copyTextToClipboard: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { copyTextToClipboard } from '@/utils/clipboard';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const mockedCopy = vi.mocked(copyTextToClipboard);
|
||||
const mockedToast = vi.mocked(toast);
|
||||
|
||||
describe('CopyButton', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true });
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('复制成功时调用 copyTextToClipboard 并传入正确 text', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="hello world" />);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
expect(mockedCopy).toHaveBeenCalledWith('hello world');
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('复制成功后图标切换为 Check，1.5 秒后恢复', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="test" />);
|
||||
|
||||
// 点击后复制成功，按钮获得 emerald 样式（说明切到了 Check 状态）
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button').className).toContain('text-emerald');
|
||||
});
|
||||
|
||||
// 1.5 秒后样式恢复
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(1500);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button').className).not.toContain('text-emerald');
|
||||
});
|
||||
});
|
||||
|
||||
it('复制空文本时弹出 error toast', async () => {
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="" />);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
expect(mockedCopy).not.toHaveBeenCalled();
|
||||
expect(mockedToast.error).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('复制失败时弹出 error toast', async () => {
|
||||
mockedCopy.mockResolvedValue(false);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="something" />);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
expect(mockedCopy).toHaveBeenCalledWith('something');
|
||||
expect(mockedToast.error).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// ==================== 新增测试 ====================
|
||||
|
||||
it('初始渲染时显示 Copy 图标且无 emerald 样式', () => {
|
||||
render(<CopyButton text="initial" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button.className).not.toContain('text-emerald');
|
||||
// 通过 aria-label 确认按钮存在，图标由 lucide 渲染为 svg
|
||||
expect(button).toHaveAttribute('aria-label');
|
||||
});
|
||||
|
||||
it('自定义 tooltip 会覆盖默认 title 和 aria-label', () => {
|
||||
render(<CopyButton text="tooltip-test" tooltip="自定义提示" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveAttribute('title', '自定义提示');
|
||||
expect(button).toHaveAttribute('aria-label', '自定义提示');
|
||||
});
|
||||
|
||||
it('className 被正确透传到按钮', () => {
|
||||
render(<CopyButton text="class-test" className="my-custom-class" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button.className).toContain('my-custom-class');
|
||||
});
|
||||
|
||||
it('点击事件阻止冒泡', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
const parentClick = vi.fn();
|
||||
|
||||
render(
|
||||
<div onClick={parentClick}>
|
||||
<CopyButton text="stop-propagation" />
|
||||
</div>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
expect(mockedCopy).toHaveBeenCalled();
|
||||
expect(parentClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('组件卸载时清除定时器，不触发状态更新警告', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
const { unmount } = render(<CopyButton text="unmount-test" />);
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
||||
// 在 1.5 秒超时到期前卸载组件
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// 卸载不应抛出 "Can't perform a React state update on an unmounted component" 警告
|
||||
expect(() => unmount()).not.toThrow();
|
||||
|
||||
// 前进剩余时间，确认没有异常
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(2000);
|
||||
});
|
||||
});
|
||||
|
||||
it('快速连续点击不会创建多个重叠定时器', async () => {
|
||||
mockedCopy.mockResolvedValue(true);
|
||||
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
|
||||
|
||||
render(<CopyButton text="rapid-click" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
|
||||
// 快速点击 3 次
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
|
||||
// copyTextToClipboard 应该被调用 3 次（每次点击都执行）
|
||||
expect(mockedCopy).toHaveBeenCalledTimes(3);
|
||||
|
||||
// 但 setTimeout 相关的 clearTimeout + setTimeout 组合应正常工作
|
||||
// advance 1.5 秒后，copied 状态应恢复为 false
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(1500);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(button.className).not.toContain('text-emerald');
|
||||
});
|
||||
});
|
||||
|
||||
it('其他 button props 通过 ...props 透传', () => {
|
||||
render(<CopyButton text="props-test" data-testid="copy-btn" disabled id="copy-button-id" />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveAttribute('data-testid', 'copy-btn');
|
||||
expect(button).toBeDisabled();
|
||||
expect(button).toHaveAttribute('id', 'copy-button-id');
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/StorageCleanerConfirm';
|
||||
import { StorageCleanerConfirm } from '@/pages/StorageCleaner/components/StorageCleanerConfirm';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@@ -18,12 +18,12 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
it('默认显示清空按钮', () => {
|
||||
render(<TextInputArea value="有内容" onChange={() => {}} />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.clear' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '清空' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('无内容时清空按钮应隐藏', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} />);
|
||||
expect(screen.queryByRole('button', { name: 'textInputArea.clear' })).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: '清空' })).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: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(handleChange).toHaveBeenCalledWith('');
|
||||
});
|
||||
@@ -81,7 +81,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('清空按钮应清空内容', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
@@ -90,14 +90,12 @@ describe('TextInputArea 组件', () => {
|
||||
describe('allowCopy 复制功能', () => {
|
||||
it('allowCopy 且有内容时显示复制按钮', () => {
|
||||
render(<TextInputArea value="可复制的内容" onChange={() => {}} allowCopy />);
|
||||
expect(screen.getByRole('button', { name: 'textInputArea.copyContent' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: '复制内容' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy 但无内容时隐藏复制按钮', () => {
|
||||
render(<TextInputArea value="" onChange={() => {}} allowCopy />);
|
||||
expect(
|
||||
screen.queryByRole('button', { name: 'textInputArea.copyContent' }),
|
||||
).not.toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: '复制内容' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('allowCopy=false 时不显示复制按钮', () => {
|
||||
@@ -113,7 +111,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -126,7 +124,7 @@ describe('TextInputArea 组件', () => {
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -158,6 +156,7 @@ describe('TextInputArea 组件', () => {
|
||||
fireEvent.change(textarea, { target: { value: '123456' } });
|
||||
|
||||
expect(handleChange).not.toHaveBeenCalledWith('123456');
|
||||
expect(screen.getByText('内容不能超过 5 个字符')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('未超出 maxLength 的输入应正常触发', () => {
|
||||
@@ -370,7 +369,7 @@ describe('TextInputArea 组件', () => {
|
||||
const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined);
|
||||
|
||||
render(<TextInputArea value="测试" onChange={() => {}} allowCopy />);
|
||||
await user.click(screen.getByRole('button', { name: 'textInputArea.copyContent' }));
|
||||
await user.click(screen.getByRole('button', { name: '复制内容' }));
|
||||
|
||||
expect(writeTextSpy).toHaveBeenCalledWith('测试');
|
||||
});
|
||||
@@ -381,7 +380,7 @@ describe('TextInputArea 组件', () => {
|
||||
const handleClear = vi.fn();
|
||||
render(<TextInputArea value="内容" onChange={() => {}} onClear={handleClear} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(handleClear).toHaveBeenCalledOnce();
|
||||
});
|
||||
@@ -389,7 +388,7 @@ describe('TextInputArea 组件', () => {
|
||||
it('不传 onClear 时清空按钮应正常工作', () => {
|
||||
render(<TextInputArea defaultValue="内容" />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
expect(screen.getByRole('textbox')).toHaveValue('');
|
||||
});
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -26,10 +26,16 @@ 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>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
DialogContentProps
|
||||
>(({ className, children, showCloseButton = true, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
@@ -41,10 +47,12 @@ const DialogContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Toaster as Sonner } from 'sonner';
|
||||
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
||||
|
||||
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
||||
|
||||
export function Toaster(props: ToasterProps) {
|
||||
const { resolvedMode } = useThemeMode();
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={resolvedMode}
|
||||
className="toaster group"
|
||||
position="bottom-center"
|
||||
toastOptions={{
|
||||
classNames: {
|
||||
toast:
|
||||
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
||||
description: 'group-[.toast]:text-muted-foreground',
|
||||
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
||||
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
|
||||
},
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -9,20 +9,20 @@ import {
|
||||
|
||||
describe('features', () => {
|
||||
describe('FEATURES', () => {
|
||||
it('should have 9 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(9);
|
||||
it('should have 10 features defined', () => {
|
||||
expect(FEATURES).toHaveLength(10);
|
||||
});
|
||||
|
||||
it('should have all required properties for each feature', () => {
|
||||
FEATURES.forEach((feature) => {
|
||||
expect(feature).toHaveProperty('key');
|
||||
expect(feature).toHaveProperty('labelKey');
|
||||
expect(feature).toHaveProperty('descriptionKey');
|
||||
expect(feature).toHaveProperty('label');
|
||||
expect(feature).toHaveProperty('description');
|
||||
expect(feature).toHaveProperty('defaultVisible');
|
||||
expect(feature).toHaveProperty('components');
|
||||
expect(typeof feature.key).toBe('string');
|
||||
expect(typeof feature.labelKey).toBe('string');
|
||||
expect(typeof feature.descriptionKey).toBe('string');
|
||||
expect(typeof feature.label).toBe('string');
|
||||
expect(typeof feature.description).toBe('string');
|
||||
expect(typeof feature.defaultVisible).toBe('boolean');
|
||||
expect(typeof feature.components).toBe('object');
|
||||
expect(feature.components).toHaveProperty('popup');
|
||||
@@ -50,14 +50,14 @@ describe('features', () => {
|
||||
const feature = getFeatureByKey('dashboard');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('dashboard');
|
||||
expect(feature?.labelKey).toBe('dashboard_title');
|
||||
expect(feature?.label).toBe('仪表盘');
|
||||
});
|
||||
|
||||
it('should return timestamp feature', () => {
|
||||
const feature = getFeatureByKey('timestamp');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('timestamp');
|
||||
expect(feature?.labelKey).toBe('timestamp_title');
|
||||
expect(feature?.label).toBe('时间戳');
|
||||
expect(feature?.themeColorKey).toBeDefined();
|
||||
});
|
||||
|
||||
@@ -65,7 +65,7 @@ describe('features', () => {
|
||||
const feature = getFeatureByKey('storageCleaner');
|
||||
expect(feature).toBeDefined();
|
||||
expect(feature?.key).toBe('storageCleaner');
|
||||
expect(feature?.labelKey).toBe('storageCleaner_title');
|
||||
expect(feature?.label).toBe('存储清理');
|
||||
});
|
||||
|
||||
it('should return undefined for invalid key', () => {
|
||||
@@ -95,7 +95,7 @@ describe('features', () => {
|
||||
describe('getAllFeatureKeys', () => {
|
||||
it('should return all feature keys', () => {
|
||||
const allKeys = getAllFeatureKeys();
|
||||
expect(allKeys).toHaveLength(9);
|
||||
expect(allKeys).toHaveLength(10);
|
||||
expect(allKeys).toContain('dashboard');
|
||||
expect(allKeys).toContain('timestamp');
|
||||
expect(allKeys).toContain('storageCleaner');
|
||||
@@ -105,6 +105,7 @@ describe('features', () => {
|
||||
expect(allKeys).toContain('jsonDiff');
|
||||
expect(allKeys).toContain('base64Converter');
|
||||
expect(allKeys).toContain('rightClickRestorer');
|
||||
expect(allKeys).toContain('testDataGenerator');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -121,9 +122,9 @@ describe('features', () => {
|
||||
expect(pageOrder).toContain('qrCode');
|
||||
});
|
||||
|
||||
it('should have 8 items in page order', () => {
|
||||
it('should have 9 items in page order', () => {
|
||||
const pageOrder = getDefaultPageOrder();
|
||||
expect(pageOrder).toHaveLength(8);
|
||||
expect(pageOrder).toHaveLength(9);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+35
-20
@@ -10,6 +10,7 @@ import {
|
||||
GitCompareArrows,
|
||||
ArrowLeftRight,
|
||||
MousePointerClick,
|
||||
FileSpreadsheet,
|
||||
} from 'lucide-react';
|
||||
|
||||
export type PaletteColorKey = 'primary' | 'success' | 'warning' | 'error' | 'secondary' | 'info';
|
||||
@@ -24,11 +25,12 @@ const JwtPage = lazy(() => import('@/pages/Jwt'));
|
||||
const JsonToolsPage = lazy(() => import('@/pages/JsonTools'));
|
||||
const Base64ConverterPage = lazy(() => import('@/pages/Base64Converter'));
|
||||
const RightClickRestorerPage = lazy(() => import('@/pages/RightClickRestorer'));
|
||||
const TestDataGeneratorPage = lazy(() => import('@/pages/TestDataGenerator'));
|
||||
|
||||
export interface FeatureConfig {
|
||||
key: PageType;
|
||||
labelKey: string;
|
||||
descriptionKey: string;
|
||||
label: string;
|
||||
description: string;
|
||||
themeColorKey?: PaletteColorKey;
|
||||
icon?: ComponentType<LucideProps>;
|
||||
defaultVisible: boolean;
|
||||
@@ -42,8 +44,8 @@ export interface FeatureConfig {
|
||||
export const FEATURES: FeatureConfig[] = [
|
||||
{
|
||||
key: 'dashboard',
|
||||
labelKey: 'dashboard_title',
|
||||
descriptionKey: '',
|
||||
label: '仪表盘',
|
||||
description: '',
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: DashboardPage,
|
||||
@@ -53,8 +55,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'timestamp',
|
||||
labelKey: 'timestamp_title',
|
||||
descriptionKey: 'timestamp_description',
|
||||
label: '时间戳',
|
||||
description: 'Unix 毫秒数转换与格式化',
|
||||
themeColorKey: 'primary',
|
||||
icon: Clock,
|
||||
defaultVisible: true,
|
||||
@@ -66,8 +68,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'storageCleaner',
|
||||
labelKey: 'storageCleaner_title',
|
||||
descriptionKey: 'storageCleaner_description',
|
||||
label: '存储清理',
|
||||
description: '清理缓存、Cookies 及本地存储',
|
||||
themeColorKey: 'warning',
|
||||
icon: Database,
|
||||
defaultVisible: true,
|
||||
@@ -79,8 +81,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'qrCode',
|
||||
labelKey: 'qrCode_title',
|
||||
descriptionKey: 'qrCode_description',
|
||||
label: '二维码工具',
|
||||
description: '生成当前选中的 URL 的二维码',
|
||||
themeColorKey: 'success',
|
||||
icon: QrCode,
|
||||
defaultVisible: true,
|
||||
@@ -92,8 +94,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'textStatistics',
|
||||
labelKey: 'textStatistics_title',
|
||||
descriptionKey: 'textStatistics_description',
|
||||
label: '文本统计',
|
||||
description: '实时分析文本字符、单词及字节',
|
||||
themeColorKey: 'secondary',
|
||||
icon: FileText,
|
||||
defaultVisible: true,
|
||||
@@ -105,8 +107,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'jwt',
|
||||
labelKey: 'jwt_title',
|
||||
descriptionKey: 'jwt_description',
|
||||
label: 'JWT 解析',
|
||||
description: 'JSON Web Token 解码与查看',
|
||||
themeColorKey: 'info',
|
||||
icon: Key,
|
||||
defaultVisible: true,
|
||||
@@ -118,8 +120,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'jsonDiff',
|
||||
labelKey: 'jsonDiff_title',
|
||||
descriptionKey: 'jsonDiff_description',
|
||||
label: 'JSON 工具',
|
||||
description: '差异比较、格式化、YAML/TOML 转换及压缩',
|
||||
themeColorKey: 'primary',
|
||||
icon: GitCompareArrows,
|
||||
defaultVisible: true,
|
||||
@@ -131,8 +133,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'base64Converter',
|
||||
labelKey: 'base64Converter_title',
|
||||
descriptionKey: 'base64Converter_description',
|
||||
label: 'Base64 转换器',
|
||||
description: '文本、文件与图像的 Base64 编码转换',
|
||||
themeColorKey: 'info',
|
||||
icon: ArrowLeftRight,
|
||||
defaultVisible: true,
|
||||
@@ -144,8 +146,8 @@ export const FEATURES: FeatureConfig[] = [
|
||||
},
|
||||
{
|
||||
key: 'rightClickRestorer',
|
||||
labelKey: 'rightClickRestorer_title',
|
||||
descriptionKey: 'rightClickRestorer_description',
|
||||
label: '右键恢复',
|
||||
description: '检测并恢复被网站禁用的浏览器右键菜单',
|
||||
themeColorKey: 'success',
|
||||
icon: MousePointerClick,
|
||||
defaultVisible: true,
|
||||
@@ -155,6 +157,19 @@ export const FEATURES: FeatureConfig[] = [
|
||||
tab: RightClickRestorerPage,
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'testDataGenerator',
|
||||
label: '测试数据生成器',
|
||||
description: '自定义规则批量生成测试数据',
|
||||
themeColorKey: 'warning',
|
||||
icon: FileSpreadsheet,
|
||||
defaultVisible: true,
|
||||
components: {
|
||||
popup: TestDataGeneratorPage,
|
||||
sidepanel: TestDataGeneratorPage,
|
||||
tab: TestDataGeneratorPage,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function getFeatureByKey(key: PageType): FeatureConfig | undefined {
|
||||
|
||||
@@ -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'],
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import type { ContextMenuClickedPayload } from '@/utils/messages';
|
||||
import { MessageAction, onMessage } from '@/utils/messages';
|
||||
import { getTextStats } from '@/utils/textStatistics';
|
||||
import { getMessage } from '@/utils/chromeI18n';
|
||||
import { hidePopover, showTextStatsResult, showTimestampResult } from './uiPopover';
|
||||
|
||||
function convertTimestamp(input: string): string {
|
||||
const invalidText = getMessage('invalidTimestamp') || 'Invalid Timestamp';
|
||||
const invalidText = '无效时间戳';
|
||||
const num = Number(input.trim());
|
||||
|
||||
if (isNaN(num)) {
|
||||
|
||||
@@ -161,7 +161,7 @@ function positionPopover(popover: HTMLElement, x: number, y: number): void {
|
||||
|
||||
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
export function showPopover(
|
||||
function showPopover(
|
||||
x: number,
|
||||
y: number,
|
||||
contentHtml: string,
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
/**
|
||||
* 基础类型生成器
|
||||
* 包含：随机整数、随机浮点数、随机字符串、从列表选择
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机整数生成器
|
||||
*/
|
||||
export const randomIntGenerator: GeneratorDefinition = {
|
||||
id: 'randomInt',
|
||||
name: '随机整数',
|
||||
description: '生成指定范围内的随机整数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '整数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '整数最大值',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const range = max - min + 1;
|
||||
return String(min + (index % range));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机浮点数生成器
|
||||
*/
|
||||
export const randomFloat: GeneratorDefinition = {
|
||||
id: 'randomFloat',
|
||||
name: '随机浮点数',
|
||||
description: '生成指定范围内的随机浮点数',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
description: '浮点数最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
description: '浮点数最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '小数位数',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 100;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const value = min + Math.random() * (max - min);
|
||||
return value.toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 随机字符串生成器
|
||||
*/
|
||||
export const randomString: GeneratorDefinition = {
|
||||
id: 'randomString',
|
||||
name: '随机字符串',
|
||||
description: '生成指定长度的随机字符串',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'length',
|
||||
label: '字符串长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 1,
|
||||
max: 100,
|
||||
description: '字符串长度',
|
||||
},
|
||||
{
|
||||
key: 'charset',
|
||||
label: '字符集',
|
||||
type: 'select',
|
||||
defaultValue: 'alphanumeric',
|
||||
description: '使用的字符集',
|
||||
options: [
|
||||
{ label: '字母数字', value: 'alphanumeric' },
|
||||
{ label: '仅字母', value: 'alpha' },
|
||||
{ label: '仅数字', value: 'numeric' },
|
||||
{ label: '小写字母', value: 'lowercase' },
|
||||
{ label: '大写字母', value: 'uppercase' },
|
||||
{ label: '十六进制', value: 'hex' },
|
||||
{ label: 'Base64', value: 'base64' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const length = (params.length as number) || 10;
|
||||
const charset = (params.charset as string) || 'alphanumeric';
|
||||
|
||||
const charsets: Record<string, string> = {
|
||||
alphanumeric: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
|
||||
alpha: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
|
||||
numeric: '0123456789',
|
||||
lowercase: 'abcdefghijklmnopqrstuvwxyz',
|
||||
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
hex: '0123456789abcdef',
|
||||
base64: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
|
||||
};
|
||||
|
||||
const chars = charsets[charset] || charsets.alphanumeric;
|
||||
const base = String(index).padStart(length, '0');
|
||||
let result = '';
|
||||
for (let i = 0; i < length; i++) {
|
||||
const charIndex = parseInt(base[i]) || 0;
|
||||
result += chars[charIndex % chars.length];
|
||||
}
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 从列表选择生成器
|
||||
*/
|
||||
export const fromList: GeneratorDefinition = {
|
||||
id: 'fromList',
|
||||
name: '从列表选择',
|
||||
description: '从自定义列表中随机选择',
|
||||
categoryId: 'basic',
|
||||
params: [
|
||||
{
|
||||
key: 'values',
|
||||
label: '列表值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '列表值，用逗号分隔',
|
||||
placeholder: '值1,值2,值3',
|
||||
},
|
||||
{
|
||||
key: 'allowDuplicate',
|
||||
label: '允许重复',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许重复选择',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const valuesStr = (params.values as string) || '';
|
||||
const values = valuesStr
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
|
||||
if (values.length === 0) {
|
||||
return '（请配置列表值）';
|
||||
}
|
||||
|
||||
return randomPick(values);
|
||||
},
|
||||
};
|
||||
|
||||
export const basicGenerators: GeneratorDefinition[] = [
|
||||
randomIntGenerator,
|
||||
randomFloat,
|
||||
randomString,
|
||||
fromList,
|
||||
];
|
||||
@@ -0,0 +1,561 @@
|
||||
/**
|
||||
* 业务数据生成器
|
||||
* 包含：订单号、价格、日期、状态、数量、评分、折扣、库存
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
*/
|
||||
function formatDate(date: Date, format: string): string {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', String(year))
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单号生成器
|
||||
*/
|
||||
export const orderId: GeneratorDefinition = {
|
||||
id: 'orderId',
|
||||
name: '订单号',
|
||||
description: '生成随机订单号',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '前缀',
|
||||
type: 'string',
|
||||
defaultValue: 'ORD',
|
||||
description: '订单号前缀',
|
||||
placeholder: '请输入前缀',
|
||||
},
|
||||
{
|
||||
key: 'length',
|
||||
label: '数字长度',
|
||||
type: 'number',
|
||||
defaultValue: 10,
|
||||
min: 6,
|
||||
max: 20,
|
||||
description: '订单号数字部分长度',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const maxNum = Math.pow(10, length) - 1;
|
||||
const num = String(randomInt(0, maxNum)).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const prefix = (params.prefix as string) || 'ORD';
|
||||
const length = (params.length as number) || 10;
|
||||
const num = String(index + 1).padStart(length, '0');
|
||||
return `${prefix}${num}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 价格生成器
|
||||
*/
|
||||
export const price: GeneratorDefinition = {
|
||||
id: 'price',
|
||||
name: '价格',
|
||||
description: '生成随机价格',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低价格',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '价格最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高价格',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '价格最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 2,
|
||||
min: 0,
|
||||
max: 4,
|
||||
description: '价格小数位数',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '价格生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
{ label: '真实分布', value: 'realistic' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'currency',
|
||||
label: '货币符号',
|
||||
type: 'string',
|
||||
defaultValue: '¥',
|
||||
description: '货币符号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 1000;
|
||||
const decimals = (params.decimals as number) ?? 2;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
const currency = (params.currency as string) || '¥';
|
||||
|
||||
let value: number;
|
||||
if (strategy === 'psychological') {
|
||||
value = generatePsychologicalPrice(min, max);
|
||||
} else if (strategy === 'realistic') {
|
||||
value = generateRealisticPrice(min, max);
|
||||
} else {
|
||||
value = min + Math.random() * (max - min);
|
||||
}
|
||||
|
||||
return `${currency}${value.toFixed(decimals)}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理定价（如 9.99, 19.9, 99）
|
||||
*/
|
||||
function generatePsychologicalPrice(min: number, max: number): number {
|
||||
const patterns = [
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min), Math.floor(max / 10));
|
||||
return base * 10 - 0.01;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 10), Math.floor(max / 10));
|
||||
return base * 10 - 1;
|
||||
},
|
||||
() => {
|
||||
const base = randomInt(Math.ceil(min / 100), Math.floor(max / 100));
|
||||
return base * 100 - 1;
|
||||
},
|
||||
];
|
||||
|
||||
let price = randomPick(patterns)();
|
||||
if (price < min) price = min;
|
||||
if (price > max) price = max;
|
||||
return price;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成真实分布价格（对数正态分布）
|
||||
*/
|
||||
function generateRealisticPrice(min: number, max: number): number {
|
||||
const mean = (Math.log(min) + Math.log(max)) / 2;
|
||||
const stdDev = (Math.log(max) - Math.log(min)) / 4;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.exp(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期生成器
|
||||
*/
|
||||
export const date: GeneratorDefinition = {
|
||||
id: 'date',
|
||||
name: '日期',
|
||||
description: '生成随机日期',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'startDate',
|
||||
label: '开始日期',
|
||||
type: 'string',
|
||||
defaultValue: '2020-01-01',
|
||||
description: '日期范围开始',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'endDate',
|
||||
label: '结束日期',
|
||||
type: 'string',
|
||||
defaultValue: '2025-12-31',
|
||||
description: '日期范围结束',
|
||||
placeholder: 'YYYY-MM-DD',
|
||||
},
|
||||
{
|
||||
key: 'format',
|
||||
label: '日期格式',
|
||||
type: 'select',
|
||||
defaultValue: 'YYYY-MM-DD',
|
||||
description: '输出格式',
|
||||
options: [
|
||||
{ label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
|
||||
{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' },
|
||||
{ label: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss' },
|
||||
{ label: 'YYYY/MM/DD HH:mm:ss', value: 'YYYY/MM/DD HH:mm:ss' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const startStr = (params.startDate as string) || '2020-01-01';
|
||||
const endStr = (params.endDate as string) || '2025-12-31';
|
||||
const format = (params.format as string) || 'YYYY-MM-DD';
|
||||
|
||||
const start = new Date(startStr).getTime();
|
||||
const end = new Date(endStr).getTime();
|
||||
const randomTime = start + Math.random() * (end - start);
|
||||
const date = new Date(randomTime);
|
||||
|
||||
return formatDate(date, format);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 状态生成器
|
||||
*/
|
||||
export const status: GeneratorDefinition = {
|
||||
id: 'status',
|
||||
name: '状态',
|
||||
description: '生成随机状态',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '状态类型',
|
||||
type: 'select',
|
||||
defaultValue: 'order',
|
||||
description: '选择状态类型',
|
||||
options: [
|
||||
{ label: '订单状态', value: 'order' },
|
||||
{ label: '用户状态', value: 'user' },
|
||||
{ label: '审核状态', value: 'review' },
|
||||
{ label: '支付状态', value: 'payment' },
|
||||
{ label: '自定义', value: 'custom' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'customValues',
|
||||
label: '自定义值',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
description: '自定义状态值，用逗号分隔',
|
||||
placeholder: '状态1,状态2,状态3',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'order';
|
||||
|
||||
const statusMap: Record<string, string[]> = {
|
||||
order: ['待付款', '待发货', '已发货', '已完成', '已取消', '已退款'],
|
||||
user: ['活跃', '未激活', '已禁用', '已注销'],
|
||||
review: ['待审核', '审核中', '已通过', '已拒绝'],
|
||||
payment: ['待支付', '支付中', '支付成功', '支付失败', '已退款'],
|
||||
};
|
||||
|
||||
if (type === 'custom') {
|
||||
const customValues = (params.customValues as string) || '';
|
||||
const values = customValues.split(',').filter((v) => v.trim());
|
||||
if (values.length > 0) {
|
||||
return randomPick(values);
|
||||
}
|
||||
return '未知状态';
|
||||
}
|
||||
|
||||
return randomPick(statusMap[type] || statusMap.order);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 数量生成器
|
||||
*/
|
||||
export const quantity: GeneratorDefinition = {
|
||||
id: 'quantity',
|
||||
name: '数量',
|
||||
description: '生成随机数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小值',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
description: '数量最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大值',
|
||||
type: 'number',
|
||||
defaultValue: 100,
|
||||
min: 0,
|
||||
description: '数量最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '数量分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '泊松分布', value: 'poisson' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 100;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'poisson') {
|
||||
return String(poissonRandom(Math.floor((min + max) / 2)));
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 泊松分布随机数
|
||||
*/
|
||||
function poissonRandom(lambda: number): number {
|
||||
const L = Math.exp(-lambda);
|
||||
let k = 0;
|
||||
let p = 1;
|
||||
do {
|
||||
k++;
|
||||
p *= Math.random();
|
||||
} while (p > L);
|
||||
return k - 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 评分生成器
|
||||
*/
|
||||
export const rating: GeneratorDefinition = {
|
||||
id: 'rating',
|
||||
name: '评分',
|
||||
description: '生成随机评分',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低分',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高分',
|
||||
type: 'number',
|
||||
defaultValue: 5,
|
||||
min: 0,
|
||||
max: 10,
|
||||
description: '评分最大值',
|
||||
},
|
||||
{
|
||||
key: 'decimals',
|
||||
label: '小数位数',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 2,
|
||||
description: '评分小数位数',
|
||||
},
|
||||
{
|
||||
key: 'skewed',
|
||||
label: '偏向高分',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否偏向高分（模拟真实评分分布）',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 5;
|
||||
const decimals = (params.decimals as number) ?? 1;
|
||||
const skewed = params.skewed !== false;
|
||||
|
||||
if (skewed) {
|
||||
return skewedRandom(min, max).toFixed(decimals);
|
||||
}
|
||||
return (min + Math.random() * (max - min)).toFixed(decimals);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 偏向高分的随机数（模拟真实评分分布）
|
||||
*/
|
||||
function skewedRandom(min: number, max: number): number {
|
||||
// 使用 Beta 分布模拟评分偏向
|
||||
const alpha = 3;
|
||||
const beta = 1;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const x = Math.pow(u, 1 / alpha) / Math.pow(u, 1 / alpha) + Math.pow(v, 1 / beta);
|
||||
return min + x * (max - min);
|
||||
}
|
||||
|
||||
/**
|
||||
* 折扣生成器
|
||||
*/
|
||||
export const discount: GeneratorDefinition = {
|
||||
id: 'discount',
|
||||
name: '折扣',
|
||||
description: '生成随机折扣',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最低折扣',
|
||||
type: 'number',
|
||||
defaultValue: 1,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最小值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最高折扣',
|
||||
type: 'number',
|
||||
defaultValue: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
description: '折扣最大值（百分比）',
|
||||
},
|
||||
{
|
||||
key: 'strategy',
|
||||
label: '生成策略',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '折扣生成策略',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '心理定价', value: 'psychological' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 1;
|
||||
const max = (params.max as number) || 50;
|
||||
const strategy = (params.strategy as string) || 'random';
|
||||
|
||||
let discount: number;
|
||||
if (strategy === 'psychological') {
|
||||
discount = generatePsychologicalDiscount(min, max);
|
||||
} else {
|
||||
discount = randomInt(min, max);
|
||||
}
|
||||
return `${discount}%`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成心理折扣（如 5%, 10%, 20%, 30%）
|
||||
*/
|
||||
function generatePsychologicalDiscount(min: number, max: number): number {
|
||||
const psychologicalDiscounts = [5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80];
|
||||
const validDiscounts = psychologicalDiscounts.filter((d) => d >= min && d <= max);
|
||||
if (validDiscounts.length > 0) {
|
||||
return randomPick(validDiscounts);
|
||||
}
|
||||
return randomInt(min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* 库存生成器
|
||||
*/
|
||||
export const stock: GeneratorDefinition = {
|
||||
id: 'stock',
|
||||
name: '库存',
|
||||
description: '生成随机库存数量',
|
||||
categoryId: 'business',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小库存',
|
||||
type: 'number',
|
||||
defaultValue: 0,
|
||||
min: 0,
|
||||
description: '库存最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大库存',
|
||||
type: 'number',
|
||||
defaultValue: 1000,
|
||||
min: 0,
|
||||
description: '库存最大值',
|
||||
},
|
||||
{
|
||||
key: 'allowZero',
|
||||
label: '允许为零',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否允许库存为零',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 0;
|
||||
const max = (params.max as number) || 1000;
|
||||
const allowZero = params.allowZero !== false;
|
||||
|
||||
if (allowZero) {
|
||||
return String(randomInt(min, max));
|
||||
}
|
||||
return String(randomInt(Math.max(1, min), max));
|
||||
},
|
||||
};
|
||||
|
||||
export const businessGenerators: GeneratorDefinition[] = [
|
||||
orderId,
|
||||
price,
|
||||
date,
|
||||
status,
|
||||
quantity,
|
||||
rating,
|
||||
discount,
|
||||
stock,
|
||||
];
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 生成器库索引
|
||||
* 导出所有生成器和分类配置
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
import { personalGenerators } from './personal';
|
||||
import { businessGenerators } from './business';
|
||||
import { technicalGenerators } from './technical';
|
||||
import { basicGenerators } from './basic';
|
||||
|
||||
/**
|
||||
* 生成器分类配置
|
||||
*/
|
||||
export const generatorCategories: GeneratorCategory[] = [
|
||||
{ id: 'personal', name: '个人信息', icon: 'User' },
|
||||
{ id: 'business', name: '业务数据', icon: 'Briefcase' },
|
||||
{ id: 'technical', name: '技术数据', icon: 'Code' },
|
||||
{ id: 'basic', name: '基础类型', icon: 'Hash' },
|
||||
];
|
||||
|
||||
/**
|
||||
* 所有生成器列表
|
||||
*/
|
||||
export const allGenerators: GeneratorDefinition[] = [
|
||||
...personalGenerators,
|
||||
...businessGenerators,
|
||||
...technicalGenerators,
|
||||
...basicGenerators,
|
||||
];
|
||||
|
||||
/**
|
||||
* 根据 ID 获取生成器
|
||||
*/
|
||||
export function getGeneratorById(id: string): GeneratorDefinition | undefined {
|
||||
return allGenerators.find((g) => g.id === id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据分类 ID 获取生成器列表
|
||||
*/
|
||||
export function getGeneratorsByCategory(categoryId: string): GeneratorDefinition[] {
|
||||
return allGenerators.filter((g) => g.categoryId === categoryId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索生成器
|
||||
*/
|
||||
export function searchGenerators(query: string): GeneratorDefinition[] {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return allGenerators.filter(
|
||||
(g) =>
|
||||
g.name.toLowerCase().includes(lowerQuery) ||
|
||||
g.description.toLowerCase().includes(lowerQuery) ||
|
||||
g.id.toLowerCase().includes(lowerQuery),
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
/**
|
||||
* 个人信息生成器
|
||||
* 包含：中文姓名、邮箱、手机号、身份证号、中文地址、年龄
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
// 中文姓氏
|
||||
const SURNAMES = [
|
||||
'王',
|
||||
'李',
|
||||
'张',
|
||||
'刘',
|
||||
'陈',
|
||||
'杨',
|
||||
'赵',
|
||||
'黄',
|
||||
'周',
|
||||
'吴',
|
||||
'徐',
|
||||
'孙',
|
||||
'胡',
|
||||
'朱',
|
||||
'高',
|
||||
'林',
|
||||
'何',
|
||||
'郭',
|
||||
'马',
|
||||
'罗',
|
||||
'梁',
|
||||
'宋',
|
||||
'郑',
|
||||
'谢',
|
||||
'韩',
|
||||
'唐',
|
||||
'冯',
|
||||
'于',
|
||||
'董',
|
||||
'萧',
|
||||
'程',
|
||||
'曹',
|
||||
'袁',
|
||||
'邓',
|
||||
'许',
|
||||
'傅',
|
||||
'沈',
|
||||
'曾',
|
||||
'彭',
|
||||
'吕',
|
||||
'苏',
|
||||
'卢',
|
||||
'蒋',
|
||||
'蔡',
|
||||
'贾',
|
||||
'丁',
|
||||
'魏',
|
||||
'薛',
|
||||
'叶',
|
||||
'阎',
|
||||
];
|
||||
|
||||
// 中文名字常用字
|
||||
const NAME_CHARS = [
|
||||
'伟',
|
||||
'芳',
|
||||
'娜',
|
||||
'秀英',
|
||||
'敏',
|
||||
'静',
|
||||
'丽',
|
||||
'强',
|
||||
'磊',
|
||||
'洋',
|
||||
'艳',
|
||||
'勇',
|
||||
'军',
|
||||
'杰',
|
||||
'娟',
|
||||
'涛',
|
||||
'明',
|
||||
'超',
|
||||
'秀兰',
|
||||
'霞',
|
||||
'平',
|
||||
'刚',
|
||||
'桂英',
|
||||
'文',
|
||||
'华',
|
||||
'飞',
|
||||
'鑫',
|
||||
'浩',
|
||||
'凯',
|
||||
'宁',
|
||||
'建',
|
||||
'峰',
|
||||
'辉',
|
||||
'成',
|
||||
'宇',
|
||||
'博',
|
||||
'泽',
|
||||
'思',
|
||||
'睿',
|
||||
'晨',
|
||||
'阳',
|
||||
'雪',
|
||||
'冰',
|
||||
'琳',
|
||||
'瑶',
|
||||
'婷',
|
||||
'欣',
|
||||
'悦',
|
||||
'佳',
|
||||
'慧',
|
||||
];
|
||||
|
||||
// 邮箱域名
|
||||
const EMAIL_DOMAINS = ['qq.com', '163.com', '126.com', 'gmail.com', 'outlook.com', 'hotmail.com'];
|
||||
|
||||
// 省份
|
||||
const PROVINCES = [
|
||||
'北京市',
|
||||
'天津市',
|
||||
'上海市',
|
||||
'重庆市',
|
||||
'河北省',
|
||||
'山西省',
|
||||
'辽宁省',
|
||||
'吉林省',
|
||||
'黑龙江省',
|
||||
'江苏省',
|
||||
'浙江省',
|
||||
'安徽省',
|
||||
'福建省',
|
||||
'江西省',
|
||||
'山东省',
|
||||
'河南省',
|
||||
'湖北省',
|
||||
'湖南省',
|
||||
'广东省',
|
||||
'海南省',
|
||||
'四川省',
|
||||
'贵州省',
|
||||
'云南省',
|
||||
'陕西省',
|
||||
'甘肃省',
|
||||
'青海省',
|
||||
'台湾省',
|
||||
'内蒙古自治区',
|
||||
'广西壮族自治区',
|
||||
'西藏自治区',
|
||||
'宁夏回族自治区',
|
||||
'新疆维吾尔自治区',
|
||||
];
|
||||
|
||||
// 城市
|
||||
const CITIES: Record<string, string[]> = {
|
||||
北京市: ['东城区', '西城区', '朝阳区', '海淀区'],
|
||||
上海市: ['黄浦区', '徐汇区', '长宁区', '静安区'],
|
||||
广东省: ['广州市', '深圳市', '东莞市', '佛山市'],
|
||||
浙江省: ['杭州市', '宁波市', '温州市', '嘉兴市'],
|
||||
江苏省: ['南京市', '苏州市', '无锡市', '常州市'],
|
||||
四川省: ['成都市', '绵阳市', '德阳市', '宜宾市'],
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* 中文姓名生成器
|
||||
*/
|
||||
export const chineseName: GeneratorDefinition = {
|
||||
id: 'chineseName',
|
||||
name: '中文姓名',
|
||||
description: '生成随机中文姓名',
|
||||
categoryId: 'personal',
|
||||
params: [],
|
||||
generate: () => {
|
||||
const surname = randomPick(SURNAMES);
|
||||
const name = randomPick(NAME_CHARS);
|
||||
return surname + name;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 邮箱生成器
|
||||
*/
|
||||
export const email: GeneratorDefinition = {
|
||||
id: 'email',
|
||||
name: '邮箱',
|
||||
description: '生成随机邮箱地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'domain',
|
||||
label: '邮箱域名',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择邮箱域名',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
...EMAIL_DOMAINS.map((d) => ({ label: d, value: d })),
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const domain =
|
||||
params.domain === 'random' ? randomPick(EMAIL_DOMAINS) : (params.domain as string);
|
||||
const username = Math.random().toString(36).substring(2, 10);
|
||||
return `${username}@${domain}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 手机号生成器
|
||||
*/
|
||||
export const chinesePhone: GeneratorDefinition = {
|
||||
id: 'chinesePhone',
|
||||
name: '手机号',
|
||||
description: '生成随机中国手机号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'prefix',
|
||||
label: '号段前缀',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择手机号前缀',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '138', value: '138' },
|
||||
{ label: '139', value: '139' },
|
||||
{ label: '158', value: '158' },
|
||||
{ label: '188', value: '188' },
|
||||
{ label: '177', value: '177' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const prefixes = ['138', '139', '158', '188', '177', '136', '159', '186', '135', '150'];
|
||||
const prefix = params.prefix === 'random' ? randomPick(prefixes) : (params.prefix as string);
|
||||
const suffix = String(randomInt(10000000, 99999999));
|
||||
return prefix + suffix;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 身份证号生成器
|
||||
*/
|
||||
export const idCard: GeneratorDefinition = {
|
||||
id: 'idCard',
|
||||
name: '身份证号',
|
||||
description: '生成随机身份证号码',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'region',
|
||||
label: '地区',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: '选择身份证前6位地区码',
|
||||
options: [
|
||||
{ label: '随机', value: 'random' },
|
||||
{ label: '北京', value: '110101' },
|
||||
{ label: '上海', value: '310101' },
|
||||
{ label: '广州', value: '440103' },
|
||||
{ label: '深圳', value: '440305' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region = params.region === 'random' ? randomPick(regions) : (params.region as string);
|
||||
|
||||
// 出生日期 1960-2005年
|
||||
const year = randomInt(1960, 2005);
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
// 顺序码
|
||||
const sequence = String(randomInt(1, 999)).padStart(3, '0');
|
||||
|
||||
// 前17位
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
// 校验码
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
generateAtIndex: (params, index) => {
|
||||
const regions = ['110101', '310101', '440103', '440305', '510104', '330102'];
|
||||
const region =
|
||||
params.region === 'random' ? regions[index % regions.length] : (params.region as string);
|
||||
|
||||
const year = 1990;
|
||||
const month = String(randomInt(1, 12)).padStart(2, '0');
|
||||
const day = String(randomInt(1, 28)).padStart(2, '0');
|
||||
const birthday = `${year}${month}${day}`;
|
||||
|
||||
const sequence = String(index + 1).padStart(3, '0');
|
||||
const prefix17 = region + birthday + sequence;
|
||||
|
||||
const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
|
||||
const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < 17; i++) {
|
||||
sum += parseInt(prefix17[i]) * weights[i];
|
||||
}
|
||||
const checkCode = checkCodes[sum % 11];
|
||||
|
||||
return prefix17 + checkCode;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 中文地址生成器
|
||||
*/
|
||||
export const chineseAddress: GeneratorDefinition = {
|
||||
id: 'chineseAddress',
|
||||
name: '中文地址',
|
||||
description: '生成随机中文地址',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'includeDetail',
|
||||
label: '包含详细地址',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含街道门牌号',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const province = randomPick(PROVINCES);
|
||||
const cities = CITIES[province] || ['市区'];
|
||||
const city = randomPick(cities);
|
||||
const district = `区${randomInt(1, 20)}号`;
|
||||
|
||||
if (params.includeDetail) {
|
||||
const street = `路${randomInt(1, 200)}号`;
|
||||
return `${province}${city}${district}${street}`;
|
||||
}
|
||||
return `${province}${city}${district}`;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 年龄生成器
|
||||
*/
|
||||
export const age: GeneratorDefinition = {
|
||||
id: 'age',
|
||||
name: '年龄',
|
||||
description: '生成随机年龄',
|
||||
categoryId: 'personal',
|
||||
params: [
|
||||
{
|
||||
key: 'min',
|
||||
label: '最小年龄',
|
||||
type: 'number',
|
||||
defaultValue: 18,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最小值',
|
||||
},
|
||||
{
|
||||
key: 'max',
|
||||
label: '最大年龄',
|
||||
type: 'number',
|
||||
defaultValue: 65,
|
||||
min: 0,
|
||||
max: 150,
|
||||
description: '年龄最大值',
|
||||
},
|
||||
{
|
||||
key: 'distribution',
|
||||
label: '分布方式',
|
||||
type: 'select',
|
||||
defaultValue: 'uniform',
|
||||
description: '年龄分布方式',
|
||||
options: [
|
||||
{ label: '均匀分布', value: 'uniform' },
|
||||
{ label: '正态分布', value: 'normal' },
|
||||
{ label: '人口统计分布', value: 'demographic' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const min = (params.min as number) || 18;
|
||||
const max = (params.max as number) || 65;
|
||||
const distribution = (params.distribution as string) || 'uniform';
|
||||
|
||||
if (distribution === 'normal') {
|
||||
return String(normalRandom(min, max));
|
||||
} else if (distribution === 'demographic') {
|
||||
return String(demographicRandom());
|
||||
}
|
||||
return String(randomInt(min, max));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 正态分布随机数
|
||||
*/
|
||||
function normalRandom(min: number, max: number): number {
|
||||
const mean = (min + max) / 2;
|
||||
const stdDev = (max - min) / 6;
|
||||
let u = 0,
|
||||
v = 0;
|
||||
while (u === 0) u = Math.random();
|
||||
while (v === 0) v = Math.random();
|
||||
const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
|
||||
const value = Math.round(mean + num * stdDev);
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
/**
|
||||
* 人口统计分布随机数（模拟真实年龄分布）
|
||||
*/
|
||||
function demographicRandom(): number {
|
||||
const ageGroups = [
|
||||
{ min: 0, max: 14, weight: 0.18 },
|
||||
{ min: 15, max: 24, weight: 0.12 },
|
||||
{ min: 25, max: 34, weight: 0.18 },
|
||||
{ min: 35, max: 44, weight: 0.17 },
|
||||
{ min: 45, max: 54, weight: 0.16 },
|
||||
{ min: 55, max: 64, weight: 0.12 },
|
||||
{ min: 65, max: 100, weight: 0.07 },
|
||||
];
|
||||
|
||||
const random = Math.random();
|
||||
let cumulative = 0;
|
||||
for (const group of ageGroups) {
|
||||
cumulative += group.weight;
|
||||
if (random <= cumulative) {
|
||||
return randomInt(group.min, group.max);
|
||||
}
|
||||
}
|
||||
return randomInt(25, 34);
|
||||
}
|
||||
|
||||
export const personalGenerators: GeneratorDefinition[] = [
|
||||
chineseName,
|
||||
email,
|
||||
chinesePhone,
|
||||
idCard,
|
||||
chineseAddress,
|
||||
age,
|
||||
];
|
||||
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* 技术数据生成器
|
||||
* 包含：UUID、IPv4、URL
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
/**
|
||||
* 生成随机整数
|
||||
*/
|
||||
function randomInt(min: number, max: number): number {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/**
|
||||
* 从数组中随机选择
|
||||
*/
|
||||
function randomPick<T>(arr: T[]): T {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/**
|
||||
* UUID 生成器
|
||||
*/
|
||||
export const uuid: GeneratorDefinition = {
|
||||
id: 'uuid',
|
||||
name: 'UUID',
|
||||
description: '生成随机 UUID',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'version',
|
||||
label: 'UUID 版本',
|
||||
type: 'select',
|
||||
defaultValue: 'v4',
|
||||
description: 'UUID 版本',
|
||||
options: [
|
||||
{ label: 'v4 (随机)', value: 'v4' },
|
||||
{ label: 'v1 (时间戳)', value: 'v1' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'uppercase',
|
||||
label: '大写字母',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否使用大写字母',
|
||||
},
|
||||
{
|
||||
key: 'noDashes',
|
||||
label: '无连字符',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
description: '是否省略连字符',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const version = (params.version as string) || 'v4';
|
||||
const uppercase = params.uppercase === true;
|
||||
const noDashes = params.noDashes === true;
|
||||
|
||||
let result: string;
|
||||
if (version === 'v1') {
|
||||
result = generateUUIDv1();
|
||||
} else {
|
||||
result = generateUUIDv4();
|
||||
}
|
||||
|
||||
if (uppercase) {
|
||||
result = result.toUpperCase();
|
||||
}
|
||||
|
||||
if (noDashes) {
|
||||
result = result.replace(/-/g, '');
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成 UUID v4
|
||||
*/
|
||||
function generateUUIDv4(): string {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
||||
const r = (Math.random() * 16) | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成 UUID v1（简化版本，模拟时间戳）
|
||||
*/
|
||||
function generateUUIDv1(): string {
|
||||
const now = Date.now();
|
||||
const timeLow = (now & 0xffffffff).toString(16).padStart(8, '0');
|
||||
const timeMid = ((now >> 32) & 0xffff).toString(16).padStart(4, '0');
|
||||
const timeHi = ((now >> 48) & 0x0fff) | 0x1000;
|
||||
const clockSeq = randomInt(0, 0x3fff) | 0x8000;
|
||||
const node = Array.from({ length: 6 }, () =>
|
||||
randomInt(0, 255).toString(16).padStart(2, '0'),
|
||||
).join('');
|
||||
|
||||
return `${timeLow}-${timeMid}-${timeHi.toString(16)}-${clockSeq.toString(16)}-${node}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* IPv4 生成器
|
||||
*/
|
||||
export const ipv4: GeneratorDefinition = {
|
||||
id: 'ipv4',
|
||||
name: 'IPv4',
|
||||
description: '生成随机 IPv4 地址',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'type',
|
||||
label: '地址类型',
|
||||
type: 'select',
|
||||
defaultValue: 'random',
|
||||
description: 'IP 地址类型',
|
||||
options: [
|
||||
{ label: '完全随机', value: 'random' },
|
||||
{ label: '内网地址', value: 'private' },
|
||||
{ label: '公网地址', value: 'public' },
|
||||
{ label: '环回地址', value: 'loopback' },
|
||||
],
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const type = (params.type as string) || 'random';
|
||||
|
||||
if (type === 'private') {
|
||||
return generatePrivateIPv4();
|
||||
} else if (type === 'loopback') {
|
||||
return '127.0.0.1';
|
||||
} else if (type === 'public') {
|
||||
return generatePublicIPv4();
|
||||
}
|
||||
return generateRandomIPv4();
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成完全随机 IPv4
|
||||
*/
|
||||
function generateRandomIPv4(): string {
|
||||
return Array.from({ length: 4 }, () => randomInt(0, 255)).join('.');
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成内网 IPv4
|
||||
*/
|
||||
function generatePrivateIPv4(): string {
|
||||
const ranges = [
|
||||
{ prefix: '10', second: () => randomInt(0, 255) },
|
||||
{ prefix: '172', second: () => randomInt(16, 31) },
|
||||
{ prefix: '192.168', second: () => randomInt(0, 255) },
|
||||
];
|
||||
const range = randomPick(ranges);
|
||||
|
||||
if (range.prefix === '192.168') {
|
||||
return `192.168.${range.second()}.${randomInt(1, 254)}`;
|
||||
}
|
||||
return `${range.prefix}.${range.second()}.${randomInt(1, 254)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成公网 IPv4
|
||||
*/
|
||||
function generatePublicIPv4(): string {
|
||||
let first: number;
|
||||
do {
|
||||
first = randomInt(1, 255);
|
||||
} while (first === 10 || first === 127 || first === 192 || first === 172);
|
||||
|
||||
return `${first}.${randomInt(0, 255)}.${randomInt(0, 255)}.${randomInt(1, 254)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* URL 生成器
|
||||
*/
|
||||
export const url: GeneratorDefinition = {
|
||||
id: 'url',
|
||||
name: 'URL',
|
||||
description: '生成随机 URL',
|
||||
categoryId: 'technical',
|
||||
params: [
|
||||
{
|
||||
key: 'protocol',
|
||||
label: '协议',
|
||||
type: 'select',
|
||||
defaultValue: 'https',
|
||||
description: 'URL 协议',
|
||||
options: [
|
||||
{ label: 'HTTPS', value: 'https' },
|
||||
{ label: 'HTTP', value: 'http' },
|
||||
{ label: '随机', value: 'random' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: 'URL 类型',
|
||||
type: 'select',
|
||||
defaultValue: 'website',
|
||||
description: 'URL 类型',
|
||||
options: [
|
||||
{ label: '网站', value: 'website' },
|
||||
{ label: 'API', value: 'api' },
|
||||
{ label: '图片', value: 'image' },
|
||||
{ label: '文件', value: 'file' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'includePath',
|
||||
label: '包含路径',
|
||||
type: 'boolean',
|
||||
defaultValue: true,
|
||||
description: '是否包含路径',
|
||||
},
|
||||
],
|
||||
generate: (params) => {
|
||||
const protocol = (params.protocol as string) || 'https';
|
||||
const type = (params.type as string) || 'website';
|
||||
const includePath = params.includePath !== false;
|
||||
|
||||
const actualProtocol = protocol === 'random' ? randomPick(['http', 'https']) : protocol;
|
||||
|
||||
const domains = [
|
||||
'example.com',
|
||||
'test.org',
|
||||
'demo.net',
|
||||
'sample.io',
|
||||
'api.service.com',
|
||||
'cdn.static.com',
|
||||
'img.media.com',
|
||||
];
|
||||
const domain = randomPick(domains);
|
||||
|
||||
let path = '';
|
||||
if (includePath) {
|
||||
if (type === 'api') {
|
||||
path = `/api/v${randomInt(1, 3)}/${randomPick(['users', 'products', 'orders', 'items'])}`;
|
||||
} else if (type === 'image') {
|
||||
path = `/images/${randomPick(['avatar', 'banner', 'logo', 'photo'])}/${randomInt(1, 1000)}.jpg`;
|
||||
} else if (type === 'file') {
|
||||
path = `/files/${randomPick(['document', 'report', 'data'])}/${randomInt(1, 100)}.pdf`;
|
||||
} else {
|
||||
path = `/${randomPick(['about', 'contact', 'products', 'services', 'blog'])}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加查询参数
|
||||
let query = '';
|
||||
if (Math.random() > 0.5) {
|
||||
const params = new URLSearchParams();
|
||||
params.set('id', String(randomInt(1, 10000)));
|
||||
if (Math.random() > 0.5) params.set('page', String(randomInt(1, 100)));
|
||||
if (Math.random() > 0.7) params.set('lang', randomPick(['zh', 'en', 'ja']));
|
||||
query = `?${params.toString()}`;
|
||||
}
|
||||
|
||||
return `${actualProtocol}://${domain}${path}${query}`;
|
||||
},
|
||||
};
|
||||
|
||||
export const technicalGenerators: GeneratorDefinition[] = [uuid, ipv4, url];
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 生成器内部类型定义
|
||||
* 与 testDataGenerator.ts 分离，用于生成器库内部
|
||||
*/
|
||||
|
||||
import type { GeneratorDefinition, GeneratorCategory } from '@/types/testDataGenerator';
|
||||
|
||||
export type { GeneratorDefinition, GeneratorCategory };
|
||||
|
||||
/**
|
||||
* 生成器注册表
|
||||
*/
|
||||
export interface GeneratorRegistry {
|
||||
/** 分类列表 */
|
||||
categories: GeneratorCategory[];
|
||||
/** 生成器列表 */
|
||||
generators: GeneratorDefinition[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 随机数生成选项
|
||||
*/
|
||||
export interface RandomOptions {
|
||||
/** 最小值 */
|
||||
min?: number;
|
||||
/** 最大值 */
|
||||
max?: number;
|
||||
/** 是否包含最小值 */
|
||||
includeMin?: boolean;
|
||||
/** 是否包含最大值 */
|
||||
includeMax?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 字符集选项
|
||||
*/
|
||||
export interface CharsetOptions {
|
||||
/** 是否包含大写字母 */
|
||||
uppercase?: boolean;
|
||||
/** 是否包含小写字母 */
|
||||
lowercase?: boolean;
|
||||
/** 是否包含数字 */
|
||||
digits?: boolean;
|
||||
/** 是否包含特殊字符 */
|
||||
special?: boolean;
|
||||
/** 自定义字符集 */
|
||||
custom?: string;
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||
|
||||
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
||||
'Invalid Base64 string': 'invalidBase64',
|
||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||
'binaryDataDetected',
|
||||
};
|
||||
|
||||
interface TextModeProps {
|
||||
onSwitchToImageMode?: () => void;
|
||||
}
|
||||
|
||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
setDirection('decode');
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed) return { output: '', error: null };
|
||||
|
||||
try {
|
||||
if (direction === 'encode') {
|
||||
const result = textToBase64(debouncedInput);
|
||||
return { output: result.output, error: null };
|
||||
} else {
|
||||
const decoded = base64ToText(trimmed);
|
||||
return { output: decoded, error: null };
|
||||
}
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
||||
return {
|
||||
output: '',
|
||||
error: i18nKey ? t(i18nKey) : message || t('conversionFailed'),
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, direction, t]);
|
||||
|
||||
const output = conversionPipeline.output;
|
||||
const error = conversionPipeline.error;
|
||||
|
||||
const placeholder =
|
||||
direction === 'encode' ? t('textInputPlaceholder') : t('base64InputPlaceholder');
|
||||
const outputLabel = direction === 'encode' ? t('base64Output') : t('textOutput');
|
||||
|
||||
const showImageHint = useMemo(
|
||||
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
||||
[direction, input],
|
||||
);
|
||||
|
||||
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
||||
if (value === direction) return;
|
||||
setDirection(value);
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4 px-2">
|
||||
{/* 受控方向切流中枢 */}
|
||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 高性能受控文本输入端 */}
|
||||
<TextInputArea
|
||||
placeholder={placeholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
|
||||
{/* 图片 URI 类型劫持警告引导区：
|
||||
- 💡 修复点：彻底废除原生亮色硬编码 hover:bg-blue-100 类名，
|
||||
- 完美向全站 shadcn 暗黑生态看齐，采用标准的 bg-primary/10 混合变体。
|
||||
*/}
|
||||
{showImageHint && (
|
||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||
{t('imageDataUriHint')}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onSwitchToImageMode}
|
||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||
>
|
||||
{t('switchToImageMode')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 5. 编码/解码核心数据承载流卡片 */}
|
||||
{output && (
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{outputLabel}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={output}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
readOnly
|
||||
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
||||
showClear={false}
|
||||
minRows={4}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+2
-2
@@ -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('应通过 formatFileSize 渲染文件大小', () => {
|
||||
it('应通过 formatBytes 渲染文件大小', () => {
|
||||
render(<DecodeResultPaper {...{ ...defaultProps, blobSize: 1536 }} />);
|
||||
expect(screen.getByText(/1\.5 KB/)).toBeInTheDocument();
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import TextMode from '../TextMode';
|
||||
import TextMode from '../components/TextMode';
|
||||
|
||||
// Mock CopyButton
|
||||
vi.mock('@/components/CopyButton', () => ({
|
||||
@@ -76,7 +76,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Base64 字符串无效')).toBeInTheDocument();
|
||||
expect(screen.getByText('无效的 Base64 字符串')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -118,7 +118,7 @@ describe('TextMode', () => {
|
||||
expect(screen.getByRole('button', { name: 'SGVsbG8=' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'textInputArea.clear' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: '清空' }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('button', { name: 'SGVsbG8=' })).not.toBeInTheDocument();
|
||||
@@ -182,9 +182,7 @@ describe('TextMode', () => {
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(
|
||||
screen.getByText('输入似乎是二进制数据（如图片）。请切换到「图像」选项卡。'),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText('检测到二进制数据（如图像），请使用图像选项卡')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ vi.mock('@/config/features', async (importOriginal) => {
|
||||
});
|
||||
|
||||
// Mock 子组件
|
||||
vi.mock('../TextMode', () => ({
|
||||
vi.mock('../components/TextMode', () => ({
|
||||
default: ({ onSwitchToImageMode }: { onSwitchToImageMode?: () => void }) => (
|
||||
<div data-testid="text-mode">
|
||||
TextMode
|
||||
@@ -21,7 +21,7 @@ vi.mock('../TextMode', () => ({
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../Base64ConverterSection', () => ({
|
||||
vi.mock('../components/Base64ConverterSection', () => ({
|
||||
default: ({ mode }: { mode: string }) => <div data-testid={`${mode}-mode`}>{mode}</div>,
|
||||
}));
|
||||
|
||||
|
||||
+22
-25
@@ -1,14 +1,14 @@
|
||||
import { Image as ImageIcon, Trash2, Upload } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import DecodeResultPaper from '@/components/DecodeResultPaper';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import DecodeResultPaper from './DecodeResultPaper';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { downloadBlob, formatFileSize } from '@/utils/base64Converter';
|
||||
import { downloadBlob } from '@/utils/base64Converter';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConvertDirection } from '@/types/storage';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useBase64Converter } from './useBase64Converter';
|
||||
import { useBase64Converter } from '../useBase64Converter';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const isValidDirection = (val: unknown): val is Base64ConvertDirection =>
|
||||
@@ -19,8 +19,6 @@ interface Base64ConverterSectionProps {
|
||||
}
|
||||
|
||||
export default function Base64ConverterSection({ mode }: Base64ConverterSectionProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [direction, setDirection] = useStorageState(
|
||||
`base64Converter/${mode}Mode/direction`,
|
||||
'encode',
|
||||
@@ -43,7 +41,6 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
setCustomFileName,
|
||||
resetAll,
|
||||
safeFileSelect,
|
||||
maxFileSizeStr,
|
||||
} = useBase64Converter({ mode });
|
||||
|
||||
const handleDirectionChange = (next: Base64ConvertDirection) => {
|
||||
@@ -62,8 +59,8 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: t('encode') },
|
||||
{ value: 'decode', label: t('decode') },
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
@@ -122,10 +119,10 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
{info.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground/80 font-mono tabular-nums">
|
||||
{formatFileSize(info.size)} · {info.type}
|
||||
{formatBytes(info.size)} · {info.type}
|
||||
</span>
|
||||
<span className="text-[11px] font-medium text-primary/80 mt-1">
|
||||
{t('clickOrDropToReplace')}
|
||||
{'点击或拖拽以替换文件'}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
@@ -136,14 +133,14 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<Upload className="w-8 h-8 text-muted-foreground/60" />
|
||||
)}
|
||||
<span className="text-xs font-bold text-foreground/80">
|
||||
{mode === 'image' ? t('clickOrDropToImage') : t('clickOrDropToFile')}
|
||||
{mode === 'image' ? '点击或拖拽图像到此处' : '点击或拖拽文件到此处'}
|
||||
</span>
|
||||
<span className="text-[10px] font-medium text-muted-foreground/60">
|
||||
{t('maxFileSize', { max: maxFileSizeStr })}
|
||||
{'最大文件大小：{{max}}'}
|
||||
</span>
|
||||
{mode === 'image' && (
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">
|
||||
{t('supportedFormats')}
|
||||
{'支持 PNG、JPG、WEBP、GIF、BMP、SVG 等格式'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -160,17 +157,17 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t('base64Output')}
|
||||
{'Base64 编码结果'}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<CopyButton
|
||||
text={result.rawBase64}
|
||||
tooltip={t('copyRaw')}
|
||||
tooltip={'复制纯 Base64'}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
<CopyButton
|
||||
text={result.output}
|
||||
tooltip={t('copyDataUri')}
|
||||
tooltip={'复制 Data URI'}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
@@ -188,16 +185,16 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
<div className="flex items-center justify-between font-mono text-[10px] text-muted-foreground/70 select-none pt-1">
|
||||
<div className="flex gap-4 items-center tabular-nums">
|
||||
<span>
|
||||
{t('originalSize')}:{' '}
|
||||
{'原始大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatFileSize(result.originalBytes)}
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('encodedSize')}:{' '}
|
||||
{'编码大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatFileSize(result.outputBytes)}
|
||||
{formatBytes(result.outputBytes)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -208,7 +205,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
className="h-7 rounded-md text-muted-foreground hover:text-destructive text-[11px] gap-1 px-2"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
{t('clear')}
|
||||
{'清空'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -217,7 +214,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
) : (
|
||||
<div className="flex flex-col space-y-4">
|
||||
<TextInputArea
|
||||
placeholder={t('decodeBase64Placeholder')}
|
||||
placeholder={'输入需要解码的 Base64 或 data URI...'}
|
||||
value={decodeInput}
|
||||
onChange={setDecodeInput}
|
||||
externalError={decodeError || undefined}
|
||||
@@ -228,7 +225,7 @@ export default function Base64ConverterSection({ mode }: Base64ConverterSectionP
|
||||
/>
|
||||
{decoded && (
|
||||
<DecodeResultPaper
|
||||
title={mode === 'image' ? t('decodedImageOutput') : t('decodedFileOutput')}
|
||||
title={mode === 'image' ? '解码图像' : '解码文件'}
|
||||
mimeType={decoded.mimeType}
|
||||
blobSize={decoded.blob.size}
|
||||
fileName={decodedFileName}
|
||||
+10
-16
@@ -9,8 +9,9 @@
|
||||
*/
|
||||
import { Download } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { formatFileSize } from '@/utils/base64Converter';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
|
||||
interface DecodeResultPaperProps {
|
||||
/** 标题文案，由调用方传入 i18n key 对应的值（如 decodedFileOutput / decodedImageOutput） */
|
||||
@@ -38,8 +39,6 @@ export default function DecodeResultPaper({
|
||||
onDownload,
|
||||
children,
|
||||
}: DecodeResultPaperProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
return (
|
||||
<div className="p-4 rounded-xl bg-primary/10 border border-primary/30">
|
||||
{/* 标题 */}
|
||||
@@ -51,24 +50,19 @@ export default function DecodeResultPaper({
|
||||
{/* 文件信息 */}
|
||||
<div className="flex gap-4 mb-3">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('inferredMimeType')}: {mimeType}
|
||||
{'推断的 MIME 类型'}: {mimeType}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{t('decodedSize')}: {formatFileSize(blobSize)}
|
||||
{'解码大小'}: {formatBytes(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"
|
||||
/>
|
||||
<Label className="block text-xs font-medium text-muted-foreground mb-1">
|
||||
{'解码后文件名'}
|
||||
</Label>
|
||||
<Input value={fileName} onChange={(e) => onFileNameChange(e.target.value)} />
|
||||
</div>
|
||||
|
||||
{/* 下载按钮 */}
|
||||
@@ -79,7 +73,7 @@ export default function DecodeResultPaper({
|
||||
className="w-full rounded-lg font-bold"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
{t('download')}
|
||||
{'下载'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,90 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useTextMode } from '../useTextMode';
|
||||
|
||||
interface TextModeProps {
|
||||
onSwitchToImageMode?: () => void;
|
||||
}
|
||||
|
||||
export default function TextMode({ onSwitchToImageMode }: TextModeProps = {}) {
|
||||
const {
|
||||
input,
|
||||
setInput,
|
||||
direction,
|
||||
handleDirectionChange,
|
||||
placeholder,
|
||||
output,
|
||||
outputLabel,
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
} = useTextMode();
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col space-y-4 px-2">
|
||||
<div className="flex h-11 items-center px-1.5 bg-secondary/40 rounded-xl border border-border/60 w-fit">
|
||||
<SwitchButtonGroup
|
||||
value={direction}
|
||||
options={[
|
||||
{ value: 'encode', label: '编码' },
|
||||
{ value: 'decode', label: '解码' },
|
||||
]}
|
||||
onChange={handleDirectionChange}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
placeholder={placeholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || undefined}
|
||||
showClear={true}
|
||||
allowCopy={true}
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
|
||||
{showImageHint && (
|
||||
<div className="flex items-center justify-between p-3.5 rounded-xl bg-primary/10 border border-primary/20">
|
||||
<span className="text-xs font-semibold text-primary tracking-tight">
|
||||
检测到图片的 data URI，请使用「图像」选项卡进行解码。
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onSwitchToImageMode}
|
||||
className="h-7 rounded-md text-xs font-bold text-primary hover:text-primary hover:bg-primary/20 dark:hover:bg-primary/10 px-2.5"
|
||||
>
|
||||
切换到图像模式
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{output && (
|
||||
<div className="p-4 rounded-2xl bg-card border border-border shadow-sm flex flex-col space-y-3">
|
||||
<div className="flex justify-between items-center select-none">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{outputLabel}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={output}
|
||||
className="h-6 px-2 rounded-md border text-[10px] font-bold"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextInputArea
|
||||
readOnly
|
||||
value={output.length > 2000 ? `${output.substring(0, 2000)}...` : output}
|
||||
showClear={false}
|
||||
minRows={4}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import type { Base64ConverterPageMode } from '@/types/storage';
|
||||
import TextMode from './TextMode';
|
||||
import Base64ConverterSection from './Base64ConverterSection';
|
||||
import TextMode from './components/TextMode';
|
||||
import Base64ConverterSection from './components/Base64ConverterSection';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
const VALID_PAGE_MODES: readonly Base64ConverterPageMode[] = ['text', 'file', 'image'];
|
||||
@@ -12,7 +11,6 @@ const isValidPageMode = (val: unknown): val is Base64ConverterPageMode =>
|
||||
type PageMode = Base64ConverterPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('base64Converter');
|
||||
const [pageMode, setPageMode] = useStorageState(
|
||||
'base64Converter/pageMode',
|
||||
'text',
|
||||
@@ -24,9 +22,9 @@ export default function Index() {
|
||||
<SwitchButtonGroup
|
||||
value={pageMode}
|
||||
options={[
|
||||
{ value: 'text', label: t('base64Converter:textMode') },
|
||||
{ value: 'file', label: t('base64Converter:fileMode') },
|
||||
{ value: 'image', label: t('base64Converter:imageMode') },
|
||||
{ value: 'text', label: '文本' },
|
||||
{ value: 'file', label: '文件' },
|
||||
{ value: 'image', label: '图像' },
|
||||
]}
|
||||
onChange={(value: PageMode) => setPageMode(value)}
|
||||
size="small"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { FileToBase64Result } from '@/utils/base64Converter';
|
||||
import {
|
||||
base64ToBlob,
|
||||
@@ -21,8 +20,6 @@ interface UseBase64ConverterProps {
|
||||
}
|
||||
|
||||
export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const { t } = useI18n('base64Converter');
|
||||
|
||||
const [result, setResult] = useState<FileToBase64Result | null>(null);
|
||||
const [info, setInfo] = useState<FileInfo | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -62,7 +59,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
setInfo(null);
|
||||
|
||||
if (!isFileSizeValid(file.size)) {
|
||||
setEncodeError(t('fileSizeExceeded', { max: `${MAX_FILE_SIZE / 1024 / 1024} MB` }));
|
||||
setEncodeError(`文件大小超出限制（最大 ${MAX_FILE_SIZE / 1024 / 1024} MB）`);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -71,7 +68,7 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
!isSupportedImageType(file.type) &&
|
||||
!isSupportedImageExtension(file.name)
|
||||
) {
|
||||
setEncodeError(t('unsupportedImageType'));
|
||||
setEncodeError('不支持的图像格式');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -87,13 +84,13 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
if (!cancelRef.current) setResult(res);
|
||||
} catch (e) {
|
||||
if (!cancelRef.current) {
|
||||
setEncodeError(e instanceof Error ? e.message : t('conversionFailed'));
|
||||
setEncodeError(e instanceof Error ? e.message : '转换失败');
|
||||
}
|
||||
} finally {
|
||||
if (!cancelRef.current) setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[mode, t],
|
||||
[mode],
|
||||
);
|
||||
|
||||
const safeFileSelect = useCallback(
|
||||
@@ -116,10 +113,10 @@ export function useBase64Converter({ mode }: UseBase64ConverterProps) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
return {
|
||||
decoded: null,
|
||||
error: message === 'Invalid Base64 string' ? t('invalidBase64') : t('conversionFailed'),
|
||||
error: message === 'Invalid Base64 string' ? 'Base64 字符串无效' : '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedDecodeInput, t]);
|
||||
}, [debouncedDecodeInput]);
|
||||
|
||||
const decoded = decodePipeline.decoded;
|
||||
const decodeError = decodePipeline.error;
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { base64ToText, textToBase64 } from '@/utils/base64Converter';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
const IMAGE_DATA_URI_PATTERN = /^\s*data:image\//i;
|
||||
|
||||
const ERROR_MESSAGE_TO_I18N: Record<string, string> = {
|
||||
'Invalid Base64 string': '无效的 Base64 字符串',
|
||||
'Input appears to be binary data (e.g. an image). Please use the Image tab instead.':
|
||||
'检测到二进制数据（如图像），请使用图像选项卡',
|
||||
};
|
||||
|
||||
export function useTextMode() {
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [direction, setDirection] = useState<'encode' | 'decode'>('encode');
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
setDebouncedInput(input);
|
||||
}, 200);
|
||||
return () => clearTimeout(handle);
|
||||
}, [input]);
|
||||
|
||||
const handleContextMenuData = useCallback((payload: string) => {
|
||||
setInput(payload);
|
||||
setDebouncedInput(payload);
|
||||
setDirection('decode');
|
||||
}, []);
|
||||
|
||||
useContextMenuData({ featureKey: 'base64Converter', onData: handleContextMenuData });
|
||||
|
||||
const conversionPipeline = useMemo(() => {
|
||||
const trimmed = debouncedInput.trim();
|
||||
if (!trimmed) return { output: '', error: null };
|
||||
|
||||
try {
|
||||
if (direction === 'encode') {
|
||||
const result = textToBase64(debouncedInput);
|
||||
return { output: result.output, error: null };
|
||||
} else {
|
||||
const decoded = base64ToText(trimmed);
|
||||
return { output: decoded, error: null };
|
||||
}
|
||||
} catch (e) {
|
||||
const message = e instanceof Error ? e.message : '';
|
||||
const i18nKey = ERROR_MESSAGE_TO_I18N[message];
|
||||
return {
|
||||
output: '',
|
||||
error: i18nKey || message || '转换失败',
|
||||
};
|
||||
}
|
||||
}, [debouncedInput, direction]);
|
||||
|
||||
const output = conversionPipeline.output;
|
||||
const error = conversionPipeline.error;
|
||||
|
||||
const placeholder =
|
||||
direction === 'encode' ? '输入需要编码为 Base64 的文本...' : '输入需要解码的 Base64 字符串...';
|
||||
const outputLabel = direction === 'encode' ? 'Base64 编码结果' : '解码文本结果';
|
||||
|
||||
const showImageHint = useMemo(
|
||||
() => direction === 'decode' && IMAGE_DATA_URI_PATTERN.test(input),
|
||||
[direction, input],
|
||||
);
|
||||
|
||||
const handleDirectionChange = (value: 'encode' | 'decode') => {
|
||||
if (value === direction) return;
|
||||
setDirection(value);
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setInput('');
|
||||
setDebouncedInput('');
|
||||
};
|
||||
|
||||
return {
|
||||
input,
|
||||
setInput,
|
||||
direction,
|
||||
handleDirectionChange,
|
||||
placeholder,
|
||||
output,
|
||||
outputLabel,
|
||||
error,
|
||||
showImageHint,
|
||||
handleClear,
|
||||
};
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
import type { ComponentType } from 'react';
|
||||
import React from 'react';
|
||||
import type { LucideProps } from 'lucide-react';
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import type { PaletteColorKey } from '@/config/features';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const PALETTE_COLORS: Record<PaletteColorKey, string> = {
|
||||
primary: '13, 148, 136', // teal
|
||||
success: '22, 163, 74', // green
|
||||
warning: '217, 119, 6', // amber (存储清理的橙色轴)
|
||||
error: '220, 38, 38', // red
|
||||
secondary: '147, 51, 232',
|
||||
info: '37, 99, 235', // blue
|
||||
};
|
||||
|
||||
export interface ToolCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
description?: string;
|
||||
snapshot?: React.ReactNode;
|
||||
colorKey: PaletteColorKey;
|
||||
icon: ComponentType<LucideProps>;
|
||||
onNavigate: () => void;
|
||||
}
|
||||
|
||||
export default function ToolCard({
|
||||
title,
|
||||
description,
|
||||
snapshot,
|
||||
colorKey,
|
||||
icon: IconComponent,
|
||||
onNavigate,
|
||||
className,
|
||||
...props
|
||||
}: ToolCardProps) {
|
||||
const rgbValues = PALETTE_COLORS[colorKey];
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
['--tool-color' as string]: rgbValues,
|
||||
}}
|
||||
/* 💡 核心修复点：
|
||||
- 坚决不用 h-full 或固定高度，锁死 h-auto（高度自适应流），配合 py-4 px-4 牢牢把内容包裹在卡片体内。
|
||||
- 废除原先会乱飘的内联 style 属性擦写，全权放权给 Tailwind 的声明式 hover 变体。
|
||||
*/
|
||||
className={cn(
|
||||
'group relative rounded-xl border border-border/70 bg-card text-card-foreground p-4 h-auto flex flex-col items-stretch justify-start gap-3 shadow-sm select-none box-border',
|
||||
'hover:bg-muted/30',
|
||||
'hover:border-[rgba(var(--tool-color),0.45)]',
|
||||
'hover:shadow-[0_8px_24px_-8px_rgba(var(--tool-color),0.14)] dark:hover:shadow-[0_8px_30px_-10px_rgba(var(--tool-color),0.25)]',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{/* 上半部分：核心信息交互排版轴 */}
|
||||
<div className="flex items-center justify-between w-full relative min-w-0 min-h-[44px]">
|
||||
<div className="flex gap-3 items-center min-w-0 flex-1 pr-2">
|
||||
{/* 左侧圆形图标容器 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-10 h-10 rounded-xl shrink-0',
|
||||
'bg-[rgba(var(--tool-color),0.08)] dark:bg-[rgba(var(--tool-color),0.12)]',
|
||||
'text-[rgb(var(--tool-color))]',
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-5 w-5 shrink-0" />
|
||||
</div>
|
||||
|
||||
{/* 中间文字描述区：利用 flex-1 min-w-0 防御文本过长发生恶性撑开 */}
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
<h4 className="font-bold text-sm tracking-tight text-foreground leading-snug">
|
||||
{title}
|
||||
</h4>
|
||||
{description && (
|
||||
<p className="text-[11px] font-medium text-muted-foreground/90 mt-0.5 leading-normal w-full truncate">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧指示小箭头 */}
|
||||
<div className="text-muted-foreground/40 group-hover:text-[rgb(var(--tool-color))] p-1 shrink-0 group-hover:translate-x-0.5">
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 覆盖整个上半部分的绝对定位隐形跳转层（A11y 无障碍标准合规） */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onNavigate}
|
||||
aria-label={`进入 ${title}`}
|
||||
className="absolute inset-0 w-full h-full cursor-pointer bg-transparent border-none opacity-0 focus-visible:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下半部分：未来的动态预览沙箱独立承载区 */}
|
||||
{snapshot != null && (
|
||||
<div className="mt-1 pt-3 border-t border-dashed border-border/80 w-full relative z-10 select-text">
|
||||
{snapshot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
ToolCard.displayName = 'ToolCard';
|
||||
@@ -1,12 +1,10 @@
|
||||
import { useRouter } from '@/providers/RouterProvider';
|
||||
import { getFeatureByKey } from '@/config/features';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function Index() {
|
||||
const { navigateTo, visiblePages, pageOrder, recentlyUsedTools } = useRouter();
|
||||
const { t } = useI18n(['features']);
|
||||
|
||||
const visibleSet = new Set<string>(visiblePages);
|
||||
|
||||
@@ -28,7 +26,7 @@ export default function Index() {
|
||||
{showRecent && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
{t('dashboard_recentlyUsed')}
|
||||
{'最近使用'}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{recentFeatures.map(({ key, feature }) => {
|
||||
@@ -46,7 +44,7 @@ export default function Index() {
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-3.5 w-3.5 text-muted-foreground/70" />
|
||||
{t(feature!.labelKey)}
|
||||
{feature!.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -57,7 +55,7 @@ export default function Index() {
|
||||
{/* 全部工具 — 紧凑 Grid */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
|
||||
{t('dashboard_allTools')}
|
||||
{'全部工具'}
|
||||
</h3>
|
||||
<div className={cn('grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-2')}>
|
||||
{visibleFeatures.map(({ key, feature }) => {
|
||||
@@ -82,7 +80,7 @@ export default function Index() {
|
||||
)}
|
||||
/>
|
||||
<span className="text-[11px] font-medium text-muted-foreground/80 group-hover:text-foreground leading-tight text-center truncate w-full transition-colors">
|
||||
{t(feature!.labelKey)}
|
||||
{feature!.label}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import Index from '../index';
|
||||
|
||||
describe('JsonTools 页面', () => {
|
||||
it('应该渲染模式切换按钮', () => {
|
||||
render(<Index />);
|
||||
// 基本渲染测试：页面含多个模式切换按钮，应至少渲染一个
|
||||
expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
+3
-8
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface DiffNavigatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -19,8 +18,6 @@ export default function DiffNavigator({
|
||||
className,
|
||||
...props
|
||||
}: DiffNavigatorProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
const isFirst = currentIndex <= 0;
|
||||
const isLast = currentIndex >= total - 1;
|
||||
|
||||
@@ -33,9 +30,7 @@ export default function DiffNavigator({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="text-xs font-semibold text-muted-foreground/90">
|
||||
{t('jsonDiff:noDiffs')}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-muted-foreground/90">{'无差异'}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -52,7 +47,7 @@ export default function DiffNavigator({
|
||||
<button
|
||||
type="button"
|
||||
disabled={isFirst}
|
||||
aria-label={t('jsonDiff:previousDiff')}
|
||||
aria-label={'上一个'}
|
||||
onClick={onPrev}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
@@ -72,7 +67,7 @@ export default function DiffNavigator({
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLast}
|
||||
aria-label={t('jsonDiff:nextDiff')}
|
||||
aria-label={'下一个'}
|
||||
onClick={onNext}
|
||||
className={cn(
|
||||
'p-1 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground',
|
||||
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import JsonTree from './JsonTree';
|
||||
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from './types';
|
||||
import type { DiffNode, DiffResult as DiffResultType, DiffType, ViewMode } from '../types';
|
||||
|
||||
export interface DiffResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
result: DiffResultType;
|
||||
@@ -17,8 +16,6 @@ export default function DiffResult({
|
||||
className,
|
||||
...props
|
||||
}: DiffResultProps) {
|
||||
const { t } = useI18n('jsonDiff');
|
||||
|
||||
if (viewMode === 'sideBySide') {
|
||||
return (
|
||||
<div
|
||||
@@ -26,11 +23,11 @@ export default function DiffResult({
|
||||
{...props}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:leftLabel')} />
|
||||
<SectionLabel text={'原始 JSON'} />
|
||||
<JsonTree node={result.root} side="left" activePath={activePath} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<SectionLabel text={t('jsonDiff:rightLabel')} />
|
||||
<SectionLabel text={'目标 JSON'} />
|
||||
<JsonTree node={result.root} side="right" activePath={activePath} />
|
||||
</div>
|
||||
</div>
|
||||
+28
-16
@@ -1,18 +1,31 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { validateJson } from '@/utils/jsonFormatter';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ConvertFunction, ConvertResult } from '../types';
|
||||
|
||||
export interface ConvertResult {
|
||||
output: string;
|
||||
originalBytes: number;
|
||||
outputBytes: number;
|
||||
}
|
||||
|
||||
export type ConvertFunction = (text: string) => ConvertResult;
|
||||
const CONVERT_LABELS: Record<
|
||||
string,
|
||||
{ inputPlaceholder: string; outputLabel: string; emptyHint: string }
|
||||
> = {
|
||||
yaml: {
|
||||
inputPlaceholder: '输入需要转换的 JSON...',
|
||||
outputLabel: 'YAML 结果',
|
||||
emptyHint: '输入 JSON 后点击转换',
|
||||
},
|
||||
toml: {
|
||||
inputPlaceholder: '输入需要转换的 JSON...',
|
||||
outputLabel: 'TOML 结果',
|
||||
emptyHint: '输入 JSON 后点击转换',
|
||||
},
|
||||
minify: {
|
||||
inputPlaceholder: '输入需要压缩的 JSON...',
|
||||
outputLabel: '压缩结果',
|
||||
emptyHint: '输入 JSON 后点击压缩',
|
||||
},
|
||||
};
|
||||
|
||||
interface JsonConvertSectionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
translationPrefix: string;
|
||||
@@ -25,12 +38,11 @@ export default function JsonConvertSection({
|
||||
className,
|
||||
...props
|
||||
}: JsonConvertSectionProps) {
|
||||
const { t } = useI18n('jsonFormat');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
|
||||
const pk = translationPrefix;
|
||||
const labels = CONVERT_LABELS[pk] || CONVERT_LABELS.yaml;
|
||||
|
||||
// Debounce input
|
||||
useEffect(() => {
|
||||
@@ -72,7 +84,7 @@ export default function JsonConvertSection({
|
||||
<div className={cn('w-full flex flex-col gap-4', className)} {...props}>
|
||||
{/* 输入区 */}
|
||||
<TextInputArea
|
||||
placeholder={t(`jsonFormat:${pk}InputPlaceholder`)}
|
||||
placeholder={labels.inputPlaceholder}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
@@ -89,19 +101,19 @@ export default function JsonConvertSection({
|
||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t(`jsonFormat:${pk}OutputLabel`)}
|
||||
{labels.outputLabel}
|
||||
</span>
|
||||
|
||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||
<span>
|
||||
{t('jsonFormat:originalSize')}:{' '}
|
||||
{'原始大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
{'格式化后大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.outputBytes)}
|
||||
</span>
|
||||
@@ -122,7 +134,7 @@ export default function JsonConvertSection({
|
||||
) : (
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||
{error ? t('jsonFormat:fixErrorHint') : t(`jsonFormat:${pk}EmptyHint`)}
|
||||
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : labels.emptyHint}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
+8
-11
@@ -1,5 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import {
|
||||
formatJson,
|
||||
type JsonFormatOptions,
|
||||
@@ -7,15 +6,13 @@ import {
|
||||
validateJson,
|
||||
} from '@/utils/jsonFormatter';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function JsonFormatSection() {
|
||||
const { t } = useI18n('jsonFormat');
|
||||
|
||||
const [input, setInput] = useState('');
|
||||
const [debouncedInput, setDebouncedInput] = useState('');
|
||||
const [indentSize, setIndentSize] = useState<number>(2);
|
||||
@@ -66,7 +63,7 @@ export default function JsonFormatSection() {
|
||||
{/* 缩进配置区 */}
|
||||
<div className="flex gap-2 items-center shrink-0 select-none">
|
||||
<span className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider">
|
||||
{t('jsonFormat:indentSize')}
|
||||
{'缩进'}
|
||||
</span>
|
||||
<SwitchButtonGroup
|
||||
value={indentSize}
|
||||
@@ -94,7 +91,7 @@ export default function JsonFormatSection() {
|
||||
htmlFor="sort-keys-checkbox"
|
||||
className="text-xs font-bold text-foreground/80 cursor-pointer tracking-tight group-hover:text-foreground"
|
||||
>
|
||||
{t('jsonFormat:sortKeys')}
|
||||
{'键名排序'}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,7 +99,7 @@ export default function JsonFormatSection() {
|
||||
|
||||
{/* 满血版输入终端 */}
|
||||
<TextInputArea
|
||||
placeholder={t('jsonFormat:inputPlaceholder')}
|
||||
placeholder={'输入需要格式化的 JSON...'}
|
||||
value={input}
|
||||
onChange={setInput}
|
||||
externalError={error || runtimeError || undefined}
|
||||
@@ -120,19 +117,19 @@ export default function JsonFormatSection() {
|
||||
<div className="flex h-9 items-center justify-between px-4 border-b border-border bg-muted/50 select-none">
|
||||
<div className="flex gap-4 items-center">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/90">
|
||||
{t('jsonFormat:outputLabel')}
|
||||
{'格式化结果'}
|
||||
</span>
|
||||
|
||||
<div className="hidden sm:flex gap-3 items-center font-mono text-[10px] text-muted-foreground/70 tabular-nums">
|
||||
<span>
|
||||
{t('jsonFormat:originalSize')}:{' '}
|
||||
{'原始大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.originalBytes)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-border/60">|</span>
|
||||
<span>
|
||||
{t('jsonFormat:formattedSize')}:{' '}
|
||||
{'格式化后大小'}:{' '}
|
||||
<span className="font-semibold text-foreground/80">
|
||||
{formatBytes(result.formattedBytes)}
|
||||
</span>
|
||||
@@ -154,7 +151,7 @@ export default function JsonFormatSection() {
|
||||
/* 空状态指示引导区 */
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[120px] select-none">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[240px] leading-relaxed">
|
||||
{error ? t('jsonFormat:fixErrorHint') : t('jsonFormat:emptyHint')}
|
||||
{error ? '请修正上方 JSON 的语法错误以开启实时流式格式化' : '输入 JSON 后点击格式化'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChevronDown, ChevronRight } from 'lucide-react'; // 用正统的矢量箭头平替原生的字符 '▾' '▸'
|
||||
import type { DiffNode, DiffType } from './types';
|
||||
import type { DiffNode, DiffType } from '../types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export type TreeSide = 'left' | 'right';
|
||||
@@ -1,9 +1,8 @@
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import JsonDiffInput from './JsonDiffInput';
|
||||
import DiffResult from './DiffResult';
|
||||
import DiffNavigator from './DiffNavigator';
|
||||
import JsonFormatSection from './JsonFormatSection';
|
||||
import JsonConvertSection from './JsonConvertSection';
|
||||
import JsonDiffInput from './components/JsonDiffInput';
|
||||
import DiffResult from './components/DiffResult';
|
||||
import DiffNavigator from './components/DiffNavigator';
|
||||
import JsonFormatSection from './components/JsonFormatSection';
|
||||
import JsonConvertSection from './components/JsonConvertSection';
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
import { useJsonTools } from './useJsonTools';
|
||||
import type { JsonToolsPageMode } from '@/types/storage';
|
||||
@@ -12,7 +11,6 @@ import type { ViewMode } from './types';
|
||||
type PageMode = JsonToolsPageMode;
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
||||
const {
|
||||
pageMode,
|
||||
setPageMode,
|
||||
@@ -41,11 +39,11 @@ export default function Index() {
|
||||
value={pageMode}
|
||||
onChange={(v: PageMode) => setPageMode(v)}
|
||||
options={[
|
||||
{ value: 'diff', label: t('jsonFormat:diffMode') },
|
||||
{ value: 'format', label: t('jsonFormat:formatMode') },
|
||||
{ value: 'yaml', label: t('jsonFormat:yamlMode') },
|
||||
{ value: 'toml', label: t('jsonFormat:tomlMode') },
|
||||
{ value: 'minify', label: t('jsonFormat:minifyMode') },
|
||||
{ value: 'diff', label: '差异比较' },
|
||||
{ value: 'format', label: '格式化' },
|
||||
{ value: 'yaml', label: 'YAML' },
|
||||
{ value: 'toml', label: 'TOML' },
|
||||
{ value: 'minify', label: '压缩' },
|
||||
]}
|
||||
size="small"
|
||||
className="w-full sm:w-auto"
|
||||
@@ -58,8 +56,8 @@ export default function Index() {
|
||||
value={viewMode}
|
||||
onChange={(v: ViewMode) => setViewMode(v)}
|
||||
options={[
|
||||
{ value: 'sideBySide', label: t('jsonDiff:sideBySideMode') },
|
||||
{ value: 'unified', label: t('jsonDiff:unifiedMode') },
|
||||
{ value: 'sideBySide', label: '并排' },
|
||||
{ value: 'unified', label: '统一' },
|
||||
]}
|
||||
size="small"
|
||||
/>
|
||||
@@ -67,16 +65,16 @@ export default function Index() {
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 w-full items-stretch">
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:leftLabel')}
|
||||
placeholder={t('jsonDiff:leftPlaceholder')}
|
||||
label={'原始 JSON'}
|
||||
placeholder={'输入原始 JSON...'}
|
||||
value={leftInput}
|
||||
onChange={setLeftInput}
|
||||
error={leftError}
|
||||
minRows={9}
|
||||
/>
|
||||
<JsonDiffInput
|
||||
label={t('jsonDiff:rightLabel')}
|
||||
placeholder={t('jsonDiff:rightPlaceholder')}
|
||||
label={'目标 JSON'}
|
||||
placeholder={'输入目标 JSON...'}
|
||||
value={rightInput}
|
||||
onChange={setRightInput}
|
||||
error={rightError}
|
||||
@@ -99,7 +97,9 @@ export default function Index() {
|
||||
) : (
|
||||
<div className="p-8 rounded-xl bg-muted/30 border border-dashed border-border/80 text-center flex flex-col items-center justify-center min-h-[140px]">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80 tracking-wide max-w-[260px] leading-relaxed">
|
||||
{leftError || rightError ? t('jsonDiff:fixErrorHint') : t('jsonDiff:emptyHint')}
|
||||
{leftError || rightError
|
||||
? '请修正上方 JSON 的语法错误以开启实时流式比对'
|
||||
: '输入两侧 JSON 后点击比较'}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -53,3 +53,13 @@ export interface DiffResult {
|
||||
/** 差异核心总计数（等价于 diffPaths.length），注入 tabular-nums 配合渲染 */
|
||||
diffCount: number;
|
||||
}
|
||||
|
||||
/** JSON 转换结果 */
|
||||
export interface ConvertResult {
|
||||
output: string;
|
||||
originalBytes: number;
|
||||
outputBytes: number;
|
||||
}
|
||||
|
||||
/** JSON 转换函数类型 */
|
||||
export type ConvertFunction = (text: string) => ConvertResult;
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { useStorageState } from '@/utils/useStorageState';
|
||||
import { diffJson } from './diffEngine';
|
||||
import { diffJson } from '@/utils/diffEngine';
|
||||
import { jsonToYaml } from '@/utils/jsonToYaml';
|
||||
import { jsonToToml } from '@/utils/jsonToToml';
|
||||
import { minifyJson } from '@/utils/jsonFormatter';
|
||||
import { isValidPageMode, tryParse } from './constants';
|
||||
import type { JsonToolsPageMode } from '@/types/storage';
|
||||
import type { ConvertFunction } from './JsonConvertSection';
|
||||
import type { ViewMode } from './types';
|
||||
import type { ConvertFunction, ViewMode } from './types';
|
||||
|
||||
export interface UseJsonToolsReturn {
|
||||
pageMode: JsonToolsPageMode;
|
||||
@@ -35,7 +33,6 @@ export interface UseJsonToolsReturn {
|
||||
}
|
||||
|
||||
export function useJsonTools(): UseJsonToolsReturn {
|
||||
const { t } = useI18n(['jsonDiff', 'jsonFormat']);
|
||||
const [pageMode, setPageMode] = useStorageState('jsonTools/pageMode', 'diff', isValidPageMode);
|
||||
|
||||
// Diff inputs
|
||||
@@ -55,12 +52,12 @@ export function useJsonTools(): UseJsonToolsReturn {
|
||||
|
||||
// Parse debounced inputs
|
||||
const parseState = useMemo(() => {
|
||||
const invalidMsg = t('jsonDiff:invalidJson');
|
||||
const invalidMsg = '无效的 JSON 格式';
|
||||
return {
|
||||
left: tryParse(debouncedLeft, invalidMsg),
|
||||
right: tryParse(debouncedRight, invalidMsg),
|
||||
};
|
||||
}, [debouncedLeft, debouncedRight, t]);
|
||||
}, [debouncedLeft, debouncedRight]);
|
||||
|
||||
const leftError = parseState.left.error;
|
||||
const rightError = parseState.right.error;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { stringifyJson } from '@/utils/jwt';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -18,7 +17,6 @@ export default function JwtSection({
|
||||
bgClass,
|
||||
borderClass,
|
||||
}: JwtSectionProps) {
|
||||
const { t } = useI18n('jwt');
|
||||
return (
|
||||
<div className={cn('p-4 rounded-xl border border-solid', bgClass, borderClass)}>
|
||||
<div className="flex justify-between items-center mb-2 select-none">
|
||||
@@ -31,7 +29,7 @@ export default function JwtSection({
|
||||
/>
|
||||
</div>
|
||||
<pre className="m-0 p-3 bg-muted/30 dark:bg-muted/10 rounded-lg text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all border border-border/50 text-foreground/90 leading-relaxed select-text">
|
||||
{content ? stringifyJson(content) : t('jwt:invalidFormat')}
|
||||
{content ? stringifyJson(content) : '无法解析'}
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
|
||||
+7
-11
@@ -1,11 +1,9 @@
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import CopyButton from '@/components/CopyButton';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import JwtSection from './JwtSection';
|
||||
import { useJwt } from './useJwt';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n(['jwt', 'jsonFormat']);
|
||||
const { jwtInput, result, handleChange, handleClear } = useJwt();
|
||||
|
||||
return (
|
||||
@@ -14,7 +12,7 @@ export default function Index() {
|
||||
<TextInputArea
|
||||
minRows={5}
|
||||
maxRows={10}
|
||||
placeholder={t('jwt_placeholder')}
|
||||
placeholder={'在此粘贴 JWT 令牌 (Encoded JWT)...'}
|
||||
value={jwtInput}
|
||||
onChange={handleChange}
|
||||
allowCopy={true}
|
||||
@@ -26,7 +24,7 @@ export default function Index() {
|
||||
{result && !result.error && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<JwtSection
|
||||
title={t('jwt:headerTitle')}
|
||||
title={'HEADER: 算法 & 令牌类型'}
|
||||
content={result.header}
|
||||
colorClass="text-[#fb015b] dark:text-rose-400"
|
||||
borderClass="border-[#fb015b]/20 dark:border-rose-500/20"
|
||||
@@ -34,7 +32,7 @@ export default function Index() {
|
||||
/>
|
||||
|
||||
<JwtSection
|
||||
title={t('jwt:payloadTitle')}
|
||||
title={'PAYLOAD: 数据'}
|
||||
content={result.payload}
|
||||
colorClass="text-[#a03aff] dark:text-purple-400"
|
||||
borderClass="border-[#a03aff]/20 dark:border-purple-500/20"
|
||||
@@ -44,7 +42,7 @@ export default function Index() {
|
||||
<div className="p-4 rounded-xl border border-border bg-secondary/40 shadow-sm">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs font-bold tracking-wider text-muted-foreground/90 uppercase">
|
||||
{t('jwt:signatureTitle')}
|
||||
{'签名'}
|
||||
</span>
|
||||
<CopyButton
|
||||
text={result.signature || ''}
|
||||
@@ -52,7 +50,7 @@ export default function Index() {
|
||||
/>
|
||||
</div>
|
||||
<span className="block text-xs font-mono break-all text-foreground/80 bg-muted/30 dark:bg-muted/10 p-3 rounded-lg border border-border/50 leading-relaxed select-text">
|
||||
{result.signature || t('jwt:noSignature')}
|
||||
{result.signature || '无签名'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,9 +58,7 @@ export default function Index() {
|
||||
|
||||
{result?.error && (
|
||||
<div className="p-6 rounded-xl bg-muted/30 border border-dashed border-border text-center">
|
||||
<p className="text-xs font-semibold text-muted-foreground/80">
|
||||
{t('jsonFormat:invalidJson')}
|
||||
</p>
|
||||
<p className="text-xs font-semibold text-muted-foreground/80">{'无效的 JSON 格式'}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
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() };
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
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';
|
||||
|
||||
describe('QrCodePreview 组件', () => {
|
||||
const mockOnDownload = vi.fn();
|
||||
@@ -1,5 +1,5 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import QrCodePage from '../index';
|
||||
|
||||
vi.mock('lucide-react', async (importOriginal) => {
|
||||
@@ -26,11 +26,11 @@ vi.mock('@/config/features', async (importOriginal) => {
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('@/components/QrCodePreview', () => ({
|
||||
vi.mock('../components/QrCodePreview', () => ({
|
||||
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
|
||||
}));
|
||||
|
||||
vi.mock('@/components/ImageUploader', () => ({
|
||||
vi.mock('../components/ImageUploader', () => ({
|
||||
default: () => <div data-testid="image-uploader">ImageUploader</div>,
|
||||
}));
|
||||
|
||||
@@ -102,7 +102,7 @@ describe('QrCodePage', () => {
|
||||
expect(generateButton).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('点击生成按钮应该切换到预览态', () => {
|
||||
it('点击生成按钮应该切换到预览态', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本
|
||||
@@ -114,14 +114,16 @@ describe('QrCodePage', () => {
|
||||
fireEvent.click(generateButton);
|
||||
|
||||
// 验证切换到预览态
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('原始文本')).toBeInTheDocument();
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
expect(screen.queryByText('生成二维码')).not.toBeInTheDocument();
|
||||
// 预览态应该显示二维码
|
||||
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('预览态应该显示截断的文本', () => {
|
||||
it('预览态应该显示截断的文本', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入长文本
|
||||
@@ -135,10 +137,12 @@ describe('QrCodePage', () => {
|
||||
|
||||
// 验证显示截断的文本（80字符 + "..."）
|
||||
const truncatedText = longText.slice(0, 80) + '...';
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(truncatedText)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('预览态应该显示完整的短文本', () => {
|
||||
it('预览态应该显示完整的短文本', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入短文本
|
||||
@@ -150,10 +154,12 @@ describe('QrCodePage', () => {
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 验证显示完整文本
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(shortText)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('点击编辑按钮应该返回输入态', () => {
|
||||
it('点击编辑按钮应该返回输入态', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本并生成
|
||||
@@ -161,6 +167,11 @@ describe('QrCodePage', () => {
|
||||
fireEvent.change(textarea, { target: { value: 'https://example.com' } });
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 等待生成完成
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 点击编辑按钮
|
||||
fireEvent.click(screen.getByText('编辑'));
|
||||
|
||||
@@ -172,7 +183,7 @@ describe('QrCodePage', () => {
|
||||
expect(screen.queryByTestId('qr-code-preview')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('返回编辑态应该保留上次输入的内容', () => {
|
||||
it('返回编辑态应该保留上次输入的内容', async () => {
|
||||
render(<QrCodePage />);
|
||||
|
||||
// 输入文本并生成
|
||||
@@ -180,6 +191,11 @@ describe('QrCodePage', () => {
|
||||
fireEvent.change(textarea, { target: { value: 'https://example.com' } });
|
||||
fireEvent.click(screen.getByText('生成二维码'));
|
||||
|
||||
// 等待生成完成
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('编辑')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// 点击编辑按钮
|
||||
fireEvent.click(screen.getByText('编辑'));
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Loader2, Pencil, QrCode } from 'lucide-react';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import QrCodePreview from '@/components/QrCodePreview';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import QrCodePreview from './QrCodePreview';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -11,7 +10,6 @@ import { cn } from '@/lib/utils';
|
||||
const TEXT_PREVIEW_MAX_LENGTH = 80;
|
||||
|
||||
export default function GeneratePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const {
|
||||
generatorState,
|
||||
setTextToEncode,
|
||||
@@ -42,13 +40,13 @@ export default function GeneratePanel() {
|
||||
>
|
||||
<div className="flex flex-col space-y-2.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:urlInputLabel')}
|
||||
{'输入 URL 或文本'}
|
||||
</Label>
|
||||
|
||||
<TextInputArea
|
||||
value={generatorState.textToEncode}
|
||||
onChange={setTextToEncode}
|
||||
placeholder={t('qrCode:urlInputPlaceholder')}
|
||||
placeholder={'请输入 URL 或文本内容，将自动生成二维码'}
|
||||
showCount={true}
|
||||
showClear={true}
|
||||
allowCopy={false}
|
||||
@@ -66,12 +64,12 @@ export default function GeneratePanel() {
|
||||
{generatorState.generating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
{t('qrCode:generating')}
|
||||
{'生成中...'}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<QrCode className="w-4 h-4 mr-2" />
|
||||
{t('qrCode:generateButton')}
|
||||
{'生成二维码'}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -88,11 +86,11 @@ export default function GeneratePanel() {
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:textPreviewLabel')}
|
||||
{'原始文本'}
|
||||
</Label>
|
||||
<Button variant="ghost" size="sm" onClick={backToEdit} className="h-6 px-2 text-xs">
|
||||
<Pencil className="w-3 h-3 mr-1" />
|
||||
{t('qrCode:editButton')}
|
||||
{'编辑'}
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { Image, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface ImageUploaderProps {
|
||||
/** 选中的文件 */
|
||||
@@ -29,7 +30,6 @@ const ImageUploader = ({
|
||||
dragging,
|
||||
onDraggingChange,
|
||||
}: ImageUploaderProps) => {
|
||||
const { t } = useI18n('qrCode');
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
@@ -45,8 +45,8 @@ const ImageUploader = ({
|
||||
URL.revokeObjectURL(previewUrl);
|
||||
}
|
||||
onClearFile();
|
||||
toast.success(t('qrCode:imageCleared'));
|
||||
}, [previewUrl, onClearFile, t]);
|
||||
toast.success('图片已清除');
|
||||
}, [previewUrl, onClearFile]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
@@ -86,10 +86,10 @@ const ImageUploader = ({
|
||||
if (file) {
|
||||
try {
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
toast.success('图片粘贴成功，正在解析...');
|
||||
} catch (error) {
|
||||
console.error('处理粘贴图片失败:', error);
|
||||
toast.error(t('qrCode:imagePasteError'));
|
||||
toast.error('粘贴图片失败，请重试');
|
||||
}
|
||||
}
|
||||
break;
|
||||
@@ -102,7 +102,7 @@ const ImageUploader = ({
|
||||
return () => {
|
||||
document.removeEventListener('paste', handlePaste);
|
||||
};
|
||||
}, [handleFileChange, t]);
|
||||
}, [handleFileChange]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -111,7 +111,7 @@ 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/50'
|
||||
: 'border-input bg-muted hover:border-green-600 hover:bg-green-500/10'
|
||||
}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
@@ -125,7 +125,7 @@ const ImageUploader = ({
|
||||
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">
|
||||
@@ -134,20 +134,22 @@ 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 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"
|
||||
className="absolute -top-2 -right-2 h-6 w-6 rounded-full"
|
||||
>
|
||||
<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">{t('qrCode:clickToChange')}</span>
|
||||
<span className="block text-xs text-muted-foreground">{'点击更换图片'}</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -156,14 +158,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">
|
||||
{t('qrCode:supportFormats')}
|
||||
{'支持 PNG、JPG、WEBP、Base64 格式'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,15 +2,13 @@ import { useCallback, useEffect } from 'react';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import TextInputArea from '@/components/TextInputArea';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import ImageUploader from './ImageUploader';
|
||||
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function ParsePanel() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const { parserState, setParserState, handleFileChange, handleClearFile } = useQrCodeContext();
|
||||
|
||||
const hasFile = parserState.selectedFile !== null;
|
||||
@@ -27,7 +25,7 @@ export default function ParsePanel() {
|
||||
const file = items[i].getAsFile();
|
||||
if (file) {
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
toast.success('图片粘贴成功，正在解析...');
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -41,14 +39,14 @@ export default function ParsePanel() {
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], 'pasted-image.png', { type: blob.type });
|
||||
handleFileChange(file);
|
||||
toast.success(t('qrCode:imagePasted'));
|
||||
toast.success('图片粘贴成功，正在解析...');
|
||||
} catch (error) {
|
||||
console.error('处理 Base64 图片失败:', error);
|
||||
toast.error(t('qrCode:imagePasteError'));
|
||||
toast.error('粘贴图片失败，请重试');
|
||||
}
|
||||
}
|
||||
},
|
||||
[handleFileChange, t],
|
||||
[handleFileChange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -82,11 +80,11 @@ export default function ParsePanel() {
|
||||
<div className="border border-border rounded-xl bg-card text-card-foreground shadow-sm p-3 mb-3">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
|
||||
{t('qrCode:uploadedImage')}
|
||||
{'已上传图片'}
|
||||
</Label>
|
||||
<Button variant="ghost" size="sm" onClick={handleClearFile} className="h-6 px-2 text-xs">
|
||||
<RefreshCw className="w-3 h-3 mr-1" />
|
||||
{t('qrCode:reuploadButton')}
|
||||
{'重新上传'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-muted/50 rounded-md p-2">
|
||||
@@ -98,7 +96,7 @@ export default function ParsePanel() {
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-foreground truncate">{parserState.selectedFile?.name}</p>
|
||||
{parserState.parsing && (
|
||||
<p className="text-xs text-primary animate-pulse mt-1">{t('qrCode:parsing')}</p>
|
||||
<p className="text-xs text-primary animate-pulse mt-1">{'解析中...'}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -113,7 +111,7 @@ export default function ParsePanel() {
|
||||
>
|
||||
<div className="flex flex-col space-y-2.5">
|
||||
<Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider pl-0.5">
|
||||
{t('qrCode:resultLabel')}
|
||||
{'解析结果'}
|
||||
</Label>
|
||||
|
||||
<TextInputArea
|
||||
@@ -121,7 +119,7 @@ export default function ParsePanel() {
|
||||
readOnly={true}
|
||||
showClear={false}
|
||||
allowCopy={true}
|
||||
placeholder={parserState.parsing ? '' : t('qrCode:resultPlaceholder')}
|
||||
placeholder={parserState.parsing ? '' : '解析结果将显示在此处'}
|
||||
minRows={4}
|
||||
maxRows={8}
|
||||
externalError={parserState.parseError || undefined}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
@@ -24,8 +23,6 @@ const QrCodePreview = ({
|
||||
className,
|
||||
...props
|
||||
}: QrCodePreviewProps) => {
|
||||
const { t } = useI18n('qrCode');
|
||||
|
||||
// 空状态下的虚线骨架屏
|
||||
if (!qrCodeDataUrl) {
|
||||
return (
|
||||
@@ -37,7 +34,7 @@ const QrCodePreview = ({
|
||||
{...props}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground text-center">
|
||||
{placeholderText || t('qrCode:qrCodeWillShow')}
|
||||
{placeholderText || '二维码将显示在这里'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
@@ -68,12 +65,12 @@ const QrCodePreview = ({
|
||||
<div className="flex w-full gap-2 mt-3">
|
||||
<Button variant="outline" size="sm" onClick={onDownload} className="flex-1 h-8">
|
||||
<Download className="w-3.5 h-3.5 text-muted-foreground" />
|
||||
<span className="truncate text-xs">{t('qrCode:downloadButton')}</span>
|
||||
<span className="truncate text-xs">{'下载二维码'}</span>
|
||||
</Button>
|
||||
|
||||
<Button variant="default" size="sm" onClick={onCopy} className="flex-1 h-8">
|
||||
<Copy className="w-3.5 h-3.5" />
|
||||
<span className="truncate text-xs">{t('qrCode:copyQrButton')}</span>
|
||||
<span className="truncate text-xs">{'复制二维码'}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -3,7 +3,6 @@ import QRious from 'qrious';
|
||||
import { toast } from 'sonner';
|
||||
import { parseQrCodeFromFile } from '@/utils/qrCodeParser';
|
||||
import { useContextMenuData } from '@/utils/useContextMenuData';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import type { QrCodeContextValue } from '../contexts/QrCodeContext';
|
||||
import type { QrCodeGeneratorState, QrCodeMode, QrCodeParserState } from '../types';
|
||||
|
||||
@@ -78,8 +77,6 @@ function generateQrCodeDataUrl(text: string): string {
|
||||
}
|
||||
|
||||
export function useQrCode(): QrCodeContextValue {
|
||||
const { t } = useI18n('qrCode');
|
||||
|
||||
const [mode, setMode] = useState<QrCodeMode>('generate');
|
||||
|
||||
const [generatorState, setGeneratorState] = useState<QrCodeGeneratorState>({
|
||||
@@ -112,8 +109,7 @@ export function useQrCode(): QrCodeContextValue {
|
||||
}, []);
|
||||
|
||||
/** 自动检测URL并生成二维码 */
|
||||
const autoGenerateIfUrl = useCallback(
|
||||
(text: string) => {
|
||||
const autoGenerateIfUrl = useCallback((text: string) => {
|
||||
if (debounceTimerRef.current) {
|
||||
clearTimeout(debounceTimerRef.current);
|
||||
}
|
||||
@@ -139,13 +135,11 @@ export function useQrCode(): QrCodeContextValue {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
generating: false,
|
||||
inputError: t('qrCode:generateError'),
|
||||
inputError: '生成二维码失败，请重试',
|
||||
}));
|
||||
}
|
||||
}, DEBOUNCE_DELAY);
|
||||
},
|
||||
[t],
|
||||
);
|
||||
}, []);
|
||||
|
||||
const setTextToEncode = useCallback(
|
||||
(text: string) => {
|
||||
@@ -160,22 +154,25 @@ export function useQrCode(): QrCodeContextValue {
|
||||
const text = generatorState.textToEncode.trim();
|
||||
|
||||
if (!text) {
|
||||
setGeneratorState((prev) => ({ ...prev, inputError: t('qrCode:inputRequired') }));
|
||||
toast.error(t('qrCode:inputRequired'));
|
||||
setGeneratorState((prev) => ({ ...prev, inputError: '请输入内容' }));
|
||||
toast.error('请输入内容');
|
||||
return;
|
||||
}
|
||||
|
||||
// 先设置 loading 状态，让 React 渲染加载动画
|
||||
setGeneratorState((prev) => ({ ...prev, generating: true, inputError: '' }));
|
||||
|
||||
// 延迟到下一帧生成，确保 loading 状态先被渲染显示
|
||||
setTimeout(() => {
|
||||
const qrCodeDataUrl = generateQrCodeDataUrl(text);
|
||||
|
||||
if (!qrCodeDataUrl) {
|
||||
setGeneratorState((prev) => ({
|
||||
...prev,
|
||||
generating: false,
|
||||
inputError: t('qrCode:generateError'),
|
||||
inputError: '生成二维码失败，请重试',
|
||||
}));
|
||||
toast.error(t('qrCode:generateError'));
|
||||
toast.error('生成二维码失败，请重试');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -186,7 +183,8 @@ export function useQrCode(): QrCodeContextValue {
|
||||
qrCodeDataUrl,
|
||||
generating: false,
|
||||
}));
|
||||
}, [generatorState.textToEncode, t]);
|
||||
}, 0);
|
||||
}, [generatorState.textToEncode]);
|
||||
|
||||
/** 返回编辑态，保留上次输入内容 */
|
||||
const backToEdit = useCallback(() => {
|
||||
@@ -203,8 +201,7 @@ export function useQrCode(): QrCodeContextValue {
|
||||
}, []);
|
||||
|
||||
/** 从图片URL解析二维码 */
|
||||
const parseQrCodeFromUrl = useCallback(
|
||||
async (imageUrl: string) => {
|
||||
const parseQrCodeFromUrl = useCallback(async (imageUrl: string) => {
|
||||
try {
|
||||
setParserState((prev) => ({
|
||||
...prev,
|
||||
@@ -226,23 +223,21 @@ export function useQrCode(): QrCodeContextValue {
|
||||
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success(t('qrCode:parseSuccess'));
|
||||
toast.success('二维码解析成功');
|
||||
} else {
|
||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
||||
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析图片二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
||||
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
},
|
||||
[t],
|
||||
);
|
||||
}, []);
|
||||
|
||||
/** 右键菜单传入URL时，自动生成二维码或解析图片 */
|
||||
const handleContextMenuData = useCallback(
|
||||
@@ -290,8 +285,7 @@ export function useQrCode(): QrCodeContextValue {
|
||||
useContextMenuData({ featureKey: 'qrCode', onData: handleContextMenuData });
|
||||
|
||||
// 反向活态解析二维码算法
|
||||
const parseQrCode = useCallback(
|
||||
async (file: File) => {
|
||||
const parseQrCode = useCallback(async (file: File) => {
|
||||
try {
|
||||
setParserState((prev) => ({ ...prev, parsing: true, parseError: '', decodedResult: '' }));
|
||||
|
||||
@@ -299,23 +293,21 @@ export function useQrCode(): QrCodeContextValue {
|
||||
|
||||
if (result.success && result.data) {
|
||||
setParserState((prev) => ({ ...prev, decodedResult: result.data! }));
|
||||
toast.success(t('qrCode:parseSuccess'));
|
||||
toast.success('二维码解析成功');
|
||||
} else {
|
||||
const errorMsg = result.error || t('qrCode:noQrDetected');
|
||||
const errorMsg = result.error || '未检测到二维码，请确保图片清晰且包含二维码';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析二维码失败:', error);
|
||||
const errorMsg = error instanceof Error ? error.message : t('qrCode:parseError');
|
||||
const errorMsg = error instanceof Error ? error.message : '解析二维码失败，请重试';
|
||||
setParserState((prev) => ({ ...prev, parseError: errorMsg }));
|
||||
toast.error(errorMsg);
|
||||
} finally {
|
||||
setParserState((prev) => ({ ...prev, parsing: false }));
|
||||
}
|
||||
},
|
||||
[t],
|
||||
);
|
||||
}, []);
|
||||
|
||||
const downloadQrCode = useCallback(() => {
|
||||
if (!generatorState.qrCodeDataUrl) return;
|
||||
@@ -324,8 +316,8 @@ export function useQrCode(): QrCodeContextValue {
|
||||
link.href = generatorState.qrCodeDataUrl;
|
||||
link.download = 'qrcode.png';
|
||||
link.click();
|
||||
toast.success(t('qrCode:qrCodeDownloadSuccess'));
|
||||
}, [generatorState.qrCodeDataUrl, t]);
|
||||
toast.success('二维码下载成功');
|
||||
}, [generatorState.qrCodeDataUrl]);
|
||||
|
||||
const copyQrCode = useCallback(async () => {
|
||||
if (!generatorState.qrCodeDataUrl) return;
|
||||
@@ -340,12 +332,12 @@ export function useQrCode(): QrCodeContextValue {
|
||||
}),
|
||||
]);
|
||||
|
||||
toast.success(t('qrCode:qrCodeCopySuccess'));
|
||||
toast.success('二维码已复制到剪贴板');
|
||||
} catch (error) {
|
||||
console.error('复制二维码失败:', error);
|
||||
toast.error(t('qrCode:copyError'));
|
||||
toast.error('复制失败，请重试');
|
||||
}
|
||||
}, [generatorState.qrCodeDataUrl, t]);
|
||||
}, [generatorState.qrCodeDataUrl]);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(file: File) => {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import SwitchButtonGroup from '@/components/SwitchButtonGroup';
|
||||
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { QrCodeContext } from './contexts/QrCodeContext';
|
||||
import { useQrCode } from './hooks/useQrCode';
|
||||
import GeneratePanel from './components/GeneratePanel';
|
||||
@@ -8,13 +7,12 @@ import ParsePanel from './components/ParsePanel';
|
||||
import type { QrCodeMode } from './types';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('qrCode');
|
||||
const qrCode = useQrCode();
|
||||
|
||||
// 模式选项驱动骨架
|
||||
const modeOptions = [
|
||||
{ value: 'generate' as QrCodeMode, label: t('qrCode:urlToQr') },
|
||||
{ value: 'parse' as QrCodeMode, label: t('qrCode:qrToUrl') },
|
||||
{ value: 'generate' as QrCodeMode, label: '文本转二维码' },
|
||||
{ value: 'parse' as QrCodeMode, label: '二维码转文本' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -3,17 +3,15 @@ import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Shield, ShieldCheck, MousePointerClick, AlertTriangle } from 'lucide-react';
|
||||
import { useRightClickRestorer } from './useRightClickRestorer';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('rightClickRestorer');
|
||||
const { domain, isLoading, isUnlocked, isUnsupported, unlock } = useRightClickRestorer();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||
{t('rightClickRestorer:loading')}
|
||||
{'正在加载...'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -24,7 +22,7 @@ export default function Index() {
|
||||
{/* Current Domain */}
|
||||
<div className="w-full rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden">
|
||||
<div className="p-4">
|
||||
<Label className="text-sm font-medium">{t('rightClickRestorer:currentDomain')}</Label>
|
||||
<Label className="text-sm font-medium">{'当前域名'}</Label>
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
||||
{domain || '—'}
|
||||
@@ -32,17 +30,17 @@ export default function Index() {
|
||||
{isUnsupported ? (
|
||||
<Badge variant="destructive" className="gap-1 shrink-0">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
{t('rightClickRestorer:unsupported')}
|
||||
{'不支持'}
|
||||
</Badge>
|
||||
) : isUnlocked ? (
|
||||
<Badge variant="default" className="gap-1 bg-green-600 hover:bg-green-700 shrink-0">
|
||||
<ShieldCheck className="h-3 w-3" />
|
||||
{t('rightClickRestorer:statusUnlocked')}
|
||||
{'已解锁'}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary" className="gap-1 shrink-0">
|
||||
<Shield className="h-3 w-3" />
|
||||
{t('rightClickRestorer:statusLocked')}
|
||||
{'未解锁'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
@@ -55,16 +53,18 @@ export default function Index() {
|
||||
{isUnsupported ? (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('rightClickRestorer:unsupportedDesc')}
|
||||
{'当前页面为浏览器内部页面或扩展页面，无法解锁右键功能。请切换到普通网页后重试。'}
|
||||
</p>
|
||||
<Button className="w-full gap-2" disabled variant="secondary">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
{t('rightClickRestorer:unsupported')}
|
||||
{'不支持'}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">{t('rightClickRestorer:unlockDesc')}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{'点击下方按钮，为当前网站临时解锁右键菜单。刷新页面后需要重新解锁。'}
|
||||
</p>
|
||||
<Button
|
||||
className="w-full gap-2"
|
||||
onClick={() => void unlock()}
|
||||
@@ -72,9 +72,7 @@ export default function Index() {
|
||||
variant={isUnlocked ? 'secondary' : 'default'}
|
||||
>
|
||||
<MousePointerClick className="h-4 w-4" />
|
||||
{isUnlocked
|
||||
? t('rightClickRestorer:alreadyUnlocked')
|
||||
: t('rightClickRestorer:unlockBtn')}
|
||||
{isUnlocked ? '右键已解锁' : '解锁当前网站右键'}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import Index from '../index';
|
||||
|
||||
// Mock the chrome APIs
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn().mockResolvedValue(null),
|
||||
set: vi.fn().mockResolvedValue(undefined),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('@/utils/storageCleaner', () => ({
|
||||
getCurrentTab: vi.fn().mockResolvedValue({ id: 1, url: 'https://example.com' }),
|
||||
isRestrictedUrl: vi.fn().mockReturnValue(false),
|
||||
getCookieSize: vi.fn().mockResolvedValue(0),
|
||||
getLocalStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getSessionStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getOriginStorageEstimate: vi.fn().mockResolvedValue(0),
|
||||
getCacheStorageSize: vi.fn().mockResolvedValue(0),
|
||||
getServiceWorkerCount: vi.fn().mockResolvedValue(0),
|
||||
clearStorage: vi.fn().mockResolvedValue({ overallSuccess: true }),
|
||||
formatCleaningResult: vi.fn().mockReturnValue('Cleaned successfully'),
|
||||
}));
|
||||
|
||||
describe('StorageCleaner 页面', () => {
|
||||
it('应该渲染初始化加载状态', () => {
|
||||
// storageCleaner:initializing 的中文文案为「正在读取站点数据...」
|
||||
render(<Index />);
|
||||
expect(screen.getByText(/正在读取站点数据/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
+1
-4
@@ -14,7 +14,6 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -43,8 +42,6 @@ export default function AutoRefreshToggle({
|
||||
className,
|
||||
...props
|
||||
}: AutoRefreshToggleProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -57,7 +54,7 @@ export default function AutoRefreshToggle({
|
||||
htmlFor="auto-refresh-switch"
|
||||
className="text-xs font-bold text-muted-foreground/90 cursor-pointer select-none tracking-wide uppercase"
|
||||
>
|
||||
{t('storageCleaner:autoRefresh')}
|
||||
{'清理后自动刷新页面'}
|
||||
</Label>
|
||||
|
||||
<Switch id="auto-refresh-switch" checked={reloadAfterClean} onCheckedChange={onChange} />
|
||||
+1
-6
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { CheckCircle, XCircle } from 'lucide-react';
|
||||
import type { CleaningResult as CleaningResultType } from '@/types/storage';
|
||||
import { formatCleaningResult } from '@/utils/storageCleaner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -10,8 +9,6 @@ interface CleaningResultProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
}
|
||||
|
||||
export default function CleaningResult({ result, className, ...props }: CleaningResultProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
if (!result) return null;
|
||||
|
||||
const isSuccess = result.overallSuccess;
|
||||
@@ -33,9 +30,7 @@ export default function CleaningResult({ result, className, ...props }: Cleaning
|
||||
)}
|
||||
|
||||
<span className="text-xs sm:text-sm font-semibold leading-relaxed break-all">
|
||||
{isSuccess
|
||||
? formatCleaningResult(result, t)
|
||||
: result.error || t('storageCleaner:partialFailure')}
|
||||
{isSuccess ? formatCleaningResult(result) : result.error || '部分清理失败'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
+1
-4
@@ -1,5 +1,4 @@
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
@@ -7,8 +6,6 @@ interface ErrorDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
}
|
||||
|
||||
export default function ErrorDisplay({ error, className, ...props }: ErrorDisplayProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@@ -27,7 +24,7 @@ export default function ErrorDisplay({ error, className, ...props }: ErrorDispla
|
||||
</p>
|
||||
|
||||
<p className="text-xs font-medium leading-relaxed text-muted-foreground/90 px-2">
|
||||
{t('storageCleaner:errorStandardOnly')}
|
||||
{'存储清理功能仅适用于标准网页'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
+14
-7
@@ -1,10 +1,18 @@
|
||||
import React from 'react';
|
||||
import { formatBytes } from '@/utils/format';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { StorageSizeInfo } from './useStorageCleaner';
|
||||
import type { StorageSizeInfo } from '../useStorageCleaner';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
const OPTION_LABELS: Record<string, string> = {
|
||||
localStorage: 'Local Storage',
|
||||
sessionStorage: 'Session Storage',
|
||||
indexedDB: '站点存储',
|
||||
cookies: 'Cookies',
|
||||
cacheStorage: 'Cache Storage',
|
||||
serviceWorkers: 'Service Workers',
|
||||
};
|
||||
|
||||
interface OptionItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
labelKey: string;
|
||||
checked: boolean;
|
||||
@@ -20,10 +28,9 @@ export default function OptionItem({
|
||||
className,
|
||||
...props
|
||||
}: OptionItemProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const sizeValue = sizeInfo?.value;
|
||||
const isCount = sizeInfo?.displayType === 'count';
|
||||
const label = OPTION_LABELS[labelKey] || labelKey;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -44,7 +51,7 @@ export default function OptionItem({
|
||||
checked ? 'text-foreground' : 'text-foreground/75',
|
||||
)}
|
||||
>
|
||||
{t(labelKey)}
|
||||
{label}
|
||||
</span>
|
||||
|
||||
{sizeValue !== undefined && sizeValue > 0 ? (
|
||||
@@ -54,11 +61,11 @@ export default function OptionItem({
|
||||
checked ? 'text-primary/70' : 'text-muted-foreground/70',
|
||||
)}
|
||||
>
|
||||
{isCount ? `${sizeValue} ${t('storageCleaner:countUnit')}` : formatBytes(sizeValue)}
|
||||
{isCount ? `${sizeValue} 项` : formatBytes(sizeValue)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="block text-[10px] font-medium text-muted-foreground/50 mt-0.5 italic">
|
||||
{t('storageCleaner:noData')}
|
||||
{'无数据'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
+15
-9
@@ -10,7 +10,6 @@ import {
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { AlertTriangle } from 'lucide-react';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface StorageCleanerConfirmProps {
|
||||
@@ -20,17 +19,24 @@ export interface StorageCleanerConfirmProps {
|
||||
options: StorageCleanerOptions;
|
||||
}
|
||||
|
||||
const OPTION_LABELS: Record<string, string> = {
|
||||
localStorage: 'Local Storage',
|
||||
sessionStorage: 'Session Storage',
|
||||
indexedDB: '站点存储',
|
||||
cookies: 'Cookies',
|
||||
cacheStorage: 'Cache Storage',
|
||||
serviceWorkers: 'Service Workers',
|
||||
};
|
||||
|
||||
export function StorageCleanerConfirm({
|
||||
open,
|
||||
onClose,
|
||||
onConfirm,
|
||||
options,
|
||||
}: StorageCleanerConfirmProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const selectedOptions = Object.entries(options)
|
||||
.filter(([_, value]) => value)
|
||||
.map(([key, _]) => t(`storageCleaner:options.${key as keyof StorageCleanerOptions}`));
|
||||
.map(([key, _]) => OPTION_LABELS[key] || key);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
|
||||
@@ -42,14 +48,14 @@ export function StorageCleanerConfirm({
|
||||
{/* 头部标题区域 */}
|
||||
<DialogHeader className="pt-1">
|
||||
<DialogTitle className="text-center text-lg font-bold tracking-tight text-foreground">
|
||||
{t('storageCleaner:confirmTitle')}
|
||||
{'确认清理数据？'}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 内容主体：限制最大宽度，防止内部元素在大分辨率下被横向拉得太松散 */}
|
||||
<div className="text-center py-4 flex flex-col items-center w-full max-w-[280px] mx-auto">
|
||||
<DialogDescription className="mb-4 text-xs font-medium text-muted-foreground/90 leading-relaxed">
|
||||
{t('storageCleaner:confirmDesc')}
|
||||
{'您将永久删除当前页面的以下选定存储项。'}
|
||||
</DialogDescription>
|
||||
|
||||
{/* 待清理项目徽章群 */}
|
||||
@@ -69,7 +75,7 @@ export function StorageCleanerConfirm({
|
||||
<div className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 rounded-lg bg-destructive/5 border border-dashed border-destructive/20 w-full max-w-[240px]">
|
||||
<AlertTriangle className="h-3.5 w-3.5 text-destructive shrink-0" />
|
||||
<span className="text-[11px] font-bold text-destructive leading-none tracking-tight">
|
||||
{t('storageCleaner:irreversible')}
|
||||
{'此操作不可撤销'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,7 +87,7 @@ export function StorageCleanerConfirm({
|
||||
onClick={onConfirm}
|
||||
className="w-full text-xs font-bold shadow-sm h-9"
|
||||
>
|
||||
{t('storageCleaner:confirmAction')}
|
||||
{'确认清理'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -89,7 +95,7 @@ export function StorageCleanerConfirm({
|
||||
onClick={onClose}
|
||||
className="w-full text-xs font-semibold shadow-sm h-9 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{t('common_buttons_cancel')}
|
||||
{'取消'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
+3
-6
@@ -1,8 +1,7 @@
|
||||
import React from 'react';
|
||||
import type { StorageCleanerOptions } from '@/types/storage';
|
||||
import type { StorageSizeInfo } from './useStorageCleaner';
|
||||
import type { StorageSizeInfo } from '../useStorageCleaner';
|
||||
import OptionItem from './OptionItem';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -26,8 +25,6 @@ export default function StorageOptionsGrid({
|
||||
className,
|
||||
...props
|
||||
}: StorageOptionsGridProps) {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const optionKeys: (keyof StorageCleanerOptions)[] = [
|
||||
'localStorage',
|
||||
'sessionStorage',
|
||||
@@ -48,7 +45,7 @@ export default function StorageOptionsGrid({
|
||||
{optionKeys.map((key) => (
|
||||
<OptionItem
|
||||
key={key}
|
||||
labelKey={`storageCleaner:options.${key}`}
|
||||
labelKey={key}
|
||||
checked={options[key]}
|
||||
sizeInfo={sizes[key]}
|
||||
onChange={() => onOptionChange(key)}
|
||||
@@ -62,7 +59,7 @@ export default function StorageOptionsGrid({
|
||||
className="border-t border-border flex justify-between items-center pl-3.5 pr-7 py-2.5 bg-muted/20 hover:bg-muted/40 cursor-pointer select-none transition-colors"
|
||||
>
|
||||
<Label className="text-xs font-bold text-muted-foreground/90 cursor-pointer tracking-wide uppercase">
|
||||
{t('storageCleaner:selectAll')}
|
||||
{'全选所有项'}
|
||||
</Label>
|
||||
|
||||
<Checkbox
|
||||
@@ -1,16 +1,13 @@
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import StorageCleanerConfirm from './StorageCleanerConfirm';
|
||||
import StorageCleanerConfirm from './components/StorageCleanerConfirm';
|
||||
import { useStorageCleaner } from './useStorageCleaner';
|
||||
import StorageOptionsGrid from './StorageOptionsGrid';
|
||||
import AutoRefreshToggle from './AutoRefreshToggle';
|
||||
import ErrorDisplay from './ErrorDisplay';
|
||||
import CleaningResult from './CleaningResult';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import StorageOptionsGrid from './components/StorageOptionsGrid';
|
||||
import AutoRefreshToggle from './components/AutoRefreshToggle';
|
||||
import ErrorDisplay from './components/ErrorDisplay';
|
||||
import CleaningResult from './components/CleaningResult';
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useI18n('storageCleaner');
|
||||
|
||||
const {
|
||||
error,
|
||||
isInitializing,
|
||||
@@ -36,7 +33,7 @@ export default function Index() {
|
||||
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
||||
<Loader2 className="h-6 w-6 text-muted-foreground/80" />
|
||||
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
||||
{t('storageCleaner:initializing')}
|
||||
{'正在读取站点数据...'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -75,10 +72,10 @@ export default function Index() {
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('storageCleaner:cleaning')}
|
||||
{'正在清理...'}
|
||||
</>
|
||||
) : (
|
||||
t('storageCleaner:cleanNow')
|
||||
'立即清理'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
getSessionStorageSize,
|
||||
isRestrictedUrl,
|
||||
} from '@/utils/storageCleaner';
|
||||
import { useI18n } from '@/utils/chromeI18n';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
const DEFAULT_OPTIONS: StorageCleanerOptions = {
|
||||
@@ -59,7 +58,6 @@ export interface UseStorageCleanerReturn {
|
||||
}
|
||||
|
||||
export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
const { t } = useI18n(['storageCleaner', 'common']);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [isInitializing, setIsInitializing] = useState<boolean>(true);
|
||||
const [options, setOptions] = useState<StorageCleanerOptions>(DEFAULT_OPTIONS);
|
||||
@@ -93,11 +91,11 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
if (currentRequestId !== requestIdRef.current) return;
|
||||
|
||||
if (!tab || !tab.url) {
|
||||
setError(t('storageCleaner:errorNoTab'));
|
||||
setError('无法获取当前标签页');
|
||||
return;
|
||||
}
|
||||
if (isRestrictedUrl(tab.url)) {
|
||||
setError(t('storageCleaner:errorRestricted'));
|
||||
setError('存储清理功能不支持此页面');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -135,7 +133,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
setIsInitializing(false);
|
||||
}
|
||||
}
|
||||
}, [t]);
|
||||
}, []);
|
||||
|
||||
const loadInfoRef = useRef(loadInfo);
|
||||
useEffect(() => {
|
||||
@@ -177,10 +175,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
if (storageTimerRef.current) clearTimeout(storageTimerRef.current);
|
||||
storageTimerRef.current = setTimeout(async () => {
|
||||
await storageUtil
|
||||
.set('storageCleaner/preferences', {
|
||||
reloadAfterClean,
|
||||
selectedTypes: options,
|
||||
})
|
||||
.set('storageCleaner/preferences', { reloadAfterClean, selectedTypes: options })
|
||||
.catch(console.error);
|
||||
}, 500);
|
||||
}, [options, reloadAfterClean, isInitializing]);
|
||||
@@ -209,7 +204,7 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
|
||||
const tab = await getCurrentTab();
|
||||
if (!tab || !tab.id || !tab.url) {
|
||||
toast.warning(t('storageCleaner:errorNoTab'));
|
||||
toast.warning('无法获取当前标签页');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -219,18 +214,18 @@ export function useStorageCleaner(): UseStorageCleanerReturn {
|
||||
setResult(cleaningResult);
|
||||
|
||||
if (reloadAfterClean && cleaningResult.overallSuccess) {
|
||||
toast.success(t('storageCleaner:cleanSuccessReload'));
|
||||
toast.success('清理成功，即将刷新页面');
|
||||
await chrome.tabs.reload(tab.id);
|
||||
} else {
|
||||
await loadInfo();
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error(`${t('storageCleaner:cleanError')}: ${String(err)}`);
|
||||
toast.error(`清理失败: ${String(err)}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setShowConfirm(false);
|
||||
}
|
||||
}, [options, reloadAfterClean, loadInfo, t]);
|
||||
}, [options, reloadAfterClean, loadInfo]);
|
||||
|
||||
const totalBytes = useMemo(() => {
|
||||
return Object.values(sizes).reduce((acc, s) => {
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* 数据预览组件
|
||||
* 展示一条示例数据，展示数据结构
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { FileJson, FileText } from 'lucide-react';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface DataPreviewProps {
|
||||
fields: FieldConfig[];
|
||||
}
|
||||
|
||||
/** JSON 语法高亮渲染 */
|
||||
function JsonHighlight({ data }: { data: Record<string, unknown> }) {
|
||||
const formatted = useMemo(() => {
|
||||
const lines: { indent: string; key?: string; value: string; isLast: boolean }[] = [];
|
||||
const entries = Object.entries(data);
|
||||
|
||||
entries.forEach(([key, value], index) => {
|
||||
const isLast = index === entries.length - 1;
|
||||
const formattedValue =
|
||||
value === null ? 'null' : typeof value === 'string' ? `"${value}"` : String(value);
|
||||
lines.push({ indent: ' ', key, value: formattedValue, isLast });
|
||||
});
|
||||
|
||||
return lines;
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<pre className="text-sm font-mono leading-relaxed">
|
||||
<span className="text-muted-foreground">{'{'}</span>
|
||||
{formatted.map((line, i) => (
|
||||
<div key={i} className="flex">
|
||||
<span className="text-muted-foreground">{line.indent}</span>
|
||||
<span className="text-blue-500 dark:text-blue-400">"{line.key}"</span>
|
||||
<span className="text-muted-foreground">{': '}</span>
|
||||
<span className={getValueColor(line.value)}>{line.value}</span>
|
||||
{!line.isLast && <span className="text-muted-foreground">,</span>}
|
||||
</div>
|
||||
))}
|
||||
<span className="text-muted-foreground">{'}'}</span>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
|
||||
/** 根据值类型返回颜色类名 */
|
||||
function getValueColor(value: string): string {
|
||||
if (value === 'null') return 'text-muted-foreground';
|
||||
if (value.startsWith('"')) return 'text-emerald-600 dark:text-emerald-400';
|
||||
if (/^\d+$/.test(value)) return 'text-amber-600 dark:text-amber-400';
|
||||
if (value === 'true' || value === 'false') return 'text-purple-600 dark:text-purple-400';
|
||||
return 'text-foreground';
|
||||
}
|
||||
|
||||
export default function DataPreview({ fields }: DataPreviewProps) {
|
||||
// 生成一条示例数据
|
||||
const sampleData = useMemo(() => {
|
||||
if (fields.length === 0) return null;
|
||||
|
||||
const record: Record<string, unknown> = {};
|
||||
for (const field of fields) {
|
||||
// 非必填字段预览显示 null
|
||||
if (!field.required) {
|
||||
record[field.name] = null;
|
||||
continue;
|
||||
}
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
if (generator) {
|
||||
record[field.name] = generator.generate(field.params);
|
||||
} else {
|
||||
record[field.name] = null;
|
||||
}
|
||||
}
|
||||
return record;
|
||||
}, [fields]);
|
||||
|
||||
if (!sampleData) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center">
|
||||
<FileJson className="h-8 w-8 text-muted-foreground/30 mb-2" />
|
||||
<p className="text-xs text-muted-foreground/50">{'配置字段后点击「生成数据」按钮'}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 示例标签 */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-5 w-5 rounded bg-primary/10 flex items-center justify-center">
|
||||
<FileText className="h-3 w-3 text-primary" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-muted-foreground">{'示例数据'}</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/50 bg-muted px-1.5 py-0.5 rounded">
|
||||
{Object.keys(sampleData).length} {'字段'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 示例数据展示 */}
|
||||
<div className="flex-1 min-h-0 overflow-auto rounded-lg bg-zinc-950 dark:bg-zinc-900 p-4">
|
||||
<JsonHighlight data={sampleData} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* 导出面板组件
|
||||
* 提供复制、下载 JSON、下载 CSV 选项
|
||||
*/
|
||||
|
||||
import { Copy, Download } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DataExporter } from '@/utils/dataExporter';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ExportPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ExportPanel({ result }: ExportPanelProps) {
|
||||
if (!result?.data || result.data.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleCopyJSON = async () => {
|
||||
const content = DataExporter.toJSON(result.data!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success('已复制到剪贴板');
|
||||
} else {
|
||||
toast.error('复制失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyCSV = async () => {
|
||||
const content = DataExporter.toCSV(result.data!);
|
||||
const success = await DataExporter.copyToClipboard(content);
|
||||
if (success) {
|
||||
toast.success('已复制到剪贴板');
|
||||
} else {
|
||||
toast.error('复制失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadJSON = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'json', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
const handleDownloadCSV = () => {
|
||||
const file = DataExporter.toSingleFile(result.data!, 'csv', 'test-data');
|
||||
DataExporter.download(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-foreground">{'导出数据'}</h4>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleCopyJSON} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{'复制 JSON'}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleCopyCSV} className="h-9 gap-1.5">
|
||||
<Copy className="h-4 w-4" />
|
||||
{'复制 CSV'}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadJSON} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{'下载 JSON'}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={handleDownloadCSV} className="h-9 gap-1.5">
|
||||
<Download className="h-4 w-4" />
|
||||
{'下载 CSV'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
/**
|
||||
* 字段编辑器组件
|
||||
* 编辑单个字段的详细配置
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
import GeneratorSelector from './GeneratorSelector';
|
||||
import GeneratorConfig from './GeneratorConfig';
|
||||
|
||||
interface FieldEditorProps {
|
||||
field: FieldConfig;
|
||||
onChange: (field: FieldConfig) => void;
|
||||
/** 所有字段名列表，用于检测重复 */
|
||||
allFieldNames?: string[];
|
||||
}
|
||||
|
||||
export default function FieldEditor({ field, onChange, allFieldNames = [] }: FieldEditorProps) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
|
||||
const validateFieldName = useCallback(
|
||||
(name: string): string | null => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
return '字段名称不能为空';
|
||||
}
|
||||
if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(trimmed)) {
|
||||
return '字段名称只能包含字母、数字和下划线';
|
||||
}
|
||||
const isDuplicate = allFieldNames.some(
|
||||
(n, i) => n === trimmed && i !== allFieldNames.indexOf(field.name),
|
||||
);
|
||||
if (isDuplicate) {
|
||||
return '字段名称已存在';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
[allFieldNames, field.name],
|
||||
);
|
||||
|
||||
const handleNameChange = (name: string) => {
|
||||
onChange({ ...field, name });
|
||||
// 实时校验
|
||||
const error = validateFieldName(name);
|
||||
setNameError(error);
|
||||
};
|
||||
|
||||
const handleDescriptionChange = (description: string) => {
|
||||
onChange({ ...field, description });
|
||||
};
|
||||
|
||||
const handleRequiredChange = (required: boolean) => {
|
||||
onChange({
|
||||
...field,
|
||||
required,
|
||||
// 切换为必填时清零，切换为非必填时默认 100%
|
||||
nullRate: required ? 0 : 100,
|
||||
});
|
||||
};
|
||||
|
||||
const handleNullRateChange = (nullRate: number) => {
|
||||
// 限制范围 0-100
|
||||
const clampedRate = Math.max(0, Math.min(100, nullRate));
|
||||
// 空值率为 0 时自动设为必填
|
||||
if (clampedRate === 0) {
|
||||
onChange({ ...field, nullRate: clampedRate, required: true });
|
||||
} else {
|
||||
onChange({ ...field, nullRate: clampedRate, required: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleUniqueChange = (unique: boolean) => {
|
||||
onChange({ ...field, unique });
|
||||
};
|
||||
|
||||
const handleGeneratorChange = (generatorId: string) => {
|
||||
const generator = getGeneratorById(generatorId);
|
||||
const defaultParams: Record<string, unknown> = {};
|
||||
generator?.params.forEach((p) => {
|
||||
defaultParams[p.key] = p.defaultValue;
|
||||
});
|
||||
onChange({
|
||||
...field,
|
||||
generatorId,
|
||||
params: defaultParams,
|
||||
});
|
||||
};
|
||||
|
||||
const handleParamsChange = (params: Record<string, unknown>) => {
|
||||
onChange({ ...field, params });
|
||||
};
|
||||
|
||||
const nullRatePresets = [
|
||||
{ label: '5%', value: 5 },
|
||||
{ label: '20%', value: 20 },
|
||||
{ label: '50%', value: 50 },
|
||||
{ label: '75%', value: 75 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* 基础配置 */}
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium text-foreground">{'字段名称'}</Label>
|
||||
<span className="text-xs text-muted-foreground">{field.name.length}/20</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.name}
|
||||
onChange={(e) => handleNameChange(e.target.value)}
|
||||
placeholder={'请输入字段名称'}
|
||||
maxLength={20}
|
||||
className={`h-9 ${nameError ? 'border-destructive' : ''}`}
|
||||
/>
|
||||
{nameError && <p className="text-xs text-destructive mt-1">{nameError}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium text-foreground">{'字段描述'}</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(field.description || '').length}/50
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={field.description || ''}
|
||||
onChange={(e) => handleDescriptionChange(e.target.value)}
|
||||
placeholder={'可选，添加字段说明'}
|
||||
maxLength={50}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 必填/选填配置 */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium text-foreground">{'必填'}</Label>
|
||||
<Switch checked={field.required} onCheckedChange={handleRequiredChange} />
|
||||
</div>
|
||||
|
||||
{!field.required && (
|
||||
<div className="space-y-2 pl-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">{'空值率'}</span>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={field.nullRate}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value >= 0 && value <= 100) {
|
||||
handleNullRateChange(value);
|
||||
}
|
||||
}}
|
||||
min={0}
|
||||
max={100}
|
||||
step={5}
|
||||
className="h-9 w-full"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
{nullRatePresets.map((preset) => (
|
||||
<button
|
||||
key={preset.value}
|
||||
onClick={() => handleNullRateChange(preset.value)}
|
||||
className={`px-3 py-1.5 text-xs rounded-md transition-colors ${
|
||||
field.nullRate === preset.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 唯一性约束 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-medium text-foreground">{'唯一性约束'}</Label>
|
||||
<Switch checked={field.unique} onCheckedChange={handleUniqueChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器选择 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{'数据生成器'}</Label>
|
||||
<GeneratorSelector selectedId={field.generatorId} onChange={handleGeneratorChange} />
|
||||
</div>
|
||||
|
||||
{/* 生成器参数配置 */}
|
||||
{generator && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{'生成器参数'}</Label>
|
||||
<GeneratorConfig
|
||||
generator={generator}
|
||||
params={field.params}
|
||||
onChange={handleParamsChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 字段项组件
|
||||
* 展示单个字段的基本信息，适配固定高度卡片
|
||||
*/
|
||||
|
||||
import { getGeneratorById } from '@/lib/generators';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface FieldItemProps {
|
||||
field: FieldConfig;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export default function FieldItem({ field, onClick }: FieldItemProps) {
|
||||
const generator = getGeneratorById(field.generatorId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex-1 min-w-0 cursor-pointer rounded-md transition-all hover:bg-muted/50"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div
|
||||
className={`h-full ${field.description ? 'flex flex-col justify-center' : 'flex items-center'}`}
|
||||
>
|
||||
{/* 第一行：字段名 + 标签 */}
|
||||
<div className="flex items-center gap-1.5 overflow-hidden">
|
||||
<span className="font-medium text-sm text-foreground truncate shrink-0 max-w-[140px]">
|
||||
{field.name}
|
||||
</span>
|
||||
<Badge variant="secondary" className="text-[10px] shrink-0 px-1 py-0">
|
||||
{generator?.name || field.generatorId}
|
||||
</Badge>
|
||||
{!field.required && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] shrink-0 px-1 py-0 text-muted-foreground"
|
||||
>
|
||||
{field.nullRate}%
|
||||
</Badge>
|
||||
)}
|
||||
{field.unique && (
|
||||
<Badge variant="outline" className="text-[10px] shrink-0 px-1 py-0 text-blue-500">
|
||||
{'唯一'}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* 第二行：描述 */}
|
||||
{field.description && (
|
||||
<p className="text-[11px] text-muted-foreground mt-0.5 truncate leading-tight">
|
||||
{field.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,460 @@
|
||||
/**
|
||||
* 字段列表组件
|
||||
* 展示所有字段配置，支持添加、删除、拖拽排序
|
||||
* 超过 5 条时启用虚拟列表滚动
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import { Plus, GripVertical, Trash2, Save } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
type DragStartEvent,
|
||||
DragOverlay,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import type { FieldConfig, DataRule } from '@/types/testDataGenerator';
|
||||
import FieldItem from './FieldItem';
|
||||
|
||||
/** 最大字段数量 */
|
||||
export const MAX_FIELDS = 40;
|
||||
|
||||
/** 虚拟列表配置 */
|
||||
const VISIBLE_COUNT = 5;
|
||||
const ROW_HEIGHT = 60; // 卡片高度 52 + 间距 8
|
||||
const ROW_GAP = 8;
|
||||
const OVERSCAN = 2;
|
||||
const DRAG_OVERSCAN = 10; // 拖拽时增加的预加载范围
|
||||
|
||||
interface FieldListProps {
|
||||
fields: FieldConfig[];
|
||||
onUpdate: (index: number, field: FieldConfig) => void;
|
||||
onRemove: (index: number) => void;
|
||||
onAdd: () => void;
|
||||
onEdit: (index: number) => void;
|
||||
onReorder: (oldIndex: number, newIndex: number) => void;
|
||||
editingRule?: DataRule | null;
|
||||
onRuleSaved?: () => void;
|
||||
}
|
||||
|
||||
/** 可排序的字段项 */
|
||||
function SortableFieldItem({
|
||||
field,
|
||||
onEdit,
|
||||
onRemove,
|
||||
}: {
|
||||
field: FieldConfig;
|
||||
onEdit: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: field.id,
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
zIndex: isDragging ? 10 : 0,
|
||||
height: ROW_HEIGHT - ROW_GAP, // 固定卡片高度 52px，与虚拟模式一致
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`group relative rounded-lg border transition-all ${
|
||||
isDragging
|
||||
? 'border-primary shadow-lg'
|
||||
: 'border-border hover:border-muted-foreground/30 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
{/* 拖拽手柄 */}
|
||||
<button
|
||||
className="cursor-grab active:cursor-grabbing p-1 rounded hover:bg-muted/50 touch-none shrink-0"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={field} onClick={onEdit} />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FieldList({
|
||||
fields,
|
||||
onUpdate: _onUpdate,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onEdit,
|
||||
onReorder,
|
||||
editingRule,
|
||||
onRuleSaved,
|
||||
}: FieldListProps) {
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
const [showConfirmOverwrite, setShowConfirmOverwrite] = useState(false);
|
||||
const [ruleName, setRuleName] = useState('');
|
||||
const [ruleDescription, setRuleDescription] = useState('');
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: { distance: 5 },
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
}),
|
||||
);
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
setActiveId(String(event.active.id));
|
||||
};
|
||||
|
||||
// 拖拽时的滚轮滚动处理
|
||||
useEffect(() => {
|
||||
if (!activeId || !containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 滚动容器
|
||||
const scrollAmount = e.deltaY * 0.5; // 降低滚动速度，更易控制
|
||||
const newScrollTop = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
container.scrollHeight - container.clientHeight,
|
||||
container.scrollTop + scrollAmount,
|
||||
),
|
||||
);
|
||||
container.scrollTop = newScrollTop;
|
||||
setScrollTop(newScrollTop);
|
||||
};
|
||||
|
||||
// 在 document 级别监听，使用 capture 阶段以优先处理
|
||||
document.addEventListener('wheel', handleWheel, { capture: true, passive: false });
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('wheel', handleWheel, { capture: true });
|
||||
};
|
||||
}, [activeId]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
setActiveId(null);
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
const oldIndex = fields.findIndex((f) => f.id === active.id);
|
||||
const newIndex = fields.findIndex((f) => f.id === over.id);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
onReorder(oldIndex, newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
if (containerRef.current) {
|
||||
setScrollTop(containerRef.current.scrollTop);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const isVirtual = fields.length > VISIBLE_COUNT;
|
||||
const totalHeight = fields.length * ROW_HEIGHT;
|
||||
const fixedContainerHeight = VISIBLE_COUNT * ROW_HEIGHT;
|
||||
// 少于 5 条时高度自适应，5 条及以上固定为 5 条的高度
|
||||
const containerStyle =
|
||||
fields.length < VISIBLE_COUNT
|
||||
? { height: 'auto' as const, overflowY: 'visible' as const }
|
||||
: { height: fixedContainerHeight, overflowY: 'auto' as const };
|
||||
|
||||
// 虚拟列表：计算可见范围（拖拽时扩展预加载范围）
|
||||
const currentOverscan = activeId ? DRAG_OVERSCAN : OVERSCAN;
|
||||
const visibleStart = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - currentOverscan);
|
||||
const visibleEnd = Math.min(
|
||||
fields.length,
|
||||
Math.ceil((scrollTop + fixedContainerHeight) / ROW_HEIGHT) + currentOverscan,
|
||||
);
|
||||
const visibleFields = isVirtual ? fields.slice(visibleStart, visibleEnd) : fields;
|
||||
|
||||
// 查找拖拽中的项目（用于 DragOverlay）
|
||||
const activeField = activeId ? fields.find((f) => f.id === activeId) : null;
|
||||
|
||||
const isMaxReached = fields.length >= MAX_FIELDS;
|
||||
|
||||
// 编辑模式下，保存时更新原规则
|
||||
const handleUpdateRule = useCallback(() => {
|
||||
if (!editingRule) return;
|
||||
|
||||
const updated = ruleStorage.update(editingRule.id, {
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (updated) {
|
||||
toast.success('规则已更新');
|
||||
onRuleSaved?.();
|
||||
}
|
||||
}, [editingRule, fields, onRuleSaved]);
|
||||
|
||||
// 新建规则或另存为
|
||||
const handleSave = useCallback(
|
||||
(overwrite = false) => {
|
||||
if (!ruleName.trim()) return;
|
||||
|
||||
const trimmedName = ruleName.trim();
|
||||
|
||||
// 检查名称是否重复
|
||||
if (!overwrite) {
|
||||
const existingRule = ruleStorage.getByName(trimmedName);
|
||||
if (existingRule) {
|
||||
setShowConfirmOverwrite(true);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const newRule = ruleStorage.save({
|
||||
name: trimmedName,
|
||||
description: ruleDescription.trim(),
|
||||
fields: fields,
|
||||
});
|
||||
|
||||
if (newRule) {
|
||||
setShowSaveDialog(false);
|
||||
setShowConfirmOverwrite(false);
|
||||
setRuleName('');
|
||||
setRuleDescription('');
|
||||
toast.success('规则已保存');
|
||||
onRuleSaved?.();
|
||||
}
|
||||
},
|
||||
[ruleName, ruleDescription, fields, onRuleSaved],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-sm font-medium text-foreground">
|
||||
{'字段'} ({fields.length}/{MAX_FIELDS})
|
||||
</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
{editingRule ? (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleUpdateRule}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
title={`${'编辑中'}: ${editingRule.name}`}
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{'更新规则'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
{'另存为'}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowSaveDialog(true)}
|
||||
disabled={fields.length === 0}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Save className="h-3.5 w-3.5" />
|
||||
{'保存规则'}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onAdd}
|
||||
disabled={isMaxReached}
|
||||
className="h-8 gap-1.5 px-2.5"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
{'添加字段'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0">
|
||||
{fields.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||
<GripVertical className="h-10 w-10 text-muted-foreground/40 mb-3" />
|
||||
<p className="text-sm text-muted-foreground">{'暂无字段'}</p>
|
||||
<p className="text-xs text-muted-foreground/70 mt-1">{'点击上方按钮添加第一个字段'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={fields.map((f) => f.id)} strategy={verticalListSortingStrategy}>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="overflow-y-auto"
|
||||
style={containerStyle}
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{isVirtual ? (
|
||||
/* 虚拟滚动模式 */
|
||||
<div style={{ height: totalHeight, position: 'relative' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: visibleStart * ROW_HEIGHT,
|
||||
left: 0,
|
||||
right: 0,
|
||||
}}
|
||||
>
|
||||
{visibleFields.map((field, vi) => {
|
||||
const realIndex = fields.findIndex((f) => f.id === field.id);
|
||||
const isLast = visibleStart + vi === fields.length - 1;
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
style={{
|
||||
height: ROW_HEIGHT,
|
||||
paddingBottom: isLast ? 0 : ROW_GAP,
|
||||
}}
|
||||
>
|
||||
<SortableFieldItem
|
||||
field={field}
|
||||
onEdit={() => onEdit(realIndex)}
|
||||
onRemove={() => onRemove(realIndex)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* 普通模式（≤5 条） */
|
||||
<div className="space-y-2">
|
||||
{fields.map((field, index) => (
|
||||
<SortableFieldItem
|
||||
key={field.id}
|
||||
field={field}
|
||||
onEdit={() => onEdit(index)}
|
||||
onRemove={() => onRemove(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SortableContext>
|
||||
<DragOverlay>
|
||||
{activeField ? (
|
||||
<div className="rounded-lg border border-primary bg-background shadow-lg opacity-90">
|
||||
<div className="flex items-center gap-2 h-full px-3 py-2">
|
||||
<div className="p-1">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<FieldItem field={activeField} onClick={() => {}} />
|
||||
</div>
|
||||
<div className="h-8 w-8 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 保存规则对话框 */}
|
||||
<Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pt-2 pb-4 space-y-4">
|
||||
<Input
|
||||
value={ruleName}
|
||||
onChange={(e) => setRuleName(e.target.value)}
|
||||
placeholder={'规则名称'}
|
||||
className="h-9"
|
||||
/>
|
||||
<Input
|
||||
value={ruleDescription}
|
||||
onChange={(e) => setRuleDescription(e.target.value)}
|
||||
placeholder={'规则描述（可选）'}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowSaveDialog(false)}>
|
||||
{'取消'}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => handleSave()} disabled={!ruleName.trim()}>
|
||||
{'确认'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 覆盖确认对话框 */}
|
||||
<Dialog open={showConfirmOverwrite} onOpenChange={setShowConfirmOverwrite}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">{'已存在同名规则，是否覆盖保存？'}</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setShowConfirmOverwrite(false)}>
|
||||
{'取消'}
|
||||
</Button>
|
||||
<Button size="sm" onClick={() => handleSave(true)}>
|
||||
{'覆盖'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* 生成按钮组件
|
||||
* 显示生成按钮、加载状态和进度条
|
||||
*/
|
||||
|
||||
import { Play, Square } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { GenerateProgress } from '@/types/testDataGenerator';
|
||||
|
||||
interface GenerateButtonProps {
|
||||
onClick: () => void;
|
||||
onCancel: () => void;
|
||||
isGenerating: boolean;
|
||||
progress: GenerateProgress | null;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export default function GenerateButton({
|
||||
onClick,
|
||||
onCancel,
|
||||
isGenerating,
|
||||
progress,
|
||||
disabled,
|
||||
}: GenerateButtonProps) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Button variant="destructive" onClick={onCancel} className="w-full h-11 gap-2">
|
||||
<Square className="h-5 w-5" />
|
||||
{'取消'}
|
||||
</Button>
|
||||
|
||||
{/* 进度条 */}
|
||||
{progress && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{'已生成 {{current}} / {{total}} 条'}</span>
|
||||
<span>{progress.progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-muted rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary transition-all duration-300"
|
||||
style={{ width: `${progress.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
{progress.estimatedTimeLeft !== undefined && (
|
||||
<p className="text-xs text-muted-foreground text-center">
|
||||
{'预计剩余 {{time}} 秒'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<Button onClick={onClick} disabled={disabled} className="w-full h-11 gap-2">
|
||||
<Play className="h-5 w-5" />
|
||||
{'生成数据'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* 生成选项组件
|
||||
* 配置生成数量、数据格式等选项
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
interface GenerateOptionsProps {
|
||||
count: number;
|
||||
onCountChange: (count: number) => void;
|
||||
format: 'json' | 'csv';
|
||||
onFormatChange: (format: 'json' | 'csv') => void;
|
||||
}
|
||||
|
||||
const COUNT_PRESETS = [50, 100, 1000, 5000, 10000];
|
||||
|
||||
const FORMAT_OPTIONS = [
|
||||
{ value: 'json' as const, label: 'JSON' },
|
||||
{ value: 'csv' as const, label: 'CSV' },
|
||||
];
|
||||
|
||||
export default function GenerateOptions({
|
||||
count,
|
||||
onCountChange,
|
||||
format,
|
||||
onFormatChange,
|
||||
}: GenerateOptionsProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 生成数量 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{'生成数量'}</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{COUNT_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset}
|
||||
onClick={() => onCountChange(preset)}
|
||||
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
count === preset
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{preset.toLocaleString()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Input
|
||||
type="number"
|
||||
value={count}
|
||||
onChange={(e) => {
|
||||
const value = Number(e.target.value);
|
||||
if (value > 0 && value <= 100000) {
|
||||
onCountChange(value);
|
||||
}
|
||||
}}
|
||||
min={1}
|
||||
max={100000}
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 数据格式 */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{'数据格式'}</Label>
|
||||
<div className="flex gap-2">
|
||||
{FORMAT_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onFormatChange(option.value)}
|
||||
className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
format === option.value
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* 生成器配置组件
|
||||
* 根据生成器参数定义动态渲染配置表单
|
||||
*/
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { GeneratorDefinition } from '@/types/testDataGenerator';
|
||||
|
||||
interface GeneratorConfigProps {
|
||||
generator: GeneratorDefinition;
|
||||
params: Record<string, unknown>;
|
||||
onChange: (params: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export default function GeneratorConfig({ generator, params, onChange }: GeneratorConfigProps) {
|
||||
const handleParamChange = (key: string, value: unknown) => {
|
||||
onChange({ ...params, [key]: value });
|
||||
};
|
||||
|
||||
if (generator.params.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground py-2">{'此生成器无可配置参数'}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 p-3 rounded-lg bg-muted/30">
|
||||
{generator.params.map((param) => (
|
||||
<div key={param.key} className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">
|
||||
{param.label}
|
||||
{param.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
{param.description && (
|
||||
<p className="text-xs text-muted-foreground">{param.description}</p>
|
||||
)}
|
||||
|
||||
{param.type === 'string' && (
|
||||
<Input
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, e.target.value)}
|
||||
placeholder={param.placeholder}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'number' && (
|
||||
<Input
|
||||
type="number"
|
||||
value={Number(params[param.key] ?? param.defaultValue)}
|
||||
onChange={(e) => handleParamChange(param.key, Number(e.target.value))}
|
||||
min={param.min}
|
||||
max={param.max}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
|
||||
{param.type === 'boolean' && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{params[param.key] !== false ? '启用' : '禁用'}
|
||||
</span>
|
||||
<Switch
|
||||
checked={params[param.key] !== false}
|
||||
onCheckedChange={(checked) => handleParamChange(param.key, checked)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{param.type === 'select' && (
|
||||
<Select
|
||||
value={String(params[param.key] ?? param.defaultValue)}
|
||||
onValueChange={(value) => handleParamChange(param.key, value)}
|
||||
>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{param.options?.map((option) => (
|
||||
<SelectItem key={String(option.value)} value={String(option.value)}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{param.type === 'array' && (
|
||||
<Input
|
||||
value={
|
||||
Array.isArray(params[param.key])
|
||||
? (params[param.key] as string[]).join(', ')
|
||||
: String(param.defaultValue || '')
|
||||
}
|
||||
onChange={(e) =>
|
||||
handleParamChange(
|
||||
param.key,
|
||||
e.target.value
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
}
|
||||
placeholder={'用逗号分隔多个值'}
|
||||
className="h-9"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* 生成器选择器组件
|
||||
* 以分类形式展示所有可用生成器
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Search, User, Briefcase, Code, Hash } from 'lucide-react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { generatorCategories, getGeneratorsByCategory, searchGenerators } from '@/lib/generators';
|
||||
|
||||
interface GeneratorSelectorProps {
|
||||
selectedId: string;
|
||||
onChange: (id: string) => void;
|
||||
}
|
||||
|
||||
const categoryIcons: Record<string, React.ComponentType<{ className?: string }>> = {
|
||||
personal: User,
|
||||
business: Briefcase,
|
||||
technical: Code,
|
||||
basic: Hash,
|
||||
};
|
||||
|
||||
export default function GeneratorSelector({ selectedId, onChange }: GeneratorSelectorProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<string>(generatorCategories[0]?.id || '');
|
||||
|
||||
const generators = searchQuery
|
||||
? searchGenerators(searchQuery)
|
||||
: getGeneratorsByCategory(activeCategory);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={'搜索生成器...'}
|
||||
className="pl-9 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 分类标签 */}
|
||||
{!searchQuery && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{generatorCategories.map((category) => {
|
||||
const Icon = categoryIcons[category.id];
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
||||
activeCategory === category.id
|
||||
? 'bg-primary text-primary-foreground'
|
||||
: 'bg-muted text-muted-foreground hover:bg-muted/80'
|
||||
}`}
|
||||
>
|
||||
{Icon && <Icon className="h-3.5 w-3.5" />}
|
||||
{category.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成器列表 */}
|
||||
<div className="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto">
|
||||
{generators.map((generator) => (
|
||||
<button
|
||||
key={generator.id}
|
||||
onClick={() => onChange(generator.id)}
|
||||
className={`flex flex-col items-start p-2 text-left rounded-md border transition-colors ${
|
||||
selectedId === generator.id
|
||||
? 'border-primary bg-primary/5'
|
||||
: 'border-border hover:border-muted-foreground/30'
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium text-foreground">{generator.name}</span>
|
||||
<span className="text-xs text-muted-foreground line-clamp-1">
|
||||
{generator.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* 结果面板组件
|
||||
* 展示生成结果的状态和统计信息
|
||||
*/
|
||||
|
||||
import { CheckCircle, AlertTriangle, XCircle, Clock, Database } from 'lucide-react';
|
||||
import type { GenerateResult } from '@/types/testDataGenerator';
|
||||
|
||||
interface ResultPanelProps {
|
||||
result: GenerateResult | null;
|
||||
}
|
||||
|
||||
export default function ResultPanel({ result }: ResultPanelProps) {
|
||||
if (!result) return null;
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return <CheckCircle className="h-5 w-5 text-green-500" />;
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
|
||||
}
|
||||
return <XCircle className="h-5 w-5 text-destructive" />;
|
||||
};
|
||||
|
||||
const getStatusText = () => {
|
||||
if (result.success && (!result.warnings || result.warnings.length === 0)) {
|
||||
return '生成成功';
|
||||
}
|
||||
if (result.success && result.warnings && result.warnings.length > 0) {
|
||||
return '部分成功';
|
||||
}
|
||||
return '生成失败';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 状态标题 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon()}
|
||||
<span className="text-sm font-medium text-foreground">{getStatusText()}</span>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
{result.stats && (
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Database className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{result.stats.total.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{'总条数'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<CheckCircle className="h-4 w-4 text-green-500 mb-1" />
|
||||
<span className="text-lg font-semibold text-green-500">
|
||||
{result.stats.success.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{'成功'}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center p-2 rounded-lg bg-muted/30">
|
||||
<Clock className="h-4 w-4 text-muted-foreground mb-1" />
|
||||
<span className="text-lg font-semibold text-foreground">
|
||||
{(result.stats.duration / 1000).toFixed(2)}s
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">{'耗时'}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 警告信息 */}
|
||||
{result.warnings && result.warnings.length > 0 && (
|
||||
<div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertTriangle className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm font-medium text-yellow-500">{'警告'}</span>
|
||||
</div>
|
||||
<ul className="list-disc list-inside space-y-1">
|
||||
{result.warnings.slice(0, 5).map((warning, index) => (
|
||||
<li key={index} className="text-xs text-yellow-500/80">
|
||||
{warning}
|
||||
</li>
|
||||
))}
|
||||
{result.warnings.length > 5 && (
|
||||
<li className="text-xs text-yellow-500/80">... {'还有 {{count}} 条警告'}</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误信息 */}
|
||||
{result.error && (
|
||||
<div className="p-3 rounded-lg bg-destructive/10 border border-destructive/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<XCircle className="h-4 w-4 text-destructive" />
|
||||
<span className="text-sm text-destructive">{result.error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
/**
|
||||
* 规则管理器组件
|
||||
* 管理测试数据生成规则的加载、删除等操作
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Search,
|
||||
Upload,
|
||||
Download,
|
||||
Trash2,
|
||||
Copy,
|
||||
Edit,
|
||||
Clock,
|
||||
Tag,
|
||||
Loader2,
|
||||
FolderOpen,
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
interface RuleManagerProps {
|
||||
onLoad: (fields: FieldConfig[]) => void;
|
||||
onEdit?: (rule: DataRule) => void;
|
||||
onRulesChanged?: () => void;
|
||||
}
|
||||
|
||||
export default function RuleManager({ onLoad, onEdit, onRulesChanged }: RuleManagerProps) {
|
||||
const [rules, setRules] = useState<DataRule[]>(() => ruleStorage.getAll());
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
|
||||
const [ruleToDelete, setRuleToDelete] = useState<DataRule | null>(null);
|
||||
const [isImporting, setIsImporting] = useState(false);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
const loadRules = useCallback(() => {
|
||||
setRules(ruleStorage.getAll());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchQuery(searchQuery);
|
||||
}, 250);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
const filteredRules = useMemo(() => {
|
||||
if (!debouncedSearchQuery) return rules;
|
||||
const query = debouncedSearchQuery.toLowerCase();
|
||||
return rules.filter(
|
||||
(rule) =>
|
||||
rule.name.toLowerCase().includes(query) || rule.description?.toLowerCase().includes(query),
|
||||
);
|
||||
}, [rules, debouncedSearchQuery]);
|
||||
|
||||
const handleLoad = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onLoad(rule.fields);
|
||||
ruleStorage.recordUse(rule.id);
|
||||
loadRules();
|
||||
toast.success(`已加载规则「${rule.name}」`);
|
||||
},
|
||||
[onLoad, loadRules],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
if (!ruleToDelete) return;
|
||||
ruleStorage.deleteRule(ruleToDelete.id);
|
||||
loadRules();
|
||||
setRuleToDelete(null);
|
||||
toast.success('规则已删除');
|
||||
onRulesChanged?.();
|
||||
}, [ruleToDelete, loadRules, onRulesChanged]);
|
||||
|
||||
const handleDuplicate = useCallback(
|
||||
(id: string) => {
|
||||
const result = ruleStorage.duplicate(id, '（副本）');
|
||||
if (result) {
|
||||
loadRules();
|
||||
toast.success('规则已复制');
|
||||
onRulesChanged?.();
|
||||
}
|
||||
},
|
||||
[loadRules, onRulesChanged],
|
||||
);
|
||||
|
||||
const handleEdit = useCallback(
|
||||
(rule: DataRule) => {
|
||||
onEdit?.(rule);
|
||||
},
|
||||
[onEdit],
|
||||
);
|
||||
|
||||
const handleExport = useCallback(() => {
|
||||
try {
|
||||
setIsExporting(true);
|
||||
const json = ruleStorage.exportRules();
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
try {
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = 'test-data-rules.json';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
} finally {
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
toast.success('规则已导出');
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导出失败:', error);
|
||||
toast.error('导出失败');
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleImport = useCallback(() => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
input.onchange = async (e) => {
|
||||
try {
|
||||
setIsImporting(true);
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const text = await file.text();
|
||||
const result = ruleStorage.importRules(text);
|
||||
|
||||
if (result.success > 0) {
|
||||
toast.success(`成功导入 ${result.success} 条规则`);
|
||||
}
|
||||
|
||||
if (result.failed > 0) {
|
||||
toast.error(`${result.failed} 条规则导入失败`);
|
||||
console.warn('[RuleManager] 导入警告:', result.errors);
|
||||
}
|
||||
|
||||
loadRules();
|
||||
onRulesChanged?.();
|
||||
} catch (error) {
|
||||
console.error('[RuleManager] 导入失败:', error);
|
||||
toast.error('规则导入失败');
|
||||
} finally {
|
||||
setIsImporting(false);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
}, [loadRules, onRulesChanged]);
|
||||
|
||||
const formatDate = useCallback((timestamp: number) => {
|
||||
return new Date(timestamp).toLocaleDateString('zh-CN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 删除确认对话框 */}
|
||||
<Dialog open={!!ruleToDelete} onOpenChange={() => setRuleToDelete(null)}>
|
||||
<DialogContent
|
||||
showCloseButton={false}
|
||||
className="w-[calc(100vw-4rem)] max-w-[420px] p-0 pt-6 flex flex-col"
|
||||
>
|
||||
<div className="flex-1 overflow-y-auto px-6 pb-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{ruleToDelete && `确定要删除规则「${ruleToDelete.name}」吗？此操作不可撤销。`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 px-6 py-2 border-t shrink-0">
|
||||
<Button variant="ghost" size="sm" onClick={() => setRuleToDelete(null)}>
|
||||
{'取消'}
|
||||
</Button>
|
||||
<Button variant="destructive" size="sm" onClick={handleDelete}>
|
||||
{'确认'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleImport}
|
||||
disabled={isImporting}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isImporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Upload className="h-4 w-4" />
|
||||
)}
|
||||
{'导入'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleExport}
|
||||
disabled={isExporting || rules.length === 0}
|
||||
className="h-8 gap-1.5"
|
||||
>
|
||||
{isExporting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{'导出数据'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索框 */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value.slice(0, 20))}
|
||||
placeholder={'搜索规则...'}
|
||||
className="pl-9 pr-24 h-9"
|
||||
maxLength={20}
|
||||
/>
|
||||
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground pointer-events-none tabular-nums">
|
||||
{`已保存 ${rules.length}/${ruleStorage.MAX_RULES} 条`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 规则列表 */}
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{filteredRules.length === 0 ? (
|
||||
<div className="text-center py-6">
|
||||
<Tag className="h-8 w-8 text-muted-foreground/40 mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{debouncedSearchQuery ? '未找到匹配的规则' : '暂无保存的规则'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredRules.map((rule) => (
|
||||
<div
|
||||
key={rule.id}
|
||||
className="flex items-center gap-3 p-2 rounded-lg border hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-sm text-foreground truncate">{rule.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{rule.fields.length} {'字段'}
|
||||
</span>
|
||||
</div>
|
||||
{rule.description && (
|
||||
<p className="text-xs text-muted-foreground truncate mt-0.5">
|
||||
{rule.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
{formatDate(rule.updatedAt)}
|
||||
</span>
|
||||
<span>{`使用 ${rule.useCount} 次`}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleLoad(rule)}
|
||||
title={'加载'}
|
||||
>
|
||||
<FolderOpen className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleEdit(rule)}
|
||||
title={'编辑'}
|
||||
>
|
||||
<Edit className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => handleDuplicate(rule.id)}
|
||||
title={'复制'}
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-destructive hover:text-destructive"
|
||||
onClick={() => setRuleToDelete(rule)}
|
||||
title={'删除'}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('@/utils/ruleStorage', () => ({
|
||||
MAX_RULES: 20,
|
||||
getAll: vi.fn(() => []),
|
||||
save: vi.fn(),
|
||||
deleteRule: vi.fn(),
|
||||
duplicate: vi.fn(),
|
||||
recordUse: vi.fn(),
|
||||
search: vi.fn(() => []),
|
||||
exportRules: vi.fn(() => '[]'),
|
||||
importRules: vi.fn(() => ({ success: 0, failed: 0, errors: [] })),
|
||||
}));
|
||||
|
||||
vi.mock('sonner', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
import RuleManager from '../RuleManager';
|
||||
import * as ruleStorage from '@/utils/ruleStorage';
|
||||
import { toast } from 'sonner';
|
||||
import type { DataRule, FieldConfig } from '@/types/testDataGenerator';
|
||||
|
||||
const mockedRuleStorage = vi.mocked(ruleStorage);
|
||||
const mockedToast = vi.mocked(toast);
|
||||
|
||||
const mockFields: FieldConfig[] = [
|
||||
{
|
||||
id: 'field-1',
|
||||
name: 'name',
|
||||
generatorId: 'string',
|
||||
params: {},
|
||||
required: true,
|
||||
nullRate: 0,
|
||||
unique: false,
|
||||
},
|
||||
];
|
||||
|
||||
const mockRule: DataRule = {
|
||||
id: 'rule-1',
|
||||
name: 'Test Rule',
|
||||
description: 'Test description',
|
||||
fields: mockFields,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
useCount: 0,
|
||||
};
|
||||
|
||||
describe('RuleManager', () => {
|
||||
const defaultProps = {
|
||||
onLoad: vi.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockedRuleStorage.getAll.mockReturnValue([]);
|
||||
});
|
||||
|
||||
it('should render empty state when no rules', () => {
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('暂无保存的规则')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render rule list when rules exist', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should load rule when load button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const loadButton = screen.getByTitle('加载');
|
||||
await user.click(loadButton);
|
||||
|
||||
expect(defaultProps.onLoad).toHaveBeenCalledWith(mockFields);
|
||||
expect(mockedRuleStorage.recordUse).toHaveBeenCalledWith('rule-1');
|
||||
expect(mockedToast.success).toHaveBeenCalledWith('已加载规则「Test Rule」');
|
||||
});
|
||||
|
||||
it('should show delete confirmation dialog', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
const deleteButton = screen.getByTitle('删除');
|
||||
await user.click(deleteButton);
|
||||
|
||||
expect(screen.getByText('确定要删除规则「Test Rule」吗？此操作不可撤销。')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should delete rule after confirmation', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Open delete dialog
|
||||
await user.click(screen.getByTitle('删除'));
|
||||
|
||||
// Confirm delete
|
||||
await user.click(screen.getByText('确认'));
|
||||
|
||||
expect(mockedRuleStorage.deleteRule).toHaveBeenCalledWith('rule-1');
|
||||
expect(mockedToast.success).toHaveBeenCalledWith('规则已删除');
|
||||
});
|
||||
|
||||
it('should duplicate rule when duplicate button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
mockedRuleStorage.duplicate.mockReturnValue({
|
||||
...mockRule,
|
||||
id: 'rule-2',
|
||||
name: 'Test Rule（副本）',
|
||||
});
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
await user.click(screen.getByTitle('复制'));
|
||||
|
||||
expect(mockedRuleStorage.duplicate).toHaveBeenCalledWith('rule-1', '（副本）');
|
||||
expect(mockedToast.success).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should update search input value', async () => {
|
||||
const rules = [mockRule, { ...mockRule, id: 'rule-2', name: 'Another Rule' }];
|
||||
mockedRuleStorage.getAll.mockReturnValue(rules);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Initially both rules should be visible
|
||||
expect(screen.getByText('Test Rule')).toBeInTheDocument();
|
||||
expect(screen.getByText('Another Rule')).toBeInTheDocument();
|
||||
|
||||
// Verify search input exists and is interactive
|
||||
const searchInput = screen.getByPlaceholderText('搜索规则...');
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
expect(searchInput).toHaveValue('');
|
||||
});
|
||||
|
||||
it('should call exportRules when export button clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// Mock URL methods and body methods after render to avoid interfering with createRoot
|
||||
const mockCreateObjectURL = vi.fn(() => 'blob:mock');
|
||||
const mockRevokeObjectURL = vi.fn();
|
||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(mockCreateObjectURL);
|
||||
vi.spyOn(URL, 'revokeObjectURL').mockImplementation(mockRevokeObjectURL);
|
||||
vi.spyOn(document.body, 'appendChild').mockImplementation(() => null as unknown as Node);
|
||||
vi.spyOn(document.body, 'removeChild').mockImplementation(() => null as unknown as Node);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const exportButton = buttons.find((btn) => btn.textContent?.includes('导出'));
|
||||
expect(exportButton).toBeDefined();
|
||||
|
||||
await user.click(exportButton!);
|
||||
|
||||
expect(mockedRuleStorage.exportRules).toHaveBeenCalled();
|
||||
expect(mockCreateObjectURL).toHaveBeenCalled();
|
||||
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('should show saved rule count', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('已保存 1/20 条')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show field count for each rule', () => {
|
||||
mockedRuleStorage.getAll.mockReturnValue([mockRule]);
|
||||
|
||||
render(<RuleManager {...defaultProps} />);
|
||||
|
||||
// The component shows "{count} 字段" format
|
||||
expect(screen.getByText(/字段/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user