38 KiB
38 KiB
GameGroup 页面设计文档
项目名称: GameGroup 前端系统 文档版本: v1.0 更新时间: 2026-01-28
📋 目录
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 | 否 | 记住登录状态 |
交互流程
- 用户输入账号密码
- 点击登录或按Enter键
- 显示加载状态
- 登录成功 → 跳转到首页
- 登录失败 → 显示错误提示
2.2 注册页 (/register)
页面布局
与登录页类似,但表单字段更多。
表单字段
| 字段 | 类型 | 必填 | 验证规则 |
|---|---|---|---|
| 用户名 | text | 是 | 3-20字符,字母数字下划线 |
| 邮箱 | 否 | 有效邮箱格式 | |
| 手机号 | 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 │ │
│ │ [积分历史] │ │
│ └───────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
功能模块
-
基本信息展示
- 头像、用户名、昵称
- 邮箱、手机号(脱敏)
- 会员状态、注册时间、最后登录
-
编辑资料
- 弹窗表单
- 头像上传
- 昵称修改
- 邮箱/手机号修改
-
我的小组
- 卡片列表展示
- 显示小组角色
- 快速跳转
-
我的积分
- 下拉选择小组
- 显示当前积分
- 积分历史入口
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积分 │ │
│ │ ... │ │
│ └───────────────────────────────────────┘ │
│ │
│ [+ 创建预约] [查看全部预约] │
└─────────────────────────────────────────────┘
功能模块
-
小组基本信息
- 头像、名称、描述
- 成员数/最大成员数
- 公告
- 角色(组长/管理员/成员)
-
Tab切换
- 预约列表
- 成员列表
- 荣誉墙
- 账目记录
- 资产管理
-
即将开始的预约
- 时间倒计时
- 参与人数
- 快速加入按钮
-
小组成员
- 头像列表(前12个)
- 在线状态
- "管理成员"(管理员可见)
-
积分排行
- 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 页面切换动画
/* 淡入淡出 */
.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 列表动画
/* 列表项依次进入 */
@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