From eedd687e47ffc25685f290e1f073aa863d9c41de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Mon, 4 Aug 2025 10:04:29 +0800 Subject: [PATCH 1/4] 1 --- nkebao/AI_ICON_GUIDE.md | 546 ++++++++++++++++---------------- nkebao/ICON_DETAILED_MAPPING.md | 408 ++++++++++++------------ nkebao/ICON_MAPPING_GUIDE.md | 458 +++++++++++++-------------- nkebao/ICON_QUICK_REFERENCE.md | 540 +++++++++++++++---------------- nkebao/index.html | 24 +- 5 files changed, 988 insertions(+), 988 deletions(-) diff --git a/nkebao/AI_ICON_GUIDE.md b/nkebao/AI_ICON_GUIDE.md index cef30a6a..bc536673 100644 --- a/nkebao/AI_ICON_GUIDE.md +++ b/nkebao/AI_ICON_GUIDE.md @@ -1,274 +1,274 @@ -# 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'; - -// 使用示例 - - - -``` - -### 场景2: PC端管理页面 -```typescript -// AI应该生成的代码 -import { - PlusOutlined, // 添加按钮 - EditOutlined, // 编辑按钮 - DeleteOutlined, // 删除按钮 - CopyOutlined, // 复制按钮 - SearchOutlined, // 搜索框 - ReloadOutlined, // 刷新按钮 - UserOutlined, // 用户信息 - CalendarOutlined, // 时间信息 - RiseOutlined, // 上升趋势（PC端存在） -} from '@ant-design/icons'; - -// 使用示例 - - - -``` - -## 错误检测和修正 - -### 常见错误模式 -1. **混用图标包**: 同时导入PC端和移动端图标 -2. **使用不存在的图标**: 在移动端使用PC端特有的图标 -3. **命名错误**: 图标名称大小写错误 -4. **导入路径错误**: 使用错误的包名 - -### 修正策略 -1. **统一图标包**: 根据项目类型选择单一图标包 -2. **查找替代**: 使用对照表查找替代图标 -3. **验证存在**: 确保图标在目标包中存在 -4. **测试验证**: 在代码中测试图标是否正常显示 - -## AI使用检查清单 - -### 代码生成前 -- [ ] 确认项目类型（PC端/移动端） -- [ ] 选择对应的图标包 -- [ ] 根据功能需求选择合适图标 -- [ ] 检查图标是否存在 - -### 代码生成中 -- [ ] 使用正确的导入语法 -- [ ] 图标名称大小写正确 -- [ ] 避免混用不同包的图标 -- [ ] 为不存在的图标提供替代方案 - -### 代码生成后 -- [ ] 验证图标导入正确 -- [ ] 检查图标使用语法 -- [ ] 确保样式设置合理 -- [ ] 提供使用示例 - -## 更新和维护 - -- 定期更新图标对照表 -- 记录新发现的图标差异 -- 更新替换规则 -- 优化AI使用流程 - -## 注意事项 - -1. **优先使用语义化图标**: 选择最能表达功能的图标 -2. **保持一致性**: 在同一项目中保持图标风格一致 -3. **考虑可访问性**: 为图标添加适当的aria-label -4. **性能优化**: 按需导入图标，避免全量导入 +# 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'; + +// 使用示例 + + + +``` + +### 场景2: PC端管理页面 +```typescript +// AI应该生成的代码 +import { + PlusOutlined, // 添加按钮 + EditOutlined, // 编辑按钮 + DeleteOutlined, // 删除按钮 + CopyOutlined, // 复制按钮 + SearchOutlined, // 搜索框 + ReloadOutlined, // 刷新按钮 + UserOutlined, // 用户信息 + CalendarOutlined, // 时间信息 + RiseOutlined, // 上升趋势（PC端存在） +} from '@ant-design/icons'; + +// 使用示例 + + + +``` + +## 错误检测和修正 + +### 常见错误模式 +1. **混用图标包**: 同时导入PC端和移动端图标 +2. **使用不存在的图标**: 在移动端使用PC端特有的图标 +3. **命名错误**: 图标名称大小写错误 +4. **导入路径错误**: 使用错误的包名 + +### 修正策略 +1. **统一图标包**: 根据项目类型选择单一图标包 +2. **查找替代**: 使用对照表查找替代图标 +3. **验证存在**: 确保图标在目标包中存在 +4. **测试验证**: 在代码中测试图标是否正常显示 + +## AI使用检查清单 + +### 代码生成前 +- [ ] 确认项目类型（PC端/移动端） +- [ ] 选择对应的图标包 +- [ ] 根据功能需求选择合适图标 +- [ ] 检查图标是否存在 + +### 代码生成中 +- [ ] 使用正确的导入语法 +- [ ] 图标名称大小写正确 +- [ ] 避免混用不同包的图标 +- [ ] 为不存在的图标提供替代方案 + +### 代码生成后 +- [ ] 验证图标导入正确 +- [ ] 检查图标使用语法 +- [ ] 确保样式设置合理 +- [ ] 提供使用示例 + +## 更新和维护 + +- 定期更新图标对照表 +- 记录新发现的图标差异 +- 更新替换规则 +- 优化AI使用流程 + +## 注意事项 + +1. **优先使用语义化图标**: 选择最能表达功能的图标 +2. **保持一致性**: 在同一项目中保持图标风格一致 +3. **考虑可访问性**: 为图标添加适当的aria-label +4. **性能优化**: 按需导入图标，避免全量导入 5. **版本兼容**: 注意图标包版本与UI框架版本的兼容性 \ No newline at end of file diff --git a/nkebao/ICON_DETAILED_MAPPING.md b/nkebao/ICON_DETAILED_MAPPING.md index 5e849544..b2c73166 100644 --- a/nkebao/ICON_DETAILED_MAPPING.md +++ b/nkebao/ICON_DETAILED_MAPPING.md @@ -1,205 +1,205 @@ -# 详细图标对照表 - -## 基础图标对照 - -### 导航类 -| 功能 | 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. **无障碍**: 为图标添加适当的无障碍属性 +# 详细图标对照表 + +## 基础图标对照 + +### 导航类 +| 功能 | 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. **性能**: 大量使用图标时注意性能优化 \ No newline at end of file diff --git a/nkebao/ICON_MAPPING_GUIDE.md b/nkebao/ICON_MAPPING_GUIDE.md index 81d901d0..2b237842 100644 --- a/nkebao/ICON_MAPPING_GUIDE.md +++ b/nkebao/ICON_MAPPING_GUIDE.md @@ -1,230 +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: 初始版本，包含常用图标对照 +# 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: 初始版本，包含常用图标对照 - 后续根据实际使用情况持续更新 \ No newline at end of file diff --git a/nkebao/ICON_QUICK_REFERENCE.md b/nkebao/ICON_QUICK_REFERENCE.md index 03b9c233..1e64fe9a 100644 --- a/nkebao/ICON_QUICK_REFERENCE.md +++ b/nkebao/ICON_QUICK_REFERENCE.md @@ -1,271 +1,271 @@ -# 图标快速参考表 - -## 快速查找 - -### 🔍 按功能查找 - -| 功能 | PC端 | 移动端 | 导入方式 | -|------|------|--------|----------| -| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | - -### 🔄 常见替换 - -| 原图标 | 替换为 | 说明 | -|--------|--------|------| -| RiseOutlined | UpOutline | 上升趋势 | -| ThumbsUpOutlined | LikeOutline | 点赞功能 | -| ShareAltOutlined | LinkOutline | 分享功能 | -| BarChartOutlined | PieOutline | 图表功能 | -| LineChartOutlined | PieOutline | 图表功能 | -| UserAddOutlined | UserOutline | 用户添加 | -| SettingOutline | SettingOutline | 设置（移动端） | - -## 导入模板 - -### PC端项目模板 -```typescript -import { - HomeOutlined, - UserOutlined, - SettingOutlined, - SearchOutlined, - PlusOutlined, - EditOutlined, - DeleteOutlined, - CopyOutlined, - ReloadOutlined, - CloseOutlined, - CheckOutlined, - UpOutlined, - DownOutlined, - LeftOutlined, - RightOutlined, - MessageOutlined, - CalendarOutlined, - ClockCircleOutlined, - PictureOutlined, - FileOutlined, - CameraOutlined, - QrcodeOutlined, - WechatOutlined, - MobileOutlined, - TeamOutlined, - ShoppingOutlined, - PayCircleOutlined, - CheckCircleOutlined, - CloseCircleOutlined, - ExclamationCircleOutlined, - InfoCircleOutlined, - LoadingOutlined, -} from '@ant-design/icons'; -``` - -### 移动端项目模板 -```typescript -import { - HomeOutline, - UserOutline, - SettingOutline, - SearchOutline, - AddOutline, - EditSOutline, - DeleteOutline, - CopyOutline, - RefreshOutline, - CloseOutline, - CheckOutline, - UpOutline, - DownOutline, - LeftOutline, - RightOutline, - MessageOutline, - CalendarOutline, - ClockCircleOutline, - PictureOutline, - FileOutline, - CameraOutline, - QrCodeOutline, - WechatOutline, - MobileOutline, - TeamOutline, - ShoppingOutline, - PayCircleOutline, - CheckCircleOutline, - CloseCircleOutline, - ExclamationCircleOutline, - InfoCircleOutline, - LoadingOutline, -} from 'antd-mobile-icons'; -``` - -## 使用示例 - -### 基础使用 -```typescript -// PC端 -import { HomeOutlined, UserOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { HomeOutline, UserOutline } from 'antd-mobile-icons'; - - - -``` - -### 按钮中使用 -```typescript -// PC端 -import { PlusOutlined, EditOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { AddOutline, EditSOutline } from 'antd-mobile-icons'; - - - -``` - -### 列表中使用 -```typescript -// PC端 -import { DeleteOutlined, CopyOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { DeleteOutline, CopyOutline } from 'antd-mobile-icons'; - - - -``` - -## 常见错误 - -### ❌ 错误示例 -```typescript -// 错误：混用PC端和移动端图标 -import { HomeOutlined } from '@ant-design/icons'; // PC端 -import { UserOutline } from 'antd-mobile-icons'; // 移动端 - -// 错误：使用不存在的图标 -import { RiseOutlined } from 'antd-mobile-icons'; // 不存在 -import { UserAddOutline } from 'antd-mobile-icons'; // 不存在 -``` - -### ✅ 正确示例 -```typescript -// 正确：统一使用移动端图标 -import { - HomeOutline, - UserOutline, - UpOutline, // 替换RiseOutlined - UserOutline // 替换UserAddOutline -} from 'antd-mobile-icons'; - -// 正确：统一使用PC端图标 -import { - HomeOutlined, - UserOutlined, - RiseOutlined, // PC端存在 - UserAddOutlined // PC端存在 -} from '@ant-design/icons'; -``` - -## 快速检查清单 - -### 开发前检查 -- [ ] 确认项目类型（PC端/移动端） -- [ ] 选择对应的图标包 -- [ ] 检查图标是否存在 -- [ ] 准备替换方案 - -### 开发中检查 -- [ ] 使用正确的导入方式 -- [ ] 图标名称大小写正确 -- [ ] 避免混用不同包的图标 -- [ ] 为图标添加适当的样式 - -### 开发后检查 -- [ ] 图标显示正常 -- [ ] 样式符合设计要求 -- [ ] 无障碍属性完整 -- [ ] 性能影响最小 - -## 紧急替换方案 - -当遇到图标不存在时，使用以下通用图标： - -```typescript -// 移动端通用图标 -import { - QuestionCircleOutline, // 通用问号 - AppOutline, // 通用应用 - ToolOutline, // 通用工具 - SettingOutline, // 通用设置 - UserOutline, // 通用用户 -} from 'antd-mobile-icons'; - -// PC端通用图标 -import { - QuestionCircleOutlined, // 通用问号 - AppstoreOutlined, // 通用应用 - ToolOutlined, // 通用工具 - SettingOutlined, // 通用设置 - UserOutlined, // 通用用户 -} from '@ant-design/icons'; -``` - -## 更新日志 - -- 2024-01-XX: 初始版本 -- 添加常用图标对照 -- 添加错误示例和正确示例 -- 添加快速检查清单 +# 图标快速参考表 + +## 快速查找 + +### 🔍 按功能查找 + +| 功能 | PC端 | 移动端 | 导入方式 | +|------|------|--------|----------| +| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | + +### 🔄 常见替换 + +| 原图标 | 替换为 | 说明 | +|--------|--------|------| +| RiseOutlined | UpOutline | 上升趋势 | +| ThumbsUpOutlined | LikeOutline | 点赞功能 | +| ShareAltOutlined | LinkOutline | 分享功能 | +| BarChartOutlined | PieOutline | 图表功能 | +| LineChartOutlined | PieOutline | 图表功能 | +| UserAddOutlined | UserOutline | 用户添加 | +| SettingOutline | SettingOutline | 设置（移动端） | + +## 导入模板 + +### PC端项目模板 +```typescript +import { + HomeOutlined, + UserOutlined, + SettingOutlined, + SearchOutlined, + PlusOutlined, + EditOutlined, + DeleteOutlined, + CopyOutlined, + ReloadOutlined, + CloseOutlined, + CheckOutlined, + UpOutlined, + DownOutlined, + LeftOutlined, + RightOutlined, + MessageOutlined, + CalendarOutlined, + ClockCircleOutlined, + PictureOutlined, + FileOutlined, + CameraOutlined, + QrcodeOutlined, + WechatOutlined, + MobileOutlined, + TeamOutlined, + ShoppingOutlined, + PayCircleOutlined, + CheckCircleOutlined, + CloseCircleOutlined, + ExclamationCircleOutlined, + InfoCircleOutlined, + LoadingOutlined, +} from '@ant-design/icons'; +``` + +### 移动端项目模板 +```typescript +import { + HomeOutline, + UserOutline, + SettingOutline, + SearchOutline, + AddOutline, + EditSOutline, + DeleteOutline, + CopyOutline, + RefreshOutline, + CloseOutline, + CheckOutline, + UpOutline, + DownOutline, + LeftOutline, + RightOutline, + MessageOutline, + CalendarOutline, + ClockCircleOutline, + PictureOutline, + FileOutline, + CameraOutline, + QrCodeOutline, + WechatOutline, + MobileOutline, + TeamOutline, + ShoppingOutline, + PayCircleOutline, + CheckCircleOutline, + CloseCircleOutline, + ExclamationCircleOutline, + InfoCircleOutline, + LoadingOutline, +} from 'antd-mobile-icons'; +``` + +## 使用示例 + +### 基础使用 +```typescript +// PC端 +import { HomeOutlined, UserOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { HomeOutline, UserOutline } from 'antd-mobile-icons'; + + + +``` + +### 按钮中使用 +```typescript +// PC端 +import { PlusOutlined, EditOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { AddOutline, EditSOutline } from 'antd-mobile-icons'; + + + +``` + +### 列表中使用 +```typescript +// PC端 +import { DeleteOutlined, CopyOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { DeleteOutline, CopyOutline } from 'antd-mobile-icons'; + + + +``` + +## 常见错误 + +### ❌ 错误示例 +```typescript +// 错误：混用PC端和移动端图标 +import { HomeOutlined } from '@ant-design/icons'; // PC端 +import { UserOutline } from 'antd-mobile-icons'; // 移动端 + +// 错误：使用不存在的图标 +import { RiseOutlined } from 'antd-mobile-icons'; // 不存在 +import { UserAddOutline } from 'antd-mobile-icons'; // 不存在 +``` + +### ✅ 正确示例 +```typescript +// 正确：统一使用移动端图标 +import { + HomeOutline, + UserOutline, + UpOutline, // 替换RiseOutlined + UserOutline // 替换UserAddOutline +} from 'antd-mobile-icons'; + +// 正确：统一使用PC端图标 +import { + HomeOutlined, + UserOutlined, + RiseOutlined, // PC端存在 + UserAddOutlined // PC端存在 +} from '@ant-design/icons'; +``` + +## 快速检查清单 + +### 开发前检查 +- [ ] 确认项目类型（PC端/移动端） +- [ ] 选择对应的图标包 +- [ ] 检查图标是否存在 +- [ ] 准备替换方案 + +### 开发中检查 +- [ ] 使用正确的导入方式 +- [ ] 图标名称大小写正确 +- [ ] 避免混用不同包的图标 +- [ ] 为图标添加适当的样式 + +### 开发后检查 +- [ ] 图标显示正常 +- [ ] 样式符合设计要求 +- [ ] 无障碍属性完整 +- [ ] 性能影响最小 + +## 紧急替换方案 + +当遇到图标不存在时，使用以下通用图标： + +```typescript +// 移动端通用图标 +import { + QuestionCircleOutline, // 通用问号 + AppOutline, // 通用应用 + ToolOutline, // 通用工具 + SettingOutline, // 通用设置 + UserOutline, // 通用用户 +} from 'antd-mobile-icons'; + +// PC端通用图标 +import { + QuestionCircleOutlined, // 通用问号 + AppstoreOutlined, // 通用应用 + ToolOutlined, // 通用工具 + SettingOutlined, // 通用设置 + UserOutlined, // 通用用户 +} from '@ant-design/icons'; +``` + +## 更新日志 + +- 2024-01-XX: 初始版本 +- 添加常用图标对照 +- 添加错误示例和正确示例 +- 添加快速检查清单 - 添加紧急替换方案 \ No newline at end of file diff --git a/nkebao/index.html b/nkebao/index.html index 2aaa892e..784f0cf8 100644 --- a/nkebao/index.html +++ b/nkebao/index.html @@ -1,13 +1,13 @@ - - - - - - Nkebao Base - - - -
- - + + + + + + Nkebao Base + + + +
+ + \ No newline at end of file From 4a70635ae4085d453fd758eee182549946e26e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Wed, 13 Aug 2025 11:32:05 +0800 Subject: [PATCH 2/4] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nkebao/postcss.config.js | 14 +++++------ nkebao/技术栈.md | 50 ++++++++++++++++++++-------------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/nkebao/postcss.config.js b/nkebao/postcss.config.js index 34ea9ede..82ee5d38 100644 --- a/nkebao/postcss.config.js +++ b/nkebao/postcss.config.js @@ -1,8 +1,8 @@ -module.exports = { - plugins: { - 'postcss-pxtorem': { - rootValue: 16, - propList: ['*'], - }, - }, +module.exports = { + plugins: { + 'postcss-pxtorem': { + rootValue: 16, + propList: ['*'], + }, + }, }; \ No newline at end of file diff --git a/nkebao/技术栈.md b/nkebao/技术栈.md index be554562..a565619f 100644 --- a/nkebao/技术栈.md +++ b/nkebao/技术栈.md @@ -1,26 +1,26 @@ -## 使用技术栈 -- React 18 -- TypeScript -- Vite（新一代前端构建工具） -- axios -- sass (scss) -- React Router v6 -- antd-mobile -- antd（已设置基础单位为 rem，配合 postcss-pxtorem） -- postcss-pxtorem（px 转 rem，移动端适配） -- ESLint + Prettier（代码规范与自动格式化） -- 路径别名 @ 指向 src 目录 - -## 关于兼容与工程化 -- 自动化脚本（yarn lint、yarn dev 等） -- 移动端 rem 适配（html 根字体 + pxtorem） -- iOS 浏览器滚动回弹兼容问题已通过全局样式处理 -- 支持 VS Code 编辑器自动格式化（推荐配合 ESLint/Prettier 插件） - -## 目录结构简要 -- src/ 业务源码（pages、api、styles、App.tsx、main.tsx 等） -- public/ 静态资源目录 -- index.html 项目入口（根目录） -- vite.config.ts 构建与路径别名配置 -- tsconfig.json TypeScript 配置 +## 使用技术栈 +- React 18 +- TypeScript +- Vite（新一代前端构建工具） +- axios +- sass (scss) +- React Router v6 +- antd-mobile +- antd（已设置基础单位为 rem，配合 postcss-pxtorem） +- postcss-pxtorem（px 转 rem，移动端适配） +- ESLint + Prettier（代码规范与自动格式化） +- 路径别名 @ 指向 src 目录 + +## 关于兼容与工程化 +- 自动化脚本（yarn lint、yarn dev 等） +- 移动端 rem 适配（html 根字体 + pxtorem） +- iOS 浏览器滚动回弹兼容问题已通过全局样式处理 +- 支持 VS Code 编辑器自动格式化（推荐配合 ESLint/Prettier 插件） + +## 目录结构简要 +- src/ 业务源码（pages、api、styles、App.tsx、main.tsx 等） +- public/ 静态资源目录 +- index.html 项目入口（根目录） +- vite.config.ts 构建与路径别名配置 +- tsconfig.json TypeScript 配置 - .eslintrc.js 代码规范配置 \ No newline at end of file From 66ddb75c13b2acdbd0356e683f64f7d656b3a65b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Sat, 13 Sep 2025 11:46:03 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor(powerCenter):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8D=A1=E7=89=87=E8=B7=AF=E5=BE=84=E4=BB=8E?= =?UTF-8?q?ckbox=E5=88=B0powerCenter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 统一功能卡片的路径命名，将原ckbox路径改为powerCenter以保持路由一致性 --- .../pages/pc/ckbox/powerCenter/index.data.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx index 243b471c..52e84e89 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx @@ -40,7 +40,7 @@ export const featureCards: FeatureCard[] = [ description: "基于客户标签和行为数据进行精准群发", icon: , color: "#ff6b35", - path: "/pc/ckbox/precision-send", + path: "/pc/powerCenter/precision-send", }, { id: "sop-send", @@ -48,7 +48,7 @@ export const featureCards: FeatureCard[] = [ description: "使用触客宝SOP标准化流程进行批量消息发送", icon: , color: "#4285f4", - path: "/pc/ckbox/sop-send", + path: "/pc/powerCenter/sop-send", }, { id: "moments-marketing", @@ -56,7 +56,7 @@ export const featureCards: FeatureCard[] = [ description: "AI智能生成朋友圈内容，提升品牌曝光度", icon: , color: "#34a853", - path: "/pc/ckbox/moments-marketing", + path: "/pc/powerCenter/moments-marketing", }, { id: "tag-management", @@ -64,7 +64,7 @@ export const featureCards: FeatureCard[] = [ description: "智能客户标签分类，精准用户画像分析", icon: , color: "#9c27b0", - path: "/pc/ckbox/tag-management", + path: "/pc/powerCenter/tag-management", }, { id: "customer-management", @@ -72,7 +72,7 @@ export const featureCards: FeatureCard[] = [ description: "统一管理客户信息和好友关系，提升服务效率", icon: , color: "#6366f1", - path: "/pc/ckbox/customer-management", + path: "/pc/powerCenter/customer-management", }, { id: "communication-record", @@ -80,7 +80,7 @@ export const featureCards: FeatureCard[] = [ description: "完整记录客户沟通历史，支持多维度查询分析", icon: , color: "#06b6d4", - path: "/pc/ckbox/communication-record", + path: "/pc/powerCenter/communication-record", }, { id: "content-management", @@ -88,7 +88,7 @@ export const featureCards: FeatureCard[] = [ description: "素材管理、数据词汇库、关键词自动回复", icon: , color: "#f59e0b", - path: "/pc/ckbox/content-management", + path: "/pc/powerCenter/content-management", }, { id: "ai-training", @@ -96,7 +96,7 @@ export const featureCards: FeatureCard[] = [ description: "自定义AI模型训练，打造专属智能客服助手", icon: , color: "#ec4899", - path: "/pc/ckbox/ai-training", + path: "/pc/powerCenter/ai-training", isNew: true, }, { @@ -105,7 +105,7 @@ export const featureCards: FeatureCard[] = [ description: "智能识别新好友，自动发送个性化欢迎消息", icon: , color: "#10b981", - path: "/pc/ckbox/auto-greeting", + path: "/pc/powerCenter/auto-greeting", }, ]; From 7a01efaa52e1405153f1df8803860d903067daf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Fri, 26 Sep 2025 12:46:15 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat(=E8=87=AA=E5=8B=95=E5=95=8F=E5=80=99?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E9=96=8B=E7=99=BC):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=87=AA=E5=8B=95=E5=95=8F=E5=80=99=E5=8A=9F=E8=83=BD=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=8C=85=E5=90=AB=E5=95=8F=E5=80=99=E8=A6=8F?= =?UTF-8?q?=E5=89=87=E5=89=B5=E5=BB=BA=E3=80=81=E7=B7=A8=E8=BC=AF=E5=8F=8A?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=EF=BC=8C=E4=B8=A6=E5=84=AA?= =?UTF-8?q?=E5=8C=96=E6=A8=A3=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87=E7=94=A8?= =?UTF-8?q?=E6=88=B6=E9=AB=94=E9=A9=97=E3=80=82=E6=9B=B4=E6=96=B0=E4=BA=86?= =?UTF-8?q?PowerNavigation=E7=B5=84=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=8F=B3=E5=81=B4=E5=85=A7=E5=AE=B9=E9=A1=AF=E7=A4=BA=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PowerNavtion/index.module.scss | 1 + .../src/components/PowerNavtion/index.tsx | 3 + .../auto-greeting/index.module.scss | 291 +++++++++++++-- .../ckbox/powerCenter/auto-greeting/index.tsx | 347 +++++++++++++++++- 4 files changed, 598 insertions(+), 44 deletions(-) diff --git a/Touchkebao/src/components/PowerNavtion/index.module.scss b/Touchkebao/src/components/PowerNavtion/index.module.scss index b57617ad..04110530 100644 --- a/Touchkebao/src/components/PowerNavtion/index.module.scss +++ b/Touchkebao/src/components/PowerNavtion/index.module.scss @@ -11,6 +11,7 @@ align-items: center; min-height: 64px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + justify-content: space-between; .headerLeft { display: flex; diff --git a/Touchkebao/src/components/PowerNavtion/index.tsx b/Touchkebao/src/components/PowerNavtion/index.tsx index 42b9b002..b2255d1d 100644 --- a/Touchkebao/src/components/PowerNavtion/index.tsx +++ b/Touchkebao/src/components/PowerNavtion/index.tsx @@ -13,6 +13,7 @@ export interface PowerNavigationProps { onBackClick?: () => void; className?: string; style?: React.CSSProperties; + rightContent?: React.ReactNode; } const PowerNavigation: React.FC = ({ @@ -23,6 +24,7 @@ const PowerNavigation: React.FC = ({ onBackClick, className, style, + rightContent, }) => { const navigate = useNavigate(); @@ -57,6 +59,7 @@ const PowerNavigation: React.FC = ({ {subtitle && {subtitle}} +
{rightContent}
); }; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss index bf1ac1e6..921a5a78 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss @@ -3,41 +3,268 @@ background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + min-height: 100vh; } +// 头部区域样式 .header { - margin-bottom: 24px; - - h1 { - font-size: 24px; - font-weight: 600; - color: #262626; - margin: 0 0 8px 0; - } - - p { - font-size: 14px; - color: #8c8c8c; - margin: 0; - } -} - -.content { - min-height: 400px; -} - -.placeholder { display: flex; + justify-content: space-between; align-items: center; - justify-content: center; - height: 300px; - background: #fafafa; - border: 1px dashed #d9d9d9; - border-radius: 6px; - - p { - font-size: 16px; - color: #8c8c8c; - margin: 0; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid #f0f0f0; + + .headerLeft { + display: flex; + align-items: center; + gap: 16px; + + .backButton { + color: #666; + font-size: 14px; + + &:hover { + color: #1890ff; + } + } + + .titleSection { + h1 { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 4px 0; + } + + p { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } + } } -} \ No newline at end of file + + .headerRight { + display: flex; + align-items: center; + gap: 16px; + + .activeRules { + font-size: 14px; + color: #666; + } + } +} + +// 子导航栏样式 +.subNav { + margin-bottom: 24px; + + :global(.ant-tabs-nav) { + margin-bottom: 0; + } + + :global(.ant-tabs-tab) { + font-size: 16px; + font-weight: 500; + } +} + +// 主要内容区域 +.mainContent { + min-height: 600px; +} + +// 问候规则内容 +.rulesContent { + display: flex; + gap: 24px; + min-height: 600px; + + .leftPanel { + flex: 0 0 400px; + + .createCard { + height: fit-content; + + :global(.ant-card-head) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-card-head-title) { + font-size: 16px; + font-weight: 600; + color: #262626; + } + + .cardSubtitle { + font-size: 14px; + color: #8c8c8c; + margin: 0 0 20px 0; + } + + .createForm { + :global(.ant-form-item) { + margin-bottom: 20px; + } + + :global(.ant-form-item-label) { + font-weight: 500; + } + } + } + } + + .rightPanel { + flex: 1; + + .listCard { + height: fit-content; + + :global(.ant-card-head) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-card-head-title) { + font-size: 16px; + font-weight: 600; + color: #262626; + } + + .listHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + font-size: 14px; + color: #666; + } + + .ruleList { + .ruleItem { + border: 1px solid #f0f0f0; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; + background: #fafafa; + + &:last-child { + margin-bottom: 0; + } + + .ruleHeader { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 12px; + + .ruleTitle { + flex: 1; + + h4 { + font-size: 16px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + .ruleTags { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + } + + .ruleActions { + display: flex; + align-items: center; + gap: 8px; + margin-left: 16px; + + :global(.ant-btn) { + padding: 4px 8px; + height: auto; + } + } + } + + .ruleContent { + .ruleDescription { + font-size: 14px; + color: #666; + margin: 0 0 8px 0; + font-weight: 500; + } + + .ruleText { + font-size: 14px; + color: #262626; + line-height: 1.6; + margin: 0 0 12px 0; + background: #fff; + padding: 12px; + border-radius: 6px; + border: 1px solid #e8e8e8; + } + + .ruleFooter { + display: flex; + justify-content: space-between; + font-size: 12px; + color: #8c8c8c; + } + } + } + } + } + } +} + +// 其他标签页内容 +.templatesContent, +.statisticsContent { + padding: 24px; + text-align: center; + color: #8c8c8c; +} + +// 响应式设计 +@media (max-width: 1200px) { + .rulesContent { + flex-direction: column; + + .leftPanel { + flex: none; + } + } +} + +@media (max-width: 768px) { + .container { + padding: 16px; + } + + .header { + flex-direction: column; + align-items: flex-start; + gap: 16px; + + .headerRight { + width: 100%; + justify-content: space-between; + } + } + + .rulesContent { + .leftPanel, + .rightPanel { + .createCard, + .listCard { + :global(.ant-card-body) { + padding: 16px; + } + } + } + } +} diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx index 7a992c2d..239bb790 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx @@ -1,21 +1,344 @@ -import React from "react"; -import PowerNavigation from "@/components/PowerNavtion"; +import React, { useState } from "react"; +import { + Button, + Card, + Form, + Input, + Select, + Switch, + Tabs, + Tag, + Space, + Popconfirm, + message, +} from "antd"; +import { + PlusOutlined, + EditOutlined, + DeleteOutlined, + ArrowLeftOutlined, +} from "@ant-design/icons"; +import { useNavigate } from "react-router-dom"; import styles from "./index.module.scss"; +const { TextArea } = Input; +const { Option } = Select; + +// 问候规则数据类型 +interface GreetingRule { + id: string; + name: string; + triggerType: string; + triggerCondition: string; + content: string; + priority: number; + isActive: boolean; + usageCount: number; + createTime: string; + tags: string[]; +} + const AutoGreeting: React.FC = () => { + const navigate = useNavigate(); + const [form] = Form.useForm(); + const [activeTab, setActiveTab] = useState("rules"); + const [rules, setRules] = useState([ + { + id: "1", + name: "产品咨询自动回复", + triggerType: "关键词", + triggerCondition: "包含:产品、价格、功能", + content: + "感谢您对我们产品的关注!我们的AI营销系统具有智能客服、精准营销、自动化运营等核心功能。详细资料我稍后发送给您,请稍等。", + priority: 3, + isActive: false, + usageCount: 234, + createTime: "2024/3/3", + tags: ["关键词", "优先级3"], + }, + { + id: "2", + name: "新好友欢迎", + triggerType: "新好友", + triggerCondition: "添加好友后", + content: + "您好!欢迎添加我为好友,我是触客宝AI助手,很高兴为您服务!如有任何问题,随时可以咨询我。", + priority: 1, + isActive: true, + usageCount: 156, + createTime: "2024/3/1", + tags: ["新好友", "优先级1"], + }, + { + id: "3", + name: "工作时间问候", + triggerType: "时间触发", + triggerCondition: "工作日 9:00-18:00", + content: "您好!现在是工作时间,我是触客宝AI助手,很高兴为您服务!", + priority: 2, + isActive: true, + usageCount: 89, + createTime: "2024/2/28", + tags: ["时间触发", "优先级2"], + }, + ]); + + // 计算活跃规则数量 + const activeRulesCount = rules.filter(rule => rule.isActive).length; + + // 处理表单提交 + const handleSubmit = (values: any) => { + const newRule: GreetingRule = { + id: Date.now().toString(), + name: values.name, + triggerType: values.triggerType, + triggerCondition: values.triggerCondition, + content: values.content, + priority: values.priority, + isActive: true, + usageCount: 0, + createTime: new Date().toLocaleDateString(), + tags: [values.triggerType, `优先级${values.priority}`], + }; + + setRules([...rules, newRule]); + form.resetFields(); + message.success("规则创建成功！"); + }; + + // 切换规则状态 + const toggleRuleStatus = (id: string) => { + setRules( + rules.map(rule => + rule.id === id ? { ...rule, isActive: !rule.isActive } : rule, + ), + ); + }; + + // 删除规则 + const deleteRule = (id: string) => { + setRules(rules.filter(rule => rule.id !== id)); + message.success("规则删除成功！"); + }; + + // 编辑规则 + const editRule = (rule: GreetingRule) => { + form.setFieldsValue({ + name: rule.name, + triggerType: rule.triggerType, + triggerCondition: rule.triggerCondition, + content: rule.content, + priority: rule.priority, + }); + message.info("规则已加载到编辑表单"); + }; + return (
- -
- {/* 功能内容待开发 */} -
-

自动打招呼功能正在开发中...

+ {/* 头部区域 */} +
+
+ +
+

自动问候

+

设置智能问候规则,提升客户体验

+
+
+
+ 活跃规则: {activeRulesCount}/{rules.length} +
+ +
+
+ + {/* 子导航栏 */} +
+ +
+ + {/* 主要内容区域 */} +
+ {activeTab === "rules" && ( +
+ {/* 左侧创建规则表单 */} +
+ +

+ 设置自动问候的触发条件和回复内容 +

+
+ + + + + + + + + + + + + +