# GameGroup 前端项目文档 **项目名称**: GameGroup 前端系统 **项目版本**: v1.0 **文档更新**: 2026-01-28 --- ## 📚 文档目录 本目录包含 GameGroup 前端项目的所有设计文档和技术文档。 ### 📁 目录结构 ``` doc/ ├── README.md # 本文档 - 文档导航 ├── api/ # API相关文档 │ └── API文档.md # 后端API接口文档 ├── design/ # 设计文档 │ ├── 01-前端架构设计.md # 前端技术架构 │ ├── 02-UI-UX设计规范.md # 视觉设计规范 │ ├── 03-组件设计文档.md # 组件库设计 │ └── 04-页面设计文档.md # 页面设计 └── 后端相关文档/ ├── 后端README.md # 后端项目说明 └── 后端项目分析报告.md # 后端代码分析 ``` --- ## 🎯 项目概述 GameGroup 是一个游戏社群管理平台,为玩家提供小组管理、游戏预约、积分系统、竞猜等功能。前端项目采用现代化的技术栈,注重用户体验和性能优化。 ### 核心功能模块 - **认证模块**: 用户注册、登录、令牌刷新 - **用户中心**: 个人资料管理、设置 - **小组管理**: 创建/加入小组、成员管理、权限控制 - **游戏库**: 游戏浏览、搜索、筛选 - **预约系统**: 创建预约、加入/退出预约、时间管理 - **账目管理**: 账目记录、统计分析 - **排班助手**: 空闲时间提交、共同时间查找 - **荣誉墙**: 荣誉展示、时间轴 - **资产管理**: 资产借用/归还、流转记录 - **积分系统**: 积分查询、排行榜 - **竞猜系统**: 创建竞猜、参与竞猜、结算 --- ## 🛠 技术栈 ### 核心技术 | 技术 | 版本 | 说明 | |------|------|------| | Vue | 3.x | 渐进式JavaScript框架 | | TypeScript | 5.x | JavaScript超集,提供类型安全 | | Vite | 5.x | 下一代前端构建工具 | | Vue Router | 4.x | Vue官方路由管理器 | | Pinia | 2.x | Vue官方状态管理库 | | Element Plus | 最新 | Vue 3 UI组件库 | | Tailwind CSS | 3.x | 原子化CSS框架 | | Axios | 1.x | HTTP客户端 | | Vitest | 最新 | 单元测试框架 | ### 开发工具 - **包管理器**: pnpm / npm / yarn - **代码规范**: ESLint + Prettier - **Git Hooks**: Husky + lint-staged - **提交规范**: Commitlint --- ## 📖 文档说明 ### 1. 前端架构设计 ([01-前端架构设计.md](design/01-前端架构设计.md)) **内容概览**: - 技术栈选型和理由 - 项目架构设计(分层架构、模块化) - 目录结构规范 - 状态管理方案 - 路由设计 - API请求层封装 - 性能优化策略 - 开发工具链配置 - 测试方案 - 部署方案 **适合人群**: 技术负责人、架构师、开发者 **阅读时间**: 30分钟 --- ### 2. UI/UX设计规范 ([02-UI-UX设计规范.md](design/02-UI-UX设计规范.md)) **内容概览**: - 设计理念和核心价值 - 视觉风格定位 - 色彩系统(主色调、功能色、游戏主题色) - 字体系统(字体家族、大小、字重、行高) - 间距系统 - 组件规范(按钮、卡片、输入框、徽章、头像等) - 动效规范(动画时长、缓动函数、常用动效) - 响应式设计(断点系统、响应式策略) - 无障碍设计(键盘导航、屏幕阅读器) - 设计资源和工具 **适合人群**: UI设计师、前端开发者 **阅读时间**: 45分钟 --- ### 3. 组件设计文档 ([03-组件设计文档.md](design/03-组件设计文档.md)) **内容概览**: - 组件概述和分类 - 基础组件(按钮、输入框、弹窗、卡片、表格等) - 业务组件(用户卡片、小组卡片、游戏卡片、预约卡片等) - 布局组件(主布局、导航栏、侧边栏) - 组件通信方式(Props/Emits、Provide/Inject、Event Bus) - 组件性能优化(懒加载、缓存、虚拟滚动) - 组件测试示例 **适合人群**: 前端开发者 **阅读时间**: 60分钟 --- ### 4. 页面设计文档 ([04-页面设计文档.md](design/04-页面设计文档.md)) **内容概览**: - 页面架构和层级 - 认证页面(登录、注册) - 首页布局和内容 - 用户中心(个人资料、设置) - 小组管理(列表、详情、创建) - 游戏库(列表、详情) - 预约管理(列表、创建) - 积分排行榜 - 荣誉墙 - 响应式适配 - 页面动效 **适合人群**: UI设计师、前端开发者、产品经理 **阅读时间**: 50分钟 --- ### 5. API接口文档 ([api/API文档.md](api/API文档.md)) **内容概览**: - 完整的后端API接口文档 - 请求方法、参数、响应格式 - 认证说明 - 错误码对照表 - 13个模块的70+接口: - 认证相关 - 用户管理 - 小组管理 - 游戏库 - 预约管理 - 账目管理 - 排班助手 - 黑名单管理 - 荣誉墙 - 资产管理 - 积分系统 - 竞猜系统 - 系统接口 **适合人群**: 前端开发者、后端开发者 **阅读时间**: 按需查阅 --- ### 6. 后端项目文档 #### 后端README ([后端README.md](后端README.md)) 后端项目的总体介绍,包含: - 技术栈(NestJS + TypeScript + MySQL) - 项目结构 - 开发指南 - 部署说明 #### 后端项目分析报告 ([后端项目分析报告.md](后端项目分析报告.md)) 后端代码的详细分析,包含: - 项目概览和架构 - 项目优点 - 需要修复的问题 - 性能优化建议 **适合人群**: 前端开发者(了解后端实现) --- ## 🚀 快速开始 ### 环境要求 - Node.js >= 18.0.0 - pnpm >= 8.0.0 (推荐) 或 npm >= 9.0.0 ### 安装依赖 ```bash # 使用pnpm(推荐) pnpm install # 或使用npm npm install ``` ### 启动开发服务器 ```bash pnpm dev ``` 访问 http://localhost:5173 ### 构建生产版本 ```bash pnpm build ``` ### 运行测试 ```bash pnpm test ``` --- ## 📋 开发规范 ### Git提交规范 遵循 Conventional Commits 规范: ``` ():