大屏功能概览

适用范围：本文档基于前端代码梳理，聚焦大屏端对话组件 src/components/vis-assistant，并涉及数字人形象 components/Avatar、移动端遥控器 src/views/mobile 等协同模块。
后端（ruoyi-aihuman-backend）能力仅在「接口概览」一节以接口维度列出，不做后端实现展开。

以下子页按模块拆分详细说明：

数字人形象：3D 数字人 iframe / UE 接入、口型驱动
配对码功能：大屏生成配对码、二维码、设备管理
移动端交互（大屏侧）：WebSocket 通道、指令收发
语音输入功能：ASR / TTS / 播报控制 / 文本清洗
模式说明：智能交互 / 专家问答 / 系统导览三种模式

一、整体定位与架构

数字人「小慧」是一套大屏播报 + 双向对话 + 手机遥控的综合交互系统，由三部分组成：

端	位置	职责
大屏端	`src/components/vis-assistant/`	对话面板三种问答模式 TTS 播报数字人口型驱动配对码生成
移动端 H5	`src/views/mobile/`	扫码/输码配对仿微信遥控面板语音提问模式切换
数字人形象	`src/components/Avatar/Core/Avatar.vue`	iframe 内嵌 React + Three.js 3D 数字人，`postMessage` 双向通信（或 UE PixelStreaming 自集成）

数据流总览

手机 ──WS COMMAND{text, mode, knowledgeCategory}──▶ 后端 WS 服务 ──▶ 大屏
大屏 ──WS RESPONSE{text | {text, subtype, searchResult} | {error}}──▶ 后端 ──▶ 手机
大屏 ──HTTP SSE──▶ /ai/chat/stream 或 /ai/orchestrate/chat/stream
大屏 ──HTTP POST──▶ /digital-human/nlu/recognize（语义识别）
大屏 ──HTTP POST──▶ /digital-human/tts/aliyun（文本转语音，即将弃用）
大屏 ──WS 双工──▶ /digital-human/tts/aliyunStream/ws（文本转语音，统一采用）
大屏/手机 ──HTTP POST──▶ /digital-human/asr/recognize（语音转文本）
大屏 ──postMessage / UE 音频流──▶ 数字人（口型 + 音频）

二、对话面板（大屏端）

面板组件 VisAssistant.vue，挂载在 /home 路由下，由右下角 FAB 控制显隐（v-show 保留聊天记录、拖拽位置与模式状态）。

2.1 界面构成

区域	组件	能力
头部	`VaPanelHeader.vue`	在线状态指示灯【绿色：后端连接正常，红色：后端连接失败】标题「智慧助手」 "移动端已配对"标识踢出按钮【已配对的，大屏可手动踢出】展开/还原【窗口大小变化】关闭
消息区	`VaMessageItem.vue`	AI（Markdown）气泡用户（纯文本）气泡系统（居中提示）气泡「思考中」指示器自动滚底【回答时自动滚动到底部，内容保持可见、体验更好】
快捷栏	`VaQuickActionBar.vue`	生成配对码新建对话停止播报（说话中出现）设置弹框
输入区	`VaGlowInput.vue`	多行输入模式切换下拉左下角场景下拉语音输入按钮发送按钮 / 停止生成
配对弹框	`VaPairingModal.vue`	二维码【一次只能连接一个移动端】配对码【用于刷新后重连】倒计时复制链接刷新
数字人	`Avatar.vue`	3D 形象 iframe（180×480）回答中头顶气泡

2.2 拖拽与自由拉伸

拖拽：仅标题栏可拖，mousedown 后位移超过 5px（DRAG_THRESHOLD）才进入拖拽态，避免误触发头部按钮。
自由拉伸：面板外沿铺 8 个手柄（上/下/左/右/四角），实时重算 left/top/width/height。

常量	值	含义
`PANEL_DEFAULT_WIDTH / HEIGHT`	400 / 680	默认尺寸
`PANEL_EXPANDED_WIDTH`	585	点击展开按钮时的宽度（高度铺满视口）
`MIN_PANEL_WIDTH / HEIGHT`	350 / 420	拉伸下限
`LEFT_DRAG_LIMIT`	180	左侧预留数字人显示区，面板不会被拖出该区域
`FAB_MARGIN`	24	与视口边缘间距
`RESIZE_LEAVE_MARGIN`	40	鼠标偏离边缘超过 40px 自动结束拉伸，防止手柄脱节

拉伸结束后统一走 clampPanelPosition() 做边缘检测；窗口 resize / 全屏切换时重算边界。手动拉伸会自动退出"展开态"；退出展开态时还原进入前的尺寸快照。

2.3 系统导览下的自动折叠

系统导览回答中（isDemoAnswering = 思考中 | 流式输出 | 音频播报中）：

聊天面板自动折叠，只保留 数字人 + 头顶气泡 + 「打断播报」浮层按钮；
父组件收到 panel-collapsed-change 事件，显示右下角 FAB；
用户点击 FAB 或 expandPanel() 可强制展开（userForceExpand），一轮回答结束后自动重置。

大屏功能概览 ​

一、整体定位与架构 ​

数据流总览 ​

二、对话面板（大屏端） ​

2.1 界面构成 ​

2.2 拖拽与自由拉伸 ​