feat(mobile): voice-first master replies with WeChat-style unread dot and 转文字

客户 2026-07-18 追加要求:师傅回复先以语音消息呈现(微信式),
未读带红点,点击播放,可选「转文字」展开全文;同时优化长文刷屏布局。

speech.ts:
- 播放控制器新增 preload(text):预合成 TTS 并写入源缓存(不播放),
  供语音气泡在首次点击前显示时长;失败返回 null
- 新增 measureAudioDuration(source):经 metadata 探测音频秒长(8s 超时兜底)

sop/index.vue:
- MasterMsg 增加 voiceStatus(preparing/ready/unavailable)/voiceDuration/
  unread/transcriptOpen
- 答案到达即后台预合成语音(说话内容=直接答案 answer 字段),
  就绪后气泡显示「🔊 N"」+未读红点;点击播放(再点停止,播放态变色),
  播放即清红点;「转文字」灰 chip 展开完整结构化内容
  (要点/提醒/引用/总结卡/反馈),微信同款交互
- TTS 不可用或答案为空时自动回退为纯文本气泡(播报按钮保留),
  训练概况等数据型回复直接文本呈现
- 布局优化:头部压缩,长文默认收进「转文字」,线程不再整段刷屏

验证:
- 本地:时长 13" 真实测得、红点播放后消失、转文字展开全文,3 张截图目检
- 生产冒烟:语音气泡+时长+红点+转文字 chip 全部就位
- H5 已发布(备份 h5-before-20260718045801)

说明:每条答案一次 TTS 合成调用(有缓存),试点量级成本可忽略;
练页会话化(批次二)将复用同一套语音气泡形态。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

mobile-uni/src/pages/user/sop/index.vue

@@ -42,7 +42,21 @@
 
           <view v-else class="bubble-row left">
             <view class="avatar master-avatar">师</view>
-            <view class="bubble master">
+            <view class="master-col">
+              <view v-if="msg.voiceStatus !== 'unavailable'" class="voice-line">
+                <view
+                  class="bubble master voice-bubble"
+                  :class="{ playing: isVoicePlaying(msg) }"
+                  @click="playVoice(msg)"
+                >
+                  <text class="voice-icon">{{ isVoicePlaying(msg) ? '◼' : '🔊' }}</text>
+                  <text class="voice-duration">{{ voiceLabel(msg) }}</text>
+                </view>
+                <view v-if="msg.unread" class="voice-dot" />
+                <button v-if="!msg.transcriptOpen" class="transcript-toggle" @click="msg.transcriptOpen = true">转文字</button>
+              </view>
+
+              <view v-if="msg.voiceStatus === 'unavailable' || msg.transcriptOpen" class="bubble master transcript-bubble">
                 <text class="bubble-text">{{ msg.result.answer || '未生成直接答案，请查看引用依据。' }}</text>
                 <view v-if="msg.result.keyPoints?.length" class="bubble-keypoints">
                   <text v-for="(point, index) in msg.result.keyPoints" :key="point" class="bubble-keypoint">
@@ -55,7 +69,9 @@
                 <text v-if="msg.result.noEvidence" class="bubble-noevidence">当前授权空间内没有足够依据。</text>
 
                 <view class="bubble-actions">
-                <button class="bubble-action" @click="toggleAnswerSpeech(msg)">{{ speechButtonLabel(`answer-${msg.id}`) }}</button>
+                  <button v-if="msg.voiceStatus === 'unavailable'" class="bubble-action" @click="toggleAnswerSpeech(msg)">
+                    {{ speechButtonLabel(`answer-${msg.id}`) }}
+                  </button>
                   <button v-if="msg.result.snippets?.length" class="bubble-action" @click="msg.citationsOpen = !msg.citationsOpen">
                     引用 {{ msg.result.snippets.length }} 条 {{ msg.citationsOpen ? '▲' : '▼' }}
                   </button>
@@ -95,6 +111,7 @@
                 </view>
               </view>
             </view>
