commit 1377b18790136f21f58d2700e49acf109b160f1d Author: UGREEN USER Date: Wed Jan 28 14:35:43 2026 +0800 feat: 初始化项目脚手架 diff --git a/.claude/ralph-loop.local.md b/.claude/ralph-loop.local.md new file mode 100644 index 0000000..d949732 --- /dev/null +++ b/.claude/ralph-loop.local.md @@ -0,0 +1,9 @@ +--- +active: true +iteration: 1 +max_iterations: 0 +completion_promise: null +started_at: "2026-01-28T06:32:21Z" +--- + +按照 doc/开发步骤文档.md 中的12个阶段完成 GameGroup 前端项目的完整开发，包括项目初始化、基础配置、组件开发、API服务层、状态管理、路由配置、页面开发、移动端适配和测试优化 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5ce3151 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Environment variables +.env +.env.local +.env.*.local diff --git a/doc/README.md b/doc/README.md new file mode 100644 index 0000000..5ffdb60 --- /dev/null +++ b/doc/README.md @@ -0,0 +1,413 @@ +# 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 规范: + +``` +(): + + + +