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/9] 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/9] =?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/9] =?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 27dfb17e706b148a5bc11dc64d1a72f039864c74 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: Thu, 25 Sep 2025 14:32:42 +0800 Subject: [PATCH 4/9] =?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 --- .../components/PowerNavtion/index.module.scss | 1 + .../src/components/PowerNavtion/index.tsx | 3 + .../customer-management/index.module.scss | 378 ++++++++++++++++-- .../powerCenter/customer-management/index.tsx | 263 +++++++++++- 4 files changed, 608 insertions(+), 37 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/customer-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss index bf1ac1e6..a290c73b 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss @@ -1,43 +1,357 @@ .container { padding: 24px; - background: #fff; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } - -.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; - } +.searchBar { + display: flex; + align-items: center; + gap: 8px; + padding: 16px 0 8px 0; } .content { min-height: 400px; } -.placeholder { +// 页面头部 +.header { display: flex; - 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; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 24px; + + .headerLeft { + .title { + font-size: 24px; + font-weight: 600; + color: #262626; + margin: 0 0 8px 0; + } + + .subtitle { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } } -} \ No newline at end of file + + .headerRight { + .addButton { + background: #1890ff; + color: white; + border: none; + border-radius: 6px; + padding: 8px 16px; + font-size: 14px; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background: #40a9ff; + } + } + } +} + +// 搜索和筛选区域 +.searchSection { + display: flex; + gap: 12px; + margin-bottom: 24px; + + .searchBox { + flex: 1; + position: relative; + display: flex; + align-items: center; + + .searchIcon { + position: absolute; + left: 12px; + color: #8c8c8c; + font-size: 16px; + } + + .searchInput { + width: 100%; + height: 40px; + padding: 0 12px 0 40px; + border: 1px solid #d9d9d9; + border-radius: 6px; + font-size: 14px; + outline: none; + transition: border-color 0.3s; + + &:focus { + border-color: #1890ff; + } + + &::placeholder { + color: #8c8c8c; + } + } + } + + .filterButton { + display: flex; + align-items: center; + gap: 6px; + height: 40px; + padding: 0 16px; + background: white; + border: 1px solid #d9d9d9; + border-radius: 6px; + font-size: 14px; + color: #262626; + cursor: pointer; + transition: all 0.3s; + + &:hover { + border-color: #1890ff; + color: #1890ff; + } + } +} + +// 标签页 +.tabs { + display: flex; + gap: 0; + margin-bottom: 24px; + border-bottom: 1px solid #f0f0f0; + + .tab { + padding: 12px 24px; + background: none; + border: none; + border-bottom: 2px solid transparent; + font-size: 14px; + color: #8c8c8c; + cursor: pointer; + transition: all 0.3s; + + &:hover { + color: #1890ff; + } + + &.activeTab { + color: #1890ff; + border-bottom-color: #1890ff; + } + } +} + +// 联系人列表 +.contactsList { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 20px; +} + +// 联系人卡片 +.contactCard { + background: white; + border: 1px solid #f0f0f0; + border-radius: 8px; + padding: 20px; + transition: all 0.3s; + height: 100%; + min-height: 380px; + display: flex; + flex-direction: column; + + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border-color: #d9d9d9; + } + + .cardHeader { + margin-bottom: 16px; + + .contactInfo { + display: flex; + align-items: flex-start; + gap: 12px; + } + + .nameSection { + flex: 1; + + .contactName { + display: flex; + align-items: center; + gap: 8px; + font-size: 16px; + font-weight: 600; + color: #262626; + margin: 0 0 4px 0; + + .starIcon { + color: #faad14; + font-size: 14px; + } + } + + .roleCompany { + font-size: 14px; + color: #8c8c8c; + margin: 0; + } + } + } + + // 头像样式 + .avatar { + border-radius: 50%; + object-fit: cover; + border: 2px solid #f0f0f0; + } + + .avatarPlaceholder { + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: 600; + border: 2px solid #f0f0f0; + } + + .contactDetails { + margin-bottom: 16px; + flex: 1; + + .contactItem { + display: flex; + margin: 0 0 8px 0; + font-size: 14px; + + .label { + color: #8c8c8c; + margin-right: 8px; + min-width: 40px; + } + } + } + + .tagsSection { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + + .tags { + display: flex; + flex-wrap: wrap; + gap: 6px; + + .tag { + background: #f5f5f5; + color: #595959; + padding: 2px 8px; + border-radius: 4px; + font-size: 12px; + } + } + + .source { + font-size: 12px; + color: #8c8c8c; + } + } + + .lastContact { + font-size: 12px; + color: #8c8c8c; + margin-bottom: 12px; + } + + .notes { + background: #f9f9f9; + padding: 8px 12px; + border-radius: 4px; + font-size: 12px; + color: #595959; + margin-bottom: 16px; + line-height: 1.4; + } + + .actions { + display: flex; + gap: 12px; + margin-top: auto; + + .actionButton { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + height: 32px; + background: white; + border: 1px solid #d9d9d9; + border-radius: 4px; + font-size: 12px; + color: #595959; + cursor: pointer; + transition: all 0.3s; + + &:hover { + border-color: #1890ff; + color: #1890ff; + } + + &:first-child:hover { + background: #e6f7ff; + } + + &:last-child:hover { + background: #f6ffed; + border-color: #52c41a; + color: #52c41a; + } + } + } +} + +// 响应式设计 +@media (max-width: 768px) { + .contactsList { + grid-template-columns: 1fr; + } + + .contactCard { + min-height: 350px; + } + + .header { + flex-direction: column; + gap: 16px; + align-items: flex-start; + + .headerRight { + width: 100%; + + .addButton { + width: 100%; + } + } + } + + .searchSection { + flex-direction: column; + + .filterButton { + width: 100%; + justify-content: center; + } + } + + .tabs { + overflow-x: auto; + white-space: nowrap; + + .tab { + flex-shrink: 0; + } + } +} diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx index 5ac24b2f..475d9cdb 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -1,20 +1,273 @@ -import React from "react"; +import React, { useState } from "react"; import PowerNavigation from "@/components/PowerNavtion"; +import { + StarOutlined, + SearchOutlined, + FilterOutlined, + MessageOutlined, + PhoneOutlined, +} from "@ant-design/icons"; import styles from "./index.module.scss"; +import { Button, Input, Row, Col } from "antd"; + +// 联系人数据类型 +interface Contact { + id: string; + name: string; + avatar?: string; + role: string; + company: string; + phone: string; + email?: string; + location: string; + tags: string[]; + source: string; + lastContact: string; + notes?: string; + isStarred?: boolean; + category: "customer" | "potential" | "partner" | "friend"; +} + +// 头像组件 +const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({ + name, + avatar, + size = 40, +}) => { + const getInitials = (name: string) => { + return name.charAt(0).toUpperCase(); + }; + + const getAvatarColor = (name: string) => { + const colors = [ + "#1890ff", + "#52c41a", + "#faad14", + "#f5222d", + "#722ed1", + "#13c2c2", + "#eb2f96", + "#fa8c16", + ]; + const index = name.charCodeAt(0) % colors.length; + return colors[index]; + }; + + if (avatar) { + return ( + {name} + ); + } + + return ( +
+ {getInitials(name)} +
+ ); +}; const CustomerManagement: React.FC = () => { + const [activeTab, setActiveTab] = useState("customer"); + const [searchValue, setSearchValue] = useState(""); + + // 模拟数据 + const contacts: Contact[] = [ + { + id: "1", + name: "李先生", + avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li", + role: "技术总监", + company: "某科技公司", + phone: "138****8888", + email: "li@company.com", + location: "北京", + tags: ["客户", "重要客户", "AI产品", "意向客户"], + source: "朋友推荐", + lastContact: "2024/3/5", + notes: "对AI产品很感兴趣,预算充足", + isStarred: true, + category: "customer", + }, + { + id: "2", + name: "张总", + role: "CEO", + company: "大型企业集团", + phone: "139****9999", + email: "zhang@enterprise.com", + location: "上海", + tags: ["潜在客户", "决策者", "大客户"], + source: "展会获客", + lastContact: "2024/3/4", + notes: "需要详细的ROI分析报告", + category: "potential", + }, + { + id: "3", + name: "王女士", + avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang", + role: "市场经理", + company: "中型贸易公司", + phone: "137****7777", + location: "深圳", + tags: ["客户", "中小企业", "价格敏感"], + source: "网络广告", + lastContact: "2024/3/3", + category: "customer", + }, + ]; + + const tabs = [ + { key: "customer", label: "客户", count: 2 }, + { key: "potential", label: "潜在客户", count: 1 }, + { key: "partner", label: "合作伙伴", count: 0 }, + { key: "friend", label: "朋友", count: 0 }, + ]; + + const filteredContacts = contacts.filter( + contact => + contact.category === activeTab && + (searchValue === "" || + contact.name.includes(searchValue) || + contact.company.includes(searchValue) || + contact.tags.some(tag => tag.includes(searchValue))), + ); + return (
添加好友} /> +
- {/* 功能内容待开发 */} -
-