+          </view>
         </template>
 
         <view v-if="!loggedIn" class="bubble-row left">
@@ -237,7 +254,7 @@ import {
 } from '@/services/auth';
 import { resetPageScroll } from '@/services/navigation';
 import { ensureEmployeePosition } from '@/services/position';
-import { chooseSpeechAudio, createSpeechPlaybackController, transcribeSpeechBlob, transcribeSpeechFile } from '@/services/speech';
+import { chooseSpeechAudio, createSpeechPlaybackController, measureAudioDuration, transcribeSpeechBlob, transcribeSpeechFile } from '@/services/speech';
 import { downloadSummaryCardImage } from '@/services/summary-card-image';
 import { computed } from 'vue';
 
@@ -260,6 +277,10 @@ interface MasterMsg {
   feedbackVerdict: AnswerFeedbackVerdict | '';
   feedbackSubmitting: boolean;
   citationsOpen: boolean;
+  voiceStatus: 'preparing' | 'ready' | 'unavailable';
+  voiceDuration: number | null;
+  unread: boolean;
+  transcriptOpen: boolean;
 }
 
 interface SystemMsg {
@@ -394,6 +415,7 @@ const sendQuestion = async (rawText: string, options: { voice?: boolean } = {})
         })
       : await searchKnowledge(text);
     if (generation !== knowledgeSearchGeneration) return;
+    const spoken = (nextResult.answer || '').trim();
     replaceMsg(pending.id, {
       id: pending.id,
       role: 'master',
@@ -401,8 +423,13 @@ const sendQuestion = async (rawText: string, options: { voice?: boolean } = {})
       toolCode: '',
       feedbackVerdict: '',
       feedbackSubmitting: false,
-      citationsOpen: false
+      citationsOpen: false,
+      voiceStatus: spoken ? 'preparing' : 'unavailable',
+      voiceDuration: null,
+      unread: Boolean(spoken),
+      transcriptOpen: false
     });
+    if (spoken) void prepareVoice(pending.id, spoken);
     if (!nextResult.answer && !nextResult.snippets?.length) {
       pushSystem('未检索到可引用内容，换个问法试试');
     }
@@ -454,7 +481,11 @@ const runDataTool = async (toolCode: 'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMM
       toolCode: effectiveToolCode,
       feedbackVerdict: '',
       feedbackSubmitting: false,
-      citationsOpen: false
+      citationsOpen: false,
+      voiceStatus: 'unavailable',
+      voiceDuration: null,
+      unread: false,
+      transcriptOpen: false
     });
   } catch (error) {
     if (generation !== knowledgeSearchGeneration) return;
@@ -546,6 +577,47 @@ const pickVoiceAudio = async () => {
   }
 };
 
