138 lines
2.6 KiB
Markdown
138 lines
2.6 KiB
Markdown
|
# 前端功能文档
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
前端项目是基于Vue 3.x的Web后台管理系统，使用Element Plus作为UI组件库，提供直观、高效的管理界面。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- Vue 3.x
|
|||
|
|
- Element Plus
|
|||
|
|
- Vue Router
|
|||
|
|
- Pinia (状态管理)
|
|||
|
|
- TypeScript
|
|||
|
|
- ECharts (数据可视化)
|
|||
|
|
- WangEditor (富文本编辑器)
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
front-end/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── api/ # API接口定义
|
|||
|
|
│ ├── assets/ # 静态资源
|
|||
|
|
│ ├── components/ # 通用组件
|
|||
|
|
│ ├── config/ # 配置文件
|
|||
|
|
│ ├── i18n/ # 国际化
|
|||
|
|
│ ├── plugins/ # 插件
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ ├── store/ # 状态管理
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ ├── App.vue # 根组件
|
|||
|
|
│ └── main.ts # 入口文件
|
|||
|
|
├── public/ # 公共静态资源
|
|||
|
|
├── mock/ # 模拟数据
|
|||
|
|
├── library/ # 自定义库
|
|||
|
|
└── scripts/ # 脚本文件
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 核心功能模块
|
|||
|
|
|
|||
|
|
### 1. 认证与授权
|
|||
|
|
- 登录/注册功能
|
|||
|
|
- 权限管理
|
|||
|
|
- 角色控制
|
|||
|
|
|
|||
|
|
### 2. 系统管理
|
|||
|
|
- 用户管理
|
|||
|
|
- 角色管理
|
|||
|
|
- 菜单管理
|
|||
|
|
- 部门管理
|
|||
|
|
- 字典管理
|
|||
|
|
|
|||
|
|
### 3. 数据可视化
|
|||
|
|
- 仪表盘
|
|||
|
|
- 统计报表
|
|||
|
|
- 图表展示
|
|||
|
|
|
|||
|
|
### 4. 内容管理
|
|||
|
|
- 公告管理
|
|||
|
|
- 文章管理
|
|||
|
|
- 文件管理
|
|||
|
|
|
|||
|
|
### 5. 系统设置
|
|||
|
|
- 系统配置
|
|||
|
|
- 主题设置
|
|||
|
|
- 国际化设置
|
|||
|
|
|
|||
|
|
## 开发指南
|
|||
|
|
|
|||
|
|
### 环境搭建
|
|||
|
|
|
|||
|
|
1. 安装依赖
|
|||
|
|
```bash
|
|||
|
|
npm install --legacy-peer-deps
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 启动开发服务器
|
|||
|
|
```bash
|
|||
|
|
npm run serve
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. 构建生产版本
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 代码规范
|
|||
|
|
|
|||
|
|
- 使用ESLint进行代码检查
|
|||
|
|
- 使用Prettier进行代码格式化
|
|||
|
|
- 遵循Vue 3 Composition API规范
|
|||
|
|
- 组件命名使用PascalCase
|
|||
|
|
- 函数命名使用camelCase
|
|||
|
|
|
|||
|
|
### 路由配置
|
|||
|
|
|
|||
|
|
路由配置位于 `src/router/index.ts`，支持动态路由和权限控制。
|
|||
|
|
|
|||
|
|
### 状态管理
|
|||
|
|
|
|||
|
|
使用Pinia进行状态管理，状态模块位于 `src/store/modules/`。
|
|||
|
|
|
|||
|
|
### API调用
|
|||
|
|
|
|||
|
|
API接口定义位于 `src/api/`，使用axios进行网络请求。
|
|||
|
|
|
|||
|
|
## 页面结构
|
|||
|
|
|
|||
|
|
### 布局结构
|
|||
|
|
- 顶部导航栏
|
|||
|
|
- 左侧菜单
|
|||
|
|
- 右侧内容区域
|
|||
|
|
- 底部版权信息
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
- 支持PC端和移动端
|
|||
|
|
- 自适应布局
|
|||
|
|
|
|||
|
|
## 主题系统
|
|||
|
|
|
|||
|
|
支持多种主题切换，包括：
|
|||
|
|
- 蓝色主题
|
|||
|
|
- 绿色主题
|
|||
|
|
- 紫色主题
|
|||
|
|
- 红色主题
|
|||
|
|
|
|||
|
|
## 国际化
|
|||
|
|
|
|||
|
|
支持中英文切换，国际化文件位于 `src/i18n/`。
|
|||
|
|
|
|||
|
|
## 模拟数据
|
|||
|
|
|
|||
|
|
开发环境下使用mock数据，位于 `mock/` 目录。
|
|||
|
|
|
|||
|
|
## 部署说明
|
|||
|
|
|
|||
|
|
详见 [部署文档](deployment.md)。
|