功能测试指南

🎯 测试目标

验证主题切换和多语言切换功能是否正常工作。

🧪 测试步骤

1. 基础功能测试

访问以下页面，确保都能正常加载：

• ✅ 首页: http://localhost:3000
• ✅ 测试页面: http://localhost:3000/test-theme-lang

2. 主题切换测试

1. 打开浏览器开发者工具
2. 访问 http://localhost:3000/test-theme-lang
3. 点击右上角的主题切换按钮
4. 测试三种主题模式：
   • ☀️ 亮色主题
   • 🌙 暗色主题
   • 💻 跟随系统
5. 验证：
   • 主题切换是否生效
   • 页面样式是否正确更新
   • 刷新页面后主题是否保持

3. 语言切换测试

1. 在测试页面点击右上角的语言切换按钮
2. 测试两种语言：
   • 🇨🇳 中文
   • 🇺🇸 English
3. 验证：
   • 语言切换是否生效
   • 所有文本是否正确翻译
   • 刷新页面后语言是否保持

4. 持久化测试

1. 设置一个主题和语言
2. 刷新页面
3. 验证设置是否保持
4. 关闭浏览器重新打开
5. 验证设置是否仍然保持

5. 响应式测试

1. 调整浏览器窗口大小
2. 验证主题和语言切换按钮在不同屏幕尺寸下的显示
3. 在移动设备上测试触摸交互

6. 无障碍测试

1. 使用键盘导航（Tab 键）
2. 验证是否可以通过键盘切换主题和语言
3. 检查屏幕阅读器兼容性

🎨 主题效果验证

亮色主题

• 背景色：白色
• 文字色：深灰色
• 卡片背景：白色
• 边框：浅灰色

暗色主题

• 背景色：深灰色
• 文字色：浅灰色
• 卡片背景：深灰色
• 边框：深灰色

跟随系统

• 根据系统主题自动切换
• 系统主题变化时自动响应

🌍 语言效果验证

中文界面

• 所有按钮和文本显示中文
• 日期格式：中文格式
• 数字格式：中文格式

英文界面

• 所有按钮和文本显示英文
• 日期格式：英文格式
• 数字格式：英文格式

🔧 技术验证

控制台检查

1. 打开浏览器开发者工具
2. 查看 Console 标签页
3. 确保没有 JavaScript 错误
4. 确保没有 React 错误

网络检查

1. 查看 Network 标签页
2. 确保所有资源加载成功
3. 检查 API 请求是否正常

性能检查

1. 使用 Lighthouse 进行性能测试
2. 确保主题和语言切换响应迅速
3. 检查页面加载时间

🐛 常见问题排查

问题：主题切换不生效

解决方案：

1. 检查浏览器是否支持 CSS 变量
2. 检查 localStorage 是否可用
3. 检查控制台是否有错误

问题：语言切换不生效

解决方案：

1. 检查翻译文件是否正确加载
2. 检查 useApp hook 是否正常工作
3. 检查组件是否正确使用 t() 函数

问题：设置不持久化

解决方案：

1. 检查 localStorage 是否被禁用
2. 检查浏览器隐私设置
3. 检查是否有其他脚本清除 localStorage

✅ 测试完成标准

当以下所有项目都通过时，功能测试完成：

• 首页正常加载
• 测试页面正常加载
• 主题切换功能正常
• 语言切换功能正常
• 设置持久化正常
• 响应式设计正常
• 无障碍功能正常
• 无 JavaScript 错误
• 性能表现良好

🎉 测试完成

如果所有测试都通过，恭喜！主题和语言切换功能已经成功实现并正常工作。