smart-crop-ui/src/COLOR_MIGRATION_GUIDE.md

颜色迁移指南

语义化颜色系统

系统现在使用语义化的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

图标颜色映射

对于图标，使用同样的规则，但通常搭配对应的背景：

// 原来
<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)映射

// 成功状态
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 模式确保正确显示