雨霖铃
e263b63ced
- 修复 LiveClock.tsx CopyButton size 属性类型错误 (small → sm) - 修复 ToolCard.tsx 紫色 RGB 值拼写错误 (147,51,2 purple → 147,51,232) - 替换 4 处硬编码中文为 i18n 调用 (StorageCleaner, JsonTools) - MarkdownToHtml 预览链接色改为 CSS 变量以支持暗黑模式 - 移除 Base64Converter 中已被 Base64ConverterSection 替代的死代码 (FileMode.tsx, ImageMode.tsx 及其测试文件) - 更新 README.md 移除对已删除文件的引用 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
pages/
功能页面组件目录，每个子目录对应一个工具页面。
目录结构约定
典型页面遵循 UI + Hook 分离 模式：
pages/FeatureName/
├── index.tsx # 页面 UI（纯展示，使用 shadcn/ui 组件）
├── useFeatureName.ts # 业务逻辑 Hook（状态管理 + 转换逻辑）
├── constants.ts # 常量定义（可选）
├── SubComponent.tsx # 子组件（可选）
└── __tests__/ # 测试文件
└── index.test.tsx
页面列表
Dashboard/
仪表盘首页，以卡片网格展示所有可见工具，支持点击导航。
| 文件 | 用途 |
|---|---|
index.tsx |
页面组件，渲染工具卡片网格 |
ToolCard.tsx |
工具卡片组件，展示图标、标题、描述和实时数据 |
Timestamp/
时间戳转换工具，支持秒/毫秒级互转、多时区选择、实时时钟。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useTimestampConverter.ts |
业务逻辑 Hook，包含转换模式、输入、单位、时区状态和响应式计算管线 |
LiveClock.tsx |
实时时钟子组件，React.memo 优化 |
ResultView.tsx |
转换结果展示子组件 |
constants.ts |
时区列表等常量 |
StorageCleaner/
浏览器存储清理工具，支持 Cookie/LocalStorage/SessionStorage/IndexedDB/Cache/SW 清理。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useStorageCleaner.ts |
业务逻辑 Hook |
StorageOptionsGrid.tsx |
清理选项网格 |
StorageCleanerConfirm.tsx |
清理确认对话框 |
AutoRefreshToggle.tsx |
自动刷新开关 |
ErrorDisplay.tsx |
错误展示组件 |
CleaningResult.tsx |
清理结果展示 |
OptionItem.tsx |
单个选项组件 |
QrCode/
二维码工具，支持生成（URL→QR）和解析（QR→URL）。
| 文件/目录 | 用途 |
|---|---|
index.tsx |
页面 UI |
types.ts |
类型定义 |
contexts/ |
Context Provider |
hooks/ |
业务逻辑 Hooks |
components/ |
子组件 |
TextStatistics/
文本统计工具，实时计算字符数、单词数、行数、字节大小。
| 文件 | 用途 |
|---|---|
index.tsx |
页面组件，集成 TextInputArea 和统计结果展示 |
Jwt/
JWT 解析工具，解码 Header/Payload/Signature。
| 文件/目录 | 用途 |
|---|---|
index.tsx |
页面 UI |
types.ts |
类型定义 |
contexts/ |
Context Provider |
hooks/ |
业务逻辑 Hooks |
components/ |
子组件 |
JsonTools/
JSON 工具集：差异比较、格式化、YAML/TOML/Minify 转换。
| 文件 | 用途 |
|---|---|
index.tsx |
页面入口，子模式切换 |
types.ts |
类型定义 |
diffEngine.ts |
差异比较引擎 |
JsonDiffInput.tsx |
JSON 输入组件 |
DiffResult.tsx |
差异结果展示 |
DiffNavigator.tsx |
差异导航器 |
JsonFormatSection.tsx |
格式化区域 |
JsonConvertSection.tsx |
转换区域（YAML/TOML/Minify） |
JsonTree.tsx |
JSON 树形展示 |
Base64Converter/
Base64 编解码工具，支持文本/文件/图片三种模式。
| 文件 | 用途 |
|---|---|
index.tsx |
页面入口，子模式切换 |
useBase64Converter.ts |
业务逻辑 Hook |
TextMode.tsx |
文本模式 |
Base64ConverterSection.tsx |
文件/图片通用转换区域 |
MarkdownToHtml/
Markdown 转 HTML 工具，支持分栏/预览/源码三种视图模式。
HtmlToMarkdown/
HTML 转 Markdown 工具，支持分栏/预览/Markdown 三种视图模式。
RightClickRestorer/
右键菜单恢复工具，解除网站对右键的限制。
| 文件 | 用途 |
|---|---|
index.tsx |
页面 UI |
useRightClickRestorer.ts |
业务逻辑 Hook |
新增页面
- 在
types/storage.d.ts添加PageType联合类型成员 - 在
config/features.tsx的FEATURES数组添加配置 - 在
pages/创建页面目录（遵循上述结构） - 在
i18n/locales/{zh,en}/features.json添加翻译 - 如需新权限，更新
wxt.config.ts - 添加对应的单元测试