播报中说话会停掉声音,而且不拾音bug修复

src/App.vue

@@ -752,7 +752,7 @@ async function handleVoiceQueryComplete(text: string) {
 }
 
 .subtitle-container {
-  max-height: 30vh;
+  max-height: 40vh;
   background: rgba(10, 14, 30, 0.1);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, 0.08);
@@ -1222,6 +1222,9 @@ async function handleVoiceQueryComplete(text: string) {
 
 /* 平板/大屏 (769px+) */
 @media (min-width: 769px) {
+  .subtitle-overlay {
+    width: 80%;
+  }
 }
 
 /* 横屏模式 */

src/components/SubtitlePanel.vue

@@ -135,39 +135,12 @@
             <div
               class="bubble-text"
               :class="{
-                collapsed: isCollapsed(msg.id) && isLongText(msg.content),
                 'text-user': msg.role === 'user',
                 'text-ai': msg.role === 'ai',
               }"
-              :ref="(el) => setMsgRef(msg.id, el)"
             >
               {{ msg.content }}
             </div>
-            <button
-              v-if="isLongText(msg.content)"
-              class="expand-btn"
-              @click="toggleCollapse(msg.id)"
-            >
-              {{ isCollapsed(msg.id) ? "展开全部" : "收起" }}
-              <svg
-                viewBox="0 0 24 24"
-                width="12"
-                height="12"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                :style="{
-                  transform: isCollapsed(msg.id)
-                    ? 'rotate(0deg)'
-                    : 'rotate(180deg)',
-                  transition: 'transform 0.2s',
-                }"
-              >
-                <polyline points="6 9 12 15 18 9" />
-              </svg>
-            </button>
           </div>
         </div>
       </div>
@@ -202,76 +175,14 @@
           class="merged-bubble"
         >
           <div v-if="pair.user" class="merged-user-section">
-            <div
+            <div class="merged-text text-user">
-              class="merged-text text-user"
-              :class="{
-                collapsed:
-                  isCollapsed(pair.user.id) && isLongText(pair.user.content),
-              }"
-            >
               {{ pair.user.content }}
             </div>
-            <button
-              v-if="isLongText(pair.user.content)"
-              class="expand-btn"
-              @click="toggleCollapse(pair.user.id)"
-            >
-              {{ isCollapsed(pair.user.id) ? "展开全部" : "收起" }}
-              <svg
-                viewBox="0 0 24 24"
-                width="12"
-                height="12"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                :style="{
-                  transform: isCollapsed(pair.user.id)
-                    ? 'rotate(0deg)'
-                    : 'rotate(180deg)',
-                  transition: 'transform 0.2s',
-                }"
-              >
-                <polyline points="6 9 12 15 18 9" />
-              </svg>
-            </button>
           </div>
           <div v-if="pair.ai" class="merged-ai-section">
-            <div
+            <div class="merged-text text-ai">
-              class="merged-text text-ai"
-              :class="{
-                collapsed:
-                  isCollapsed(pair.ai.id) && isLongText(pair.ai.content),
-              }"
-            >
               {{ pair.ai.content }}
             </div>
-            <button
-              v-if="isLongText(pair.ai.content)"
-              class="expand-btn"
-              @click="toggleCollapse(pair.ai.id)"
-            >
-              {{ isCollapsed(pair.ai.id) ? "展开全部" : "收起" }}
-              <svg
-                viewBox="0 0 24 24"
-                width="12"
-                height="12"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                :style="{
-                  transform: isCollapsed(pair.ai.id)
-                    ? 'rotate(0deg)'
-                    : 'rotate(180deg)',
-                  transition: 'transform 0.2s',
-                }"
-              >
-                <polyline points="6 9 12 15 18 9" />
-              </svg>
-            </button>
           </div>
         </div>
       </div>
@@ -316,20 +227,59 @@ const aiSubtitleTextRef = ref<HTMLElement | null>(null);
 const aiFontSize = ref(18);
 const aiTextOverflow = ref(false);
 
