# 颜色迁移指南

## 语义化颜色系统

系统现在使用语义化的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 模式确保正确显示**