# AI图标使用指南

## 概述

本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。

## AI使用流程

### 1. 项目类型判断
首先判断项目类型：
- **PC端项目**: 使用 `@ant-design/icons`
- **移动端项目**: 使用 `antd-mobile-icons`

### 2. 图标查找流程
1. 根据功能需求确定图标类型
2. 在对应图标包中查找合适的图标
3. 如果图标不存在，查找替代方案
4. 使用正确的导入语法

### 3. 代码生成模板

#### PC端项目模板
```typescript
import {
  // 导航类
  HomeOutlined,
  UserOutlined,
  SettingOutlined,
  
  // 操作类
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  SearchOutlined,
  ReloadOutlined,
  
  // 状态类
  CheckOutlined,
  CloseOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  InfoCircleOutlined,
  LoadingOutlined,
  
  // 方向类
  UpOutlined,
  DownOutlined,
  LeftOutlined,
  RightOutlined,
  ArrowLeftOutlined,
  
  // 其他
  MessageOutlined,
  CalendarOutlined,
  ClockCircleOutlined,
  PictureOutlined,
  FileOutlined,
  CameraOutlined,
  QrcodeOutlined,
} from '@ant-design/icons';
```

#### 移动端项目模板
```typescript
import {
  // 导航类
  HomeOutline,
  UserOutline,
  SettingOutline,
  
  // 操作类
  AddOutline,
  EditSOutline,
  DeleteOutline,
  CopyOutline,
  SearchOutline,
  RefreshOutline,
  
  // 状态类
  CheckOutline,
  CloseOutline,
  CheckCircleOutline,
  CloseCircleOutline,
  ExclamationCircleOutline,
  InfoCircleOutline,
  LoadingOutline,
  
  // 方向类
  UpOutline,
  DownOutline,
  LeftOutline,
  RightOutline,
  
  // 其他
  MessageOutline,
  CalendarOutline,
  ClockCircleOutline,
  PictureOutline,
  FileOutline,
  CameraOutline,
  QrCodeOutline,
} from 'antd-mobile-icons';
```

## 功能到图标映射

### 基础功能映射
| 功能需求 | PC端图标 | 移动端图标 | 说明 |
|---------|---------|-----------|------|
| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 |
| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 |
| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 |
| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 |
| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 |
| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 |
| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 |
| 用户/个人 | UserOutlined | UserOutline | 用户相关 |
| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 |
| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 |
| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 |
| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 |

### 状态指示映射
| 状态需求 | PC端图标 | 移动端图标 | 说明 |
|---------|---------|-----------|------|
| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 |
| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 |
| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 |
| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 |
| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 |
| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 |

### 方向导航映射
| 方向需求 | PC端图标 | 移动端图标 | 说明 |
|---------|---------|-----------|------|
| 向上/上升 | UpOutlined | UpOutline | 向上方向 |
| 向下/下降 | DownOutlined | DownOutline | 向下方向 |
| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 |
| 向右/前进 | RightOutlined | RightOutline | 向右方向 |

### 业务功能映射
| 业务需求 | PC端图标 | 移动端图标 | 说明 |
|---------|---------|-----------|------|
| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 |
| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 |
| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 |
| 文件/文档 | FileOutlined | FileOutline | 文件功能 |
| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 |
| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 |
| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 |
| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 |
| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 |
| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 |
| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 |

## 特殊替换规则

### 移动端不存在的图标替换
| 原需求 | 替换方案 | 说明 |
|--------|----------|------|
| RiseOutlined | UpOutline | 上升趋势 |
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
| ShareAltOutlined | LinkOutline | 分享功能 |
| BarChartOutlined | PieOutline | 图表功能 |
| LineChartOutlined | PieOutline | 图表功能 |
| UserAddOutlined | UserOutline | 用户添加 |
| Progress | 自定义div | 进度条组件 |

### PC端不存在的图标替换
| 原需求 | 替换方案 | 说明 |
|--------|----------|------|
| AntOutline | HomeOutlined | 蚂蚁图标 |
| AppOutline | AppstoreOutlined | 应用图标 |

## AI代码生成示例

### 场景1: 移动端列表页面
```typescript
// AI应该生成的代码
import {
  AddOutline,        // 添加按钮
  EditSOutline,      // 编辑按钮
  DeleteOutline,     // 删除按钮
  CopyOutline,       // 复制按钮
  SearchOutline,     // 搜索框
  RefreshOutline,    // 刷新按钮
  UserOutline,       // 用户信息
  CalendarOutline,   // 时间信息
  UpOutline,         // 上升趋势（替换RiseOutlined）
} from 'antd-mobile-icons';

// 使用示例
<Button>
  <AddOutline /> 新建
</Button>
<Button>
  <EditSOutline /> 编辑
</Button>
<Button color="danger">
  <DeleteOutline /> 删除
</Button>
```

### 场景2: PC端管理页面
```typescript
// AI应该生成的代码
import {
  PlusOutlined,      // 添加按钮
  EditOutlined,      // 编辑按钮
  DeleteOutlined,    // 删除按钮
  CopyOutlined,      // 复制按钮
  SearchOutlined,    // 搜索框
  ReloadOutlined,    // 刷新按钮
  UserOutlined,      // 用户信息
  CalendarOutlined,  // 时间信息
  RiseOutlined,      // 上升趋势（PC端存在）
} from '@ant-design/icons';

// 使用示例
<Button icon={<PlusOutlined />}>新建</Button>
<Button icon={<EditOutlined />}>编辑</Button>
<Button icon={<DeleteOutlined />} danger>删除</Button>
```

## 错误检测和修正

### 常见错误模式
1. **混用图标包**: 同时导入PC端和移动端图标
2. **使用不存在的图标**: 在移动端使用PC端特有的图标
3. **命名错误**: 图标名称大小写错误
4. **导入路径错误**: 使用错误的包名

### 修正策略
1. **统一图标包**: 根据项目类型选择单一图标包
2. **查找替代**: 使用对照表查找替代图标
3. **验证存在**: 确保图标在目标包中存在
4. **测试验证**: 在代码中测试图标是否正常显示

## AI使用检查清单

### 代码生成前
- [ ] 确认项目类型（PC端/移动端）
- [ ] 选择对应的图标包
- [ ] 根据功能需求选择合适图标
- [ ] 检查图标是否存在

### 代码生成中
- [ ] 使用正确的导入语法
- [ ] 图标名称大小写正确
- [ ] 避免混用不同包的图标
- [ ] 为不存在的图标提供替代方案

### 代码生成后
- [ ] 验证图标导入正确
- [ ] 检查图标使用语法
- [ ] 确保样式设置合理
- [ ] 提供使用示例

## 更新和维护

- 定期更新图标对照表
- 记录新发现的图标差异
- 更新替换规则
- 优化AI使用流程

## 注意事项

1. **优先使用语义化图标**: 选择最能表达功能的图标
2. **保持一致性**: 在同一项目中保持图标风格一致
3. **考虑可访问性**: 为图标添加适当的aria-label
4. **性能优化**: 按需导入图标，避免全量导入
5. **版本兼容**: 注意图标包版本与UI框架版本的兼容性