# Tailwind 硬编码颜色类替换为 Shadcn 标准样式指南

## 核心原则

1. **禁止使用**具体数字的颜色类（如 `bg-gray-50`, `text-blue-600`, `border-red-200`）
2. **必须使用**CSS 变量类（如 `bg-muted`, `text-info`, `border-destructive`）
3. 所有颜色通过 `globals.css` 中的 CSS 变量管理，支持 Dark 模式

## 完整替换映射表

### 1. 灰色系 (Gray/Slate/Zinc/Neutral) → Muted

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-gray-50` | `bg-muted` | 柔和背景 |
| `bg-gray-100` | `bg-muted` | 柔和背景 |
| `bg-gray-200` | `bg-secondary` | 次要背景 |
| `text-gray-400` | `text-muted-foreground` | 次要文字 |
| `text-gray-500` | `text-muted-foreground` | 次要文字 |
| `text-gray-600` | `text-muted-foreground` | 次要文字 |
| `text-gray-700` | `text-foreground` | 正常文字 |
| `text-gray-800` | `text-foreground` | 正常文字 |
| `text-gray-900` | `text-foreground` | 深色文字 |
| `border-gray-200` | `border-border` | 边框 |
| `border-gray-300` | `border-border` | 边框 |

### 2. 绿色系 (Green/Emerald/Teal) → Success/Primary

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-green-50` | `bg-success-muted` | 成功背景 |
| `bg-green-100` | `bg-success-muted` | 成功背景 |
| `bg-teal-50` | `bg-primary/10` | 主题浅背景 |
| `text-green-500` | `text-success` | 成功文字 |
| `text-green-600` | `text-success` | 成功文字 |
| `text-green-700` | `text-success-muted-foreground` | 成功深色文字 |
| `text-green-800` | `text-success-muted-foreground` | 成功深色文字 |
| `text-green-900` | `text-success-muted-foreground` | 成功深色文字 |
| `text-teal-600` | `text-primary` | 主题色文字 |
| `border-green-200` | `border-success/30` | 成功边框 |
| `border-green-300` | `border-success/30` | 成功边框 |
| `border-teal-200` | `border-primary/30` | 主题边框 |
| `bg-green-600` | `bg-success` | 成功实底 |
| `hover:bg-green-700` | `hover:bg-success/90` | 悬停 |

### 3. 蓝色系 (Blue/Indigo/Cyan) → Info

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-blue-50` | `bg-info-muted` | 信息背景 |
| `bg-blue-100` | `bg-info-muted` | 信息背景 |
| `bg-indigo-50` | `bg-info-muted` | 信息背景 |
| `bg-cyan-50` | `bg-info-muted` | 信息背景 |
| `text-blue-500` | `text-info` | 信息文字 |
| `text-blue-600` | `text-info` | 信息文字 |
| `text-blue-700` | `text-info-muted-foreground` | 信息深色文字 |
| `text-blue-800` | `text-info-muted-foreground` | 信息深色文字 |
| `text-blue-900` | `text-info-muted-foreground` | 信息深色文字 |
| `text-indigo-600` | `text-info` | 信息文字 |
| `border-blue-200` | `border-info/30` | 信息边框 |
| `border-blue-300` | `border-info/30` | 信息边框 |
| `border-indigo-200` | `border-info/30` | 信息边框 |
| `bg-blue-600` | `bg-info` | 信息实底 |
| `hover:bg-blue-700` | `hover:bg-info/90` | 悬停 |

### 4. 红色系 (Red) → Destructive/Error

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-red-50` | `bg-error-muted` | 错误背景 |
| `bg-red-100` | `bg-destructive/10` | 错误背景 |
| `text-red-500` | `text-destructive` | 错误文字 |
| `text-red-600` | `text-destructive` | 错误文字 |
| `text-red-700` | `text-error-muted-foreground` | 错误深色文字 |
| `text-red-800` | `text-error-muted-foreground` | 错误深色文字 |
| `text-red-900` | `text-error-muted-foreground` | 错误深色文字 |
| `border-red-200` | `border-destructive/30` | 错误边框 |
| `border-red-300` | `border-destructive/30` | 错误边框 |

