# 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` 请求头传递。