smart-crop-ui/src/COLOR_REPLACEMENT_GUIDE.md

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 颜色

// 原来
<Icon className="w-4 h-4 text-blue-500" />

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

opacity 类保持不变

// 可以保留
className="opacity-50"

placeholder 数值

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

实际应用示例

Before (❌ 错误)

<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 (✅ 正确)

<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"）