You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
5.4 KiB
206 lines
5.4 KiB
4 months ago
|
# 预算执行管理系统
|
||
|
|
|
||
|
|
基于 Vue3 + Element Plus 构建的预算执行管理前端系统。
|
||
|
|
|
||
|
|
## 技术栈
|
||
|
|
|
||
|
|
- **Vue 3** - 渐进式 JavaScript 框架
|
||
|
|
- **Element Plus** - 基于 Vue 3 的组件库
|
||
|
|
- **Vue Router** - Vue.js 官方路由管理器
|
||
|
|
- **Vite** - 下一代前端构建工具
|
||
|
|
|
||
|
|
## 项目结构
|
||
|
|
|
||
|
|
```
|
||
|
|
czemc-budget-execution-frontend/
|
||
|
|
├── src/
|
||
|
|
│ ├── config/ # 配置管理
|
||
|
|
│ │ └── index.js # 统一配置管理模块
|
||
|
|
│ ├── layout/ # 布局组件
|
||
|
|
│ │ └── MainLayout.vue # 主布局（包含 header、footer、nav 和主内容区）
|
||
|
|
│ ├── utils/ # 工具类
|
||
|
|
│ │ ├── request.js # API 请求工具
|
||
|
|
│ │ └── api.js # API 接口定义
|
||
|
|
│ ├── views/ # 页面组件
|
||
|
|
│ │ ├── Login.vue # 登录页面（单页面，不使用布局）
|
||
|
|
│ │ ├── Dashboard.vue # 工作台
|
||
|
|
│ │ ├── BudgetList.vue # 预算列表
|
||
|
|
│ │ ├── ExecutionList.vue # 执行列表
|
||
|
|
│ │ └── Report.vue # 报表统计
|
||
|
|
│ ├── router/ # 路由配置
|
||
|
|
│ │ └── index.js
|
||
|
|
│ ├── App.vue # 根组件
|
||
|
|
│ └── main.js # 入口文件
|
||
|
|
├── .env.development # 开发环境配置
|
||
|
|
├── .env.staging # 预发布环境配置
|
||
|
|
├── .env.production # 生产环境配置
|
||
|
|
├── .env.example # 环境配置模板
|
||
|
|
├── index.html # HTML 模板
|
||
|
|
├── vite.config.js # Vite 配置
|
||
|
|
└── package.json # 项目配置
|
||
|
|
```
|
||
|
|
|
||
|
|
## 功能特性
|
||
|
|
|
||
|
|
### 1. 登录页面
|
||
|
|
- 独立的登录页面，不使用主布局
|
||
|
|
- 表单验证功能
|
||
|
|
- 记住我功能
|
||
|
|
- 登录状态管理
|
||
|
|
|
||
|
|
### 2. 主布局
|
||
|
|
- **Header**: 系统标题和用户信息下拉菜单
|
||
|
|
- **Sidebar**: 可折叠的侧边栏导航菜单
|
||
|
|
- **Main Content**: 主内容区域（使用 router-view 渲染页面）
|
||
|
|
- **Footer**: 页脚信息
|
||
|
|
|
||
|
|
### 3. 功能页面
|
||
|
|
- **工作台**: 数据统计和最近记录展示
|
||
|
|
- **预算列表**: 预算项目的增删改查
|
||
|
|
- **执行列表**: 预算执行记录管理
|
||
|
|
- **报表统计**: 数据统计和图表展示
|
||
|
|
|
||
|
|
## 安装和运行
|
||
|
|
|
||
|
|
### 1. 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. 配置环境变量
|
||
|
|
|
||
|
|
复制 `.env.example` 文件并根据不同环境创建对应的配置文件：
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 开发环境（已创建，可根据需要修改）
|
||
|
|
.env.development
|
||
|
|
|
||
|
|
# 预发布环境（已创建，可根据需要修改）
|
||
|
|
.env.staging
|
||
|
|
|
||
|
|
# 生产环境（已创建，可根据需要修改）
|
||
|
|
.env.production
|
||
|
|
```
|
||
|
|
|
||
|
|
**重要提示**：所有环境变量必须以 `VITE_` 开头才能在客户端代码中访问。
|
||
|
|
|
||
|
|
### 3. 启动开发服务器
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
项目将在 `http://localhost:3000` 启动，自动使用 `.env.development` 配置
|
||
|
|
|
||
|
|
### 4. 构建不同环境版本
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 构建开发版本
|
||
|
|
npm run build:dev
|
||
|
|
|
||
|
|
# 构建预发布版本
|
||
|
|
npm run build:staging
|
||
|
|
|
||
|
|
# 构建生产版本
|
||
|
|
npm run build:prod
|
||
|
|
# 或使用默认构建命令
|
||
|
|
npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5. 预览生产构建
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run preview
|
||
|
|
```
|
||
|
|
|
||
|
|
## 使用说明
|
||
|
|
|
||
|
|
1. **登录系统**
|
||
|
|
- 访问系统后会自动跳转到登录页面
|
||
|
|
- 输入用户名和密码（无需真实后端验证）
|
||
|
|
- 点击登录按钮即可进入系统
|
||
|
|
|
||
|
|
2. **导航菜单**
|
||
|
|
- 左侧导航栏可以切换不同功能页面
|
||
|
|
- 点击折叠按钮可以收起/展开侧边栏
|
||
|
|
|
||
|
|
3. **功能操作**
|
||
|
|
- 各页面提供了完整的增删改查功能示例
|
||
|
|
- 所有操作都有相应的提示信息
|
||
|
|
|
||
|
|
## 多环境配置管理
|
||
|
|
|
||
|
|
项目支持多环境配置，无需修改代码即可切换不同环境。
|
||
|
|
|
||
|
|
### 环境配置文件
|
||
|
|
|
||
|
|
- `.env.development` - 开发环境配置
|
||
|
|
- `.env.staging` - 预发布环境配置
|
||
|
|
- `.env.production` - 生产环境配置
|
||
|
|
- `.env.example` - 配置模板（供参考）
|
||
|
|
|
||
|
|
### 使用配置
|
||
|
|
|
||
|
|
在代码中使用统一配置模块：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import config from '@/config'
|
||
|
|
|
||
|
|
// 访问 API 地址
|
||
|
|
const apiUrl = config.api.baseURL
|
||
|
|
|
||
|
|
// 判断当前环境
|
||
|
|
if (config.isDevelopment) {
|
||
|
|
console.log('开发环境')
|
||
|
|
}
|
||
|
|
|
||
|
|
// 访问功能开关
|
||
|
|
if (config.features.enableMock) {
|
||
|
|
// 使用 Mock 数据
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### API 请求示例
|
||
|
|
|
||
|
|
项目已提供 API 请求工具类，自动使用配置中的 API 地址：
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import { budgetAPI } from '@/utils/api'
|
||
|
|
|
||
|
|
// 获取预算列表
|
||
|
|
const data = await budgetAPI.getBudgetList({ page: 1, pageSize: 10 })
|
||
|
|
```
|
||
|
|
|
||
|
|
## 开发说明
|
||
|
|
|
||
|
|
### 路由配置
|
||
|
|
路由配置在 `src/router/index.js` 中，包含路由守卫用于登录验证。
|
||
|
|
|
||
|
|
### 样式规范
|
||
|
|
- 使用 Element Plus 的组件样式
|
||
|
|
- 自定义样式使用 scoped 作用域
|
||
|
|
- 响应式设计，支持移动端和桌面端
|
||
|
|
|
||
|
|
### 状态管理
|
||
|
|
当前使用 localStorage 存储登录状态，实际项目中可以集成 Vuex 或 Pinia。
|
||
|
|
|
||
|
|
### 环境变量规范
|
||
|
|
- 所有环境变量必须以 `VITE_` 开头
|
||
|
|
- 环境变量在构建时会被注入到代码中
|
||
|
|
- 敏感信息不应存储在环境变量中（会被打包到客户端代码）
|
||
|
|
|
||
|
|
## 注意事项
|
||
|
|
|
||
|
|
- 登录功能为前端模拟，实际项目中需要对接后端 API
|
||
|
|
- 所有数据为示例数据，实际使用时需要对接后端接口
|
||
|
|
- 图表功能预留了接口，可以集成 ECharts 或其他图表库
|
||
|
|
- `.env` 文件不应提交到版本控制，已配置在 `.gitignore` 中
|
||
|
|
- 修改环境变量后需要重启开发服务器才能生效
|
||
|
|
- 构建时环境变量会被静态注入，无法在运行时动态修改
|
||
|
|
|
||
|
|
## 许可证
|
||
|
|
|
||
|
|
MIT License
|
||
|
|
|