manta/gofaster

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+

安装依赖

cd app
npm install

开发模式

npm run dev

构建生产版本

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：

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 文件了解详情。

联系方式

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

---

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