chore: 删除触客宝模块测试页面
This commit is contained in:
超级老白兔
@@ -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: <CkboxPage />,
|
|
||||||
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接口统一管理
|
|
||||||
- 错误处理和用户反馈
|
|
||||||
|
|
||||||
## 扩展功能
|
|
||||||
|
|
||||||
可以根据需要扩展以下功能：
|
|
||||||
|
|
||||||
- 消息加密
|
|
||||||
- 语音消息
|
|
||||||
- 视频消息
|
|
||||||
- 消息搜索
|
|
||||||
- 消息备份
|
|
||||||
- 多端同步
|
|
||||||
- 消息提醒
|
|
||||||
- 自动回复
|
|
||||||
@@ -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 (
|
|
||||||
<div style={{ padding: "24px", maxWidth: "1200px", margin: "0 auto" }}>
|
|
||||||
<Title level={2}>
|
|
||||||
<MessageOutlined style={{ marginRight: "8px" }} />
|
|
||||||
触客宝模块测试页面
|
|
||||||
</Title>
|
|
||||||
|
|
||||||
<Paragraph>
|
|
||||||
这是一个类似微信的聊天系统，提供实时消息、联系人管理、群组聊天等功能。
|
|
||||||
</Paragraph>
|
|
||||||
|
|
||||||
<Space direction="vertical" size="large" style={{ width: "100%" }}>
|
|
||||||
{/* 功能特性 */}
|
|
||||||
<Card title="功能特性" size="small">
|
|
||||||
<Space wrap>
|
|
||||||
<Tag color="blue" icon={<MessageOutlined />}>
|
|
||||||
实时聊天
|
|
||||||
</Tag>
|
|
||||||
<Tag color="green" icon={<UserOutlined />}>
|
|
||||||
联系人管理
|
|
||||||
</Tag>
|
|
||||||
<Tag color="orange" icon={<TeamOutlined />}>
|
|
||||||
群组聊天
|
|
||||||
</Tag>
|
|
||||||
<Tag color="purple" icon={<PhoneOutlined />}>
|
|
||||||
语音通话
|
|
||||||
</Tag>
|
|
||||||
<Tag color="red" icon={<VideoCameraOutlined />}>
|
|
||||||
视频通话
|
|
||||||
</Tag>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 界面布局 */}
|
|
||||||
<Card title="界面布局" size="small">
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
border: "1px solid #d9d9d9",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px",
|
|
||||||
backgroundColor: "#fafafa",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ display: "flex", gap: "16px", height: "400px" }}>
|
|
||||||
{/* 左侧边栏 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "300px",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
border: "1px solid #e8e8e8",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ marginBottom: "16px" }}>
|
|
||||||
<strong>左侧边栏</strong>
|
|
||||||
</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 搜索栏</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 聊天标签页</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 联系人标签页</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 群组标签页</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 主聊天区域 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
border: "1px solid #e8e8e8",
|
|
||||||
borderRadius: "8px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* 聊天头部 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: "16px",
|
|
||||||
borderBottom: "1px solid #e8e8e8",
|
|
||||||
backgroundColor: "#fafafa",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<strong>聊天头部</strong>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 聊天内容 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
padding: "16px",
|
|
||||||
backgroundColor: "#f5f5f5",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<strong>聊天内容区域</strong>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
marginTop: "16px",
|
|
||||||
fontSize: "12px",
|
|
||||||
color: "#666",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
• 消息气泡显示
|
|
||||||
<br />
|
|
||||||
• 支持文本、图片、文件
|
|
||||||
<br />
|
|
||||||
• 消息时间显示
|
|
||||||
<br />• 在线状态显示
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 输入区域 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: "16px",
|
|
||||||
borderTop: "1px solid #e8e8e8",
|
|
||||||
backgroundColor: "#fafafa",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<strong>输入区域</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 右侧个人资料 */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: "280px",
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
border: "1px solid #e8e8e8",
|
|
||||||
borderRadius: "8px",
|
|
||||||
padding: "16px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ marginBottom: "16px" }}>
|
|
||||||
<strong>右侧个人资料</strong>
|
|
||||||
</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 基本信息</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 联系信息</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 标签</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 个人简介</div>
|
|
||||||
<div style={{ marginBottom: "8px" }}>• 操作按钮</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 使用说明 */}
|
|
||||||
<Card title="使用说明" size="small">
|
|
||||||
<Paragraph>
|
|
||||||
<strong>1. 开始聊天：</strong>
|
|
||||||
在左侧联系人列表中选择一个联系人，点击进入聊天界面。
|
|
||||||
</Paragraph>
|
|
||||||
<Paragraph>
|
|
||||||
<strong>2. 发送消息：</strong>
|
|
||||||
在聊天窗口底部的输入框中输入消息，按Enter键或点击发送按钮发送消息。
|
|
||||||
</Paragraph>
|
|
||||||
<Paragraph>
|
|
||||||
<strong>3. 查看资料：</strong>
|
|
||||||
聊天时右侧会显示联系人的详细资料，包括基本信息、联系方式等。
|
|
||||||
</Paragraph>
|
|
||||||
<Paragraph>
|
|
||||||
<strong>4. 搜索功能：</strong>
|
|
||||||
使用顶部搜索栏可以快速搜索联系人或群组。
|
|
||||||
</Paragraph>
|
|
||||||
<Paragraph>
|
|
||||||
<strong>5. 切换标签：</strong>
|
|
||||||
在左侧可以切换聊天、联系人、群组等不同标签页。
|
|
||||||
</Paragraph>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 技术特点 */}
|
|
||||||
<Card title="技术特点" size="small">
|
|
||||||
<Space direction="vertical" style={{ width: "100%" }}>
|
|
||||||
<div>
|
|
||||||
<strong>• React 18 + TypeScript：</strong>
|
|
||||||
现代化的前端开发技术栈
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>• Ant Design：</strong>
|
|
||||||
企业级UI组件库，提供丰富的组件
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>• SCSS Modules：</strong>
|
|
||||||
样式隔离和模块化，避免样式冲突
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>• 响应式设计：</strong>
|
|
||||||
支持不同屏幕尺寸，移动端友好
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>• 组件化架构：</strong>
|
|
||||||
功能模块独立成组件，便于维护和扩展
|
|
||||||
</div>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 操作按钮 */}
|
|
||||||
<Card title="操作" size="small">
|
|
||||||
<Space>
|
|
||||||
<Button type="primary" icon={<MessageOutlined />}>
|
|
||||||
进入聊天
|
|
||||||
</Button>
|
|
||||||
<Button icon={<UserOutlined />}>查看联系人</Button>
|
|
||||||
<Button icon={<TeamOutlined />}>创建群组</Button>
|
|
||||||
</Space>
|
|
||||||
</Card>
|
|
||||||
</Space>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default CkboxTestPage;
|
|
||||||
Reference in New Issue
Block a user