cunkebao_v3/Cunkebao/src/pages/pc/ckbox

触客宝模块 (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)

interface ContractData {
  id: string;
  name: string;
  phone: string;
  avatar?: string;
  online: boolean;
  lastSeen?: string;
  status?: string;
  department?: string;
  position?: string;
}

消息 (MessageData)

interface MessageData {
  id: string;
  senderId: string;
  senderName: string;
  content: string;
  type: MessageType;
  timestamp: string;
  isRead: boolean;
  replyTo?: string;
  forwardFrom?: string;
}

聊天会话 (ChatSession)

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. 路由配置

在路由配置中添加触客宝模块：

// 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接口统一管理
• 错误处理和用户反馈

扩展功能

可以根据需要扩展以下功能：

• 消息加密
• 语音消息
• 视频消息
• 消息搜索
• 消息备份
• 多端同步
• 消息提醒
• 自动回复