# GoFaster 前端系统

## 项目概述

GoFaster是一个基于Electron + Vue3的桌面应用程序，包含前端APP和后端Go服务。本仓库包含前端部分的完整实现。

## 功能特性

### 🎯 核心功能
- **用户管理**: 完整的用户CRUD操作，支持角色分配和权限管理
- **速度测试**: 网络连接速度测试功能
- **历史记录**: 测试历史数据查看和管理
- **系统设置**: 可配置的应用参数设置

### 🎨 界面特性
- **现代化设计**: 采用Material Design风格，界面美观易用
- **响应式布局**: 支持不同屏幕尺寸，适配各种设备
- **主题切换**: 支持浅色/深色主题切换
- **多语言支持**: 内置中英文界面

### 🔧 技术特性
- **标签页管理**: 支持多标签页操作，提高工作效率
- **收藏菜单**: 可收藏常用功能，快速访问
- **消息中心**: 实时消息通知和管理
- **面包屑导航**: 清晰的页面层级导航

## 技术架构

### 前端技术栈
- **框架**: Vue 3 + Composition API
- **构建工具**: Vue CLI + Webpack
- **桌面框架**: Electron
- **路由**: Vue Router 4
- **状态管理**: Vuex 4
- **HTTP客户端**: Axios
- **样式**: CSS3 + 响应式设计

### 项目结构
```
app/
├── src/
│   ├── main/           # Electron主进程
│   ├── renderer/       # 渲染进程
│   │   ├── components/ # 组件
│   │   ├── views/      # 页面
│   │   ├── services/   # 服务层
│   │   ├── router/     # 路由配置
│   │   └── store/      # 状态管理
│   └── public/         # 静态资源
├── package.json        # 依赖配置
└── vue.config.js       # Vue配置
```

## 快速开始

### 环境要求
- Node.js 16+
- npm 8+

### 安装依赖
```bash
cd app
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 主要组件说明

### 1. MainLayout.vue - 主布局组件
- **顶部导航栏**: Logo、面包屑导航、消息中心、用户信息
- **左侧菜单**: 主要功能菜单、收藏菜单
- **内容区域**: 标签页管理、功能内容展示

### 2. UserManagement.vue - 用户管理页面
- **用户列表**: 分页显示、搜索筛选、状态管理
- **用户操作**: 添加、编辑、删除用户
- **角色管理**: 用户角色分配和权限控制

### 3. Settings.vue - 系统设置页面
- **基本设置**: 应用名称、语言、主题
- **网络设置**: API地址、超时配置、重试策略
- **用户设置**: 登录配置、会话管理
- **通知设置**: 桌面通知、声音提醒
- **数据设置**: 缓存管理、备份策略

## 后端API集成

### 用户管理API
- `GET /api/users` - 获取用户列表
- `POST /api/users` - 创建用户
- `PUT /api/users/:id` - 更新用户
- `DELETE /api/users/:id` - 删除用户
- `GET /api/roles` - 获取角色列表

### 认证API
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/me` - 获取当前用户信息

## 配置说明

### 环境配置
在 `src/renderer/services/userService.js` 中配置API基础URL：
```javascript
const API_BASE_URL = 'http://localhost:8080/api'
```

### 主题配置
支持三种主题模式：
- `light`: 浅色主题
- `dark`: 深色主题  
- `auto`: 跟随系统设置

## 开发指南

### 添加新页面
1. 在 `src/renderer/views/` 创建新的Vue组件
2. 在 `src/renderer/router/index.js` 添加路由配置
3. 在 `src/renderer/components/MainLayout.vue` 添加菜单项

### 添加新API
1. 在 `src/renderer/services/` 创建新的服务文件
2. 实现相应的API调用方法
3. 在组件中引入并使用

### 样式规范
- 使用CSS3和Flexbox布局
- 遵循Material Design设计规范
- 支持响应式设计，适配移动端

## 部署说明

### 开发环境
- 后端服务运行在 `localhost:8080`
- 前端开发服务器自动构建并启动Electron

### 生产环境
- 使用 `npm run build` 构建生产版本
- 生成的可执行文件在 `dist/` 目录

## 常见问题

### Q: 如何修改API服务器地址？
A: 在设置页面的"网络设置"部分修改API服务器地址，或直接修改 `userService.js` 中的 `API_BASE_URL`。

### Q: 如何添加新的菜单项？
A: 在 `MainLayout.vue` 的 `mainMenuItems` 数组中添加新的菜单项，包含id、name、path、icon等属性。

### Q: 如何自定义主题颜色？
A: 在CSS中修改CSS变量或直接修改相应的颜色值。

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建Pull Request

## 许可证

本项目采用 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 联系方式

- 项目维护者: GoFaster Team
- 邮箱: support@gofaster.com
- 项目地址: https://github.com/gofaster/gofaster

---

**注意**: 本项目需要配合Go后端服务使用，请确保后端服务正常运行。