cunkebao_v3/nkebao/AI_ICON_GUIDE.md

AI图标使用指南

概述

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

AI使用流程

1. 项目类型判断

首先判断项目类型：

• PC端项目: 使用 @ant-design/icons
• 移动端项目: 使用 antd-mobile-icons

2. 图标查找流程

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

3. 代码生成模板

PC端项目模板

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';

移动端项目模板

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: 移动端列表页面

// 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端管理页面

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