生产管理系统前端 - 瓦力0.73原型图提交
This commit is contained in:
188
src/COLOR_REPLACEMENT_GUIDE.md
Normal file
188
src/COLOR_REPLACEMENT_GUIDE.md
Normal file
@@ -0,0 +1,188 @@
|
||||
# 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"`）
|
||||
Reference in New Issue
Block a user