wanglei/EchoChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feature/phase2e-2-meeting-mvp
EchoChat/design-system/echochat/pages/meeting-home.md
bujinyuan 790996feaf feat(meeting): Task 15 UI 打磨 + 主持人四件套 + 媒体层稳定性回归修复 
- Task 15 UI：6 项原创特色（说话者流光 / 柔性网格 / 自视频浮窗 / 静音氛围色 / 入会滑入 / NetworkBadge 3 条波浪）+ 说话者双源探测（RTP audioLevel + WebAudio RMS）+ 主持人四件套（静音/开麦/转让/踢出）
- 新增 SelfVideoFloat 浮窗组件 + 4 份 design-system 页面文档（home / preview / room / invite）
- 媒体回归补丁（手工联调触发）：
  * 后端 signal_service 在 OnRoomJoin 追加 pushExistingRoomState → 向新加入者补发历史 producers + 历史成员 audio/video 状态
  * 新增 Redis Hash memberStateKey 持久化成员 audio/video enabled，OnMemberStateChanged 落盘、cleanupUserResources 清理
  * 前端 _broadcastSelfState 在本地音视频开关末尾同步 state.changed；_afterJoined 先 getRoom 再 room.join 修复后入者成员状态时序；_onMemberStateChanged 占位兜底
  * _cleanupRemoteProducer 改为按 producerId 精准清理（修复 "关音频误关视频"）
  * _onRoomEnded + createAndEnter/joinAndEnter 强化 reset（修复重入会看不到自己画面）
  * mediasoup-client ensureSend/RecvTransport 引入 in-flight Promise 锁防并发重复建连
- 文档同步：CURRENT_STATUS.md / Task 15 plan / phase2e-2 implementation plan

Made-with: Cursor
2026-04-23 16:04:46 +08:00

3.0 KiB
Raw Permalink Blame History

Meeting Home (会议 Hub 首页) Page Overrides

PROJECT: EchoChat Generated: 2026-04-24 (via Task 15 UI 打磨) Page Type: Tab Page — Meeting Entrance + Quick Actions Route: /pages/meeting/home / /pages/meeting/join

⚠️ Rules in this file override design-system/echochat/MASTER.md. ⚠️ 会议相关页面整体采用深色主题（#0F172A 背景），与聊天模块浅色主题形成品牌视觉分层。

Page Layout

  • 结构: 顶部品牌区 + 主操作卡片（创建 / 加入二选一）+ 底部"最近会议"列表
  • 背景: #0F172A 纯色 + 顶部柔和蓝紫径向光晕（参考系统主色 #2563EB）
  • 状态栏: 透明穿透，内容顶部留 env(safe-area-inset-top) 间距

主操作卡片（2 卡片横向）

卡片 主图标 背景 文案
创建会议 video svg 28px white linear-gradient(135deg, #2563EB, #6366F1) 主标题 "发起会议" + 副标题 "创建一个即时会议"
加入会议 log-in svg 28px white rgba(255,255,255,0.06) + 1rpx solid rgba(255,255,255,0.12) 主标题 "加入会议" + 副标题 "输入会议号或粘贴链接"
  • 尺寸: 卡片高 240rpx，圆角 24rpx，阴影 0 8rpx 24rpx rgba(37, 99, 235, 0.25)（仅创建卡）
  • 悬停: transform: translateY(-4rpx) + 阴影加深
  • 点击反馈: transform: scale(0.98) .12s

最近会议列表

  • 背景: rgba(255, 255, 255, 0.04) + 1rpx solid rgba(255,255,255,0.08) 边框
  • 列表项: 时间（左对齐 #94A3B8 22rpx）+ 标题（#F3F4F6 28rpx）+ 时长徽标（右侧 #10B981 小标签）
  • 空状态: 居中 icon clock + 灰字 "暂无最近会议"

Color Palette (页面专属)

用途 Hex 说明
主背景 #0F172A Slate 900
卡片面 rgba(255,255,255,0.06) Glass 效果
主 CTA 渐变 #2563EB → #6366F1 创建会议主按钮
辅 CTA rgba(255,255,255,0.12) 加入会议按钮边框
正文 #F3F4F6 Gray 100
辅助文字 #94A3B8 Slate 400
成功点缀 #10B981 在线 / 时长

Typography

层级 Size Weight Color
品牌标题 44rpx 700 #F8FAFC
卡片主标题 32rpx 600 #FFFFFF
卡片副标题 24rpx 400 rgba(255,255,255,0.75)
列表时间戳 22rpx 400 #94A3B8

Motion

  • 入场: 两张主卡片依次淡入 + 向上 16rpx 位移，stagger: 80ms
  • CTA 呼吸: 创建卡在空闲 3s 后阴影脉动（opacity 0.25 → 0.4 → 0.25，2.4s ease-in-out infinite）
  • 点击触达: 任何 CTA 点击后转场用 slide-up .28s cubic-bezier(0.2,0.8,0.2,1)

Interactions

  • 创建会议: navigateTo('/pages/meeting/preview?mode=create')
  • 加入会议: navigateTo('/pages/meeting/join')
  • 最近会议项点击: 直接 navigateTo('/pages/meeting/preview?code=xxx&mode=join')
  • 长按列表项（暂不做）: Task 16 拓展