绝尘
c5c2a64a48
- 修复登录参数 username→account - 修复前后端字段名不匹配 (ticketno/contactname/createtime等) - 修复AI分析GLM返回markdown包裹和priority类型问题 - 添加AutoMigrate自动建表 - 统一API路由为 /api/auth/ 前缀 - 添加config.example.yaml，.gitignore排除config.yaml
152 lines
3.0 KiB
Markdown
152 lines
3.0 KiB
Markdown
# AI 工单处理工作台 - 前端
|
||
|
||
基于 Vue 3 + Arco Design + Vite + TypeScript + Pinia 的工单管理系统前端。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Vue 3 (Composition API)
|
||
- **UI 组件**: Arco Design Vue 2.58
|
||
- **构建工具**: Vite 8
|
||
- **状态管理**: Pinia 3
|
||
- **路由**: Vue Router 5
|
||
- **HTTP 客户端**: Axios 1
|
||
- **语言**: TypeScript 6
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # API 接口
|
||
│ ├── interceptor.ts # Axios 拦截器
|
||
│ ├── user.ts # 用户 API
|
||
│ └── ticket.ts # 工单 API
|
||
├── assets/ # 静态资源
|
||
├── components/ # 组件
|
||
├── router/ # 路由配置
|
||
│ └── index.ts
|
||
├── store/ # 状态管理
|
||
│ └── user.ts # 用户状态
|
||
├── types/ # TypeScript 类型定义
|
||
│ └── index.ts
|
||
├── views/ # 页面组件
|
||
│ ├── login/ # 登录页
|
||
│ ├── ticket/ # 工单相关页面
|
||
│ │ ├── list.vue # 工单列表
|
||
│ │ ├── detail.vue # 工单详情 + AI分析
|
||
│ │ └── create.vue # 创建工单
|
||
│ └── layout/ # 主布局
|
||
│ └── index.vue
|
||
├── App.vue # 根组件
|
||
└── main.ts # 入口文件
|
||
```
|
||
|
||
## 开发
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost:5173
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建产物位于 `dist/` 目录。
|
||
|
||
### 预览生产构建
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 功能模块
|
||
|
||
### 1. 登录认证
|
||
- 默认账号: `admin` / `admin123`
|
||
- Token 存储在 localStorage
|
||
- 自动登录状态检查
|
||
|
||
### 2. 工单列表
|
||
- 多条件筛选：状态、分类、优先级、关键词搜索
|
||
- 分页展示
|
||
- 彩色标签显示优先级和状态
|
||
|
||
### 3. 工单详情
|
||
- 工单基本信息展示
|
||
- AI 智能分析（可触发、可编辑确认）
|
||
- 状态流转操作
|
||
- 处理人分配
|
||
- 操作日志与备注
|
||
|
||
### 4. 创建工单
|
||
- 工单基本信息录入
|
||
- 来源选择
|
||
|
||
## API 代理配置
|
||
|
||
开发环境下，`/api` 前缀的请求会代理到 `http://localhost:8090`。
|
||
|
||
配置文件：`vite.config.ts`
|
||
|
||
## 数据映射
|
||
|
||
### 优先级
|
||
- P0 紧急 (红色)
|
||
- P1 高 (橙红)
|
||
- P2 中 (蓝色)
|
||
- P3 低 (灰色)
|
||
|
||
### 状态
|
||
- 待处理 (灰色)
|
||
- 分析中 (蓝色)
|
||
- 已确认 (绿色)
|
||
- 处理中 (橙色)
|
||
- 已关闭 (灰色)
|
||
|
||
### 分类
|
||
- 退款申请
|
||
- 登录异常
|
||
- 发票问题
|
||
- 物流投诉
|
||
- 账户问题
|
||
- 产品咨询
|
||
- 其他
|
||
|
||
### 建议角色
|
||
- 退款组
|
||
- 技术支持
|
||
- 财务组
|
||
- 物流组
|
||
- 客服组
|
||
|
||
## 环境变量
|
||
|
||
暂无环境变量配置，API 地址通过 Vite 代理配置。
|
||
|
||
## 后端对接
|
||
|
||
确保后端服务运行在 `http://localhost:8090`。
|
||
|
||
后端 API 响应格式：
|
||
```typescript
|
||
{
|
||
success: boolean,
|
||
retcode: number,
|
||
retinfo: string,
|
||
result: T
|
||
}
|
||
```
|
||
|
||
Token 通过 `Authorization` 和 `jsessionid` 请求头传递。
|