274 lines
8.2 KiB
Markdown
274 lines
8.2 KiB
Markdown
# 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框架版本的兼容性 |