生产管理系统前端 - 瓦力0.73原型图提交

src/COLOR_MIGRATION_GUIDE.md

@@ -0,0 +1,154 @@
+# 颜色迁移指南
+
+## 语义化颜色系统
+
+系统现在使用语义化的CSS变量，而不是硬编码的Tailwind颜色类。
+
+### 可用的语义化颜色
+
+#### 1. 成功/已完成 (绿色系)
+- `bg-success-muted` - 柔和背景 (替代: bg-green-50, bg-green-100)
+- `text-success-muted-foreground` - 柔和文字 (替代: text-green-600, text-green-700, text-green-800)
+- `text-success` - 强调文字 (替代: text-green-600)
+- `border-success/30` - 边框 (替代: border-green-200, border-green-300)
+
+#### 2. 警告/待处理 (黄色/橙色系)
+- `bg-warning-muted` - 柔和背景 (替代: bg-yellow-50, bg-yellow-100, bg-orange-50, bg-orange-100)
+- `text-warning-muted-foreground` - 柔和文字 (替代: text-yellow-600, text-yellow-700, text-orange-600, text-orange-700)
+- `text-warning` - 强调文字 (替代: text-yellow-600, text-orange-600)
+- `border-warning/30` - 边框 (替代: border-yellow-200, border-orange-200)
+
+#### 3. 信息/说明 (蓝色系)
+- `bg-info-muted` - 柔和背景 (替代: bg-blue-50, bg-blue-100)
+- `text-info-muted-foreground` - 柔和文字 (替代: text-blue-600, text-blue-700, text-blue-800, text-blue-900)
+- `text-info` - 强调文字 (替代: text-blue-600)
+- `border-info/30` - 边框 (替代: border-blue-200)
+
+#### 4. 错误/紧急 (红色系)
+- `bg-error-muted` 或 `bg-destructive/10` - 柔和背景 (替代: bg-red-50, bg-red-100)
+- `text-error-muted-foreground` 或 `text-destructive` - 柔和文字 (替代: text-red-600, text-red-700, text-red-800)
+- `text-error` - 强调文字 (替代: text-red-600)
+- `border-error/30` 或 `border-destructive/30` - 边框 (替代: border-red-200)
+
+#### 5. 中性/次要 (灰色系 - 已有的shadcn变量)
+- `bg-muted` - 柔和背景 (替代: bg-gray-50, bg-gray-100)
+- `text-muted-foreground` - 柔和文字 (替代: text-gray-500, text-gray-600, text-gray-700)
+- `bg-secondary` - 次要背景
+- `text-secondary-foreground` - 次要文字
+- `border-border` 或 `border` - 边框
+
+#### 6. 主题色 (绿色 - 农业主题)
+- `bg-primary` - 主题背景
+- `text-primary` - 主题文字
+- `text-primary-foreground` - 主题前景文字 (在primary背景上)
+- `border-primary` - 主题边框
+
+### 替换规则
+
+#### 绿色 (成功、活跃状态)
+```
+bg-green-50, bg-green-100 → bg-success-muted
+text-green-600, text-green-700, text-green-800 → text-success-muted-foreground
+border-green-200, border-green-300 → border-success/30
+```
+
+#### 蓝色 (信息、说明)
+```
+bg-blue-50, bg-blue-100 → bg-info-muted
+text-blue-600, text-blue-700, text-blue-800, text-blue-900 → text-info-muted-foreground
+border-blue-200 → border-info/30
+```
+
+#### 黄色 (警告、注意)
+```
+bg-yellow-50, bg-yellow-100 → bg-warning-muted
+text-yellow-600, text-yellow-700, text-yellow-800 → text-warning-muted-foreground
+border-yellow-200 → border-warning/30
+```
+
+#### 橙色 (警告、待分派)
+```
+bg-orange-50, bg-orange-100 → bg-warning-muted
+text-orange-600, text-orange-700 → text-warning-muted-foreground
+border-orange-200 → border-warning/30
+```
+
+#### 红色 (错误、病虫害、紧急)
+```
+bg-red-50, bg-red-100 → bg-error-muted 或 bg-destructive/10
+text-red-600, text-red-700, text-red-800 → text-error-muted-foreground 或 text-destructive
+border-red-200 → border-error/30 或 border-destructive/30
+border-l-red-500 → border-l-destructive
+```
+
+#### 紫色 (特殊功能)
+```
+bg-purple-50, bg-purple-100 → bg-accent 或 bg-secondary
+text-purple-600, text-purple-700 → text-accent-foreground
+border-purple-200 → border-border
+```
+
+#### 青色/Teal (可映射到info或primary)
+```
+bg-cyan-50, bg-teal-50 → bg-info-muted 或 bg-primary/10
+text-cyan-800, text-teal-600 → text-info-muted-foreground 或 text-primary
+```
+
+### 图标颜色映射
+
+对于图标，使用同样的规则，但通常搭配对应的背景：
+
+```tsx
+// 原来
+<Bug className="w-8 h-8 text-red-600" />
+<div className="p-4 bg-red-100 rounded-lg">
+
+// 现在
+<Bug className="w-8 h-8 text-error" />
+<div className="p-4 bg-error-muted rounded-lg">
+```
+
+### 状态徽章(Badge)映射
+
+```tsx
+// 成功状态
+className="bg-success text-success-foreground"
+
+// 警告状态
+className="bg-warning text-warning-foreground"
+
+// 错误状态
+className="bg-destructive text-destructive-foreground"
+
+// 信息状态
+className="bg-info text-info-foreground"
+
+// 中性状态
+className="bg-secondary text-secondary-foreground"
+```
+
+### 边框颜色映射
+
+```
+border-l-4 border-l-green-500 → border-l-4 border-l-success
+border-l-4 border-l-red-500 → border-l-4 border-l-destructive
+border-l-4 border-l-orange-500 → border-l-4 border-l-warning
+border-l-4 border-l-blue-500 → border-l-4 border-l-info
+```
+
+## 需要迁移的主要组件
+
+1. OperationIssue.tsx - 农事问题协同
+2. OperationPlanning.tsx - 农事计划
+3. OperationExecution.tsx - 农事执行
+4. OperationPerformance.tsx - 绩效评估
+5. 各种仪表盘组件
+6. 所有表单和卡片组件
+
+## 注意事项
+
+1. **不要创建或修改 index.css**
+2. **不要使用具体颜色的Tailwind类** (如 text-teal-600)
+3. **优先使用语义化变量** (如 text-success)
+4. **图标和文字保持颜色一致性**
+5. **测试 dark 模式确保正确显示**