furniture-3d-system-Wu/docs/theme-testing-guide.md

# 主题系统测试指南

## 快速验证

### 1. 浏览器开发者工具检查

打开浏览器开发者工具（F12），在 Console 中运行：

```javascript
// 检查 data-theme 属性
console.log('当前主题:', document.documentElement.getAttribute('data-theme'))

// 检查 CSS 变量值
const blue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
console.log('蓝色变量值:', blue)

// 检查按钮实际背景色
const button = document.querySelector('.bg-apple-blue')
if (button) {
  console.log('按钮背景色:', getComputedStyle(button).backgroundColor)
}
```

### 2. 预期结果

#### 浅色模式（data-theme="light"）
- `--color-blue`: `#007AFF` (rgb(0, 122, 255))
- 按钮背景色：亮蓝色
- 背景：白色/浅灰色
- 文字：黑色/深灰色

#### 深色模式（data-theme="dark"）
- `--color-blue`: `#0A84FF` (rgb(10, 132, 255))
- 按钮背景色：更亮的蓝色
- 背景：黑色/深灰色
- 文字：白色/浅灰色

## 详细测试步骤

### 测试 1：默认主题加载

1. 清除浏览器 localStorage：
   ```javascript
   localStorage.clear()
   ```

2. 刷新页面

3. 验证：
   - HTML 应该有 `data-theme="light"` 属性
   - 页面应该显示浅色主题

### 测试 2：主题切换

1. 点击页面右上角的主题切换按钮（太阳/月亮图标）

2. 验证：
   - `data-theme` 属性应该从 `light` 变为 `dark`（或相反）
   - 所有颜色应该立即切换
   - localStorage 应该保存新主题：
     ```javascript
     console.log(localStorage.getItem('apple-ui-theme'))
     ```

### 测试 3：主题持久化

1. 切换到深色模式

2. 刷新页面

3. 验证：
   - 页面应该保持深色模式
   - 没有闪烁（FOUC）

### 测试 4：系统主题偏好

1. 清除 localStorage：
   ```javascript
   localStorage.removeItem('apple-ui-theme')
   ```

2. 在操作系统中切换到深色模式

3. 刷新页面

4. 验证：
   - 页面应该自动使用系统的深色模式

### 测试 5：组件主题适配

检查以下组件是否正确适配主题：

#### Button 组件
```html
<!-- 浅色模式 -->
<button class="bg-apple-blue">
  <!-- 背景应该是 #007AFF -->
</button>

<!-- 深色模式 -->
<button class="bg-apple-blue">
  <!-- 背景应该是 #0A84FF -->
</button>
```

#### Badge 组件
- Success badge：绿色应该随主题变化
- Error badge：红色应该随主题变化
- Info badge：蓝色应该随主题变化

#### Alert 组件
- 所有类型的 Alert 颜色应该随主题变化

## 常见问题排查

### 问题 1：按钮颜色不变

**检查**：
```javascript
// 1. 检查 HTML 属性
console.log(document.documentElement.getAttribute('data-theme'))

// 2. 检查 CSS 变量
console.log(getComputedStyle(document.documentElement).getPropertyValue('--color-blue'))

// 3. 检查 Tailwind 类名
const button = document.querySelector('button')
console.log(button.className)
// 应该包含 'bg-apple-blue'，不应该有 'bg-apple-blue-light'
```

**解决方案**：
- 确保 HTML 有 `data-theme` 属性
- 确保组件使用 `bg-apple-blue` 而不是 `bg-apple-blue-light`

### 问题 2：主题切换有闪烁

**原因**：内联脚本没有正确执行

**检查**：
```javascript
// 查看 head 中的脚本
console.log(document.head.innerHTML)
// 应该包含主题初始化脚本
```

**解决方案**：
- 确保 `layout.tsx` 中的内联脚本在所有其他内容之前
- 检查浏览器控制台是否有 JavaScript 错误

### 问题 3：localStorage 不生效

**检查**：
```javascript
// 设置主题
localStorage.setItem('apple-ui-theme', 'dark')

// 读取主题
console.log(localStorage.getItem('apple-ui-theme'))

// 刷新页面，检查是否保持
```

**解决方案**：
- 确保浏览器允许 localStorage
- 检查是否在隐私模式下（某些浏览器会限制 localStorage）

## 自动化测试脚本

在浏览器控制台运行以下脚本进行完整测试：

```javascript
async function testThemeSystem() {
  console.log('=== 主题系统测试开始 ===\n')
  
  // 测试 1: 检查 data-theme 属性
  const theme = document.documentElement.getAttribute('data-theme')
  console.log('✓ 测试 1: data-theme 属性')
  console.log(`  当前主题: ${theme}`)
  console.assert(theme === 'light' || theme === 'dark', '主题应该是 light 或 dark')
  
  // 测试 2: 检查 CSS 变量
  const blue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
  console.log('\n✓ 测试 2: CSS 变量')
  console.log(`  --color-blue: ${blue}`)
  console.assert(blue.trim() !== '', 'CSS 变量应该有值')
  
  // 测试 3: 检查按钮
  const button = document.querySelector('.bg-apple-blue')
  if (button) {
    const bgColor = getComputedStyle(button).backgroundColor
    console.log('\n✓ 测试 3: 按钮背景色')
    console.log(`  背景色: ${bgColor}`)
    console.assert(bgColor !== 'rgba(0, 0, 0, 0)', '按钮应该有背景色')
  }
  
  // 测试 4: 检查 localStorage
  const savedTheme = localStorage.getItem('apple-ui-theme')
  console.log('\n✓ 测试 4: localStorage')
  console.log(`  保存的主题: ${savedTheme || '未设置'}`)
  
  // 测试 5: 切换主题
  console.log('\n✓ 测试 5: 主题切换')
  const newTheme = theme === 'light' ? 'dark' : 'light'
  document.documentElement.setAttribute('data-theme', newTheme)
  const newBlue = getComputedStyle(document.documentElement).getPropertyValue('--color-blue')
  console.log(`  切换到: ${newTheme}`)
  console.log(`  新的 --color-blue: ${newBlue}`)
  console.assert(newBlue !== blue, '切换主题后颜色应该改变')
  
  // 恢复原主题
  document.documentElement.setAttribute('data-theme', theme)
  
  console.log('\n=== 主题系统测试完成 ===')
}

testThemeSystem()
```

## 预期输出

```
=== 主题系统测试开始 ===

✓ 测试 1: data-theme 属性
  当前主题: light

✓ 测试 2: CSS 变量
  --color-blue: #007AFF

✓ 测试 3: 按钮背景色
  背景色: rgb(0, 122, 255)

✓ 测试 4: localStorage
  保存的主题: light

✓ 测试 5: 主题切换
  切换到: dark
  新的 --color-blue: #0A84FF

=== 主题系统测试完成 ===
```

## 总结

如果所有测试都通过，说明主题系统工作正常。如果有任何测试失败，请参考"常见问题排查"部分。