439 KiB
直播平台双端交互逻辑设计报告
生成时间：2024年12月29日 版本：V2.0 设计范围：Android移动端 + Vue管理端 重点优化：缘池（多板块社区）、许愿树（节日祝福留言板）
目录
一、系统架构总览
1.1 整体架构图
┌─────────────────────────────────────────────────────────────────────────────┐
│ 用户层 (User Layer) │
├─────────────────────────────────┬───────────────────────────────────────────┤
│ Android 移动端 (APP) │ Vue 管理端 (Admin) │
│ ┌─────────────────────────┐ │ ┌─────────────────────────────────┐ │
│ │ 首页 │ 缘池 │许愿树│消息│我的│ │ │ 仪表盘 │ 用户 │ 直播 │ 社区 │ 活动 │ │
│ └─────────────────────────┘ │ └─────────────────────────────────┘ │
└─────────────────────────────────┴───────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 网关层 (Gateway Layer) │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ API网关 │ │ 负载均衡 │ │ 限流熔断 │ │ 统一认证 (JWT) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 服务层 (Service Layer) │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────────┐ │
│ │ 用户服务 │ │ 直播服务 │ │ 社区服务 │ │ 活动服务 │ │ 消息服务 │ │
│ │ (User) │ │ (Live) │ │(Community)│ │(Activity) │ │ (Message) │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ 数据层 (Data Layer) │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌───────────────┐ │
│ │ MySQL │ │ Redis │ │ MongoDB │ │ OSS │ │ Elasticsearch│ │
│ │ (主数据) │ │ (缓存) │ │ (动态) │ │ (文件) │ │ (搜索) │ │
│ └───────────┘ └───────────┘ └───────────┘ └───────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────────────────────┘
1.2 技术栈对照
| 层级 | 移动端 (Android) | 管理端 (Vue) | 后端 (Java) |
|---|---|---|---|
| 框架 | Android SDK | Vue 2.x + Element UI | Spring Boot |
| 网络 | Retrofit2 + OkHttp | Axios | Spring MVC |
| 状态 | SharedPreferences | Vuex | Redis Session |
| 实时 | WebSocket | WebSocket | Netty |
| 存储 | SQLite/Room | LocalStorage | MySQL + Redis |
二、双端功能对照表
2.1 核心功能模块对照
| 功能模块 | 移动端功能 | 管理端功能 | 交互关系 |
|---|---|---|---|
| 用户认证 | 登录/注册/验证码 | 用户列表/封禁/等级 | 管理端管控用户状态 |
| 直播观看 | 观看/弹幕/礼物 | 房间管理/弹幕审核 | 管理端可关闭直播间 |
| 社交互动 | 好友/群组/私聊 | 好友关系/会话监管 | 管理端可解除关系 |
| 缘池社区 | 板块浏览/发帖/互动 | 板块管理/内容审核 | 管理端配置板块 |
| 许愿树 | 发布祝福/查看/互动 | 活动配置/内容审核 | 管理端配置节日活动 |
| 礼物打赏 | 发送礼物/充值 | 礼物配置/打赏记录 | 管理端配置礼物 |
| 消息通知 | 接收推送/消息列表 | 系统消息/推送管理 | 管理端发送通知 |
| 个人中心 | 资料编辑/作品管理 | 用户详情/内容审核 | 管理端可修改资料 |
2.2 数据流向图
┌─────────────────────────────────────────────────────────────────────────┐
│ 数据流向示意图 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 (APP) 后端服务 管理端 (Admin) │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 用户 │ ──── 请求 ────▶ │ API │ ◀── 请求 ─── │ 运营 │ │
│ │ 操作 │ ◀─── 响应 ──── │ 服务 │ ─── 响应 ──▶ │ 操作 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌─────────┐ │ │
│ │ │ 数据库 │ │ │
│ │ │ + 缓存 │ │ │
│ │ └─────────┘ │ │
│ │ │ │ │
│ │ ┌───────────────────┼───────────────────┐ │ │
│ │ ▼ ▼ ▼ │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐│ │
│ └───▶│WebSocket│◀──────▶│ 消息队列│◀───────▶│ 推送 │◀┘ │
│ │ 实时 │ │ (Redis) │ │ 服务 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
三、核心交互流程设计
3.1 用户认证流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 用户认证交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 发送验证码请求 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 2. 生成验证码 │ │
│ │ │ 存入Redis(5分钟) │ │
│ │ ◀───────────────────────── │ │ │
│ │ 3. 返回发送成功 │ │ │
│ │ │ │ │
│ │ 4. 提交登录/注册 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 5. 验证码校验 │ │
│ │ │ 用户状态检查 │ │
│ │ │ 生成JWT Token │ │
│ │ ◀───────────────────────── │ │ │
│ │ 6. 返回Token+用户信息 │ │ │
│ │ │ │ │
│ │ 7. 存储Token │ │ │
│ │ 进入首页 │ │ │
│ │ │ │ │
│ │ │ 8. 记录登录日志 ──────────▶ │ │
│ │ │ │ 9. 可查│
│ │ │ │ 看 │
│ │ │ │ 日志 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
3.2 直播观看交互流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 直播观看交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 进入直播间 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 2. 获取房间信息 │ │
│ │ │ 获取播放地址 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 3. 返回房间详情 │ │ │
│ │ │ │ │
│ │ 4. 建立WebSocket连接 │ │ │
│ │ ═══════════════════════════│ │ │
│ │ │ 5. 加入房间 │ │
│ │ │ 更新在线人数 │ │
│ │ │ │ │
│ │ 6. 发送弹幕 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 7. 敏感词过滤 │ │
│ │ │ 广播给房间用户 │ │
│ │ ◀═══════════════════════════│ │ │
│ │ 8. 接收弹幕推送 │ │ │
│ │ │ │ │
│ │ │ ◀─────── │ 9. 关闭│
│ │ │ 10. 强制关闭直播 │ 直播 │
│ │ ◀═══════════════════════════│ │ │
│ │ 11. 收到关闭通知 │ │ │
│ │ 退出直播间 │ │ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
3.3 礼物打赏交互流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 礼物打赏交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 获取礼物列表 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 2. 查询礼物配置 │ │
│ │ ◀───────────────────────── │ (从Redis缓存) │ │
│ │ 3. 返回礼物列表 │ │ │
│ │ │ │ │
│ │ 4. 发送礼物 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 5. 校验余额 │ │
│ │ │ 扣除金币 │ │
│ │ │ 增加主播收益 │ │
│ │ │ 记录打赏流水 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 6. 返回发送成功 │ │ │
│ │ │ │ │
│ │ │ 7. 广播礼物特效 │ │
│ │ ◀═══════════════════════════│ (WebSocket) │ │
│ │ 8. 显示礼物动画 │ │ │
│ │ │ │ │
│ │ │ 9. 记录打赏日志 ──────────▶ │ │
│ │ │ │ 10.可查│
│ │ │ │ 看 │
│ │ │ │ 记录 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
四、缘池重新设计方案（多板块交流社区）
4.1 设计理念
将原有的"附近用户匹配"功能升级为多板块交流社区，打造一个集内容分享、兴趣交流、社交互动于一体的综合社区平台。
4.2 功能架构
┌─────────────────────────────────────────────────────────────────────────┐
│ 缘池 - 多板块交流社区 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 │ │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────────────┐ │ │
│ │ │ 搜索 │ │ 发布 │ │ 通知 │ │ 消息 │ │ 个人中心 │ │ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 板块分类标签 │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │推荐│ │热门│ │游戏│ │音乐│ │美食│ │旅行│ │情感│ │更多│ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 内容流区域 │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ 帖子卡片 │ │ │
│ │ │ ┌──────┐ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ 头像 │ │ 用户名 · 板块标签 · 发布时间 │ │ │ │
│ │ │ └──────┘ └─────────────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────────────────────────┐│ │ │
│ │ │ │ 帖子内容文字... ││ │ │
│ │ │ └─────────────────────────────────────────────────────┘│ │ │
│ │ │ ┌─────────────────────────────────────────────────────┐│ │ │
│ │ │ │ 图片/视频区域 (九宫格/单图/视频) ││ │ │
│ │ │ └─────────────────────────────────────────────────────┘│ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────────────────┐│ │ │
│ │ │ │ 👍 点赞│ │ 💬 评论│ │ ↗ 分享│ │ ⭐ 收藏 ││ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────────────────┘│ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ 更多帖子卡片... │ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 悬浮发布按钮 │ │
│ │ ┌───┐ │ │
│ │ │ + │ │ │
│ │ └───┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
4.3 板块分类设计
| 板块ID | 板块名称 | 图标 | 描述 | 排序 |
|---|---|---|---|---|
| 1 | 推荐 | 🔥 | 算法推荐热门内容 | 1 |
| 2 | 热门 | 📈 | 24小时热度排行 | 2 |
| 3 | 游戏 | 🎮 | 游戏攻略、组队、分享 | 3 |
| 4 | 音乐 | 🎵 | 音乐分享、翻唱、原创 | 4 |
| 5 | 美食 | 🍜 | 美食探店、食谱分享 | 5 |
| 6 | 旅行 | ✈️ | 旅行攻略、风景分享 | 6 |
| 7 | 情感 | 💕 | 情感交流、心情分享 | 7 |
| 8 | 穿搭 | 👗 | 穿搭分享、时尚潮流 | 8 |
| 9 | 宠物 | 🐱 | 萌宠分享、养宠经验 | 9 |
| 10 | 运动 | ⚽ | 运动健身、赛事讨论 | 10 |
| 11 | 学习 | 📚 | 学习交流、知识分享 | 11 |
| 12 | 直播 | 📺 | 直播预告、主播互动 | 12 |
4.4 移动端页面设计
4.4.1 社区首页 (CommunityActivity)
// 页面结构
CommunityActivity
├── TopBar (顶部栏)
│ ├── SearchButton (搜索按钮)
│ ├── TitleText (缘池)
│ ├── NotificationButton (通知)
│ └── PublishButton (发布)
├── CategoryTabs (板块标签)
│ └── TabLayout (可滑动标签)
├── ContentList (内容列表)
│ └── RecyclerView (瀑布流/列表)
│ └── PostCardAdapter (帖子卡片适配器)
├── FloatingActionButton (悬浮发布按钮)
└── BottomNavigation (底部导航)
4.4.2 帖子详情页 (PostDetailActivity)
// 页面结构
PostDetailActivity
├── TopBar (顶部栏)
│ ├── BackButton (返回)
│ ├── TitleText (帖子详情)
│ ├── ShareButton (分享)
│ └── MoreButton (更多)
├── PostContent (帖子内容)
│ ├── UserInfo (用户信息)
│ ├── ContentText (文字内容)
│ ├── MediaArea (图片/视频)
│ ├── LocationTag (位置标签)
│ └── TimeInfo (发布时间)
├── ActionBar (操作栏)
│ ├── LikeButton (点赞)
│ ├── CommentButton (评论)
│ ├── ShareButton (分享)
│ └── FavoriteButton (收藏)
├── CommentList (评论列表)
│ └── RecyclerView
│ └── CommentAdapter
└── CommentInput (评论输入框)
├── EditText (输入框)
├── EmojiButton (表情)
└── SendButton (发送)
4.4.3 发布帖子页 (PublishPostActivity)
// 页面结构
PublishPostActivity
├── TopBar (顶部栏)
│ ├── CloseButton (关闭)
│ ├── TitleText (发布动态)
│ └── PublishButton (发布)
├── ContentInput (内容输入)
│ └── EditText (多行文本)
├── MediaPicker (媒体选择)
│ ├── ImageGrid (图片网格)
│ ├── AddImageButton (添加图片)
│ └── VideoPreview (视频预览)
├── CategorySelector (板块选择)
│ └── ChipGroup (标签组)
├── LocationPicker (位置选择)
│ └── LocationText (位置文本)
├── TopicInput (话题输入)
│ └── ChipGroup (话题标签)
└── PrivacySelector (可见范围)
└── RadioGroup (公开/好友可见/私密)
4.5 交互流程设计
4.5.1 发布帖子流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 发布帖子交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 点击发布按钮 │ │ │
│ │ 打开发布页面 │ │ │
│ │ │ │ │
│ │ 2. 选择图片/视频 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 3. 上传文件到OSS │ │
│ │ ◀───────────────────────── │ 返回文件URL │ │
│ │ 4. 显示上传进度 │ │ │
│ │ │ │ │
│ │ 5. 填写内容 │ │ │
│ │ 选择板块 │ │ │
│ │ 添加话题 │ │ │
│ │ 选择位置 │ │ │
│ │ │ │ │
│ │ 6. 点击发布 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 7. 内容审核 │ │
│ │ │ 敏感词过滤 │ │
│ │ │ 图片审核 │ │
│ │ │ 保存到数据库 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 8. 发布成功 │ │ │
│ │ 跳转到帖子详情 │ │ │
│ │ │ │ │
│ │ │ 9. 推送给关注者 │ │
│ │ │ 更新热度排行 │ │
│ │ │ │ │
│ │ │ 10. 记录发布日志 ─────────▶ │ │
│ │ │ │ 11.可审│
│ │ │ │ 核 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
4.5.2 浏览帖子流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 浏览帖子交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 进入缘池页面 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 2. 获取板块列表 │ │
│ │ │ 获取推荐帖子 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 3. 显示板块和帖子 │ │ │
│ │ │ │ │
│ │ 4. 切换板块 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 5. 获取板块帖子 │ │
│ │ │ (分页加载) │ │
│ │ ◀───────────────────────── │ │ │
│ │ 6. 显示板块帖子 │ │ │
│ │ │ │ │
│ │ 7. 下拉刷新 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 8. 获取最新帖子 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 9. 更新列表 │ │ │
│ │ │ │ │
│ │ 10. 上拉加载更多 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 11. 获取下一页 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 12. 追加到列表 │ │ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
4.6 缘池API接口设计
4.6.1 移动端API (前台)
┌─────────────────────────────────────────────────────────────────────────┐
│ 缘池社区 - 移动端API接口 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 板块管理 │
│ ├── GET /api/front/community/categories # 获取板块列表 │
│ └── GET /api/front/community/categories/{id} # 获取板块详情 │
│ │
│ 帖子管理 │
│ ├── GET /api/front/community/posts # 获取帖子列表 │
│ │ ?categoryId={id}&page={page}&pageSize={size}&sort={sort} │
│ ├── GET /api/front/community/posts/{id} # 获取帖子详情 │
│ ├── POST /api/front/community/posts # 发布帖子 │
│ ├── PUT /api/front/community/posts/{id} # 编辑帖子 │
│ └── DELETE /api/front/community/posts/{id} # 删除帖子 │
│ │
│ 互动功能 │
│ ├── POST /api/front/community/posts/{id}/like # 点赞帖子 │
│ ├── DELETE /api/front/community/posts/{id}/like # 取消点赞 │
│ ├── POST /api/front/community/posts/{id}/favorite # 收藏帖子 │
│ ├── DELETE /api/front/community/posts/{id}/favorite # 取消收藏 │
│ └── POST /api/front/community/posts/{id}/share # 分享帖子 │
│ │
│ 评论功能 │
│ ├── GET /api/front/community/posts/{id}/comments # 获取评论列表 │
│ ├── POST /api/front/community/posts/{id}/comments # 发表评论 │
│ ├── POST /api/front/community/comments/{id}/reply # 回复评论 │
│ ├── DELETE /api/front/community/comments/{id} # 删除评论 │
│ └── POST /api/front/community/comments/{id}/like # 点赞评论 │
│ │
│ 搜索功能 │
│ ├── GET /api/front/community/search # 搜索帖子 │
│ │ ?keyword={keyword}&categoryId={id}&page={page} │
│ └── GET /api/front/community/topics # 获取热门话题 │
│ │
│ 用户相关 │
│ ├── GET /api/front/community/users/{id}/posts # 获取用户帖子 │
│ ├── GET /api/front/community/my/posts # 我的帖子 │
│ ├── GET /api/front/community/my/favorites # 我的收藏 │
│ └── GET /api/front/community/my/likes # 我的点赞 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
4.6.2 管理端API (后台)
┌─────────────────────────────────────────────────────────────────────────┐
│ 缘池社区 - 管理端API接口 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 板块管理 │
│ ├── GET /api/admin/community/categories # 获取板块列表 │
│ ├── POST /api/admin/community/categories # 创建板块 │
│ ├── PUT /api/admin/community/categories/{id} # 编辑板块 │
│ ├── DELETE /api/admin/community/categories/{id} # 删除板块 │
│ └── PUT /api/admin/community/categories/sort # 板块排序 │
│ │
│ 帖子审核 │
│ ├── GET /api/admin/community/posts # 获取帖子列表 │
│ │ ?status={status}&categoryId={id}&page={page} │
│ ├── GET /api/admin/community/posts/{id} # 获取帖子详情 │
│ ├── PUT /api/admin/community/posts/{id}/audit # 审核帖子 │
│ │ body: {status: "approved"|"rejected", reason: ""} │
│ ├── PUT /api/admin/community/posts/{id}/top # 置顶帖子 │
│ ├── PUT /api/admin/community/posts/{id}/recommend # 推荐帖子 │
│ └── DELETE /api/admin/community/posts/{id} # 删除帖子 │
│ │
│ 评论管理 │
│ ├── GET /api/admin/community/comments # 获取评论列表 │
│ ├── PUT /api/admin/community/comments/{id}/audit # 审核评论 │
│ └── DELETE /api/admin/community/comments/{id} # 删除评论 │
│ │
│ 话题管理 │
│ ├── GET /api/admin/community/topics # 获取话题列表 │
│ ├── POST /api/admin/community/topics # 创建话题 │
│ ├── PUT /api/admin/community/topics/{id} # 编辑话题 │
│ └── DELETE /api/admin/community/topics/{id} # 删除话题 │
│ │
│ 数据统计 │
│ ├── GET /api/admin/community/statistics # 社区统计 │
│ ├── GET /api/admin/community/statistics/posts # 帖子统计 │
│ └── GET /api/admin/community/statistics/users # 用户活跃统计 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
4.7 数据模型设计
4.7.1 帖子数据模型
// Post (帖子)
{
"id": 10001,
"userId": 1001,
"userInfo": {
"id": 1001,
"nickname": "小明",
"avatar": "https://xxx/avatar.jpg",
"level": 5,
"isVip": true
},
"categoryId": 3,
"categoryName": "游戏",
"content": "今天吃鸡成功！分享一下我的游戏心得...",
"images": [
"https://xxx/img1.jpg",
"https://xxx/img2.jpg"
],
"video": null,
"location": {
"name": "广西南宁",
"latitude": 22.82,
"longitude": 108.32
},
"topics": ["#吃鸡", "#游戏攻略"],
"visibility": "public",
"likeCount": 128,
"commentCount": 32,
"shareCount": 15,
"favoriteCount": 45,
"viewCount": 1024,
"isLiked": false,
"isFavorited": false,
"isTop": false,
"isRecommend": true,
"status": "approved",
"createdAt": "2024-12-29T10:30:00Z",
"updatedAt": "2024-12-29T10:30:00Z"
}
4.7.2 评论数据模型
// Comment (评论)
{
"id": 20001,
"postId": 10001,
"userId": 1002,
"userInfo": {
"id": 1002,
"nickname": "小红",
"avatar": "https://xxx/avatar2.jpg"
},
"content": "写得太好了，学到了！",
"parentId": null,
"replyTo": null,
"likeCount": 15,
"isLiked": false,
"status": "approved",
"createdAt": "2024-12-29T11:00:00Z",
"replies": [
{
"id": 20002,
"userId": 1001,
"userInfo": {...},
"content": "谢谢支持！",
"parentId": 20001,
"replyTo": {
"id": 1002,
"nickname": "小红"
},
"createdAt": "2024-12-29T11:05:00Z"
}
]
}
五、许愿树重新设计方案（节日愿望祝福留言板）
5.1 设计理念
将许愿树打造为节日愿望祝福留言板，结合节日氛围，让用户可以发布祝福、许愿、互动，营造温馨的社区氛围。
5.2 功能架构
┌─────────────────────────────────────────────────────────────────────────┐
│ 许愿树 - 节日愿望祝福留言板 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 │ │
│ │ ┌────────────────────────────────────────────────────────────┐ │ │
│ │ │ 🌳 许愿树 🔔 通知 🔍 搜索 │ │ │
│ │ └────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 节日活动Banner │ │
│ │ ┌────────────────────────────────────────────────────────────┐ │ │
│ │ │ 🎄 元旦许愿活动 │ │ │
│ │ │ 许下新年愿望，赢取丰厚奖励！ │ │ │
│ │ │ 活动时间：2024.12.31 - 2025.01.03 │ │ │
│ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ 倒计时: 02:15:30:45 │ │ │ │
│ │ │ └──────────────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 节日分类标签 │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │全部│ │元旦│ │春节│ │情人│ │生日│ │祝福│ │许愿│ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 许愿树3D展示区 │ │
│ │ ┌────────────────────────────────────────────────────────────┐ │ │
│ │ │ 🌳 │ │ │
│ │ │ /│\ │ │ │
│ │ │ / │ \ │ │ │
│ │ │ 🎀 / │ \ 🎁 │ │ │
│ │ │ / │ \ │ │ │
│ │ │ 🌟 / │ \ ⭐ │ │ │
│ │ │ / │ \ │ │ │
│ │ │ 💝 / │ \ 🎊 │ │ │
│ │ │ ───────────────── │ │ │
│ │ │ │ │ │
│ │ │ 点击树上的装饰物查看祝福 │ │ │
│ │ └────────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 祝福留言瀑布流 │ │
│ │ ┌─────────────────────────────────────────────────────────┐ │ │
│ │ │ 祝福卡片 │ │ │
│ │ │ ┌──────┐ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ 头像 │ │ 用户名 · 元旦祝福 · 1小时前 │ │ │ │
│ │ │ └──────┘ └─────────────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────────────────────────────────────────┐│ │ │
│ │ │ │ 🎉 新年快乐！愿新的一年万事如意，心想事成！ ││ │ │
│ │ │ └─────────────────────────────────────────────────────┘│ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ ❤️ 128 │ │ 💬 32 │ │ 🎁 送礼│ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 发布祝福按钮 │ │
│ │ ┌─────────────────┐ │ │
│ │ │ ✨ 发布祝福 │ │ │
│ │ └─────────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
5.3 节日活动分类
| 活动ID | 节日名称 | 图标 | 活动时间 | 主题色 |
|---|---|---|---|---|
| 1 | 元旦 | 🎉 | 12.31-01.03 | #FF6B6B |
| 2 | 春节 | 🧧 | 农历除夕-正月十五 | #E74C3C |
| 3 | 情人节 | 💕 | 02.13-02.15 | #FF69B4 |
| 4 | 妇女节 | 🌸 | 03.07-03.09 | #FFB6C1 |
| 5 | 清明节 | 🌿 | 清明前后3天 | #90EE90 |
| 6 | 劳动节 | 💪 | 04.30-05.03 | #FFA500 |
| 7 | 母亲节 | 🌹 | 5月第二个周日 | #FF1493 |
| 8 | 儿童节 | 🎈 | 05.31-06.02 | #87CEEB |
| 9 | 父亲节 | 👔 | 6月第三个周日 | #4169E1 |
| 10 | 端午节 | 🐲 | 端午前后3天 | #228B22 |
| 11 | 七夕 | 🌙 | 农历七月初七 | #9370DB |
| 12 | 中秋节 | 🥮 | 中秋前后3天 | #FFD700 |
| 13 | 国庆节 | 🇨🇳 | 09.30-10.07 | #FF0000 |
| 14 | 圣诞节 | 🎄 | 12.24-12.26 | #228B22 |
| 15 | 生日祝福 | 🎂 | 全年 | #FF69B4 |
| 16 | 日常祝福 | ✨ | 全年 | #9B59B6 |
5.4 移动端页面设计
5.4.1 许愿树首页 (WishTreeActivity)
// 页面结构
WishTreeActivity
├── TopBar (顶部栏)
│ ├── TitleImage (许愿树Logo)
│ ├── NotificationButton (通知)
│ └── SearchButton (搜索)
├── ActivityBanner (活动Banner)
│ ├── ActivityTitle (活动标题)
│ ├── ActivityDesc (活动描述)
│ ├── CountdownTimer (倒计时)
│ └── JoinButton (参与按钮)
├── CategoryTabs (节日分类标签)
│ └── TabLayout (可滑动标签)
├── WishTreeView (许愿树3D展示)
│ ├── TreeImage (树图片)
│ ├── DecorationItems (装饰物)
│ │ └── 点击查看祝福详情
│ └── AnimationEffect (动画效果)
├── WishList (祝福列表)
│ └── RecyclerView (瀑布流)
│ └── WishCardAdapter (祝福卡片适配器)
├── PublishButton (发布祝福按钮)
└── BottomNavigation (底部导航)
5.4.2 发布祝福页 (PublishWishActivity)
// 页面结构
PublishWishActivity
├── TopBar (顶部栏)
│ ├── CloseButton (关闭)
│ ├── TitleText (发布祝福)
│ └── PublishButton (发布)
├── WishTypeSelector (祝福类型选择)
│ ├── WishType (许愿)
│ ├── BlessingType (祝福)
│ └── ThankType (感谢)
├── FestivalSelector (节日选择)
│ └── ChipGroup (节日标签)
├── ContentInput (内容输入)
│ ├── EditText (祝福文字)
│ └── CharacterCount (字数统计)
├── BackgroundSelector (背景选择)
│ └── HorizontalScrollView (背景模板)
├── DecorationSelector (装饰选择)
│ └── GridView (装饰图标)
├── PrivacySelector (可见范围)
│ └── RadioGroup (公开/好友/私密)
└── PreviewArea (预览区域)
└── WishCardPreview (祝福卡片预览)
5.4.3 祝福详情页 (WishDetailActivity)
// 页面结构
WishDetailActivity
├── TopBar (顶部栏)
│ ├── BackButton (返回)
│ ├── TitleText (祝福详情)
│ ├── ShareButton (分享)
│ └── MoreButton (更多)
├── WishCard (祝福卡片)
│ ├── Background (背景)
│ ├── Decorations (装饰)
│ ├── UserInfo (用户信息)
│ ├── WishContent (祝福内容)
│ ├── FestivalTag (节日标签)
│ └── TimeInfo (发布时间)
├── ActionBar (操作栏)
│ ├── LikeButton (点赞/送心)
│ ├── CommentButton (评论)
│ ├── GiftButton (送礼物)
│ └── ShareButton (分享)
├── CommentList (评论列表)
│ └── RecyclerView
│ └── CommentAdapter
└── CommentInput (评论输入框)
├── EditText (输入框)
├── EmojiButton (表情)
└── SendButton (发送)
5.5 交互流程设计
5.5.1 发布祝福流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 发布祝福交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 移动端 后端 管理端 │
│ │ │ │ │
│ │ 1. 点击发布祝福 │ │ │
│ │ 打开发布页面 │ │ │
│ │ │ │ │
│ │ 2. 获取节日活动列表 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 3. 返回当前活动 │ │
│ │ ◀───────────────────────── │ 和节日列表 │ │
│ │ 4. 显示节日选项 │ │ │
│ │ │ │ │
│ │ 5. 选择祝福类型 │ │ │
│ │ 选择节日 │ │ │
│ │ 输入祝福内容 │ │ │
│ │ 选择背景和装饰 │ │ │
│ │ │ │ │
│ │ 6. 点击发布 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 7. 内容审核 │ │
│ │ │ 敏感词过滤 │ │
│ │ │ 保存到数据库 │ │
│ │ │ 挂到许愿树上 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 8. 发布成功 │ │ │
│ │ 显示祝福动画 │ │ │
│ │ │ │ │
│ │ │ 9. 更新许愿树装饰 │ │
│ │ │ 推送给关注者 │ │
│ │ │ │ │
│ │ │ 10. 记录发布日志 ─────────▶ │ │
│ │ │ │ 11.可审│
│ │ │ │ 核 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
5.5.2 节日活动流程
┌─────────────────────────────────────────────────────────────────────────┐
│ 节日活动交互流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 管理端 后端 移动端 │
│ │ │ │ │
│ │ 1. 创建节日活动 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 2. 保存活动配置 │ │
│ │ │ 设置活动时间 │ │
│ │ │ 配置奖励规则 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 3. 创建成功 │ │ │
│ │ │ │ │
│ │ 4. 配置活动Banner │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 5. 保存Banner配置 │ │
│ │ │ │ │
│ │ │ 6. 活动开始时 │ │
│ │ │ 推送通知 ──────────────▶ │ │
│ │ │ │ 7. 收到│
│ │ │ │ 通知 │
│ │ │ │ │
│ │ │ ◀─────── │ 8. 进入│
│ │ │ 9. 返回活动信息 │ 许愿 │
│ │ │ ──────────────────────────▶ │ 树 │
│ │ │ │ │
│ │ │ ◀─────── │ 10.参与│
│ │ │ 11. 记录参与 │ 活动 │
│ │ │ 发放奖励 │ │
│ │ │ ──────────────────────────▶ │ │
│ │ │ │ 12.收到│
│ │ │ │ 奖励 │
│ │ │ │ │
│ │ 13. 查看活动数据 │ │ │
│ │ ─────────────────────────▶ │ │ │
│ │ │ 14. 返回统计数据 │ │
│ │ ◀───────────────────────── │ │ │
│ │ 15. 显示活动报表 │ │ │
│ │
└─────────────────────────────────────────────────────────────────────────┘
5.6 许愿树API接口设计
5.6.1 移动端API (前台)
┌─────────────────────────────────────────────────────────────────────────┐
│ 许愿树 - 移动端API接口 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 活动管理 │
│ ├── GET /api/front/wishtree/activities # 获取活动列表 │
│ ├── GET /api/front/wishtree/activities/current # 获取当前活动 │
│ └── GET /api/front/wishtree/activities/{id} # 获取活动详情 │
│ │
│ 节日分类 │
│ ├── GET /api/front/wishtree/festivals # 获取节日列表 │
│ └── GET /api/front/wishtree/festivals/{id} # 获取节日详情 │
│ │
│ 祝福管理 │
│ ├── GET /api/front/wishtree/wishes # 获取祝福列表 │
│ │ ?festivalId={id}&type={type}&page={page}&pageSize={size} │
│ ├── GET /api/front/wishtree/wishes/{id} # 获取祝福详情 │
│ ├── POST /api/front/wishtree/wishes # 发布祝福 │
│ ├── PUT /api/front/wishtree/wishes/{id} # 编辑祝福 │
│ └── DELETE /api/front/wishtree/wishes/{id} # 删除祝福 │
│ │
│ 互动功能 │
│ ├── POST /api/front/wishtree/wishes/{id}/like # 点赞祝福 │
│ ├── DELETE /api/front/wishtree/wishes/{id}/like # 取消点赞 │
│ ├── POST /api/front/wishtree/wishes/{id}/gift # 送礼物 │
│ └── POST /api/front/wishtree/wishes/{id}/share # 分享祝福 │
│ │
│ 评论功能 │
│ ├── GET /api/front/wishtree/wishes/{id}/comments # 获取评论列表 │
│ ├── POST /api/front/wishtree/wishes/{id}/comments # 发表评论 │
│ └── DELETE /api/front/wishtree/comments/{id} # 删除评论 │
│ │
│ 许愿树展示 │
│ ├── GET /api/front/wishtree/tree # 获取许愿树数据 │
│ │ 返回树上的装饰物和祝福位置 │
│ └── GET /api/front/wishtree/tree/decorations # 获取装饰物列表 │
│ │
│ 用户相关 │
│ ├── GET /api/front/wishtree/my/wishes # 我的祝福 │
│ ├── GET /api/front/wishtree/my/received # 收到的祝福 │
│ └── GET /api/front/wishtree/my/gifts # 收到的礼物 │
│ │
│ 背景和装饰 │
│ ├── GET /api/front/wishtree/backgrounds # 获取背景模板 │
│ └── GET /api/front/wishtree/decorations # 获取装饰素材 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
5.6.2 管理端API (后台)
┌─────────────────────────────────────────────────────────────────────────┐
│ 许愿树 - 管理端API接口 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 活动管理 │
│ ├── GET /api/admin/wishtree/activities # 获取活动列表 │
│ ├── POST /api/admin/wishtree/activities # 创建活动 │
│ ├── PUT /api/admin/wishtree/activities/{id} # 编辑活动 │
│ ├── DELETE /api/admin/wishtree/activities/{id} # 删除活动 │
│ ├── PUT /api/admin/wishtree/activities/{id}/status # 活动状态 │
│ └── GET /api/admin/wishtree/activities/{id}/stats # 活动统计 │
│ │
│ 节日管理 │
│ ├── GET /api/admin/wishtree/festivals # 获取节日列表 │
│ ├── POST /api/admin/wishtree/festivals # 创建节日 │
│ ├── PUT /api/admin/wishtree/festivals/{id} # 编辑节日 │
│ └── DELETE /api/admin/wishtree/festivals/{id} # 删除节日 │
│ │
│ 祝福审核 │
│ ├── GET /api/admin/wishtree/wishes # 获取祝福列表 │
│ │ ?status={status}&festivalId={id}&page={page} │
│ ├── GET /api/admin/wishtree/wishes/{id} # 获取祝福详情 │
│ ├── PUT /api/admin/wishtree/wishes/{id}/audit # 审核祝福 │
│ │ body: {status: "approved"|"rejected", reason: ""} │
│ ├── PUT /api/admin/wishtree/wishes/{id}/recommend # 推荐祝福 │
│ └── DELETE /api/admin/wishtree/wishes/{id} # 删除祝福 │
│ │
│ 评论管理 │
│ ├── GET /api/admin/wishtree/comments # 获取评论列表 │
│ ├── PUT /api/admin/wishtree/comments/{id}/audit # 审核评论 │
│ └── DELETE /api/admin/wishtree/comments/{id} # 删除评论 │
│ │
│ 素材管理 │
│ ├── GET /api/admin/wishtree/backgrounds # 获取背景列表 │
│ ├── POST /api/admin/wishtree/backgrounds # 上传背景 │
│ ├── DELETE /api/admin/wishtree/backgrounds/{id} # 删除背景 │
│ ├── GET /api/admin/wishtree/decorations # 获取装饰列表 │
│ ├── POST /api/admin/wishtree/decorations # 上传装饰 │
│ └── DELETE /api/admin/wishtree/decorations/{id} # 删除装饰 │
│ │
│ 数据统计 │
│ ├── GET /api/admin/wishtree/statistics # 许愿树统计 │
│ ├── GET /api/admin/wishtree/statistics/wishes # 祝福统计 │
│ └── GET /api/admin/wishtree/statistics/users # 用户参与统计 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
5.7 数据模型设计
5.7.1 祝福数据模型
// Wish (祝福)
{
"id": 30001,
"userId": 1001,
"userInfo": {
"id": 1001,
"nickname": "小明",
"avatar": "https://xxx/avatar.jpg",
"level": 5
},
"type": "blessing", // wish(许愿), blessing(祝福), thank(感谢)
"festivalId": 1,
"festivalName": "元旦",
"activityId": 100,
"content": "🎉 新年快乐！愿新的一年万事如意，心想事成！",
"backgroundId": 5,
"backgroundUrl": "https://xxx/bg5.jpg",
"decorations": [
{"id": 1, "type": "star", "position": {"x": 10, "y": 20}},
{"id": 2, "type": "ribbon", "position": {"x": 80, "y": 30}}
],
"treePosition": {
"x": 150,
"y": 200,
"decorationType": "gift"
},
"visibility": "public",
"likeCount": 256,
"commentCount": 48,
"giftCount": 15,
"shareCount": 32,
"isLiked": false,
"isRecommend": true,
"status": "approved",
"createdAt": "2024-12-29T10:30:00Z"
}
5.7.2 活动数据模型
// Activity (活动)
{
"id": 100,
"name": "元旦许愿活动",
"description": "许下新年愿望，赢取丰厚奖励！",
"festivalId": 1,
"bannerUrl": "https://xxx/banner.jpg",
"startTime": "2024-12-31T00:00:00Z",
"endTime": "2025-01-03T23:59:59Z",
"rules": [
"每人每天可发布3条祝福",
"获赞最多的祝福可获得奖励",
"分享活动可获得额外金币"
],
"rewards": [
{"rank": 1, "prize": "1000金币", "icon": "🥇"},
{"rank": 2, "prize": "500金币", "icon": "🥈"},
{"rank": 3, "prize": "300金币", "icon": "🥉"}
],
"participantCount": 12580,
"wishCount": 35680,
"status": "active",
"createdAt": "2024-12-25T10:00:00Z"
}
六、API接口设计规范
6.1 接口规范总览
6.1.1 URL命名规范
┌─────────────────────────────────────────────────────────────────────────┐
│ API URL命名规范 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 基础路径 │
│ ├── 移动端API: /api/front/... │
│ └── 管理端API: /api/admin/... │
│ │
│ 资源命名 │
│ ├── 使用复数名词: /users, /posts, /wishes │
│ ├── 使用小写字母: /community/posts │
│ ├── 使用连字符: /wish-tree (不推荐), /wishtree (推荐) │
│ └── 避免动词: /getUsers (错误), /users (正确) │
│ │
│ HTTP方法 │
│ ├── GET - 查询资源 │
│ ├── POST - 创建资源 │
│ ├── PUT - 更新资源 (全量) │
│ ├── PATCH - 更新资源 (部分) │
│ └── DELETE - 删除资源 │
│ │
│ 示例 │
│ ├── GET /api/front/community/posts # 获取帖子列表 │
│ ├── GET /api/front/community/posts/123 # 获取帖子详情 │
│ ├── POST /api/front/community/posts # 创建帖子 │
│ ├── PUT /api/front/community/posts/123 # 更新帖子 │
│ ├── DELETE /api/front/community/posts/123 # 删除帖子 │
│ └── POST /api/front/community/posts/123/like # 点赞帖子 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
6.1.2 响应格式规范
// 成功响应
{
"code": 200,
"message": "success",
"data": {
// 业务数据
}
}
// 分页响应
{
"code": 200,
"message": "success",
"data": {
"list": [...],
"total": 100,
"page": 1,
"pageSize": 20,
"totalPages": 5
}
}
// 错误响应
{
"code": 400,
"message": "参数错误",
"data": null,
"errors": [
{"field": "content", "message": "内容不能为空"}
]
}
6.1.3 错误码规范
| 错误码 | 说明 | 场景 |
|---|---|---|
| 200 | 成功 | 请求成功 |
| 400 | 参数错误 | 请求参数不合法 |
| 401 | 未授权 | 未登录或Token过期 |
| 403 | 禁止访问 | 无权限访问 |
| 404 | 资源不存在 | 请求的资源不存在 |
| 409 | 冲突 | 资源已存在 |
| 422 | 业务错误 | 业务逻辑错误 |
| 429 | 请求过多 | 触发限流 |
| 500 | 服务器错误 | 服务器内部错误 |
6.2 认证授权规范
┌─────────────────────────────────────────────────────────────────────────┐
│ 认证授权流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ Token格式 (JWT) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ Header: Authorization: Bearer <token> │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ Token结构 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ { │ │
│ │ "userId": 1001, │ │
│ │ "nickname": "小明", │ │
│ │ "role": "user", │ │
│ │ "exp": 1735488000, │ │
│ │ "iat": 1735401600 │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ 权限级别 │
│ ├── public - 无需登录 (直播列表、帖子列表) │
│ ├── user - 需要登录 (发帖、评论、点赞) │
│ ├── vip - VIP用户 (特殊功能) │
│ └── admin - 管理员 (后台管理) │
│ │
│ Token刷新 │
│ ├── Access Token: 有效期2小时 │
│ ├── Refresh Token: 有效期7天 │
│ └── 刷新接口: POST /api/front/auth/refresh │
│ │
└─────────────────────────────────────────────────────────────────────────┘
七、数据库设计
7.1 缘池社区数据表
-- 板块分类表
CREATE TABLE `community_category` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '板块ID',
`name` varchar(50) NOT NULL COMMENT '板块名称',
`icon` varchar(50) DEFAULT NULL COMMENT '板块图标',
`description` varchar(200) DEFAULT NULL COMMENT '板块描述',
`sort` int DEFAULT 0 COMMENT '排序',
`status` tinyint DEFAULT 1 COMMENT '状态: 0-禁用, 1-启用',
`post_count` int DEFAULT 0 COMMENT '帖子数量',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='社区板块表';
-- 帖子表
CREATE TABLE `community_post` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '帖子ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`category_id` bigint NOT NULL COMMENT '板块ID',
`content` text NOT NULL COMMENT '帖子内容',
`images` json DEFAULT NULL COMMENT '图片列表',
`video` varchar(500) DEFAULT NULL COMMENT '视频URL',
`location` json DEFAULT NULL COMMENT '位置信息',
`topics` json DEFAULT NULL COMMENT '话题标签',
`visibility` varchar(20) DEFAULT 'public' COMMENT '可见范围',
`like_count` int DEFAULT 0 COMMENT '点赞数',
`comment_count` int DEFAULT 0 COMMENT '评论数',
`share_count` int DEFAULT 0 COMMENT '分享数',
`favorite_count` int DEFAULT 0 COMMENT '收藏数',
`view_count` int DEFAULT 0 COMMENT '浏览数',
`is_top` tinyint DEFAULT 0 COMMENT '是否置顶',
`is_recommend` tinyint DEFAULT 0 COMMENT '是否推荐',
`status` varchar(20) DEFAULT 'pending' COMMENT '状态: pending/approved/rejected',
`reject_reason` varchar(200) DEFAULT NULL COMMENT '拒绝原因',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_category_id` (`category_id`),
KEY `idx_status` (`status`),
KEY `idx_created_at` (`created_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='社区帖子表';
-- 帖子评论表
CREATE TABLE `community_comment` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '评论ID',
`post_id` bigint NOT NULL COMMENT '帖子ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`content` varchar(500) NOT NULL COMMENT '评论内容',
`parent_id` bigint DEFAULT NULL COMMENT '父评论ID',
`reply_to_user_id` bigint DEFAULT NULL COMMENT '回复用户ID',
`like_count` int DEFAULT 0 COMMENT '点赞数',
`status` varchar(20) DEFAULT 'approved' COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_post_id` (`post_id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_parent_id` (`parent_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='帖子评论表';
-- 帖子点赞表
CREATE TABLE `community_post_like` (
`id` bigint NOT NULL AUTO_INCREMENT,
`post_id` bigint NOT NULL COMMENT '帖子ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_post_user` (`post_id`, `user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='帖子点赞表';
-- 帖子收藏表
CREATE TABLE `community_post_favorite` (
`id` bigint NOT NULL AUTO_INCREMENT,
`post_id` bigint NOT NULL COMMENT '帖子ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_post_user` (`post_id`, `user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='帖子收藏表';
-- 话题表
CREATE TABLE `community_topic` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '话题ID',
`name` varchar(50) NOT NULL COMMENT '话题名称',
`description` varchar(200) DEFAULT NULL COMMENT '话题描述',
`cover` varchar(500) DEFAULT NULL COMMENT '话题封面',
`post_count` int DEFAULT 0 COMMENT '帖子数量',
`view_count` int DEFAULT 0 COMMENT '浏览数量',
`is_hot` tinyint DEFAULT 0 COMMENT '是否热门',
`status` tinyint DEFAULT 1 COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_name` (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='话题表';
7.2 许愿树数据表
-- 节日表
CREATE TABLE `wishtree_festival` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '节日ID',
`name` varchar(50) NOT NULL COMMENT '节日名称',
`icon` varchar(50) DEFAULT NULL COMMENT '节日图标',
`description` varchar(200) DEFAULT NULL COMMENT '节日描述',
`theme_color` varchar(20) DEFAULT NULL COMMENT '主题色',
`start_date` varchar(20) DEFAULT NULL COMMENT '开始日期(MM-DD)',
`end_date` varchar(20) DEFAULT NULL COMMENT '结束日期(MM-DD)',
`is_lunar` tinyint DEFAULT 0 COMMENT '是否农历',
`sort` int DEFAULT 0 COMMENT '排序',
`status` tinyint DEFAULT 1 COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='节日表';
-- 活动表
CREATE TABLE `wishtree_activity` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '活动ID',
`name` varchar(100) NOT NULL COMMENT '活动名称',
`description` text COMMENT '活动描述',
`festival_id` bigint DEFAULT NULL COMMENT '关联节日ID',
`banner_url` varchar(500) DEFAULT NULL COMMENT 'Banner图片',
`start_time` datetime NOT NULL COMMENT '开始时间',
`end_time` datetime NOT NULL COMMENT '结束时间',
`rules` json DEFAULT NULL COMMENT '活动规则',
`rewards` json DEFAULT NULL COMMENT '奖励配置',
`participant_count` int DEFAULT 0 COMMENT '参与人数',
`wish_count` int DEFAULT 0 COMMENT '祝福数量',
`status` varchar(20) DEFAULT 'draft' COMMENT '状态: draft/active/ended',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
`updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_festival_id` (`festival_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='许愿树活动表';
-- 祝福表
CREATE TABLE `wishtree_wish` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '祝福ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`type` varchar(20) NOT NULL COMMENT '类型: wish/blessing/thank',
`festival_id` bigint DEFAULT NULL COMMENT '节日ID',
`activity_id` bigint DEFAULT NULL COMMENT '活动ID',
`content` varchar(500) NOT NULL COMMENT '祝福内容',
`background_id` bigint DEFAULT NULL COMMENT '背景ID',
`decorations` json DEFAULT NULL COMMENT '装饰配置',
`tree_position` json DEFAULT NULL COMMENT '树上位置',
`visibility` varchar(20) DEFAULT 'public' COMMENT '可见范围',
`like_count` int DEFAULT 0 COMMENT '点赞数',
`comment_count` int DEFAULT 0 COMMENT '评论数',
`gift_count` int DEFAULT 0 COMMENT '礼物数',
`share_count` int DEFAULT 0 COMMENT '分享数',
`is_recommend` tinyint DEFAULT 0 COMMENT '是否推荐',
`status` varchar(20) DEFAULT 'pending' COMMENT '状态',
`reject_reason` varchar(200) DEFAULT NULL COMMENT '拒绝原因',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user_id` (`user_id`),
KEY `idx_festival_id` (`festival_id`),
KEY `idx_activity_id` (`activity_id`),
KEY `idx_status` (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='祝福表';
-- 祝福评论表
CREATE TABLE `wishtree_comment` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '评论ID',
`wish_id` bigint NOT NULL COMMENT '祝福ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`content` varchar(500) NOT NULL COMMENT '评论内容',
`parent_id` bigint DEFAULT NULL COMMENT '父评论ID',
`like_count` int DEFAULT 0 COMMENT '点赞数',
`status` varchar(20) DEFAULT 'approved' COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_wish_id` (`wish_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='祝福评论表';
-- 祝福点赞表
CREATE TABLE `wishtree_wish_like` (
`id` bigint NOT NULL AUTO_INCREMENT,
`wish_id` bigint NOT NULL COMMENT '祝福ID',
`user_id` bigint NOT NULL COMMENT '用户ID',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `uk_wish_user` (`wish_id`, `user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='祝福点赞表';
-- 背景模板表
CREATE TABLE `wishtree_background` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '背景ID',
`name` varchar(50) NOT NULL COMMENT '背景名称',
`url` varchar(500) NOT NULL COMMENT '背景图片URL',
`thumbnail` varchar(500) DEFAULT NULL COMMENT '缩略图',
`festival_id` bigint DEFAULT NULL COMMENT '关联节日',
`is_free` tinyint DEFAULT 1 COMMENT '是否免费',
`price` int DEFAULT 0 COMMENT '价格(金币)',
`sort` int DEFAULT 0 COMMENT '排序',
`status` tinyint DEFAULT 1 COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='背景模板表';
-- 装饰素材表
CREATE TABLE `wishtree_decoration` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '装饰ID',
`name` varchar(50) NOT NULL COMMENT '装饰名称',
`type` varchar(20) NOT NULL COMMENT '类型: star/ribbon/gift/heart等',
`url` varchar(500) NOT NULL COMMENT '装饰图片URL',
`festival_id` bigint DEFAULT NULL COMMENT '关联节日',
`is_free` tinyint DEFAULT 1 COMMENT '是否免费',
`price` int DEFAULT 0 COMMENT '价格(金币)',
`sort` int DEFAULT 0 COMMENT '排序',
`status` tinyint DEFAULT 1 COMMENT '状态',
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='装饰素材表';
八、实时通信设计
8.1 WebSocket连接管理
┌─────────────────────────────────────────────────────────────────────────┐
│ WebSocket连接架构 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 连接地址 │
│ ├── 直播弹幕: ws://host/ws/live/chat/{roomId} │
│ ├── 私聊消息: ws://host/ws/chat/{userId} │
│ ├── 社区通知: ws://host/ws/community/{userId} │
│ └── 许愿树通知: ws://host/ws/wishtree/{userId} │
│ │
│ 消息格式 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ { │ │
│ │ "type": "chat|like|comment|gift|system", │ │
│ │ "action": "send|receive|notify", │ │
│ │ "data": {...}, │ │
│ │ "timestamp": 1735488000000 │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ 心跳机制 │
│ ├── 心跳间隔: 30秒 │
│ ├── 心跳消息: {"type": "ping"} │
│ ├── 心跳响应: {"type": "pong"} │
│ └── 超时断开: 90秒无响应 │
│ │
│ 重连机制 │
│ ├── 最大重连次数: 5次 │
│ ├── 重连间隔: 递增 (5s, 10s, 15s, 20s, 25s) │
│ └── 重连成功后: 重新订阅消息 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
8.2 消息类型定义
// 社区帖子点赞通知
{
"type": "like",
"action": "notify",
"data": {
"postId": 10001,
"userId": 1002,
"nickname": "小红",
"avatar": "https://xxx/avatar.jpg",
"message": "赞了你的帖子"
},
"timestamp": 1735488000000
}
// 社区帖子评论通知
{
"type": "comment",
"action": "notify",
"data": {
"postId": 10001,
"commentId": 20001,
"userId": 1002,
"nickname": "小红",
"content": "写得太好了！",
"message": "评论了你的帖子"
},
"timestamp": 1735488000000
}
// 许愿树祝福通知
{
"type": "wish",
"action": "notify",
"data": {
"wishId": 30001,
"userId": 1002,
"nickname": "小红",
"type": "like",
"message": "为你的祝福点赞"
},
"timestamp": 1735488000000
}
// 许愿树礼物通知
{
"type": "gift",
"action": "notify",
"data": {
"wishId": 30001,
"userId": 1002,
"nickname": "小红",
"giftId": 5,
"giftName": "爱心",
"giftIcon": "❤️",
"message": "送了你一个爱心"
},
"timestamp": 1735488000000
}
// 系统通知
{
"type": "system",
"action": "notify",
"data": {
"title": "活动开始",
"content": "元旦许愿活动已开始，快来参与吧！",
"link": "/wishtree/activity/100"
},
"timestamp": 1735488000000
}
九、管理端配套功能
9.1 缘池社区管理模块
┌─────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 缘池社区管理 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 路由: /communityManage │
│ │
│ ├── /communityManage/category/list # 板块管理 │
│ │ ├── 板块列表 (表格展示) │
│ │ ├── 新增板块 (弹窗表单) │
│ │ ├── 编辑板块 (弹窗表单) │
│ │ ├── 删除板块 (确认弹窗) │
│ │ └── 板块排序 (拖拽排序) │
│ │ │
│ ├── /communityManage/post/list # 帖子管理 │
│ │ ├── 帖子列表 (表格展示) │
│ │ │ ├── 筛选: 板块/状态/时间 │
│ │ │ ├── 搜索: 内容/用户 │
│ │ │ └── 操作: 审核/置顶/推荐/删除 │
│ │ ├── 帖子详情 (抽屉展示) │
│ │ └── 批量审核 (多选操作) │
│ │ │
│ ├── /communityManage/comment/list # 评论管理 │
│ │ ├── 评论列表 (表格展示) │
│ │ ├── 评论审核 (通过/拒绝) │
│ │ └── 评论删除 (确认弹窗) │
│ │ │
│ ├── /communityManage/topic/list # 话题管理 │
│ │ ├── 话题列表 (表格展示) │
│ │ ├── 新增话题 (弹窗表单) │
│ │ ├── 编辑话题 (弹窗表单) │
│ │ └── 设为热门 (开关操作) │
│ │ │
│ └── /communityManage/statistics # 数据统计 │
│ ├── 帖子统计 (折线图) │
│ ├── 用户活跃 (柱状图) │
│ ├── 板块热度 (饼图) │
│ └── 话题排行 (排行榜) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
9.2 许愿树管理模块
┌─────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 许愿树管理 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 路由: /wishtreeManage │
│ │
│ ├── /wishtreeManage/festival/list # 节日管理 │
│ │ ├── 节日列表 (表格展示) │
│ │ ├── 新增节日 (弹窗表单) │
│ │ │ ├── 节日名称 │
│ │ │ ├── 节日图标 │
│ │ │ ├── 主题颜色 │
│ │ │ ├── 日期范围 │
│ │ │ └── 是否农历 │
│ │ ├── 编辑节日 (弹窗表单) │
│ │ └── 删除节日 (确认弹窗) │
│ │ │
│ ├── /wishtreeManage/activity/list # 活动管理 │
│ │ ├── 活动列表 (表格展示) │
│ │ ├── 新增活动 (页面表单) │
│ │ │ ├── 基本信息 (名称/描述/时间) │
│ │ │ ├── 关联节日 │
│ │ │ ├── Banner配置 │
│ │ │ ├── 活动规则 │
│ │ │ └── 奖励配置 │
│ │ ├── 编辑活动 (页面表单) │
│ │ ├── 活动状态 (开启/关闭) │
│ │ └── 活动统计 (数据报表) │
│ │ │
│ ├── /wishtreeManage/wish/list # 祝福管理 │
│ │ ├── 祝福列表 (表格展示) │
│ │ │ ├── 筛选: 节日/活动/状态/时间 │
│ │ │ ├── 搜索: 内容/用户 │
│ │ │ └── 操作: 审核/推荐/删除 │
│ │ ├── 祝福详情 (抽屉展示) │
│ │ └── 批量审核 (多选操作) │
│ │ │
│ ├── /wishtreeManage/comment/list # 评论管理 │
│ │ ├── 评论列表 (表格展示) │
│ │ ├── 评论审核 (通过/拒绝) │
│ │ └── 评论删除 (确认弹窗) │
│ │ │
│ ├── /wishtreeManage/material/list # 素材管理 │
│ │ ├── 背景管理 │
│ │ │ ├── 背景列表 (卡片展示) │
│ │ │ ├── 上传背景 (弹窗表单) │
│ │ │ └── 删除背景 (确认弹窗) │
│ │ └── 装饰管理 │
│ │ ├── 装饰列表 (卡片展示) │
│ │ ├── 上传装饰 (弹窗表单) │
│ │ └── 删除装饰 (确认弹窗) │
│ │ │
│ └── /wishtreeManage/statistics # 数据统计 │
│ ├── 祝福统计 (折线图) │
│ ├── 活动效果 (柱状图) │
│ ├── 节日热度 (饼图) │
│ └── 用户参与 (排行榜) │
│ │
└─────────────────────────────────────────────────────────────────────────┘
9.3 管理端菜单配置
// 新增菜单配置 (eb_system_menu表)
[
{
"id": 200,
"pid": 0,
"name": "缘池社区",
"icon": "el-icon-chat-dot-round",
"path": "/communityManage",
"sort": 5,
"children": [
{"id": 201, "name": "板块管理", "path": "/communityManage/category/list"},
{"id": 202, "name": "帖子管理", "path": "/communityManage/post/list"},
{"id": 203, "name": "评论管理", "path": "/communityManage/comment/list"},
{"id": 204, "name": "话题管理", "path": "/communityManage/topic/list"},
{"id": 205, "name": "数据统计", "path": "/communityManage/statistics"}
]
},
{
"id": 300,
"pid": 0,
"name": "许愿树",
"icon": "el-icon-present",
"path": "/wishtreeManage",
"sort": 6,
"children": [
{"id": 301, "name": "节日管理", "path": "/wishtreeManage/festival/list"},
{"id": 302, "name": "活动管理", "path": "/wishtreeManage/activity/list"},
{"id": 303, "name": "祝福管理", "path": "/wishtreeManage/wish/list"},
{"id": 304, "name": "评论管理", "path": "/wishtreeManage/comment/list"},
{"id": 305, "name": "素材管理", "path": "/wishtreeManage/material/list"},
{"id": 306, "name": "数据统计", "path": "/wishtreeManage/statistics"}
]
}
]
十、开发实施计划
10.1 开发阶段规划
┌─────────────────────────────────────────────────────────────────────────┐
│ 开发实施计划 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 第一阶段: 基础架构 (1周) │
│ ├── 数据库表创建 │
│ ├── 后端基础接口开发 │
│ ├── API文档编写 │
│ └── 接口联调测试 │
│ │
│ 第二阶段: 缘池社区 (2周) │
│ ├── 移动端 │
│ │ ├── 社区首页UI │
│ │ ├── 帖子详情页 │
│ │ ├── 发布帖子页 │
│ │ ├── 评论功能 │
│ │ └── 点赞/收藏/分享 │
│ └── 管理端 │
│ ├── 板块管理页面 │
│ ├── 帖子管理页面 │
│ ├── 评论管理页面 │
│ └── 话题管理页面 │
│ │
│ 第三阶段: 许愿树 (2周) │
│ ├── 移动端 │
│ │ ├── 许愿树首页UI │
│ │ ├── 许愿树3D展示 │
│ │ ├── 发布祝福页 │
│ │ ├── 祝福详情页 │
│ │ └── 节日活动页 │
│ └── 管理端 │
│ ├── 节日管理页面 │
│ ├── 活动管理页面 │
│ ├── 祝福管理页面 │
│ └── 素材管理页面 │
│ │
│ 第四阶段: 实时通信 (1周) │
│ ├── WebSocket服务搭建 │
│ ├── 消息推送实现 │
│ ├── 通知系统集成 │
│ └── 心跳重连机制 │
│ │
│ 第五阶段: 测试优化 (1周) │
│ ├── 功能测试 │
│ ├── 性能优化 │
│ ├── Bug修复 │
│ └── 上线准备 │
│ │
│ 总计: 7周 │
│ │
└─────────────────────────────────────────────────────────────────────────┘
10.2 技术要点清单
| 模块 | 技术要点 | 优先级 |
|---|---|---|
| 缘池社区 | 瀑布流布局、图片压缩上传、内容审核 | 高 |
| 许愿树 | 3D展示效果、节日主题切换、活动倒计时 | 高 |
| 实时通信 | WebSocket连接管理、消息推送、心跳重连 | 高 |
| 内容审核 | 敏感词过滤、图片审核、人工复审 | 高 |
| 数据统计 | 实时统计、图表展示、数据导出 | 中 |
| 性能优化 | 列表分页、图片懒加载、缓存策略 | 中 |
10.3 风险评估
| 风险项 | 影响程度 | 应对措施 |
|---|---|---|
| 内容审核压力大 | 高 | 引入AI审核+人工复审 |
| 实时通信稳定性 | 高 | 心跳检测+断线重连 |
| 图片上传慢 | 中 | 压缩+分片上传+CDN |
| 数据量增长快 | 中 | 分表分库+归档策略 |
| 节日活动并发高 | 中 | 限流+缓存+队列 |
十一、总结
本报告详细设计了直播平台双端（Android移动端 + Vue管理端）的交互逻辑，重点对缘池和许愿树两个模块进行了重新设计：
缘池 - 多板块交流社区
- 从单一的"附近用户匹配"升级为综合性社区平台
- 支持12+个兴趣板块，满足不同用户需求
- 完整的帖子发布、评论、点赞、收藏、分享功能
- 管理端配套板块管理、内容审核、数据统计功能
许愿树 - 节日愿望祝福留言板
- 结合节日氛围，打造温馨的祝福互动平台
- 支持16+个节日主题，全年覆盖
- 创新的许愿树3D展示效果
- 完整的活动配置、祝福管理、素材管理功能
核心价值
- 提升用户粘性：丰富的社区内容和节日活动
- 增强社交属性：多维度的互动方式
- 运营灵活性：管理端可配置板块、活动、素材
- 数据可视化：完整的统计分析功能
十二、详细界面设计描述
本章节提供所有界面的详细视觉设计描述，包括布局、颜色、组件、交互效果等，为UI设计和前端开发提供精确参考。
12.1 移动端界面设计
12.1.1 缘池社区 - 首页界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 (系统状态栏，深色/浅色自适应) │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 (高度: 56dp, 背景: #FFFFFF) │ │
│ │ ┌────┐ ┌────┬────┐│ │
│ │ │ ☰ │ 🎣 缘池 │ 🔔 │ ✏️ ││ │
│ │ │菜单│ (标题, 字号18sp, 加粗, #333333) │通知│发布││ │
│ │ └────┘ └────┴────┘│ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 搜索栏 (高度: 44dp, 圆角: 22dp, 背景: #F5F5F5) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 🔍 搜索帖子、话题、用户... │ │ │
│ │ │ (提示文字, 字号14sp, #999999) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 板块分类标签栏 (高度: 48dp, 可横向滑动) │ │
│ │ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐ │ │
│ │ │推荐││热门││游戏││音乐││美食││旅行││情感││更多│ │ │
│ │ │ 🔥 ││ 📈 ││ 🎮 ││ 🎵 ││ 🍜 ││ ✈️ ││ 💕 ││ ··· │ │ │
│ │ └────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘ │ │
│ │ (选中: #FF6B6B, 未选中: #666666, 字号13sp) │ │
│ │ (选中标签下方有3dp圆角指示条) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 内容列表区域 (瀑布流/列表切换, 支持下拉刷新上拉加载) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ 帖子卡片 (圆角: 12dp, 阴影: 2dp, 背景: #FFFFFF) │ │ │
│ │ │ 内边距: 12dp │ │ │
│ │ │ │ │ │
│ │ │ ┌────┐ 用户名 · 游戏 · 2小时前 │ │ │
│ │ │ │头像│ (头像: 40dp圆形, 用户名: 14sp #333333) │ │ │
│ │ │ │40dp│ (板块标签: 12sp #FF6B6B, 时间: 12sp #999999) │ │ │
│ │ │ └────┘ │ │ │
│ │ │ │ │ │
│ │ │ 今天吃鸡成功！分享一下我的游戏心得，希望对大家 │ │ │
│ │ │ 有帮助... │ │ │
│ │ │ (正文: 15sp, #333333, 最多显示3行, 超出显示...) │ │ │
│ │ │ │ │ │
│ │ │ ┌─────────┬─────────┬─────────┐ │ │ │
│ │ │ │ 图片1 │ 图片2 │ 图片3 │ (九宫格布局) │ │ │
│ │ │ │ 圆角8dp │ 圆角8dp │ 圆角8dp │ (间距: 4dp) │ │ │
│ │ │ └─────────┴─────────┴─────────┘ │ │ │
│ │ │ │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │👍 128 │ │💬 32 │ │↗ 分享 │ │⭐ 收藏 │ │ │ │
│ │ │ │(点赞) │ │(评论) │ │ │ │ │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ (操作按钮: 12sp, #666666, 点击态: #FF6B6B) │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (更多帖子卡片...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 悬浮发布按钮 (右下角, 距边缘16dp) │ │
│ │ ┌──────────┐ │ │
│ │ │ ✚ │ │ │
│ │ │ 56dp │ │ │
│ │ │ 圆形按钮 │ │ │
│ │ │ #FF6B6B │ │ │
│ │ │ 阴影6dp │ │ │
│ │ └──────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ 底部导航栏 (高度: 56dp, 背景: #FFFFFF, 顶部1px分割线) │
│ ┌──────────┬──────────┬──────────┬──────────┬──────────┐ │
│ │ 🏠 │ 🎣 │ 🌳 │ 💬 │ 👤 │ │
│ │ 首页 │ 缘池 │ 许愿树 │ 消息 │ 我的 │ │
│ │ #999999 │ #FF6B6B │ #999999 │ #999999 │ #999999 │ │
│ └──────────┴──────────┴──────────┴──────────┴──────────┘ │
│ (选中: #FF6B6B, 未选中: #999999, 图标24dp, 文字10sp) │
└────────────────────────────────────────────────────────────────┘
界面设计规范：
| 元素 | 规格 | 颜色 | 说明 |
|---|---|---|---|
| 状态栏 | 系统默认 | 自适应 | 支持沉浸式 |
| 顶部导航 | 高度56dp | 背景#FFFFFF | 标题居中 |
| 搜索栏 | 高度44dp, 圆角22dp | 背景#F5F5F5 | 点击跳转搜索页 |
| 板块标签 | 高度48dp | 选中#FF6B6B | 可横向滑动 |
| 帖子卡片 | 圆角12dp, 阴影2dp | 背景#FFFFFF | 内边距12dp |
| 用户头像 | 40dp圆形 | - | 点击进入主页 |
| 图片区域 | 九宫格/单图/视频 | 圆角8dp | 点击查看大图 |
| 悬浮按钮 | 56dp圆形 | #FF6B6B | 阴影6dp |
| 底部导航 | 高度56dp | 背景#FFFFFF | 5个Tab |
交互效果：
- 下拉刷新：显示加载动画，刷新成功后列表回到顶部
- 上拉加载：显示"加载中..."，无更多数据显示"没有更多了"
- 帖子卡片：点击进入详情，长按显示操作菜单
- 图片：单击查看大图，支持手势缩放
- 点赞：点击后图标变红，数字+1，有心跳动画
- 悬浮按钮：点击展开发布选项（图文/视频）
12.1.2 缘池社区 - 帖子详情界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 (高度: 56dp) │ │
│ │ ┌────┐ ┌────┬────┐│ │
│ │ │ ← │ 帖子详情 │ ↗ │ ··· ││ │
│ │ │返回│ │分享│更多││ │
│ │ └────┘ └────┴────┘│ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 帖子内容区域 (可滚动) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 用户信息区 │ │ │
│ │ │ ┌────┐ ┌──────┐ │ │ │
│ │ │ │头像│ 小明 │+ 关注│ │ │ │
│ │ │ │48dp│ Lv.5 · 游戏达人 │ 按钮 │ │ │ │
│ │ │ │圆形│ (等级标签: 渐变背景, 圆角10dp) │#FF6B6B│ │ │ │
│ │ │ └────┘ └──────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 帖子正文 │ │ │
│ │ │ │ │ │
│ │ │ 今天吃鸡成功！分享一下我的游戏心得，希望对大家有 │ │ │
│ │ │ 帮助。首先要选择合适的落点，建议新手选择偏远地区 │ │ │
│ │ │ 先发育，等装备成型后再参与战斗... │ │ │
│ │ │ │ │ │
│ │ │ (正文: 16sp, 行高1.6, #333333) │ │ │
│ │ │ │ │ │
│ │ │ #吃鸡攻略 #游戏心得 #新手教程 │ │ │
│ │ │ (话题标签: 14sp, #FF6B6B, 可点击) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 图片/视频区域 │ │ │
│ │ │ ┌──────────────────────────────────────────────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 图片1 (宽度100%) │ │ │ │
│ │ │ │ 圆角: 8dp │ │ │ │
│ │ │ │ 点击查看大图 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │
│ │ │ │ 图片2 │ │ 图片3 │ │ │ │
│ │ │ └─────────────────┘ └─────────────────┘ │ │ │
│ │ │ (多图: 第一张大图, 其余小图排列) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 位置和时间 │ │ │
│ │ │ 📍 广西南宁 · 2024-12-29 10:30 │ │ │
│ │ │ (字号: 13sp, 颜色: #999999) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 互动数据栏 (分割线上方) │ │ │
│ │ │ 👁 1024浏览 · 👍 128点赞 · ⭐ 45收藏 │ │ │
│ │ │ (字号: 13sp, 颜色: #666666) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ════════════════════════════════════════════════════════ │ │
│ │ (分割线: 8dp高度, 背景#F5F5F5) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 评论区标题 │ │ │
│ │ │ 全部评论 (32) 按热度 ▼ │ │ │
│ │ │ (标题: 16sp加粗, 排序: 14sp #666666) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 评论项 │ │ │
│ │ │ ┌────┐ 小红 · 1小时前 │ │ │
│ │ │ │头像│ 写得太好了，学到了！ │ │ │
│ │ │ │36dp│ 👍 15 │ │ │
│ │ │ └────┘ │ │ │
│ │ │ │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 回复区 (背景: #F8F8F8, 圆角: 8dp) │ │ │ │
│ │ │ │ 小明 回复 小红: 谢谢支持！ │ │ │ │
│ │ │ │ 小红 回复 小明: 期待更多分享~ │ │ │ │
│ │ │ │ 查看全部3条回复 > │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (更多评论...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 底部操作栏 (高度: 56dp, 背景: #FFFFFF, 顶部阴影) │ │
│ │ ┌────────────────────────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │ 说点什么... │ │ 👍 │ │ 💬 │ │ ⭐ │ │ ↗ │ │ │
│ │ │ (输入框, 圆角20dp) │ │128 │ │ 32 │ │ 45 │ │分享│ │ │
│ │ └────────────────────────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ │ (输入框点击弹出键盘和完整输入界面) │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
评论输入弹窗设计：
┌────────────────────────────────────────────────────────────────┐
│ │
│ (半透明遮罩层, 点击关闭) │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 评论输入面板 (从底部弹出, 圆角顶部16dp) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 多行输入框 (最小高度100dp, 最大高度200dp) │ │ │
│ │ │ │ │ │
│ │ │ 输入评论内容... │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 工具栏 │ │ │
│ │ │ ┌────┐ ┌────┐ ┌────┐ ┌──────────────┐ │ │ │
│ │ │ │ 😊 │ │ @ │ │ # │ │ 发送 │ │ │ │
│ │ │ │表情│ │艾特│ │话题│ │ #FF6B6B │ │ │ │
│ │ │ └────┘ └────┘ └────┘ └──────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (键盘区域) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
12.1.3 缘池社区 - 发布帖子界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 │ │
│ │ ┌────┐ ┌────────┐ │ │
│ │ │ ✕ │ 发布动态 │ 发布 │ │ │
│ │ │关闭│ │ #FF6B6B│ │ │
│ │ └────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 内容输入区域 │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 文本输入框 (最小高度: 150dp) │ │ │
│ │ │ │ │ │
│ │ │ 分享你的想法... │ │ │
│ │ │ (提示文字: 16sp, #CCCCCC) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ 500/500 │ │ │
│ │ │ (字数统计, 右下角)│ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 媒体选择区域 │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 图片1 │ │ 图片2 │ │ 图片3 │ │ ＋ │ │ │ │
│ │ │ │ ┌──┐ │ │ │ │ │ │ 添加 │ │ │ │
│ │ │ │ │✕│ │ │ │ │ │ │ 图片 │ │ │ │
│ │ │ │ └──┘ │ │ │ │ │ │ │ │ │ │
│ │ │ │ 80x80dp│ │ 80x80dp│ │ 80x80dp│ │ 80x80dp│ │ │ │
│ │ │ │ 圆角8dp│ │ 圆角8dp│ │ 圆角8dp│ │虚线边框│ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ (最多9张图片, 右上角有删除按钮) │ │ │
│ │ │ (支持拖拽排序) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 选项设置区域 (列表形式) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 📂 选择板块 游戏 > │ │ │
│ │ │ (左侧图标24dp, 标题16sp, 右侧值14sp #666666) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ # 添加话题 #吃鸡 #游戏 > │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 📍 添加位置 广西南宁 > │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 👁 谁可以看 公开 > │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 草稿提示 (如有草稿) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 📝 有一篇未发布的草稿 恢复 | 删除│ │ │
│ │ │ (背景: #FFF9E6, 边框: #FFE082) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
板块选择弹窗：
┌────────────────────────────────────────────────────────────────┐
│ │
│ (半透明遮罩) │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 选择板块 (底部弹窗, 最大高度60%) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 标题栏 │ │ │
│ │ │ ──────────── 选择板块 ──────────── │ │ │
│ │ │ (居中标题, 16sp加粗, 顶部有拖拽指示条) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 板块网格 (3列, 间距12dp) │ │ │
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │
│ │ │ │ 🔥 │ │ 📈 │ │ 🎮 │ │ │ │
│ │ │ │ 推荐 │ │ 热门 │ │ 游戏 │ │ │ │
│ │ │ │ (选中态) │ │ │ │ │ │ │ │
│ │ │ │ 边框红色 │ │ │ │ │ │ │ │
│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │
│ │ │ │ 🎵 │ │ 🍜 │ │ ✈️ │ │ │ │
│ │ │ │ 音乐 │ │ 美食 │ │ 旅行 │ │ │ │
│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │
│ │ │ │ 💕 │ │ 👗 │ │ 🐱 │ │ │ │
│ │ │ │ 情感 │ │ 穿搭 │ │ 宠物 │ │ │ │
│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │
│ │ │ (每个板块: 圆角12dp, 背景#F5F5F5, 高度80dp) │ │ │
│ │ │ (选中: 边框2dp #FF6B6B, 背景#FFF0F0) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
12.1.4 许愿树 - 首页界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 (渐变背景: #FF6B6B → #FF8E8E) │ │
│ │ ┌────┐ ┌────┬────┐│ │
│ │ │ ☰ │ 🌳 许愿树 │ 🔔 │ 🔍 ││ │
│ │ │ │ (白色文字, 带阴影) │ │ ││ │
│ │ └────┘ └────┴────┘│ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 活动Banner区域 (高度: 180dp, 圆角: 16dp, 边距: 16dp) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ╔════════════════════════════════════════════════╗ │ │ │
│ │ │ ║ 🎄 元旦许愿活动 ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ 许下新年愿望，赢取丰厚奖励！ ║ │ │ │
│ │ │ ║ (描述文字: 14sp, 白色, 80%透明度) ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ┌─────────────────────────────────────────┐ ║ │ │ │
│ │ │ ║ │ ⏰ 距活动结束: 02天 15:30:45 │ ║ │ │ │
│ │ │ ║ │ (倒计时: 背景半透明黑, 圆角8dp) │ ║ │ │ │
│ │ │ ║ └─────────────────────────────────────────┘ ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ┌──────────────┐ ║ │ │ │
│ │ │ ║ │ 立即参与 → │ (按钮: 白色背景, 红色文字) ║ │ │ │
│ │ │ ║ └──────────────┘ ║ │ │ │
│ │ │ ╚════════════════════════════════════════════════╝ │ │ │
│ │ │ (背景: 节日主题渐变色, 可配置) │ │ │
│ │ │ (支持轮播, 底部有指示点) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 节日分类标签 (高度: 44dp, 可横向滑动) │ │
│ │ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐ │ │
│ │ │全部││元旦││春节││情人││生日││祝福││许愿│ │ │
│ │ │ ✨ ││ 🎉 ││ 🧧 ││ 💕 ││ 🎂 ││ 🙏 ││ ⭐ │ │ │
│ │ └────┘└────┘└────┘└────┘└────┘└────┘└────┘ │ │
│ │ (选中: 背景#FF6B6B, 白色文字, 圆角16dp) │ │
│ │ (未选中: 背景#F5F5F5, #666666文字) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 许愿树3D展示区域 (高度: 280dp) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ ⭐ │ │ │
│ │ │ / \ │ │ │
│ │ │ / \ │ │ │
│ │ │ 🎀 / \ 🎁 │ │ │
│ │ │ / 🌳 \ │ │ │
│ │ │ 🌟 / /|\ \ ⭐ │ │ │
│ │ │ / / | \ \ │ │ │
│ │ │ 💝 / / | \ \ 🎊 │ │ │
│ │ │ / / | \ \ │ │ │
│ │ │ ───────────────────── │ │ │
│ │ │ │ │ │
│ │ │ (树上装饰物可点击, 显示对应祝福) │ │ │
│ │ │ (装饰物有呼吸灯动画效果) │ │ │
│ │ │ (支持左右滑动旋转树) │ │ │
│ │ │ │ │ │
│ │ │ ┌─────────────────────────┐ │ │ │
│ │ │ │ 点击装饰物查看祝福详情 │ │ │ │
│ │ │ │ (提示文字, 渐隐动画) │ │ │ │
│ │ │ └─────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ (背景: 渐变色, 与节日主题匹配) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 祝福列表区域 (瀑布流布局) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ 祝福卡片 (圆角: 16dp, 有节日主题背景) │ │ │
│ │ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ │ 背景图/渐变色 (节日主题) │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌────┐ │ │ │ │
│ │ │ │ │头像│ 小明 · 元旦祝福 · 1小时前 │ │ │ │
│ │ │ │ │36dp│ (白色文字, 带阴影) │ │ │ │
│ │ │ │ └────┘ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 🎉 新年快乐！ │ │ │ │
│ │ │ │ 愿新的一年万事如意，心想事成！ │ │ │ │
│ │ │ │ (祝福内容: 16sp, 白色, 最多3行) │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │
│ │ │ │ │ ❤️ 128 │ │ 💬 32 │ │ 🎁 送礼│ │ │ │ │
│ │ │ │ │ (送心) │ │ (评论) │ │ │ │ │ │ │
│ │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │
│ │ │ │ (操作按钮: 白色, 半透明背景) │ │ │ │
│ │ │ └────────────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (更多祝福卡片...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 发布祝福按钮 (底部居中, 距底部导航16dp) │ │
│ │ ┌──────────────────────────┐ │ │
│ │ │ ✨ 发布祝福 │ │ │
│ │ │ (渐变背景, 圆角24dp) │ │ │
│ │ │ (宽度: 200dp, 高度: 48dp)│ │ │
│ │ │ (阴影: 8dp) │ │ │
│ │ └──────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ 底部导航栏 │
└────────────────────────────────────────────────────────────────┘
许愿树装饰物点击弹窗：
┌────────────────────────────────────────────────────────────────┐
│ │
│ (点击树上装饰物后, 显示祝福预览卡片) │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 祝福预览卡片 (居中显示, 宽度80%, 圆角16dp) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 背景: 节日主题渐变 │ │ │
│ │ │ │ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │头像│ 小红 │ │ │
│ │ │ │48dp│ 元旦祝福 │ │ │
│ │ │ └────┘ │ │ │
│ │ │ │ │ │
│ │ │ 🎉 祝大家新年快乐，万事如意！ │ │ │
│ │ │ 希望新的一年大家都能实现自己的愿望~ │ │ │
│ │ │ │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 查看详情 → │ │ │ │
│ │ │ │ (按钮: 白色背景, 主题色文字) │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ (点击卡片外区域关闭) │ │
│ │ (卡片有缩放弹出动画) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
12.1.5 许愿树 - 发布祝福界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 │ │
│ │ ┌────┐ ┌────────┐ │ │
│ │ │ ✕ │ 发布祝福 │ 发布 │ │ │
│ │ │ │ │ #FF6B6B│ │ │
│ │ └────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 祝福类型选择 (高度: 80dp) │ │
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │
│ │ │ ⭐ │ │ 🙏 │ │ 💝 │ │ │
│ │ │ 许愿 │ │ 祝福 │ │ 感谢 │ │ │
│ │ │ (选中态) │ │ │ │ │ │ │
│ │ │ 边框#FF6B6B│ │ │ │ │ │ │
│ │ └────────────┘ └────────────┘ └────────────┘ │ │
│ │ (每个类型: 圆角12dp, 背景#F8F8F8) │ │
│ │ (选中: 边框2dp, 背景#FFF5F5) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 节日选择 (横向滚动) │ │
│ │ 选择节日: │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │ 🎉 │ │ 🧧 │ │ 💕 │ │ 🎂 │ │ ✨ │ │ ··· │ │ │
│ │ │元旦│ │春节│ │情人│ │生日│ │日常│ │更多│ │ │
│ │ │选中│ │ │ │ │ │ │ │ │ │ │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ │ (选中: 背景主题色, 白色文字) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 祝福内容输入 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 输入框 (高度: 120dp, 圆角: 12dp, 背景: #F8F8F8) │ │ │
│ │ │ │ │ │
│ │ │ 写下你的祝福... │ │ │
│ │ │ (提示文字: 16sp, #CCCCCC) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ 200/200 │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 背景选择 │ │
│ │ 选择背景: │ │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │
│ │ │ 背景1 │ │ 背景2 │ │ 背景3 │ │ 背景4 │ │ 背景5 │ │ │
│ │ │ 渐变红 │ │ 渐变金 │ │ 星空 │ │ 烟花 │ │ 雪花 │ │ │
│ │ │ (选中) │ │ │ │ │ │ │ │ │ │ │
│ │ │ ✓勾选 │ │ │ │ │ │ │ │ │ │ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ │
│ │ (每个背景: 60x80dp, 圆角8dp) │ │
│ │ (选中: 右下角显示白色勾选图标) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 装饰选择 │ │
│ │ 添加装饰: │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │ ⭐ │ │ 🎀 │ │ 🎁 │ │ 💝 │ │ 🌟 │ │ 🎊 │ │ ❄️ │ │ │
│ │ │星星│ │蝴蝶│ │礼物│ │爱心│ │闪光│ │彩带│ │雪花│ │ │
│ │ │ ✓ │ │ ✓ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ │ (可多选, 选中显示勾选标记) │ │
│ │ (每个装饰: 48x48dp, 圆角8dp, 背景#F5F5F5) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 预览区域 │ │
│ │ 预览效果: │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ╔════════════════════════════════════════════════╗ │ │ │
│ │ │ ║ (实时预览祝福卡片效果) ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ⭐ 🎀 ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ 🎉 新年快乐！ ║ │ │ │
│ │ │ ║ 愿新的一年万事如意... ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ⭐ 🎀 ║ │ │ │
│ │ │ ╚════════════════════════════════════════════════╝ │ │ │
│ │ │ (背景和装饰实时更新) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 可见范围 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 👁 谁可以看 公开 > │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
12.1.6 许愿树 - 祝福详情界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 (透明, 沉浸式) │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 祝福卡片大图展示区域 (高度: 50%屏幕) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ╔════════════════════════════════════════════════╗ │ │ │
│ │ │ ║ (节日主题背景) ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ⭐ 装饰物动画效果 🎀 ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ ┌────┐ ║ │ │ │
│ │ │ ║ │头像│ 小明 ║ │ │ │
│ │ │ ║ │56dp│ Lv.5 · 元旦祝福 ║ │ │ │
│ │ │ ║ └────┘ ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ 🎉 新年快乐！ ║ │ │ │
│ │ │ ║ 愿新的一年万事如意，心想事成！ ║ │ │ │
│ │ │ ║ 希望大家都能实现自己的愿望， ║ │ │ │
│ │ │ ║ 新的一年加油！ ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ 🌟 💝 ║ │ │ │
│ │ │ ║ ║ │ │ │
│ │ │ ║ 2024-12-29 10:30 ║ │ │ │
│ │ │ ╚════════════════════════════════════════════════╝ │ │ │
│ │ │ │ │ │
│ │ │ ┌────┐ ┌────┐ │ │ │
│ │ │ │ ← │ (返回按钮, 白色, 左上角) │ ↗ │ │ │ │
│ │ │ │返回│ │分享│ │ │ │
│ │ │ └────┘ └────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 互动数据区域 (白色背景, 圆角顶部16dp) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │
│ │ │ │ ❤️ 256 │ │ 💬 48 │ │ 🎁 15 │ │ │ │
│ │ │ │ 送心 │ │ 评论 │ │ 礼物 │ │ │ │
│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │
│ │ │ (三等分布局, 点击有动画效果) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 评论区域 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 全部评论 (48) 按热度 ▼ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 评论项 │ │ │
│ │ │ ┌────┐ 小红 · 30分钟前 │ │ │
│ │ │ │头像│ 新年快乐！祝福收到啦~ │ │ │
│ │ │ │36dp│ ❤️ 12 │ │ │
│ │ │ └────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (更多评论...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 底部操作栏 │ │
│ │ ┌────────────────────────┐ ┌────┐ ┌────┐ ┌────────────┐ │ │
│ │ │ 写下你的祝福... │ │ ❤️ │ │ 💬 │ │ 🎁 送礼 │ │ │
│ │ │ (输入框) │ │256 │ │ 48 │ │ (渐变按钮)│ │ │
│ │ └────────────────────────┘ └────┘ └────┘ └────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
送礼物弹窗：
┌────────────────────────────────────────────────────────────────┐
│ │
│ (半透明遮罩) │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 送礼物面板 (底部弹窗, 高度50%) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 标题栏 │ │ │
│ │ │ ──────────── 送礼物 ──────────── │ │ │
│ │ │ 余额: 💰 1280 │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 礼物列表 (网格布局, 4列) │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ ❤️ │ │ 🌹 │ │ 🎁 │ │ 💎 │ │ │ │
│ │ │ │ 爱心 │ │ 玫瑰 │ │ 礼盒 │ │ 钻石 │ │ │ │
│ │ │ │ 1金币 │ │ 5金币 │ │ 10金币 │ │ 50金币 │ │ │ │
│ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 🚀 │ │ 🏆 │ │ 👑 │ │ 🎆 │ │ │ │
│ │ │ │ 火箭 │ │ 奖杯 │ │ 皇冠 │ │ 烟花 │ │ │ │
│ │ │ │100金币 │ │200金币 │ │500金币 │ │999金币 │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ (选中: 边框#FF6B6B, 背景#FFF5F5) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 数量选择 │ │ │
│ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────────────┐ │ │ │
│ │ │ │ 1 │ │ 10 │ │ 66 │ │ 99 │ │520 │ │ 自定义 │ │ │ │
│ │ │ │选中│ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 发送按钮 │ │ │
│ │ │ ┌──────────────────────────────────────────────┐ │ │ │
│ │ │ │ 赠送 ❤️ x1 (1金币) │ │ │ │
│ │ │ │ (渐变背景, 圆角24dp) │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
12.2 管理端界面设计
12.2.1 缘池社区 - 板块管理界面
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 缘池社区 - 板块管理 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 页面标题栏 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 📂 板块管理 ┌──────────┐ │ │ │
│ │ │ 管理社区板块分类，支持排序和状态控制 │ + 新增板块│ │ │ │
│ │ │ │ (蓝色) │ │ │ │
│ │ │ └──────────┘ │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 搜索筛选栏 │ │
│ │ ┌────────────────┐ ┌────────────────┐ ┌────────┐ ┌────────┐ │ │
│ │ │ 板块名称 │ │ 状态 ▼ │ │ 搜索 │ │ 重置 │ │ │
│ │ │ 请输入板块名称 │ │ 全部 │ │ (蓝色) │ │ (灰色) │ │ │
│ │ └────────────────┘ └────────────────┘ └────────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 数据表格 (Element UI Table) │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ ☐ │ 排序 │ 图标 │ 板块名称 │ 描述 │ 帖子数 │ 状态 │ 操作 │ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ ☐ │ ≡ │ 🔥 │ 推荐 │ 算法推荐热门 │ 1280 │ 启用 │ 编辑 │ │ │
│ │ │ │ (拖拽)│ │ │ 内容 │ │ (绿) │ 禁用 │ │ │
│ │ │ │ │ │ │ │ │ │ 删除 │ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ ☐ │ ≡ │ 📈 │ 热门 │ 24小时热度 │ 856 │ 启用 │ 编辑 │ │ │
│ │ │ │ │ │ │ 排行 │ │ (绿) │ 禁用 │ │ │
│ │ │ │ │ │ │ │ │ │ 删除 │ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ ☐ │ ≡ │ 🎮 │ 游戏 │ 游戏攻略、 │ 2340 │ 启用 │ 编辑 │ │ │
│ │ │ │ │ │ │ 组队、分享 │ │ (绿) │ 禁用 │ │ │
│ │ │ │ │ │ │ │ │ │ 删除 │ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │ ☐ │ ≡ │ 🎵 │ 音乐 │ 音乐分享、 │ 1120 │ 禁用 │ 编辑 │ │ │
│ │ │ │ │ │ │ 翻唱、原创 │ │ (灰) │ 启用 │ │ │
│ │ │ │ │ │ │ │ │ │ 删除 │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (表格支持拖拽排序, 拖拽时显示蓝色指示线) │ │
│ │ (状态列: 启用-绿色标签, 禁用-灰色标签) │ │
│ │ (操作列: 文字按钮, 蓝色-编辑, 橙色-禁用/启用, 红色-删除) │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 分页组件 │ │
│ │ 共 12 条记录 < 1 2 3 ... 5 > 每页 10 条 ▼ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
新增/编辑板块弹窗：
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 新增板块 (Dialog, 宽度500px) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ✕ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 表单内容 │ │ │
│ │ │ │ │ │
│ │ │ 板块名称 * │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 请输入板块名称 │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ 板块图标 * │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 🔥 ▼ (Emoji选择器) │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ 板块描述 │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 请输入板块描述 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ 排序 │ │ │
│ │ │ ┌────────────────────────────────────────────┐ │ │ │
│ │ │ │ 0 ▲ ▼ │ │ │ │
│ │ │ └────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ 状态 │ │ │
│ │ │ ○ 启用 ● 禁用 │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 取消 │ │ 确定 │ │ │ │
│ │ │ │ (灰色) │ │ (蓝色) │ │ │ │
│ │ │ └────────┘ └────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
12.2.2 缘池社区 - 帖子管理界面
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 缘池社区 - 帖子管理 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 页面标题栏 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 📝 帖子管理 │ │ │
│ │ │ 审核和管理社区帖子内容 │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 数据统计卡片 (4列) │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ 全部帖子 │ │ 待审核 │ │ 已通过 │ │ 已拒绝 │ │ │
│ │ │ 12,580 │ │ 128 │ │ 11,892 │ │ 560 │ │ │
│ │ │ (蓝色) │ │ (橙色) │ │ (绿色) │ │ (红色) │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 搜索筛选栏 │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────────┐ │ │
│ │ │ 板块 ▼ │ │ 状态 ▼ │ │ 时间范围 │ │ 搜索内容/用户 │ │ │
│ │ │ 全部 │ │ 全部 │ │ 选择日期 │ │ 🔍 │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └────────────────────┘ │ │
│ │ │ │
│ │ ┌────────┐ ┌────────┐ ┌──────────────────────────────────────────────┐ │ │
│ │ │ 搜索 │ │ 重置 │ │ ☐ 只看置顶 ☐ 只看推荐 ☐ 只看有图/视频 │ │ │
│ │ └────────┘ └────────┘ └──────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 批量操作栏 │ │
│ │ 已选择 3 项 ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │
│ │ │批量通过│ │批量拒绝│ │批量置顶│ │批量删除│ │ │
│ │ │ (绿色) │ │ (橙色) │ │ (蓝色) │ │ (红色) │ │ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 数据表格 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │☐│ID │用户 │板块│内容预览 │图片│互动数据 │状态│时间 │操作│ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │☐│10001 │┌────┐ │游戏│今天吃鸡成功！│3张 │👍128 │待审│12-29 │查看│ │ │
│ │ │ │ ││头像│ │ │分享一下我的 │ │💬32 │核 │10:30 │通过│ │ │
│ │ │ │ │└────┘ │ │游戏心得... │ │⭐45 │(橙)│ │拒绝│ │ │
│ │ │ │ │小明 │ │ │ │ │ │ │删除│ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │☐│10002 │┌────┐ │美食│周末探店！发现│5张 │👍256 │已通│12-29 │查看│ │ │
│ │ │ │ ││头像│ │ │一家超好吃的 │ │💬48 │过 │09:15 │置顶│ │ │
│ │ │ │ │└────┘ │ │火锅店... │ │⭐89 │(绿)│ │推荐│ │ │
│ │ │ │ │小红 │ │ │ │ │📌 │ │删除│ │ │
│ │ ├────────────────────────────────────────────────────────────────────┤ │ │
│ │ │☐│10003 │┌────┐ │情感│最近心情不太好│0张 │👍12 │已拒│12-28 │查看│ │ │
│ │ │ │ ││头像│ │ │想找人聊聊... │ │💬5 │绝 │22:30 │恢复│ │ │
│ │ │ │ │└────┘ │ │ │ │⭐2 │(红)│ │删除│ │ │
│ │ │ │ │小李 │ │ │ │ │ │ │ │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (内容预览: 最多显示30字, 超出显示...) │ │
│ │ (图片列: 显示图片数量, 点击可预览) │ │
│ │ (状态标签: 待审核-橙色, 已通过-绿色, 已拒绝-红色) │ │
│ │ (置顶帖子显示📌图标) │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 分页组件 │ │
│ │ 共 12,580 条记录 < 1 2 3 ... 629 > 每页 20 条 ▼ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
帖子详情抽屉：
┌────────────────────────────────────────────────────────────────────────────────┐
│ ┌─────────┐│
│ │帖子详情 ││
│ │ (抽屉) ││
│ (主页面内容, 半透明遮罩) │ 宽400px ││
│ │ ││
│ │ ┌─────┐ ││
│ │ │ ✕ │ ││
│ │ └─────┘ ││
│ │ ││
│ │ 用户信息 ││
│ │ ┌─────┐ ││
│ │ │头像 │ ││
│ │ │小明 │ ││
│ │ │ID: │ ││
│ │ │1001 │ ││
│ │ └─────┘ ││
│ │ ││
│ │ 帖子内容 ││
│ │ ────── ││
│ │ 今天吃鸡││
│ │ 成功！ ││
│ │ 分享... ││
│ │ ││
│ │ 图片预览 ││
│ │ ┌─┬─┬─┐ ││
│ │ │1│2│3│ ││
│ │ └─┴─┴─┘ ││
│ │ ││
│ │ 互动数据 ││
│ │ 👍128 ││
│ │ 💬32 ││
│ │ ⭐45 ││
│ │ ││
│ │ 审核操作 ││
│ │ ┌─────┐ ││
│ │ │通过 │ ││
│ │ └─────┘ ││
│ │ ┌─────┐ ││
│ │ │拒绝 │ ││
│ │ └─────┘ ││
│ │ ││
│ └─────────┘│
└────────────────────────────────────────────────────────────────────────────────┘
12.2.3 许愿树 - 活动管理界面
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 许愿树 - 活动管理 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 页面标题栏 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 🎉 活动管理 ┌──────────┐ │ │ │
│ │ │ 配置和管理许愿树节日活动 │ + 新增活动│ │ │ │
│ │ │ │ (蓝色) │ │ │ │
│ │ │ └──────────┘ │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 活动状态Tab │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 全部 (8) │ │进行中 (2)│ │未开始 (3)│ │已结束 (3)│ │ │
│ │ │ (选中) │ │ │ │ │ │ │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 活动卡片列表 (卡片式布局, 3列) │ │
│ │ │ │
│ │ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ │ │
│ │ │ 🎄 元旦许愿活动 │ │ 🧧 春节祝福活动 │ │ 💕 情人节活动 │ │ │
│ │ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ (Banner预览图) │ │ │ │ (Banner预览图) │ │ │ │ (Banner预览图) │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └─────────────────┘ │ │ └─────────────────┘ │ │ └─────────────────┘ │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 状态: 🟢 进行中 │ │ 状态: 🟡 未开始 │ │ 状态: ⚫ 已结束 │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 时间: │ │ 时间: │ │ 时间: │ │ │
│ │ │ 12.31 - 01.03 │ │ 01.28 - 02.12 │ │ 02.13 - 02.15 │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 参与: 12,580人 │ │ 参与: 0人 │ │ 参与: 8,920人 │ │ │
│ │ │ 祝福: 35,680条 │ │ 祝福: 0条 │ │ 祝福: 25,430条 │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ ┌─────┐ ┌─────┐ │ │ ┌─────┐ ┌─────┐ │ │ ┌─────┐ ┌─────┐ │ │ │
│ │ │ │编辑 │ │统计 │ │ │ │编辑 │ │开启 │ │ │ │查看 │ │统计 │ │ │ │
│ │ │ └─────┘ └─────┘ │ │ └─────┘ └─────┘ │ │ └─────┘ └─────┘ │ │ │
│ │ │ ┌─────┐ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ │
│ │ │ │关闭 │ │删除 │ │ │ │删除 │ │ │ │复制 │ │ │ │
│ │ │ └─────┘ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ │
│ │ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘ │ │
│ │ │ │
│ │ (进行中: 绿色状态点, 未开始: 黄色状态点, 已结束: 灰色状态点) │ │
│ │ (卡片hover时显示阴影效果) │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
新增/编辑活动页面：
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 许愿树 - 新增活动 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 页面标题栏 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ ← 返回 新增活动 ┌────────────────┐│ │ │
│ │ │ │ 保存并发布 ││ │ │
│ │ │ │ (蓝色按钮) ││ │ │
│ │ │ └────────────────┘│ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 表单内容 (两列布局) │ │
│ │ │ │
│ │ ┌─────────────────────────────┐ ┌─────────────────────────────┐ │ │
│ │ │ 基本信息 │ │ Banner配置 │ │ │
│ │ │ ─────────────────────────── │ │ ─────────────────────────── │ │ │
│ │ │ │ │ │ │ │
│ │ │ 活动名称 * │ │ Banner图片 * │ │ │
│ │ │ ┌───────────────────────┐ │ │ ┌───────────────────────┐ │ │ │
│ │ │ │ 元旦许愿活动 │ │ │ │ ┌─────────────────┐ │ │ │ │
│ │ │ └───────────────────────┘ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ 点击上传图片 │ │ │ │ │
│ │ │ 关联节日 │ │ │ │ 建议尺寸: │ │ │ │ │
│ │ │ ┌───────────────────────┐ │ │ │ │ 750x300px │ │ │ │ │
│ │ │ │ 🎉 元旦 ▼ │ │ │ │ │ │ │ │ │ │
│ │ │ └───────────────────────┘ │ │ │ └─────────────────┘ │ │ │ │
│ │ │ │ │ └───────────────────────┘ │ │ │
│ │ │ 活动时间 * │ │ │ │ │
│ │ │ ┌───────────┐ 至 ┌───────┐ │ │ 主题颜色 │ │ │
│ │ │ │ 2024-12-31│ │01-03 │ │ │ ┌───────────────────────┐ │ │ │
│ │ │ └───────────┘ └───────┘ │ │ │ #FF6B6B 🎨 选择颜色 │ │ │ │
│ │ │ │ │ └───────────────────────┘ │ │ │
│ │ │ 活动描述 │ │ │ │ │
│ │ │ ┌───────────────────────┐ │ └─────────────────────────────┘ │ │
│ │ │ │ 许下新年愿望，赢取丰 │ │ │ │
│ │ │ │ 厚奖励！ │ │ ┌─────────────────────────────┐ │ │
│ │ │ │ │ │ │ 奖励配置 │ │ │
│ │ │ └───────────────────────┘ │ │ ─────────────────────────── │ │ │
│ │ │ │ │ │ │ │
│ │ └─────────────────────────────┘ │ ┌───────────────────────┐ │ │ │
│ │ │ │ + 添加奖励项 │ │ │ │
│ │ ┌─────────────────────────────┐ │ └───────────────────────┘ │ │ │
│ │ │ 活动规则 │ │ │ │ │
│ │ │ ─────────────────────────── │ │ 🥇 第1名: 1000金币 │ │ │
│ │ │ │ │ 🥈 第2名: 500金币 │ │ │
│ │ │ ┌───────────────────────┐ │ │ 🥉 第3名: 300金币 │ │ │
│ │ │ │ + 添加规则 │ │ │ │ │ │
│ │ │ └───────────────────────┘ │ │ (可拖拽排序, 可删除) │ │ │
│ │ │ │ │ │ │ │
│ │ │ • 每人每天可发布3条祝福 │ └─────────────────────────────┘ │ │
│ │ │ • 获赞最多的祝福可获得奖励 │ │ │
│ │ │ • 分享活动可获得额外金币 │ │ │
│ │ │ │ │ │
│ │ │ (可拖拽排序, 可删除) │ │ │
│ │ └─────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
12.2.4 许愿树 - 祝福管理界面
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 许愿树 - 祝福管理 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 页面标题栏 │ │
│ │ ┌────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ ✨ 祝福管理 │ │ │
│ │ │ 审核和管理用户发布的祝福内容 │ │ │
│ │ └────────────────────────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 数据统计卡片 │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ 全部祝福 │ │ 待审核 │ │ 已通过 │ │ 已拒绝 │ │ │
│ │ │ 35,680 │ │ 256 │ │ 34,892 │ │ 532 │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 搜索筛选栏 │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐ │ │
│ │ │ 节日 ▼ │ │ 活动 ▼ │ │ 类型 ▼ │ │ 状态 ▼ │ │ 搜索内容/用户 │ │ │
│ │ │ 全部 │ │ 全部 │ │ 全部 │ │ 全部 │ │ 🔍 │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └────────────────┘ │ │
│ │ │ │
│ │ ┌────────┐ ┌────────┐ │ │
│ │ │ 搜索 │ │ 重置 │ │ │
│ │ └────────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 祝福卡片列表 (卡片式布局, 可切换为表格) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ ☐ 祝福卡片 │ │ │
│ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │
│ │ │ │ ╔═══════════════════════════════════════════════════════════╗ │ │ │ │
│ │ │ │ ║ (节日主题背景预览) ║ │ │ │ │
│ │ │ │ ║ ║ │ │ │ │
│ │ │ │ ║ ┌────┐ 小明 · 元旦祝福 · 许愿 ║ │ │ │ │
│ │ │ │ ║ │头像│ 2024-12-29 10:30 ║ │ │ │ │
│ │ │ │ ║ └────┘ ║ │ │ │ │
│ │ │ │ ║ ║ │ │ │ │
│ │ │ │ ║ 🎉 新年快乐！愿新的一年万事如意，心想事成！ ║ │ │ │ │
│ │ │ │ ║ ║ │ │ │ │
│ │ │ │ ╚═══════════════════════════════════════════════════════════╝ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 互动数据: ❤️ 256 💬 48 🎁 15 │ │ │ │
│ │ │ │ 状态: 🟢 已通过 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │
│ │ │ │ │ 查看 │ │ 推荐 │ │ 拒绝 │ │ 删除 │ │ │ │ │
│ │ │ │ │ (蓝色) │ │ (绿色) │ │ (橙色) │ │ (红色) │ │ │ │ │
│ │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │ │
│ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (更多祝福卡片...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 分页组件 │ │
│ │ 共 35,680 条记录 < 1 2 3 ... 1784 > 每页 20 条 ▼ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
12.2.5 许愿树 - 素材管理界面
┌────────────────────────────────────────────────────────────────────────────────┐
│ 管理端 - 许愿树 - 素材管理 │
├────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ Tab切换 │ │
│ │ ┌──────────────────┐ ┌──────────────────┐ │ │
│ │ │ 🖼️ 背景模板 (24) │ │ ✨ 装饰素材 (48) │ │ │
│ │ │ (选中) │ │ │ │ │
│ │ └──────────────────┘ └──────────────────┘ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 操作栏 │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────────┐│ │
│ │ │ 节日筛选 ▼ │ │ 状态筛选 ▼ │ │ + 上传背景模板 ││ │
│ │ │ 全部 │ │ 全部 │ │ (蓝色按钮) ││ │
│ │ └──────────────┘ └──────────────┘ └──────────────────┘│ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
│ │ 素材卡片网格 (4列) │ │
│ │ │ │
│ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ┌────────────┐ │ │
│ │ │ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────┐ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ 背景预览 │ │ │ │ 背景预览 │ │ │ │ 背景预览 │ │ │ │ 背景 │ │ │ │
│ │ │ │ (渐变红) │ │ │ │ (渐变金) │ │ │ │ (星空) │ │ │ │ 预览 │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └────────────┘ │ │ └────────────┘ │ │ └────────────┘ │ │ └────────┘ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ 新年红 │ │ 金色祝福 │ │ 星空许愿 │ │ 烟花绽放 │ │ │
│ │ │ 🎉 元旦 │ │ 🧧 春节 │ │ ✨ 通用 │ │ 🎉 元旦 │ │ │
│ │ │ 免费 │ │ 免费 │ │ 10金币 │ │ 20金币 │ │ │
│ │ │ 🟢 启用 │ │ 🟢 启用 │ │ 🟢 启用 │ │ ⚫ 禁用 │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ │ │ │
│ │ │ │编辑│ │删除│ │ │ │编辑│ │删除│ │ │ │编辑│ │删除│ │ │ │启用│ │ │ │
│ │ │ └────┘ └────┘ │ │ └────┘ └────┘ │ │ └────┘ └────┘ │ │ └────┘ │ │ │
│ │ └────────────────┘ └────────────────┘ └────────────────┘ └────────────┘ │ │
│ │ │ │
│ │ (更多素材卡片...) │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────────┘
上传素材弹窗：
┌────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 上传背景模板 (Dialog, 宽度600px) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 图片上传区域 │ │ │
│ │ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 📤 点击或拖拽上传 │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ 支持 JPG、PNG 格式 │ │ │ │
│ │ │ │ 建议尺寸: 750x1200px │ │ │ │
│ │ │ │ 最大: 2MB │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └────────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 素材名称 * │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 请输入素材名称 │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 关联节日 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 请选择节日 ▼ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 价格设置 │ │
│ │ ○ 免费 ● 付费 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 10 金币 │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 排序 │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 0 ▲ ▼ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 取消 │ │ 确定 │ │ │ │
│ │ │ └────────┘ └────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
12.2.6 直播模块界面设计（核心功能）
由于直播是平台的核心业务，本节详细描述直播相关的所有界面设计。
十三、直播模块详细界面设计（核心）
直播功能是整个平台的核心，包括直播首页、直播间观看、开播推流、礼物打赏、弹幕互动等完整功能链路。
13.1 移动端直播界面
13.1.1 直播首页界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 (沉浸式, 透明) │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 (高度: 56dp, 背景: #FFFFFF) │ │
│ │ ┌────┐ ┌──────────────────────────────┐ ┌────┐ ┌────┐ │ │
│ │ │ ☰ │ │ 🔍 搜索主播、房间... │ │ 📷 │ │ 👤 │ │ │
│ │ │菜单│ │ (搜索框, 圆角20dp, #F5F5F5) │ │扫码│ │头像│ │ │
│ │ └────┘ └──────────────────────────────┘ └────┘ └────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部Tab切换 (高度: 44dp) │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 关注 │ │ 推荐 │ │ 附近 │ │ │
│ │ │ (选中) │ │ │ │ │ │ │
│ │ │ #FF6B6B │ │ #666666 │ │ #666666 │ │ │
│ │ │ ════════ │ │ │ │ │ │ │
│ │ └──────────┘ └──────────┘ └──────────┘ │ │
│ │ (选中Tab下方有3dp红色指示条) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 分类标签栏 (高度: 40dp, 可横向滑动) │ │
│ │ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐ │ │
│ │ │全部││热门││游戏││才艺││户外││音乐││聊天││更多│ │ │
│ │ │选中││ ││ 🎮 ││ 🎤 ││ 🏕️ ││ 🎵 ││ 💬 ││ ··· │ │ │
│ │ └────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘ │ │
│ │ (选中: 背景#FF6B6B, 白色文字, 圆角12dp) │ │
│ │ (未选中: 背景透明, #666666文字) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 直播间列表 (瀑布流布局, 2列) │ │
│ │ │ │
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
│ │ │ 直播间卡片 │ │ 直播间卡片 │ │ │
│ │ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ 封面图片 │ │ │ │ 封面图片 │ │ │ │
│ │ │ │ (圆角12dp) │ │ │ │ (圆角12dp) │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ │ ┌─────────────┐ │ │ │ │ ┌─────────────┐ │ │ │ │
│ │ │ │ │🔴 直播中 │ │ │ │ │ │👁 12.5万 │ │ │ │ │
│ │ │ │ │(左上角标签) │ │ │ │ │ │(右上角人数) │ │ │ │ │
│ │ │ │ └─────────────┘ │ │ │ │ └─────────────┘ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └─────────────────┘ │ │ └─────────────────┘ │ │ │
│ │ │ │ │ │ │ │
│ │ │ 王者荣耀五排上分 │ │ 深夜唱歌陪伴 │ │ │
│ │ │ (标题: 14sp, 最多2行)│ │ (标题: 14sp) │ │ │
│ │ │ │ │ │ │ │
│ │ │ ┌────┐ 小明 │ │ ┌────┐ 小红 │ │ │
│ │ │ │头像│ (主播名) │ │ │头像│ (主播名) │ │ │
│ │ │ │24dp│ │ │ │24dp│ │ │ │
│ │ │ └────┘ │ │ └────┘ │ │ │
│ │ └─────────────────────┘ └─────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
│ │ │ (更多直播间卡片...) │ │ (更多直播间卡片...) │ │ │
│ │ └─────────────────────┘ └─────────────────────┘ │ │
│ │ │ │
│ │ (支持下拉刷新, 上拉加载更多) │ │
│ │ (卡片点击进入直播间) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 开播悬浮按钮 (右下角, 距边缘16dp) │ │
│ │ ┌──────────┐ │ │
│ │ │ 📹 │ │ │
│ │ │ 开播 │ │ │
│ │ │ 56dp │ │ │
│ │ │ #FF6B6B │ │ │
│ │ │ 阴影6dp │ │ │
│ │ └──────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ 底部导航栏 (高度: 56dp) │
│ ┌──────────┬──────────┬──────────┬──────────┬──────────┐ │
│ │ 🏠 │ 🎣 │ 🌳 │ 💬 │ 👤 │ │
│ │ 首页 │ 缘池 │ 许愿树 │ 消息 │ 我的 │ │
│ │ #FF6B6B │ #999999 │ #999999 │ #999999 │ #999999 │ │
│ └──────────┴──────────┴──────────┴──────────┴──────────┘ │
└────────────────────────────────────────────────────────────────┘
直播间卡片设计规范：
| 元素 | 规格 | 说明 |
|---|---|---|
| 卡片宽度 | (屏幕宽度-48dp)/2 | 两列瀑布流 |
| 封面比例 | 3:4 | 竖版封面 |
| 封面圆角 | 12dp | 顶部圆角 |
| 直播标签 | 左上角, 背景#FF4D4F | 显示"直播中" |
| 观看人数 | 右上角, 半透明黑背景 | 显示观看人数 |
| 标题字号 | 14sp | 最多显示2行 |
| 主播头像 | 24dp圆形 | 左下角 |
| 主播名称 | 12sp, #666666 | 头像右侧 |
13.1.2 直播间观看界面（竖屏模式）
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 (透明, 沉浸式) │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 视频播放区域 (全屏背景) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ 直播视频流画面 │ │ │
│ │ │ (ExoPlayer/IjkPlayer) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 顶部信息栏 (半透明渐变背景, 从上到下) │ │ │
│ │ │ ┌────┐ ┌────┐ │ │ │
│ │ │ │ ← │ │ ✕ │ │ │ │
│ │ │ │返回│ │关闭│ │ │ │
│ │ │ └────┘ └────┘ │ │ │
│ │ │ │ │ │
│ │ │ ┌──────────────────────────────────────────────┐ │ │ │
│ │ │ │ 主播信息卡片 (圆角20dp, 半透明黑背景) │ │ │ │
│ │ │ │ ┌────┐ ┌──────┐ │ │ │ │
│ │ │ │ │头像│ 小明 │+ 关注│ │ │ │ │
│ │ │ │ │48dp│ 🔴 直播中 · 👁 12.5万 │ 按钮 │ │ │ │ │
│ │ │ │ │圆形│ (在线人数实时更新) │ │ │ │ │ │
│ │ │ │ └────┘ └──────┘ │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ │ ┌──────────────────────────────────────────────┐ │ │ │
│ │ │ │ 房间标题: 王者荣耀五排上分，来一起玩！ │ │ │ │
│ │ │ │ (白色文字, 16sp, 带阴影) │ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 功能按钮区 (右侧垂直排列) │ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │ 🔊 │ │ │ │
│ │ │ │音量│ │ │ │
│ │ │ └────┘ │ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │ ⛶ │ │ │ │
│ │ │ │全屏│ │ │ │
│ │ │ └────┘ │ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │ ↗ │ │ │ │
│ │ │ │分享│ │ │ │
│ │ │ └────┘ │ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │ ··· │ │ │ │
│ │ │ │更多│ │ │ │
│ │ │ └────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 弹幕显示区域 (覆盖在视频上方, 从下往上滚动) │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 🎁 小红 送出 火箭x1 │ │ │
│ │ │ (礼物消息: 金色背景, 特殊样式) │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 小明: 主播打得真好！ │ │ │
│ │ │ (普通弹幕: 白色文字, 半透明黑背景, 圆角16dp) │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 👑 VIP用户: 支持主播！ │ │ │
│ │ │ (VIP弹幕: 金色边框, 特殊标识) │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 🎉 欢迎 小李 进入直播间 │ │ │
│ │ │ (系统消息: 蓝色文字) │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (弹幕从底部进入, 向上滚动, 最多显示10条) │ │
│ │ (新弹幕有淡入动画, 旧弹幕淡出) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 礼物特效层 (全屏覆盖, 播放礼物动画) │ │
│ │ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ 🚀 │ │ │
│ │ │ 火箭特效动画 │ │ │
│ │ │ (Lottie/SVGA动画) │ │ │
│ │ └─────────────────────────┘ │ │
│ │ │ │
│ │ (大礼物: 全屏动画, 持续3-5秒) │ │
│ │ (小礼物: 右侧飘过动画) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 底部互动栏 (高度: 56dp, 半透明黑背景) │ │
│ │ ┌────────────────────────┐ ┌────┐ ┌────┐ ┌────────────┐ │ │
│ │ │ 说点什么... │ │ 💬 │ │ 🎁 │ │ 💰 1280 │ │ │
│ │ │ (弹幕输入框) │ │弹幕│ │礼物│ │ (余额) │ │ │
│ │ │ (圆角20dp, 半透明) │ │开关│ │面板│ │ 充值入口 │ │ │
│ │ └────────────────────────┘ └────┘ └────┘ └────────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
12.3.1 移动端设计规范
| 设计元素 | 规格 | 说明 |
|---|---|---|
| 颜色规范 | ||
| 主题色 | #FF6B6B | 用于按钮、选中状态、强调元素 |
| 辅助色 | #FF8E8E | 用于渐变、hover状态 |
| 成功色 | #52C41A | 用于成功提示、通过状态 |
| 警告色 | #FAAD14 | 用于警告提示、待审核状态 |
| 错误色 | #FF4D4F | 用于错误提示、拒绝状态 |
| 文字主色 | #333333 | 用于标题、正文 |
| 文字次色 | #666666 | 用于次要文字、描述 |
| 文字辅助色 | #999999 | 用于提示文字、时间 |
| 背景色 | #F5F5F5 | 用于页面背景、分割区域 |
| 卡片背景 | #FFFFFF | 用于卡片、弹窗背景 |
| 字体规范 | ||
| 大标题 | 18sp, 加粗 | 页面标题 |
| 标题 | 16sp, 加粗 | 卡片标题、区块标题 |
| 正文 | 15sp, 常规 | 帖子内容、祝福内容 |
| 次要文字 | 14sp, 常规 | 用户名、标签 |
| 辅助文字 | 13sp, 常规 | 时间、位置、统计数据 |
| 小文字 | 12sp, 常规 | 标签、按钮文字 |
| 底部导航 | 10sp, 常规 | Tab文字 |
| 间距规范 | ||
| 页面边距 | 16dp | 左右边距 |
| 卡片间距 | 12dp | 卡片之间的间距 |
| 内容间距 | 8dp | 元素之间的间距 |
| 紧凑间距 | 4dp | 紧密排列的元素 |
| 圆角规范 | ||
| 大圆角 | 16dp | 卡片、弹窗 |
| 中圆角 | 12dp | 按钮、输入框 |
| 小圆角 | 8dp | 图片、标签 |
| 全圆角 | 50% | 头像、圆形按钮 |
| 阴影规范 | ||
| 轻阴影 | 2dp | 卡片默认阴影 |
| 中阴影 | 4dp | 悬浮按钮、弹窗 |
| 重阴影 | 8dp | 底部操作栏 |
12.3.2 管理端设计规范
| 设计元素 | 规格 | 说明 |
|---|---|---|
| 颜色规范 | ||
| 主题色 | #409EFF | Element UI默认蓝色 |
| 成功色 | #67C23A | 通过、启用状态 |
| 警告色 | #E6A23C | 待审核、警告状态 |
| 危险色 | #F56C6C | 拒绝、删除操作 |
| 信息色 | #909399 | 禁用、次要信息 |
| 文字主色 | #303133 | 标题、正文 |
| 文字次色 | #606266 | 次要文字 |
| 文字辅助色 | #909399 | 提示文字 |
| 边框色 | #DCDFE6 | 输入框、表格边框 |
| 背景色 | #F5F7FA | 页面背景 |
| 字体规范 | ||
| 页面标题 | 20px, 加粗 | 页面主标题 |
| 卡片标题 | 16px, 加粗 | 卡片、区块标题 |
| 正文 | 14px, 常规 | 表格内容、表单 |
| 辅助文字 | 12px, 常规 | 提示、描述 |
| 组件规范 | ||
| 表格行高 | 48px | 数据表格 |
| 按钮高度 | 32px/36px/40px | 小/中/大按钮 |
| 输入框高度 | 32px/36px/40px | 小/中/大输入框 |
| 卡片圆角 | 4px | Element UI默认 |
| 弹窗宽度 | 500px/600px/800px | 小/中/大弹窗 |
12.3.3 动画效果规范
| 动画类型 | 时长 | 缓动函数 | 应用场景 |
|---|---|---|---|
| 页面切换 | 300ms | ease-in-out | Activity切换 |
| 弹窗显示 | 250ms | ease-out | 底部弹窗、对话框 |
| 弹窗隐藏 | 200ms | ease-in | 关闭弹窗 |
| 按钮点击 | 150ms | ease | 按钮缩放反馈 |
| 列表项 | 200ms | ease | 列表项进入动画 |
| 点赞动画 | 300ms | spring | 心跳效果 |
| 加载动画 | 1000ms | linear | 循环加载 |
| 刷新动画 | 500ms | ease-out | 下拉刷新 |
| 许愿树装饰 | 2000ms | ease-in-out | 呼吸灯效果 |
| 祝福卡片 | 400ms | spring | 弹出缩放 |
12.3.4 交互反馈规范
| 交互类型 | 反馈方式 | 说明 |
|---|---|---|
| 按钮点击 | 缩放+颜色变化 | 0.95缩放，颜色加深 |
| 列表点击 | 背景色变化 | 显示#F5F5F5背景 |
| 长按操作 | 震动+菜单 | 50ms震动，显示操作菜单 |
| 下拉刷新 | 加载动画+文字 | 显示"正在刷新..." |
| 上拉加载 | 加载动画+文字 | 显示"加载中..." |
| 操作成功 | Toast提示 | 显示2秒后消失 |
| 操作失败 | Toast提示 | 显示错误信息 |
| 网络错误 | 空状态页面 | 显示重试按钮 |
| 无数据 | 空状态页面 | 显示引导文字 |
界面设计描述完成
本章节提供了移动端和管理端所有核心界面的详细设计描述，包括布局结构、颜色规范、字体规范、间距规范、动画效果等，可作为UI设计和前端开发的参考依据。
报告完成
建议按照开发计划分阶段实施，优先完成核心功能
13.1.3 直播间观看界面（横屏全屏模式）
┌──────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ 直播视频流画面 (全屏) │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 顶部控制栏 (半透明渐变, 自动隐藏) │ │ │
│ │ │ ┌────┐ ┌────┐ │ │ │
│ │ │ │ ← │ 王者荣耀五排上分 │ ✕ │ │ │ │
│ │ │ │返回│ 小明 · 👁 12.5万 │关闭│ │ │ │
│ │ │ └────┘ └────┘ │ │ │
│ │ └──────────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 弹幕显示区域 (左侧, 宽度40%) │ │ │
│ │ │ │ │ │
│ │ │ ┌────────────────────────────────────┐ │ │ │
│ │ │ │ 小明: 主播打得真好！ │ │ │ │
│ │ │ └────────────────────────────────────┘ │ │ │
│ │ │ ┌────────────────────────────────────┐ │ │ │
│ │ │ │ 小红: 666666 │ │ │ │
│ │ │ └────────────────────────────────────┘ │ │ │
│ │ │ ┌────────────────────────────────────┐ │ │ │
│ │ │ │ 🎁 小李 送出 爱心x10 │ │ │ │
│ │ │ └────────────────────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ └──────────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ 底部控制栏 (半透明, 自动隐藏) │ │ │
│ │ │ ┌──────────────────────────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────────┐ │ │ │
│ │ │ │ 说点什么... │ │ 💬 │ │ 🎁 │ │ 🔊 │ │ ⛶ │ │ ↗ │ │ + 关注 │ │ │ │
│ │ │ │ (弹幕输入) │ │弹幕│ │礼物│ │音量│ │竖屏│ │分享│ │ │ │ │ │
│ │ │ └──────────────────────────┘ └────┘ └────┘ └────┘ └────┘ └────┘ └────────┘ │ │ │
│ │ └──────────────────────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────────┘
横屏模式交互说明：
- 点击屏幕中央：显示/隐藏控制栏（3秒后自动隐藏）
- 双击屏幕：暂停/播放
- 左右滑动：调节进度（仅回放模式）
- 上下滑动左侧：调节亮度
- 上下滑动右侧：调节音量
- 弹幕区域可拖拽调整位置
13.1.4 礼物面板界面
┌────────────────────────────────────────────────────────────────┐
│ │
│ (直播间画面, 半透明遮罩) │
│ │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 礼物面板 (底部弹窗, 高度55%, 圆角顶部16dp) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 顶部信息栏 │ │ │
│ │ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ │ 🎁 礼物 💰 余额: 1280 │ │ │ │
│ │ │ │ ┌──────────┐ │ │ │ │
│ │ │ │ │ 充值 > │ │ │ │ │
│ │ │ │ └──────────┘ │ │ │ │
│ │ │ └────────────────────────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 礼物分类Tab │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 热门 │ │ 浪漫 │ │ 豪华 │ │ 特效 │ │ │ │
│ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 礼物列表 (网格布局, 4列, 可滚动) │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ ❤️ │ │ 🌹 │ │ 💋 │ │ 🍭 │ │ │ │
│ │ │ │ 爱心 │ │ 玫瑰 │ │ 么么 │ │ 棒棒糖│ │ │ │
│ │ │ │ 1金币 │ │ 5金币 │ │ 10金币│ │ 20金币│ │ │ │
│ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │
│ │ │ │边框红色│ │ │ │ │ │ │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 🎁 │ │ 🚗 │ │ 🚀 │ │ 🏆 │ │ │ │
│ │ │ │ 礼盒 │ │ 跑车 │ │ 火箭 │ │ 奖杯 │ │ │ │
│ │ │ │ 50金币│ │ 100金币│ │ 500金币│ │1000金币│ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 👑 │ │ 🏰 │ │ 🎆 │ │ 🌈 │ │ │ │
│ │ │ │ 皇冠 │ │ 城堡 │ │ 烟花 │ │ 彩虹 │ │ │ │
│ │ │ │2000金币│ │5000金币│ │9999金币│ │ 52000 │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ │ │ │
│ │ │ (每个礼物: 80x100dp, 圆角8dp, 背景#F8F8F8) │ │ │
│ │ │ (选中: 边框2dp #FF6B6B, 背景#FFF5F5) │ │ │
│ │ │ (礼物图标: 48dp, 居中显示) │ │ │
│ │ │ (礼物名称: 12sp, #333333) │ │ │
│ │ │ (礼物价格: 11sp, #FF6B6B) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 数量选择和发送 │ │ │
│ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌─────────┐ │ │ │
│ │ │ │ 1 │ │ 10 │ │ 66 │ │ 99 │ │520 │ │ 赠送 │ │ │ │
│ │ │ │选中│ │ │ │ │ │ │ │ │ │ ❤️ x1 │ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ (1金币) │ │ │ │
│ │ │ └────┘ └────┘ └────┘ └────┘ └────┘ │ #FF6B6B │ │ │ │
│ │ │ └─────────┘ │ │ │
│ │ │ (数量选择: 圆角16dp, 选中背景#FF6B6B白色文字) │ │ │
│ │ │ (赠送按钮: 渐变背景, 圆角24dp, 宽度120dp) │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
礼物连送效果：
┌────────────────────────────────────────────────────────────────┐
│ │
│ 连送礼物时, 在屏幕左侧显示连击效果: │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 连击显示区 (左侧, 距顶部30%) │ │
│ │ │ │
│ │ ┌────────────────────────────────────────┐ │ │
│ │ │ ┌────┐ │ │ │
│ │ │ │头像│ 小明 送出 │ │ │
│ │ │ │32dp│ │ │ │
│ │ │ └────┘ ❤️ 爱心 │ │ │
│ │ │ │ │ │
│ │ │ x 10 │ │ │
│ │ │ (连击数字, 放大动画) │ │ │
│ │ │ (金色渐变, 字号48sp) │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────┘ │ │
│ │ │ │
│ │ (连击卡片: 半透明黑背景, 圆角12dp) │ │
│ │ (连击数字有缩放弹跳动画) │ │
│ │ (3秒无操作后淡出消失) │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────┘
13.1.5 开播准备界面
┌────────────────────────────────────────────────────────────────┐
│ 状态栏 │
├────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 顶部导航栏 │ │
│ │ ┌────┐ ┌────────┐ │ │
│ │ │ ← │ 开始直播 │ 开播 │ │ │
│ │ │返回│ │ #FF6B6B│ │ │
│ │ └────┘ └────────┘ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 摄像头预览区域 (高度: 50%屏幕) │ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ 摄像头实时预览画面 │ │ │
│ │ │ (前置/后置摄像头) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ │ ┌────┐ ┌────┐ │ │ │
│ │ │ │ 🔄 │ │ ✨ │ │ │ │
│ │ │ │翻转│ │美颜│ │ │ │
│ │ │ │摄像│ │滤镜│ │ │ │
│ │ │ └
#### 13.1.5 开播准备界面
┌────────────────────────────────────────────────────────────────┐ │ 状态栏 │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 顶部导航栏 │ │ │ │ ┌────┐ ┌────────┐ │ │ │ │ │ ← │ 开始直播 │ 开播 │ │ │ │ │ │返回│ │ #FF6B6B│ │ │ │ │ └────┘ └────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 摄像头预览区域 (高度: 280dp, 圆角: 16dp) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 摄像头实时预览画面 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌────┐ ┌────┐ │ │ │ │ │ │ │ 🔄 │ │ ✨ │ │ │ │ │ │ │ │翻转│ │美颜│ │ │ │ │ │ │ │摄像│ │滤镜│ │ │ │ │ │ │ └────┘ └────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 直播设置表单 │ │ │ │ │ │ │ │ 直播封面 * │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ┌──────────┐ │ │ │ │ │ │ │ │ 点击上传封面图片 │ │ │ │ │ │ │ 📷 + │ 建议尺寸: 750x1000 │ │ │ │ │ │ │ │ 支持JPG、PNG格式 │ │ │ │ │ │ │ 120x160 │ │ │ │ │ │ │ │ 圆角8dp │ │ │ │ │ │ │ └──────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ 直播标题 * │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 请输入直播标题，吸引更多观众 │ │ │ │ │ │ (最多30字) 0/30 │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ 直播分类 * │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 请选择分类 ▼ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ 直播标签 │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │ │ │ │ #王者 │ │ #五排 │ │ #上分 │ │ + 添加│ │ │ │ │ │ │ │ 荣耀 │ │ │ │ │ │ 标签 │ │ │ │ │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │ │ │ │ (标签: 圆角16dp, 背景#F5F5F5, 可删除) │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ 直播公告 │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 输入直播间公告，让观众了解直播内容 │ │ │ │ │ │ │ │ │ │ │ │ 0/200 │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ 直播设置 │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 🔒 仅粉丝可看 ○ 关闭 │ │ │ │ │ ├────────────────────────────────────────────────────┤ │ │ │ │ │ 📍 显示位置 ● 开启 │ │ │ │ │ ├────────────────────────────────────────────────────┤ │ │ │ │ │ 💬 开启弹幕 ● 开启 │ │ │ │ │ ├────────────────────────────────────────────────────┤ │ │ │ │ │ 🎁 开启礼物 ● 开启 │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 底部开播按钮 (固定底部) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ 🎬 开始直播 │ │ │ │ │ │ (渐变背景, 圆角24dp) │ │ │ │ │ │ (宽度: 100%-32dp, 高度: 48dp) │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘
**分类选择弹窗：**
┌────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 选择直播分类 (底部弹窗) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ──────────── 选择分类 ──────────── │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 分类网格 (3列) │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ 🎮 │ │ 🎤 │ │ 🎵 │ │ │ │ │ │ │ │ 游戏 │ │ 才艺 │ │ 音乐 │ │ │ │ │ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ 🏕️ │ │ 💬 │ │ 📚 │ │ │ │ │ │ │ │ 户外 │ │ 聊天 │ │ 学习 │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ 🍳 │ │ 💪 │ │ 🎨 │ │ │ │ │ │ │ │ 美食 │ │ 健身 │ │ 绘画 │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘
#### 13.1.6 主播开播中界面
┌────────────────────────────────────────────────────────────────┐ │ 状态栏 (透明) │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 摄像头画面 (全屏) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 顶部状态栏 (半透明渐变背景) │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ │ 直播信息卡片 │ │ │ │ │ │ │ │ ┌────┐ ┌────────┐ │ │ │ │ │ │ │ │ │头像│ 我的直播间 │ 🔴 LIVE│ │ │ │ │ │ │ │ │ │48dp│ 👁 1,280 在线 │ 02:35:18│ │ │ │ │ │ │ │ │ └────┘ │(直播时长)│ │ │ │ │ │ │ │ │ └────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ │ 实时数据 │ │ │ │ │ │ │ │ 💰 收益: 2,580 │ 👥 新增粉丝: 128 │ │ │ │ │ │ │ │ (半透明背景, 圆角8dp) │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 右侧工具栏 (垂直排列) │ │ │ │ │ │ ┌────┐ │ │ │ │ │ │ │ 🔄 │ │ │ │ │ │ │ │翻转│ │ │ │ │ │ │ └────┘ │ │ │ │ │ │ ┌────┐ │ │ │ │ │ │ │ ✨ │ │ │ │ │ │ │ │美颜│ │ │ │ │ │ │ └────┘ │ │ │ │ │ │ ┌────┐ │ │ │ │ │ │ │ 🎵 │ │ │ │ │ │ │ │音乐│ │ │ │ │ │ │ └────┘ │ │ │ │ │ │ ┌────┐ │ │ │ │ │ │ │ 📢 │ │ │ │ │ │ │ │公告│ │ │ │ │ │ │ └────┘ │ │ │ │ │ │ ┌────┐ │ │ │ │ │ │ │ ⚙️ │ │ │ │ │ │ │ │设置│ │ │ │ │ │ │ └────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 弹幕显示区域 (左侧) │ │ │ │ │ │ │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ │ │ 🎉 欢迎 小明 进入直播间 │ │ │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ │ │ 小红: 主播好漂亮！ │ │ │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ │ │ 🎁 小李 送出 玫瑰x10 │ │ │ │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 底部控制栏 (高度: 80dp, 半透明黑背景) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 弹幕输入框 │ │ │ │ │ │ ┌────────────────────────────────────────────────┐ │ │ │ │ │ │ │ 和观众互动一下吧... │ │ │ │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 功能按钮 │ │ │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌──────────────────┐ │ │ │ │ │ │ │ 💬 │ │ 🎁 │ │ 👥 │ │ 📊 │ │ 结束直播 │ │ │ │ │ │ │ │弹幕│ │礼物│ │观众│ │数据│ │ (红色按钮) │ │ │ │ │ │ │ │开关│ │记录│ │列表│ │统计│ │ │ │ │ │ │ │ │ └────┘ └────┘ └────┘ └────┘ └──────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘
**美颜滤镜面板：**
┌────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 美颜滤镜面板 (底部弹窗, 高度40%) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ Tab切换 │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ 美颜 │ │ 滤镜 │ │ 贴纸 │ │ │ │ │ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 美颜选项 │ │ │ │ │ │ │ │ │ │ │ │ 磨皮 │ │ │ │ │ │ ○────────────────────●──────────────────○ │ │ │ │ │ │ 0 70 100 │ │ │ │ │ │ │ │ │ │ │ │ 美白 │ │ │ │ │ │ ○──────────────●────────────────────────○ │ │ │ │ │ │ 0 50 100 │ │ │ │ │ │ │ │ │ │ │ │ 瘦脸 │ │ │ │ │ │ ○────────●──────────────────────────────○ │ │ │ │ │ │ 0 30 100 │ │ │ │ │ │ │ │ │ │ │ │ 大眼 │ │ │ │ │ │ ○──────────────────●────────────────────○ │ │ │ │ │ │ 0 60 100 │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ┌────────┐ ┌────────┐ │ │ │ │ │ │ │ 重置 │ │ 确定 │ │ │ │ │ │ │ └────────┘ └────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘
#### 13.1.7 直播结束统计界面
┌────────────────────────────────────────────────────────────────┐ │ 状态栏 │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 直播结束页面 (背景: 渐变色) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 顶部信息 │ │ │ │ │ │ │ │ │ │ │ │ ┌────────┐ │ │ │ │ │ │ │ 头像 │ │ │ │ │ │ │ │ 80dp │ │ │ │ │ │ │ │ 圆形 │ │ │ │ │ │ │ └────────┘ │ │ │ │ │ │ │ │ │ │ │ │ 本场直播已结束 │ │ │ │ │ │ (标题: 20sp, 白色, 加粗) │ │ │ │ │ │ │ │ │ │ │ │ 直播时长: 02:35:18 │ │ │ │ │ │ (副标题: 14sp, 白色80%) │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 数据统计卡片 (白色背景, 圆角16dp, 阴影) │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ │ 核心数据 (4列) │ │ │ │ │ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │ │ │ │ │ │ │ 12,580 │ │ 2,580 │ │ 128 │ │ 3,560 │ │ │ │ │ │ │ │ │ │ 观看人数│ │ 礼物收益│ │ 新增粉丝│ │ 弹幕数 │ │ │ │ │ │ │ │ │ │ (蓝色) │ │ (金色) │ │ (红色) │ │ (绿色) │ │ │ │ │ │ │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ ───────────────────────────────────────────────── │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ │ 详细数据 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 最高在线人数 1,280 │ │ │ │ │ │ │ │ 平均观看时长 8分32秒 │ │ │ │ │ │ │ │ 点赞数 5,680 │ │ │ │ │ │ │ │ 分享次数 256 │ │ │ │ │ │ │ │ 新增关注 128 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ ───────────────────────────────────────────────── │ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ │ 礼物榜单 TOP3 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 🥇 小明 送出 1,280 金币 │ │ │ │ │ │ │ │ 🥈 小红 送出 680 金币 │ │ │ │ │ │ │ │ 🥉 小李 送出 320 金币 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 查看完整榜单 > │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 底部按钮 │ │ │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ │ │ │ │ │ │ │ 分享战绩 │ │ 返回首页 │ │ │ │ │ │ │ │ (白色边框) │ │ (白色背景) │ │ │ │ │ │ │ └──────────────────┘ └──────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘
#### 13.1.8 充值界面
┌────────────────────────────────────────────────────────────────┐ │ 状态栏 │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 顶部导航栏 │ │ │ │ ┌────┐ │ │ │ │ │ ← │ 充值中心 │ │ │ │ │返回│ │ │ │ │ └────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 余额显示卡片 (渐变背景, 圆角16dp) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ 💰 我的金币 │ │ │ │ │ │ │ │ │ │ │ │ 1,280 │ │ │ │ │ │ (余额: 36sp, 白色, 加粗) │ │ │ │ │ │ │ │ │ │ │ │ ┌────────────────────┐ │ │ │ │ │ │ │ 查看明细 > │ │ │ │ │ │ │ └────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 充值选项 (网格布局, 3列) │ │ │ │ │ │ │ │ 选择充值金额: │ │ │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ 60 │ │ 300 │ │ 680 │ │ │ │ │ │ 金币 │ │ 金币 │ │ 金币 │ │ │ │ │ │ ¥6.00 │ │ ¥30.00 │ │ ¥68.00 │ │ │ │ │ │ (选中) │ │ │ │ 🔥 热门 │ │ │ │ │ │ 边框红色 │ │ │ │ │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ 1280 │ │ 3280 │ │ 6480 │ │ │ │ │ │ 金币 │ │ 金币 │ │ 金币 │ │ │ │ │ │ ¥128.00 │ │ ¥328.00 │ │ ¥648.00 │ │ │ │ │ │ 送 100 │ │ 送 300 │ │ 送 680 │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ │ │ │ │ (每个选项: 圆角12dp, 背景#F8F8F8) │ │ │ │ (选中: 边框2dp #FF6B6B, 背景#FFF5F5) │ │ │ │ (热门标签: 右上角, 红色背景) │ │ │ │ (赠送标签: 底部, 金色文字) │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 支付方式 │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ┌────┐ ○ │ │ │ │ │ │ │微信│ 微信支付 │ │ │ │ │ │ │支付│ 推荐使用 ● │ │ │ │ │ │ └────┘ │ │ │ │ │ ├────────────────────────────────────────────────────┤ │ │ │ │ │ ┌────┐ ○ │ │ │ │ │ │ │支付│ 支付宝 │ │ │ │ │ │ │ 宝 │ │ │ │ │ │ │ └────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 充值说明 │ │ │ │ • 充值金币仅限平台内使用 │ │ │ │ • 充值后不支持退款 │ │ │ │ • 如有问题请联系客服 │ │ │ │ (说明文字: 12sp, #999999) │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 底部支付按钮 (固定底部) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ 立即充值 ¥6.00 │ │ │ │ │ │ (渐变背景, 圆角24dp) │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────┘
### 13.2 管理端直播界面
#### 13.2.1 直播间管理界面
┌────────────────────────────────────────────────────────────────────────────────┐ │ 管理端 - 直播管理 - 直播间列表 │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 页面标题栏 │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ 📺 直播间管理 │ │ │ │ │ │ 管理平台所有直播间，支持实时监控和管理操作 │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 数据统计卡片 │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ 正在直播 │ │ 今日开播 │ │ 总直播间 │ │ 今日收益 │ │ │ │ │ │ 128 │ │ 356 │ │ 12,580 │ │ ¥25,680 │ │ │ │ │ │ 🔴 实时 │ │ │ │ │ │ │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 状态Tab + 搜索筛选 │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │全部(12580)│ │直播中(128)│ │已结束 │ │已封禁 │ │ │ │ │ │ (选中) │ │ 🔴 │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────────┐ │ │ │ │ │ 分类 ▼ │ │ 时间范围 │ │ 主播等级 │ │ 搜索房间/主播 │ │ │ │ │ │ 全部 │ │ 选择日期 │ │ 全部 ▼ │ │ 🔍 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 直播间卡片列表 (卡片式布局, 4列) │ │ │ │ │ │ │ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ ┌────────────┐ │ │ │ │ │ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────────┐ │ │ ┌────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 封面预览 │ │ │ │ 封面预览 │ │ │ │ 封面预览 │ │ │ │ 封面 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 预览 │ │ │ │ │ │ │ │ 🔴 直播中 │ │ │ │ 🔴 直播中 │ │ │ │ ⚫ 已结束 │ │ │ │ │ │ │ │ │ │ │ │ 👁 12,580 │ │ │ │ 👁 8,560 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────┘ │ │ └────────────┘ │ │ └────────────┘ │ │ └────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 王者五排上分 │ │ 深夜唱歌陪伴 │ │ 户外探险 │ │ 美食制作 │ │ │ │ │ │ ┌────┐ 小明 │ │ ┌────┐ 小红 │ │ ┌────┐ 小李 │ │ ┌────┐ │ │ │ │ │ │ │头像│ 游戏 │ │ │头像│ 才艺 │ │ │头像│ 户外 │ │ │头像│ │ │ │ │ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ └────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ ┌────┐ │ │ ┌────┐ │ │ │ │ │ │ │进入│ │关闭│ │ │ │进入│ │关闭│ │ │ │查看│ │删除│ │ │ │查看│ │ │ │ │ │ │ └────┘ └────┘ │ │ └────┘ └────┘ │ │ └────┘ └────┘ │ │ └────┘ │ │ │ │ │ └────────────────┘ └────────────────┘ └────────────────┘ └────────────┘ │ │ │ │ │ │ │ │ (直播中: 封面左上角显示红色直播标签和观看人数) │ │ │ │ (已结束: 封面显示灰色遮罩) │ │ │ │ (操作按钮: 进入-蓝色, 关闭-红色, 查看-灰色) │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 分页组件 │ │ │ │ 共 12,580 条记录 < 1 2 3 ... 629 > 每页 20 条 ▼ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘
#### 13.2.2 直播监控大屏界面
┌──────────────────────────────────────────────────────────────────────────────────────────┐ │ 管理端 - 直播监控大屏 │ ├──────────────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 顶部状态栏 (深色背景) │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ 📺 直播监控中心 2024-12-29 15:30:45 ┌──────────────┐ │ │ │ │ │ │ (实时时间) │ 🔴 监控中 │ │ │ │ │ │ │ └──────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 实时数据面板 (顶部横向排列) │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌────────────┐│ │ │ │ │ 正在直播 │ │ 总观看人数 │ │ 实时弹幕 │ │ 今日礼物 │ │ 今日收益 ││ │ │ │ │ 128 │ │ 156,890 │ │ 2,580/分 │ │ 12,580 │ │ ¥125,680 ││ │ │ │ │ 🔴 +5 │ │ ↑ 12.5% │ │ ↑ 8.2% │ │ ↑ 15.3% │ │ ↑ 18.6% ││ │ │ │ │ (实时更新) │ │ (对比昨日) │ │ (对比昨日) │ │ (对比昨日) │ │ (对比昨日)││ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ └────────────┘│ │ │ └────────────────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────┐ ┌──────────────────────────────────────────┐ │ │ │ 热门直播间监控 (左侧, 宽度60%) │ │ 数据图表区 (右侧, 宽度40%) │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────┐ │ │ ┌──────────────────────────────────────┐ │ │ │ │ │ 直播间视频网格 (2x3) │ │ │ │ 实时观看趋势 (折线图) │ │ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 📈 │ │ │ │ │ │ │ 直播画面1 │ │ 直播画面2 │ │ │ │ │ / \ /\ │ │ │ │ │ │ │ 小明 │ │ 小红 │ │ │ │ │ / \ / \ │ │ │ │ │ │ │ 👁 12,580 │ │ 👁 8,560 │ │ │ │ │ / \ / \ │ │ │ │ │ │ │ │ │ │ │ │ │ │ / / ___ │ │ │ │ │ │ └────────────┘ └────────────┘ │ │ │ │ │ │ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ │ 14:00 14:30 15:00 15:30 │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────┘ │ │ │ │ │ │ 直播画面3 │ │ 直播画面4 │ │ │ │ │ │ │ │ │ │ 小李 │ │ 小王 │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ │ │ │ 👁 6,230 │ │ 👁 5,120 │ │ │ │ │ 分类占比 (饼图) │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────┘ └────────────┘ │ │ │ │ 游戏 35% │ │ │ │ │ │ ┌────────────┐ ┌────────────┐ │ │ │ │ ████ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 才艺 ████ 28% │ │ │ │ │ │ │ 直播画面5 │ │ 直播画面6 │ │ │ │ │ 音乐 ███ 20% │ │ │ │ │ │ │ 小张 │ │ 小陈 │ │ │ │ │ 其他 ██ 17% │ │ │ │ │ │ │ 👁 4,890 │ │ 👁 4,560 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────┘ │ │ │ │ │ └────────────┘ └────────────┘ │ │ │ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ │ │ (点击可放大查看, 双击进入详情) │ │ │ │ 礼物排行榜 │ │ │ │ │ │ (实时显示观看人数) │ │ │ │ │ │ │ │ │ └──────────────────────────────────┘ │ │ │ 🥇 火箭 2,580 个 ¥25,800 │ │ │ │ │ │ │ │ 🥈 跑车 1,280 个 ¥12,800 │ │ │ │ │ ┌──────────────────────────────────┐ │ │ │ 🥉 玫瑰 8,560 个 ¥8,560 │ │ │ │ │ │ 实时弹幕监控 │ │ │ │ 4 爱心 12,580 个 ¥1,258 │ │ │ │ │ │ ┌────────────────────────────┐ │ │ │ │ 5 棒棒糖 6,230 个 ¥1,246 │ │ │ │ │ │ │ 小明: 主播打得好！ │ │ │ │ │ │ │ │ │ │ │ │ 小红: 666666 │ │ │ │ └──────────────────────────────────────┘ │ │ │ │ │ │ 小李: 支持主播 │ │ │ │ │ │ │ │ │ │ ⚠️ 小王: [敏感词已过滤] │ │ │ └──────────────────────────────────────────┘ │ │ │ │ │ 小张: 新人求关注 │ │ │ │ │ │ │ │ (实时滚动, 敏感词标红) │ │ │ │ │ │ │ └────────────────────────────┘ │ │ │ │ │ └──────────────────────────────────┘ │ │ │ └──────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────────────┐ │ │ │ 底部告警区域 │ │ │ │ ┌────────────────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ ⚠️ 告警信息 (3) │ │ │ │ │ │ • 15:28:30 直播间[小明]检测到敏感词，已自动过滤 [查看] [处理]│ │ │ │ │ │ • 15:25:12 直播间[小红]观看人数异常增长，疑似刷量 [查看] [处理]│ │ │ │ │ │ • 15:20:45 直播间[小李]收到多次举报，请及时处理 [查看] [处理]│ │ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────────────────────┘
#### 13.2.3 礼物管理界面
┌────────────────────────────────────────────────────────────────────────────────┐ │ 管理端 - 直播管理 - 礼物配置 │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 页面标题栏 │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ 🎁 礼物管理 ┌──────────┐ │ │ │ │ │ │ 配置直播间礼物，包括价格、特效、分成比例 │ + 新增礼物│ │ │ │ │ │ │ └──────────┘ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 礼物分类Tab │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │全部 (48) │ │热门 (12) │ │浪漫 (10) │ │豪华 (8) │ │特效 (18) │ │ │ │ │ │ (选中) │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 礼物列表 (表格形式) │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ ☐ │图标│礼物名称│价格(金币)│分类 │特效类型│主播分成│状态│排序│操作│ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ☐ │ ❤️ │ 爱心 │ 1 │热门 │ 无 │ 70% │启用│ 1 │编辑│ │ │ │ │ │ │ │ │ │ │ │ │(绿)│ │删除│ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ☐ │ 🌹 │ 玫瑰 │ 5 │浪漫 │ 飘屏 │ 70% │启用│ 2 │编辑│ │ │ │ │ │ │ │ │ │ │ │ │(绿)│ │删除│ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ☐ │ 🚀 │ 火箭 │ 500 │豪华 │ 全屏 │ 60% │启用│ 3 │编辑│ │ │ │ │ │ │ │ │ │ │ 动画 │ │(绿)│ │删除│ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ☐ │ 🏰 │ 城堡 │ 5000 │豪华 │ 全屏 │ 50% │启用│ 4 │编辑│ │ │ │ │ │ │ │ │ │ │ 特效 │ │(绿)│ │删除│ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │ ☐ │ 🎆 │ 烟花 │ 9999 │特效 │ 全屏 │ 50% │禁用│ 5 │编辑│ │ │ │ │ │ │ │ │ │ │ 烟花 │ │(灰)│ │启用│ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ (表格支持拖拽排序) │ │ │ │ (特效类型: 无/飘屏/全屏动画/全屏特效) │ │ │ │ (主播分成: 根据礼物价格档位设置不同比例) │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 分页组件 │ │ │ │ 共 48 条记录 < 1 2 3 > 每页 20 条 ▼ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘
**新增/编辑礼物弹窗：**
┌────────────────────────────────────────────────────────────────┐ │ │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ 新增礼物 (Dialog, 宽度600px) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 基本信息 │ │ │ │ │ │ │ │ │ │ │ │ 礼物名称 * │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ │ │ │ 请输入礼物名称 │ │ │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ 礼物图标 * │ │ │ │ │ │ ┌──────────┐ │ │ │ │ │ │ │ │ 点击上传礼物图标 │ │ │ │ │ │ │ 📷 + │ 建议尺寸: 200x200 │ │ │ │ │ │ │ │ 支持PNG格式(透明背景) │ │ │ │ │ │ └──────────┘ │ │ │ │ │ │ │ │ │ │ │ │ 礼物价格 * 礼物分类 * │ │ │ │ │ │ ┌────────────────────┐ ┌────────────┐ │ │ │ │ │ │ │ 100 金币│ │ 热门 ▼ │ │ │ │ │ │ │ └────────────────────┘ └────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 特效配置 │ │ │ │ │ │ │ │ │ │ │ │ 特效类型 * │ │ │ │ │ │ ○ 无特效 ○ 飘屏 ● 全屏动画 ○ 全屏特效 │ │ │ │ │ │ │ │ │ │ │ │ 特效文件 │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ │ │ │ 点击上传特效文件 (支持SVGA/Lottie) │ │ │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ 特效时长 │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ │ │ │ 3 秒 │ │ │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 分成配置 │ │ │ │ │ │ │ │ │ │ │ │ 主播分成比例 │ │ │ │ │ │ ○────────────────────●──────────────────○ │ │ │ │ │ │ 0% 70% 100% │ │ │ │ │ │ │ │ │ │ │ │ 平台收益: 30% │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ 其他设置 │ │ │ │ │ │ │ │ │ │ │ │ 排序 状态 │ │ │ │ │ │ ┌────────────────┐ ○ 启用 ● 禁用 │ │ │ │ │ │ │ 0 ▲ ▼│ │ │ │ │ │ │ └────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ │ │ ┌────────┐ ┌────────┐ │ │ │ │ │ │ │ 取消 │ │ 确定 │ │ │ │ │ │ │ └────────┘ └────────┘ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘
#### 13.2.4 主播管理界面
┌────────────────────────────────────────────────────────────────────────────────┐ │ 管理端 - 直播管理 - 主播管理 │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 页面标题栏 │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ 👤 主播管理 │ │ │ │ │ │ 管理平台主播，包括认证审核、等级管理、收益查看 │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 数据统计卡片 │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ 总主播数 │ │ 认证主播 │ │ 待审核 │ │ 今日新增 │ │ │ │ │ │ 5,680 │ │ 3,280 │ │ 56 │ │ 28 │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 搜索筛选栏 │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────┐ │ │ │ │ │ 认证状态 │ │ 主播等级 │ │ 直播分类 │ │ 注册时间 │ │ 搜索主播 │ │ │ │ │ │ 全部 ▼ │ │ 全部 ▼ │ │ 全部 ▼ │ │ 选择日期 │ │ 🔍 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 主播列表 (表格形式) │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │☐│头像│主播昵称│ID │等级│分类│粉丝数 │总收益 │认证状态│操作 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│┌──┐│小明 │100001│Lv.5│游戏│125,680│¥58,900│✅ 已认证│查看 │ │ │ │ │ │ ││头││ │ │ │ │ │ │ │编辑 │ │ │ │ │ │ │└──┘│ │ │ │ │ │ │ │封禁 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│┌──┐│小红 │100002│Lv.4│才艺│89,560 │¥32,500│✅ 已认证│查看 │ │ │ │ │ │ ││头││ │ │ │ │ │ │ │编辑 │ │ │ │ │ │ │└──┘│ │ │ │ │ │ │ │封禁 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│┌──┐│小李 │100003│Lv.2│音乐│12,580 │¥5,680 │⏳ 待审核│查看 │ │ │ │ │ │ ││头││ │ │ │ │ │ │ │审核 │ │ │ │ │ │ │└──┘│ │ │ │ │ │ │ │ │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│┌──┐│小王 │100004│Lv.1│聊天│5,680 │¥1,280 │❌ 未认证│查看 │ │ │ │ │ │ ││头││ │ │ │ │ │ │ │编辑 │ │ │ │ │ │ │└──┘│ │ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ (认证状态: 已认证-绿色, 待审核-橙色, 未认证-灰色, 已封禁-红色) │ │ │ │ (等级: Lv.1-Lv.10, 根据直播时长和收益计算) │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘
#### 13.2.5 弹幕管理界面
┌────────────────────────────────────────────────────────────────────────────────┐ │ 管理端 - 直播管理 - 弹幕管理 │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ Tab切换 │ │ │ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ │ │ │ │ 💬 弹幕记录 │ │ 🚫 敏感词管理 │ │ ⚙️ 弹幕设置 │ │ │ │ │ │ (选中) │ │ │ │ │ │ │ │ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 弹幕记录列表 │ │ │ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────────────────┐ │ │ │ │ │ 直播间 │ │ 时间范围 │ │ 状态 │ │ 搜索弹幕内容 │ │ │ │ │ │ 全部 ▼ │ │ 选择日期 │ │ 全部 ▼ │ │ 🔍 │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │☐│时间 │直播间 │用户 │弹幕内容 │状态 │操作 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│15:30:25 │小明直播间│小红 │主播打得真好！ │正常 │删除 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│15:30:18 │小明直播间│小李 │666666 │正常 │删除 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│15:29:55 │小红直播间│小王 │[已过滤]*** │已过滤│恢复 │ │ │ │ │ │ │ │ │ │(原文: xxx) │(红色)│删除 │ │ │ │ │ ├────────────────────────────────────────────────────────────────────┤ │ │ │ │ │☐│15:29:30 │小红直播间│小张 │支持主播！ │正常 │删除 │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────────────────────────────┐ │ │ │ 敏感词管理 (切换Tab后显示) │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────────────────────────────┐ │ │ │ │ │ 敏感词列表 ┌──────────┐ │ │ │ │ │ │ │ + 添加 │ │ │ │ │ │ │ ┌────────────────────────────────────────────────┐ └──────────┘ │ │ │ │ │ │ │ 敏感词 │ 替换为 │ 类型 │ 操作 │ │ │ │ │ │ │ ├────────────────────────────────────────────────┤ │ │ │ │ │ │ │ xxx │ *** │ 违规词 │ 编辑 | 删除 │ │ │ │ │ │ │ │ yyy │ *** │ 广告词 │ 编辑 | 删除 │ │ │ │ │ │ │ │ zzz │ [已屏蔽] │ 政治敏感 │ 编辑 | 删除 │ │ │ │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ 批量导入: ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ 点击上传敏感词文件 (支持txt, 每行一个) │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ └────────────────────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────────────────────┘
### 13.3 直播模块交互流程
#### 13.3.1 观众观看直播流程
┌─────────────────────────────────────────────────────────────────────────┐ │ 观众观看直播交互流程 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ 移动端 后端 管理端 │ │ │ │ │ │ │ │ 1. 点击直播间卡片 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 2. 获取房间详情 │ │ │ │ │ 获取播放地址 │ │ │ │ │ 检查用户权限 │ │ │ │ ◀───────────────────────── │ │ │ │ │ 3. 返回房间信息+播放地址 │ │ │ │ │ │ │ │ │ │ 4. 初始化播放器 │ │ │ │ │ 连接视频流 │ │ │ │ │ 显示直播画面 │ │ │ │ │ │ │ │ │ │ 5. 建立WebSocket连接 │ │ │ │ │ ═══════════════════════════│ │ │ │ │ │ 6. 加入房间 │ │ │ │ │ 更新在线人数 │ │ │ │ │ 推送进入消息 │ │ │ │ ◀═══════════════════════════│ │ │ │ │ 7. 收到欢迎消息 │ │ │ │ │ 显示在弹幕区 │ │ │ │ │ │ │ │ │ │ 8. 发送弹幕 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 9. 敏感词过滤 │ │ │ │ │ 广播给房间用户 │ │ │ │ ◀═══════════════════════════│ │ │ │ │ 10. 收到弹幕推送 │ │ │ │ │ 显示弹幕动画 │ │ │ │ │ │ │ │ │ │ 11. 发送礼物 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 12. 校验余额 │ │ │ │ │ 扣除金币 │ │ │ │ │ 增加主播收益 │ │ │ │ │ 记录流水 │ │ │ │ ◀───────────────────────── │ │ │ │ │ 13. 返回发送成功 │ │ │ │ │ │ │ │ │ │ │ 14. 广播礼物特效 │ │ │ │ ◀═══════════════════════════│ (WebSocket) │ │ │ │ 15. 播放礼物动画 │ │ │ │ │ │ │ │ │ │ 16. 退出直播间 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 17. 离开房间 │ │ │ │ │ 更新在线人数 │ │ │ │ │ 断开WebSocket │ │ │ │ └─────────────────────────────────────────────────────────────────────────┘
#### 13.3.2 主播开播流程
┌─────────────────────────────────────────────────────────────────────────┐ │ 主播开播交互流程 │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ 移动端 后端 管理端 │ │ │ │ │ │ │ │ 1. 点击开播按钮 │ │ │ │ │ 进入开播准备页 │ │ │ │ │ │ │ │ │ │ 2. 请求摄像头权限 │ │ │ │ │ 开启摄像头预览 │ │ │ │ │ │ │ │ │ │ 3. 上传直播封面 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 4. 保存封面到OSS │ │ │ │ ◀───────────────────────── │ 返回封面URL │ │ │ │ 5. 显示封面预览 │ │ │ │ │ │ │ │ │ │ 6. 填写直播信息 │ │ │ │ │ 标题/分类/标签 │ │ │ │ │ │ │ │ │ │ 7. 点击开始直播 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 8. 创建直播间 │ │ │ │ │ 生成推流地址 │ │ │ │ │ 初始化房间状态 │ │ │ │ ◀───────────────────────── │ │ │ │ │ 9. 返回推流地址 │ │ │ │ │ │ │ │ │ │ 10. 初始化推流SDK │ │ │ │ │ 开始推流 │ │ │ │ │ 进入直播中状态 │ │ │ │ │ │ │ │ │ │ 11. 建立WebSocket连接 │ │ │ │ │ ═══════════════════════════│ │ │ │ │ │ 12. 主播上线 │ │ │ │ │ 更新房间状态 │ │ │ │ │ │ │ │ │ │ 13. 推送开播通知 ─────────▶ │ │ │ │ │ 给关注的粉丝 │ 14.可查│ │ │ │ │ 看 │ │ │ │ │ 直播 │ │ │ 15. 收到弹幕/礼物 │ │ │ │ │ ◀═══════════════════════════│ │ │ │ │ 16. 显示弹幕/礼物动画 │ │ │ │ │ │ │ │ │ │ 17. 点击结束直播 │ │ │ │ │ ─────────────────────────▶ │ │ │ │ │ │ 18. 停止推流 │ │ │ │ │ 关闭房间 │ │ │ │ │ 统计直播数据 │ │ │ │ ◀───────────────────────── │ │ │ │ │ 19. 显示直播统计页面 │ │ │ │ │ │ │ │ │ │ │ 20. 记录直播日志 ─────────▶ │ │ │ │ │ │ 21.可查│ │ │ │ │ 看 │ │ │ │ │ 记录 │ │ │ └─────────────────────────────────────────────────────────────────────────┘
### 12.3 界面设计规范汇总