cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2aa93f941eb1d13248d428c5489ef70969de44c7
smart-crop-ui/src/THEME_REFACTOR_VERIFICATION.md

5.8 KiB
Raw Blame History

🔍 主题重构验证清单

快速验证步骤

1️⃣ 代码层面验证（已完成 ✅）

搜索验证结果

✅ bg-gray-50（非状态色）: 0处
✅ bg-gray-100（非状态色）: 0处  
✅ hover:bg-gray-50: 0处
✅ hover:bg-gray-100: 0处
✅ bg-gray-50/50: 0处
✅ dark:bg-gray-*（非状态色）: 0处

结论：代码层面重构100%完成！

2️⃣ 视觉验证清单（待测试）

A. AI模块测试（重点）

告警管理 /ai-model/alert/management
  • 打开页面
  • 查看告警规则卡片背景
    • 触发条件信息框（4个）
    • 配置区域背景
  • 查看告警详情弹窗
    • 告警编号/规则/级别/状态信息框（4个）
    • 触发值/阈值/时间信息框（3个）
  • 切换到dark模式，检查所有背景色
  • 测试悬停效果
数据中心 /ai-model/data/center
  • 查看"离线设备"卡片（保持灰色状态色）
  • 查看文件列表项背景
  • 查看API认证配置卡片
  • 查看质量控制规则项（4个）
  • 查看设备详情-协议配置
  • 查看传感器配置卡片
  • 查看操作日志项
  • 切换dark模式验证
决策生成 /ai-model/decision/generation
  • 查看决策记录列表项悬停效果
  • 查看信息框背景
  • 查看代码块背景（code标签）
  • 切换dark模式验证
决策日志 /ai-model/decision/log
  • 查看日志列表代码块（决策ID）
  • 查看详情信息框
  • 切换dark模式验证
决策模拟 /ai-model/decision/simulation
  • 查看结果列表代码块
  • 查看信息框
  • 已添加项保持灰色禁用状态（状态色）
  • 切换dark模式验证
决策详情
  • 查看决策步骤信息框
  • 查看规则详情框
  • 切换dark模式验证
决策支持 /ai-model/decision/support
  • 查看决策卡片（匹配绿色，未匹配bg-muted）
  • 查看规则逻辑卡片
  • 切换dark模式验证
审计日志 /ai-model/audit/log
  • 查看追踪信息框（6个）
  • 查看步骤详情框
  • 切换dark模式验证
应用生成 /ai-model/application/generation
  • 查看数据流向图背景
  • 切换dark模式验证

B. 系统配置测试

个人信息 /config/profile/info
  • 查看用户信息卡片
  • 查看个人资料字段
  • 切换dark模式验证
导航栏
  • 查看顶部导航hover效果
  • 查看子系统按钮hover
  • 切换dark模式验证

3️⃣ 兼容性验证

浏览器测试

  • Chrome（最新版）
    • 明亮模式
    • 暗黑模式
  • Firefox（最新版）
    • 明亮模式
    • 暗黑模式
  • Safari（最新版）
    • 明亮模式
    • 暗黑模式
  • Edge（最新版）
    • 明亮模式
    • 暗黑模式

分辨率测试

  • 1920x1080（标准）
  • 1366x768（笔记本）
  • 2560x1440（高分屏）
  • 3840x2160（4K）

4️⃣ 对比验证要点

明亮模式

信息框背景：应该是浅灰色（接近白色），不刺眼
悬停效果：应该是轻微的灰色高亮
代码块：应该有明显的背景区分
边框：应该是淡灰色，不明显

暗黑模式

信息框背景：应该比背景略亮，但不刺眼（深灰色）
悬停效果：应该是轻微的高亮，与背景有区分
代码块：应该有明显的深色背景
边框：应该是半透明白色，不明显

状态色（明暗模式均需验证）

绿色（成功/激活）：明显的绿色背景+深绿文字（dark模式更亮）
红色（错误）：明显的红色背景+深红文字（dark模式更亮）
橙色（告警）：明显的橙色背景+深橙文字（dark模式更亮）
黄色（警告）：明显的黄色背景+深黄文字（dark模式更亮）
蓝色（信息）：明显的蓝色背景+深蓝文字（dark模式更亮）
灰色（离线/禁用）：明显的灰色背景+深灰文字（保持灰色调）

5️⃣ 回归测试

功能测试

  • 所有按钮点击正常
  • 所有弹窗打开/关闭正常
  • 所有表单提交正常
  • 所有数据展示正常
  • 所有下拉菜单正常
  • 所有Tab切换正常

动画测试

  • 主题切换动画流畅
  • 悬停效果流畅
  • 弹窗打开/关闭动画正常
  • 页面切换动画正常

6️⃣ 问题记录模板

如发现问题，请按以下格式记录：

**问题位置：** `/ai-model/alert/management`  
**问题描述：** 告警详情信息框在dark模式下背景太亮
**当前表现：** 背景色为#ffffff
**期望表现：** 背景色应为深灰色（bg-muted）
**重现步骤：**
1. 切换到dark模式
2. 打开告警详情
3. 查看信息框背景

**截图：** [附上截图]

✅ 验证完成标准

  • 所有AI模块页面视觉正常
  • 明暗模式切换流畅无闪烁
  • 所有信息框背景统一
  • 所有悬停效果统一
  • 状态色保持正确显示
  • 没有发现视觉异常
  • 所有功能正常工作

签名： ___________
日期： ___________

📝 备注

如果发现问题

  1. 视觉问题

    • 检查对应组件是否使用了 bg-muted 或 hover:bg-accent
    • 检查 globals.css 中的主题变量定义
    • 清除浏览器缓存后重试

  2. 功能问题

    • 检查是否是重构导致的问题
    • 查看浏览器控制台错误
    • 对比重构前后代码差异

  3. 性能问题

    • 主题重构不应影响性能
    • 如有性能下降，检查是否有其他原因

快速回滚

如需回滚重构：

git log --oneline | grep "theme refactor"
git revert <commit-hash>

文档版本： 1.0
最后更新： 2024年（本次会话）
维护人： 开发团队