wanglei/EchoChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2d1a0d8f74ff5278a4a471f2723a80e66fe02a4b
EchoChat/design-system/echochat/pages/meeting-preview.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

2.6 KiB
Raw Blame History

Meeting Preview (设备预览页) Page Overrides

PROJECT: EchoChat Generated: 2026-04-24 (via Task 15 UI 打磨) Page Type: Full Screen — Pre-join Device Check Route: /pages/meeting/preview

⚠️ Rules in this file override design-system/echochat/MASTER.md.

Page Layout

  • 结构: 左侧大预览区（≥ 60% 宽） + 右侧设备列表 + 底部入会操作条
  • 背景: #0F172A（主区）+ #111827（右侧设备面板）
  • 顶部导航: 透明，仅左侧返回图标 #F3F4F6 24px

左侧视频预览

  • 比例: 16:9，最大宽度 960px，圆角 16rpx，阴影 0 12rpx 48rpx rgba(0,0,0,0.5)
  • 视频关闭态: 深灰占位 #1F2937 + 用户头像（140rpx 圆形） + 昵称下方
  • 音量条覆盖层（创新点）:
    • 不是分段格子，而是渐变波浪条横向贯穿预览底部
    • CSS: height: 6rpx，linear-gradient(90deg, #10B981 0%, #F59E0B 100%)
    • 音量 0-1 映射为宽度 0-100%，transition: width 0.05s linear
    • 实时刷新（约 16fps 节流）

右侧设备面板（宽 420rpx）

  • 分组: 摄像头 / 麦克风 / 扬声器 三段
  • 标题: 24rpx 600 #94A3B8 uppercase
  • 下拉框: 高 72rpx，#1F2937 背景，12rpx 圆角，右侧箭头 chevron-down
  • 入会设置（折叠）: "麦克风静音入会" + "摄像头关闭入会" 两个 toggle

底部操作条

  • 高度: 120rpx + safe area
  • 左侧: 麦克风 toggle + 摄像头 toggle（圆形 80rpx，开=蓝 #2563EB 关=灰 #374151）
  • 右侧: 主 CTA "进入会议" 160rpx × 72rpx，#2563EB → #6366F1 渐变

Color Palette (页面专属)

用途 Hex
预览区背景 #0F172A
设备面板背景 #111827
下拉框面 #1F2937
音量条渐变 #10B981 → #F59E0B
主 CTA #2563EB → #6366F1
禁用态 #374151

Motion

  • 入场: 视频预览先于右侧面板 80ms 出现
  • 设备切换: 下拉选中后预览区视频有 200ms 淡出 + 200ms 淡入的 crossfade
  • 音量波浪: 超过 0.7（大声说话）时条形底部再叠一层 0 0 16rpx #F59E0B glow，脱离后 300ms 退场

Interactions

  • 下拉切换设备: 立即释放旧 track，重新 getUserMedia（带 Loading 50ms 超时后再渲染）
  • 麦/摄 toggle: 仅切换本地 preview track 启用态，不持久化设备选择
  • 入会设置 toggle: 保存到 meetingStore.devicePreview.enterMuted / enterCamOff
  • 点击进入会议: 禁用状态 = 设备权限未授予时灰显