# 批量颜色类替换脚本

## 问题概述

系统中仍有100+处使用硬编码的 Tailwind 颜色类，需要批量替换为 shadcn 的 CSS 变量类。

## 需要替换的模式

### 1. Icon 颜色类

```
text-blue-500 → text-info
text-green-500 → text-success
text-purple-500 → text-accent-foreground
text-orange-500 → text-warning
text-red-500 → text-destructive
text-yellow-500 → text-warning
text-gray-400 → text-muted-foreground
text-gray-500 → text-muted-foreground
text-gray-600 → text-muted-foreground
text-indigo-600 → text-info
```

### 2. 背景颜色类

```
bg-gray-50 → bg-muted
bg-gray-100 → bg-muted  
bg-white → bg-card
bg-white/95 → bg-card/95
```

### 3. 文本颜色类

```
text-gray-700 → text-foreground
text-gray-800 → text-foreground
text-gray-900 → text-foreground
text-blue-700 → text-info-muted-foreground
text-blue-800 → text-info-muted-foreground
text-blue-900 → text-info-muted-foreground
text-green-700 → text-success-muted-foreground
text-green-800 → text-success-muted-foreground
text-green-900 → text-success-muted-foreground
text-orange-800 → text-warning-muted-foreground
text-orange-900 → text-warning-muted-foreground
text-amber-800 → text-warning-muted-foreground
text-amber-900 → text-warning-muted-foreground
text-red-900 → text-error-muted-foreground
text-purple-900 → text-accent-foreground
```

### 4. Badge/Card 颜色类

```
bg-gray-50 text-gray-700 border-gray-300 → bg-muted text-muted-foreground border-border
bg-green-100 text-green-700 → bg-success/10 text-success
bg-blue-50 text-blue-700 border-blue-300 → bg-info-muted text-info-muted-foreground border-info/30
```

### 5. 渐变背景

```
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
bg-amber-50 border-amber-300 → bg-warning-muted border-warning/30
bg-amber-50 border-amber-200 → bg-warning-muted border-warning/30
```

### 6. 按钮背景

```
bg-blue-600 hover:bg-blue-700 → bg-info hover:bg-info/90
bg-green-600 hover:bg-green-700 → bg-success hover:bg-success/90
```

### 7. 边框颜色

```
border-gray-200 → border-border
border-gray-300 → border-border
border-yellow-200 → border-warning/30
border-yellow-300 → border-warning/30
```

### 8. Special Cases

```
bg-white rounded border border-yellow-300 → bg-card rounded border border-warning/30
bg-white rounded border border-yellow-200 → bg-card rounded border border-warning/30
```

## 受影响的文件列表

根据搜索结果，主要文件包括：

1. /components/ai/AIAuditLog.tsx ✅(已部分修复)
2. /components/ai/AIBusinessFusion.tsx
3. /components/ai/AIBusinessFusion_NEW.tsx ✅(已部分修复)
4. /components/ai/AIDataCenter.tsx
5. /components/ai/AIDecisionApplication.tsx
6. /components/ai/AIDecisionDashboard.tsx
7. /components/ai/AIDecisionDetail.tsx
8. /components/ai/AIDecisionGeneration.tsx
9. /components/ai/AIDecisionLog.tsx
10. /components/ai/AIDecisionSimulation.tsx

## 建议的处理流程

### 方法1: 使用文本编辑器的批量替换功能

在VS Code中：
1. 打开"查找和替换" (Ctrl+H)
2. 勾选"使用正则表达式"
3. 逐个执行以下替换（在 `components/**/*.tsx` 范围内）：

```regex
查找: className="([^"]*)\btext-blue-500\b([^"]*)"
替换: className="$1text-info$2"

查找: className="([^"]*)\btext-green-500\b([^"]*)"
替换: className="$1text-success$2"

查找: className="([^"]*)\btext-purple-500\b([^"]*)"
替换: className="$1text-accent-foreground$2"

查找: className="([^"]*)\btext-orange-500\b([^"]*)"
替换: className="$1text-warning$2"

查找: className="([^"]*)\btext-yellow-500\b([^"]*)"
替换: className="$1text-warning$2"

查找: className="([^"]*)\btext-red-500\b([^"]*)"
替换: className="$1text-destructive$2"

查找: className="([^"]*)\btext-gray-(400|500|600)\b([^"]*)"
替换: className="$1text-muted-foreground$3"

查找: className="([^"]*)\btext-indigo-600\b([^"]*)"
替换: className="$1text-info$2"

查找: \bbg-gray-50\b
替换: bg-muted

查找: \bbg-gray-100\b
替换: bg-muted

查找: \btext-gray-700\b
替换: text-foreground

查找: \btext-gray-900\b
替换: text-foreground

查找: \btext-blue-900\b
替换: text-info-muted-foreground

查找: \btext-green-(700|800|900)\b
替换: text-success-muted-foreground

查找: \btext-orange-(800|900)\b
替换: text-warning-muted-foreground

查找: \btext-amber-(800|900)\b
替换: text-warning-muted-foreground

查找: \btext-red-900\b
替换: text-error-muted-foreground

查找: \btext-purple-900\b
替换: text-accent-foreground

查找: 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

查找: bg-amber-50 border-amber-(200|300)
替换: bg-warning-muted border-warning/30

查找: bg-blue-600 hover:bg-blue-700
替换: bg-info hover:bg-info/90

查找: bg-green-600 hover:bg-green-700
替换: bg-success hover:bg-success/90

查找: \bborder-gray-(200|300)\b
替换: border-border

查找: \bborder-yellow-(200|300)\b
替换: border-warning/30

查找: bg-white rounded border border-yellow-(200|300)
替换: bg-card rounded border border-warning/30

查找: bg-gray-50 text-gray-700 border-gray-300
替换: bg-muted text-muted-foreground border-border

查找: bg-blue-50 text-blue-700 border-blue-300
替换: bg-info-muted text-info-muted-foreground border-info/30

查找: bg-green-100 text-green-700
替换: bg-success/10 text-success

查找: \bbg-white\b(?!/)
替换: bg-card

查找: bg-white/95
替换: bg-card/95

查找: \btext-indigo-600\b
替换: text-info

查找: border-indigo-200
替换: border-info/30

查找: className="w-4 h-4 text-gray-400"
替换: className="w-4 h-4 text-muted-foreground"

查找: className="([^"]*)\btext-gray-400\b([^"]*)"
替换: className="$1text-muted-foreground$2"
```

### 方法2: 手动逐文件检查（推荐）

对于关键文件，建议手动检查和替换以确保准确性。

## 验证步骤

替换完成后：
1. 检查编译是否通过
2. 在浏览器中测试 Light 模式显示
3. 切换到 Dark 模式测试
4. 确保所有颜色都能正常切换

## 注意事项

1. **不要替换** placeholder 中的数字（如 `placeholder="192.168.1.100"`）
2. **不要替换** opacity 值（如 `opacity-50`）
3. **保留** 组件内部已经正确使用的语义化颜色类
4. **测试** 替换后的效果，确保视觉一致性
