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