Develop (#9)

* feat: optimize popup standalone window layout and enhance storage cleaner synchronization * docs: 更新README文档并删除过时文件 - 更新README文档，添加项目结构、功能特性和路由系统等详细信息 - 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档 - 清理项目中的过时配置文件和计划文档 * feat: 添加 Vitest 测试框架和组件测试 - 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts) - 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm - 创建工具测试: routes, storageCleaner - 修复 background.ts 监听器参数问题 - 修复 options/App.tsx 硬编码默认值 - 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored) - 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除) - 更新 package.json (添加测试脚本和依赖) * fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题 * refactor(popup): 优化 OpenUrl 页面样式和导航逻辑重构 OpenUrl 页面输入框样式，改进聚焦状态效果移除 RouterProvider 依赖，直接通过存储设置侧边栏路由在 OpenUrlViewer 页面添加加载状态指示器和错误处理监听存储变化实现 URL 自动更新 * feat(ui): 优化存储清理页面UI和交互效果重构存储清理页面组件，增强视觉层次和交互体验： - 使用新的错误提示样式和布局 - 改进选项卡片样式，增加悬停动画和选中状态 - 调整整体间距和排版，提升视觉一致性 - 添加微交互效果如悬停缩放和阴影 - 优化颜色方案和过渡动画 - 统一组件尺寸和字体层级 * feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能 * chore: update package-lock.json (npm audit fix) * refactor(主题): 将页面样式抽离到统一配置文件将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理优化测试用例中使用each替代forEach 更新路由测试以包含新的qrCode页面 * feat(二维码页面): 添加复制二维码功能并优化样式添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。 * feat(theme): 为所有页面添加统一的背景色和卡片背景色为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。 * feat: 添加复制按钮组件并优化现有复制功能 refactor(utils): 创建剪贴板工具函数 feat(components): 新增可复用的CopyButton组件 refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton style: 格式化代码并调整部分样式 * refactor(存储): 统一qrCode相关存储键名将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性 * feat: 添加二维码工具功能并更新项目配置 - 新增二维码工具页面及相关组件和工具函数 - 添加 MIT 许可证文件 - 更新 package.json 配置为公开项目 - 更新 README 文档说明新功能
2026-04-19 15:31:14 +08:00
parent bbd0507bcd
commit be5e2f02ee
43 changed files with 4943 additions and 2483 deletions
@@ -1,13 +1,19 @@
 # Testing Tools Browser Extension

-这是一个基于 WXT 框架的浏览器扩展项目，提供时间戳转换工具。
+这是一个基于 WXT 框架的浏览器扩展项目，提供实用的测试工具功能。

 ## 项目概述

-Testing Tools 是一个轻量级的浏览器扩展，提供实用的时间戳转换功能。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。
+Testing Tools 是一个轻量级的浏览器扩展，提供多种实用的测试工具功能。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。

 ## 功能特性

+### Dashboard 首页
+
+- 卡片式工具展示
+- 支持自定义工具排序和可见性
+- 实时数据预览（时间戳等）
+
 ### 时间戳转换工具

 - 实时显示当前时间戳（毫秒/秒可切换）
@@ -16,6 +22,37 @@ Testing Tools 是一个轻量级的浏览器扩展，提供实用的时间戳转
 - 一键复制转换结果
 - 输入验证和错误提示

+### 存储清理工具
+
+- 自动读取当前域名
+- 支持清理多种存储类型：
+  - localStorage
+  - sessionStorage
+  - IndexedDB
+  - Cookies
+  - Cache Storage
+  - Service Workers
+- 可选择的清理类型（默认全选）
+- 确认对话框防止误操作
+- 清理结果统计
+- 自动刷新页面选项
+
+### URL 工具
+
+- 保存常用 URL 列表
+- 快速打开保存的 URL
+- 支持 URL 验证和安全检查
+- 内置 URL 查看器（iframe 沙箱模式）
+
+### 二维码工具
+
+- URL 转二维码（生成器）
+- 二维码转 URL（解析器）
+- 支持上传二维码图片解析
+- 生成的二维码可下载
+- 一键复制转换结果
+- 卡片式布局，节省空间
+
 ## 技术栈

 - **框架**: WXT (Web Extension Toolkit)
@@ -24,23 +61,83 @@ Testing Tools 是一个轻量级的浏览器扩展，提供实用的时间戳转
 - **日期处理**: dayjs (含 UTC 和时区插件)
 - **通信**: @webext-core/messaging
 - **存储**: Chrome Storage API (类型安全封装)
