ticket-workbench/frontend

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                 # 入口文件

开发

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

构建产物位于 dist/ 目录。

预览生产构建

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 响应格式：

{
  success: boolean,
  retcode: number,
  retinfo: string,
  result: T
}

Token 通过 Authorization 和 jsessionid 请求头传递。