From eedd687e47ffc25685f290e1f073aa863d9c41de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Mon, 4 Aug 2025 10:04:29 +0800 Subject: [PATCH 01/32] 1 --- nkebao/AI_ICON_GUIDE.md | 546 ++++++++++++++++---------------- nkebao/ICON_DETAILED_MAPPING.md | 408 ++++++++++++------------ nkebao/ICON_MAPPING_GUIDE.md | 458 +++++++++++++-------------- nkebao/ICON_QUICK_REFERENCE.md | 540 +++++++++++++++---------------- nkebao/index.html | 24 +- 5 files changed, 988 insertions(+), 988 deletions(-) diff --git a/nkebao/AI_ICON_GUIDE.md b/nkebao/AI_ICON_GUIDE.md index cef30a6a..bc536673 100644 --- a/nkebao/AI_ICON_GUIDE.md +++ b/nkebao/AI_ICON_GUIDE.md @@ -1,274 +1,274 @@ -# AI图标使用指南 - -## 概述 - -本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。 - -## AI使用流程 - -### 1. 项目类型判断 -首先判断项目类型： -- **PC端项目**: 使用 `@ant-design/icons` -- **移动端项目**: 使用 `antd-mobile-icons` - -### 2. 图标查找流程 -1. 根据功能需求确定图标类型 -2. 在对应图标包中查找合适的图标 -3. 如果图标不存在，查找替代方案 -4. 使用正确的导入语法 - -### 3. 代码生成模板 - -#### PC端项目模板 -```typescript -import { - // 导航类 - HomeOutlined, - UserOutlined, - SettingOutlined, - - // 操作类 - PlusOutlined, - EditOutlined, - DeleteOutlined, - CopyOutlined, - SearchOutlined, - ReloadOutlined, - - // 状态类 - CheckOutlined, - CloseOutlined, - CheckCircleOutlined, - CloseCircleOutlined, - ExclamationCircleOutlined, - InfoCircleOutlined, - LoadingOutlined, - - // 方向类 - UpOutlined, - DownOutlined, - LeftOutlined, - RightOutlined, - ArrowLeftOutlined, - - // 其他 - MessageOutlined, - CalendarOutlined, - ClockCircleOutlined, - PictureOutlined, - FileOutlined, - CameraOutlined, - QrcodeOutlined, -} from '@ant-design/icons'; -``` - -#### 移动端项目模板 -```typescript -import { - // 导航类 - HomeOutline, - UserOutline, - SettingOutline, - - // 操作类 - AddOutline, - EditSOutline, - DeleteOutline, - CopyOutline, - SearchOutline, - RefreshOutline, - - // 状态类 - CheckOutline, - CloseOutline, - CheckCircleOutline, - CloseCircleOutline, - ExclamationCircleOutline, - InfoCircleOutline, - LoadingOutline, - - // 方向类 - UpOutline, - DownOutline, - LeftOutline, - RightOutline, - - // 其他 - MessageOutline, - CalendarOutline, - ClockCircleOutline, - PictureOutline, - FileOutline, - CameraOutline, - QrCodeOutline, -} from 'antd-mobile-icons'; -``` - -## 功能到图标映射 - -### 基础功能映射 -| 功能需求 | PC端图标 | 移动端图标 | 说明 | -|---------|---------|-----------|------| -| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 | -| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 | -| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 | -| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 | -| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 | -| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 | -| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 | -| 用户/个人 | UserOutlined | UserOutline | 用户相关 | -| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 | -| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 | -| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 | -| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 | - -### 状态指示映射 -| 状态需求 | PC端图标 | 移动端图标 | 说明 | -|---------|---------|-----------|------| -| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 | -| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 | -| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 | -| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 | -| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 | -| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 | - -### 方向导航映射 -| 方向需求 | PC端图标 | 移动端图标 | 说明 | -|---------|---------|-----------|------| -| 向上/上升 | UpOutlined | UpOutline | 向上方向 | -| 向下/下降 | DownOutlined | DownOutline | 向下方向 | -| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 | -| 向右/前进 | RightOutlined | RightOutline | 向右方向 | - -### 业务功能映射 -| 业务需求 | PC端图标 | 移动端图标 | 说明 | -|---------|---------|-----------|------| -| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 | -| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 | -| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 | -| 文件/文档 | FileOutlined | FileOutline | 文件功能 | -| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 | -| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 | -| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 | -| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 | -| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 | -| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 | -| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 | - -## 特殊替换规则 - -### 移动端不存在的图标替换 -| 原需求 | 替换方案 | 说明 | -|--------|----------|------| -| RiseOutlined | UpOutline | 上升趋势 | -| ThumbsUpOutlined | LikeOutline | 点赞功能 | -| ShareAltOutlined | LinkOutline | 分享功能 | -| BarChartOutlined | PieOutline | 图表功能 | -| LineChartOutlined | PieOutline | 图表功能 | -| UserAddOutlined | UserOutline | 用户添加 | -| Progress | 自定义div | 进度条组件 | - -### PC端不存在的图标替换 -| 原需求 | 替换方案 | 说明 | -|--------|----------|------| -| AntOutline | HomeOutlined | 蚂蚁图标 | -| AppOutline | AppstoreOutlined | 应用图标 | - -## AI代码生成示例 - -### 场景1: 移动端列表页面 -```typescript -// AI应该生成的代码 -import { - AddOutline, // 添加按钮 - EditSOutline, // 编辑按钮 - DeleteOutline, // 删除按钮 - CopyOutline, // 复制按钮 - SearchOutline, // 搜索框 - RefreshOutline, // 刷新按钮 - UserOutline, // 用户信息 - CalendarOutline, // 时间信息 - UpOutline, // 上升趋势（替换RiseOutlined） -} from 'antd-mobile-icons'; - -// 使用示例 - - - -``` - -### 场景2: PC端管理页面 -```typescript -// AI应该生成的代码 -import { - PlusOutlined, // 添加按钮 - EditOutlined, // 编辑按钮 - DeleteOutlined, // 删除按钮 - CopyOutlined, // 复制按钮 - SearchOutlined, // 搜索框 - ReloadOutlined, // 刷新按钮 - UserOutlined, // 用户信息 - CalendarOutlined, // 时间信息 - RiseOutlined, // 上升趋势（PC端存在） -} from '@ant-design/icons'; - -// 使用示例 - - - -``` - -## 错误检测和修正 - -### 常见错误模式 -1. **混用图标包**: 同时导入PC端和移动端图标 -2. **使用不存在的图标**: 在移动端使用PC端特有的图标 -3. **命名错误**: 图标名称大小写错误 -4. **导入路径错误**: 使用错误的包名 - -### 修正策略 -1. **统一图标包**: 根据项目类型选择单一图标包 -2. **查找替代**: 使用对照表查找替代图标 -3. **验证存在**: 确保图标在目标包中存在 -4. **测试验证**: 在代码中测试图标是否正常显示 - -## AI使用检查清单 - -### 代码生成前 -- [ ] 确认项目类型（PC端/移动端） -- [ ] 选择对应的图标包 -- [ ] 根据功能需求选择合适图标 -- [ ] 检查图标是否存在 - -### 代码生成中 -- [ ] 使用正确的导入语法 -- [ ] 图标名称大小写正确 -- [ ] 避免混用不同包的图标 -- [ ] 为不存在的图标提供替代方案 - -### 代码生成后 -- [ ] 验证图标导入正确 -- [ ] 检查图标使用语法 -- [ ] 确保样式设置合理 -- [ ] 提供使用示例 - -## 更新和维护 - -- 定期更新图标对照表 -- 记录新发现的图标差异 -- 更新替换规则 -- 优化AI使用流程 - -## 注意事项 - -1. **优先使用语义化图标**: 选择最能表达功能的图标 -2. **保持一致性**: 在同一项目中保持图标风格一致 -3. **考虑可访问性**: 为图标添加适当的aria-label -4. **性能优化**: 按需导入图标，避免全量导入 +# AI图标使用指南 + +## 概述 + +本文档为AI助手提供标准化的图标选择和使用流程，确保在代码生成时使用正确的图标包和图标名称。 + +## AI使用流程 + +### 1. 项目类型判断 +首先判断项目类型： +- **PC端项目**: 使用 `@ant-design/icons` +- **移动端项目**: 使用 `antd-mobile-icons` + +### 2. 图标查找流程 +1. 根据功能需求确定图标类型 +2. 在对应图标包中查找合适的图标 +3. 如果图标不存在，查找替代方案 +4. 使用正确的导入语法 + +### 3. 代码生成模板 + +#### PC端项目模板 +```typescript +import { + // 导航类 + HomeOutlined, + UserOutlined, + SettingOutlined, + + // 操作类 + PlusOutlined, + EditOutlined, + DeleteOutlined, + CopyOutlined, + SearchOutlined, + ReloadOutlined, + + // 状态类 + CheckOutlined, + CloseOutlined, + CheckCircleOutlined, + CloseCircleOutlined, + ExclamationCircleOutlined, + InfoCircleOutlined, + LoadingOutlined, + + // 方向类 + UpOutlined, + DownOutlined, + LeftOutlined, + RightOutlined, + ArrowLeftOutlined, + + // 其他 + MessageOutlined, + CalendarOutlined, + ClockCircleOutlined, + PictureOutlined, + FileOutlined, + CameraOutlined, + QrcodeOutlined, +} from '@ant-design/icons'; +``` + +#### 移动端项目模板 +```typescript +import { + // 导航类 + HomeOutline, + UserOutline, + SettingOutline, + + // 操作类 + AddOutline, + EditSOutline, + DeleteOutline, + CopyOutline, + SearchOutline, + RefreshOutline, + + // 状态类 + CheckOutline, + CloseOutline, + CheckCircleOutline, + CloseCircleOutline, + ExclamationCircleOutline, + InfoCircleOutline, + LoadingOutline, + + // 方向类 + UpOutline, + DownOutline, + LeftOutline, + RightOutline, + + // 其他 + MessageOutline, + CalendarOutline, + ClockCircleOutline, + PictureOutline, + FileOutline, + CameraOutline, + QrCodeOutline, +} from 'antd-mobile-icons'; +``` + +## 功能到图标映射 + +### 基础功能映射 +| 功能需求 | PC端图标 | 移动端图标 | 说明 | +|---------|---------|-----------|------| +| 添加/新建 | PlusOutlined | AddOutline | 通用添加功能 | +| 编辑/修改 | EditOutlined | EditSOutline | 编辑功能 | +| 删除/移除 | DeleteOutlined | DeleteOutline | 删除功能 | +| 复制/克隆 | CopyOutlined | CopyOutline | 复制功能 | +| 搜索/查找 | SearchOutlined | SearchOutline | 搜索功能 | +| 刷新/重新加载 | ReloadOutlined | RefreshOutline | 刷新功能 | +| 设置/配置 | SettingOutlined | SettingOutline | 设置功能 | +| 用户/个人 | UserOutlined | UserOutline | 用户相关 | +| 首页/主页 | HomeOutlined | HomeOutline | 首页导航 | +| 返回/后退 | ArrowLeftOutlined | LeftOutline | 返回功能 | +| 关闭/取消 | CloseOutlined | CloseOutline | 关闭功能 | +| 确认/确定 | CheckOutlined | CheckOutline | 确认功能 | + +### 状态指示映射 +| 状态需求 | PC端图标 | 移动端图标 | 说明 | +|---------|---------|-----------|------| +| 成功/完成 | CheckCircleOutlined | CheckCircleOutline | 成功状态 | +| 错误/失败 | CloseCircleOutlined | CloseCircleOutline | 错误状态 | +| 警告/注意 | ExclamationCircleOutlined | ExclamationCircleOutline | 警告状态 | +| 信息/提示 | InfoCircleOutlined | InfoCircleOutline | 信息提示 | +| 加载/等待 | LoadingOutlined | LoadingOutline | 加载状态 | +| 时间/等待 | ClockCircleOutlined | ClockCircleOutline | 时间相关 | + +### 方向导航映射 +| 方向需求 | PC端图标 | 移动端图标 | 说明 | +|---------|---------|-----------|------| +| 向上/上升 | UpOutlined | UpOutline | 向上方向 | +| 向下/下降 | DownOutlined | DownOutline | 向下方向 | +| 向左/后退 | LeftOutlined | LeftOutline | 向左方向 | +| 向右/前进 | RightOutlined | RightOutline | 向右方向 | + +### 业务功能映射 +| 业务需求 | PC端图标 | 移动端图标 | 说明 | +|---------|---------|-----------|------| +| 消息/通知 | MessageOutlined | MessageOutline | 消息功能 | +| 日历/日期 | CalendarOutlined | CalendarOutline | 日历功能 | +| 图片/照片 | PictureOutlined | PictureOutline | 图片功能 | +| 文件/文档 | FileOutlined | FileOutline | 文件功能 | +| 相机/拍照 | CameraOutlined | CameraOutline | 相机功能 | +| 二维码 | QrcodeOutlined | QrCodeOutline | 二维码功能 | +| 微信/社交 | WechatOutlined | WechatOutline | 微信功能 | +| 设备/手机 | MobileOutlined | MobileOutline | 设备功能 | +| 团队/群组 | TeamOutlined | TeamOutline | 团队功能 | +| 订单/购物 | ShoppingOutlined | ShoppingOutline | 订单功能 | +| 支付/钱包 | PayCircleOutlined | PayCircleOutline | 支付功能 | + +## 特殊替换规则 + +### 移动端不存在的图标替换 +| 原需求 | 替换方案 | 说明 | +|--------|----------|------| +| RiseOutlined | UpOutline | 上升趋势 | +| ThumbsUpOutlined | LikeOutline | 点赞功能 | +| ShareAltOutlined | LinkOutline | 分享功能 | +| BarChartOutlined | PieOutline | 图表功能 | +| LineChartOutlined | PieOutline | 图表功能 | +| UserAddOutlined | UserOutline | 用户添加 | +| Progress | 自定义div | 进度条组件 | + +### PC端不存在的图标替换 +| 原需求 | 替换方案 | 说明 | +|--------|----------|------| +| AntOutline | HomeOutlined | 蚂蚁图标 | +| AppOutline | AppstoreOutlined | 应用图标 | + +## AI代码生成示例 + +### 场景1: 移动端列表页面 +```typescript +// AI应该生成的代码 +import { + AddOutline, // 添加按钮 + EditSOutline, // 编辑按钮 + DeleteOutline, // 删除按钮 + CopyOutline, // 复制按钮 + SearchOutline, // 搜索框 + RefreshOutline, // 刷新按钮 + UserOutline, // 用户信息 + CalendarOutline, // 时间信息 + UpOutline, // 上升趋势（替换RiseOutlined） +} from 'antd-mobile-icons'; + +// 使用示例 + + + +``` + +### 场景2: PC端管理页面 +```typescript +// AI应该生成的代码 +import { + PlusOutlined, // 添加按钮 + EditOutlined, // 编辑按钮 + DeleteOutlined, // 删除按钮 + CopyOutlined, // 复制按钮 + SearchOutlined, // 搜索框 + ReloadOutlined, // 刷新按钮 + UserOutlined, // 用户信息 + CalendarOutlined, // 时间信息 + RiseOutlined, // 上升趋势（PC端存在） +} from '@ant-design/icons'; + +// 使用示例 + + + +``` + +## 错误检测和修正 + +### 常见错误模式 +1. **混用图标包**: 同时导入PC端和移动端图标 +2. **使用不存在的图标**: 在移动端使用PC端特有的图标 +3. **命名错误**: 图标名称大小写错误 +4. **导入路径错误**: 使用错误的包名 + +### 修正策略 +1. **统一图标包**: 根据项目类型选择单一图标包 +2. **查找替代**: 使用对照表查找替代图标 +3. **验证存在**: 确保图标在目标包中存在 +4. **测试验证**: 在代码中测试图标是否正常显示 + +## AI使用检查清单 + +### 代码生成前 +- [ ] 确认项目类型（PC端/移动端） +- [ ] 选择对应的图标包 +- [ ] 根据功能需求选择合适图标 +- [ ] 检查图标是否存在 + +### 代码生成中 +- [ ] 使用正确的导入语法 +- [ ] 图标名称大小写正确 +- [ ] 避免混用不同包的图标 +- [ ] 为不存在的图标提供替代方案 + +### 代码生成后 +- [ ] 验证图标导入正确 +- [ ] 检查图标使用语法 +- [ ] 确保样式设置合理 +- [ ] 提供使用示例 + +## 更新和维护 + +- 定期更新图标对照表 +- 记录新发现的图标差异 +- 更新替换规则 +- 优化AI使用流程 + +## 注意事项 + +1. **优先使用语义化图标**: 选择最能表达功能的图标 +2. **保持一致性**: 在同一项目中保持图标风格一致 +3. **考虑可访问性**: 为图标添加适当的aria-label +4. **性能优化**: 按需导入图标，避免全量导入 5. **版本兼容**: 注意图标包版本与UI框架版本的兼容性 \ No newline at end of file diff --git a/nkebao/ICON_DETAILED_MAPPING.md b/nkebao/ICON_DETAILED_MAPPING.md index 5e849544..b2c73166 100644 --- a/nkebao/ICON_DETAILED_MAPPING.md +++ b/nkebao/ICON_DETAILED_MAPPING.md @@ -1,205 +1,205 @@ -# 详细图标对照表 - -## 基础图标对照 - -### 导航类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 首页 | HomeOutlined | HomeOutline | ✅ | -| 返回 | ArrowLeftOutlined | LeftOutline | ✅ | -| 菜单 | MenuOutlined | MenuOutline | ✅ | -| 设置 | SettingOutlined | SettingOutline | ✅ | -| 用户 | UserOutlined | UserOutline | ✅ | -| 个人中心 | UserOutlined | UserOutline | ✅ | - -### 操作类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 添加 | PlusOutlined | AddOutline | ✅ | -| 编辑 | EditOutlined | EditSOutline | ✅ | -| 删除 | DeleteOutlined | DeleteOutline | ✅ | -| 复制 | CopyOutlined | CopyOutline | ✅ | -| 保存 | SaveOutlined | SaveOutline | ✅ | -| 刷新 | ReloadOutlined | RefreshOutline | ✅ | -| 搜索 | SearchOutlined | SearchOutline | ✅ | -| 关闭 | CloseOutlined | CloseOutline | ✅ | -| 确认 | CheckOutlined | CheckOutline | ✅ | -| 取消 | CloseOutlined | CloseOutline | ✅ | - -### 状态类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ | -| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ | -| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ | -| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ | -| 加载 | LoadingOutlined | LoadingOutline | ✅ | -| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ | - -### 方向类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 向上 | UpOutlined | UpOutline | ✅ | -| 向下 | DownOutlined | DownOutline | ✅ | -| 向左 | LeftOutlined | LeftOutline | ✅ | -| 向右 | RightOutlined | RightOutline | ✅ | -| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ | -| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ | - -### 通信类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 消息 | MessageOutlined | MessageOutline | ✅ | -| 邮件 | MailOutlined | MailOutline | ✅ | -| 电话 | PhoneOutlined | PhoneOutline | ✅ | -| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ | -| 语音 | AudioOutlined | AudioOutline | ✅ | - -### 媒体类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 图片 | PictureOutlined | PictureOutline | ✅ | -| 文件 | FileOutlined | FileOutline | ✅ | -| 文件夹 | FolderOutlined | FolderOutline | ✅ | -| 相机 | CameraOutlined | CameraOutline | ✅ | -| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ | - -### 时间类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 日历 | CalendarOutlined | CalendarOutline | ✅ | -| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ | -| 历史 | HistoryOutlined | HistoryOutline | ✅ | - -### 数据类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 统计 | BarChartOutlined | BarChartOutline | ✅ | -| 饼图 | PieChartOutlined | PieChartOutline | ✅ | -| 折线图 | LineChartOutlined | LineChartOutline | ✅ | -| 表格 | TableOutlined | TableOutline | ✅ | -| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ | - -## 特殊图标对照 - -### 业务相关 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 设备 | MobileOutlined | MobileOutline | ✅ | -| 微信 | WechatOutlined | WechatOutline | ✅ | -| 群组 | TeamOutlined | TeamOutline | ✅ | -| 客户 | UserAddOutlined | UserAddOutline | ❌ | -| 订单 | ShoppingOutlined | ShoppingOutline | ✅ | -| 支付 | PayCircleOutlined | PayCircleOutline | ✅ | - -### 工具类 -| 功能 | PC端 | 移动端 | 状态 | -|------|------|--------|------| -| 工具 | ToolOutlined | ToolOutline | ✅ | -| 配置 | SettingOutlined | SettingOutline | ✅ | -| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ | -| 反馈 | MessageOutlined | MessageOutline | ✅ | -| 分享 | ShareAltOutlined | ShareOutline | ❌ | - -## 不存在的图标替换方案 - -### PC端存在但移动端不存在的图标 -| PC端图标 | 推荐替换 | 说明 | -|----------|----------|------| -| UserAddOutlined | UserOutline | 用户添加功能 | -| ShareAltOutlined | LinkOutline | 分享功能 | -| RiseOutlined | UpOutline | 上升趋势 | -| ThumbsUpOutlined | LikeOutline | 点赞功能 | -| BarChartOutlined | PieOutline | 图表功能 | -| LineChartOutlined | PieOutline | 图表功能 | - -### 移动端存在但PC端不存在的图标 -| 移动端图标 | 推荐替换 | 说明 | -|------------|----------|------| -| AntOutline | HomeOutlined | 蚂蚁图标 | -| AppOutline | AppstoreOutlined | 应用图标 | - -## 使用规范 - -### 1. 导入规范 -```typescript -// PC端项目 -import { - HomeOutlined, - UserOutlined, - SettingOutlined, -} from '@ant-design/icons'; - -// 移动端项目 -import { - HomeOutline, - UserOutline, - SettingOutline, -} from 'antd-mobile-icons'; -``` - -### 2. 命名规范 -- PC端：使用 `Outlined` 后缀 -- 移动端：使用 `Outline` 后缀 -- 保持语义化命名 - -### 3. 使用建议 -- 优先使用语义明确的图标 -- 保持图标风格一致性 -- 考虑图标在不同尺寸下的清晰度 -- 为图标添加适当的aria-label - -### 4. 错误处理 -当图标不存在时： -1. 查找语义相近的图标 -2. 使用通用图标（如QuestionOutlined） -3. 考虑使用文字替代 -4. 创建自定义图标组件 - -## 项目中的实际应用 - -### 场景获客模块使用的图标 -```typescript -// 移动端项目中的图标使用 -import { - AddOutline, // 添加 - UpOutline, // 上升趋势（替换RiseOutline） - UserOutline, // 用户 - CalendarOutline, // 日历 - CopyOutline, // 复制 - DeleteOutline, // 删除 - EditSOutline, // 编辑 - SettingOutline, // 设置 - SearchOutline, // 搜索 - RefreshOutline, // 刷新 - QrCodeOutline, // 二维码 -} from 'antd-mobile-icons'; -``` - -### 工作台模块使用的图标 -```typescript -// 移动端项目中的图标使用 -import { - LikeOutline, // 点赞（替换ThumbsUpOutline） - LinkOutline, // 链接（替换ShareOutline） - PieOutline, // 饼图（替换BarChartOutline/LineChartOutline） - UserOutline, // 用户 - TeamOutline, // 团队 - MessageOutline, // 消息 -} from 'antd-mobile-icons'; -``` - -## 更新和维护 - -1. **定期检查**: 定期检查新版本中新增的图标 -2. **文档更新**: 及时更新图标对照表 -3. **团队协作**: 团队成员共享图标使用规范 -4. **代码审查**: 在代码审查中检查图标使用是否正确 - -## 注意事项 - -1. **包版本**: 确保图标包版本与UI框架版本兼容 -2. **按需导入**: 避免全量导入图标，影响打包体积 -3. **样式覆盖**: 可以通过CSS自定义图标样式 -4. **无障碍**: 为图标添加适当的无障碍属性 +# 详细图标对照表 + +## 基础图标对照 + +### 导航类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 首页 | HomeOutlined | HomeOutline | ✅ | +| 返回 | ArrowLeftOutlined | LeftOutline | ✅ | +| 菜单 | MenuOutlined | MenuOutline | ✅ | +| 设置 | SettingOutlined | SettingOutline | ✅ | +| 用户 | UserOutlined | UserOutline | ✅ | +| 个人中心 | UserOutlined | UserOutline | ✅ | + +### 操作类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 添加 | PlusOutlined | AddOutline | ✅ | +| 编辑 | EditOutlined | EditSOutline | ✅ | +| 删除 | DeleteOutlined | DeleteOutline | ✅ | +| 复制 | CopyOutlined | CopyOutline | ✅ | +| 保存 | SaveOutlined | SaveOutline | ✅ | +| 刷新 | ReloadOutlined | RefreshOutline | ✅ | +| 搜索 | SearchOutlined | SearchOutline | ✅ | +| 关闭 | CloseOutlined | CloseOutline | ✅ | +| 确认 | CheckOutlined | CheckOutline | ✅ | +| 取消 | CloseOutlined | CloseOutline | ✅ | + +### 状态类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 成功 | CheckCircleOutlined | CheckCircleOutline | ✅ | +| 错误 | CloseCircleOutlined | CloseCircleOutline | ✅ | +| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | ✅ | +| 信息 | InfoCircleOutlined | InfoCircleOutline | ✅ | +| 加载 | LoadingOutlined | LoadingOutline | ✅ | +| 等待 | ClockCircleOutlined | ClockCircleOutline | ✅ | + +### 方向类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 向上 | UpOutlined | UpOutline | ✅ | +| 向下 | DownOutlined | DownOutline | ✅ | +| 向左 | LeftOutlined | LeftOutline | ✅ | +| 向右 | RightOutlined | RightOutline | ✅ | +| 向上圆形 | UpCircleOutlined | UpCircleOutline | ✅ | +| 向下圆形 | DownCircleOutlined | DownCircleOutline | ✅ | + +### 通信类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 消息 | MessageOutlined | MessageOutline | ✅ | +| 邮件 | MailOutlined | MailOutline | ✅ | +| 电话 | PhoneOutlined | PhoneOutline | ✅ | +| 视频 | VideoCameraOutlined | VideoCameraOutline | ✅ | +| 语音 | AudioOutlined | AudioOutline | ✅ | + +### 媒体类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 图片 | PictureOutlined | PictureOutline | ✅ | +| 文件 | FileOutlined | FileOutline | ✅ | +| 文件夹 | FolderOutlined | FolderOutline | ✅ | +| 相机 | CameraOutlined | CameraOutline | ✅ | +| 二维码 | QrcodeOutlined | QrCodeOutline | ✅ | + +### 时间类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 日历 | CalendarOutlined | CalendarOutline | ✅ | +| 时钟 | ClockCircleOutlined | ClockCircleOutline | ✅ | +| 历史 | HistoryOutlined | HistoryOutline | ✅ | + +### 数据类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 统计 | BarChartOutlined | BarChartOutline | ✅ | +| 饼图 | PieChartOutlined | PieChartOutline | ✅ | +| 折线图 | LineChartOutlined | LineChartOutline | ✅ | +| 表格 | TableOutlined | TableOutline | ✅ | +| 列表 | UnorderedListOutlined | UnorderedListOutline | ✅ | + +## 特殊图标对照 + +### 业务相关 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 设备 | MobileOutlined | MobileOutline | ✅ | +| 微信 | WechatOutlined | WechatOutline | ✅ | +| 群组 | TeamOutlined | TeamOutline | ✅ | +| 客户 | UserAddOutlined | UserAddOutline | ❌ | +| 订单 | ShoppingOutlined | ShoppingOutline | ✅ | +| 支付 | PayCircleOutlined | PayCircleOutline | ✅ | + +### 工具类 +| 功能 | PC端 | 移动端 | 状态 | +|------|------|--------|------| +| 工具 | ToolOutlined | ToolOutline | ✅ | +| 配置 | SettingOutlined | SettingOutline | ✅ | +| 帮助 | QuestionCircleOutlined | QuestionCircleOutline | ✅ | +| 反馈 | MessageOutlined | MessageOutline | ✅ | +| 分享 | ShareAltOutlined | ShareOutline | ❌ | + +## 不存在的图标替换方案 + +### PC端存在但移动端不存在的图标 +| PC端图标 | 推荐替换 | 说明 | +|----------|----------|------| +| UserAddOutlined | UserOutline | 用户添加功能 | +| ShareAltOutlined | LinkOutline | 分享功能 | +| RiseOutlined | UpOutline | 上升趋势 | +| ThumbsUpOutlined | LikeOutline | 点赞功能 | +| BarChartOutlined | PieOutline | 图表功能 | +| LineChartOutlined | PieOutline | 图表功能 | + +### 移动端存在但PC端不存在的图标 +| 移动端图标 | 推荐替换 | 说明 | +|------------|----------|------| +| AntOutline | HomeOutlined | 蚂蚁图标 | +| AppOutline | AppstoreOutlined | 应用图标 | + +## 使用规范 + +### 1. 导入规范 +```typescript +// PC端项目 +import { + HomeOutlined, + UserOutlined, + SettingOutlined, +} from '@ant-design/icons'; + +// 移动端项目 +import { + HomeOutline, + UserOutline, + SettingOutline, +} from 'antd-mobile-icons'; +``` + +### 2. 命名规范 +- PC端：使用 `Outlined` 后缀 +- 移动端：使用 `Outline` 后缀 +- 保持语义化命名 + +### 3. 使用建议 +- 优先使用语义明确的图标 +- 保持图标风格一致性 +- 考虑图标在不同尺寸下的清晰度 +- 为图标添加适当的aria-label + +### 4. 错误处理 +当图标不存在时： +1. 查找语义相近的图标 +2. 使用通用图标（如QuestionOutlined） +3. 考虑使用文字替代 +4. 创建自定义图标组件 + +## 项目中的实际应用 + +### 场景获客模块使用的图标 +```typescript +// 移动端项目中的图标使用 +import { + AddOutline, // 添加 + UpOutline, // 上升趋势（替换RiseOutline） + UserOutline, // 用户 + CalendarOutline, // 日历 + CopyOutline, // 复制 + DeleteOutline, // 删除 + EditSOutline, // 编辑 + SettingOutline, // 设置 + SearchOutline, // 搜索 + RefreshOutline, // 刷新 + QrCodeOutline, // 二维码 +} from 'antd-mobile-icons'; +``` + +### 工作台模块使用的图标 +```typescript +// 移动端项目中的图标使用 +import { + LikeOutline, // 点赞（替换ThumbsUpOutline） + LinkOutline, // 链接（替换ShareOutline） + PieOutline, // 饼图（替换BarChartOutline/LineChartOutline） + UserOutline, // 用户 + TeamOutline, // 团队 + MessageOutline, // 消息 +} from 'antd-mobile-icons'; +``` + +## 更新和维护 + +1. **定期检查**: 定期检查新版本中新增的图标 +2. **文档更新**: 及时更新图标对照表 +3. **团队协作**: 团队成员共享图标使用规范 +4. **代码审查**: 在代码审查中检查图标使用是否正确 + +## 注意事项 + +1. **包版本**: 确保图标包版本与UI框架版本兼容 +2. **按需导入**: 避免全量导入图标，影响打包体积 +3. **样式覆盖**: 可以通过CSS自定义图标样式 +4. **无障碍**: 为图标添加适当的无障碍属性 5. **性能**: 大量使用图标时注意性能优化 \ No newline at end of file diff --git a/nkebao/ICON_MAPPING_GUIDE.md b/nkebao/ICON_MAPPING_GUIDE.md index 81d901d0..2b237842 100644 --- a/nkebao/ICON_MAPPING_GUIDE.md +++ b/nkebao/ICON_MAPPING_GUIDE.md @@ -1,230 +1,230 @@ -# PC端与移动端图标对照文档 - -## 概述 - -本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。 - -## 导入方式 - -### PC端图标 (@ant-design/icons) -```typescript -import { - HomeOutlined, - UserOutlined, - SettingOutlined, - // ... 其他图标 -} from '@ant-design/icons'; -``` - -### 移动端图标 (antd-mobile-icons) -```typescript -import { - AntOutline, - ArrowDownCircleOutline, - UserOutline, - // ... 其他图标 -} from 'antd-mobile-icons'; -``` - -## 图标对照表 - -### 常用图标对照 - -| 功能描述 | PC端图标 | 移动端图标 | 备注 | -|---------|---------|-----------|------| -| 首页 | HomeOutlined | HomeOutline | 完全对应 | -| 用户 | UserOutlined | UserOutline | 完全对应 | -| 设置 | SettingOutlined | SettingOutline | 完全对应 | -| 搜索 | SearchOutlined | SearchOutline | 完全对应 | -| 添加 | PlusOutlined | AddOutline | 完全对应 | -| 编辑 | EditOutlined | EditSOutline | 移动端略有不同 | -| 删除 | DeleteOutlined | DeleteOutline | 完全对应 | -| 复制 | CopyOutlined | CopyOutline | 完全对应 | -| 刷新 | ReloadOutlined | RefreshOutline | 完全对应 | -| 二维码 | QrcodeOutlined | QrCodeOutline | 完全对应 | -| 日历 | CalendarOutlined | CalendarOutline | 完全对应 | -| 时钟 | ClockCircleOutlined | ClockCircleOutline | 完全对应 | -| 箭头向上 | UpOutlined | UpOutline | 完全对应 | -| 箭头向下 | DownOutlined | DownOutline | 完全对应 | -| 箭头向左 | LeftOutlined | LeftOutline | 完全对应 | -| 箭头向右 | RightOutlined | RightOutline | 完全对应 | -| 返回 | ArrowLeftOutlined | LeftOutline | 移动端使用LeftOutline | -| 关闭 | CloseOutlined | CloseOutline | 完全对应 | -| 检查 | CheckOutlined | CheckOutline | 完全对应 | -| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | 完全对应 | -| 信息 | InfoCircleOutlined | InfoCircleOutline | 完全对应 | -| 成功 | CheckCircleOutlined | CheckCircleOutline | 完全对应 | -| 错误 | CloseCircleOutlined | CloseCircleOutline | 完全对应 | - -### 方向性图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 向上 | UpOutlined | UpOutline | -| 向下 | DownOutlined | DownOutline | -| 向左 | LeftOutlined | LeftOutline | -| 向右 | RightOutlined | RightOutline | -| 向上圆形 | UpCircleOutlined | UpCircleOutline | -| 向下圆形 | DownCircleOutlined | DownCircleOutline | -| 向左圆形 | LeftCircleOutlined | LeftCircleOutline | -| 向右圆形 | RightCircleOutlined | RightCircleOutline | - -### 编辑类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 编辑 | EditOutlined | EditSOutline | -| 删除 | DeleteOutlined | DeleteOutline | -| 复制 | CopyOutlined | CopyOutline | -| 剪切 | ScissorOutlined | ScissorOutline | -| 撤销 | UndoOutlined | UndoOutline | -| 重做 | RedoOutlined | RedoOutline | -| 保存 | SaveOutlined | SaveOutline | - -### 通信类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 消息 | MessageOutlined | MessageOutline | -| 邮件 | MailOutlined | MailOutline | -| 电话 | PhoneOutlined | PhoneOutline | -| 视频通话 | VideoCameraOutlined | VideoCameraOutline | -| 语音 | AudioOutlined | AudioOutline | - -### 媒体类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 图片 | PictureOutlined | PictureOutline | -| 视频 | VideoCameraOutlined | VideoCameraOutline | -| 音频 | AudioOutlined | AudioOutline | -| 文件 | FileOutlined | FileOutline | -| 文件夹 | FolderOutlined | FolderOutline | -| 相机 | CameraOutlined | CameraOutline | - -### 导航类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 菜单 | MenuOutlined | MenuOutline | -| 汉堡菜单 | MenuFoldOutlined | MenuOutline | -| 展开菜单 | MenuUnfoldOutlined | MenuOutline | -| 面包屑 | BreadcrumbOutlined | BreadcrumbOutline | -| 分页 | PaginationOutlined | PaginationOutline | - -### 数据展示类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 表格 | TableOutlined | TableOutline | -| 列表 | UnorderedListOutlined | UnorderedListOutline | -| 卡片 | CreditCardOutlined | CreditCardOutline | -| 统计 | BarChartOutlined | BarChartOutline | -| 饼图 | PieChartOutlined | PieChartOutline | -| 折线图 | LineChartOutlined | LineChartOutline | -| 仪表盘 | DashboardOutlined | DashboardOutline | - -### 反馈类图标 - -| 功能描述 | PC端图标 | 移动端图标 | -|---------|---------|-----------| -| 成功 | CheckCircleOutlined | CheckCircleOutline | -| 错误 | CloseCircleOutlined | CloseCircleOutline | -| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | -| 信息 | InfoCircleOutlined | InfoCircleOutline | -| 加载 | LoadingOutlined | LoadingOutline | -| 等待 | ClockCircleOutlined | ClockCircleOutline | - -## 使用建议 - -### 1. 项目类型判断 -- **PC端项目**: 使用 `@ant-design/icons` -- **移动端项目**: 使用 `antd-mobile-icons` - -### 2. 图标选择原则 -- 优先选择语义化图标 -- 保持图标风格一致性 -- 考虑图标在不同尺寸下的清晰度 - -### 3. 常见错误避免 -- 不要混用PC端和移动端图标 -- 注意图标名称的大小写 -- 确保图标在对应包中存在 - -### 4. 图标替换策略 -当某个图标在目标包中不存在时： -1. 查找语义相近的图标 -2. 使用通用图标（如QuestionOutlined） -3. 考虑使用文字替代 -4. 创建自定义图标组件 - -## 实际项目中的使用示例 - -### PC端项目示例 -```typescript -import { - HomeOutlined, - UserOutlined, - SettingOutlined, - SearchOutlined, - PlusOutlined, - EditOutlined, - DeleteOutlined, - CopyOutlined, - ReloadOutlined, - QrcodeOutlined, - CalendarOutlined, - ClockCircleOutlined, - UpOutlined, - DownOutlined, - LeftOutlined, - RightOutlined, - CloseOutlined, - CheckOutlined, - ExclamationCircleOutlined, - InfoCircleOutlined, - CheckCircleOutlined, - CloseCircleOutlined, -} from '@ant-design/icons'; -``` - -### 移动端项目示例 -```typescript -import { - HomeOutline, - UserOutline, - SettingOutline, - SearchOutline, - AddOutline, - EditSOutline, - DeleteOutline, - CopyOutline, - RefreshOutline, - QrCodeOutline, - CalendarOutline, - ClockCircleOutline, - UpOutline, - DownOutline, - LeftOutline, - RightOutline, - CloseOutline, - CheckOutline, - ExclamationCircleOutline, - InfoCircleOutline, - CheckCircleOutline, - CloseCircleOutline, -} from 'antd-mobile-icons'; -``` - -## 注意事项 - -1. **包依赖**: 确保项目中已安装对应的图标包 -2. **版本兼容**: 注意图标包版本与UI框架版本的兼容性 -3. **性能考虑**: 按需导入图标，避免全量导入 -4. **样式覆盖**: 可以通过CSS自定义图标颜色和大小 -5. **无障碍**: 为图标添加适当的aria-label属性 - -## 更新记录 - -- 2024-01-XX: 初始版本，包含常用图标对照 +# PC端与移动端图标对照文档 + +## 概述 + +本文档记录了PC端（@ant-design/icons）和移动端（antd-mobile-icons）的图标名称对照，以及正确的导入方式。 + +## 导入方式 + +### PC端图标 (@ant-design/icons) +```typescript +import { + HomeOutlined, + UserOutlined, + SettingOutlined, + // ... 其他图标 +} from '@ant-design/icons'; +``` + +### 移动端图标 (antd-mobile-icons) +```typescript +import { + AntOutline, + ArrowDownCircleOutline, + UserOutline, + // ... 其他图标 +} from 'antd-mobile-icons'; +``` + +## 图标对照表 + +### 常用图标对照 + +| 功能描述 | PC端图标 | 移动端图标 | 备注 | +|---------|---------|-----------|------| +| 首页 | HomeOutlined | HomeOutline | 完全对应 | +| 用户 | UserOutlined | UserOutline | 完全对应 | +| 设置 | SettingOutlined | SettingOutline | 完全对应 | +| 搜索 | SearchOutlined | SearchOutline | 完全对应 | +| 添加 | PlusOutlined | AddOutline | 完全对应 | +| 编辑 | EditOutlined | EditSOutline | 移动端略有不同 | +| 删除 | DeleteOutlined | DeleteOutline | 完全对应 | +| 复制 | CopyOutlined | CopyOutline | 完全对应 | +| 刷新 | ReloadOutlined | RefreshOutline | 完全对应 | +| 二维码 | QrcodeOutlined | QrCodeOutline | 完全对应 | +| 日历 | CalendarOutlined | CalendarOutline | 完全对应 | +| 时钟 | ClockCircleOutlined | ClockCircleOutline | 完全对应 | +| 箭头向上 | UpOutlined | UpOutline | 完全对应 | +| 箭头向下 | DownOutlined | DownOutline | 完全对应 | +| 箭头向左 | LeftOutlined | LeftOutline | 完全对应 | +| 箭头向右 | RightOutlined | RightOutline | 完全对应 | +| 返回 | ArrowLeftOutlined | LeftOutline | 移动端使用LeftOutline | +| 关闭 | CloseOutlined | CloseOutline | 完全对应 | +| 检查 | CheckOutlined | CheckOutline | 完全对应 | +| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | 完全对应 | +| 信息 | InfoCircleOutlined | InfoCircleOutline | 完全对应 | +| 成功 | CheckCircleOutlined | CheckCircleOutline | 完全对应 | +| 错误 | CloseCircleOutlined | CloseCircleOutline | 完全对应 | + +### 方向性图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 向上 | UpOutlined | UpOutline | +| 向下 | DownOutlined | DownOutline | +| 向左 | LeftOutlined | LeftOutline | +| 向右 | RightOutlined | RightOutline | +| 向上圆形 | UpCircleOutlined | UpCircleOutline | +| 向下圆形 | DownCircleOutlined | DownCircleOutline | +| 向左圆形 | LeftCircleOutlined | LeftCircleOutline | +| 向右圆形 | RightCircleOutlined | RightCircleOutline | + +### 编辑类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 编辑 | EditOutlined | EditSOutline | +| 删除 | DeleteOutlined | DeleteOutline | +| 复制 | CopyOutlined | CopyOutline | +| 剪切 | ScissorOutlined | ScissorOutline | +| 撤销 | UndoOutlined | UndoOutline | +| 重做 | RedoOutlined | RedoOutline | +| 保存 | SaveOutlined | SaveOutline | + +### 通信类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 消息 | MessageOutlined | MessageOutline | +| 邮件 | MailOutlined | MailOutline | +| 电话 | PhoneOutlined | PhoneOutline | +| 视频通话 | VideoCameraOutlined | VideoCameraOutline | +| 语音 | AudioOutlined | AudioOutline | + +### 媒体类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 图片 | PictureOutlined | PictureOutline | +| 视频 | VideoCameraOutlined | VideoCameraOutline | +| 音频 | AudioOutlined | AudioOutline | +| 文件 | FileOutlined | FileOutline | +| 文件夹 | FolderOutlined | FolderOutline | +| 相机 | CameraOutlined | CameraOutline | + +### 导航类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 菜单 | MenuOutlined | MenuOutline | +| 汉堡菜单 | MenuFoldOutlined | MenuOutline | +| 展开菜单 | MenuUnfoldOutlined | MenuOutline | +| 面包屑 | BreadcrumbOutlined | BreadcrumbOutline | +| 分页 | PaginationOutlined | PaginationOutline | + +### 数据展示类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 表格 | TableOutlined | TableOutline | +| 列表 | UnorderedListOutlined | UnorderedListOutline | +| 卡片 | CreditCardOutlined | CreditCardOutline | +| 统计 | BarChartOutlined | BarChartOutline | +| 饼图 | PieChartOutlined | PieChartOutline | +| 折线图 | LineChartOutlined | LineChartOutline | +| 仪表盘 | DashboardOutlined | DashboardOutline | + +### 反馈类图标 + +| 功能描述 | PC端图标 | 移动端图标 | +|---------|---------|-----------| +| 成功 | CheckCircleOutlined | CheckCircleOutline | +| 错误 | CloseCircleOutlined | CloseCircleOutline | +| 警告 | ExclamationCircleOutlined | ExclamationCircleOutline | +| 信息 | InfoCircleOutlined | InfoCircleOutline | +| 加载 | LoadingOutlined | LoadingOutline | +| 等待 | ClockCircleOutlined | ClockCircleOutline | + +## 使用建议 + +### 1. 项目类型判断 +- **PC端项目**: 使用 `@ant-design/icons` +- **移动端项目**: 使用 `antd-mobile-icons` + +### 2. 图标选择原则 +- 优先选择语义化图标 +- 保持图标风格一致性 +- 考虑图标在不同尺寸下的清晰度 + +### 3. 常见错误避免 +- 不要混用PC端和移动端图标 +- 注意图标名称的大小写 +- 确保图标在对应包中存在 + +### 4. 图标替换策略 +当某个图标在目标包中不存在时： +1. 查找语义相近的图标 +2. 使用通用图标（如QuestionOutlined） +3. 考虑使用文字替代 +4. 创建自定义图标组件 + +## 实际项目中的使用示例 + +### PC端项目示例 +```typescript +import { + HomeOutlined, + UserOutlined, + SettingOutlined, + SearchOutlined, + PlusOutlined, + EditOutlined, + DeleteOutlined, + CopyOutlined, + ReloadOutlined, + QrcodeOutlined, + CalendarOutlined, + ClockCircleOutlined, + UpOutlined, + DownOutlined, + LeftOutlined, + RightOutlined, + CloseOutlined, + CheckOutlined, + ExclamationCircleOutlined, + InfoCircleOutlined, + CheckCircleOutlined, + CloseCircleOutlined, +} from '@ant-design/icons'; +``` + +### 移动端项目示例 +```typescript +import { + HomeOutline, + UserOutline, + SettingOutline, + SearchOutline, + AddOutline, + EditSOutline, + DeleteOutline, + CopyOutline, + RefreshOutline, + QrCodeOutline, + CalendarOutline, + ClockCircleOutline, + UpOutline, + DownOutline, + LeftOutline, + RightOutline, + CloseOutline, + CheckOutline, + ExclamationCircleOutline, + InfoCircleOutline, + CheckCircleOutline, + CloseCircleOutline, +} from 'antd-mobile-icons'; +``` + +## 注意事项 + +1. **包依赖**: 确保项目中已安装对应的图标包 +2. **版本兼容**: 注意图标包版本与UI框架版本的兼容性 +3. **性能考虑**: 按需导入图标，避免全量导入 +4. **样式覆盖**: 可以通过CSS自定义图标颜色和大小 +5. **无障碍**: 为图标添加适当的aria-label属性 + +## 更新记录 + +- 2024-01-XX: 初始版本，包含常用图标对照 - 后续根据实际使用情况持续更新 \ No newline at end of file diff --git a/nkebao/ICON_QUICK_REFERENCE.md b/nkebao/ICON_QUICK_REFERENCE.md index 03b9c233..1e64fe9a 100644 --- a/nkebao/ICON_QUICK_REFERENCE.md +++ b/nkebao/ICON_QUICK_REFERENCE.md @@ -1,271 +1,271 @@ -# 图标快速参考表 - -## 快速查找 - -### 🔍 按功能查找 - -| 功能 | PC端 | 移动端 | 导入方式 | -|------|------|--------|----------| -| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` | -| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | - -### 🔄 常见替换 - -| 原图标 | 替换为 | 说明 | -|--------|--------|------| -| RiseOutlined | UpOutline | 上升趋势 | -| ThumbsUpOutlined | LikeOutline | 点赞功能 | -| ShareAltOutlined | LinkOutline | 分享功能 | -| BarChartOutlined | PieOutline | 图表功能 | -| LineChartOutlined | PieOutline | 图表功能 | -| UserAddOutlined | UserOutline | 用户添加 | -| SettingOutline | SettingOutline | 设置（移动端） | - -## 导入模板 - -### PC端项目模板 -```typescript -import { - HomeOutlined, - UserOutlined, - SettingOutlined, - SearchOutlined, - PlusOutlined, - EditOutlined, - DeleteOutlined, - CopyOutlined, - ReloadOutlined, - CloseOutlined, - CheckOutlined, - UpOutlined, - DownOutlined, - LeftOutlined, - RightOutlined, - MessageOutlined, - CalendarOutlined, - ClockCircleOutlined, - PictureOutlined, - FileOutlined, - CameraOutlined, - QrcodeOutlined, - WechatOutlined, - MobileOutlined, - TeamOutlined, - ShoppingOutlined, - PayCircleOutlined, - CheckCircleOutlined, - CloseCircleOutlined, - ExclamationCircleOutlined, - InfoCircleOutlined, - LoadingOutlined, -} from '@ant-design/icons'; -``` - -### 移动端项目模板 -```typescript -import { - HomeOutline, - UserOutline, - SettingOutline, - SearchOutline, - AddOutline, - EditSOutline, - DeleteOutline, - CopyOutline, - RefreshOutline, - CloseOutline, - CheckOutline, - UpOutline, - DownOutline, - LeftOutline, - RightOutline, - MessageOutline, - CalendarOutline, - ClockCircleOutline, - PictureOutline, - FileOutline, - CameraOutline, - QrCodeOutline, - WechatOutline, - MobileOutline, - TeamOutline, - ShoppingOutline, - PayCircleOutline, - CheckCircleOutline, - CloseCircleOutline, - ExclamationCircleOutline, - InfoCircleOutline, - LoadingOutline, -} from 'antd-mobile-icons'; -``` - -## 使用示例 - -### 基础使用 -```typescript -// PC端 -import { HomeOutlined, UserOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { HomeOutline, UserOutline } from 'antd-mobile-icons'; - - - -``` - -### 按钮中使用 -```typescript -// PC端 -import { PlusOutlined, EditOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { AddOutline, EditSOutline } from 'antd-mobile-icons'; - - - -``` - -### 列表中使用 -```typescript -// PC端 -import { DeleteOutlined, CopyOutlined } from '@ant-design/icons'; - - - - -// 移动端 -import { DeleteOutline, CopyOutline } from 'antd-mobile-icons'; - - - -``` - -## 常见错误 - -### ❌ 错误示例 -```typescript -// 错误：混用PC端和移动端图标 -import { HomeOutlined } from '@ant-design/icons'; // PC端 -import { UserOutline } from 'antd-mobile-icons'; // 移动端 - -// 错误：使用不存在的图标 -import { RiseOutlined } from 'antd-mobile-icons'; // 不存在 -import { UserAddOutline } from 'antd-mobile-icons'; // 不存在 -``` - -### ✅ 正确示例 -```typescript -// 正确：统一使用移动端图标 -import { - HomeOutline, - UserOutline, - UpOutline, // 替换RiseOutlined - UserOutline // 替换UserAddOutline -} from 'antd-mobile-icons'; - -// 正确：统一使用PC端图标 -import { - HomeOutlined, - UserOutlined, - RiseOutlined, // PC端存在 - UserAddOutlined // PC端存在 -} from '@ant-design/icons'; -``` - -## 快速检查清单 - -### 开发前检查 -- [ ] 确认项目类型（PC端/移动端） -- [ ] 选择对应的图标包 -- [ ] 检查图标是否存在 -- [ ] 准备替换方案 - -### 开发中检查 -- [ ] 使用正确的导入方式 -- [ ] 图标名称大小写正确 -- [ ] 避免混用不同包的图标 -- [ ] 为图标添加适当的样式 - -### 开发后检查 -- [ ] 图标显示正常 -- [ ] 样式符合设计要求 -- [ ] 无障碍属性完整 -- [ ] 性能影响最小 - -## 紧急替换方案 - -当遇到图标不存在时，使用以下通用图标： - -```typescript -// 移动端通用图标 -import { - QuestionCircleOutline, // 通用问号 - AppOutline, // 通用应用 - ToolOutline, // 通用工具 - SettingOutline, // 通用设置 - UserOutline, // 通用用户 -} from 'antd-mobile-icons'; - -// PC端通用图标 -import { - QuestionCircleOutlined, // 通用问号 - AppstoreOutlined, // 通用应用 - ToolOutlined, // 通用工具 - SettingOutlined, // 通用设置 - UserOutlined, // 通用用户 -} from '@ant-design/icons'; -``` - -## 更新日志 - -- 2024-01-XX: 初始版本 -- 添加常用图标对照 -- 添加错误示例和正确示例 -- 添加快速检查清单 +# 图标快速参考表 + +## 快速查找 + +### 🔍 按功能查找 + +| 功能 | PC端 | 移动端 | 导入方式 | +|------|------|--------|----------| +| **添加** | PlusOutlined | AddOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **编辑** | EditOutlined | EditSOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **删除** | DeleteOutlined | DeleteOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **复制** | CopyOutlined | CopyOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **搜索** | SearchOutlined | SearchOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **刷新** | ReloadOutlined | RefreshOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **设置** | SettingOutlined | SettingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **用户** | UserOutlined | UserOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **首页** | HomeOutlined | HomeOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **返回** | ArrowLeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **关闭** | CloseOutlined | CloseOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **确认** | CheckOutlined | CheckOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **成功** | CheckCircleOutlined | CheckCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **错误** | CloseCircleOutlined | CloseCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **警告** | ExclamationCircleOutlined | ExclamationCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **信息** | InfoCircleOutlined | InfoCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **加载** | LoadingOutlined | LoadingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向上** | UpOutlined | UpOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向下** | DownOutlined | DownOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向左** | LeftOutlined | LeftOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **向右** | RightOutlined | RightOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **消息** | MessageOutlined | MessageOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **电话** | PhoneOutlined | PhoneOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **日历** | CalendarOutlined | CalendarOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **时钟** | ClockCircleOutlined | ClockCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **图片** | PictureOutlined | PictureOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **文件** | FileOutlined | FileOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **相机** | CameraOutlined | CameraOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **二维码** | QrcodeOutlined | QrCodeOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **微信** | WechatOutlined | WechatOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **设备** | MobileOutlined | MobileOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **团队** | TeamOutlined | TeamOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **订单** | ShoppingOutlined | ShoppingOutline | `@ant-design/icons` / `antd-mobile-icons` | +| **支付** | PayCircleOutlined | PayCircleOutline | `@ant-design/icons` / `antd-mobile-icons` | + +### 🔄 常见替换 + +| 原图标 | 替换为 | 说明 | +|--------|--------|------| +| RiseOutlined | UpOutline | 上升趋势 | +| ThumbsUpOutlined | LikeOutline | 点赞功能 | +| ShareAltOutlined | LinkOutline | 分享功能 | +| BarChartOutlined | PieOutline | 图表功能 | +| LineChartOutlined | PieOutline | 图表功能 | +| UserAddOutlined | UserOutline | 用户添加 | +| SettingOutline | SettingOutline | 设置（移动端） | + +## 导入模板 + +### PC端项目模板 +```typescript +import { + HomeOutlined, + UserOutlined, + SettingOutlined, + SearchOutlined, + PlusOutlined, + EditOutlined, + DeleteOutlined, + CopyOutlined, + ReloadOutlined, + CloseOutlined, + CheckOutlined, + UpOutlined, + DownOutlined, + LeftOutlined, + RightOutlined, + MessageOutlined, + CalendarOutlined, + ClockCircleOutlined, + PictureOutlined, + FileOutlined, + CameraOutlined, + QrcodeOutlined, + WechatOutlined, + MobileOutlined, + TeamOutlined, + ShoppingOutlined, + PayCircleOutlined, + CheckCircleOutlined, + CloseCircleOutlined, + ExclamationCircleOutlined, + InfoCircleOutlined, + LoadingOutlined, +} from '@ant-design/icons'; +``` + +### 移动端项目模板 +```typescript +import { + HomeOutline, + UserOutline, + SettingOutline, + SearchOutline, + AddOutline, + EditSOutline, + DeleteOutline, + CopyOutline, + RefreshOutline, + CloseOutline, + CheckOutline, + UpOutline, + DownOutline, + LeftOutline, + RightOutline, + MessageOutline, + CalendarOutline, + ClockCircleOutline, + PictureOutline, + FileOutline, + CameraOutline, + QrCodeOutline, + WechatOutline, + MobileOutline, + TeamOutline, + ShoppingOutline, + PayCircleOutline, + CheckCircleOutline, + CloseCircleOutline, + ExclamationCircleOutline, + InfoCircleOutline, + LoadingOutline, +} from 'antd-mobile-icons'; +``` + +## 使用示例 + +### 基础使用 +```typescript +// PC端 +import { HomeOutlined, UserOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { HomeOutline, UserOutline } from 'antd-mobile-icons'; + + + +``` + +### 按钮中使用 +```typescript +// PC端 +import { PlusOutlined, EditOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { AddOutline, EditSOutline } from 'antd-mobile-icons'; + + + +``` + +### 列表中使用 +```typescript +// PC端 +import { DeleteOutlined, CopyOutlined } from '@ant-design/icons'; + + + + +// 移动端 +import { DeleteOutline, CopyOutline } from 'antd-mobile-icons'; + + + +``` + +## 常见错误 + +### ❌ 错误示例 +```typescript +// 错误：混用PC端和移动端图标 +import { HomeOutlined } from '@ant-design/icons'; // PC端 +import { UserOutline } from 'antd-mobile-icons'; // 移动端 + +// 错误：使用不存在的图标 +import { RiseOutlined } from 'antd-mobile-icons'; // 不存在 +import { UserAddOutline } from 'antd-mobile-icons'; // 不存在 +``` + +### ✅ 正确示例 +```typescript +// 正确：统一使用移动端图标 +import { + HomeOutline, + UserOutline, + UpOutline, // 替换RiseOutlined + UserOutline // 替换UserAddOutline +} from 'antd-mobile-icons'; + +// 正确：统一使用PC端图标 +import { + HomeOutlined, + UserOutlined, + RiseOutlined, // PC端存在 + UserAddOutlined // PC端存在 +} from '@ant-design/icons'; +``` + +## 快速检查清单 + +### 开发前检查 +- [ ] 确认项目类型（PC端/移动端） +- [ ] 选择对应的图标包 +- [ ] 检查图标是否存在 +- [ ] 准备替换方案 + +### 开发中检查 +- [ ] 使用正确的导入方式 +- [ ] 图标名称大小写正确 +- [ ] 避免混用不同包的图标 +- [ ] 为图标添加适当的样式 + +### 开发后检查 +- [ ] 图标显示正常 +- [ ] 样式符合设计要求 +- [ ] 无障碍属性完整 +- [ ] 性能影响最小 + +## 紧急替换方案 + +当遇到图标不存在时，使用以下通用图标： + +```typescript +// 移动端通用图标 +import { + QuestionCircleOutline, // 通用问号 + AppOutline, // 通用应用 + ToolOutline, // 通用工具 + SettingOutline, // 通用设置 + UserOutline, // 通用用户 +} from 'antd-mobile-icons'; + +// PC端通用图标 +import { + QuestionCircleOutlined, // 通用问号 + AppstoreOutlined, // 通用应用 + ToolOutlined, // 通用工具 + SettingOutlined, // 通用设置 + UserOutlined, // 通用用户 +} from '@ant-design/icons'; +``` + +## 更新日志 + +- 2024-01-XX: 初始版本 +- 添加常用图标对照 +- 添加错误示例和正确示例 +- 添加快速检查清单 - 添加紧急替换方案 \ No newline at end of file diff --git a/nkebao/index.html b/nkebao/index.html index 2aaa892e..784f0cf8 100644 --- a/nkebao/index.html +++ b/nkebao/index.html @@ -1,13 +1,13 @@ - - - - - - Nkebao Base - - - -
- - + + + + + + Nkebao Base + + + +
+ + \ No newline at end of file From 4a70635ae4085d453fd758eee182549946e26e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Wed, 13 Aug 2025 11:32:05 +0800 Subject: [PATCH 02/32] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nkebao/postcss.config.js | 14 +++++------ nkebao/技术栈.md | 50 ++++++++++++++++++++-------------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/nkebao/postcss.config.js b/nkebao/postcss.config.js index 34ea9ede..82ee5d38 100644 --- a/nkebao/postcss.config.js +++ b/nkebao/postcss.config.js @@ -1,8 +1,8 @@ -module.exports = { - plugins: { - 'postcss-pxtorem': { - rootValue: 16, - propList: ['*'], - }, - }, +module.exports = { + plugins: { + 'postcss-pxtorem': { + rootValue: 16, + propList: ['*'], + }, + }, }; \ No newline at end of file diff --git a/nkebao/技术栈.md b/nkebao/技术栈.md index be554562..a565619f 100644 --- a/nkebao/技术栈.md +++ b/nkebao/技术栈.md @@ -1,26 +1,26 @@ -## 使用技术栈 -- React 18 -- TypeScript -- Vite（新一代前端构建工具） -- axios -- sass (scss) -- React Router v6 -- antd-mobile -- antd（已设置基础单位为 rem，配合 postcss-pxtorem） -- postcss-pxtorem（px 转 rem，移动端适配） -- ESLint + Prettier（代码规范与自动格式化） -- 路径别名 @ 指向 src 目录 - -## 关于兼容与工程化 -- 自动化脚本（yarn lint、yarn dev 等） -- 移动端 rem 适配（html 根字体 + pxtorem） -- iOS 浏览器滚动回弹兼容问题已通过全局样式处理 -- 支持 VS Code 编辑器自动格式化（推荐配合 ESLint/Prettier 插件） - -## 目录结构简要 -- src/ 业务源码（pages、api、styles、App.tsx、main.tsx 等） -- public/ 静态资源目录 -- index.html 项目入口（根目录） -- vite.config.ts 构建与路径别名配置 -- tsconfig.json TypeScript 配置 +## 使用技术栈 +- React 18 +- TypeScript +- Vite（新一代前端构建工具） +- axios +- sass (scss) +- React Router v6 +- antd-mobile +- antd（已设置基础单位为 rem，配合 postcss-pxtorem） +- postcss-pxtorem（px 转 rem，移动端适配） +- ESLint + Prettier（代码规范与自动格式化） +- 路径别名 @ 指向 src 目录 + +## 关于兼容与工程化 +- 自动化脚本（yarn lint、yarn dev 等） +- 移动端 rem 适配（html 根字体 + pxtorem） +- iOS 浏览器滚动回弹兼容问题已通过全局样式处理 +- 支持 VS Code 编辑器自动格式化（推荐配合 ESLint/Prettier 插件） + +## 目录结构简要 +- src/ 业务源码（pages、api、styles、App.tsx、main.tsx 等） +- public/ 静态资源目录 +- index.html 项目入口（根目录） +- vite.config.ts 构建与路径别名配置 +- tsconfig.json TypeScript 配置 - .eslintrc.js 代码规范配置 \ No newline at end of file From 66ddb75c13b2acdbd0356e683f64f7d656b3a65b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Sat, 13 Sep 2025 11:46:03 +0800 Subject: [PATCH 03/32] =?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 27f0532491a85b55932da6bb98135a89d4dfcd39 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 18:04:33 +0800 Subject: [PATCH 04/32] =?UTF-8?q?feat(sop-send):=20=E5=AE=9E=E7=8E=B0SOP?= =?UTF-8?q?=E7=BE=A4=E5=8F=91=E4=BB=BB=E5=8A=A1=E7=AE=A1=E7=90=86=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E5=8F=8A=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加SOP任务管理界面，包括任务列表展示、统计卡片、任务增删改查及状态切换功能 实现响应式布局适配不同屏幕尺寸 --- .../powerCenter/sop-send/index.module.scss | 234 ++++++++++++++-- .../pc/ckbox/powerCenter/sop-send/index.tsx | 259 +++++++++++++++++- 2 files changed, 464 insertions(+), 29 deletions(-) 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 index bf1ac1e6..0fe860cd 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss @@ -1,43 +1,235 @@ .container { padding: 24px; - background: #fff; - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background: #f5f5f5; + min-height: 100vh; } .header { + background: #fff; + border-radius: 8px; + padding: 24px; + margin-bottom: 24px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); +} + +.titleSection { + display: flex; + justify-content: space-between; + align-items: center; margin-bottom: 24px; h1 { - font-size: 24px; + font-size: 20px; font-weight: 600; color: #262626; - margin: 0 0 8px 0; + margin: 0; + display: flex; + align-items: center; + + &::before { + content: ''; + width: 4px; + height: 20px; + background: #1890ff; + border-radius: 2px; + margin-right: 12px; + } } - p { - font-size: 14px; - color: #8c8c8c; - margin: 0; + .actions { + display: flex; + gap: 12px; + } +} + +.statsSection { + display: flex; + gap: 24px; + + .statCard { + flex: 1; + text-align: center; + padding: 16px; + background: #fafafa; + border-radius: 8px; + border: 1px solid #f0f0f0; + + .statNumber { + font-size: 32px; + font-weight: 600; + color: #262626; + margin-bottom: 4px; + + &:nth-child(1) { + color: #1890ff; + } + } + + .statLabel { + font-size: 14px; + color: #8c8c8c; + } + + &:nth-child(1) .statNumber { + color: #1890ff; + } + + &:nth-child(2) .statNumber { + color: #52c41a; + } + + &:nth-child(3) .statNumber { + color: #fa8c16; + } + + &:nth-child(4) .statNumber { + color: #eb2f96; + } } } .content { - min-height: 400px; + background: #fff; + border-radius: 8px; + padding: 24px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } -.placeholder { - display: flex; - align-items: center; - justify-content: center; - height: 300px; - background: #fafafa; - border: 1px dashed #d9d9d9; - border-radius: 6px; +.taskList { + .taskHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + + h3 { + font-size: 16px; + font-weight: 600; + color: #262626; + margin: 0; + } + + .taskCount { + font-size: 14px; + color: #8c8c8c; + } + } +} + +.taskCard { + margin-bottom: 16px; + border: 1px solid #f0f0f0; + border-radius: 8px; + transition: all 0.3s ease; - p { - font-size: 16px; + &:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border-color: #d9d9d9; + } + + &:last-child { + margin-bottom: 0; + } +} + +.taskContent { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 16px; +} + +.taskInfo { + flex: 1; + + .taskTitle { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; + + .taskName { + font-size: 16px; + font-weight: 600; + color: #262626; + } + } + + .taskMeta { + font-size: 14px; color: #8c8c8c; - margin: 0; + margin-bottom: 12px; + } + + .taskDetails { + display: flex; + gap: 16px; + font-size: 12px; + color: #8c8c8c; + + span { + position: relative; + + &:not(:last-child)::after { + content: '|'; + position: absolute; + right: -8px; + color: #d9d9d9; + } + } + } +} + +.taskActions { + display: flex; + gap: 8px; + align-items: center; + + .ant-btn { + border: none; + box-shadow: none; + color: #8c8c8c; + + &:hover { + color: #1890ff; + background: #f0f8ff; + } + } +} + +// 响应式布局 +@media (max-width: 768px) { + .container { + padding: 16px; + } + + .titleSection { + flex-direction: column; + align-items: flex-start; + gap: 16px; + + h1 { + font-size: 18px; + } + } + + .statsSection { + flex-direction: column; + gap: 12px; + + .statCard { + .statNumber { + font-size: 24px; + } + } + } + + .taskContent { + flex-direction: column; + gap: 16px; + } + + .taskActions { + justify-content: flex-end; } } \ 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 index 05039d06..1ad4e35f 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx @@ -1,19 +1,262 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import { Button, Card, Tag, Progress, Modal, Form, Input, Select, DatePicker, message } from "antd"; +import { PlusOutlined, EditOutlined, DeleteOutlined, PlayCircleOutlined, PauseCircleOutlined, SettingOutlined } from "@ant-design/icons"; import styles from "./index.module.scss"; +interface SopTask { + id: string; + title: string; + status: 'running' | 'paused' | 'completed' | 'draft'; + totalCustomers: number; + completedCustomers: number; + plannedCustomers: number; + completionRate: number; + createTime: string; + updateTime: string; +} + const SopSend: React.FC = () => { + const [tasks, setTasks] = useState([ + { + id: '1', + title: '春节营销活动', + status: 'running', + totalCustomers: 1000, + completedCustomers: 156, + plannedCustomers: 3, + completionRate: 57, + createTime: '2024/2/27', + updateTime: '15:28' + }, + { + id: '2', + title: '产品推广', + status: 'running', + totalCustomers: 800, + completedCustomers: 120, + plannedCustomers: 2, + completionRate: 45, + createTime: '2024/2/27', + updateTime: '15:13' + }, + { + id: '3', + title: '客户回访', + status: 'paused', + totalCustomers: 500, + completedCustomers: 80, + plannedCustomers: 1, + completionRate: 32, + createTime: '2024/2/27', + updateTime: '15:10' + } + ]); + + const [isModalVisible, setIsModalVisible] = useState(false); + const [editingTask, setEditingTask] = useState(null); + const [form] = Form.useForm(); + + // 计算总体统计数据 + const totalStats = { + totalCustomers: tasks.reduce((sum, task) => sum + task.totalCustomers, 0), + completedCustomers: tasks.reduce((sum, task) => sum + task.completedCustomers, 0), + plannedCustomers: tasks.reduce((sum, task) => sum + task.plannedCustomers, 0), + averageCompletionRate: Math.round(tasks.reduce((sum, task) => sum + task.completionRate, 0) / tasks.length) || 0 + }; + + const handleCreateTask = () => { + setEditingTask(null); + form.resetFields(); + setIsModalVisible(true); + }; + + const handleEditTask = (task: SopTask) => { + setEditingTask(task); + form.setFieldsValue({ + title: task.title, + totalCustomers: task.totalCustomers + }); + setIsModalVisible(true); + }; + + const handleDeleteTask = (taskId: string) => { + Modal.confirm({ + title: '确认删除', + content: '确定要删除这个SOP任务吗？', + onOk: () => { + setTasks(tasks.filter(task => task.id !== taskId)); + message.success('删除成功'); + } + }); + }; + + const handleToggleStatus = (taskId: string) => { + setTasks(tasks.map(task => { + if (task.id === taskId) { + const newStatus = task.status === 'running' ? 'paused' : 'running'; + return { ...task, status: newStatus }; + } + return task; + })); + }; + + const handleModalOk = () => { + form.validateFields().then(values => { + if (editingTask) { + // 编辑任务 + setTasks(tasks.map(task => + task.id === editingTask.id + ? { ...task, ...values, updateTime: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5) } + : task + )); + message.success('任务更新成功'); + } else { + // 新建任务 + const newTask: SopTask = { + id: Date.now().toString(), + title: values.title, + status: 'draft', + totalCustomers: values.totalCustomers, + completedCustomers: 0, + plannedCustomers: 0, + completionRate: 0, + createTime: new Date().toLocaleDateString('zh-CN'), + updateTime: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5) + }; + setTasks([...tasks, newTask]); + message.success('任务创建成功'); + } + setIsModalVisible(false); + }); + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'running': return 'processing'; + case 'paused': return 'warning'; + case 'completed': return 'success'; + case 'draft': return 'default'; + default: return 'default'; + } + }; + + const getStatusText = (status: string) => { + switch (status) { + case 'running': return '进行中'; + case 'paused': return '已暂停'; + case 'completed': return '已完成'; + case 'draft': return '草稿'; + default: return '未知'; + } + }; + return (
-

SOP群发

-

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

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

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

+
+

SOP任务评估 - AI智能营销天天计划

+
+ + +
+
+ +
+
+
{totalStats.totalCustomers}
+
总人数
+
+
+
{totalStats.completedCustomers}
+
已完成
+
+
+
{totalStats.plannedCustomers}
+
计划客户
+
+
+
{totalStats.averageCompletionRate}%
+
完成率
+
+ +
+
+
+

营销任务

+ 共 {tasks.length} 个任务 +
+ + {tasks.map(task => ( + +
+
+
+ {task.title} + {getStatusText(task.status)} +
+
+ AI智能客服，优化沟通，客户个性化服务 +
+
+ 目标: 新客户获取 + 类型: 文本 + 创建: {task.createTime} + 更新: {task.updateTime} +
+
+ +
+
+
+ + ))} +
+
+ + setIsModalVisible(false)} + width={600} + > +
+ + + + + + +
+
); }; From 88653c1656a156524a1a237d32bc432728ccd42d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 25 Sep 2025 11:08:03 +0800 Subject: [PATCH 05/32] =?UTF-8?q?feat(=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E9=87=8D=E6=A7=8B=E8=88=87=E6=A8=A3=E5=BC=8F=E5=84=AA=E5=8C=96?= =?UTF-8?q?):=20=E5=B0=87=E5=8A=9F=E8=83=BD=E5=8D=A1=E7=89=87=E7=B5=90?= =?UTF-8?q?=E6=A7=8B=E9=87=8D=E7=B5=84=E7=82=BA=E5=88=86=E9=A1=9E=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E6=96=B0=E5=A2=9E=E7=86=B1=E9=96=80=E8=88=87?= =?UTF-8?q?=E6=96=B0=E5=8A=9F=E8=83=BD=E6=A8=99=E7=B1=A4=EF=BC=8C=E4=B8=A6?= =?UTF-8?q?=E5=84=AA=E5=8C=96=E6=A8=A3=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87?= =?UTF-8?q?=E7=94=A8=E6=88=B6=E9=AB=94=E9=A9=97=E3=80=82=E5=90=8C=E6=99=82?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=80=9A=E7=94=A8=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E9=A0=81=E9=9D=A2=E8=B7=AF=E7=94=B1=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pc/ckbox/commonConfig/index.module.scss | 60 +++ .../src/pages/pc/ckbox/commonConfig/index.tsx | 139 ++++++ .../pc/ckbox/components/NavCommon/index.tsx | 7 +- .../pages/pc/ckbox/powerCenter/index.data.tsx | 173 +++---- .../pc/ckbox/powerCenter/index.module.scss | 468 +++++++++++------- .../src/pages/pc/ckbox/powerCenter/index.tsx | 132 +++-- Touchkebao/src/router/module/pc.tsx | 5 + 7 files changed, 629 insertions(+), 355 deletions(-) create mode 100644 Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss create mode 100644 Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss new file mode 100644 index 00000000..2fa1794a --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.module.scss @@ -0,0 +1,60 @@ +/* common-config page styles */ +.container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + padding: 16px; +} + +.tabsBar { + display: grid; + grid-template-columns: repeat(5, max-content); + gap: 24px; + padding: 12px 16px 0 16px; + color: #667085; +} + +.tab { + padding: 10px 16px; + border-radius: 8px; + background: #f7f9fc; + cursor: pointer; +} + +.tabActive { + padding: 10px 16px; + border-radius: 8px; + background: #eef5ff; + color: #1677ff; + box-shadow: inset 0 0 0 1px #d6e6ff; +} + +.left, +.right { + min-height: 420px; +} + +.tip { + color: #98a2b3; + margin-bottom: 16px; +} + +.formItem { + margin-bottom: 16px; +} + +.label { + margin-bottom: 8px; + color: #344054; +} + +.primaryBtn { + height: 40px; + border-radius: 8px; +} + +.actions { + padding: 12px 16px; + background: #fff; + border-top: 1px solid #eee; +} diff --git a/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx new file mode 100644 index 00000000..e483937e --- /dev/null +++ b/Touchkebao/src/pages/pc/ckbox/commonConfig/index.tsx @@ -0,0 +1,139 @@ +import React, { useState } from "react"; +import Layout from "@/components/Layout/LayoutFiexd"; +import PowerNavigation from "@/components/PowerNavtion"; +import { Card, Select, Button, Space, Tag, List } from "antd"; +import { SettingOutlined, DatabaseOutlined } from "@ant-design/icons"; +import styles from "./index.module.scss"; + +const { Option } = Select; + +const CommonConfig: React.FC = () => { + const [pool, setPool] = useState(); + const [mode, setMode] = useState("人工接待"); + + const pools = ["官网咨询", "朋友推荐", "展会获客"]; + + return ( + + +
+
接待设置
+
通知设置
+
系统设置
+
安全设置
+
高级设置
+
+ + } + footer={ +
+ + + + +
+ } + > +
+
+ + + 全局接待模式 + + } + > +
+ 支持按流量池批量设置，单个客户设置将覆盖流量池默认配置 +
+ +
+
选择流量池
+ +
+ +
+
接待模式
+ +
+ + + +
+ +
+ + + 流量池状态 + + } + > + ( + + + + {index % 3 === 0 + ? "AI辅助" + : index % 3 === 1 + ? "人工接待" + : "AI接管"} + + + )} + /> + +
+
+ + ); +}; + +export default CommonConfig; diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index b3053eef..b8e632b9 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -124,7 +124,12 @@ const NavCommon: React.FC = ({ title = "触客宝" }) => {
-
+
{ + navigate("/pc/commonConfig"); + }} + >
, - color: "#ff6b35", - path: "/pc/powerCenter/precision-send", + color: "#1890ff", + count: 2, + features: [ + { + id: "customer-management", + title: "客户好友管理", + description: "管理客户关系,维护好友信息,提升客户满意度", + icon: , + color: "#1890ff", + path: "/pc/powerCenter/customer-management", + isHot: true, + }, + { + id: "communication-record", + title: "沟通记录", + description: "记录和分析所有客户沟通历史,优化服务质量", + icon: , + color: "#52c41a", + path: "/pc/powerCenter/communication-record", + }, + ], }, { - id: "sop-send", - title: "SOP群发", - description: "使用触客宝SOP标准化流程进行批量消息发送", - icon: , - color: "#4285f4", - path: "/pc/powerCenter/sop-send", + id: "ai", + title: "AI智能功能", + icon: , + color: "#722ed1", + count: 2, + features: [ + { + id: "ai-training", + title: "AI模型训练", + description: "训练专属AI模型,提升智能服务能力", + icon: , + color: "#fa8c16", + path: "/pc/powerCenter/ai-training", + isNew: true, + }, + { + id: "auto-greeting", + title: "自动问候", + description: "设置智能问候规则,自动化客户接待流程", + icon: , + color: "#722ed1", + path: "/pc/powerCenter/auto-greeting", + }, + ], }, { - id: "moments-marketing", - title: "朋友圈营销", - description: "AI智能生成朋友圈内容，提升品牌曝光度", - icon: , - color: "#34a853", - path: "/pc/powerCenter/moments-marketing", - }, - { - id: "tag-management", - title: "标签管理", - description: "智能客户标签分类，精准用户画像分析", - icon: , - color: "#9c27b0", - path: "/pc/powerCenter/tag-management", - }, - { - id: "customer-management", - title: "客户好友管理", - description: "统一管理客户信息和好友关系，提升服务效率", - icon: , - color: "#6366f1", - path: "/pc/powerCenter/customer-management", - }, - { - id: "communication-record", - title: "沟通记录", - description: "完整记录客户沟通历史，支持多维度查询分析", - icon: , - color: "#06b6d4", - path: "/pc/powerCenter/communication-record", - }, - { - id: "content-management", - title: "内容管理", - description: "素材管理、数据词汇库、关键词自动回复", - icon: , - color: "#f59e0b", - path: "/pc/powerCenter/content-management", - }, - { - id: "ai-training", - title: "AI模型训练", - description: "自定义AI模型训练，打造专属智能客服助手", - icon: , - color: "#ec4899", - path: "/pc/powerCenter/ai-training", - isNew: true, - }, - { - id: "auto-greeting", - title: "自动打招呼", - description: "智能识别新好友，自动发送个性化欢迎消息", - icon: , - color: "#10b981", - path: "/pc/powerCenter/auto-greeting", + id: "marketing", + title: "营销管理", + icon: , + color: "#52c41a", + count: 1, + features: [ + { + id: "content-management", + title: "内容管理", + description: "管理营销内容,素材库,提升内容创作效率", + icon: , + color: "#722ed1", + path: "/pc/powerCenter/content-management", + }, + ], }, ]; - -export const tabItems: TabItem[] = [ - { 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.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss index 2eb34c95..a5637311 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss @@ -1,127 +1,174 @@ .powerCenter { - padding: 24px; - background-color: #f5f5f5; + padding: 40px; + background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); min-height: 100vh; - .header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 32px; - background: white; - padding: 24px; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + // 功能分类区域 + .categorySection { + margin-bottom: 48px; - .headerLeft { - .title { - font-size: 28px; - font-weight: 600; - color: #1a1a1a; - margin: 0 0 8px 0; + .categoryHeader { + display: flex; + align-items: center; + margin-bottom: 24px; + padding: 0 8px; + + .categoryIcon { + width: 48px; + height: 48px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 16px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + + .anticon { + font-size: 24px; + color: white; + } } - .subtitle { - font-size: 14px; - color: #666; - margin: 0; + .categoryInfo { + .categoryTitle { + font-size: 24px; + font-weight: 600; + color: #1a1a1a; + margin: 0 0 4px 0; + } + + .categoryCount { + font-size: 14px; + color: #666; + background: #f0f0f0; + padding: 4px 12px; + border-radius: 12px; + border: 1px solid #e0e0e0; + } } } - .headerRight { - .tabs { - .tab { - border-radius: 8px; - border: 1px solid #e0e0e0; - color: #666; + .featureCards { + display: flex; + justify-content: flex-start; + gap: 24px; + flex-wrap: wrap; - &:hover { - color: #1890ff; - border-color: #1890ff; - } + .featureCard { + border-radius: 16px; + border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + width: 30%; + cursor: pointer; + position: relative; + overflow: hidden; + background: white; + padding: 20px; + box-sizing: border-box; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } - .activeTab { - border-radius: 8px; - background: #1890ff; - border-color: #1890ff; - box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2); + .cardContent { + .cardHeader { + position: relative; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + .cardIcon { + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + .anticon { + font-size: 24px; + color: white; + } + } + .badge { + background: #ff6b35; + color: white; + font-size: 11px; + font-weight: 500; + padding: 4px 8px; + border-radius: 12px; + z-index: 2; + box-shadow: 0 1px 4px rgba(255, 107, 53, 0.3); + height: 24px; + // 新功能标签样式 + &[data-type="new"] { + background: #52c41a; + box-shadow: 0 1px 4px rgba(82, 196, 26, 0.3); + } + } + } + + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + + .cardTitle { + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + margin: 0 0 8px 0; + line-height: 1.3; + } + + .cardDescription { + font-size: 14px; + color: #666; + line-height: 1.5; + margin: 0 0 12px 0; + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + flex: 1; + } + + .cardAction { + display: flex; + justify-content: space-between; + color: #979797; + font-size: 12px; + font-weight: 500; + + .arrow { + font-size: 14px; + transition: transform 0.3s ease; + } + + &:hover .arrow { + transform: translateX(4px); + } + } + } } } } } - .cardGrid { - .featureCard { - border-radius: 16px; - border: none; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); - transition: all 0.3s ease; - height: 200px; - cursor: pointer; + // 页面底部 + .footer { + text-align: center; + margin-top: 60px; + padding: 24px 0; - &:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - } - - .cardContent { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - height: 100%; - justify-content: center; - - .iconWrapper { - width: 64px; - height: 64px; - border-radius: 16px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 16px; - position: relative; - - .icon { - font-size: 28px; - color: white; - } - } - - .cardInfo { - .cardTitle { - font-size: 16px; - font-weight: 600; - color: #1a1a1a; - margin: 0 0 8px 0; - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - - .newBadge { - background: linear-gradient(135deg, #ff6b6b, #ee5a24); - color: white; - font-size: 10px; - padding: 2px 6px; - border-radius: 8px; - font-weight: 500; - } - } - - .cardDescription { - font-size: 12px; - color: #666; - line-height: 1.4; - margin: 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - } - } + p { + font-size: 16px; + color: #666; + margin: 0; + font-weight: 500; } } } @@ -129,16 +176,65 @@ // 响应式设计 @media (max-width: 1200px) { .powerCenter { - .header { - flex-direction: column; - gap: 16px; - align-items: flex-start; + padding: 32px 24px; - .headerRight { - width: 100%; + .categorySection { + .categoryHeader { + .categoryIcon { + width: 44px; + height: 44px; - .tabs { - flex-wrap: wrap; + .anticon { + font-size: 22px; + } + } + + .categoryInfo { + .categoryTitle { + font-size: 22px; + } + } + } + + .featureCards { + .featureCard { + height: 180px; + width: 260px; + padding: 20px; + + .cardContent { + .cardIcon { + width: 44px; + height: 44px; + margin: 18px auto 14px; + + .anticon { + font-size: 22px; + } + } + + .cardInfo { + padding: 0 14px 14px; + + .cardTitle { + font-size: 15px; + margin-bottom: 6px; + } + + .cardDescription { + font-size: 11px; + margin-bottom: 10px; + } + + .cardAction { + font-size: 11px; + + .arrow { + font-size: 12px; + } + } + } + } } } } @@ -147,91 +243,89 @@ @media (max-width: 768px) { .powerCenter { - padding: 16px; + padding: 24px 16px; - .header { - padding: 16px; + .categorySection { + margin-bottom: 32px; - .headerLeft { - .title { - font-size: 24px; + .categoryHeader { + .categoryIcon { + width: 40px; + height: 40px; + + .anticon { + font-size: 20px; + } } - } - } - .cardGrid { - .featureCard { - height: 160px; - - .cardContent { - .iconWrapper { - width: 48px; - height: 48px; - - .icon { - font-size: 20px; - } + .categoryInfo { + .categoryTitle { + font-size: 20px; } - .cardInfo { - .cardTitle { - font-size: 14px; + .categoryCount { + font-size: 12px; + padding: 3px 10px; + } + } + } + + .featureCards { + .featureCard { + height: 160px; + width: 240px; + padding: 16px; + + .cardContent { + .badge { + top: 10px; + right: 10px; + font-size: 10px; + padding: 3px 6px; } - .cardDescription { - font-size: 11px; + .cardIcon { + width: 40px; + height: 40px; + margin: 16px auto 12px; + + .anticon { + font-size: 20px; + } + } + + .cardInfo { + padding: 0 12px 12px; + + .cardTitle { + font-size: 14px; + margin-bottom: 6px; + } + + .cardDescription { + font-size: 10px; + margin-bottom: 8px; + } + + .cardAction { + font-size: 10px; + + .arrow { + font-size: 11px; + } + } } } } } } - } -} - -// 卡片颜色主题 -.featureCard { - // 精准群发 - 橙色 - &[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); + + .footer { + margin-top: 40px; + + p { + font-size: 14px; + } + } } } diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx index 6a409e2b..9ccb58d0 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -1,12 +1,10 @@ -import React, { useState, useMemo } from "react"; -import { Card, Row, Col, Button, Space } from "antd"; +import React from "react"; import { useNavigate } from "react-router-dom"; -import { featureCards, tabItems, FeatureCard } from "./index.data"; import styles from "./index.module.scss"; +import { FeatureCard, featureCategories } from "./index.data.tsx"; const PowerCenter: React.FC = () => { const navigate = useNavigate(); - const [activeTab, setActiveTab] = useState("all"); const handleCardClick = (card: FeatureCard) => { if (card.path) { @@ -14,87 +12,75 @@ const PowerCenter: React.FC = () => { } }; - const handleTabClick = (tabKey: string) => { - setActiveTab(tabKey); - }; - - // 根据选中的标签过滤功能卡片 - const filteredCards = useMemo(() => { - if (activeTab === "all") { - return featureCards; - } - - const categoryMap: { [key: string]: string[] } = { - marketing: ["precision-send", "sop-send", "moments-marketing"], - customer: ["customer-management", "tag-management"], - ai: ["ai-training", "auto-greeting"], - content: ["content-management"], - data: ["communication-record"], - }; - - const categoryIds = categoryMap[activeTab] || []; - return featureCards.filter(card => categoryIds.includes(card.id)); - }, [activeTab]); - return (
- {/* 页面头部 */} -
-
-

功能中心

-

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

-
-
- - {tabItems.map(item => ( - - ))} - -
-
+ {/* 功能分类展示 */} + {featureCategories.map(category => ( +
+ {/* 分类标题 */} +
+
+ {category.icon} +
+
+

{category.title}

+ + {category.count}个功能 + +
+
- {/* 功能卡片网格 */} -
- - {filteredCards.map(card => ( - - + {category.features.map(card => ( +
handleCardClick(card)} - bodyStyle={{ padding: "24px" }} >
-
-
{card.icon}
+
+
+ {card.icon} +
+ {/* 热门/新功能标签 */} + {(card.isHot || card.isNew) && ( +
+ {card.isHot ? "热门" : "新功能"} +
+ )} + + {/* 功能图标 */}
+ + {/* 功能信息 */}
-

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

+

{card.title}

{card.description}

+
+ 点击进入功能 + → +
- - - ))} - +
+ ))} +
+
+ ))} + + {/* 页面底部 */} +
+

触客宝 AI私域营销系统 - 让每一次沟通都更有价值

); diff --git a/Touchkebao/src/router/module/pc.tsx b/Touchkebao/src/router/module/pc.tsx index 0e050775..4b4c4025 100644 --- a/Touchkebao/src/router/module/pc.tsx +++ b/Touchkebao/src/router/module/pc.tsx @@ -11,12 +11,17 @@ import CommunicationRecord from "@/pages/pc/ckbox/powerCenter/communication-reco 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"; +import CommonConfig from "@/pages/pc/ckbox/commonConfig"; const ckboxRoutes = [ { path: "/pc", element: , auth: true, children: [ + { + path: "commonConfig", + element: , + }, { path: "dashboard", element: , From e00bbf576ae79f0f0c0f7a0d8b68aedfc8595891 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 25 Sep 2025 11:19:18 +0800 Subject: [PATCH 06/32] =?UTF-8?q?feat(=E5=8A=9F=E8=83=BD=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=BA=9D=E9=80=9A=E8=A8=98=E9=8C=84=E8=88=87?= =?UTF-8?q?=E6=A8=A3=E5=BC=8F=E8=AA=BF=E6=95=B4):=20=E5=9C=A8=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E4=B8=AD=E5=BF=83=E4=B8=AD=E6=96=B0=E5=A2=9E=E3=80=8C?= =?UTF-8?q?=E6=BA=9D=E9=80=9A=E8=A8=98=E9=8C=84=E3=80=8D=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=EF=BC=8C=E4=B8=A6=E5=B0=8D=E6=A8=A3=E5=BC=8F=E9=80=B2=E8=A1=8C?= =?UTF-8?q?=E8=AA=BF=E6=95=B4=EF=BC=8C=E5=8C=85=E6=8B=AC=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=9A=84=E4=BD=88=E5=B1=80=E5=92=8C=E9=A1=8F?= =?UTF-8?q?=E8=89=B2=E8=A8=AD=E7=BD=AE=EF=BC=8C=E4=BB=A5=E6=8F=90=E5=8D=87?= =?UTF-8?q?=E8=A6=96=E8=A6=BA=E6=95=88=E6=9E=9C=E5=92=8C=E7=94=A8=E6=88=B6?= =?UTF-8?q?=E9=AB=94=E9=A9=97=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pc/ckbox/powerCenter/index.module.scss | 18 +++-- .../src/pages/pc/ckbox/powerCenter/index.tsx | 78 ++++++++++--------- 2 files changed, 52 insertions(+), 44 deletions(-) diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss index a5637311..79089122 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss @@ -16,6 +16,7 @@ .categoryIcon { width: 48px; height: 48px; + color: #ffffff; border-radius: 50%; display: flex; align-items: center; @@ -30,6 +31,9 @@ } .categoryInfo { + display: flex; + align-items: center; + gap: 10px; .categoryTitle { font-size: 24px; font-weight: 600; @@ -38,34 +42,31 @@ } .categoryCount { - font-size: 14px; + font-size: 12px; color: #666; background: #f0f0f0; - padding: 4px 12px; border-radius: 12px; border: 1px solid #e0e0e0; + height: 24px; + line-height: 20px; + padding: 0 10px; } } } .featureCards { - display: flex; - justify-content: flex-start; - gap: 24px; - flex-wrap: wrap; - .featureCard { border-radius: 16px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; - width: 30%; cursor: pointer; position: relative; overflow: hidden; background: white; padding: 20px; box-sizing: border-box; + margin-bottom: 16px; &:hover { transform: translateY(-2px); @@ -79,6 +80,7 @@ justify-content: space-between; margin-bottom: 10px; .cardIcon { + color: #ffffff; width: 48px; height: 48px; border-radius: 12px; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx index 9ccb58d0..6e4828ff 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useNavigate } from "react-router-dom"; import styles from "./index.module.scss"; import { FeatureCard, featureCategories } from "./index.data.tsx"; - +import { Col, Row } from "antd"; const PowerCenter: React.FC = () => { const navigate = useNavigate(); @@ -35,45 +35,51 @@ const PowerCenter: React.FC = () => { {/* 功能卡片 */}
- {category.features.map(card => ( -
handleCardClick(card)} - > -
-
-
- {card.icon} -
- {/* 热门/新功能标签 */} - {(card.isHot || card.isNew) && ( -
- {card.isHot ? "热门" : "新功能"} + + {category.features.map(card => ( + +
handleCardClick(card)} + > +
+
+
+ {card.icon} +
+ {/* 热门/新功能标签 */} + {(card.isHot || card.isNew) && ( +
+ {card.isHot ? "热门" : "新功能"} +
+ )} + + {/* 功能图标 */}
- )} - {/* 功能图标 */} -
- - {/* 功能信息 */} -
-

{card.title}

-

{card.description}

-
- 点击进入功能 - → + {/* 功能信息 */} +
+

{card.title}

+

+ {card.description} +

+
+ 点击进入功能 + → +
+
-
-
- ))} + + ))} +
))} From 0159a246ac91b32fb365024827b24f28c0752405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 25 Sep 2025 11:28:17 +0800 Subject: [PATCH 07/32] =?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 --- .../src/pages/pc/ckbox/powerCenter/index.tsx | 5 +- .../moments-marketing/index.module.scss | 43 -- .../powerCenter/moments-marketing/index.tsx | 24 - .../precision-send/index.module.scss | 215 ------ .../powerCenter/precision-send/index.tsx | 726 ------------------ .../powerCenter/sop-send/index.module.scss | 43 -- .../pc/ckbox/powerCenter/sop-send/index.tsx | 24 - .../tag-management/index.module.scss | 43 -- .../powerCenter/tag-management/index.tsx | 24 - Touchkebao/src/router/module/pc.tsx | 20 - 10 files changed, 4 insertions(+), 1163 deletions(-) delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.module.scss delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/sop-send/index.tsx delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.module.scss delete mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/tag-management/index.tsx diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx index 6e4828ff..d0f00002 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -27,7 +27,10 @@ const PowerCenter: React.FC = () => {

{category.title}

- + {category.count}个功能
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 deleted file mode 100644 index bf1ac1e6..00000000 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -.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 deleted file mode 100644 index 34d7df56..00000000 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/moments-marketing/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import PowerNavigation from "@/components/PowerNavtion"; -import styles from "./index.module.scss"; - -const MomentsMarketing: React.FC = () => { - return ( -
- -
- {/* 功能内容待开发 */} -
-

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

-
-
-
- ); -}; - -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 deleted file mode 100644 index 84333486..00000000 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.module.scss +++ /dev/null @@ -1,215 +0,0 @@ -.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; - } -} - -.stepsContainer { - padding: 24px; - background: #fff; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.steps { - max-width: 600px; - margin: 0 auto; -} - -.stepContent { - margin: 15px; -} - -.stepCard { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - border-radius: 8px; - - :global(.ant-card-head) { - background: #f8f9fa; - border-bottom: 1px solid #e9ecef; - - .ant-card-head-title { - font-weight: 600; - color: #495057; - - .anticon { - margin-right: 8px; - color: #1890ff; - } - } - } -} - -.ageRange { - display: flex; - align-items: center; - - .ant-input-number { - width: 80px; - } -} - -.estimatedCount { - margin-top: 24px; - padding: 16px; - background: #e6f7ff; - border: 1px solid #91d5ff; - border-radius: 6px; - display: flex; - align-items: center; - gap: 8px; - - .anticon { - color: #1890ff; - font-size: 16px; - } - - span { - font-size: 14px; - color: #262626; - - strong { - color: #1890ff; - font-size: 16px; - } - } -} - -.variableList { - display: flex; - flex-wrap: wrap; - gap: 8px; - - .ant-tag { - margin: 0; - transition: all 0.2s; - - &:hover { - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - } - } -} - -.messagePreview { - margin-top: 24px; - - h4 { - margin-bottom: 12px; - color: #262626; - font-weight: 600; - } -} - -.previewContent { - padding: 16px; - background: #f5f5f5; - border: 1px solid #d9d9d9; - border-radius: 6px; - min-height: 80px; - font-size: 14px; - line-height: 1.6; - color: #262626; - white-space: pre-wrap; -} - -.summary { - h4 { - margin-bottom: 16px; - color: #262626; - font-weight: 600; - } -} - -.summaryGrid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 16px; -} - -.summaryItem { - display: flex; - align-items: center; - gap: 8px; - padding: 12px; - background: #f8f9fa; - border-radius: 6px; - - .anticon { - color: #1890ff; - font-size: 16px; - } - - span { - font-size: 14px; - color: #262626; - } -} - -.stepActions { - display: flex; - justify-content: center; - padding: 24px 0; - background: #fff; - - .ant-btn { - min-width: 100px; - } -} - -// 响应式设计 -@media (max-width: 768px) { - .container { - padding: 16px; - } - - .stepsContainer { - padding: 16px; - } - - .summaryGrid { - grid-template-columns: 1fr; - } - - .ageRange { - flex-direction: column; - align-items: flex-start; - gap: 8px; - - span { - display: none; - } - } -} - -// 表单样式优化 -:global { - .ant-form-item-label > label { - font-weight: 500; - color: #262626; - } - - .ant-checkbox-group { - display: flex; - flex-wrap: wrap; - gap: 8px 16px; - } - - .ant-upload-list-picture-card .ant-upload-list-item { - border-radius: 6px; - } - - .ant-steps-item-title { - font-weight: 500 !important; - } -} diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx deleted file mode 100644 index 53e4043c..00000000 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/precision-send/index.tsx +++ /dev/null @@ -1,726 +0,0 @@ -import React, { useState, useEffect, useCallback } from "react"; -import Layout from "@/components/Layout/LayoutFiexd"; -import { - Card, - Button, - Steps, - Form, - Input, - Select, - Checkbox, - Radio, - DatePicker, - TimePicker, - InputNumber, - Upload, - Tag, - Divider, - Space, - message, -} from "antd"; -import { - UserOutlined, - MessageOutlined, - SendOutlined, - PlusOutlined, - TagsOutlined, - ClockCircleOutlined, - TeamOutlined, - AimOutlined, -} from "@ant-design/icons"; -import dayjs from "dayjs"; -import type { UploadFile } from "antd"; -import PowerNavigation from "@/components/PowerNavtion"; -import styles from "./index.module.scss"; - -const { Step } = Steps; -const { TextArea } = Input; -const { Option } = Select; - -interface CustomerFilter { - tags: string[]; - regions: string[]; - ageRange: [number, number]; - gender: "all" | "male" | "female"; - lastContactTime: "all" | "7days" | "30days" | "90days" | "180days"; - purchaseHistory: "all" | "purchased" | "no-purchase" | "high-value"; -} - -interface MessageContent { - type: "text" | "image" | "mixed"; - text: string; - images: UploadFile[]; - variables: string[]; -} - -interface SendSettings { - sendMode: "immediate" | "scheduled"; - scheduledTime?: string; - sendInterval: number; - maxPerDay: number; - timeRange: [string, string]; -} - -const PrecisionSend: React.FC = () => { - const [currentStep, setCurrentStep] = useState(0); - const [form] = Form.useForm(); - const [customerFilter, setCustomerFilter] = useState({ - tags: [], - regions: [], - ageRange: [18, 65], - gender: "all", - lastContactTime: "all", - purchaseHistory: "all", - }); - const [messageContent, setMessageContent] = useState({ - type: "text", - text: "", - images: [], - variables: [], - }); - const [sendSettings, setSendSettings] = useState({ - sendMode: "immediate", - sendInterval: 5, - maxPerDay: 100, - timeRange: ["09:00", "18:00"], - }); - const [estimatedCount, setEstimatedCount] = useState(0); - const [loading, setLoading] = useState(false); - - const customerTags = [ - "高价值客户", - "潜在客户", - "活跃用户", - "沉默用户", - "VIP客户", - "新客户", - "老客户", - "流失客户", - ]; - - const regions = [ - "北京", - "上海", - "广州", - "深圳", - "杭州", - "南京", - "成都", - "武汉", - "西安", - "重庆", - "天津", - "苏州", - ]; - - const messageVariables = [ - "{客户姓名}", - "{公司名称}", - "{联系人}", - "{产品名称}", - "{优惠金额}", - "{到期时间}", - "{客服电话}", - "{官网地址}", - ]; - - const handleNext = () => { - if (currentStep < 2) { - setCurrentStep(currentStep + 1); - } - }; - - const handlePrev = () => { - if (currentStep > 0) { - setCurrentStep(currentStep - 1); - } - }; - - const handleSubmit = async () => { - try { - // 验证必填项 - if (!messageContent.text && messageContent.images.length === 0) { - message.error("请输入消息内容或上传图片"); - return; - } - - if ( - sendSettings.sendMode === "scheduled" && - !sendSettings.scheduledTime - ) { - message.error("请选择发送时间"); - return; - } - - if (estimatedCount === 0) { - message.error("没有符合条件的客户，请调整筛选条件"); - return; - } - - setLoading(true); - const hide = message.loading("正在创建发送任务...", 0); - - // 模拟API调用 - await new Promise(resolve => setTimeout(resolve, 2000)); - - hide(); - message.success( - `发送任务已创建成功！预计发送给 ${estimatedCount} 位客户`, - ); - - // 重置表单 - setCurrentStep(0); - form.resetFields(); - setCustomerFilter({ - tags: [], - regions: [], - ageRange: [18, 65], - gender: "all", - lastContactTime: "all", - purchaseHistory: "all", - }); - setMessageContent({ - type: "text", - text: "", - images: [], - variables: [], - }); - setSendSettings({ - sendMode: "immediate", - sendInterval: 5, - maxPerDay: 100, - timeRange: ["09:00", "18:00"], - }); - } catch (error) { - message.error("提交失败，请检查网络连接后重试"); - console.error("Submit error:", error); - } finally { - setLoading(false); - } - }; - - // 计算预估客户数量 - const calculateEstimatedCount = useCallback(() => { - let baseCount = 1000; // 假设基础客户数 - - // 根据筛选条件调整数量 - if (customerFilter.tags.length > 0) { - baseCount = Math.floor( - baseCount * (0.9 - customerFilter.tags.length * 0.1), - ); - } - if (customerFilter.regions.length > 0) { - baseCount = Math.floor( - baseCount * (0.95 - customerFilter.regions.length * 0.05), - ); - } - if (customerFilter.gender !== "all") { - baseCount = Math.floor(baseCount * 0.5); - } - if (customerFilter.purchaseHistory !== "all") { - baseCount = Math.floor(baseCount * 0.6); - } - - setEstimatedCount(Math.max(baseCount, 0)); - }, [customerFilter]); - - useEffect(() => { - calculateEstimatedCount(); - }, [calculateEstimatedCount]); - - const renderStepContent = () => { - switch (currentStep) { - case 0: - return ( - - 客户筛选 - - } - className={styles.stepCard} - > -
- - ({ - label: tag, - value: tag, - }))} - value={customerFilter.tags} - onChange={values => - setCustomerFilter({ - ...customerFilter, - tags: values as string[], - }) - } - /> - - - - - - - -
- - setCustomerFilter({ - ...customerFilter, - ageRange: [value || 18, customerFilter.ageRange[1]], - }) - } - /> - - - - setCustomerFilter({ - ...customerFilter, - ageRange: [customerFilter.ageRange[0], value || 65], - }) - } - /> -
- - - - - setCustomerFilter({ - ...customerFilter, - gender: e.target.value, - }) - } - > - 不限 - 男性 - 女性 - - - - - - - - - - -
- -
- - - 预估触达客户：{estimatedCount} 人 - -
- - ); - - case 1: - return ( - - 消息内容 - - } - className={styles.stepCard} - > -
- - - setMessageContent({ - ...messageContent, - type: e.target.value, - }) - } - > - 纯文本 - 图片 - 图文混合 - - - - {(messageContent.type === "text" || - messageContent.type === "mixed") && ( - -