-// 计算AI字幕字号：根据文本长度动态调整
+// 检测是否为 1440×2560 目标分辨率
+const isTargetResolution = ref(false);
+
+/**
+ * 检测当前视口是否为 1440×2560 分辨率
+ * 使用 window.innerWidth 和 innerHeight 精确匹配
+ */
+const checkResolution = () => {
+  const TARGET_WIDTH = 1440;
+  const TARGET_HEIGHT = 2560;
+  console.log("------------", window.innerWidth, window.innerHeight);
+  isTargetResolution.value =
+    (window.innerWidth === TARGET_WIDTH &&
+      window.innerHeight === TARGET_HEIGHT) ||
+    (window.innerWidth > 1000 && window.innerHeight > 1680);
+};
+
+/**
+ * 获取目标分辨率下的字号基准值
+ * 1440×2560 下使用更大的字号以确保清晰可读
+ */
+const getTargetFontSizeBase = (textLength: number): number => {
+  if (textLength <= 50) return 36;
+  if (textLength <= 100) return 32;
+  if (textLength <= 200) return 28;
+  if (textLength <= 400) return 24;
+  return 22;
+};
+
+/**
+ * 获取普通分辨率下的字号基准值
+ */
+const getNormalFontSizeBase = (textLength: number): number => {
+  if (textLength <= 50) return 18;
+  if (textLength <= 100) return 16;
+  if (textLength <= 200) return 14;
+  if (textLength <= 400) return 13;
+  return 12;
+};
+
+// 计算AI字幕字号：根据分辨率和文本长度动态调整
 const computeAIFontSize = () => {
   const text = props.aiSubtitle;
+  console.log("------------", text);
   if (!text) {
-    aiFontSize.value = 18;
+    aiFontSize.value = isTargetResolution.value ? 36 : 18;
     return;
   }
 
   const len = text.length;
-  if (len <= 50) aiFontSize.value = 18;
+  aiFontSize.value = isTargetResolution.value
-  else if (len <= 100) aiFontSize.value = 16;
+    ? getTargetFontSizeBase(len)
-  else if (len <= 200) aiFontSize.value = 14;
+    : getNormalFontSizeBase(len);
-  else if (len <= 400) aiFontSize.value = 13;
-  else aiFontSize.value = 12;
 };
 
 // 检测AI字幕是否溢出
@@ -352,29 +302,6 @@ const scrollAIToBottom = () => {
   }
 };
 
-// ===== 长文本折叠/展开 =====
-const COLLAPSE_THRESHOLD = 120; // 超过120字符视为长文本
-const collapsedIds = ref<Set<string>>(new Set());
-const msgRefs = new Map<string, HTMLElement>();
-
-const isLongText = (text: string): boolean => text.length > COLLAPSE_THRESHOLD;
-
-const isCollapsed = (id: string): boolean => collapsedIds.value.has(id);
-
-const toggleCollapse = (id: string) => {
-  if (collapsedIds.value.has(id)) {
-    collapsedIds.value.delete(id);
-  } else {
-    collapsedIds.value.add(id);
-  }
-  // 触发响应式更新
-  collapsedIds.value = new Set(collapsedIds.value);
-};
-
-const setMsgRef = (id: string, el: any) => {
-  if (el) msgRefs.set(id, el as HTMLElement);
-};
-
 // ===== 下拉框 =====
 const modeOptions = [
   { value: "ai-only" as SubtitleMode, label: "AI字幕", icon: "💬" },
@@ -400,12 +327,30 @@ const handleClickOutside = (e: MouseEvent) => {
   }
 };
 
