# IFLOW.md - shzg_projectManage 项目说明

## 项目概述

这是一个基于 Vue 3 和 Element Plus 的后台管理系统前端项目，名为 "shzg_projectManage"。该项目采用现代化的前端技术栈，实现了用户认证、路由控制、API 请求管理、状态管理等功能，主要面向企业级后台管理系统开发。

## 技术栈

- **前端框架**: Vue 3 (使用 Composition API)
- **UI 组件库**: Element Plus
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **HTTP 客户端**: Axios
- **样式处理**: Sass
- **图标**: SVG 图标系统

## 主要功能特性

1. **用户认证系统**:
   - 登录/注册功能
   - Token 管理和验证
   - 权限控制 (基于角色和菜单权限)

2. **路由管理**:
   - 动态路由加载
   - 权限路由控制
   - 路由守卫

3. **API 管理**:
   - 统一的请求封装
   - 请求/响应拦截器
   - 错误处理机制
   - 防重复提交

4. **状态管理**:
   - 使用 Pinia 进行全局状态管理
   - 用户信息、权限、设置等模块化存储

5. **通用组件**:
   - 富文本编辑器
   - 文件上传
   - 图片上传/预览
   - 分页组件
   - 数据字典标签

## 关键文件结构

```
src/
├── api/              # API 接口定义
├── assets/           # 静态资源
├── components/       # 通用组件
├── layout/           # 页面布局
├── router/           # 路由配置
├── store/            # Pinia 状态管理
├── utils/            # 工具函数
├── views/            # 页面视图
├── main.js           # 应用入口
├── App.vue           # 根组件
├── permission.js     # 路由权限控制
```

## 构建和运行

### 开发环境
```bash
npm run dev
```
- 服务启动在端口 8010
- 代理配置将 `/dev-api` 代理到 `http://localhost:8080`

### 生产构建
```bash
npm run build:prod    # 生产环境构建
npm run build:stage   # 预发布环境构建
```

### 预览构建结果
```bash
npm run preview
```

## 开发约定

1. **代码风格**:
   - 使用 ES6+ 语法
   - 组件命名遵循 PascalCase
   - 使用 Vue 3 Composition API

2. **API 请求**:
   - 所有 API 请求通过 `@/utils/request.js` 封装
   - 自动携带认证 Token
   - 统一错误处理

3. **组件开发**:
   - 通用组件放置在 `src/components`
   - 业务组件放置在 `src/views` 对应模块下
   - 使用 Element Plus 组件库保持 UI 一致性

4. **状态管理**:
   - 使用 Pinia 进行状态管理
   - 按模块组织 store (用户、设置、权限等)

## 项目配置

- **环境变量**: 通过 `.env.development`、`.env.production`、`.env.staging` 管理不同环境配置
- **Vite 配置**: `vite.config.js` 包含构建和开发服务器配置
- **样式**: 使用 Sass 预处理器，全局样式定义在 `src/assets/styles/index.scss`

## 安全特性

- 防止重复提交
- Token 自动刷新和验证
- 路由权限控制
- 输入验证和错误处理