From fe62708aa3f24cf83031239d6cdcd4879290cfab 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:01 +0800 Subject: [PATCH 01/18] 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 6380b8752b52a5233f3ee4b76ddfc5d3b7270bb8 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:31:54 +0800 Subject: [PATCH 02/18] =?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 9816d7ec184fc7048a29884a7ae2eb188499b613 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Fri, 12 Sep 2025 15:33:54 +0800 Subject: [PATCH 03/18] =?UTF-8?q?feat(powerCenter):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E5=8F=8A?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加功能中心页面，包含9个功能卡片展示和分类筛选 更新路由配置和导航菜单数据，移除无用代码和样式 --- .../ckbox/components/NavCommon/index.data.ts | 22 +- .../components/NavCommon/index.module.scss | 1 - .../pc/ckbox/components/NavCommon/index.tsx | 7 - .../pc/ckbox/powerCenter/index.module.scss | 238 ++++++++++++++++++ .../src/pages/pc/ckbox/powerCenter/index.tsx | 181 +++++++++++++ .../weChat/components/ChatWindow/index.tsx | 27 -- Touchkebao/src/router/module/pc.tsx | 6 +- 7 files changed, 436 insertions(+), 46 deletions(-) create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts index bdc0fb8b..5404b4f6 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts @@ -8,18 +8,24 @@ export interface MenuItem { // 菜单列表数据 export const menuList: MenuItem[] = [ - { - id: "dashboard", - title: "数据面板", - icon: "📊", - path: "/pc/dashboard", - }, { id: "wechat", title: "微信管理", icon: "💬", path: "/pc/weChat", }, + { + id: "powerCenter", + title: "功能中心", + icon: "📊", + path: "/pc/powerCenter", + }, + { + id: "dashboard", + title: "数据面板", + icon: "📊", + path: "/pc/dashboard", + }, ]; // 抽屉菜单配置数据 @@ -29,10 +35,6 @@ export const drawerMenuData = { appName: "触客宝", appDesc: "AI智能营销系统", }, - primaryButton: { - title: "AI智能客服", - icon: "🔒", - }, footer: { balanceIcon: "⚡", balanceLabel: "算力余额", diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 75333cfb..ceb7d1c3 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -142,7 +142,6 @@ .drawerBody { flex: 1; - padding: 20px; display: flex; flex-direction: column; gap: 16px; diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index e959e9b2..c3161f23 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -22,7 +22,6 @@ const NavCommon: React.FC = ({ const navigate = useNavigate(); const { userInfo } = useCkChatStore(); const { user } = useUserStore(); - console.log(user); // 处理菜单图标点击 const handleMenuClick = () => { @@ -54,12 +53,6 @@ const NavCommon: React.FC = ({
-
-
- {drawerMenuData.primaryButton.icon} -
- {drawerMenuData.primaryButton.title} -
{menuList.map((item, index) => (
{ + const navigate = useNavigate(); + + const featureCards: FeatureCard[] = [ + { + id: "precision-send", + title: "精准群发", + description: "基于客户标签和行为数据进行精准群发", + icon: , + color: "#ff6b35", + path: "/pc/ckbox/precision-send", + }, + { + id: "sop-send", + title: "SOP群发", + description: "使用触客宝SOP标准化流程进行批量消息发送", + icon: , + color: "#4285f4", + path: "/pc/ckbox/sop-send", + }, + { + id: "moments-marketing", + title: "朋友圈营销", + description: "AI智能生成朋友圈内容，提升品牌曝光度", + icon: , + color: "#34a853", + path: "/pc/ckbox/moments-marketing", + }, + { + id: "tag-management", + title: "标签管理", + description: "智能客户标签分类，精准用户画像分析", + icon: , + color: "#9c27b0", + path: "/pc/ckbox/tag-management", + }, + { + id: "customer-management", + title: "客户好友管理", + description: "统一管理客户信息和好友关系，提升服务效率", + icon: , + color: "#6366f1", + path: "/pc/ckbox/customer-management", + }, + { + id: "communication-record", + title: "沟通记录", + description: "完整记录客户沟通历史，支持多维度查询分析", + icon: , + color: "#06b6d4", + path: "/pc/ckbox/communication-record", + }, + { + id: "content-management", + title: "内容管理", + description: "素材管理、数据词汇库、关键词自动回复", + icon: , + color: "#f59e0b", + path: "/pc/ckbox/content-management", + }, + { + id: "ai-training", + title: "AI模型训练", + description: "自定义AI模型训练，打造专属智能客服助手", + icon: , + color: "#ec4899", + path: "/pc/ckbox/ai-training", + isNew: true, + }, + { + id: "auto-greeting", + title: "自动打招呼", + description: "智能识别新好友，自动发送个性化欢迎消息", + icon: , + color: "#10b981", + path: "/pc/ckbox/auto-greeting", + }, + ]; + + const handleCardClick = (card: FeatureCard) => { + if (card.path) { + navigate(card.path); + } + }; + + const tabItems = [ + { key: "all", label: "全部功能", active: true }, + { key: "marketing", label: "营销推广" }, + { key: "customer", label: "客户管理" }, + { key: "ai", label: "AI智能" }, + { key: "content", label: "内容管理" }, + { key: "data", label: "数据分析" }, + ]; + + return ( +
+ {/* 页面头部 */} +
+
+

功能中心

+

触客宝AI私域营销系统 - 所有功能一览

+
+
+ + {tabItems.map(item => ( + + ))} + +
+
+ + {/* 功能卡片网格 */} +
+ + {featureCards.map(card => ( + + handleCardClick(card)} + bodyStyle={{ padding: "24px" }} + > +
+
+
{card.icon}
+
+
+

+ {card.title} + {card.isNew && ( + 新功能 + )} +

+

{card.description}

+
+
+ + + ))} + +
+
+ ); +}; + +export default PowerCenter; diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx index 143198f6..6077ff79 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx @@ -26,26 +26,6 @@ const ChatWindow: React.FC = ({ contract }) => { const onToggleProfile = () => { setShowProfile(!showProfile); }; - const chatMenu = ( - - }> - 查看资料 - - }> - 语音通话 - - }> - 视频通话 - - - 置顶聊天 - 消息免打扰 - - - 清空聊天记录 - - - ); return ( @@ -76,13 +56,6 @@ const ChatWindow: React.FC = ({ contract }) => { className={styles.headerButton} /> - - @@ -144,7 +65,7 @@ const PowerCenter: React.FC = () => { {/* 功能卡片网格 */}
- {featureCards.map(card => ( + {filteredCards.map(card => ( Date: Fri, 12 Sep 2025 16:19:08 +0800 Subject: [PATCH 05/18] =?UTF-8?q?feat(NavCommon):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=B6=88=E6=81=AF=E4=B8=AD=E5=BF=83=E5=92=8C=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重新设计用户信息区域样式，增加间距和悬停效果 - 添加消息中心抽屉组件，包含消息列表和操作按钮 - 实现用户下拉菜单，包含个人资料和退出登录选项 - 统一PC端和移动端的导航栏样式 --- .../components/NavCommon/index.module.scss | 80 +++++++-- .../components/NavCommon/index.module.scss | 161 +++++++++++++++-- .../pc/ckbox/components/NavCommon/index.tsx | 164 +++++++++++++++++- 3 files changed, 376 insertions(+), 29 deletions(-) diff --git a/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 75333cfb..6bf58b79 100644 --- a/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Cunkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -43,33 +43,91 @@ .headerRight { display: flex; align-items: center; + gap: 16px; } .userInfo { - cursor: pointer; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.3s; + display: flex; + align-items: center; + gap: 16px; + padding: 8px 0; - &:hover { - background-color: #f5f5f5; - } .suanli { - font-size: 16px; + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; color: #666; + font-weight: 500; + padding: 6px 12px; + background: #f8f9fa; + border-radius: 20px; + border: 1px solid #e9ecef; + .suanliIcon { - font-size: 24px; + font-size: 16px; + color: #ffc107; } } } -.avatar { - border: 2px solid #f0f0f0; +.messageButton { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: 50%; transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; &:hover { + background-color: #f8f9fa; border-color: #1890ff; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); } + + .anticon { + font-size: 18px; + color: #666; + } +} + +.userSection { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 8px 16px; + border-radius: 24px; + transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; + + &:hover { + background-color: #f8f9fa; + border-color: #1890ff; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15); + } +} + +.userNickname { + font-size: 14px; + color: #333; + font-weight: 600; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.avatar { + border: 2px solid #e9ecef; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .username { diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index ceb7d1c3..abb8c2aa 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -43,32 +43,173 @@ .headerRight { display: flex; align-items: center; + gap: 16px; + padding-right: 10px; } .userInfo { - cursor: pointer; - padding: 8px 12px; - border-radius: 6px; - transition: all 0.3s; + display: flex; + align-items: center; + gap: 16px; + padding: 8px 0; - &:hover { - background-color: #f5f5f5; - } .suanli { + display: flex; + align-items: center; + gap: 4px; font-size: 16px; color: #666; + font-weight: 500; + cursor: pointer; + .suanliIcon { - font-size: 24px; + font-size: 20px; + color: #ffc107; + } + &:hover { + color: #52c41a; + transition: all 0.3s; } } } +.bell { + cursor: pointer; + background: #f5f5f5; +} + +.messageButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 80px; + transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; + cursor: pointer; + &:hover { + background-color: #f8f9fa; + border-color: #1890ff; + box-shadow: 0 0px 12px rgba(24, 144, 255, 0.15); + } + + .anticon { + font-size: 18px; + color: #666; + } +} + +.userSection { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 8px 16px; +} + +.userNickname { + font-size: 14px; + color: #333; + font-weight: 600; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .avatar { - border: 2px solid #f0f0f0; + border: 2px solid #e9ecef; transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +// 消息抽屉样式 +.messageDrawer { + :global(.ant-drawer-header) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-drawer-body) { + padding: 0; + } +} + +.messageContent { + height: 100%; + overflow-y: auto; +} + +.messageItem { + display: flex; + padding: 16px; + border-bottom: 1px solid #f5f5f5; + transition: background-color 0.2s; &:hover { - border-color: #1890ff; + background-color: #fafafa; + } + + &:last-child { + border-bottom: none; + } +} + +.messageAvatar { + margin-right: 12px; + flex-shrink: 0; +} + +.messageInfo { + flex: 1; + min-width: 0; +} + +.messageTitle { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; +} + +.messageType { + font-size: 14px; + font-weight: 500; + color: #262626; +} + +.messageStatus { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #1890ff; +} + +.messageText { + font-size: 13px; + color: #595959; + line-height: 1.4; + margin-bottom: 8px; + word-break: break-word; +} + +.messageTime { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + color: #8c8c8c; +} + +.messageActions { + display: flex; + gap: 8px; + margin-top: 8px; + + :global(.ant-btn) { + height: 24px; + padding: 0 8px; + font-size: 12px; } } diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index c3161f23..f2da7d2a 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -1,6 +1,12 @@ import React, { useState } from "react"; -import { Layout, Drawer, Avatar, Space, Button } from "antd"; -import { MenuOutlined, UserOutlined } from "@ant-design/icons"; +import { Layout, Drawer, Avatar, Space, Button, Badge, Dropdown } from "antd"; +import { + MenuOutlined, + UserOutlined, + BellOutlined, + UserSwitchOutlined, + LogoutOutlined, +} from "@ant-design/icons"; import { useUserStore } from "@/store/module/user"; import { useCkChatStore } from "@/store/module/ckchat/ckchat"; import { useNavigate } from "react-router-dom"; @@ -19,9 +25,12 @@ const NavCommon: React.FC = ({ onMenuClick, }) => { const [drawerVisible, setDrawerVisible] = useState(false); + const [messageDrawerVisible, setMessageDrawerVisible] = useState(false); + const [messageCount] = useState(3); // 模拟消息数量 const navigate = useNavigate(); const { userInfo } = useCkChatStore(); const { user } = useUserStore(); + console.log(user); // 处理菜单图标点击 const handleMenuClick = () => { @@ -34,6 +43,49 @@ const NavCommon: React.FC = ({ setDrawerVisible(false); }; + // 处理消息中心点击 + const handleMessageClick = () => { + setMessageDrawerVisible(true); + }; + + // 处理消息抽屉关闭 + const handleMessageDrawerClose = () => { + setMessageDrawerVisible(false); + }; + + // 处理退出登录 + const handleLogout = () => { + console.log("退出登录"); + // TODO: 实现退出登录逻辑 + }; + + // 用户菜单项 + const userMenuItems = [ + { + key: "userInfo", + label: ( +
+ {user.username}（{user.account}） +
+ ), + }, + { + key: "profile", + icon: , + label: "个人资料", + onClick: () => { + console.log("个人资料点击"); + // TODO: 跳转到个人资料页面 + }, + }, + { + key: "logout", + icon: , + label: "退出登录", + onClick: handleLogout, + }, + ]; + // 默认抽屉内容 const defaultDrawerContent = (
@@ -106,12 +158,28 @@ const NavCommon: React.FC = ({ ⚡ 9307.423 - } - src={user?.avatar} - className={styles.avatar} - /> + +
+ } + src={user?.avatar} + className={styles.avatar} + /> +
+ + +
+ +
+
@@ -126,6 +194,86 @@ const NavCommon: React.FC = ({ > {defaultDrawerContent} + + + + + } + > +
+
+
+ + 林 + +
+
+
+ 新消息 +
+
+
+ 林秀杰：关于自由主时间特惠，原价1999元，现在只需1699元 +
+
+ 03-05 + +
+
+
+ +
+
+ + E + +
+
+
+ 群提醒 +
+
+
+ Eric在「云归营私域银行项目群」中@了您 +
+
03-05
+
+
+ +
+
+ + 李 + +
+
+
+ 好友申请 +
+
李翔想请求添加您为好友
+
03-04
+
+ + +
+
+
+
+ ); }; From f2fb543f93f5fc509eb8eee4ce710016957b15f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Fri, 12 Sep 2025 17:49:23 +0800 Subject: [PATCH 06/18] =?UTF-8?q?feat(NavCommon):=20=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增图标组件并替换原有emoji图标 - 重构导航菜单数据结构并移除无用代码 - 实现菜单项激活状态高亮效果 - 完善用户退出登录功能 - 优化样式文件结构并添加详细注释 - 更新构建产物文件版本 --- Cunkebao/dist/.vite/manifest.json | 26 +- Cunkebao/dist/index.html | 8 +- .../{index.data.ts => index.data.tsx} | 15 +- .../components/NavCommon/index.module.scss | 725 ++++++++++-------- .../pc/ckbox/components/NavCommon/index.tsx | 49 +- Touchkebao/src/utils/icon.tsx | 7 + 6 files changed, 453 insertions(+), 377 deletions(-) rename Touchkebao/src/pages/pc/ckbox/components/NavCommon/{index.data.ts => index.data.tsx} (69%) create mode 100644 Touchkebao/src/utils/icon.tsx diff --git a/Cunkebao/dist/.vite/manifest.json b/Cunkebao/dist/.vite/manifest.json index 426614a4..2289b6a9 100644 --- a/Cunkebao/dist/.vite/manifest.json +++ b/Cunkebao/dist/.vite/manifest.json @@ -1,14 +1,18 @@ { - "_charts-DN1cefc8.js": { - "file": "assets/charts-DN1cefc8.js", + "_charts-aNYyX7D2.js": { + "file": "assets/charts-aNYyX7D2.js", "name": "charts", "imports": [ - "_ui-5V-xZWkf.js", + "_ui-DZwp85UP.js", "_vendor-Bq99rrm8.js" ] }, - "_ui-5V-xZWkf.js": { - "file": "assets/ui-5V-xZWkf.js", + "_ui-D0C0OGrH.css": { + "file": "assets/ui-D0C0OGrH.css", + "src": "_ui-D0C0OGrH.css" + }, + "_ui-DZwp85UP.js": { + "file": "assets/ui-DZwp85UP.js", "name": "ui", "imports": [ "_vendor-Bq99rrm8.js" @@ -17,10 +21,6 @@ "assets/ui-D0C0OGrH.css" ] }, - "_ui-D0C0OGrH.css": { - "file": "assets/ui-D0C0OGrH.css", - "src": "_ui-D0C0OGrH.css" - }, "_utils-Ft3ushmX.js": { "file": "assets/utils-Ft3ushmX.js", "name": "utils", @@ -33,18 +33,18 @@ "name": "vendor" }, "index.html": { - "file": "assets/index-9Clf2a7g.js", + "file": "assets/index-CCIZs36L.js", "name": "index", "src": "index.html", "isEntry": true, "imports": [ "_vendor-Bq99rrm8.js", - "_ui-5V-xZWkf.js", + "_ui-DZwp85UP.js", "_utils-Ft3ushmX.js", - "_charts-DN1cefc8.js" + "_charts-aNYyX7D2.js" ], "css": [ - "assets/index-CK1wd128.css" + "assets/index-DRrzDMi4.css" ] } } \ No newline at end of file diff --git a/Cunkebao/dist/index.html b/Cunkebao/dist/index.html index 408e052b..9b257a9d 100644 --- a/Cunkebao/dist/index.html +++ b/Cunkebao/dist/index.html @@ -11,13 +11,13 @@ - + - + - + - +
diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx similarity index 69% rename from Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts rename to Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx index 5404b4f6..94ae6d0e 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.ts +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.data.tsx @@ -1,8 +1,9 @@ +import { BarChartOutlined, RobotOutlined } from "@ant-design/icons"; // 菜单项接口 export interface MenuItem { id: string; title: string; - icon: string; + icon: React.ReactNode; path?: string; } @@ -10,22 +11,16 @@ export interface MenuItem { export const menuList: MenuItem[] = [ { id: "wechat", - title: "微信管理", - icon: "💬", + title: "AI智能客服", + icon: , path: "/pc/weChat", }, { id: "powerCenter", title: "功能中心", - icon: "📊", + icon: , path: "/pc/powerCenter", }, - { - id: "dashboard", - title: "数据面板", - icon: "📊", - path: "/pc/dashboard", - }, ]; // 抽屉菜单配置数据 diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index abb8c2aa..1e9b197c 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -1,3 +1,32 @@ +/** + * NavCommon 组件样式文件 + * + * 文件结构说明： + * 1. Header 区域样式 - 顶部导航栏相关样式 + * - headerLeft: 左侧菜单按钮和标题 + * - headerRight: 右侧用户信息、算力显示、消息按钮等 + * + * 2. Drawer 抽屉区域样式 - 左侧菜单抽屉相关样式 + * - drawerContent: 抽屉内容容器 + * - drawerHeader: 抽屉头部（Logo区域） + * - drawerBody: 抽屉主体（主要按钮和菜单项） + * - drawerFooter: 抽屉底部（余额显示） + * + * 3. 消息抽屉区域样式 - 右侧消息中心抽屉相关样式 + * - messageContent: 消息列表容器 + * - messageItem: 单个消息项样式 + * + * 4. 兼容样式 - 保持向后兼容的独立样式类 + * + * 5. 响应式设计 - 移动端适配样式 + * + * 样式组织原则： + * - 按照 tsx 文件中的嵌套结构组织样式 + * - 使用 SCSS 嵌套语法体现 DOM 层级关系 + * - 相关样式就近放置，便于维护 + */ + +// ===== Header 区域样式 ===== .header { background: #fff; padding: 0 16px; @@ -7,212 +36,129 @@ justify-content: space-between; height: 64px; border-bottom: 1px solid #f0f0f0; -} -.headerLeft { - display: flex; - align-items: center; - gap: 12px; -} - -.menuButton { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 6px; - transition: all 0.3s; - - &:hover { - background-color: #f5f5f5; - } - - .anticon { - font-size: 18px; - color: #666; - } -} - -.title { - font-size: 18px; - color: #333; - margin: 0; -} - -.headerRight { - display: flex; - align-items: center; - gap: 16px; - padding-right: 10px; -} - -.userInfo { - display: flex; - align-items: center; - gap: 16px; - padding: 8px 0; - - .suanli { + // Header 左侧区域 + .headerLeft { display: flex; align-items: center; - gap: 4px; - font-size: 16px; - color: #666; - font-weight: 500; - cursor: pointer; + gap: 12px; - .suanliIcon { - font-size: 20px; - color: #ffc107; - } - &:hover { - color: #52c41a; + .menuButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 6px; transition: all 0.3s; + + &:hover { + background-color: #f5f5f5; + } + + .anticon { + font-size: 18px; + color: #666; + } + } + + .title { + font-size: 18px; + color: #333; + margin: 0; + } + } + + // Header 右侧区域 + .headerRight { + display: flex; + align-items: center; + gap: 16px; + padding-right: 10px; + + .userInfo { + display: flex; + align-items: center; + gap: 16px; + padding: 8px 0; + + .suanli { + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; + color: #666; + font-weight: 500; + cursor: pointer; + + .suanliIcon { + font-size: 20px; + color: #ffc107; + } + + &:hover { + color: #52c41a; + transition: all 0.3s; + } + } + + .avatar { + border: 2px solid #e9ecef; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } + } + + .messageButton { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 80px; + transition: all 0.3s; + border: 1px solid #e9ecef; + background: #fff; + cursor: pointer; + + &:hover { + background-color: #f8f9fa; + border-color: #1890ff; + box-shadow: 0 0px 12px rgba(24, 144, 255, 0.15); + } + + .anticon { + font-size: 18px; + color: #666; + } + } + + .userSection { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + padding: 8px 16px; + } + + .userNickname { + font-size: 14px; + color: #333; + font-weight: 600; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } } + +// 兼容旧样式（避免破坏性更改） .bell { cursor: pointer; background: #f5f5f5; } -.messageButton { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 80px; - transition: all 0.3s; - border: 1px solid #e9ecef; - background: #fff; - cursor: pointer; - &:hover { - background-color: #f8f9fa; - border-color: #1890ff; - box-shadow: 0 0px 12px rgba(24, 144, 255, 0.15); - } - - .anticon { - font-size: 18px; - color: #666; - } -} - -.userSection { - display: flex; - align-items: center; - gap: 12px; - cursor: pointer; - padding: 8px 16px; -} - -.userNickname { - font-size: 14px; - color: #333; - font-weight: 600; - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.avatar { - border: 2px solid #e9ecef; - transition: all 0.3s; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -// 消息抽屉样式 -.messageDrawer { - :global(.ant-drawer-header) { - border-bottom: 1px solid #f0f0f0; - } - - :global(.ant-drawer-body) { - padding: 0; - } -} - -.messageContent { - height: 100%; - overflow-y: auto; -} - -.messageItem { - display: flex; - padding: 16px; - border-bottom: 1px solid #f5f5f5; - transition: background-color 0.2s; - - &:hover { - background-color: #fafafa; - } - - &:last-child { - border-bottom: none; - } -} - -.messageAvatar { - margin-right: 12px; - flex-shrink: 0; -} - -.messageInfo { - flex: 1; - min-width: 0; -} - -.messageTitle { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 8px; -} - -.messageType { - font-size: 14px; - font-weight: 500; - color: #262626; -} - -.messageStatus { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #1890ff; -} - -.messageText { - font-size: 13px; - color: #595959; - line-height: 1.4; - margin-bottom: 8px; - word-break: break-word; -} - -.messageTime { - display: flex; - align-items: center; - justify-content: space-between; - font-size: 12px; - color: #8c8c8c; -} - -.messageActions { - display: flex; - gap: 8px; - margin-top: 8px; - - :global(.ant-btn) { - height: 24px; - padding: 0 8px; - font-size: 12px; - } -} - .username { font-size: 14px; color: #333; @@ -220,7 +166,8 @@ margin-left: 8px; } -// 抽屉样式 +// ===== Drawer 抽屉区域样式 ===== +// 左侧菜单抽屉 .drawer { :global(.ant-drawer-header) { background: #fafafa; @@ -230,141 +177,259 @@ :global(.ant-drawer-body) { padding: 0; } -} -.drawerContent { - height: 100%; - display: flex; - flex-direction: column; - background: #f8f9fa; -} - -.drawerHeader { - padding: 20px; - background: #fff; - border-bottom: none; -} - -.logoSection { - display: flex; - align-items: center; - gap: 12px; -} - -.logoIcon { - width: 48px; - height: 48px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - color: white; -} - -.logoText { - display: flex; - flex-direction: column; -} - -.appName { - font-size: 18px; - font-weight: 600; - color: #333; - margin: 0; -} - -.appDesc { - font-size: 12px; - color: #999; - margin: 2px 0 0 0; -} - -.drawerBody { - flex: 1; - display: flex; - flex-direction: column; - gap: 16px; -} - -.primaryButton { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-radius: 12px; - padding: 16px 20px; - display: flex; - align-items: center; - gap: 12px; - cursor: pointer; - transition: all 0.3s; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - } - - .buttonIcon { - font-size: 20px; - } - - span { - font-size: 16px; - font-weight: 600; - color: white; - } -} - -.menuSection { - margin-top: 8px; -} - -.menuItem { - display: flex; - align-items: center; - padding: 16px 20px; - cursor: pointer; - transition: all 0.3s; - border-radius: 8px; - - &:hover { - background-color: #f0f0f0; - } - - span { - font-size: 16px; - color: #333; - font-weight: 500; - } -} - -.menuIcon { - font-size: 20px; - margin-right: 12px; - width: 20px; - text-align: center; -} - -.drawerFooter { - padding: 20px; - background: #fff; - border-top: 1px solid #f0f0f0; - .balanceSection { + // 抽屉内容容器 + .drawerContent { + height: 100%; display: flex; - justify-content: space-between; - align-items: center; - .balanceIcon { - color: #666; - .suanliIcon { - font-size: 20px; + flex-direction: column; + background: #f8f9fa; + + // 抽屉头部 + .drawerHeader { + padding: 20px; + background: #fff; + border-bottom: none; + + .logoSection { + display: flex; + align-items: center; + gap: 12px; + + .logoIcon { + width: 48px; + height: 48px; + background: linear-gradient(135deg, #3b81f6 0%, #9035ea 100%); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: white; + } + + .logoText { + display: flex; + flex-direction: column; + + .appName { + font-size: 18px; + font-weight: 600; + color: #333; + margin: 0; + } + + .appDesc { + font-size: 12px; + color: #999; + margin: 2px 0 0 0; + } + } } } - .balanceText { - color: #3d9c0d; + // 抽屉主体内容 + .drawerBody { + flex: 1; + display: flex; + flex-direction: column; + gap: 16px; + + .primaryButton { + background: linear-gradient(135deg, #3d80f6 0%, #764ba2 100%); + border-radius: 12px; + padding: 16px 20px; + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + transition: all 0.3s; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); + } + + .buttonIcon { + font-size: 20px; + } + + span { + font-size: 16px; + font-weight: 600; + color: white; + } + } + + // 菜单区域 + .menuSection { + padding: 0px 20px; + .menuItem { + display: flex; + align-items: center; + padding: 8px 20px; + cursor: pointer; + transition: all 0.3s; + border-radius: 8px; + margin: 4px 0; + + &:hover { + background-color: #f0f0f0; + } + + .menuIcon { + font-size: 20px; + margin-right: 12px; + width: 20px; + text-align: center; + } + + span { + font-size: 16px; + color: #333; + font-weight: 500; + } + + &.menuItemActive { + background: linear-gradient(to right, #3b82f6, #9333ea); + color: white; + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); + + span { + color: white; + font-weight: 600; + } + + .menuIcon { + color: white; + } + + &:hover { + background: linear-gradient(to right, #3b82f6, #9333ea); + box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); + } + } + } + } + } + + // 抽屉底部 + .drawerFooter { + padding: 20px; + background: #fff; + border-top: 1px solid #f0f0f0; + + .balanceSection { + display: flex; + justify-content: space-between; + align-items: center; + + .balanceIcon { + color: #666; + + .suanliIcon { + font-size: 20px; + } + } + + .balanceText { + color: #3d9c0d; + } + } } } } +// ===== 消息抽屉区域样式 ===== +.messageDrawer { + :global(.ant-drawer-header) { + border-bottom: 1px solid #f0f0f0; + } + + :global(.ant-drawer-body) { + padding: 0; + } + + .messageContent { + height: 100%; + overflow-y: auto; + + .messageItem { + display: flex; + padding: 16px; + border-bottom: 1px solid #f5f5f5; + transition: background-color 0.2s; + + &:hover { + background-color: #fafafa; + } + + &:last-child { + border-bottom: none; + } + + .messageAvatar { + margin-right: 12px; + flex-shrink: 0; + } + + .messageInfo { + flex: 1; + min-width: 0; + + .messageTitle { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + + .messageType { + font-size: 14px; + font-weight: 500; + color: #262626; + } + + .messageStatus { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #1890ff; + } + } + + .messageText { + font-size: 13px; + color: #595959; + line-height: 1.4; + margin-bottom: 8px; + word-break: break-word; + } + + .messageTime { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + color: #8c8c8c; + } + + .messageActions { + display: flex; + gap: 8px; + margin-top: 8px; + + :global(.ant-btn) { + height: 24px; + padding: 0 8px; + font-size: 12px; + } + } + } + } + } +} + +// ===== 兼容样式 ===== .balanceLabel { font-size: 12px; color: #999; @@ -378,18 +443,24 @@ margin: 2px 0 0 0; } -// 响应式设计 +// ===== 响应式设计 ===== @media (max-width: 768px) { .header { padding: 0 12px; - } - .title { - font-size: 16px; - } + .headerLeft { + .title { + font-size: 16px; + } + } - .username { - display: none; + .headerRight { + .userInfo { + .username { + display: none; + } + } + } } .drawer { diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index f2da7d2a..aefdc2fa 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -7,9 +7,10 @@ import { UserSwitchOutlined, LogoutOutlined, } from "@ant-design/icons"; + import { useUserStore } from "@/store/module/user"; -import { useCkChatStore } from "@/store/module/ckchat/ckchat"; -import { useNavigate } from "react-router-dom"; +// import { useCkChatStore } from "@/store/module/ckchat/ckchat"; +import { useNavigate, useLocation } from "react-router-dom"; import { drawerMenuData, menuList } from "./index.data"; import styles from "./index.module.scss"; @@ -28,9 +29,9 @@ const NavCommon: React.FC = ({ const [messageDrawerVisible, setMessageDrawerVisible] = useState(false); const [messageCount] = useState(3); // 模拟消息数量 const navigate = useNavigate(); - const { userInfo } = useCkChatStore(); - const { user } = useUserStore(); - console.log(user); + const location = useLocation(); + // const { userInfo } = useCkChatStore(); + const { user, logout } = useUserStore(); // 处理菜单图标点击 const handleMenuClick = () => { @@ -55,8 +56,8 @@ const NavCommon: React.FC = ({ // 处理退出登录 const handleLogout = () => { - console.log("退出登录"); - // TODO: 实现退出登录逻辑 + logout(); // 清除localStorage中的token和用户状态 + navigate("/login"); // 跳转到登录页面 }; // 用户菜单项 @@ -106,21 +107,24 @@ const NavCommon: React.FC = ({
- {menuList.map((item, index) => ( -
{ - if (item.path) { - navigate(item.path); - setDrawerVisible(false); - } - }} - > -
{item.icon}
- {item.title} -
- ))} + {menuList.map((item, index) => { + const isActive = location.pathname === item.path; + return ( +
{ + if (item.path) { + navigate(item.path); + setDrawerVisible(false); + } + }} + > +
{item.icon}
+ {item.title} +
+ ); + })}
@@ -185,7 +189,6 @@ const NavCommon: React.FC = ({ Date: Fri, 12 Sep 2025 18:05:18 +0800 Subject: [PATCH 07/18] =?UTF-8?q?feat(NavCommon):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE=E5=B9=B6=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E6=8A=BD=E5=B1=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在抽屉头部添加关闭按钮，提升用户体验 - 重构抽屉样式结构，分离头部和内容样式 - 调整图标大小和布局，保持视觉一致性 --- .../components/NavCommon/index.module.scss | 91 ++++++++++--------- .../pc/ckbox/components/NavCommon/index.tsx | 7 +- 2 files changed, 54 insertions(+), 44 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 1e9b197c..06c20939 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -177,6 +177,54 @@ :global(.ant-drawer-body) { padding: 0; } + // 抽屉头部 + .drawerHeader { + padding: 20px; + background: #fff; + border-bottom: none; + display: flex; + justify-content: space-between; + align-items: center; + + .logoSection { + display: flex; + align-items: center; + gap: 12px; + + .logoIcon { + width: 40px; + height: 40px; + background: linear-gradient(135deg, #3b81f6 0%, #9035ea 100%); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: white; + } + + .logoText { + display: flex; + flex-direction: column; + + .appName { + font-size: 16px; + font-weight: 600; + color: #333; + margin: 0; + } + + .appDesc { + font-size: 12px; + color: #999; + margin: 2px 0 0 0; + } + } + } + .anticon { + cursor: pointer; + } + } // 抽屉内容容器 .drawerContent { @@ -185,49 +233,6 @@ flex-direction: column; background: #f8f9fa; - // 抽屉头部 - .drawerHeader { - padding: 20px; - background: #fff; - border-bottom: none; - - .logoSection { - display: flex; - align-items: center; - gap: 12px; - - .logoIcon { - width: 48px; - height: 48px; - background: linear-gradient(135deg, #3b81f6 0%, #9035ea 100%); - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - color: white; - } - - .logoText { - display: flex; - flex-direction: column; - - .appName { - font-size: 18px; - font-weight: 600; - color: #333; - margin: 0; - } - - .appDesc { - font-size: 12px; - color: #999; - margin: 2px 0 0 0; - } - } - } - } - // 抽屉主体内容 .drawerBody { flex: 1; diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index aefdc2fa..99cdacf8 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -4,8 +4,9 @@ import { MenuOutlined, UserOutlined, BellOutlined, - UserSwitchOutlined, + CloseOutlined, LogoutOutlined, + UserSwitchOutlined, } from "@ant-design/icons"; import { useUserStore } from "@/store/module/user"; @@ -104,6 +105,9 @@ const NavCommon: React.FC = ({
+ + +
@@ -194,6 +198,7 @@ const NavCommon: React.FC = ({ open={drawerVisible} width={300} className={styles.drawer} + closable={false} > {defaultDrawerContent} From 02b864d657fb2f62f91bd4f0d1a8e0fe0694e6f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Fri, 12 Sep 2025 18:10:04 +0800 Subject: [PATCH 08/18] =?UTF-8?q?style(powerCenter):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E8=BE=B9=E8=B7=9D=E5=B9=B6=E6=B8=85=E7=90=86?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 清理了index.module.scss文件中的多余边距和空行，保持代码格式整洁统一 --- .../pc/ckbox/powerCenter/index.module.scss | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss index 41aa615e..2eb34c95 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss @@ -33,9 +33,8 @@ .tab { border-radius: 8px; border: 1px solid #e0e0e0; - margin-right: 8px; color: #666; - + &:hover { color: #1890ff; border-color: #1890ff; @@ -137,7 +136,7 @@ .headerRight { width: 100%; - + .tabs { flex-wrap: wrap; } @@ -152,7 +151,7 @@ .header { padding: 16px; - + .headerLeft { .title { font-size: 24px; @@ -163,22 +162,22 @@ .cardGrid { .featureCard { height: 160px; - + .cardContent { .iconWrapper { width: 48px; height: 48px; - + .icon { font-size: 20px; } } - + .cardInfo { .cardTitle { font-size: 14px; } - + .cardDescription { font-size: 11px; } @@ -195,44 +194,44 @@ &[data-color="#ff6b35"] .iconWrapper { background: linear-gradient(135deg, #ff6b35, #f7931e); } - + // SOP群发 - 蓝色 &[data-color="#4285f4"] .iconWrapper { background: linear-gradient(135deg, #4285f4, #1a73e8); } - + // 朋友圈营销 - 绿色 &[data-color="#34a853"] .iconWrapper { background: linear-gradient(135deg, #34a853, #137333); } - + // 标签管理 - 紫色 &[data-color="#9c27b0"] .iconWrapper { background: linear-gradient(135deg, #9c27b0, #7b1fa2); } - + // 客户管理 - 靛蓝 &[data-color="#6366f1"] .iconWrapper { background: linear-gradient(135deg, #6366f1, #4f46e5); } - + // 沟通记录 - 青色 &[data-color="#06b6d4"] .iconWrapper { background: linear-gradient(135deg, #06b6d4, #0891b2); } - + // 内容管理 - 黄色 &[data-color="#f59e0b"] .iconWrapper { background: linear-gradient(135deg, #f59e0b, #d97706); } - + // AI训练 - 粉色 &[data-color="#ec4899"] .iconWrapper { background: linear-gradient(135deg, #ec4899, #db2777); } - + // 自动打招呼 - 翠绿 &[data-color="#10b981"] .iconWrapper { background: linear-gradient(135deg, #10b981, #059669); } -} \ No newline at end of file +} From 8b64c1ab0d497d89b819c95a2144e5a0b401313e 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 09:55:07 +0800 Subject: [PATCH 09/18] =?UTF-8?q?fix(=E7=99=BB=E5=BD=95):=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E7=99=BB=E5=BD=95API=E8=B7=AF=E5=BE=84=E5=92=8C?= =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E5=8F=82=E6=95=B0=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将登录API路径从'/v1/auth/login'改为'/v1/kefu/login' 将验证码参数verifyCode改为verifySessionId以匹配后端接口 更新表单字段名称verificationCode为verifyCode保持一致性 --- Touchkebao/src/pages/login/Login.tsx | 11 ++++++----- Touchkebao/src/pages/login/api.ts | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/Touchkebao/src/pages/login/Login.tsx b/Touchkebao/src/pages/login/Login.tsx index 70af8136..a92f337a 100644 --- a/Touchkebao/src/pages/login/Login.tsx +++ b/Touchkebao/src/pages/login/Login.tsx @@ -28,10 +28,10 @@ const Login: React.FC = () => { const { login, login2 } = useUserStore(); const [verify, setVerify] = useState<{ verifyCodeImage: string; - verifyCode: string; + verifySessionId: string; }>({ verifyCodeImage: "", - verifyCode: "", + verifySessionId: "", }); // 倒计时效果 useEffect(() => { @@ -45,7 +45,7 @@ const Login: React.FC = () => { const res = await getVerifyCode(); setVerify({ verifyCodeImage: res.verifyCodeImage, - verifyCode: res.verifyCode, + verifySessionId: res.verifySessionId, }); }; @@ -88,8 +88,9 @@ const Login: React.FC = () => { // 添加typeId参数 const loginParams = { ...values, - typeId: activeTab as number, + verifySessionId: verify.verifySessionId, }; + console.log(loginParams); const response = activeTab === 1 @@ -218,7 +219,7 @@ const Login: React.FC = () => { )} {activeTab == 1 && verify.verifyCodeImage && ( diff --git a/Touchkebao/src/pages/login/api.ts b/Touchkebao/src/pages/login/api.ts index 1203407a..50b918f4 100644 --- a/Touchkebao/src/pages/login/api.ts +++ b/Touchkebao/src/pages/login/api.ts @@ -3,7 +3,7 @@ import request2 from "@/api/request2"; // 密码登录 export function loginWithPassword(params: any) { - return request("/v1/auth/login", params, "POST"); + return request("/v1/kefu/login", params, "POST"); } // 验证码登录 From 55286bdfe54a609a1ce6f7a2302e6836a13db104 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 10:00:03 +0800 Subject: [PATCH 10/18] =?UTF-8?q?refactor(=E7=99=BB=E5=BD=95):=20=E7=A7=BB?= =?UTF-8?q?=E9=99=A4=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=80=BB=E6=95=B0=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 简化登录逻辑，不再需要传递和处理设备总数信息 --- Touchkebao/src/pages/login/Login.tsx | 4 ++-- Touchkebao/src/store/module/user.ts | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/Touchkebao/src/pages/login/Login.tsx b/Touchkebao/src/pages/login/Login.tsx index a92f337a..108bf02a 100644 --- a/Touchkebao/src/pages/login/Login.tsx +++ b/Touchkebao/src/pages/login/Login.tsx @@ -99,10 +99,10 @@ const Login: React.FC = () => { response .then(res => { - const { member, kefuData, deviceTotal } = res; + const { member, kefuData } = res.kefuData; // 清空WebSocket连接状态 useWebSocketStore.getState().clearConnectionState(); - login(res.token, member, deviceTotal); + login(res.token, member); const { self, token } = kefuData; login2(token.access_token); setUserInfo(self); diff --git a/Touchkebao/src/store/module/user.ts b/Touchkebao/src/store/module/user.ts index 357046a5..c56d7ac9 100644 --- a/Touchkebao/src/store/module/user.ts +++ b/Touchkebao/src/store/module/user.ts @@ -16,7 +16,6 @@ export interface User { updateTime: string | null; lastLoginIp: string; lastLoginTime: number; - deviceTotal: number; // 设备总数 } interface UserState { @@ -28,7 +27,7 @@ interface UserState { setToken: (token: string) => void; setToken2: (token2: string) => void; clearUser: () => void; - login: (token: string, userInfo: User, deviceTotal: number) => void; + login: (token: string, userInfo: User) => void; login2: (token2: string) => void; logout: () => void; } @@ -44,7 +43,7 @@ export const useUserStore = createPersistStore( setToken2: token2 => set({ token2 }), clearUser: () => set({ user: null, token: null, token2: null, isLoggedIn: false }), - login: (token, userInfo, deviceTotal) => { + login: (token, userInfo) => { // 只将token存储到localStorage localStorage.setItem("token", token); @@ -64,7 +63,6 @@ export const useUserStore = createPersistStore( updateTime: userInfo.updateTime, lastLoginIp: userInfo.lastLoginIp, lastLoginTime: userInfo.lastLoginTime, - deviceTotal: deviceTotal, }; set({ user, token, isLoggedIn: true }); From 2e3ac230ca37a3960897966f9f513b68e6d05fb1 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 10:37:33 +0800 Subject: [PATCH 11/18] =?UTF-8?q?refactor(login):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E8=B0=83=E8=AF=95=E6=97=A5=E5=BF=97=E5=B9=B6=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E6=95=B0=E6=8D=AE=E8=A7=A3=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除登录请求中的console.log调试语句 修复从响应数据中解构kefuData的方式，直接从res获取而非res.kefuData --- Touchkebao/src/pages/login/Login.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Touchkebao/src/pages/login/Login.tsx b/Touchkebao/src/pages/login/Login.tsx index 108bf02a..2e83787f 100644 --- a/Touchkebao/src/pages/login/Login.tsx +++ b/Touchkebao/src/pages/login/Login.tsx @@ -90,7 +90,6 @@ const Login: React.FC = () => { ...values, verifySessionId: verify.verifySessionId, }; - console.log(loginParams); const response = activeTab === 1 @@ -99,7 +98,7 @@ const Login: React.FC = () => { response .then(res => { - const { member, kefuData } = res.kefuData; + const { member, kefuData } = res; // 清空WebSocket连接状态 useWebSocketStore.getState().clearConnectionState(); login(res.token, member); From 7d3b5dbbe938d0e8788f696f9e132f92c32ba0fc 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 10:38:36 +0800 Subject: [PATCH 12/18] =?UTF-8?q?=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/pc/ckbox/powerCenter/index.data.tsx | 18 ++++++++++++------ .../src/pages/pc/ckbox/powerCenter/index.tsx | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx index 000e7af8..243b471c 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx @@ -9,6 +9,11 @@ import { FileTextOutlined, RobotOutlined, UserAddOutlined, + AppstoreOutlined, + SoundOutlined, + TeamOutlined, + FolderOutlined, + BarChartOutlined, } from "@ant-design/icons"; export interface FeatureCard { @@ -24,6 +29,7 @@ export interface FeatureCard { export interface TabItem { key: string; label: string; + icon?: React.ReactNode; active?: boolean; } @@ -104,10 +110,10 @@ export const featureCards: FeatureCard[] = [ ]; export const tabItems: TabItem[] = [ - { key: "all", label: "全部功能" }, - { key: "marketing", label: "营销推广" }, - { key: "customer", label: "客户管理" }, - { key: "ai", label: "AI智能" }, - { key: "content", label: "内容管理" }, - { key: "data", label: "数据分析" }, + { key: "all", label: "全部功能", icon: }, + { key: "marketing", label: "营销推广", icon: }, + { key: "customer", label: "客户管理", icon: }, + { key: "ai", label: "AI智能", icon: }, + { key: "content", label: "内容管理", icon: }, + { key: "data", label: "数据分析", icon: }, ]; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx index 4320e3d6..6a409e2b 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -54,6 +54,7 @@ const PowerCenter: React.FC = () => { activeTab === item.key ? styles.activeTab : styles.tab } onClick={() => handleTabClick(item.key)} + icon={item.icon} > {item.label} From f640733276ba9c89391394f6df318c7e38afc41d 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:37:42 +0800 Subject: [PATCH 13/18] =?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 --- .../ckbox/components/NavCommon/index.module.scss | 4 ++-- .../pages/pc/ckbox/components/NavCommon/index.tsx | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 06c20939..ffa4d33e 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -117,14 +117,14 @@ height: 40px; border-radius: 80px; transition: all 0.3s; - border: 1px solid #e9ecef; background: #fff; cursor: pointer; - + border: 1px solid #e9ecef; &:hover { background-color: #f8f9fa; border-color: #1890ff; box-shadow: 0 0px 12px rgba(24, 144, 255, 0.15); + border: 1px solid #e9ecef; } .anticon { diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index 99cdacf8..4d833e96 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -180,14 +180,12 @@ const NavCommon: React.FC = ({ />
- -
- -
- + +
+ + + +
From 287c2637ed37d4c4178b1d3906c5537c4b38820e 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:41:02 +0800 Subject: [PATCH 14/18] =?UTF-8?q?style(NavCommon):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1=E5=92=8C=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF=E9=97=B4=E9=9A=94=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除不再需要的移动端响应式设计代码和用户信息组件中的 --- .../components/NavCommon/index.module.scss | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index ffa4d33e..ad3496e9 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -79,7 +79,6 @@ .userInfo { display: flex; align-items: center; - gap: 16px; padding: 8px 0; .suanli { @@ -447,28 +446,3 @@ color: #52c41a; margin: 2px 0 0 0; } - -// ===== 响应式设计 ===== -@media (max-width: 768px) { - .header { - padding: 0 12px; - - .headerLeft { - .title { - font-size: 16px; - } - } - - .headerRight { - .userInfo { - .username { - display: none; - } - } - } - } - - .drawer { - width: 280px !important; - } -} From 774994713869ea7be57171b8ab3aeadb8c671b9c 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:14 +0800 Subject: [PATCH 15/18] =?UTF-8?q?refactor(powerCenter):=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD=E5=8D=A1=E7=89=87=E8=B7=AF=E5=BE=84?= =?UTF-8?q?=E4=BB=8Eckbox=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 575e0f292438aab5c3c2a3b913e8ab9fd9dc9fcf 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:52:18 +0800 Subject: [PATCH 16/18] =?UTF-8?q?feat(=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=BF=83?= =?UTF-8?q?):=20=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2=E5=92=8C=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加SOP群发、AI模型训练、自动打招呼等9个功能页面的基础结构和样式 配置功能中心相关路由 调整消息通知按钮的Badge组件位置 --- .../pc/ckbox/components/NavCommon/index.tsx | 13 +++--- .../powerCenter/ai-training/index.module.scss | 43 ++++++++++++++++++ .../ckbox/powerCenter/ai-training/index.tsx | 21 +++++++++ .../auto-greeting/index.module.scss | 43 ++++++++++++++++++ .../ckbox/powerCenter/auto-greeting/index.tsx | 21 +++++++++ .../communication-record/index.module.scss | 43 ++++++++++++++++++ .../communication-record/index.tsx | 21 +++++++++ .../content-management/index.module.scss | 43 ++++++++++++++++++ .../powerCenter/content-management/index.tsx | 21 +++++++++ .../customer-management/index.module.scss | 43 ++++++++++++++++++ .../powerCenter/customer-management/index.tsx | 21 +++++++++ .../moments-marketing/index.module.scss | 43 ++++++++++++++++++ .../powerCenter/moments-marketing/index.tsx | 21 +++++++++ .../precision-send/index.module.scss | 43 ++++++++++++++++++ .../powerCenter/precision-send/index.tsx | 21 +++++++++ .../powerCenter/sop-send/index.module.scss | 43 ++++++++++++++++++ .../pc/ckbox/powerCenter/sop-send/index.tsx | 21 +++++++++ .../tag-management/index.module.scss | 43 ++++++++++++++++++ .../powerCenter/tag-management/index.tsx | 21 +++++++++ Touchkebao/src/router/module/pc.tsx | 45 +++++++++++++++++++ 20 files changed, 626 insertions(+), 8 deletions(-) create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index 99cdacf8..dcef7c34 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -180,14 +180,11 @@ const NavCommon: React.FC = ({ /> - -
- -
- +
+ + + +
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx new file mode 100644 index 00000000..9bf0dde5 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/ai-training/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const AiTraining: React.FC = () => { + return ( +
+
+

AI模型训练

+

自定义AI模型训练，打造专属智能客服助手

+
+
+ {/* 功能内容待开发 */} +
+

AI模型训练功能正在开发中...

+
+
+
+ ); +}; + +export default AiTraining; 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 new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx new file mode 100644 index 00000000..f9506e96 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/auto-greeting/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const AutoGreeting: React.FC = () => { + return ( +
+
+

自动打招呼

+

智能识别新好友，自动发送个性化欢迎消息

+
+
+ {/* 功能内容待开发 */} +
+

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

+
+
+
+ ); +}; + +export default AutoGreeting; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx new file mode 100644 index 00000000..cf17b811 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/communication-record/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const CommunicationRecord: React.FC = () => { + return ( +
+
+

沟通记录

+

完整记录客户沟通历史，支持多维度查询分析

+
+
+ {/* 功能内容待开发 */} +
+

沟通记录功能正在开发中...

+
+
+
+ ); +}; + +export default CommunicationRecord; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx new file mode 100644 index 00000000..f2b33d1f --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const ContentManagement: React.FC = () => { + return ( +
+
+

内容管理

+

素材管理、数据词汇库、关键词自动回复

+
+
+ {/* 功能内容待开发 */} +
+

内容管理功能正在开发中...

+
+
+
+ ); +}; + +export default ContentManagement; 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 new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx new file mode 100644 index 00000000..ad171fa8 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/customer-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const CustomerManagement: React.FC = () => { + return ( +
+
+

客户好友管理

+

统一管理客户信息和好友关系，提升服务效率

+
+
+ {/* 功能内容待开发 */} +
+

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

+
+
+
+ ); +}; + +export default CustomerManagement; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx new file mode 100644 index 00000000..27b8a419 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const MomentsMarketing: React.FC = () => { + return ( +
+
+

朋友圈营销

+

AI智能生成朋友圈内容，提升品牌曝光度

+
+
+ {/* 功能内容待开发 */} +
+

朋友圈营销功能正在开发中...

+
+
+
+ ); +}; + +export default MomentsMarketing; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx new file mode 100644 index 00000000..c350739a --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const PrecisionSend: React.FC = () => { + return ( +
+
+

精准群发

+

基于客户标签和行为数据进行精准群发

+
+
+ {/* 功能内容待开发 */} +
+

精准群发功能正在开发中...

+
+
+
+ ); +}; + +export default PrecisionSend; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx new file mode 100644 index 00000000..05039d06 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const SopSend: React.FC = () => { + return ( +
+
+

SOP群发

+

使用触客宝SOP标准化流程进行批量消息发送

+
+
+ {/* 功能内容待开发 */} +
+

SOP群发功能正在开发中...

+
+
+
+ ); +}; + +export default SopSend; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss new file mode 100644 index 00000000..bf1ac1e6 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss @@ -0,0 +1,43 @@ +.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; + } +} + +.content { + min-height: 400px; +} + +.placeholder { + 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; + } +} \ No newline at end of file diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx new file mode 100644 index 00000000..5c9b3077 --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import styles from "./index.module.scss"; + +const TagManagement: React.FC = () => { + return ( +
+
+

标签管理

+

智能客户标签分类，精准用户画像分析

+
+
+ {/* 功能内容待开发 */} +
+

标签管理功能正在开发中...

+
+
+
+ ); +}; + +export default TagManagement; diff --git a/Touchkebao/src/router/module/pc.tsx b/Touchkebao/src/router/module/pc.tsx index de12075d..0e050775 100644 --- a/Touchkebao/src/router/module/pc.tsx +++ b/Touchkebao/src/router/module/pc.tsx @@ -2,6 +2,15 @@ import CkboxPage from "@/pages/pc/ckbox"; import WeChatPage from "@/pages/pc/ckbox/weChat"; import Dashboard from "@/pages/pc/ckbox/dashboard"; import PowerCenter from "@/pages/pc/ckbox/powerCenter"; +import PrecisionSend from "@/pages/pc/ckbox/powerCenter/precision-send"; +import SopSend from "@/pages/pc/ckbox/powerCenter/sop-send"; +import MomentsMarketing from "@/pages/pc/ckbox/powerCenter/moments-marketing"; +import TagManagement from "@/pages/pc/ckbox/powerCenter/tag-management"; +import CustomerManagement from "@/pages/pc/ckbox/powerCenter/customer-management"; +import CommunicationRecord from "@/pages/pc/ckbox/powerCenter/communication-record"; +import ContentManagement from "@/pages/pc/ckbox/powerCenter/content-management"; +import AiTraining from "@/pages/pc/ckbox/powerCenter/ai-training"; +import AutoGreeting from "@/pages/pc/ckbox/powerCenter/auto-greeting"; const ckboxRoutes = [ { path: "/pc", @@ -20,6 +29,42 @@ const ckboxRoutes = [ path: "powerCenter", element: , }, + { + path: "powerCenter/precision-send", + element: , + }, + { + path: "powerCenter/sop-send", + element: , + }, + { + path: "powerCenter/moments-marketing", + element: , + }, + { + path: "powerCenter/tag-management", + element: , + }, + { + path: "powerCenter/customer-management", + element: , + }, + { + path: "powerCenter/communication-record", + element: , + }, + { + path: "powerCenter/content-management", + element: , + }, + { + path: "powerCenter/ai-training", + element: , + }, + { + path: "powerCenter/auto-greeting", + element: , + }, ], }, ]; From 4a48bec42dbf5e5e61f6687982ee1ba6514badaf 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:52:52 +0800 Subject: [PATCH 17/18] =?UTF-8?q?style(NavCommon):=20=E7=A7=BB=E9=99=A4hea?= =?UTF-8?q?derRight=E5=92=8CuserInfo=E4=B8=AD=E7=9A=84gap=E9=97=B4?= =?UTF-8?q?=E8=B7=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 简化样式代码，保持布局一致性 --- .../src/pages/pc/ckbox/components/NavCommon/index.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss index 06c20939..c40d797e 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.module.scss @@ -73,15 +73,12 @@ .headerRight { display: flex; align-items: center; - gap: 16px; padding-right: 10px; .userInfo { display: flex; align-items: center; - gap: 16px; padding: 8px 0; - .suanli { display: flex; align-items: center; From 5c42c8ad3c49631fe3c0590b8da13ebb9b8618d2 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:54:54 +0800 Subject: [PATCH 18/18] 1 --- .../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", }, ];