shzg_projectManage/IFLOW.md

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     # 路由权限控制

构建和运行

开发环境

npm run dev

• 服务启动在端口 8010
• 代理配置将 /dev-api 代理到 http://localhost:8080

生产构建

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

预览构建结果

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 自动刷新和验证
• 路由权限控制
• 输入验证和错误处理