congsh/gamegroup_fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化项目脚手架

Browse Source
This commit is contained in:
UGREEN USER
2026-01-28 14:35:43 +08:00
commit 1377b18790
31 changed files with 13898 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

826
doc/design/04-页面设计文档.md Normal file
View File

@@ -0,0 +1,826 @@
# GameGroup 页面设计文档
**项目名称**: GameGroup 前端系统
**文档版本**: v1.0
**更新时间**: 2026-01-28
---
## 📋 目录
- [1. 页面架构](#1-页面架构)
- [2. 认证页面](#2-认证页面)
- [3. 首页](#3-首页)
- [4. 用户中心](#4-用户中心)
- [5. 小组管理](#5-小组管理)
- [6. 游戏库](#6-游戏库)
- [7. 预约管理](#7-预约管理)
- [8. 积分排行](#8-积分排行)
- [9. 荣誉墙](#9-荣誉墙)
---
## 1. 页面架构
### 1.1 页面层级
```
页面层级
├── 公共页面 (Public)
│ ├── 登录页 (/login)
│ ├── 注册页 (/register)
│ └── 找回密码 (/forgot-password)
│
├── 主应用页面 (App)
│ ├── 首页 (/)
│ ├── 用户中心 (/user)
│ │ ├── 个人资料 (/user/profile)
│ │ └── 设置 (/user/settings)
│ ├── 小组管理 (/groups)
│ │ ├── 小组列表 (/groups)
│ │ ├── 小组详情 (/groups/:id)
│ │ └── 创建小组 (/groups/create)
│ ├── 游戏库 (/games)
│ │ ├── 游戏列表 (/games)
│ │ └── 游戏详情 (/games/:id)
│ ├── 预约管理 (/appointments)
│ │ ├── 预约列表 (/appointments)
│ │ └── 预约详情 (/appointments/:id)
│ ├── 积分系统 (/points)
│ │ ├── 我的积分 (/points/me)
│ │ └── 排行榜 (/points/ranking)
│ └── 荣誉墙 (/honors)
│
└── 管理页面 (Admin)
├── 黑名单管理 (/admin/blacklist)
└── 系统设置 (/admin/settings)
```
### 1.2 布局模式
#### 主布局 (MainLayout)
适用于大部分应用页面,包含:
- 顶部导航栏
- 侧边栏菜单
- 主内容区域
- 底部信息栏
#### 认证布局 (AuthLayout)
适用于登录、注册页面:
- 居中的表单卡片
- 简洁的背景
- 无导航栏
#### 空白布局 (EmptyLayout)
适用于特殊页面:
- 无导航
- 无侧边栏
- 全屏内容
---
## 2. 认证页面
### 2.1 登录页 (/login)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ │
│ [Logo + GameGroup] │
│ │
│ ┌───────────────────┐ │
│ │ │ │
│ │ 登录表单 │ │
│ │ │ │
│ │ [账号] │ │
│ │ [密码] │ │
│ │ [登录按钮] │ │
│ │ │ │
│ │ 忘记密码? │ │
│ │ 还没有账号?注册 │ │
│ │ │ │
│ └───────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
#### 设计要点
- **视觉焦点**: 居中的表单卡片,阴影突出
- **背景**: 使用渐变色或游戏主题图片
- **动画**: 表单淡入动画
- **交互**: 输入框焦点动画,按钮悬停效果
#### 表单字段
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| 账号 | text | 是 | 用户名/邮箱/手机号 |
| 密码 | password | 是 | 密码,支持显示切换 |
| 记住我 | checkbox | 否 | 记住登录状态 |
#### 交互流程
1. 用户输入账号密码
2. 点击登录或按Enter键
3. 显示加载状态
4. 登录成功 → 跳转到首页
5. 登录失败 → 显示错误提示
---
### 2.2 注册页 (/register)
#### 页面布局
与登录页类似,但表单字段更多。
#### 表单字段
| 字段 | 类型 | 必填 | 验证规则 |
|------|------|------|----------|
| 用户名 | text | 是 | 3-20字符,字母数字下划线 |
| 邮箱 | email | 否 | 有效邮箱格式 |
| 手机号 | tel | 否 | 11位手机号 |
| 密码 | password | 是 | 6-20字符 |
| 确认密码 | password | 是 | 与密码一致 |
#### 验证逻辑
- 实时验证: 失焦时验证单个字段
- 提交验证: 提交时验证所有字段
- 异步验证: 用户名唯一性检查
---
## 3. 首页
### 3.1 首页布局 (/)
```
┌─────────────────────────────────────────────┐
│ [Logo] [导航菜单] [搜索] [用户] │
├──────┬──────────────────────────────────────┤
│ │ ┌────────────────────────────────┐ │
│ │ │ 欢迎,XXX │ │
│ 侧 │ │ 今日有3个预约待参加 │ │
│ 边 │ └────────────────────────────────┘ │
│ │ │
│ 栏 │ ┌──────────┐ ┌──────────────────┐ │
│ │ │我的小组 │ │ 即将开始的活动 │ │
│ │ │ (5) │ │ • 王者荣耀今晚...│ │
│ │ │ │ │ • 周末桌游局 │ │
│ │ │[查看全部]│ │ • FPS竞技训练 │ │
│ │ └──────────┘ └──────────────────┘ │
│ │ │
│ │ ┌────────────────────────────────┐ │
│ │ │ 热门游戏 │ │
│ │ │ [游戏卡片1][游戏卡片2]... │ │
│ │ └────────────────────────────────┘ │
│ │ │
└──────┴──────────────────────────────────────┘
```
### 3.2 首页内容区块
#### 欢迎卡片
- 显示用户名
- 显示今日待参加的预约数量
- 快速跳转按钮
#### 我的小组
- 显示小组数量
- 显示3个最近活跃的小组卡片
- "查看全部"链接
#### 即将开始的活动
- 时间倒计时
- 活动卡片列表
- 快速加入按钮
#### 热门游戏
- 横向滚动或网格布局
- 游戏卡片展示
- 点击跳转游戏详情
---
## 4. 用户中心
### 4.1 个人资料 (/user/profile)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [返回] 个人资料 │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────┐ │
│ │ [头像上传] │ │
│ │ │ │
│ │ 用户名: john_doe │ │
│ │ 昵称: [编辑] │ │
│ │ 邮箱: jo***@example.com │ │
│ │ 手机: 138****8000 │ │
│ │ │ │
│ │ 会员状态: 是 [到期时间: 2026-12-31] │ │
│ │ 注册时间: 2025-01-01 │ │
│ │ 最后登录: 2026-01-28 10:00 │ │
│ │ │ │
│ │ [编辑资料] [修改密码] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 我的小组 (5) │ │
│ │ [小组卡片列表] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 我的积分 │ │
│ │ [小组选择] 当前积分: 1,250 │ │
│ │ [积分历史] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
#### 功能模块
1. **基本信息展示**
- 头像、用户名、昵称
- 邮箱、手机号(脱敏)
- 会员状态、注册时间、最后登录
2. **编辑资料**
- 弹窗表单
- 头像上传
- 昵称修改
- 邮箱/手机号修改
3. **我的小组**
- 卡片列表展示
- 显示小组角色
- 快速跳转
4. **我的积分**
- 下拉选择小组
- 显示当前积分
- 积分历史入口
---
### 4.2 设置 (/user/settings)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [返回] 设置 │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 通知设置 │ │
│ │ [ ] 预约提醒 │ │
│ │ [ ] 活动开始提醒 (提前15分钟) │ │
│ │ [ ] 小组通知 │ │
│ │ [ ] 积分变动通知 │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 隐私设置 │ │
│ │ [ ] 显示在线状态 │ │
│ │ [ ] 允许陌生人查看我的小组 │ │
│ │ [ ] 允许陌生人查看我的积分 │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 外观设置 │ │
│ │ 主题: [●]浅色 [ ]深色 [ ]跟随系统 │ │
│ │ 语言: [简体中文 ▼] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 账号安全 │ │
│ │ [修改密码] │ │
│ │ [绑定手机] │ │
│ │ [绑定邮箱] │ │
│ │ [退出登录] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
---
## 5. 小组管理
### 5.1 小组列表 (/groups)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ 小组管理 [+ 创建小组] [搜索框] │
├─────────────────────────────────────────────┤
│ [全部] [我创建的] [我加入的] │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ │ │ │ │ │ │
│ │小组卡片│ │小组卡片│ │小组卡片│ ... │
│ │ │ │ │ │ │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ │ │ │ │ │ │
│ │小组卡片│ │小组卡片│ │小组卡片│ ... │
│ │ │ │ │ │ │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
│ [加载更多] 或 [分页器] │
└─────────────────────────────────────────────┘
```
#### 功能特性
- **筛选标签**: 全部/我创建的/我加入的
- **搜索**: 支持按小组名称搜索
- **排序**: 最新创建/成员最多/最活跃
- **卡片展示**: 头像、名称、成员数、角色
- **加载更多**: 无限滚动或分页
---
### 5.2 小组详情 (/groups/:id)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] 王者荣耀固定队 [编辑] [更多] │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ [小组头像] 王者荣耀固定队 │ │
│ │ 每晚8点开黑,欢迎加入 │ │
│ │ 成员: 25/50 │ │
│ │ [公告]本周六团建活动! │ │
│ │ │ │
│ │ [预约列表] [成员列表] [荣誉墙] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 即将开始的预约 │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ [游戏] 今晚开黑 │ │ │
│ │ │ 今天 20:00-23:00 │ │ │
│ │ │ 参与: 4/5 [加入] │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ [游戏] 周末排位赛 │ │ │
│ │ │ 周六 14:00-18:00 │ │ │
│ │ │ 参与: 8/10 [加入] │ │ │
│ │ └─────────────────────────────────┘ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 小组成员 (25) [管理成员] │ │
│ │ [头像列表] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 小组积分排行 │ │
│ │ 1. 用户A - 2,500积分 │ │
│ │ 2. 用户B - 2,100积分 │ │
│ │ 3. 用户C - 1,800积分 │ │
│ │ ... │ │
│ └───────────────────────────────────────┘ │
│ │
│ [+ 创建预约] [查看全部预约] │
└─────────────────────────────────────────────┘
```
#### 功能模块
1. **小组基本信息**
- 头像、名称、描述
- 成员数/最大成员数
- 公告
- 角色(组长/管理员/成员)
2. **Tab切换**
- 预约列表
- 成员列表
- 荣誉墙
- 账目记录
- 资产管理
3. **即将开始的预约**
- 时间倒计时
- 参与人数
- 快速加入按钮
4. **小组成员**
- 头像列表(前12个)
- 在线状态
- "管理成员"(管理员可见)
5. **积分排行**
- Top10列表
- 显示排名变化
---
### 5.3 创建小组 (/groups/create)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] 创建小组 │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 小组名称 │ │
│ │ [_________________________________] │ │
│ │ │ │
│ │ 小组描述 │ │
│ │ [_________________________________] │ │
│ │ [_________________________________] │ │
│ │ │ │
│ │ 小组头像 │ │
│ │ [上传图片] │ │
│ │ │ │
│ │ 小组类型 │ │
│ │ [●]普通小组 [ ]公会 │ │
│ │ │ │
│ │ 最大成员数 │ │
│ │ [50▼] (会员可创建公会,上限500人) │ │
│ │ │ │
│ │ [取消] [创建小组] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
---
## 6. 游戏库
### 6.1 游戏列表 (/games)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ 游戏库 [搜索框] [筛选] │
├─────────────────────────────────────────────┤
│ [标签筛选] MOBA(5) FPS(3) RPG(2) ... │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [封面图] │ │ [封面图] │ │ [封面图] │ │
│ │ 王者荣耀 │ │ 和平精英 │ │ 英雄联盟 │ │
│ │ 5v5 MOBA│ │ 吃鸡FPS │ │ 5v5 MOBA │ │
│ │ 10人 │ │ 100人 │ │ 10人 │ │
│ │ iOS/And │ │ iOS/And │ │ PC │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ [封面图] │ │ [封面图] │ │ [封面图] │ │
│ │ 游戏名称 │ │ 游戏名称 │ │ 游戏名称 │ ... │
│ │ ... │ │ ... │ │ ... │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└─────────────────────────────────────────────┘
```
#### 功能特性
- **搜索**: 支持游戏名称搜索
- **标签筛选**: 游戏类型标签
- **平台筛选**: iOS/Android/PC/主机
- **排序**: 热门/最新/名称
- **卡片展示**: 封面图、名称、类型、人数、平台
---
### 6.2 游戏详情 (/games/:id)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] │
├─────────────────────────────────────────────┤
│ ┌───────────────────────────────────────┐ │
│ │ [游戏封面图 - 宽] │ │
│ │ │ │
│ │ 王者荣耀 │ │
│ │ 5v5公平竞技游戏 │ │
│ │ │ │
│ │ [MOBA] [5v5] [iOS/Android] │ │
│ │ │ │
│ │ 人数: 1-10人 │ │
│ │ │ │
│ │ [创建预约] │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 游戏描述 │ │
│ │ 《王者荣耀》是腾讯第一3D英雄... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 相关预约 │ │
│ │ [预约卡片列表] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
---
## 7. 预约管理
### 7.1 预约列表 (/appointments)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ 预约管理 [+ 创建预约] [筛选] │
├─────────────────────────────────────────────┤
│ [全部] [即将开始] [进行中] [已结束] │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ [游戏图标] 今晚开黑 │ │
│ │ 王者荣耀固定队 │ │
│ │ 今天 20:00-23:00 │ │
│ │ 参与: 4/5 ●即将开始 │ │
│ │ [查看详情] [退出] │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ [游戏图标] 周末桌游局 │ │
│ │ 周末休闲组 │ │
│ │ 周六 14:00-18:00 │ │
│ │ 参与: 6/8 ○未开始 │ │
│ │ [查看详情] [退出] │ │
│ └─────────────────────────────────────┘ │
│ │
│ ...更多预约 │
│ │
└─────────────────────────────────────────────┘
```
#### 状态标签
| 状态 | 标签 | 颜色 |
|------|------|------|
| open | 未开始 | 绿色 |
| full | 已满 | 橙色 |
| ongoing | 进行中 | 蓝色 |
| finished | 已结束 | 灰色 |
| cancelled | 已取消 | 红色 |
---
### 7.2 创建预约 (/appointments/create)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] 创建预约 │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────┐ │
│ │ 选择小组 │ │
│ │ [下拉选择 - 王者荣耀固定组 ▼] │ │
│ │ │ │
│ │ 选择游戏 │ │
│ │ [搜索游戏...] │ │
│ │ [王者荣耀] [和平精英] ... │ │
│ │ │ │
│ │ 预约标题 │ │
│ │ [_________________________________] │ │
│ │ │ │
│ │ 预约描述 │ │
│ │ [_________________________________] │ │
│ │ [_________________________________] │ │
│ │ │ │
│ │ 开始时间 结束时间 │ │
│ │ [日期选择] [日期选择] │ │
│ │ [时间选择] [时间选择] │ │
│ │ │ │
│ │ 最大参与人数 │ │
│ │ [5▼] (根据游戏人数范围推荐) │ │
│ │ │ │
│ │ [取消] [创建预约] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
---
## 8. 积分排行
### 8.1 积分排行榜 (/points/ranking/:groupId)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] 积分排行榜 - 王者荣耀固定队 │
├─────────────────────────────────────────────┤
│ [本周] [本月] [总榜] │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 🥇 [头像] 用户A │ │
│ │ 2,500积分 ↑2 │ │
│ │ 参与活动25次 MVP 10次 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 🥈 [头像] 用户B │ │
│ │ 2,100积分 ↓1 │ │
│ │ 参与活动22次 MVP 8次 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 🥉 [头像] 用户C │ │
│ │ 1,800积分 - │ │
│ │ 参与活动20次 MVP 5次 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 4 [头像] 用户D │ │
│ │ 1,500积分 ↑5 │ │
│ │ 参与活动18次 MVP 3次 │ │
│ └─────────────────────────────────────┘ │
│ │
│ ...更多排名 │
│ │
│ 我的排名: 第15名 (800积分) │
└─────────────────────────────────────────────┘
```
#### 特效
- **Top3特殊样式**: 金银铜牌样式
- **排名变化**: ↑↓箭头显示排名变化
- **我的排名**: 底部固定显示
---
## 9. 荣誉墙
### 9.1 荣誉时间轴 (/honors/:groupId)
#### 页面布局
```
┌─────────────────────────────────────────────┐
│ [←] 荣誉墙 - 王者荣耀固定队 │
├─────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 2026年 │ │
│ │ ───────────────────────────────── │ │
│ │ │ │
│ │ 🏆 年度MVP │ │
│ │ [头像][头像] │ │
│ │ 用户A 用户B │ │
│ │ │ │
│ │ 🏆 最佳新人 │ │
│ │ [头像] │ │
│ │ 用户C │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 2025年12月 │ │
│ │ ───────────────────────────────── │ │
│ │ │ │
│ │ 🏆 月度冠军 │ │
│ │ [头像] │ │
│ │ 用户A │ │
│ └─────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 2025年11月 │ │
│ │ ───────────────────────────────── │ │
│ │ ... │ │
│ └─────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
```
#### 荣誉类型
| 类型 | 图标 | 说明 |
|------|------|------|
| YEARLY | 🏆 | 年度荣誉 |
| MONTHLY | 🥇 | 月度荣誉 |
| WEEKLY | ⭐ | 周度荣誉 |
| CUSTOM | 🎖️ | 自定义荣誉 |
---
## 10. 响应式适配
### 10.1 移动端适配
#### 顶部导航
- 桌面: 水平导航菜单
- 移动: 汉堡菜单 + 抽屉式导航
#### 侧边栏
- 桌面: 固定显示
- 平板: 可折叠
- 移动: 抽屉式侧边栏
#### 内容布局
- 桌面: 3-4列网格
- 平板: 2列网格
- 移动: 1列堆叠
#### 卡片信息
- 桌面: 完整信息展示
- 移动: 精简信息,点击查看详情
---
## 11. 页面动效
### 11.1 页面切换动画
```css
/* 淡入淡出 */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
}
/* 滑动 */
.slide-enter-active, .slide-leave-active {
transition: transform 0.3s;
}
.slide-enter-from {
transform: translateX(100%);
}
.slide-leave-to {
transform: translateX(-100%);
}
```
### 11.2 列表动画
```css
/* 列表项依次进入 */
@keyframes slideInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.list-item {
animation: slideInUp 0.3s ease-out;
animation-fill-mode: both;
}
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* ... */
```
### 11.3 加载动画
- **骨架屏**: 内容加载时显示
- **Loading Spinner**: 按钮加载、异步操作
- **进度条**: 页面顶部加载进度
---
## 12. 总结
本页面设计文档确保:
- ✅ **一致性**: 统一的页面布局和交互模式
- ✅ **易用性**: 直观的导航和操作流程
- ✅ **美观性**: 精心设计的视觉呈现
- ✅ **响应式**: 完美适配各种设备
- ✅ **性能**: 流畅的页面加载和交互
---
**文档维护**: 随页面迭代持续更新
**最后更新**: 2026-01-28