# qqflowengine-frontend

通用型流程审批设计与管理系统 — 前端应用

## 技术栈

- Vue 3.4 + Vite 4.5 + TypeScript 5
- Element Plus 2.7
- Pinia + Vue Router 4
- LogicFlow 1.2（流程设计器，v1.x 无 destroy 方法）
- ECharts 6 + vue-echarts（分析看板）
- Axios

## 快速启动

```bash
cd qqflowengine-frontend
npm install
npm run dev
```

开发服务器：`http://localhost:3000`，自动代理 `/api` 到 `http://localhost:8080`。

## 构建部署

```bash
npm run build     # 输出到 dist/
npm run preview   # 预览构建产物
```

Docker 构建时如遇缓存问题，修改 `Dockerfile` 中的 `ARG BUILD_BUSTER` 值破缓存。

## 默认账号

密码均为 `123456a`：

| 账号 | 可见菜单 |
|------|---------|
| admin | 全部（首页、审批中心、流程管理、系统管理、统计分析） |
| zhangsan | 首页、审批中心 |
| lisi | 首页、审批中心、系统管理 |
| wangwu | 首页、审批中心、流程管理、统计分析 |

菜单可见性由 `employeeType` 控制（`super_admin` / `flow_manager` / `dept_manager` / `common_user`）。

## 页面说明

| 路由 | 页面 | 说明 |
|------|------|------|
| `/dashboard` | 首页 | 统计卡片 + 快捷入口 |
| `/approval/todo` | 待办任务 | 审批通过/拒绝/转办/加签、分支选择 |
| `/approval/mine` | 我的发起 | 已发起流程列表、筛选 |
| `/flow/definition` | 流程管理 | 流程 CRUD、发布/停用、编辑表单和导入配置 |
| `/flow/designer` | 流程设计器 | 拖拽设计审批流程（管理员可见） |
| `/flow/execute` | 流程执行 | 发起流程（选择已发布流程） |
| `/flow/instance/mine` | 我的发起 | 流程实例列表 + 批量导入 |
| `/flow/instance/all` | 流程明细 | 全部实例（管理员） |
| `/analysis` | 分析看板 | KPI、趋势、效率、节点统计、流程明细 |
| `/system/user` | 用户管理 | 系统用户 CRUD + 分配角色 |
| `/system/role` | 审批角色 | 角色 CRUD + 企微配置 |

## 项目结构

```
src/
├── api/                # API 接口层
│   └── flow/           # 流程相关（task、definition、instance、import）
├── components/         # 公共组件（Layout、Sidebar、FlowFormFields、FilePreview）
├── router/             # 路由 + 权限守卫
├── stores/             # Pinia（user-store）
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数（auth、file、flow、format）
├── views/
│   ├── dashboard/      # 首页
│   ├── login/          # 登录
│   ├── workbench/      # 审批中心（待办/已办/抄送/我的发起）
│   ├── flow/           # 流程设计器、定义、执行、实例
│   ├── system/         # 用户管理、审批角色
│   └── analysis/       # 数据分析看板
└── main.ts
```