docs: 更新 README 和 AGENTS 文档,补充测试数据生成器模块说明
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
# AGENTS.md
|
# AGENTS.md
|
||||||
|
|
||||||
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown 等测试效率工具。
|
WXT 浏览器扩展项目 (React 19 + TypeScript)。提供时间戳转换、存储清理、JWT 解析、JSON 工具、二维码、Base64、Markdown、测试数据生成器等测试效率工具。
|
||||||
|
|
||||||
## 核心命令
|
## 核心命令
|
||||||
|
|
||||||
@@ -54,6 +54,7 @@ src/ # 源代码根目录
|
|||||||
utils/ # 工具函数与服务抽象
|
utils/ # 工具函数与服务抽象
|
||||||
types/ # TypeScript 类型声明
|
types/ # TypeScript 类型声明
|
||||||
lib/ # 通用工具函数(cn、utils)
|
lib/ # 通用工具函数(cn、utils)
|
||||||
|
workers/ # Web Worker(数据生成等耗时任务)
|
||||||
public/ # 静态资源(图标、_locales 等)
|
public/ # 静态资源(图标、_locales 等)
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -76,6 +77,37 @@ src/pages/FeatureName/
|
|||||||
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
- 当 `index.tsx` 超过 150 行时,必须拆分为 UI + Hook 模式
|
||||||
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
- 复杂页面可增加 `contexts/`、`hooks/`、`components/` 子目录
|
||||||
|
|
||||||
|
### 测试数据生成器模块
|
||||||
|
|
||||||
|
```
|
||||||
|
src/pages/TestDataGenerator/
|
||||||
|
├── index.tsx # 主页面(字段配置 + 标签页切换)
|
||||||
|
├── hooks/useGenerator.ts # Web Worker 管理 Hook(创建、复用、通信、销毁)
|
||||||
|
└── components/
|
||||||
|
├── FieldList.tsx # 字段列表(虚拟滚动 + @dnd-kit 拖拽排序 + 规则保存)
|
||||||
|
├── FieldItem.tsx # 字段卡片展示
|
||||||
|
├── FieldEditor.tsx # 字段编辑器(名称校验、生成器选择、参数配置)
|
||||||
|
├── GeneratorSelector.tsx # 生成器选择器(分类 + 搜索)
|
||||||
|
├── GeneratorConfig.tsx # 生成器参数表单(动态渲染 string/number/boolean/select/array)
|
||||||
|
├── GenerateOptions.tsx # 生成选项(数量、格式)
|
||||||
|
├── GenerateButton.tsx # 生成按钮 + 进度条
|
||||||
|
├── DataPreview.tsx # 示例数据预览(JSON 语法高亮)
|
||||||
|
├── ResultPanel.tsx # 生成结果状态面板
|
||||||
|
├── ExportPanel.tsx # 导出面板(复制/下载 JSON/CSV)
|
||||||
|
└── RuleManager.tsx # 规则管理(CRUD、搜索、导入/导出)
|
||||||
|
|
||||||
|
src/utils/
|
||||||
|
├── ruleStorage.ts # 规则持久化存储(localStorage)
|
||||||
|
├── dataExporter.ts # 数据导出工具(JSON/CSV 转换、下载、剪贴板)
|
||||||
|
└── generators/ # 内置生成器定义(个人信息、企业、技术、基础类型)
|
||||||
|
|
||||||
|
src/workers/
|
||||||
|
└── generator.worker.ts # 数据生成 Web Worker
|
||||||
|
|
||||||
|
src/types/
|
||||||
|
└── testDataGenerator.ts # 类型定义(FieldConfig, DataRule, GeneratorDefinition 等)
|
||||||
|
```
|
||||||
|
|
||||||
## 关键架构决策
|
## 关键架构决策
|
||||||
|
|
||||||
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理,`RouterProvider` 根据 `PageType`
|
**路由**: 不使用 React Router。通过 `src/config/features.tsx` 的 `FEATURES` 数组管理,`RouterProvider` 根据 `PageType`
|
||||||
@@ -148,7 +180,8 @@ src/pages/FeatureName/
|
|||||||
## 关键外部库(非显而易见的)
|
## 关键外部库(非显而易见的)
|
||||||
|
|
||||||
- `@webext-core/messaging` — 扩展消息通信
|
- `@webext-core/messaging` — 扩展消息通信
|
||||||
- `@dnd-kit` — 拖拽排序(用于页面顺序管理)
|
- `@dnd-kit` — 拖拽排序(用于页面顺序管理和字段列表排序)
|
||||||
- `qrious` + `qr-scanner` — 二维码生成与解析
|
- `qrious` + `qr-scanner` — 二维码生成与解析
|
||||||
- `dayjs` — 日期处理(时间戳转换)
|
- `dayjs` — 日期处理(时间戳转换)
|
||||||
- `sonner` — Toast 通知(替代传统 snackbar)
|
- `sonner` — Toast 通知(替代传统 snackbar)
|
||||||
|
- Web Worker — 批量数据生成(`src/workers/generator.worker.ts`),避免阻塞 UI 线程
|
||||||
|
|||||||
@@ -8,61 +8,72 @@
|
|||||||
|
|
||||||
## 功能特性
|
## 功能特性
|
||||||
|
|
||||||
### 🚀 Dashboard 首页
|
### Dashboard 首页
|
||||||
|
|
||||||
- **工具导航**: 快速访问所有可用工具.
|
- **工具导航**: 快速访问所有可用工具.
|
||||||
- **个性化定制**: 支持自定义工具的排序和可见性.
|
- **个性化定制**: 支持自定义工具的排序和可见性.
|
||||||
- **实时预览**: 在卡片上直接查看实时数据(如当前时间戳).
|
- **实时预览**: 在卡片上直接查看实时数据(如当前时间戳).
|
||||||
|
|
||||||
### ⏰ 时间戳转换工具
|
### 时间戳转换工具
|
||||||
|
|
||||||
- **实时显示**: 毫秒级精度显示当前系统时间.
|
- **实时显示**: 毫秒级精度显示当前系统时间.
|
||||||
- **双向转换**: 日期字符串与 Unix 时间戳(秒/毫秒)之间的无缝转换.
|
- **双向转换**: 日期字符串与 Unix 时间戳(秒/毫秒)之间的无缝转换.
|
||||||
- **多时区支持**: 预设常用时区(亚洲/上海、美洲/纽约、欧洲/伦敦),支持快速切换.
|
- **多时区支持**: 预设常用时区(亚洲/上海、美洲/纽约、欧洲/伦敦),支持快速切换.
|
||||||
- **快捷操作**: 一键复制转换结果,支持多种格式.
|
- **快捷操作**: 一键复制转换结果,支持多种格式.
|
||||||
|
|
||||||
### 🧹 存储清理工具
|
### 存储清理工具
|
||||||
|
|
||||||
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
- **智能识别**: 自动检测并显示当前活动标签页的域名.
|
||||||
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
|
||||||
- **细粒度控制**: 可根据需要选择特定的清理项.
|
- **细粒度控制**: 可根据需要选择特定的清理项.
|
||||||
- **自动刷新**: 提供清理后自动刷新页面的选项,确保状态同步.
|
- **自动刷新**: 提供清理后自动刷新页面的选项,确保状态同步.
|
||||||
|
|
||||||
### 📝 文本统计工具
|
### 文本统计工具
|
||||||
|
|
||||||
- **实时分析**: 键入即统计,无需额外操作.
|
- **实时分析**: 键入即统计,无需额外操作.
|
||||||
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
|
||||||
- **性能优化**: 采用高性能分词算法,支持大文本处理.
|
- **性能优化**: 采用高性能分词算法,支持大文本处理.
|
||||||
|
|
||||||
### 🔑 JWT 解析工具
|
### JWT 解析工具
|
||||||
|
|
||||||
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
|
||||||
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据,方便阅读.
|
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据,方便阅读.
|
||||||
- **安全检查**: 自动去除 `Bearer` 前缀,处理异常输入并提供友好提示.
|
- **安全检查**: 自动去除 `Bearer` 前缀,处理异常输入并提供友好提示.
|
||||||
- **签名查看**: 展示 JWT 签名部分,辅助验证令牌完整性.
|
- **签名查看**: 展示 JWT 签名部分,辅助验证令牌完整性.
|
||||||
|
|
||||||
### 🖱️ 右键恢复工具
|
### 右键恢复工具
|
||||||
|
|
||||||
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
- **当前页面检测**: 自动识别当前活动标签页的域名.
|
||||||
- **一键恢复**: 解除网站对右键菜单的限制,恢复复制、粘贴等基础操作.
|
- **一键恢复**: 解除网站对右键菜单的限制,恢复复制、粘贴等基础操作.
|
||||||
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
- **状态可视化**: 通过 Badge 组件直观展示当前页面的锁定/解锁状态.
|
||||||
|
|
||||||
### 🖼️ 二维码工具
|
### 二维码工具
|
||||||
|
|
||||||
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码,支持下载.
|
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码,支持下载.
|
||||||
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
|
||||||
|
|
||||||
### 🔄 JSON 工具
|
### JSON 工具
|
||||||
|
|
||||||
- **差异比较**: 对比两段 JSON 数据,高亮展示差异.
|
- **差异比较**: 对比两段 JSON 数据,高亮展示差异.
|
||||||
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
- **格式化**: 支持 JSON 美化、压缩、转 YAML / TOML.
|
||||||
|
|
||||||
### 🧰 Base64 转换器
|
### Base64 转换器
|
||||||
|
|
||||||
- **文本编解码**: 支持文本内容的 Base64 编码与解码.
|
- **文本编解码**: 支持文本内容的 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/)
|
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
|
||||||
@@ -75,6 +86,8 @@
|
|||||||
- **存储**: Chrome Storage API (类型安全封装)
|
- **存储**: Chrome Storage API (类型安全封装)
|
||||||
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
|
||||||
- **测试**: Vitest + Testing Library
|
- **测试**: Vitest + Testing Library
|
||||||
|
- **拖拽排序**: @dnd-kit/core + @dnd-kit/sortable
|
||||||
|
- **异步生成**: Web Worker (批量数据生成)
|
||||||
|
|
||||||
## 项目结构
|
## 项目结构
|
||||||
|
|
||||||
@@ -89,6 +102,7 @@
|
|||||||
│ │ ├── background.ts # 后台 Service Worker
|
│ │ ├── background.ts # 后台 Service Worker
|
||||||
│ │ └── content.ts # 网页注入脚本
|
│ │ └── content.ts # 网页注入脚本
|
||||||
│ ├── pages/ # 各功能模块的页面组件
|
│ ├── pages/ # 各功能模块的页面组件
|
||||||
|
│ ├── workers/ # Web Worker (数据生成等耗时任务)
|
||||||
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
│ ├── providers/ # 全局状态提供者 (Router, Theme 等)
|
||||||
│ ├── hooks/ # 自定义 React Hooks
|
│ ├── hooks/ # 自定义 React Hooks
|
||||||
│ ├── utils/ # 工具函数与服务抽象
|
│ ├── utils/ # 工具函数与服务抽象
|
||||||
|
|||||||
Reference in New Issue
Block a user