diff --git a/Cunkebao/src/pages/pc/ckbox/README.md b/Cunkebao/src/pages/pc/ckbox/README.md deleted file mode 100644 index a7cb0127..00000000 --- a/Cunkebao/src/pages/pc/ckbox/README.md +++ /dev/null @@ -1,236 +0,0 @@ -# 触客宝模块 (CKBox) - -## 功能概述 - -触客宝模块是一个类似微信的聊天系统，提供实时消息、联系人管理、群组聊天等功能，专为企业客户服务场景设计。 - -## 主要功能 - -### 1. 聊天功能 - -- 实时消息发送和接收 -- 支持文本、图片、文件等多种消息类型 -- 消息状态显示（发送中、已发送、已读） -- 消息撤回和转发 -- 表情包和快捷回复 - -### 2. 联系人管理 - -- 联系人列表展示 -- 在线状态显示 -- 联系人搜索和筛选 -- 联系人资料查看 -- 添加/删除联系人 - -### 3. 群组功能 - -- 群组创建和管理 -- 群成员管理 -- 群组消息 -- 群组设置 - -### 4. 聊天会话 - -- 聊天会话列表 -- 未读消息提醒 -- 会话置顶和静音 -- 聊天记录管理 -- 会话搜索 - -### 5. 通话功能 - -- 语音通话 -- 视频通话 -- 通话记录 - -## 界面布局 - -``` -┌─────────────────────────────────────────┐ -│ [搜索栏] │ -├─────────────────────────────────────────┤ -│ [聊天] [联系人] [群组] │ -├─────────────────────────────────────────┤ -│ ┌─────────────────┐ ┌─────────────────┐ │ -│ │ 聊天列表 │ │ │ │ -│ │ • 张三 (2) │ │ │ │ -│ │ • 技术支持群 │ │ 聊天窗口 │ │ -│ │ • 李四 │ │ │ │ -│ │ │ │ │ │ -│ └─────────────────┘ └─────────────────┘ │ -└─────────────────────────────────────────┘ -``` - -## 文件结构 - -``` -ckbox/ -├── index.tsx # 主页面 -├── data.ts # 数据类型定义 -├── api.ts # API接口 -├── index.module.scss # 主页面样式 -├── test.tsx # 测试页面 -├── README.md # 说明文档 -└── components/ # 组件目录 - ├── ChatWindow.tsx # 聊天窗口 - ├── ContactList.tsx # 联系人列表 - ├── MessageList.tsx # 消息列表 - └── *.module.scss # 组件样式文件 -``` - -## 技术栈 - -- **React 18** - 前端框架 -- **TypeScript** - 类型安全 -- **Ant Design** - UI组件库 -- **SCSS** - 样式预处理器 -- **Day.js** - 日期处理 -- **WebSocket** - 实时通信 - -## 数据结构 - -### 联系人 (ContractData) - -```typescript -interface ContractData { - id: string; - name: string; - phone: string; - avatar?: string; - online: boolean; - lastSeen?: string; - status?: string; - department?: string; - position?: string; -} -``` - -### 消息 (MessageData) - -```typescript -interface MessageData { - id: string; - senderId: string; - senderName: string; - content: string; - type: MessageType; - timestamp: string; - isRead: boolean; - replyTo?: string; - forwardFrom?: string; -} -``` - -### 聊天会话 (ChatSession) - -```typescript -interface ChatSession { - id: string; - type: "private" | "group"; - name: string; - avatar?: string; - lastMessage: string; - lastTime: string; - unreadCount: number; - online: boolean; - members?: string[]; - pinned?: boolean; - muted?: boolean; -} -``` - -## 使用方法 - -### 1. 路由配置 - -在路由配置中添加触客宝模块： - -```typescript -// router/module/ckbox.tsx -import React from "react"; -import { lazy } from "react"; -import type { RouteObject } from "react-router-dom"; - -const CkboxPage = lazy(() => import("@/pages/pc/ckbox")); - -const ckboxRoutes: (RouteObject & { auth?: boolean; requiredRole?: string })[] = [ - { - path: "/ckbox", - element: , - auth: true, - requiredRole: "user", - }, -]; - -export default ckboxRoutes; -``` - -### 2. API接口 - -确保后端提供以下API接口： - -- `GET /v1/contracts` - 获取联系人列表 -- `GET /v1/chats/sessions` - 获取聊天会话列表 -- `GET /v1/chats/:id/messages` - 获取聊天历史 -- `POST /v1/chats/:id/messages` - 发送消息 -- `GET /v1/groups` - 获取群组列表 -- `POST /v1/groups` - 创建群组 - -### 3. 访问页面 - -访问 `/ckbox` 路径即可使用触客宝模块。 - -## 组件说明 - -### ChatWindow - -聊天窗口组件，包含： - -- 聊天头部（联系人信息、通话按钮、更多操作） -- 消息内容区域（消息气泡、时间显示） -- 输入区域（文本输入、表情、附件、发送按钮） - -### ContactList - -联系人列表组件，包含： - -- 联系人头像和在线状态 -- 联系人姓名和状态 -- 点击进入聊天 - -### MessageList - -消息列表组件，包含： - -- 聊天会话列表 -- 最后消息和时间 -- 未读消息数量 -- 在线状态显示 - -## 样式特点 - -- 类似微信的界面设计 -- 响应式布局，支持移动端 -- 现代化的UI风格 -- 良好的用户体验 - -## 开发规范 - -- 使用TypeScript进行类型检查 -- 遵循ESLint代码规范 -- 组件按功能拆分，保持单一职责 -- API接口统一管理 -- 错误处理和用户反馈 - -## 扩展功能 - -可以根据需要扩展以下功能： - -- 消息加密 -- 语音消息 -- 视频消息 -- 消息搜索 -- 消息备份 -- 多端同步 -- 消息提醒 -- 自动回复 diff --git a/Cunkebao/src/pages/pc/ckbox/test.tsx b/Cunkebao/src/pages/pc/ckbox/test.tsx deleted file mode 100644 index d089775e..00000000 --- a/Cunkebao/src/pages/pc/ckbox/test.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import React from "react"; -import { Card, Typography, Space, Button, Tag } from "antd"; -import { - MessageOutlined, - UserOutlined, - TeamOutlined, - PhoneOutlined, - VideoCameraOutlined, -} from "@ant-design/icons"; - -const { Title, Paragraph } = Typography; - -const CkboxTestPage: React.FC = () => { - return ( -
- - <MessageOutlined style={{ marginRight: "8px" }} /> - 触客宝模块测试页面 - - - - 这是一个类似微信的聊天系统，提供实时消息、联系人管理、群组聊天等功能。 - - - - {/* 功能特性 */} - - - }> - 实时聊天 - - }> - 联系人管理 - - }> - 群组聊天 - - }> - 语音通话 - - }> - 视频通话 - - - - - {/* 界面布局 */} - -
-
- {/* 左侧边栏 */} -
-
- 左侧边栏 -
-
• 搜索栏
-
• 聊天标签页
-
• 联系人标签页
-
• 群组标签页
-
- - {/* 主聊天区域 */} -
- {/* 聊天头部 */} -
- 聊天头部 -
- - {/* 聊天内容 */} -
- 聊天内容区域 -
- • 消息气泡显示 -
- • 支持文本、图片、文件 -
- • 消息时间显示 -
• 在线状态显示 -
-
- - {/* 输入区域 */} -
- 输入区域 -
-
- - {/* 右侧个人资料 */} -
-
- 右侧个人资料 -
-
• 基本信息
-
• 联系信息
-
• 标签
-
• 个人简介
-
• 操作按钮
-
-
-
- - - {/* 使用说明 */} - - - 1. 开始聊天： - 在左侧联系人列表中选择一个联系人，点击进入聊天界面。 - - - 2. 发送消息： - 在聊天窗口底部的输入框中输入消息，按Enter键或点击发送按钮发送消息。 - - - 3. 查看资料： - 聊天时右侧会显示联系人的详细资料，包括基本信息、联系方式等。 - - - 4. 搜索功能： - 使用顶部搜索栏可以快速搜索联系人或群组。 - - - 5. 切换标签： - 在左侧可以切换聊天、联系人、群组等不同标签页。 - - - - {/* 技术特点 */} - - -
- • React 18 + TypeScript： - 现代化的前端开发技术栈 -
-
- • Ant Design： - 企业级UI组件库，提供丰富的组件 -
-
- • SCSS Modules： - 样式隔离和模块化，避免样式冲突 -
-
- • 响应式设计： - 支持不同屏幕尺寸，移动端友好 -
-
- • 组件化架构： - 功能模块独立成组件，便于维护和扩展 -
- - - - {/* 操作按钮 */} - - - - - - - - -
- ); -}; - -export default CkboxTestPage;