+/**
+ * 处理视口尺寸变化：重新检测分辨率并更新字号
+ */
+const handleResize = () => {
+  const wasTarget = isTargetResolution.value;
+  checkResolution();
+  // 如果分辨率状态变化，重新计算字号
+  if (wasTarget !== isTargetResolution.value) {
+    computeAIFontSize();
+  }
+};
+
 onMounted(() => {
   document.addEventListener("click", handleClickOutside);
+  // 初始检测分辨率
+  checkResolution();
+  computeAIFontSize();
+  // 监听视口尺寸变化
+  window.addEventListener("resize", handleResize);
 });
 
 onBeforeUnmount(() => {
   document.removeEventListener("click", handleClickOutside);
+  window.removeEventListener("resize", handleResize);
 });
 
 // ===== 消息配对 =====
@@ -475,21 +420,10 @@ watch(
   },
 );
 
-// 消息变化时：自动滚动到底部 + 新消息默认折叠
+// 消息变化时：自动滚动到底部
 watch(
   () => props.messages.length,
-  (newLen, oldLen) => {
+  () => {
-    // 新增的消息默认折叠
-    if (newLen > (oldLen ?? 0)) {
-      for (let i = oldLen ?? 0; i < newLen; i++) {
-        const msg = props.messages[i];
-        if (msg && isLongText(msg.content)) {
-          collapsedIds.value.add(msg.id);
-        }
-      }
-      collapsedIds.value = new Set(collapsedIds.value);
-    }
-
     nextTick(() => {
       scrollToBottom();
     });
@@ -790,6 +724,7 @@ const scrollToBottom = () => {
 .bubble-text {
   font-size: 14px;
   line-height: 1.6;
+  letter-spacing: 0.2px;
   word-break: break-word;
   overflow: hidden;
   transition: max-height 0.35s ease;
@@ -803,45 +738,6 @@ const scrollToBottom = () => {
     color: #ffffff;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   }
-
-  &.collapsed {
-    max-height: 4.8em;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 2em;
-      background: linear-gradient(transparent, rgba(10, 14, 30, 0.5));
-      pointer-events: none;
-      border-radius: 0 0 8px 8px;
-    }
-  }
-}
-
-/* ===== 展开/收起按钮 ===== */
-.expand-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 6px;
-  padding: 3px 10px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  color: rgba(255, 255, 255, 0.55);
-  font-size: 11px;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-    border-color: rgba(255, 255, 255, 0.2);
-  }
 }
 
 /* ===== 模式3：合并气泡 ===== */
@@ -874,6 +770,7 @@ const scrollToBottom = () => {
 .merged-text {
   font-size: 14px;
   line-height: 1.6;
+  letter-spacing: 0.2px;
   word-break: break-word;
   overflow: hidden;
   transition: max-height 0.35s ease;
@@ -887,21 +784,113 @@ const scrollToBottom = () => {
     color: #ffffff;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
   }
-
-  &.collapsed {
-    max-height: 4.8em;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 2em;
-      background: linear-gradient(transparent, rgba(10, 14, 30, 0.5));
-      pointer-events: none;
 }
+
+/* ===== 1440×2560 分辨率专用样式 ===== */
+@media (min-width: 1000px) and (min-height: 1680px) {
+  /* 一级正文：气泡/合并文本/占位符 */
+  .bubble-text,
+  .merged-text,
+  .subtitle-placeholder {
+    font-size: 24px;
+    line-height: 1.75;
+    letter-spacing: 0.5px;
+    font-weight: 400;
+  }
+
+  /* AI字幕：字号由 JavaScript 动态控制，此处仅设置辅助样式 */
+  .ai-subtitle-text {
+    line-height: 1.75;
+    letter-spacing: 0.6px;
+    font-weight: 400;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
+  }
+
+  /* 二级UI：下拉框/菜单项 */
+  .dropdown-trigger,
+  .dropdown-item {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  /* 字幕容器：背景与边框适配大字号 */
+  .ai-subtitle-bar {
+    padding: 18px 24px;
+    border-radius: 12px;
+    background: linear-gradient(
+      135deg,
+      rgba(108, 140, 255, 0.12) 0%,
+      rgba(79, 110, 247, 0.06) 100%
+    );
+    border: 1px solid rgba(108, 140, 255, 0.15);
+  }
+
+  /* 气泡容器：间距与圆角适配 */
+  .bubble-body {
+    padding: 16px 20px;
+    border-radius: 20px;
+  }
+
+  .chat-bubble.bubble-user .bubble-body {
+    border-radius: 20px 20px 6px 20px;
+    margin-left: 36px;
+  }
+
+  .chat-bubble.bubble-ai .bubble-body {
+    border-radius: 20px 20px 20px 6px;
+    margin-right: 36px;
+  }
+
+  .merged-bubble {
+    border-radius: 18px;
+  }
+
+  .merged-user-section,
+  .merged-ai-section {
+    padding: 16px 20px;
+  }
+
+  /* 头部区域：间距放大 */
+  .subtitle-header {
+    padding-bottom: 14px;
+    margin-bottom: 14px;
+  }
+
+  .dropdown-trigger {
+    padding: 14px 22px;
+    border-radius: 14px;
+  }
+
+  .dropdown-item {
+    padding: 16px 22px;
+    border-radius: 12px;
+  }
+
+  /* 下拉菜单宽度适配 */
+  .dropdown-menu {
+    min-width: 240px;
+    padding: 8px;
+    border-radius: 16px;
+  }
+
+  /* 滚动指示器：尺寸适配 */
+  .scroll-hint {
+    width: 40px;
+    height: 40px;
+    margin-top: 12px;
+  }
+
+  /* 聊天列表间距 */
+  .chat-list {
+    gap: 12px;
+  }
+
+  .merged-list {
+    gap: 12px;
+  }
+
+  .bubble-text {
+    font-size: 28px !important;
   }
 }
 </style>

src/hooks/useDigitalHuman.ts

@@ -14,8 +14,10 @@ const SILENCE_TIMEOUT_MS = 5000;
 const MIN_VALID_DURATION_SEC = 0.5;
 // 播报超时保护（毫秒）：如果FINISHED回调未触发，自动恢复状态
 const BROADCAST_TIMEOUT_MS = 60000;
-const APPID = "i-sfkmd7h8ex6nd";
+const APPID = "i-sfyjfm4jw2q2g";
-const APP_KEY = "hs6b9nu9b080ap9hswgp";
+const APP_KEY = "f6mgtnb0abt6ph3rihwm";
+// 打断词列表：识别到这些词时自动打断播报
+const INTERRUPT_KEYWORDS = ["稍等一下", "停一下", "抱歉打断一下", "不好意思", "对不起", "停", "闭嘴"];
 
 /**
  * 检测文本是否包含实质内容（去除空白和标点后仍有字符）
@@ -29,6 +31,17 @@ const hasSubstantialContent = (text: string): boolean => {
   return cleaned.length > 0;
 };
 
+/**
+ * 检测文本是否包含打断词
+ */
+const containsInterruptKeyword = (text: string): boolean => {
+  const cleaned = text.replace(
+    /[\s\u3000.,!?;:，。！？；：、…—\-_·""''（）()\[\]【】《》<>]/g,
+    "",
+  );
+  return INTERRUPT_KEYWORDS.some((keyword) => cleaned.includes(keyword));
+};
+
 enum ReadyState {
   UNINSTANTIATED = -1,
   CONNECTING = 0,
@@ -141,6 +154,8 @@ export function useDigitalHuman(options?: {
 
   // 播报超时保护计时器
   let broadcastTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  // 打断词检测时间戳：用于忽略打断后延迟到达的ASR结果
+  let lastInterruptTime = 0;
 
   const clearBroadcastTimeout = () => {
     if (broadcastTimeoutId !== null) {
@@ -164,19 +179,23 @@ export function useDigitalHuman(options?: {
   };
 
   /**
-   * 进入播报状态：静音麦克风 + 暂停静音检测器（互斥锁）
+   * 进入播报状态
+   * RTC模式下保持麦克风开启，允许ASR识别打断词
    */
   const enterBroadcasting = () => {
     isBroadcasting.value = true;
     setPickPhase("broadcasting", "数字人开始播报");
     startBroadcastTimeout();
-    // RTC模式：播报期间禁用拾音
+    // RTC模式：播报期间保持麦克风开启，允许ASR识别打断词
     if (audioMode.value === "rtc") {
-      humanInstanceRef.value?.muteMicrophone?.(true);
+      humanInstanceRef.value?.muteMicrophone?.(false);
-      isMuted.value = true;
+      isMuted.value = false;
-      canTransfer.value = false;
+      canTransfer.value = true;
-      silenceDetector.pause();
+      const resumed = silenceDetector.resume();
-      console.info("[播报] RTC模式：麦克风已静音，静音检测器已暂停");
+      if (!resumed) {
+        startSilenceDetection();
+      }
+      console.info("[播报] RTC模式：麦克风保持开启，允许ASR识别打断词");
     }
     console.info("[播报] 开始播报，等待FINISHED信号");
   };
@@ -306,9 +325,15 @@ export function useDigitalHuman(options?: {
             type,
           } = JSON.parse(content.body);
           if (type === "QUERY") {
-            // 播报期间忽略ASR结果（双重守卫：麦克风已静音，但防止残余回调）
+            // 播报期间检测打断词：识别到打断词后仅中断播报并恢复拾音，不调用LLM接口
             if (pickPhase.value === "broadcasting") {
-              console.info("[状态机] 播报中收到ASR结果，忽略");
+              const hasInterrupt = containsInterruptKeyword(subtitleContent);
+              if (hasInterrupt) {
+                console.info(`[打断词检测] 播报中识别到打断词: "${subtitleContent}"，自动打断（仅中断播报，不调用LLM）`);
+                interrupt();
+              } else {
+                console.info(`[打断词检测] 播报中收到ASR结果: "${subtitleContent}"，非打断词，忽略`);
+              }
               break;
             }
 
@@ -321,6 +346,13 @@ export function useDigitalHuman(options?: {
             // idle 状态下收到 QUERY：必须验证内容有实质才允许状态转换
             // 环境噪音可能触发 ASR 产生空白/标点内容的 QUERY，不应进入识别
             if (pickPhase.value === "idle") {
+              // 忽略打断后3秒内到达的延迟ASR结果（避免打断词被当作新输入）
+              if (Date.now() - lastInterruptTime < 3000) {
+                console.info(
+                  "[状态机] 打断后延迟到达的ASR结果，忽略",
+                );
+                break;
+              }
               const hasSubstance = hasSubstantialContent(subtitleContent);
               if (!hasSubstance) {
                 console.info(
@@ -497,7 +529,7 @@ export function useDigitalHuman(options?: {
       wrapperId: "human-wrapper",
       connectParams: {
         ttsPer: "CAP_4189",
-        figureId: "3999826",
+        figureId: "4000748",
         resolutionHeight: 1920,
         resolutionWidth: 1080,
         inactiveDisconnectSec: 300,
@@ -514,7 +546,7 @@ export function useDigitalHuman(options?: {
       config.connectParams.pullAudioFromRtc = mode === "rtc";
       config.connectParams.pickAudioMode =
         mode === "btn" ? "pressButton" : "free";
-      config.connectParams.enableInterrupt = enableInterruptRef.value;
+      config.connectParams.enableInterrupt = false;
     }
 
     humanInstanceRef.value = new RealTimeHuman(config);
@@ -590,6 +622,8 @@ export function useDigitalHuman(options?: {
     console.info("发送打断");
     clearBroadcastTimeout();
     await humanInstanceRef.value?.interrupt?.();
+    // 记录打断时间戳，用于忽略打断后延迟到达的ASR结果
+    lastInterruptTime = Date.now();
     // 打断后播报结束，恢复状态
     if (isBroadcasting.value) {
       isBroadcasting.value = false;