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框架版本的兼容性
|