# serviceChat_vue

**Repository Path**: leke_code/service-chat_vue

## Basic Information

- **Project Name**: serviceChat_vue
- **Description**: 本项目是基于SpringBoot+Vue的在线客服聊天系统--支撑服务平台的前端源码
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-09
- **Last Updated**: 2026-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 支撑服务平台前端

## 📖 项目简介
本项目是 **支撑服务平台前端** 的前端部分。
基于 **Vue 2.x** + **Element UI** 构建，实现了用户/管理员登录、即时通讯（私聊/群聊）、消息通知、后台管理等功能。
通讯协议采用 **WebSocket** (SockJS + STOMP) 实现低延迟交互。

**项目演示：**https://www.bilibili.com/video/BV15gfvBzEZg/?spm_id_from=333.1387.upload.video_card.click

**前端源码：**https://gitee.com/janos1028/service-chat_vue

**后端源码：**https://gitee.com/janos1028/service-chat_back

## ✨ 核心功能特性

本项目不仅仅是一个基础的即时通讯工具，而是完整复刻了企业级客服系统的业务流转和状态管理，主要包含以下核心功能模块：

### 💬 1. 实时通讯与消息漫游 (Core Chat)

- **全双工实时通信**：底层基于 **WebSocket + STOMP** 协议，实现毫秒级消息收发，支持断线重连。
- **多端消息同步**：采用“在线推、离线拉”的同步模型。支持历史聊天记录漫游，用户多端登录或离线重连后消息不丢失。
- **丰富的消息载体**：支持发送**纯文本、图片和文件**，并集成阿里云 OSS 实现图片的秒传与预览。
- **精准的消息状态**：支持消息已读/未读状态的**实时更新**与多端同步，降低沟通成本。

### 👨‍💻2. 智能客服调度与会话流转 (ACD & Workflow)

- **自动分配机制 (ACD)**：用户发起咨询时，系统自动根据业务分类（Domain）查询在线客服列表，并进行智能负载分配。
- **人工无缝转接**：客服人员遇到复杂问题时，可一键将当前会话**转接**给其他业务线在线客服，转接且保留完整聊天上下文，转接后的客服也可以查看上下文。
- **精细化状态机**：完整实现了客服会话的生命周期管理，涵盖“排队等待”、“服务进行中”、“等待用户确认”、“强制结束”、“正常结单”等闭环状态。

### 👨‍🔧3.客服与用户互动

- **服务域隔离**：用户在系统左侧侧边栏选择目标“服务域”（如：客服务中心、IT技术支持等）。系统支持多业务线并存，数据与会话状态相互隔离，不同服务域的客服是无法共享聊天记录的。
- **精准意图收集与智能调度：**触发人工服务后，系统要求用户选择具体的“服务类型”，进一步细化业务颗粒度，并智能分配对应的客服。
- **客服转接：**客服确定当前问题是否能解决，无法解决则可以转接给其他服务类型，系统将随机分配客服服务用户。
- **会话关闭请求：**客服发起结束服务请求，用户确定当前问题是否已解决；未解决则当前会话继续，已解决则结束会话。
- **客服强制关闭会话：**当会话处于僵持阶段，客服可以主动强制结束会话，以免会话一直拖着无法结束。

### ⏱️ 4. SLA 服务质量监控 (基于延时队列)

- **首问超时转接**：用户进线后开启倒计时，若被分配的客服在 5 分钟内未作答复，系统自动触发流转机制，转接至其他客服并发送安抚话术，保障响应时效。
- **超时自动结单**：客服发起“结束服务”申请后，若用户在 30 分钟内未手动确认（已解决/未解决），系统将自动介入强制结单。
- **自动默认评价**：服务结束后开启评价倒计时，若用户未主动评价，系统将自动提交五星好评，形成业务闭环。

### 🔔 5. 用户交互与体验优化 (UX)

- **系统级提示**：集成 HTML5 Notification API 与原生 Audio，实现页面弹窗通知与新消息提示音，当有消息时可以实时提醒。
- **交互式卡片消息**：在会话开启、客服转接、请求结单、发起评价等关键业务节点，系统会下发结构化的卡片（Card）消息，引导用户点击操作。
- **会话列表动态管理**：实时感知**在线/离线**用户状态，动态更新会话列表与未读消息角标（Badge）。

## 🛠️ 技术栈
- **核心框架**: Vue.js 2.6.11
- **UI 组件库**: Element UI 2.13.2
- **路由管理**: Vue Router 3.2.0
- **状态管理**: Vuex 3.4.0
- **网络请求**: Axios 0.19.2
- **实时通讯**: SockJS-client, Stompjs (集成在 store 中)
- **CSS 预处理**: Dart Sass (^1.97.1)

## ⚡ 环境准备 (Prerequisites)
由于项目依赖及构建工具版本限制，推荐使用以下环境：

* **Node.js**: 建议 **v14.17.x** (v14 LTS)
    * *注意：Node 16+ 版本可能会导致旧版 `sass-loader` 构建失败。*
* **包管理器**: npm (6.x+) 或 yarn

## 🚀 快速开始 (Quick Start)

### 1. 安装依赖
在项目根目录下运行：
```bash
npm install
# 或者使用淘宝镜像加速
npm install --registry=[https://registry.npmmirror.com](https://registry.npmmirror.com)
如果遇到**Sass**相关报错，通常是Node版本过高，需要降级**Node.js**到v14，或者卸载重装Sass依赖。

## 项目主要目录
src
├── assets          # 静态资源 (图片、Icon、提示音)
├── components      # 公共组件
│   └── chat        # 聊天专用组件 (消息气泡、列表、输入框)
├── router          # 路由配置 (登录、聊天页、后台页)
├── store           # Vuex 状态管理 (WebSocket 连接、消息接收核心逻辑)
├── utils           # 工具类
│   ├── api.js      # Axios 封装与拦截器配置
│   ├── sockjs.js   # WebSocket 客户端
│   └── stomp.js    # STOMP 协议库
├── views           # 页面级组件
│   ├── admin       # 管理员后台 (用户管理、日志查询)
│   └── chat        # 聊天室主界面
├── App.vue         # 根组件
└── main.js         # 入口文件
```

### 2.配置后端运行url

```
.env.development------为本地运行的后端url；

.env.production------为服务器运行的后端url；
```



### 3.配置本地前端运行url

```
vue.congif.js------其中的module.exports进行配置
```

## 打包部署

运行

```bash
run build:prod
```

生成的dist文件，将里面的所有文件及文件夹覆盖到服务器中的**serviceChatWeb**文件夹中。