cz-hjjc-budget/README.md

# 预算执行管理系统

基于 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
# 构建开发版本 -> 输出到 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. 预览生产构建

```bash
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` - 构建输出目录（用于区分不同环境的构建产物）

### 使用配置

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

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

## 许可证

MIT License