# 晓雪企业快速开发平台（Web）

**Repository Path**: iteachyou/xiaoxue-feplatform-web

## Basic Information

- **Project Name**: 晓雪企业快速开发平台（Web）
- **Description**: 晓雪企业快速开发平台
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-07-24
- **Last Updated**: 2026-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 晓雪企业快速开发平台（前端）

**XiaoXue Rapid Dev Platform** · Web Admin

企业级后台管理前端，基于 Vue 3 + Vite + Element Plus，提供系统管理、权限菜单、监控日志、Flowable 工作流与可视化表单设计等能力，可对接后端 JWT / Spring Security 体系快速搭建业务中台。

仓库地址：[gitee.com/iteachyou/xiaoxue-feplatform-web](https://gitee.com/iteachyou/xiaoxue-feplatform-web)

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3、Vue Router、Pinia |
| 构建 | Vite 7 |
| UI | Element Plus、@vicons/fluent |
| 请求 | Axios |
| 图表 | ECharts、vue-echarts |
| 流程设计 | bpmn-js、bpmn-js-properties-panel（Flowable） |
| 表单设计 | FormCreate（@form-create/designer） |
| 其它 | vue-advanced-cropper（头像裁剪） |

## 功能模块

- **登录认证**：账号 + 图形验证码登录、找回密码；Token 鉴权（`XIAOXUE-TOKEN`）
- **动态菜单 / 路由**：登录后按角色拉取 `/personal/getRouters`，动态注入业务路由
- **权限控制**：按钮级指令 `v-haspermissions` / `v-hasroles`，支持多角色切换
- **系统管理**：用户、角色、菜单、组织、岗位、字典、系统变量、上传存储配置
- **运维监控**：服务监控（CPU / 内存 / JVM / 磁盘）、缓存监控
- **日志中心**：登录日志、操作日志（查询 / 清理 / 导出）
- **工作流**：流程定义管理、BPMN 流程设计、表单设计、部署与挂起/激活
- **特色组件**：流程设计器、表单设计器、Cron 表达式配置、Fluent 图标选择器、头像裁剪

## 环境要求

- Node.js 18+（建议 LTS）
- npm / pnpm / yarn 任一包管理器
- 后端服务默认运行于 `http://127.0.0.1:8080`

## 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务（默认 http://localhost:3000）
npm run dev

# 生产构建
npm run build

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

## 配置说明

### 环境变量

开发环境见 `.env.development`：

```env
VITE_API_BASE_URL=/api
```

生产环境可新增 `.env.production`，使用同名变量配置 API 前缀。

### 开发代理

`vite.config.js` 将 `/api` 代理到本地后端，并去掉前缀：

```
前端请求：/api/xxx
实际转发：http://127.0.0.1:8080/xxx
```

开发端口：`3000`。

### 全局配置

主要配置位于 `src/config/index.js`：

| 配置项 | 说明 |
|--------|------|
| `appName` | 应用名称（XiaoXue Admin） |
| `apiBaseURL` | API 基础路径 |
| `tokenKey` | Token 本地存储键名（`access_token`） |
| `defaultPageSize` | 默认分页大小 |

## 目录结构

```
xiaoxue-feplatform-web
├── public/                 # 静态资源
├── scripts/                # 辅助脚本（如图标整理）
├── src/
│   ├── api/                # 接口封装（含 workflow）
│   ├── assets/             # 静态资源
│   ├── components/         # 业务组件（流程/表单设计器等）
│   ├── composition/        # 组合式函数
│   ├── config/             # 全局配置
│   ├── directives/         # 权限指令
│   ├── layout/             # 后台布局
│   ├── router/             # 路由与守卫
│   ├── store/              # Pinia 状态
│   ├── style/              # 全局样式
│   ├── utils/              # 工具方法（含动态路由）
│   ├── views/              # 页面
│   ├── App.vue
│   └── main.js
├── .env.development
├── index.html
├── LICENSE
├── package.json
└── vite.config.js
```

## 权限与路由说明

1. **常量路由**：`/login`、`/forgot-password`、`/home`（登录页免鉴权）
2. **动态路由**：登录成功后获取用户信息与角色菜单，映射到 `src/views/**` 并挂载到根布局
3. **指令示例**：

```vue
<el-button v-haspermissions="['system:user:add']">新增</el-button>
<el-button v-hasroles="['admin']">仅管理员可见</el-button>
```

`*:*:*` 为超级权限通配。

## 开源协议

本项目基于 [MIT License](./LICENSE) 开源。