# 🔍 主题重构验证清单

## 快速验证步骤

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

#### 搜索验证结果
```bash
✅ 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️⃣ 问题记录模板

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

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

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

---

## ✅ 验证完成标准

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

**签名：** ___________  
**日期：** ___________

---

## 📝 备注

### 如果发现问题

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

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

3. **性能问题**
   - 主题重构不应影响性能
   - 如有性能下降，检查是否有其他原因

### 快速回滚

如需回滚重构：
```bash
git log --oneline | grep "theme refactor"
git revert <commit-hash>
```

---

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