# 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