智能客服小派前端项目

项目简介

这是无限派科技有限公司智能客服小派的前端项目，基于Vue3 + Element Plus构建，提供用户注册登录、智能对话、订单管理等功能。

功能特性

• 🔐 用户注册登录
• 💬 智能对话聊天
• 📋 订单管理
• 📱 响应式设计
• 🎨 现代化UI界面

技术栈

• 框架: Vue 3
• UI库: Element Plus
• 路由: Vue Router 4
• HTTP客户端: Axios
• 构建工具: Vite
• 包管理器: pnpm

项目结构

src/
├── api/                 # API接口
│   ├── auth.js         # 认证相关接口
│   ├── conversation.js # 对话相关接口
│   └── order.js        # 订单相关接口
├── router/             # 路由配置
│   └── index.js
├── utils/              # 工具函数
│   └── request.js      # Axios配置
├── views/              # 页面组件
│   ├── Login.vue       # 登录页面
│   ├── Register.vue    # 注册页面
│   ├── Main.vue        # 主页面布局
│   ├── Chat.vue        # 聊天页面
│   └── Orders.vue      # 订单页面
├── App.vue             # 根组件
├── main.js             # 入口文件
└── style.css           # 全局样式

安装和运行

环境要求

• Node.js 20.19.5
• pnpm

安装依赖

pnpm install

开发环境运行

pnpm dev

构建生产版本

pnpm build

预览生产版本

pnpm preview

接口说明

基础配置

• 接口地址: http://localhost:8087
• 认证方式: Bearer Token
• 请求头: Authorization: Bearer {access_token}

主要接口

1. 用户认证

   • POST /auth/register - 用户注册
   • POST /auth/login - 用户登录
   • POST /auth/logout - 退出登录

2. 对话管理

   • GET /conversation/list - 获取会话列表
   • POST /conversation - 创建新会话
   • GET /ai/stream - AI流式对话

3. 订单管理

   • GET /order/list - 获取订单列表
   • POST /order - 创建新订单

页面说明

登录页面

• 用户登录入口
• 显示智能客服介绍信息
• 支持跳转到注册页面

注册页面

• 新用户注册
• 表单验证
• 注册成功后跳转登录

主页面

• 顶部操作栏：用户信息、系统设置、退出登录
• 左侧导航：智能对话、我的订单
• 中部工作区：根据导航显示对应页面

聊天页面

• 左侧：对话记录列表，支持新建对话
• 右侧：聊天界面，支持实时对话
• 流式响应，打字机效果

订单页面

• 订单列表展示
• 分页功能
• 新建订单
• 订单详情查看
• 订单状态管理

开发说明

代码规范

项目使用ESLint + Prettier进行代码规范检查：

pnpm lint

权限控制

• 登录状态检查
• 路由守卫
• Token自动刷新
• 无权限自动跳转登录页

响应式设计

• 支持桌面端和移动端
• 自适应布局
• 触摸友好的交互

部署说明

1. 构建项目：pnpm build
2. 将 dist 目录部署到Web服务器
3. 配置服务器支持SPA路由（History模式）
4. 确保后端API服务正常运行

注意事项

1. 确保后端服务运行在 http://localhost:8087
2. 所有需要认证的接口都会自动添加Authorization头
3. Token过期会自动跳转到登录页面
4. 流式对话接口需要特殊处理，当前使用模拟实现

更新日志

v1.0.0

• 初始版本发布
• 实现基础功能模块
• 完成UI界面设计