生产管理系统前端 - 瓦力0.71原型图更新
This commit is contained in:
243
src/THEME_REFACTOR_SUMMARY.md
Normal file
243
src/THEME_REFACTOR_SUMMARY.md
Normal file
@@ -0,0 +1,243 @@
|
||||
# 主题重构总结
|
||||
|
||||
## 已完成的工作
|
||||
|
||||
### 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
|
||||
|
||||
#### 组件样式更新
|
||||
```css
|
||||
/* 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 ✅
|
||||
```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 ✅
|
||||
```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：信息展示框
|
||||
```tsx
|
||||
// 查找
|
||||
<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：悬停效果
|
||||
```tsx
|
||||
// 查找
|
||||
hover:bg-gray-50
|
||||
hover:bg-gray-100
|
||||
|
||||
// 替换为（仅非状态色场景）
|
||||
hover:bg-accent
|
||||
```
|
||||
|
||||
#### 模式3：代码块（可选修改）
|
||||
```tsx
|
||||
// 查找
|
||||
<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（不修改）
|
||||
```tsx
|
||||
// 保持不变 - 这些是状态色
|
||||
bg-gray-100 text-gray-800 // 用于"离线"、"已忽略"等中性状态
|
||||
bg-gray-100 text-gray-700 // 用于"禁用"、"建议"等状态
|
||||
```
|
||||
|
||||
## 修改策略
|
||||
|
||||
### 方案 A：手动逐文件修改（推荐）
|
||||
优点：
|
||||
- 可以准确判断每个场景
|
||||
- 避免误改状态色
|
||||
- 保证代码质量
|
||||
|
||||
步骤：
|
||||
1. 从核心功能文件开始（config, Navigation等）
|
||||
2. 逐个模块处理（AI → 资产 → 地块 等）
|
||||
3. 每个文件修改后测试主题切换效果
|
||||
|
||||
### 方案 B：搜索替换 + 人工review
|
||||
使用正则表达式批量替换，然后review：
|
||||
|
||||
```bash
|
||||
# 信息框背景（排除状态描述）
|
||||
查找: className="([^"]*?)bg-gray-50([^"]*?)"
|
||||
需人工判断是否为状态色
|
||||
|
||||
# 悬停效果
|
||||
查找: hover:bg-gray-(50|100)
|
||||
替换: hover:bg-accent
|
||||
|
||||
# 代码块背景
|
||||
查找: <code[^>]*bg-gray-100
|
||||
替换: bg-muted
|
||||
```
|
||||
|
||||
## 验证清单
|
||||
|
||||
修改完成后需要验证：
|
||||
|
||||
### 功能验证
|
||||
- [ ] 亮色主题显示正常
|
||||
- [ ] 暗色主题显示正常
|
||||
- [ ] 主题切换流畅无闪烁
|
||||
- [ ] 所有状态色正确显示（绿/红/黄/橙/蓝等）
|
||||
|
||||
### 视觉验证
|
||||
- [ ] 信息展示框背景适配主题
|
||||
- [ ] 禁用输入框背景适配主题
|
||||
- [ ] 悬停效果明显且美观
|
||||
- [ ] 文本对比度符合可访问性要求
|
||||
- [ ] 卡片层次感清晰
|
||||
|
||||
### 模块验证
|
||||
- [ ] 个人中心模块
|
||||
- [ ] 水肥机管理
|
||||
- [ ] 智慧灌溉
|
||||
- [ ] AI决策系统
|
||||
- [ ] 资产管理
|
||||
- [ ] 地块管理
|
||||
- [ ] 农机管理
|
||||
- [ ] 农事操作
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 1. 保留状态色
|
||||
以下className包含状态语义，**不要修改**：
|
||||
```tsx
|
||||
// 表示"离线"状态
|
||||
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. 测试充分性
|
||||
每个模块修改后都应该：
|
||||
1. 在亮色模式下检查
|
||||
2. 在暗色模式下检查
|
||||
3. 切换主题看是否流畅
|
||||
|
||||
### 4. 渐进式修改
|
||||
建议按模块逐步修改，而不是一次性修改所有文件，这样便于定位问题。
|
||||
|
||||
## 预期效果
|
||||
|
||||
重构完成后：
|
||||
1. ✅ 所有背景、文本、边框色都使用shadcn主题变量
|
||||
2. ✅ 主题切换时所有元素都能正确适配
|
||||
3. ✅ 状态色在两种主题下都清晰可辨
|
||||
4. ✅ 保持绿色农业主题的视觉风格
|
||||
5. ✅ 代码更简洁，维护性更好
|
||||
|
||||
## 下一步行动
|
||||
|
||||
1. 根据修改优先级列表，逐个处理各模块文件
|
||||
2. 每修改完一个模块，提交一次代码
|
||||
3. 全部完成后进行全面测试
|
||||
4. 更新系统文档
|
||||
|
||||
## 相关文档
|
||||
|
||||
- `/THEME_REFACTOR_GUIDE.md` - 详细的修改指南和示例
|
||||
- `/styles/globals.css` - 主题变量定义
|
||||
- `/components/ThemeProvider.tsx` - 主题管理组件
|
||||
Reference in New Issue
Block a user