6.6 KiB
6.6 KiB
主题重构总结
已完成的工作
1. globals.css 重构 ✅
移除内容
- 移除了所有
.dark .bg-gray-*非状态色定义 - 移除了所有
.dark .text-gray-*非状态色定义 - 移除了所有
.dark .border-gray-*非状态色定义
保留内容
- ✅ 绿色状态（成功/激活）：bg-green-50/100, text-green-600/700/800, border-green-200/300
- ✅ 红色状态（错误/危险）：bg-red-50/100, text-red-500/600/700/800, border-red-200
- ✅ 黄色状态（警告）：bg-yellow-50/100, text-yellow-500/600/700/800, border-yellow-200
- ✅ 橙色状态（警报）：bg-orange-50/100, text-orange-600/700/800, border-orange-200
- ✅ 蓝色状态（信息）：bg-blue-50/100/950/30, text-blue-300/400/600/700/800/900, border-blue-200/900
- ✅ 紫色状态：bg-purple-50/100, text-purple-600/700/800/900, border-purple-200
- ✅ 粉色状态：bg-pink-50/100, text-pink-700/800
- ✅ 青色状态：bg-cyan-50, text-cyan-800
组件样式更新
/* field-value 组件 - 使用标准变量 */
.field-value {
@apply mt-2 text-base text-foreground px-3 py-2 bg-muted rounded-md min-h-[2.5rem] flex items-center transition-colors;
}
2. 业务代码重构
已修改文件
/components/config/PersonalInfo.tsx ✅
// 企业名称输入框 - 禁用状态背景
- className="bg-gray-50 dark:bg-gray-800"
+ className="bg-muted"
// 部门输入框 - 禁用状态背景
- className="bg-gray-50 dark:bg-gray-800"
+ className="bg-muted"
/components/Navigation.tsx ✅
// 消息列表项悬停效果
- className="hover:bg-gray-50"
+ className="hover:bg-accent"
需要继续修改的文件
高优先级文件（核心功能）
1. AI 模块文件（16个文件，106+处修改点）
需要区分：
- 状态色（保留）：表示"离线"、"已忽略"、"禁用"、"建议"等状态的
bg-gray-100 text-gray-700/800 - 信息框（修改）：
bg-gray-50→bg-muted - 悬停（修改）：
hover:bg-gray-50→hover:bg-accent - 代码块（可选）：
code标签的bg-gray-100可改为bg-muted
关键文件：
/components/ai/AIAlertManagement.tsx- 19处/components/ai/AIDataCenter.tsx- 18处/components/ai/AIDecisionGeneration.tsx- 12处/components/ai/AIAuditLog.tsx- 11处/components/ai/AIDecisionLog.tsx- 9处/components/ai/AIDecisionSimulation.tsx- 8处/components/ai/AIDecisionDetail.tsx- 7处/components/ai/AIDecisionSupport.tsx- 7处/components/ai/AIDeviceControl.tsx- 6处- 其他AI组件
2. 资产管理模块
搜索并修改asset目录下的文件
3. 地块管理模块
搜索并修改field目录下的文件
4. 灌溉模块
搜索并修改irrigation目录下的文件
5. 农机管理模块
搜索并修改machinery目录下的文件
6. 农事操作模块
搜索并修改operation目录下的文件
7. 配置管理模块
搜索并修改config目录下的文件
修改模式示例
模式1：信息展示框
// 查找
<div className="p-3 bg-gray-50 rounded">
<div className="p-4 bg-gray-50 rounded-lg">
<Card className="p-4 bg-gray-50">
// 替换为
<div className="p-3 bg-muted rounded">
<div className="p-4 bg-muted rounded-lg">
<Card className="p-4 bg-muted">
模式2：悬停效果
// 查找
hover:bg-gray-50
hover:bg-gray-100
// 替换为（仅非状态色场景）
hover:bg-accent
模式3：代码块（可选修改）
// 查找
<code className="text-xs bg-gray-100 px-2 py-1 rounded">
// 替换为
<code className="text-xs bg-muted px-2 py-1 rounded">
模式4：状态Badge（不修改）
// 保持不变 - 这些是状态色
bg-gray-100 text-gray-800 // 用于"离线"、"已忽略"等中性状态
bg-gray-100 text-gray-700 // 用于"禁用"、"建议"等状态
修改策略
方案 A：手动逐文件修改（推荐）
优点：
- 可以准确判断每个场景
- 避免误改状态色
- 保证代码质量
步骤：
- 从核心功能文件开始（config, Navigation等）
- 逐个模块处理（AI → 资产 → 地块 等）
- 每个文件修改后测试主题切换效果
方案 B：搜索替换 + 人工review
使用正则表达式批量替换，然后review：
# 信息框背景（排除状态描述）
查找: className="([^"]*?)bg-gray-50([^"]*?)"
需人工判断是否为状态色
# 悬停效果
查找: hover:bg-gray-(50|100)
替换: hover:bg-accent
# 代码块背景
查找: <code[^>]*bg-gray-100
替换: bg-muted
验证清单
修改完成后需要验证：
功能验证
- 亮色主题显示正常
- 暗色主题显示正常
- 主题切换流畅无闪烁
- 所有状态色正确显示（绿/红/黄/橙/蓝等）
视觉验证
- 信息展示框背景适配主题
- 禁用输入框背景适配主题
- 悬停效果明显且美观
- 文本对比度符合可访问性要求
- 卡片层次感清晰
模块验证
- 个人中心模块
- 水肥机管理
- 智慧灌溉
- AI决策系统
- 资产管理
- 地块管理
- 农机管理
- 农事操作
注意事项
1. 保留状态色
以下className包含状态语义，不要修改：
// 表示"离线"状态
getStatusColor(status) {
case '离线': return 'bg-gray-100 text-gray-700';
}
// 表示"已忽略"状态
status === '已忽略' ? 'bg-gray-100 text-gray-800' : ...
// 表示"禁用"状态
status === '禁用' ? 'bg-gray-100 text-gray-700' : ...
// 表示"建议"级别
level === '建议' ? 'bg-gray-100 text-gray-700' : ...
2. 代码块可选修改
<code> 标签的 bg-gray-100 可以改为 bg-muted，但不是必需的。
3. 测试充分性
每个模块修改后都应该：
- 在亮色模式下检查
- 在暗色模式下检查
- 切换主题看是否流畅
4. 渐进式修改
建议按模块逐步修改，而不是一次性修改所有文件，这样便于定位问题。
预期效果
重构完成后：
- ✅ 所有背景、文本、边框色都使用shadcn主题变量
- ✅ 主题切换时所有元素都能正确适配
- ✅ 状态色在两种主题下都清晰可辨
- ✅ 保持绿色农业主题的视觉风格
- ✅ 代码更简洁，维护性更好
下一步行动
- 根据修改优先级列表，逐个处理各模块文件
- 每修改完一个模块，提交一次代码
- 全部完成后进行全面测试
- 更新系统文档
相关文档
/THEME_REFACTOR_GUIDE.md- 详细的修改指南和示例/styles/globals.css- 主题变量定义/components/ThemeProvider.tsx- 主题管理组件