205 lines
6.9 KiB
Markdown
205 lines
6.9 KiB
Markdown
|
# 详细图标对照表
|
|||
|
|
|
|||
|
|
## 基础图标对照
|
|||
|
|
|
|||
|
|
### 导航类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 首页 | HomeOutlined | HomeOutline | ✅ |
|
|||
|
|
| 返回 | ArrowLeftOutlined | LeftOutline | ✅ |
|
|||
|
|
| 菜单 | MenuOutlined | MenuOutline | ✅ |
|
|||
|
|
| 设置 | SettingOutlined | SettingOutline | ✅ |
|
|||
|
|
| 用户 | UserOutlined | UserOutline | ✅ |
|
|||
|
|
| 个人中心 | UserOutlined | UserOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 操作类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 添加 | PlusOutlined | AddOutline | ✅ |
|
|||
|
|
| 编辑 | EditOutlined | EditSOutline | ✅ |
|
|||
|
|
| 删除 | DeleteOutlined | DeleteOutline | ✅ |
|
|||
|
|
| 复制 | CopyOutlined | CopyOutline | ✅ |
|
|||
|
|
| 保存 | SaveOutlined | SaveOutline | ✅ |
|
|||
|
|
| 刷新 | ReloadOutlined | RefreshOutline | ✅ |
|
|||
|
|
| 搜索 | SearchOutlined | SearchOutline | ✅ |
|
|||
|
|
| 关闭 | CloseOutlined | CloseOutline | ✅ |
|
|||
|
|
| 确认 | CheckOutlined | CheckOutline | ✅ |
|
|||
|
|
| 取消 | CloseOutlined | CloseOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 状态类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ |
|
|||
|
|
| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ |
|
|||
|
|
| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ |
|
|||
|
|
| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ |
|
|||
|
|
| 加载 | LoadingOutlined | LoadingOutline | ✅ |
|
|||
|
|
| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 方向类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 向上 | UpOutlined | UpOutline | ✅ |
|
|||
|
|
| 向下 | DownOutlined | DownOutline | ✅ |
|
|||
|
|
| 向左 | LeftOutlined | LeftOutline | ✅ |
|
|||
|
|
| 向右 | RightOutlined | RightOutline | ✅ |
|
|||
|
|
| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ |
|
|||
|
|
| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 通信类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 消息 | MessageOutlined | MessageOutline | ✅ |
|
|||
|
|
| 邮件 | MailOutlined | MailOutline | ✅ |
|
|||
|
|
| 电话 | PhoneOutlined | PhoneOutline | ✅ |
|
|||
|
|
| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ |
|
|||
|
|
| 语音 | AudioOutlined | AudioOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 媒体类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 图片 | PictureOutlined | PictureOutline | ✅ |
|
|||
|
|
| 文件 | FileOutlined | FileOutline | ✅ |
|
|||
|
|
| 文件夹 | FolderOutlined | FolderOutline | ✅ |
|
|||
|
|
| 相机 | CameraOutlined | CameraOutline | ✅ |
|
|||
|
|
| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 时间类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 日历 | CalendarOutlined | CalendarOutline | ✅ |
|
|||
|
|
| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ |
|
|||
|
|
| 历史 | HistoryOutlined | HistoryOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 数据类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 统计 | BarChartOutlined | BarChartOutline | ✅ |
|
|||
|
|
| 饼图 | PieChartOutlined | PieChartOutline | ✅ |
|
|||
|
|
| 折线图 | LineChartOutlined | LineChartOutline | ✅ |
|
|||
|
|
| 表格 | TableOutlined | TableOutline | ✅ |
|
|||
|
|
| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ |
|
|||
|
|
|
|||
|
|
## 特殊图标对照
|
|||
|
|
|
|||
|
|
### 业务相关
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 设备 | MobileOutlined | MobileOutline | ✅ |
|
|||
|
|
| 微信 | WechatOutlined | WechatOutline | ✅ |
|
|||
|
|
| 群组 | TeamOutlined | TeamOutline | ✅ |
|
|||
|
|
| 客户 | UserAddOutlined | UserAddOutline | ❌ |
|
|||
|
|
| 订单 | ShoppingOutlined | ShoppingOutline | ✅ |
|
|||
|
|
| 支付 | PayCircleOutlined | PayCircleOutline | ✅ |
|
|||
|
|
|
|||
|
|
### 工具类
|
|||
|
|
| 功能 | PC端 | 移动端 | 状态 |
|
|||
|
|
|------|------|--------|------|
|
|||
|
|
| 工具 | ToolOutlined | ToolOutline | ✅ |
|
|||
|
|
| 配置 | SettingOutlined | SettingOutline | ✅ |
|
|||
|
|
| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ |
|
|||
|
|
| 反馈 | MessageOutlined | MessageOutline | ✅ |
|
|||
|
|
| 分享 | ShareAltOutlined | ShareOutline | ❌ |
|
|||
|
|
|
|||
|
|
## 不存在的图标替换方案
|
|||
|
|
|
|||
|
|
### PC端存在但移动端不存在的图标
|
|||
|
|
| PC端图标 | 推荐替换 | 说明 |
|
|||
|
|
|----------|----------|------|
|
|||
|
|
| UserAddOutlined | UserOutline | 用户添加功能 |
|
|||
|
|
| ShareAltOutlined | LinkOutline | 分享功能 |
|
|||
|
|
| RiseOutlined | UpOutline | 上升趋势 |
|
|||
|
|
| ThumbsUpOutlined | LikeOutline | 点赞功能 |
|
|||
|
|
| BarChartOutlined | PieOutline | 图表功能 |
|
|||
|
|
| LineChartOutlined | PieOutline | 图表功能 |
|
|||
|
|
|
|||
|
|
### 移动端存在但PC端不存在的图标
|
|||
|
|
| 移动端图标 | 推荐替换 | 说明 |
|
|||
|
|
|------------|----------|------|
|
|||
|
|
| AntOutline | HomeOutlined | 蚂蚁图标 |
|
|||
|
|
| AppOutline | AppstoreOutlined | 应用图标 |
|
|||
|
|
|
|||
|
|
## 使用规范
|
|||
|
|
|
|||
|
|
### 1. 导入规范
|
|||
|
|
```typescript
|
|||
|
|
// PC端项目
|
|||
|
|
import {
|
|||
|
|
HomeOutlined,
|
|||
|
|
UserOutlined,
|
|||
|
|
SettingOutlined,
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
|
|||
|
|
// 移动端项目
|
|||
|
|
import {
|
|||
|
|
HomeOutline,
|
|||
|
|
UserOutline,
|
|||
|
|
SettingOutline,
|
|||
|
|
} from 'antd-mobile-icons';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 命名规范
|
|||
|
|
- PC端：使用 `Outlined` 后缀
|
|||
|
|
- 移动端：使用 `Outline` 后缀
|
|||
|
|
- 保持语义化命名
|
|||
|
|
|
|||
|
|
### 3. 使用建议
|
|||
|
|
- 优先使用语义明确的图标
|
|||
|
|
- 保持图标风格一致性
|
|||
|
|
- 考虑图标在不同尺寸下的清晰度
|
|||
|
|
- 为图标添加适当的aria-label
|
|||
|
|
|
|||
|
|
### 4. 错误处理
|
|||
|
|
当图标不存在时：
|
|||
|
|
1. 查找语义相近的图标
|
|||
|
|
2. 使用通用图标（如QuestionOutlined）
|
|||
|
|
3. 考虑使用文字替代
|
|||
|
|
4. 创建自定义图标组件
|
|||
|
|
|
|||
|
|
## 项目中的实际应用
|
|||
|
|
|
|||
|
|
### 场景获客模块使用的图标
|
|||
|
|
```typescript
|
|||
|
|
// 移动端项目中的图标使用
|
|||
|
|
import {
|
|||
|
|
AddOutline, // 添加
|
|||
|
|
UpOutline, // 上升趋势（替换RiseOutline）
|
|||
|
|
UserOutline, // 用户
|
|||
|
|
CalendarOutline, // 日历
|
|||
|
|
CopyOutline, // 复制
|
|||
|
|
DeleteOutline, // 删除
|
|||
|
|
EditSOutline, // 编辑
|
|||
|
|
SettingOutline, // 设置
|
|||
|
|
SearchOutline, // 搜索
|
|||
|
|
RefreshOutline, // 刷新
|
|||
|
|
QrCodeOutline, // 二维码
|
|||
|
|
} from 'antd-mobile-icons';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 工作台模块使用的图标
|
|||
|
|
```typescript
|
|||
|
|
// 移动端项目中的图标使用
|
|||
|
|
import {
|
|||
|
|
LikeOutline, // 点赞（替换ThumbsUpOutline）
|
|||
|
|
LinkOutline, // 链接（替换ShareOutline）
|
|||
|
|
PieOutline, // 饼图（替换BarChartOutline/LineChartOutline）
|
|||
|
|
UserOutline, // 用户
|
|||
|
|
TeamOutline, // 团队
|
|||
|
|
MessageOutline, // 消息
|
|||
|
|
} from 'antd-mobile-icons';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 更新和维护
|
|||
|
|
|
|||
|
|
1. **定期检查**: 定期检查新版本中新增的图标
|
|||
|
|
2. **文档更新**: 及时更新图标对照表
|
|||
|
|
3. **团队协作**: 团队成员共享图标使用规范
|
|||
|
|
4. **代码审查**: 在代码审查中检查图标使用是否正确
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **包版本**: 确保图标包版本与UI框架版本兼容
|
|||
|
|
2. **按需导入**: 避免全量导入图标，影响打包体积
|
|||
|
|
3. **样式覆盖**: 可以通过CSS自定义图标样式
|
|||
|
|
4. **无障碍**: 为图标添加适当的无障碍属性
|
|||
|
|
5. **性能**: 大量使用图标时注意性能优化
|