预算执行管理系统

基于 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. 安装依赖

npm install

2. 配置环境变量

复制 .env.example 文件并根据不同环境创建对应的配置文件：

# 开发环境（已创建，可根据需要修改）
.env.development

# 预发布环境（已创建，可根据需要修改）
.env.staging

# 生产环境（已创建，可根据需要修改）
.env.production

重要提示：所有环境变量必须以 VITE_ 开头才能在客户端代码中访问。

3. 启动开发服务器

npm run dev

项目将在 http://localhost:3000 启动，自动使用 .env.development 配置

4. 构建不同环境版本

不同环境的构建产物会输出到不同的目录，便于区分和管理：

# 构建开发版本 -> 输出到 dist-dev/
npm run build:dev

# 构建预发布版本 -> 输出到 dist-staging/
npm run build:staging

# 构建生产版本 -> 输出到 dist-prod/
npm run build:prod
# 或使用默认构建命令
npm run build

构建输出目录说明：

• 开发环境：dist-dev/
• 预发布环境：dist-staging/
• 生产环境：dist-prod/

构建输出目录可在各环境的 .env 文件中通过 VITE_BUILD_OUT_DIR 配置项进行修改。

5. 预览生产构建

npm run preview

使用说明

1. 登录系统

   • 访问系统后会自动跳转到登录页面
   • 输入用户名和密码（无需真实后端验证）
   • 点击登录按钮即可进入系统

2. 导航菜单

   • 左侧导航栏可以切换不同功能页面
   • 点击折叠按钮可以收起/展开侧边栏

3. 功能操作

   • 各页面提供了完整的增删改查功能示例
   • 所有操作都有相应的提示信息

多环境配置管理

项目支持多环境配置，无需修改代码即可切换不同环境。

环境配置文件

• .env.development - 开发环境配置
• .env.staging - 预发布环境配置
• .env.production - 生产环境配置
• .env.example - 配置模板（供参考）

环境变量说明

每个环境配置文件包含以下配置项：

• VITE_APP_TITLE - 应用标题
• VITE_APP_ENV - 环境标识
• VITE_API_BASE_URL - API 基础地址
• VITE_API_TIMEOUT - API 请求超时时间
• VITE_ENABLE_MOCK - 是否启用 Mock 数据
• VITE_ENABLE_DEBUG - 是否启用调试模式
• VITE_BUILD_OUT_DIR - 构建输出目录（用于区分不同环境的构建产物）

使用配置

在代码中使用统一配置模块：

import config from '@/config'

// 访问 API 地址
const apiUrl = config.api.baseURL

// 判断当前环境
if (config.isDevelopment) {
  console.log('开发环境')
}

// 访问功能开关
if (config.features.enableMock) {
  // 使用 Mock 数据
}

API 请求示例

项目已提供 API 请求工具类，自动使用配置中的 API 地址：

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 中
• 修改环境变量后需要重启开发服务器才能生效
• 构建时环境变量会被静态注入，无法在运行时动态修改
• 不同环境的构建产物会输出到不同的目录（dist-dev/、dist-staging/、dist-prod/），便于区分和管理

许可证

MIT License