群面智伴，前端界面
群面模拟系统前端实战：圆桌UI与WebSocket实时通信
一、圆桌布局：纯CSS实现环绕式座位
群面模拟的核心场景是一张圆桌，所有人围坐一圈。我没有用 Three.js 或 Canvas，只用纯 CSS 实现了这个效果。
思路很简单：计算出每个座位在圆周上的角度，用 transform: translate() 定位。
function getSeatStyle(index) { const total = participants.length const angle = (index / total) * 360 const radius = 160 const rad = (angle - 90) * Math.PI / 180 return { transform: `translate(${Math.cos(rad) * radius}px, ${Math.sin(rad) * radius}px)` } }
桌面用 border-radius: 50% + 径向渐变模拟质感，再加两层伪元素装饰环：
.table-surface { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #1e2e42, #0f1622); border: 2px solid #2f3f55; box-shadow: 0 0 60px rgba(60,120,220,0.06), inset 0 0 60px rgba(0,0,0,0.5); }
气泡则根据座位所在 quadrant（上/下/左/右）自动定位方向和箭头：
.seat.top .seat-bubble { top: -8px; left: 50%; transform: translateX(-50%) translateY(-100%); } .seat.bottom .seat-bubble { top: 60px; left: 50%; transform: translateX(-50%); } .seat.left .seat-bubble { top: -8px; right: 60px; } .seat.right .seat-bubble { top: -8px; left: 60px; }
二、WebSocket消息驱动
整个房间的交互基于 WebSocket。前端在进入房间时建立连接，后续所有发言、切阶段、打断都通过 WS 传递。
消息处理的核心是一个 switch：
function handleWsMessage(data) { switch (data.type) { case 'speak_event': // 有人发言 → 更新气泡 + 聊天列表 case 'turn_change': // 切换发言权 → 解锁/锁定输入框 case 'phase_change': // 阶段切换 → 更新阶段标题 case 'room_end': // 结束讨论 → 跳转回顾页 } }
这里踩过一个坑：*turn_change 不该触发气泡显示*。一开始 turn_change 里顺手设了 currentSpeaker，结果轮到用户时自己的头像也冒泡了。修复方案是拆成两个变量：
- currentTurnSpeaker — 控制输入框的可用状态
- bubbleTargetId — 只在 speak_event 时设置，控制气泡显示
三、气泡逐字显示
为了让发言看起来更自然，实现了文字逐字出现效果：