外观
配对码功能
大屏端负责生成配对码与二维码,供移动端扫码/输码配对,并提供已配对设备的管理(踢出)能力。 
一、配对码生成(大屏侧)
GET {VITE_APP_AI_API}/digital-human/pairing/qrcode?screenClientId=xxx
→ { code: 200, data: { pairingCode, expiresIn } }- 默认有效期 300 秒(后端未返回时兜底);
- 二维码内容:
http://{局域网IP}:{端口}{当前路径}#/mobile?code=xxx- 局域网 IP 由
utils/network.js解析:优先取当前访问 URL 的 hostname(非 localhost),否则退化到 WebRTC ICE 候选探测本机网卡 IP(优先192.168.x/10.x,1.5s 超时),过滤0.0.0.0/127.0.0.1/169.254.x; - 路径直接复用
window.location.pathname,兼容根路径部署、/bigscreen/子路径部署、以及index.html直接打开; - 二维码生成前会先清空旧图,弹框立即展示 loading,避免残留上一张图;
qrcode模块与 IP 检测在init()时预加载,消除首次点击 1~2s 的空窗。
- 局域网 IP 由
- 错误提示不写死文案,优先级为:后端业务
msg> HTTP 状态码 > 浏览器错误 > 兜底。
二、配对弹框(VaPairingModal.vue)
- 倒计时
MM:SS,归零后二维码置灰(opacity .3 + grayscale); - 刷新冷却 60 秒:
countdown > 60时禁用"刷新二维码"按钮; - 提供"配对链接"文本 + 一键复制(
navigator.clipboard,旧浏览器回退execCommand),扫码失败时可手动粘贴; - 图片加载失败提供"点击重试";
- 配对成功(
mobileConnected由 false→true)时弹框立即从 DOM 移除(避免淡出残影),改为独立 fixed 定位的"连接成功"toast,1 秒后自动关闭。
三、大屏侧设备管理
- 头部在已配对时显示"移动端已配对" + 踢出按钮,调用
POST /digital-human/pairing/kick?code=xxx; - 用
kickedBySelf标记区分视角:大屏显示"✅ 已将 xxx 踢出",不再重复追加"已被大屏踢出"(那是给被踢方看的); - 已配对设备信息(IP / 设备名 / UA / 配对时间)由后端推送,前端保持单一数据源。
移动端的扫码配对流程、遥控面板与问答链路见 移动端与大屏交互。
四、踢出效果图
