feat: 本次提交更新内容如下

梳理了icon ，增加了layout的loading
2025-07-19 16:10:26 +08:00
parent 4af615889b
commit b1938a76c0
31 changed files with 3181 additions and 908 deletions
--- a/nkebao/ICON_MAPPING_GUIDE.md
+++ b/nkebao/ICON_MAPPING_GUIDE.md
@@ -0,0 +1,230 @@
+# PC端与移动端图标对照文档
+
+## 概述
+
+本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。
+
+## 导入方式
+
+### PC端图标 (@ant-design/icons)
+```typescript
+import {
+  HomeOutlined,
+  UserOutlined,
+  SettingOutlined,
+  // ... 其他图标
+} from '@ant-design/icons';
+```
+
+### 移动端图标 (antd-mobile-icons)
+```typescript
+import {
+  AntOutline,
+  ArrowDownCircleOutline,
+  UserOutline,
+  // ... 其他图标
+} from 'antd-mobile-icons';
+```
+
+## 图标对照表
+
+### 常用图标对照
+
+| 功能描述 | PC端图标 | 移动端图标 | 备注 |
+|---------|---------|-----------|------|
+| 首页 | HomeOutlined | HomeOutline | 完全对应 |
+| 用户 | UserOutlined | UserOutline | 完全对应 |
+| 设置 | SettingOutlined | SettingOutline | 完全对应 |
+| 搜索 | SearchOutlined | SearchOutline | 完全对应 |
+| 添加 | PlusOutlined | AddOutline | 完全对应 |
+| 编辑 | EditOutlined | EditSOutline | 移动端略有不同 |
+| 删除 | DeleteOutlined | DeleteOutline | 完全对应 |
+| 复制 | CopyOutlined | CopyOutline | 完全对应 |
+| 刷新 | ReloadOutlined | RefreshOutline | 完全对应 |
+| 二维码 | QrcodeOutlined | QrCodeOutline | 完全对应 |
+| 日历 | CalendarOutlined | CalendarOutline | 完全对应 |
+| 时钟 | ClockCircleOutlined | ClockCircleOutline | 完全对应 |
+| 箭头向上 | UpOutlined | UpOutline | 完全对应 |
+| 箭头向下 | DownOutlined | DownOutline | 完全对应 |
+| 箭头向左 | LeftOutlined | LeftOutline | 完全对应 |
+| 箭头向右 | RightOutlined | RightOutline | 完全对应 |
+| 返回 | ArrowLeftOutlined | LeftOutline | 移动端使用LeftOutline |
+| 关闭 | CloseOutlined | CloseOutline | 完全对应 |
+| 检查 | CheckOutlined | CheckOutline | 完全对应 |
+| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | 完全对应 |
+| 信息 | InfoCircleOutlined | InfoCircleOutline | 完全对应 |
+| 成功 | CheckCircleOutlined | CheckCircleOutline | 完全对应 |
+| 错误 | CloseCircleOutlined | CloseCircleOutline | 完全对应 |
+
+### 方向性图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 向上 | UpOutlined | UpOutline |
+| 向下 | DownOutlined | DownOutline |
+| 向左 | LeftOutlined | LeftOutline |
+| 向右 | RightOutlined | RightOutline |
+| 向上圆形 | UpCircleOutlined | UpCircleOutline |
+| 向下圆形 | DownCircleOutlined | DownCircleOutline |
+| 向左圆形 | LeftCircleOutlined | LeftCircleOutline |
+| 向右圆形 | RightCircleOutlined | RightCircleOutline |
+
+### 编辑类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 编辑 | EditOutlined | EditSOutline |
+| 删除 | DeleteOutlined | DeleteOutline |
+| 复制 | CopyOutlined | CopyOutline |
+| 剪切 | ScissorOutlined | ScissorOutline |
+| 撤销 | UndoOutlined | UndoOutline |
+| 重做 | RedoOutlined | RedoOutline |
+| 保存 | SaveOutlined | SaveOutline |
+
+### 通信类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 消息 | MessageOutlined | MessageOutline |
+| 邮件 | MailOutlined | MailOutline |
+| 电话 | PhoneOutlined | PhoneOutline |
+| 视频通话 | VideoCameraOutlined | VideoCameraOutline |
+| 语音 | AudioOutlined | AudioOutline |
+
+### 媒体类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 图片 | PictureOutlined | PictureOutline |
+| 视频 | VideoCameraOutlined | VideoCameraOutline |
+| 音频 | AudioOutlined | AudioOutline |
+| 文件 | FileOutlined | FileOutline |
+| 文件夹 | FolderOutlined | FolderOutline |
+| 相机 | CameraOutlined | CameraOutline |
+
+### 导航类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 菜单 | MenuOutlined | MenuOutline |
+| 汉堡菜单 | MenuFoldOutlined | MenuOutline |
+| 展开菜单 | MenuUnfoldOutlined | MenuOutline |
+| 面包屑 | BreadcrumbOutlined | BreadcrumbOutline |
+| 分页 | PaginationOutlined | PaginationOutline |
+
+### 数据展示类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 表格 | TableOutlined | TableOutline |
+| 列表 | UnorderedListOutlined | UnorderedListOutline |
+| 卡片 | CreditCardOutlined | CreditCardOutline |
+| 统计 | BarChartOutlined | BarChartOutline |
+| 饼图 | PieChartOutlined | PieChartOutline |
+| 折线图 | LineChartOutlined | LineChartOutline |
+| 仪表盘 | DashboardOutlined | DashboardOutline |
+
+### 反馈类图标
+
+| 功能描述 | PC端图标 | 移动端图标 |
+|---------|---------|-----------|
+| 成功 | CheckCircleOutlined | CheckCircleOutline |
+| 错误 | CloseCircleOutlined | CloseCircleOutline |
+| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline |
+| 信息 | InfoCircleOutlined | InfoCircleOutline |
+| 加载 | LoadingOutlined | LoadingOutline |
+| 等待 | ClockCircleOutlined | ClockCircleOutline |
+
+## 使用建议
+
+### 1. 项目类型判断
+- **PC端项目**: 使用 `@ant-design/icons`
+- **移动端项目**: 使用 `antd-mobile-icons`
+
+### 2. 图标选择原则
+- 优先选择语义化图标
+- 保持图标风格一致性
+- 考虑图标在不同尺寸下的清晰度
+
+### 3. 常见错误避免
+- 不要混用PC端和移动端图标
+- 注意图标名称的大小写
+- 确保图标在对应包中存在
+
+### 4. 图标替换策略
+当某个图标在目标包中不存在时：
+1. 查找语义相近的图标
+2. 使用通用图标（如QuestionOutlined）
+3. 考虑使用文字替代
+4. 创建自定义图标组件
+
+## 实际项目中的使用示例
+
+### PC端项目示例
+```typescript
+import {
+  HomeOutlined,
+  UserOutlined,
+  SettingOutlined,
+  SearchOutlined,
+  PlusOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  CopyOutlined,
+  ReloadOutlined,
+  QrcodeOutlined,
+  CalendarOutlined,
+  ClockCircleOutlined,
+  UpOutlined,
+  DownOutlined,
+  LeftOutlined,
+  RightOutlined,
+  CloseOutlined,
+  CheckOutlined,
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+```
+
+### 移动端项目示例
+```typescript
+import {
+  HomeOutline,
+  UserOutline,
+  SettingOutline,
+  SearchOutline,
+  AddOutline,
+  EditSOutline,
+  DeleteOutline,
+  CopyOutline,
+  RefreshOutline,
+  QrCodeOutline,
+  CalendarOutline,
+  ClockCircleOutline,
+  UpOutline,
+  DownOutline,
+  LeftOutline,
+  RightOutline,
+  CloseOutline,
+  CheckOutline,
+  ExclamationCircleOutline,
+  InfoCircleOutline,
+  CheckCircleOutline,
+  CloseCircleOutline,
+} from 'antd-mobile-icons';
+```
+
+## 注意事项
+
+1. **包依赖**: 确保项目中已安装对应的图标包
+2. **版本兼容**: 注意图标包版本与UI框架版本的兼容性
+3. **性能考虑**: 按需导入图标，避免全量导入
+4. **样式覆盖**: 可以通过CSS自定义图标颜色和大小
+5. **无障碍**: 为图标添加适当的aria-label属性
+
+## 更新记录
+
+- 2024-01-XX: 初始版本，包含常用图标对照
+- 后续根据实际使用情况持续更新