# 直播平台双端交互逻辑设计报告 > 生成时间：2024年12月29日 > 版本：V2.0 > 设计范围：Android移动端 + Vue管理端 > 重点优化：缘池（多板块社区）、许愿树（节日祝福留言板） --- ## 目录 1. [系统架构总览](#一系统架构总览) 2. [双端功能对照表](#二双端功能对照表) 3. [核心交互流程设计](#三核心交互流程设计) 4. [缘池重新设计方案](#四缘池重新设计方案多板块交流社区) 5. [许愿树重新设计方案](#五许愿树重新设计方案节日愿望祝福留言板) 6. [API接口设计规范](#六api接口设计规范) 7. [数据库设计](#七数据库设计) 8. [实时通信设计](#八实时通信设计) 9. [管理端配套功能](#九管理端配套功能) 10. [开发实施计划](#十开发实施计划) --- ## 一、系统架构总览 ### 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) ```java // 页面结构 CommunityActivity ├── TopBar (顶部栏) │ ├── SearchButton (搜索按钮) │ ├── TitleText (缘池) │ ├── NotificationButton (通知) │ └── PublishButton (发布) ├── CategoryTabs (板块标签) │ └── TabLayout (可滑动标签) ├── ContentList (内容列表) │ └── RecyclerView (瀑布流/列表) │ └── PostCardAdapter (帖子卡片适配器) ├── FloatingActionButton (悬浮发布按钮) └── BottomNavigation (底部导航) ``` #### 4.4.2 帖子详情页 (PostDetailActivity) ```java // 页面结构 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) ```java // 页面结构 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 帖子数据模型 ```json // 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 评论数据模型 ```json // 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) ```java // 页面结构 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) ```java // 页面结构 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) ```java // 页面结构 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 祝福数据模型 ```json // 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 活动数据模型 ```json // 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 响应格式规范 ```json // 成功响应 { "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结构 │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ { │ │ │ │ "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 缘池社区数据表 ```sql -- 板块分类表 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 许愿树数据表 ```sql -- 节日表 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 消息类型定义 ```json // 社区帖子点赞通知 { "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 管理端菜单配置 ```json // 新增菜单配置 (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展示效果 - 完整的活动配置、祝福管理、素材管理功能 ### 核心价值 1. **提升用户粘性**：丰富的社区内容和节日活动 2. **增强社交属性**：多维度的互动方式 3. **运营灵活性**：管理端可配置板块、活动、素材 4. **数据可视化**：完整的统计分析功能 --- ## 十二、详细界面设计描述 本章节提供所有界面的详细视觉设计描述，包括布局、颜色、组件、交互效果等，为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 界面设计规范汇总