+const findMasterMsg = (id: number): MasterMsg | null => {
+  const found = messages.value.find((item) => item.id === id);
+  return found && found.role === 'master' ? found : null;
+};
+
+const spokenTextOf = (msg: MasterMsg) => (msg.result.answer || '').trim();
+
+/** Pre-synthesize the reply audio so the voice bubble can show a duration
+ *  before the first tap, WeChat-style. Falls back to a plain text bubble
+ *  when remote TTS is unavailable. */
+const prepareVoice = async (id: number, spoken: string) => {
+  const source = await speechPlayback.preload(spoken);
+  const msg = findMasterMsg(id);
+  if (!msg) return;
+  if (!source) {
+    msg.voiceStatus = 'unavailable';
+    msg.unread = false;
+    return;
+  }
+  msg.voiceDuration = await measureAudioDuration(source);
+  msg.voiceStatus = 'ready';
+};
+
+const isVoicePlaying = (msg: MasterMsg) =>
+  speechState.value.key === `answer-${msg.id}` && speechState.value.status === 'playing';
+
+const voiceLabel = (msg: MasterMsg) => {
+  if (speechState.value.key === `answer-${msg.id}` && speechState.value.status === 'loading') return '…';
+  if (msg.voiceStatus === 'preparing') return '…';
+  return msg.voiceDuration ? `${Math.min(msg.voiceDuration, 60)}"` : '语音';
+};
+
+const playVoice = (msg: MasterMsg) => {
+  if (msg.voiceStatus === 'preparing') {
+    uni.showToast({ title: '语音生成中，请稍候', icon: 'none' });
+    return;
+  }
+  msg.unread = false;
+  void speechPlayback.toggle(`answer-${msg.id}`, spokenTextOf(msg));
+};
+
 const snippetExcerpt = (text = '') => {
   const value = text.trim();
   return value.length > 260 ? `${value.slice(0, 260)}...` : value;
@@ -2018,4 +2090,85 @@ onUnload(() => {
 .pending-bubble .bubble-text {
   color: #8a93a0;
 }
+
+/* ===== voice-first master replies (WeChat voice message style) ===== */
+.master-col {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 82%;
+}
+
+.master-col .bubble {
+  max-width: 100%;
+}
+
+.voice-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.voice-bubble {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 96px;
+  padding: 11px 14px;
+  cursor: pointer;
+}
+
+.voice-bubble.playing {
+  background: #ffe9eb;
+}
+
+.voice-icon {
+  font-size: 15px;
+  line-height: 1;
+}
+
+.voice-duration {
+  color: #232a33;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.voice-dot {
+  flex-shrink: 0;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #f43b30;
+}
+
+.transcript-toggle {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 4px 12px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(20, 24, 31, 0.06);
+  color: #6b7480;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* compact header */
+.chat-head {
+  padding: 8px 12px 6px;
+}
+
+.chat-head-row {
+  margin-bottom: 6px;
+}
+
+.chat-title {
+  font-size: 16px;
+}
+
+.chat-source-switch .source-option {
+  padding: 5px 0;
+  font-size: 13px;
+}
 </style>

mobile-uni/src/services/speech.ts

@@ -210,10 +210,64 @@ export const createSpeechPlaybackController = (
     }
   };
 
+  /**
+   * Synthesize (and cache) audio for `text` without playing it, so a
+   * WeChat-style voice bubble can show duration before the first tap.
+   * Returns the audio source URL, or null when remote TTS is unavailable.
+   */
+  const preload = async (text: string): Promise<string | null> => {
+    const value = text.trim();
+    if (!value) return null;
+    const cached = sourceCache.get(value);
+    if (cached) return cached;
+    try {
+      const result = await synthesizeSpeech(value);
+      const source = result.inlineAudioUrl || result.audioUrl;
+      if (!source) return null;
+      sourceCache.set(value, source);
+      while (sourceCache.size > maxCachedSources) {
+        const oldestKey = sourceCache.keys().next().value as string | undefined;
+        if (!oldestKey) break;
+        sourceCache.delete(oldestKey);
+      }
+      return source;
+    } catch {
+      return null;
+    }
+  };
+
   const destroy = () => {
     stop();
     sourceCache.clear();
   };
 
-  return { toggle, stop, destroy };
+  return { toggle, stop, destroy, preload };
 };
+
+export const measureAudioDuration = (source: string): Promise<number | null> =>
+  new Promise((resolve) => {
+    if (typeof Audio === 'undefined') {
+      resolve(null);
+      return;
+    }
+    const probe = new Audio();
+    let settled = false;
+    const finish = (value: number | null) => {
+      if (settled) return;
+      settled = true;
+      probe.src = '';
+      resolve(value);
+    };
+    const timer = setTimeout(() => finish(null), 8000);
+    probe.preload = 'metadata';
+    probe.onloadedmetadata = () => {
+      clearTimeout(timer);
+      const duration = probe.duration;
+      finish(Number.isFinite(duration) && duration > 0 ? Math.max(1, Math.round(duration)) : null);
+    };
+    probe.onerror = () => {
+      clearTimeout(timer);
+      finish(null);
+    };
+    probe.src = source;
+  });