36b6bfd20d
* feat: 生成成功改为 toast 提示 * refactor: 数据预览改为显示示例数据,简化组件逻辑 * fix: 非必填字段预览显示 null * fix: 修复空值率与必填状态的逻辑 * fix: 切换为非必填时默认空值率 100% * feat: 字段编辑弹窗添加「完成」按钮 去除关闭按钮,添加取消按钮 * refactor: 删除未使用的 defaultNullRate 功能 * feat: 优化规则管理功能 * fix: 更新 features 测试断言以匹配新增的 testDataGenerator * refactor: 将 formatFileSize 重命名为 formatBytes 并移至通用工具模块 * refactor: 使用 Label 组件替换原生 label 元素,并在 DecodeResultPaper 中引入 Input 组件 * refactor: 规范化页面组件目录结构 * refactor(JsonTools): 规范化页面组件目录结构 * refactor(StorageCleaner): 规范化页面组件目录结构 * refactor(Timestamp): 规范化页面组件目录结构 * refactor(i18n): 移除 chrome.i18n 国际化,统一使用中文硬编码 * refactor(AppRoot): 移除 RouterProvider 组件,直接渲染子组件 * fix(RouterProvider): 将 goBack 重命名为 goHome,修复跨窗同步 merge 不一致 * fix(ThemeModeProvider): 修复主题快照同步与首屏闪烁问题 * refactor: 将 UI 文案改为中文并优化相关逻辑 * refactor: 清理代码注释并优化组件结构 * feat(Dashboard): 重构仪表板功能组件和逻辑 * refactor: 更新功能键名称并移除 README 文件 * refactor: 重构 TopBar 组件并更新项目结构 * feat(TopBar): 添加搜索功能组件并优化结构 * refactor: 统一使用 Button 组件替换原有 button 元素 * feat: 添加 EmptyPlaceholder 组件并更新相关页面 * feat(TextStatistics): 引入 StatCard 组件以优化统计信息展示 * feat(Timestamp): 重构时间戳转换功能,新增 ConverterForm 组件 * feat(Jwt): 重构 JWT 组件,新增常量和结果视图 * refactor(RightClickRestorer): 用状态配置表简化页面 UI 结构 * fix(business): 修复 skewedRandom 函数中的数学计算错误 * refactor(ImageUploader): 移除预览 URL 相关逻辑并简化粘贴事件处理 * feat(TestDataGenerator): 更新规则编辑提示和警告显示逻辑 * refactor(CopyButton.test): 移除冗余测试用例 * refactor(RouterProvider, chromeStorage, useContextMenuData): 更新存储获取逻辑以移除默认值参数 * refactor(代码重复): 抽取共享工具函数与 UI 组件,消除多处重复实现 * fix(RouterProvider): 修复初始加载状态逻辑,确保在加载前不覆盖 chrome.storage * feat(TopBar): 添加搜索框快捷键提示功能及相关测试 * refactor(StorageCleaner): 移动 isRestrictedUrl 函数到独立模块并更新相关引用 * fix(StorageCleaner): 修复 IndexedDB 清理竞态、部分成功计数与刷新后状态同步 * fix: 修复路由初始化竞态、存储状态静默覆盖与存储清理误删 * refactor: 统一中文文案并简化组件结构,提升代码可读性 * refactor: 更新 Worker 消息类型以支持生成任务 ID * fix: 修复 ruleStorage 写入失败处理与 CopyButton 成功态样式
utils/
通用工具函数和 React 自定义 Hooks 目录,与具体页面解耦。
工具函数
| 文件 | 用途 |
|---|---|
chromeStorage.ts |
Chrome Storage API 封装:类型安全的 StorageUtils 类,提供 get/set/remove 方法 |
syncSnapshot.ts |
通用 localStorage 快照读取(snapshot/{key}),用于 Router 与 useStorageState 首屏防闪烁 |
themeSnapshot.ts |
主题专用快照读写与 document.documentElement class 切换 |
restrictedUrls.ts |
受限 URL 检测(chrome://、about: 等),供 Storage Cleaner 等模块复用 |
chromeTabs.ts |
Chrome Tabs API 封装:获取活动标签页、获取域名、在新标签页打开扩展页面 |
clipboard.ts |
剪贴板操作:copyTextToClipboard(文本)、copyImageToClipboard(图片) |
messages.ts |
扩展消息通信:基于 @webext-core/messaging,定义 MessageAction 枚举和 ProtocolMap 类型安全映射 |
contextMenu.ts |
右键菜单配置与操作:定义菜单项、创建菜单、解析点击事件、ID→PageType 映射 |
base64Converter.ts |
Base64 编解码:文本↔Base64、文件↔Base64、图片预览,定义文件大小限制和图像 MIME 类型 |
jwt.ts |
JWT 解析:Base64URL 解码、解析 Header/Payload/Signature、JSON 格式化输出 |
jsonFormatter.ts |
JSON 格式化/压缩:支持缩进、按键排序、minify |
jsonToYaml.ts |
JSON→YAML 转换 |
jsonToToml.ts |
JSON→TOML 转换 |
qrCodeParser.ts |
二维码解析:基于 qr-scanner 库从文件中解析二维码 |
storageCleaner.ts |
存储清理:获取当前标签页、计算 Cookie/Storage 大小、清理操作 |
textStatistics.ts |
文本统计:使用 Intl.Segmenter 计算字符数/单词数/行数/字节大小 |
format.ts |
通用格式化:formatBytes 将字节转为可读字符串(B/KB/MB/GB/TB) |
dayjs.ts |
Day.js 初始化:扩展 UTC、Timezone、RelativeTime 插件,加载中文本地化 |
ruleStorage.ts |
测试数据生成器规则存储:基于 localStorage 的 CRUD、搜索、导入/导出和数量限制 |
dataExporter.ts |
测试数据导出:JSON/CSV 转换、文件下载和复制到剪贴板 |
rightClickInjection.ts |
右键恢复注入脚本:在页面上下文恢复 contextmenu/copy/paste 等事件默认行为 |
自定义 Hooks
| 文件 | 用途 |
|---|---|
useStorageState.ts |
Chrome Storage 状态 Hook:类似 useState,值自动同步到 chrome.storage,使用 localStorage 快照消除首屏闪烁 |
useContextMenuData.ts |
右键菜单数据 Hook:从 storage 读取待处理数据,匹配 featureKey 后消费并触发回调 |
useDebounce.ts |
防抖 Hook:对值进行延迟更新,避免频繁触发 |
useStorageState 初始化防覆盖
useStorageState 在挂载时从 storage 异步加载。写入 storage 需满足以下任一条件:
loadSucceededRef:storage 读取成功userModifiedRef:用户通过 setter 主动修改过值
若 storage 读取失败且用户未修改,不会将默认值写回 storage,避免静默覆盖已有数据。
使用约定
- 工具函数使用命名导出(
export function xxx()) - 工具层不直接展示 Toast;可恢复错误返回可判断结果,需要抛出的解析/转换错误由页面 Hook 或 UI 层捕获
- Hook 使用
use前缀命名,定义返回值接口类型 - 存储操作使用
chromeStorage.ts的storageUtil封装,不要直接调用chrome.storage - 消息通信使用
messages.ts的sendMessage/onMessage,不要使用原生chrome.runtime.sendMessage - 需要首屏快照的新持久化状态,优先复用
syncSnapshot.ts或参考themeSnapshot.ts模式