# 快速重构模式

## 使用VSCode进行批量替换

### 1. 信息展示框背景（最常见）

#### 替换模式 1.1
```
查找: className="p-3 bg-gray-50 rounded"
替换: className="p-3 bg-muted rounded"
```

#### 替换模式 1.2
```
查找: className="p-4 bg-gray-50 rounded-lg"
替换: className="p-4 bg-muted rounded-lg"
```

#### 替换模式 1.3
```
查找: className="p-4 bg-gray-50 rounded"
替换: className="p-4 bg-muted rounded"
```

#### 替换模式 1.4
```
查找: <Card className="p-4 bg-gray-50"
替换: <Card className="p-4 bg-muted"
```

### 2. 禁用输入框（重要）

```
查找: className="bg-gray-50 dark:bg-gray-800"
替换: className="bg-muted"
```

### 3. 悬停效果

#### 替换模式 3.1
```
查找: hover:bg-gray-50
替换: hover:bg-accent
```

#### 替换模式 3.2  
```
查找: hover:bg-gray-100
替换: hover:bg-accent
```

注意：如果这个元素同时有状态色（如bg-green-100），则不要替换hover部分。

### 4. 代码块背景

```
查找: <code className="text-xs bg-gray-100
替换: <code className="text-xs bg-muted
```

### 5. field-value类的手动bg覆盖

```
查找: className="field-value bg-gray-50"
替换: className="field-value"
```

## 正则表达式模式（高级）

### 模式1：背景色属性（不在状态判断中）
```regex
查找: bg-gray-50(?!\s*rounded)
使用场景：替换单独的bg-gray-50，但保留带rounded的情况（需要单独处理）
```

### 模式2：多个类名中的bg-gray-50
```regex
查找: className="([^"]*\s)bg-gray-50(\s[^"]*)"
替换: className="$1bg-muted$2"
```

## 需要人工判断的场景

以下情况**必须人工判断**，不能盲目替换：

### 场景1：状态判断中的灰色
```tsx
// ❌ 不要替换
status === '离线' ? 'bg-gray-100 text-gray-700' : ...
level === '建议' ? 'bg-gray-100 text-gray-800' : ...

// 这些是状态色，应该保留
```

### 场景2：getStatusColor等函数中
```tsx
// ❌ 不要替换函数返回的状态色
const getStatusColor = (status: string) => {
  switch (status) {
    case '离线': return 'bg-gray-100 text-gray-700'; // 保留
    case '已忽略': return 'bg-gray-100 text-gray-800'; // 保留
    default: return 'bg-gray-100 text-gray-700'; // 可能保留
  }
};
```

### 场景3：Badge组件的状态色
```tsx
// ❌ 不要替换Badge的状态色
<Badge className="bg-gray-100 text-gray-800">已忽略</Badge>
<Badge className="bg-gray-100 text-gray-700">离线</Badge>
```

## 批量替换顺序建议

1. **先替换禁用输入框**（最安全）
   ```
   bg-gray-50 dark:bg-gray-800 → bg-muted
   ```

2. **再替换信息框（p-3/p-4配合）**
   ```
   p-3 bg-gray-50 rounded → p-3 bg-muted rounded
   p-4 bg-gray-50 rounded-lg → p-4 bg-muted rounded-lg
   ```

3. **处理悬停效果**（需要排除状态元素）
   ```
   hover:bg-gray-50 → hover:bg-accent
   ```

4. **处理代码块**（可选）
   ```
   <code.*bg-gray-100 → bg-muted
   ```

5. **最后人工检查每个default case**
   ```
   在状态判断函数中，default返回的gray色可能需要改为muted相关
   ```

## 验证命令

修改后使用以下命令验证：

```bash
# 查找剩余的bg-gray-50（排除状态色）
grep -r "bg-gray-50" components/ --include="*.tsx" | grep -v "bg-gray-100 text-gray"

# 查找剩余的dark:bg-gray-800
grep -r "dark:bg-gray-800" components/ --include="*.tsx"

# 查找hover:bg-gray
grep -r "hover:bg-gray" components/ --include="*.tsx"
```

## 示例文件修改

### components/ai/AIDataCenter.tsx

#### 修改点1：设备卡片
```tsx
// 修改前
<Card className="p-4 bg-gray-50">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
      <WifiOff className="w-5 h-5 text-gray-600" />
    </div>
  </div>
</Card>

// 修改后
<Card className="p-4 bg-muted">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-muted rounded-full flex items-center justify-center">
      <WifiOff className="w-5 h-5 text-muted-foreground" />
    </div>
  </div>
</Card>
```

#### 修改点2：状态Badge（不修改）
```tsx
// 保持不变 - 这是状态色
case '离线': return 'bg-gray-100 text-gray-700';
case '待配置': return 'bg-yellow-100 text-yellow-700';
```

#### 修改点3：文件列表项
```tsx
// 修改前
<div className="flex items-center justify-between p-2 bg-gray-50 rounded">

// 修改后  
<div className="flex items-center justify-between p-2 bg-muted rounded">
```

### components/ai/AIDecisionDashboard.tsx

#### 修改点1：地块决策列表悬停
```tsx
// 修改前
<div className="flex items-center justify-between p-2 bg-gray-50 rounded hover:bg-gray-100">

// 修改后
<div className="flex items-center justify-between p-2 bg-muted rounded hover:bg-accent">
```

#### 修改点2：优先级Badge（不修改）
```tsx
// 保持不变 - 这是状态色
low: { label: '低', className: 'bg-gray-100 text-gray-800 border-gray-300' }
```

## 常见错误预防

### ❌ 错误1：过度替换
```tsx
// 错误
status === '离线' ? 'bg-muted text-muted-foreground' : ...

// 正确 - 保留状态色
status === '离线' ? 'bg-gray-100 text-gray-700' : ...
```

### ❌ 错误2：遗漏组合类
```tsx
// 错误 - 只替换了一处
<Input disabled className="bg-gray-50 dark:bg-gray-800 border-gray-200" />

// 正确 - 完整替换
<Input disabled className="bg-muted border" />
```

### ❌ 错误3：破坏默认样式
```tsx
// 错误 - default case应该仔细考虑
default: return 'bg-muted text-muted-foreground'; // 可能太弱

// 可能正确 - 保持原状态色语义
default: return 'bg-gray-100 text-gray-700';
```

## 完成标准

每个文件修改完成后应满足：

1. ✅ 没有 `bg-gray-50 dark:bg-gray-800` 组合
2. ✅ 信息展示框使用 `bg-muted`
3. ✅ 悬停效果使用 `bg-accent`（非状态元素）
4. ✅ 状态色保持不变（gray/green/red/yellow/blue等）
5. ✅ 代码在亮色和暗色主题下都显示正常
6. ✅ 所有功能正常工作

## 时间估算

- 小文件（< 500行）：5-10分钟
- 中文件（500-1000行）：10-20分钟
- 大文件（> 1000行）：20-40分钟
- 总计约106个文件：预计 8-12 小时

建议分批次完成：
- Day 1: config + Navigation（已完成）
- Day 2: AI 模块（最多修改点）
- Day 3: asset + field 模块
- Day 4: irrigation + machinery 模块  
- Day 5: operation 模块 + 全面测试
