# 前端功能文档

## 项目概述

前端项目是基于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)。