+- **二维码**: qrcode (生成) + jsqr (解析)
+- **测试**: Vitest + Testing Library

 ## 项目结构

 ```
+├── components/           # 可复用 UI 组件
+│   ├── Button.tsx
+│   ├── CopyButton.tsx
+│   ├── GlobalSnackbar.tsx
+│   ├── RouterContainer.tsx
+│   ├── StorageCleanerConfirm.tsx
+│   ├── ToolCard.tsx
+│   └── TopBar.tsx
+├── config/              # 路由配置
+│   └── routes.ts        # 页面路由定义
 ├── entrypoints/         # 浏览器扩展入口点
-│   ├── popup/           # 扩展弹窗界面（时间戳转换页面）
-│   ├── options/         # 选项页面
-│   ├── background.ts    # 后台脚本
-│   └── content.ts       # 内容脚本
-├── utils/              # 工具函数（存储、日期处理、消息通信）
-├── types/              # TypeScript 类型定义
-├── public/             # 静态资源
-├── wxt.config.ts       # WXT 配置文件
-├── package.json        # 项目依赖和脚本
-└── README.md           # 项目说明文档
+│   ├── popup/          # 扩展弹窗界面
+│   │   ├── App.tsx
+│   │   ├── main.tsx
+│   │   └── pages/      # 页面组件
+│   │       ├── DashboardPage.tsx
+│   │       ├── OpenUrlPage.tsx
+│   │       ├── OpenUrlViewerPage.tsx
+│   │       ├── QrCodePage.tsx
+│   │       ├── StorageCleanerPage.tsx
+│   │       └── TimestampPage.tsx
+│   ├── options/        # 选项页面
+│   ├── sidepanel/      # 侧边栏
+│   ├── background.ts   # 后台脚本
+│   └── content.ts      # 内容脚本
+├── providers/           # React Context providers
+│   └── RouterProvider.tsx  # 路由状态管理
+├── types/               # TypeScript 类型定义
+│   └── storage.d.ts
+├── utils/               # 工具函数
+│   ├── chromeStorage.ts
+│   ├── clipboard.ts
+│   ├── dayjs.ts
+│   ├── messages.tsx
+│   └── storageCleaner.ts
+├── public/              # 静态资源
+├── wxt.config.ts        # WXT 配置文件
+├── package.json
+└── README.md
 ```

+## 路由系统
+
+项目实现了灵活的路由系统，支持：
+
+- **页面导航**: 在不同工具页面之间切换
+- **路由同步**: 通过 Chrome Storage 同步路由状态
+- **可见性控制**: 可配置显示哪些页面
+- **页面排序**: 自定义工具卡片的显示顺序
+
+### 页面类型 (PageType)
+
+| 页面             | 说明       | 默认可见 |
+| ---------------- | ---------- | -------- |
+| `dashboard`      | 首页       | ✓        |
+| `timestamp`      | 时间戳转换 | ✓        |
+| `storageCleaner` | 存储清理   | ✓        |
+| `openUrl`        | URL 工具   | ✓        |
+| `qrCode`         | 二维码工具 | ✓        |
+| `openUrlViewer`  | URL 查看器 | ✗        |
+
+## 扩展入口点
+
+| 入口点         | 说明                     |
+| -------------- | ------------------------ |
+| **popup**      | 点击扩展图标弹出的界面   |
+| **options**    | 扩展选项页面             |
+| **sidepanel**  | 浏览器侧边栏             |
+| **background** | 后台脚本（生命周期管理） |
+| **content**    | 内容脚本（注入到网页）   |
+
 ## 开发环境要求

 - Node.js >= 18
@@ -80,17 +177,25 @@ npm run build:firefox
 # Chrome 浏览器
 npm run zip

-# Firefox
+# Firefox 浏览器
 npm run zip:firefox
 ```

-### 5. 其他命令
+### 5. 代码质量

 ```bash
 npm run compile    # TypeScript 类型检查
 npm run lint       # ESLint 代码检查
 ```

+### 6. 测试
+
+```bash
+npm run test              # 运行所有测试
+npm run test:watch        # 运行测试并监听文件变化
+npm run test:coverage     # 运行测试并生成覆盖率报告
+```
+
 ## 权限说明

 扩展请求以下权限：
@@ -98,7 +203,8 @@ npm run lint       # ESLint 代码检查
 - `storage` 和 `unlimitedStorage` - 本地数据存储
 - `clipboardWrite` - 剪贴板写入（复制功能）
 - `activeTab`, `scripting`, `tabs` - 当前标签页控制和脚本注入
- `debugger` - 调试器权限
+- `cookies` - Cookie 访问
+- `sidePanel` - 侧边栏支持
 - `<all_urls>` - 访问所有网站内容（内容脚本注入）

 ## 主要依赖
@@ -107,15 +213,14 @@ npm run lint       # ESLint 代码检查
 - `@mui/material` - UI 组件库
 - `dayjs` - 日期处理
 - `@webext-core/messaging` - 扩展消息通信
+- `vitest` - 测试框架
+- `@testing-library/react` - React 组件测试

-## 贡献指南
+## 浏览器兼容性

-1. Fork 项目
-2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 创建 Pull Request
+- Chrome (推荐)
+- Firefox

 ## 许可证

-此项目为私有项目 (private: true)，仅供内部使用。
+此项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。