客户好友管理功能正在开发中...

+ {/* 搜索和筛选 */} +
+ setSearchValue(e.target.value)} + prefix={} + allowClear + size="large" + /> + +
+ {/* 标签页 */} +
+ {tabs.map(tab => ( + + ))} +
+ + {/* 联系人卡片列表 */} +
+ + {filteredContacts.map(contact => ( + +
+
+
+ +
+

+ {contact.name} + {contact.isStarred && ( + + )} +

+

+ {contact.role} {"·"} {contact.company} +

+
+
+
+ +
+
+

+ 电话:{" "} + {contact.phone} +

+ {contact.email && ( +

+ 邮箱:{" "} + {contact.email} +

+ )} +

+ 地区:{" "} + {contact.location} +

+
+
+ +
+
+ {contact.tags.map((tag, index) => ( + + {tag} + + ))} +
+ {contact.source} +
+ +
+ 最后联系: {contact.lastContact} +
+ + {contact.notes && ( +
{contact.notes}
+ )} + +
+ + +
+
+ + ))} +
From b3bf342320b9e15885ef56451806f2f237bc016e 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: Thu, 25 Sep 2025 15:00:17 +0800 Subject: [PATCH 5/9] =?UTF-8?q?feat(=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E8=88=87=E5=BE=AE=E4=BF=A1=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=BC=B7?= =?UTF-8?q?):=20=E5=9C=A8=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86=E9=A0=81?= =?UTF-8?q?=E9=9D=A2=E4=B8=AD=EF=BC=8C=E6=95=B4=E5=90=88=E4=BA=86=E5=BE=9E?= =?UTF-8?q?=E7=8B=80=E6=85=8B=E7=AE=A1=E7=90=86=E7=8D=B2=E5=8F=96=E7=9A=84?= =?UTF-8?q?=E8=81=AF=E7=B5=A1=E4=BA=BA=E6=95=B8=E6=93=9A=EF=BC=8C=E4=B8=A6?= =?UTF-8?q?=E5=8B=95=E6=85=8B=E8=A8=88=E7=AE=97=E5=90=84=E5=88=86=E9=A1=9E?= =?UTF-8?q?=E7=9A=84=E8=81=AF=E7=B5=A1=E4=BA=BA=E6=95=B8=E9=87=8F=E3=80=82?= =?UTF-8?q?=E6=AD=A4=E5=A4=96=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=BA=86=E7=8D=B2?= =?UTF-8?q?=E5=8F=96=E5=88=86=E7=B5=84=E5=88=97=E8=A1=A8=E7=9A=84API?= =?UTF-8?q?=EF=BC=8C=E5=84=AA=E5=8C=96=E4=BA=86=E8=81=AF=E7=B5=A1=E4=BA=BA?= =?UTF-8?q?=E9=A1=AF=E7=A4=BA=E9=82=8F=E8=BC=AF=EF=BC=8C=E6=8F=90=E5=8D=87?= =?UTF-8?q?=E4=BA=86=E7=94=A8=E6=88=B6=E9=AB=94=E9=A9=97=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../powerCenter/customer-management/index.tsx | 274 ++++++++---------- Touchkebao/src/pages/pc/ckbox/weChat/api.ts | 5 + Touchkebao/src/pages/pc/ckbox/weChat/main.ts | 30 +- 3 files changed, 140 insertions(+), 169 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx index 475d9cdb..733332b3 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -1,7 +1,6 @@ -import React, { useState } from "react"; +import React, { useState, useMemo } from "react"; import PowerNavigation from "@/components/PowerNavtion"; import { - StarOutlined, SearchOutlined, FilterOutlined, MessageOutlined, @@ -9,24 +8,9 @@ import { } from "@ant-design/icons"; import styles from "./index.module.scss"; import { Button, Input, Row, Col } from "antd"; - -// 联系人数据类型 -interface Contact { - id: string; - name: string; - avatar?: string; - role: string; - company: string; - phone: string; - email?: string; - location: string; - tags: string[]; - source: string; - lastContact: string; - notes?: string; - isStarred?: boolean; - category: "customer" | "potential" | "partner" | "friend"; -} +import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { ContractData } from "@/pages/pc/ckbox/data"; +// 直接使用 ContractData 类型 // 头像组件 const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({ @@ -83,68 +67,46 @@ const CustomerManagement: React.FC = () => { const [activeTab, setActiveTab] = useState("customer"); const [searchValue, setSearchValue] = useState(""); - // 模拟数据 - const contacts: Contact[] = [ - { - id: "1", - name: "李先生", - avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=li", - role: "技术总监", - company: "某科技公司", - phone: "138****8888", - email: "li@company.com", - location: "北京", - tags: ["客户", "重要客户", "AI产品", "意向客户"], - source: "朋友推荐", - lastContact: "2024/3/5", - notes: "对AI产品很感兴趣,预算充足", - isStarred: true, - category: "customer", - }, - { - id: "2", - name: "张总", - role: "CEO", - company: "大型企业集团", - phone: "139****9999", - email: "zhang@enterprise.com", - location: "上海", - tags: ["潜在客户", "决策者", "大客户"], - source: "展会获客", - lastContact: "2024/3/4", - notes: "需要详细的ROI分析报告", - category: "potential", - }, - { - id: "3", - name: "王女士", - avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=wang", - role: "市场经理", - company: "中型贸易公司", - phone: "137****7777", - location: "深圳", - tags: ["客户", "中小企业", "价格敏感"], - source: "网络广告", - lastContact: "2024/3/3", - category: "customer", - }, - ]; + // 获取联系人数据 + const getContractList = useCkChatStore(state => state.getContractList); + const contacts: ContractData[] = getContractList(); + console.log(contacts, "contacts"); + + // 动态计算各分类的联系人数量 + const tabCounts = useMemo(() => { + return { + customer: contacts.filter(c => c.isPassed).length, + potential: contacts.filter(c => !c.isPassed).length, + partner: 0, // 可以根据业务逻辑调整 + friend: 0, // 可以根据业务逻辑调整 + }; + }, [contacts]); const tabs = [ - { key: "customer", label: "客户", count: 2 }, - { key: "potential", label: "潜在客户", count: 1 }, - { key: "partner", label: "合作伙伴", count: 0 }, - { key: "friend", label: "朋友", count: 0 }, + { key: "customer", label: "客户", count: tabCounts.customer }, + { key: "potential", label: "潜在客户", count: tabCounts.potential }, + { key: "partner", label: "合作伙伴", count: tabCounts.partner }, + { key: "friend", label: "朋友", count: tabCounts.friend }, ]; - const filteredContacts = contacts.filter( - contact => - contact.category === activeTab && - (searchValue === "" || - contact.name.includes(searchValue) || - contact.company.includes(searchValue) || - contact.tags.some(tag => tag.includes(searchValue))), - ); + // const filteredContacts = contacts.filter(contact => { + // const isCategoryMatch = + // (activeTab === "customer" && contact.isPassed) || + // (activeTab === "potential" && !contact.isPassed) || + // activeTab === "partner" || + // activeTab === "friend"; + + // const isSearchMatch = + // searchValue === "" || + // contact.nickname?.includes(searchValue) || + // contact.conRemark?.includes(searchValue) || + // contact.alias?.includes(searchValue) || + // contact.desc?.includes(searchValue) || + // contact.labels?.some(tag => tag.includes(searchValue)); + + // return isCategoryMatch && isSearchMatch; + // }); + const filteredContacts = contacts; return (
@@ -160,7 +122,7 @@ const CustomerManagement: React.FC = () => { {/* 搜索和筛选 */}
setSearchValue(e.target.value)} prefix={} @@ -191,83 +153,95 @@ const CustomerManagement: React.FC = () => { {/* 联系人卡片列表 */}
- - {filteredContacts.map(contact => ( - -
-
-
- -
-

- {contact.name} - {contact.isStarred && ( - - )} -

-

- {contact.role} {"·"} {contact.company} + {filteredContacts.length === 0 ? ( +

+

暂无联系人数据

+
+ ) : ( + + {filteredContacts.map(contact => ( + +
+
+
+ +
+

+ {contact.conRemark || + contact.nickname || + contact.alias || + "未知用户"} +

+

+ 客户 {"·"} {contact.desc || "未设置公司"} +

+
+
+
+ +
+
+

+ 电话:{" "} + {contact.phone || "未设置电话"} +

+

+ 地区:{" "} + {contact.region || contact.city || "未设置地区"} +

+

+ 微信ID:{" "} + {contact.wechatId}

-
-
-
-

- 电话:{" "} - {contact.phone} -

- {contact.email && ( -

- 邮箱:{" "} - {contact.email} -

- )} -

- 地区:{" "} - {contact.location} -

+
+
+ {contact?.labels?.map((tag: string, index: number) => ( + + {tag} + + ))} +
+ 微信好友 +
+ +
+ 最后联系:{" "} + {contact.lastMessageTime + ? new Date(contact.lastMessageTime).toLocaleDateString() + : "未联系"} +
+ + {contact.signature && ( +
{contact.signature}
+ )} + +
+ +
- -
-
- {contact.tags.map((tag, index) => ( - - {tag} - - ))} -
- {contact.source} -
- -
- 最后联系: {contact.lastContact} -
- - {contact.notes && ( -
{contact.notes}
- )} - -
- - -
-
- - ))} - + + ))} + + )}
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/api.ts b/Touchkebao/src/pages/pc/ckbox/weChat/api.ts index 74b84462..4bdac18d 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/api.ts +++ b/Touchkebao/src/pages/pc/ckbox/weChat/api.ts @@ -37,6 +37,11 @@ export function getContactList(params) { export function getGroupList(params) { return request("/v1/kefu/wechatChatroom/list", params, "GET"); } +// 分组列表 +export function getLabelsListByGroup(params) { + return request("/v1/kefu/wechatGroup/list", params, "GET"); +} + //==============-原接口================= // 获取联系人列表 // export const getContactList = (params: { prevId: number; count: number }) => { diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/main.ts b/Touchkebao/src/pages/pc/ckbox/weChat/main.ts index 08f91c03..3dee0af5 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/main.ts +++ b/Touchkebao/src/pages/pc/ckbox/weChat/main.ts @@ -14,6 +14,7 @@ import { getContactList, getGroupList, getAgentList, + getLabelsListByGroup, } from "./api"; import { useUserStore } from "@/store/module/user"; @@ -41,10 +42,10 @@ export const chatInitAPIdata = async () => { await asyncWeChatGroup(groupList); // 提取不重复的wechatAccountId组 - const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds( - contractList, - groupList, - ); + // const uniqueWechatAccountIds: number[] = getUniqueWechatAccountIds( + // contractList, + // groupList, + // ); //获取控制终端列表 const kfUserList: KfUserListData[] = await getAgentList(); @@ -53,8 +54,8 @@ export const chatInitAPIdata = async () => { await asyncKfUserList(kfUserList); //获取标签列表 - // const countLables = await getCountLables(); - // await asyncCountLables(countLables); + const countLables = await getCountLables(); + await asyncCountLables(countLables); //获取消息会话列表并按lastUpdateTime排序 const filterUserSessions = contractList?.filter( @@ -121,15 +122,9 @@ export const initSocket = () => { }; export const getCountLables = async () => { - const LablesRes = await Promise.all( - [1, 2].map(item => - WechatGroup({ - groupType: item, - }), - ), - ); - const [friend, group] = LablesRes; - const countLables = [ + const Result = await getLabelsListByGroup({}); + const LablesRes = Result.list; + return [ ...[ { id: 0, @@ -137,8 +132,7 @@ export const getCountLables = async () => { groupType: 2, }, ], - ...group, - ...friend, + ...LablesRes, ...[ { id: 0, @@ -147,8 +141,6 @@ export const getCountLables = async () => { }, ], ]; - - return countLables; }; /** * 根据标签组织联系人 From 5acdd13966a00a1befb16144f8b9ccbac7e464d2 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: Thu, 25 Sep 2025 15:39:44 +0800 Subject: [PATCH 6/9] =?UTF-8?q?feat(=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A0=81=E9=9D=A2=E5=84=AA=E5=8C=96):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=AE=A2=E6=88=B6=E7=AE=A1=E7=90=86=E9=A0=81=E9=9D=A2=EF=BC=8C?= =?UTF-8?q?=E8=AA=BF=E6=95=B4=E8=81=AF=E7=B5=A1=E4=BA=BA=E5=8D=A1=E7=89=87?= =?UTF-8?q?=E7=9A=84=E6=9C=80=E5=B0=8F=E9=AB=98=E5=BA=A6=EF=BC=8C=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81=E7=9A=84=E6=A8=A3=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E4=B8=A6=E6=95=B4=E5=90=88=E8=81=AF=E7=B5=A1=E4=BA=BA?= =?UTF-8?q?=E6=95=B8=E6=93=9A=E5=8A=A0=E8=BC=89=E9=82=8F=E8=BC=AF=EF=BC=8C?= =?UTF-8?q?=E6=8F=90=E5=8D=87=E9=A0=81=E9=9D=A2=E6=80=A7=E8=83=BD=E8=88=87?= =?UTF-8?q?=E7=94=A8=E6=88=B6=E9=AB=94=E9=A9=97=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../customer-management/index.module.scss | 4 +- .../powerCenter/customer-management/index.tsx | 432 +++++++++++------- Touchkebao/src/styles/global.scss | 8 + 3 files changed, 275 insertions(+), 169 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss index a290c73b..2eb4278c 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss @@ -116,7 +116,6 @@ .tabs { display: flex; gap: 0; - margin-bottom: 24px; border-bottom: 1px solid #f0f0f0; .tab { @@ -155,7 +154,6 @@ padding: 20px; transition: all 0.3s; height: 100%; - min-height: 380px; display: flex; flex-direction: column; @@ -320,7 +318,7 @@ } .contactCard { - min-height: 350px; + min-height: 175px; } .header { diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx index 733332b3..53914ab0 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import PowerNavigation from "@/components/PowerNavtion"; import { SearchOutlined, @@ -7,11 +7,10 @@ import { PhoneOutlined, } from "@ant-design/icons"; import styles from "./index.module.scss"; -import { Button, Input, Row, Col } from "antd"; -import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { Button, Input, Row, Col, Pagination, Spin, message } from "antd"; +import { getContactList } from "@/pages/pc/ckbox/weChat/api"; import { ContractData } from "@/pages/pc/ckbox/data"; -// 直接使用 ContractData 类型 - +import Layout from "@/components/Layout/LayoutFiexd"; // 头像组件 const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({ name, @@ -64,187 +63,288 @@ const Avatar: React.FC<{ name: string; avatar?: string; size?: number }> = ({ }; const CustomerManagement: React.FC = () => { - const [activeTab, setActiveTab] = useState("customer"); + const [activeTab, setActiveTab] = useState("all"); const [searchValue, setSearchValue] = useState(""); + const [contacts, setContacts] = useState([]); + const [loading, setLoading] = useState(false); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 12, + total: 0, + }); - // 获取联系人数据 - const getContractList = useCkChatStore(state => state.getContractList); - const contacts: ContractData[] = getContractList(); - console.log(contacts, "contacts"); - - // 动态计算各分类的联系人数量 - const tabCounts = useMemo(() => { - return { - customer: contacts.filter(c => c.isPassed).length, - potential: contacts.filter(c => !c.isPassed).length, - partner: 0, // 可以根据业务逻辑调整 - friend: 0, // 可以根据业务逻辑调整 - }; - }, [contacts]); + // 获取各分类的总数 + const [tabCounts, setTabCounts] = useState({ + all: 0, + customer: 0, + potential: 0, + partner: 0, + friend: 0, + }); const tabs = [ + { key: "all", label: "全部", count: tabCounts.all }, { key: "customer", label: "客户", count: tabCounts.customer }, { key: "potential", label: "潜在客户", count: tabCounts.potential }, { key: "partner", label: "合作伙伴", count: tabCounts.partner }, { key: "friend", label: "朋友", count: tabCounts.friend }, ]; - // const filteredContacts = contacts.filter(contact => { - // const isCategoryMatch = - // (activeTab === "customer" && contact.isPassed) || - // (activeTab === "potential" && !contact.isPassed) || - // activeTab === "partner" || - // activeTab === "friend"; + // 加载联系人数据 + const loadContacts = async (page: number = 1, pageSize: number = 12) => { + try { + setLoading(true); - // const isSearchMatch = - // searchValue === "" || - // contact.nickname?.includes(searchValue) || - // contact.conRemark?.includes(searchValue) || - // contact.alias?.includes(searchValue) || - // contact.desc?.includes(searchValue) || - // contact.labels?.some(tag => tag.includes(searchValue)); + // 构建请求参数 + const params: any = { + page, + limit: pageSize, + }; + + // 添加搜索条件 + if (searchValue.trim()) { + params.keyword = searchValue; + } + + // 添加分类筛选 + if (activeTab === "customer") { + params.isPassed = true; + } else if (activeTab === "potential") { + params.isPassed = false; + } + // "全部"、"partner" 和 "friend" 不添加额外筛选条件 + + const response = await getContactList(params); + + // 假设接口返回格式为 { data: Contact[], total: number, page: number, limit: number } + setContacts(response.data || response.list || []); + setPagination(prev => ({ + ...prev, + current: response.page || page, + pageSize: response.limit || pageSize, + total: response.total || 0, + })); + + // 更新分类统计 + if (page === 1) { + // 只在第一页时更新统计，避免重复请求 + const allResponse = await getContactList({ page: 1, limit: 1 }); + const customerResponse = await getContactList({ + page: 1, + limit: 1, + isPassed: true, + }); + const potentialResponse = await getContactList({ + page: 1, + limit: 1, + isPassed: false, + }); + + setTabCounts({ + all: allResponse.total || 0, + customer: customerResponse.total || 0, + potential: potentialResponse.total || 0, + partner: 0, // 可以根据业务逻辑调整 + friend: 0, // 可以根据业务逻辑调整 + }); + } + } catch (error) { + console.error("加载联系人数据失败:", error); + message.error("加载联系人数据失败，请稍后重试"); + } finally { + setLoading(false); + } + }; + + // 当分类或搜索条件改变时重新加载数据 + useEffect(() => { + loadContacts(1, pagination.pageSize); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [activeTab, searchValue, pagination.pageSize]); - // return isCategoryMatch && isSearchMatch; - // }); const filteredContacts = contacts; return ( -
- 添加好友} - /> - -
- {/* 搜索和筛选 */} -
- setSearchValue(e.target.value)} - prefix={} - allowClear - size="large" - /> - -
- {/* 标签页 */} -
- {tabs.map(tab => ( - - ))} -
- - {/* 联系人卡片列表 */} -
- {filteredContacts.length === 0 ? ( -
-

暂无联系人数据

+ +
+ 添加好友} + /> + {/* 搜索和筛选 */} +
+ setSearchValue(e.target.value)} + prefix={} + allowClear + size="large" + /> +
- ) : ( - - {filteredContacts.map(contact => ( - -
-
-
- -
-

- {contact.conRemark || - contact.nickname || - contact.alias || - "未知用户"} -

-

- 客户 {"·"} {contact.desc || "未设置公司"} -

+ {/* 标签页 */} +
+ {tabs.map(tab => ( + + ))} +
+
+ + } + footer={ +
+ + `第 ${range[0]}-${range[1]} 条，共 ${total} 条` + } + onChange={(page, pageSize) => { + loadContacts(page, pageSize || pagination.pageSize); + }} + onShowSizeChange={(current, size) => { + loadContacts(1, size); + }} + pageSizeOptions={["6", "12", "24", "48"]} + /> +
+ } + > +
+
+ {/* 联系人卡片列表 */} +
+ {loading ? ( +
+ +

+ 正在加载联系人数据... +

+
+ ) : filteredContacts.length === 0 ? ( +
+

暂无联系人数据

+
+ ) : ( + <> + + {filteredContacts.map(contact => ( + +
+
+
+ +
+

+ {contact.conRemark || + contact.nickname || + contact.alias || + "未知用户"} +

+

+ 客户 {"·"} {contact.desc || "未设置公司"} +

+
+
+
+ +
+
+

+ 电话:{" "} + {contact.phone || "未设置电话"} +

+

+ 地区:{" "} + {contact.region || contact.city || "未设置地区"} +

+

+ 微信ID:{" "} + {contact.wechatId} +

+
+
+ +
+
+ {contact?.labels?.map( + (tag: string, index: number) => ( + + {tag} + + ), + )} +
+ 微信好友 +
+ +
+ 最后联系:{" "} + {contact.lastMessageTime + ? new Date( + contact.lastMessageTime, + ).toLocaleDateString() + : "未联系"} +
+ + {contact.signature && ( +
+ {contact.signature} +
+ )} + +
+ +
-
- -
-
-

- 电话:{" "} - {contact.phone || "未设置电话"} -

-

- 地区:{" "} - {contact.region || contact.city || "未设置地区"} -

-

- 微信ID:{" "} - {contact.wechatId} -

-
-
- -
-
- {contact?.labels?.map((tag: string, index: number) => ( - - {tag} - - ))} -
- 微信好友 -
- -
- 最后联系:{" "} - {contact.lastMessageTime - ? new Date(contact.lastMessageTime).toLocaleDateString() - : "未联系"} -
- - {contact.signature && ( -
{contact.signature}
- )} - -
- - -
-
- - ))} - - )} + + ))} + + + )} +
-
+ ); }; diff --git a/Touchkebao/src/styles/global.scss b/Touchkebao/src/styles/global.scss index 0b681cc6..16c25c87 100644 --- a/Touchkebao/src/styles/global.scss +++ b/Touchkebao/src/styles/global.scss @@ -315,3 +315,11 @@ button { flex: 1; } } +.pagination-wrapper { + display: flex; + justify-content: center; + align-items: center; + padding: 16px; + background: white; + border-top: 1px solid #f0f0f0; +} From d2ab632f2fdbfb32183e56dbe2c222d710a0b093 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: Thu, 25 Sep 2025 15:47:45 +0800 Subject: [PATCH 7/9] =?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 --- .../powerCenter/customer-management/index.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx index 53914ab0..477b8def 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -310,15 +310,6 @@ const CustomerManagement: React.FC = () => { 微信好友
-
- 最后联系:{" "} - {contact.lastMessageTime - ? new Date( - contact.lastMessageTime, - ).toLocaleDateString() - : "未联系"} -
- {contact.signature && (
{contact.signature} @@ -326,14 +317,10 @@ const CustomerManagement: React.FC = () => { )}
- - +
From e506334689d533dfea6dab9892aa982f6049fee7 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: Thu, 25 Sep 2025 15:50:00 +0800 Subject: [PATCH 8/9] =?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 --- .../pc/ckbox/powerCenter/customer-management/index.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx index 477b8def..07a71c7f 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -307,15 +307,8 @@ const CustomerManagement: React.FC = () => { ), )}
- 微信好友
- {contact.signature && ( -
- {contact.signature} -
- )} -
+
{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" && ( +
+ {/* 左侧创建规则表单 */} +
+ +

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

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