qqflowengine-frontend

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+

快速启动

cd qqflowengine-frontend
npm install
npm run dev

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

构建部署

# 生产构建
npm run build

# 预览生产构建
npm run preview

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

开发说明

代理配置

开发环境的 API 代理配置在 vite.config.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 请求会失败