### 5. 黄色/橙色系 (Yellow/Orange/Amber) → Warning

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-yellow-50` | `bg-warning-muted` | 警告背景 |
| `bg-yellow-100` | `bg-warning-muted` | 警告背景 |
| `bg-orange-50` | `bg-warning-muted` | 警告背景 |
| `bg-amber-50` | `bg-warning-muted` | 警告背景 |
| `text-yellow-500` | `text-warning` | 警告文字 |
| `text-yellow-600` | `text-warning` | 警告文字 |
| `text-orange-500` | `text-warning` | 警告文字 |
| `text-orange-600` | `text-warning` | 警告文字 |
| `text-orange-800` | `text-warning-muted-foreground` | 警告深色文字 |
| `text-orange-900` | `text-warning-muted-foreground` | 警告深色文字 |
| `text-amber-600` | `text-warning` | 警告文字 |
| `text-amber-800` | `text-warning-muted-foreground` | 警告深色文字 |
| `text-amber-900` | `text-warning-muted-foreground` | 警告深色文字 |
| `border-yellow-200` | `border-warning/30` | 警告边框 |
| `border-yellow-300` | `border-warning/30` | 警告边框 |
| `border-orange-200` | `border-warning/30` | 警告边框 |
| `border-amber-200` | `border-warning/30` | 警告边框 |
| `border-amber-300` | `border-warning/30` | 警告边框 |

### 6. 紫色/粉色系 (Purple/Pink/Violet) → Accent

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-purple-50` | `bg-accent` | 强调背景 |
| `bg-purple-100` | `bg-accent` | 强调背景 |
| `bg-pink-50` | `bg-accent` | 强调背景 |
| `text-purple-500` | `text-accent-foreground` | 强调文字 |
| `text-purple-600` | `text-accent-foreground` | 强调文字 |
| `text-purple-700` | `text-accent-foreground` | 强调文字 |
| `text-purple-800` | `text-accent-foreground` | 强调文字 |
| `text-purple-900` | `text-accent-foreground` | 强调文字 |
| `border-purple-200` | `border-accent` | 强调边框 |

### 7. 白色 → Card/Popover

| 硬编码类 | 替换为 | 用途 |
|---------|-------|------|
| `bg-white` | `bg-card` | 卡片背景 |
| `bg-white/95` | `bg-card/95` | 半透明卡片 |

### 8. 渐变背景替换

| 硬编码类 | 替换为 |
|---------|-------|
| `bg-gradient-to-r from-green-50 to-emerald-50 border-green-200` | `bg-gradient-to-r from-success-muted/50 to-primary/10 border-success/30` |
| `bg-gradient-to-r from-blue-50 to-cyan-50 border-blue-200` | `bg-gradient-to-r from-info-muted/50 to-info-muted border-info/30` |
| `bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200` | `bg-gradient-to-r from-accent/50 to-accent/30 border-accent` |
| `bg-gradient-to-r from-indigo-50 to-purple-50 border-indigo-200` | `bg-gradient-to-r from-info-muted/50 to-accent/50 border-info/30` |
| `bg-gradient-to-br from-gray-50 to-gray-100` | `bg-gradient-to-br from-muted to-secondary` |

### 9. 特殊情况

#### Icon 颜色
```tsx
// 原来
<Icon className="w-4 h-4 text-blue-500" />

// 现在
<Icon className="w-4 h-4 text-info" />
```

#### opacity 类保持不变
```tsx
// 可以保留
className="opacity-50"
```

#### placeholder 数值
```tsx
// 可以保留，这些是输入框的占位符，不是颜色
placeholder="192.168.1.100"
placeholder="0-100"
```

## 实际应用示例

### Before (❌ 错误)
```tsx
<div className="p-4 bg-gray-50 rounded-lg">
  <h3 className="text-gray-900">标题</h3>
  <p className="text-sm text-gray-600">描述</p>
  <Badge className="bg-green-100 text-green-700 border-green-300">
    成功
  </Badge>
</div>
```

### After (✅ 正确)
```tsx
<div className="p-4 bg-muted rounded-lg">
  <h3 className="text-foreground">标题</h3>
  <p className="text-sm text-muted-foreground">描述</p>
  <Badge className="bg-success text-success-foreground">
    成功
  </Badge>
</div>
```

## 注意事项

1. **不要创建或修改** `src/index.css`
2. **只使用** `globals.css` 中定义的 CSS 变量
3. **测试** Dark 模式确保正常显示
4. **保持** 不透明度类（`opacity-*`）
5. **保留** 数字占位符（`placeholder="100"`）