# qqflowengine-frontend

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

## 技术栈

- Vue 3.4 + Vite 5
- TypeScript 5
- Element Plus 2.7
- Pinia
- Vue Router 4
- Axios
- LogicFlow 1.2（流程设计器）

## 环境要求

- Node.js 18+
- npm 9+

## 快速启动

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

开发服务器默认启动在 `http://localhost:3000`，Vite 会自动代理 `/api` 请求到后端 `http://localhost:8080`。

## 构建部署

```bash
# 生产构建
npm run build

# 预览生产构建
npm run preview
```

构建产物输出到 `dist/` 目录。

## 开发说明

### 代理配置

开发环境的 API 代理配置在 `vite.config.ts`：

```ts
server: {
  port: 3000,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

如果后端运行在其他地址/端口，请修改 `vite.config.ts` 中的 `target`。

### 项目结构

```
src/
├── api/           # API 接口封装
├── components/    # 公共组件（Layout、Navbar、Sidebar）
├── router/        # 路由配置
├── stores/        # Pinia 状态管理
├── types/         # TypeScript 类型定义
├── utils/         # 工具函数
├── views/         # 页面视图
│   ├── dashboard/
│   ├── login/
│   ├── flow/      # 流程模块（定义、设计器、审批、执行）
│   └── system/    # 系统模块（用户、角色、部门、菜单）
├── App.vue
└── main.ts
```

### 登录

默认管理员账号：`admin` / `admin123`

支持"记住密码"功能，勾选后账号密码会保存到浏览器 localStorage。

## 注意事项

1. 开发服务器端口 3000 被占用时，Vite 会自动切换到下一个可用端口
2. 确保后端服务已启动（`http://localhost:8080`），否则 API 请求会失败