提交

IFLOW.md

@@ -0,0 +1,116 @@
+# 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 自动刷新和验证
+- 路由权限控制
+- 输入验证和错误处理