THEME_TESTING_CHECKLIST.md

主题切换测试清单

测试环境

• 浏览器：Chrome/Edge, Firefox, Safari
• URL: http://localhost:8080/index.html

---

主要功能测试

1. 主题切换按钮 ✓

• 侧边栏顶部显示主题切换按钮（太阳/月亮图标）
• 按钮有 hover 效果（放大、旋转）
• 点击按钮切换主题
• 切换时有旋转动画
• 图标根据主题变化（浅色模式显示太阳，深色模式显示月亮）

2. 主题持久化 ✓

• 切换主题后刷新页面，主题保持不变
• 打开新标签页，主题与已设置的一致
• localStorage 中存储了 'devutils-theme' 键

3. 主界面适配 ✓

• 侧边栏在两种主题下都清晰可见
• 工具卡片在两种主题下样式正确
• 文字对比度足够（可读性强）
• 边框和分隔线在两种主题下都可见
• 搜索框在两种主题下样式正确

---

工具页面测试（28个工具）

编解码工具 (5个)

Base64编解码

• 浅色模式：输入框、按钮、输出框显示正常
• 深色模式：背景适配，文字清晰
• 功能正常（编码/解码）

Base64转图片

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

文件转Base64

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

URL编码/解码

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

Unicode转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

格式化工具 (2个)

JSON格式化 ⭐

• CodeMirror 编辑器适配浅色主题
• CodeMirror 编辑器适配深色主题
• 复制按钮在两种主题下可见且美观
• 语法高亮在两种主题下清晰
• 功能正常（格式化/压缩/转义/去转义）

代码格式化 ⭐

• CodeMirror 编辑器适配浅色主题
• CodeMirror 编辑器适配深色主题
• 复制按钮样式正确
• 多语言支持正常
• 功能正常

---

图片工具 (3个)

图片压缩

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

全景图预览

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

图片格式转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

数据生成工具 (3个)

随机数据生成

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

字符串哈希生成

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

NanoID生成

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

文本工具 (4个)

文本差异对比 ⭐

• Diff 视图在浅色主题下清晰
• Diff 视图在深色主题下清晰
• 颜色对比度足够
• 功能正常

正则表达式测试 ⭐

• 输入框适配两种主题
• 匹配高亮在两种主题下可见
• 错误提示颜色正确
• 功能正常

Markdown预览 ⭐

• 编辑器适配两种主题
• 预览区域适配两种主题
• 功能正常

文本统计

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

音视频工具 (4个)

音频波形可视化 ⭐

• 波形容器在浅色主题下清晰
• 波形容器在深色主题下清晰
• 波形颜色适配主题
• 功能正常

全景视频播放

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

视频播放

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

视频压缩与编码转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

转换器工具 (5个)

时间转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

Cron转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

JSON/YAML互转

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

JSON转CSV

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

进制转换

• 浅色模式显示正常
• 深色模式显示正常
• 功能正常

---

网络工具 (2个)

WebSocket测试 ⭐

• 日志区域在浅色主题下可读
• 日志区域在深色主题下可读
• 发送/接收消息颜色区分清晰
• 错误消息在两种主题下醒目
• 功能正常

Socket.IO测试 ⭐

• 日志区域适配两种主题
• 配置面板适配两种主题
• 功能正常

---

响应式测试

桌面 (>1024px)

• 浅色主题布局正常
• 深色主题布局正常
• 侧边栏完整显示
• 主题切换按钮位置正确

平板 (768px-1024px)

• 浅色主题布局正常
• 深色主题布局正常
• 侧边栏可见
• 工具卡片自适应

移动端 (<768px)

• 浅色主题布局正常
• 深色主题布局正常
• 侧边栏折叠正常
• 主题切换按钮可访问
• 工具卡片单列显示

---

可访问性测试

键盘导航

• Tab 键可以聚焦到主题切换按钮
• Enter 或 Space 键可以切换主题
• Focus 状态在两种主题下都清晰可见

屏幕阅读器

• 主题切换按钮有正确的 aria-label
• 主题切换后 aria-label 更新

对比度

• 浅色模式文字对比度 ≥ 4.5:1
• 深色模式文字对比度 ≥ 4.5:1
• 按钮在两种主题下对比度足够

---

性能测试

• 主题切换响应速度 < 300ms
• 页面加载时主题应用无闪烁
• 切换主题时无明显卡顿
• localStorage 读写正常

---

浏览器兼容性

Chrome/Edge

• 浅色主题显示正常
• 深色主题显示正常
• backdrop-filter 效果正常
• 动画流畅

Firefox

• 浅色主题显示正常
• 深色主题显示正常
• backdrop-filter 效果正常
• 动画流畅

Safari

• 浅色主题显示正常
• 深色主题显示正常
• -webkit-backdrop-filter 效果正常
• 动画流畅

---

已知问题

记录测试中发现的问题：

---

测试结论

• 测试日期：2026-02-10
• 测试人员：
• 测试状态：□ 通过 □ 部分通过 □ 未通过
• 备注：

---

标记说明：

• ⭐ = 重点测试页面（有特殊UI元素）
• ✓ = 已完成实现
• □ = 待测试
• ✅ = 测试通过
• ❌ = 测试失败