更新

app/video_companion/src/App.vue

@@ -23,6 +23,7 @@ const props = defineProps<{
   chatBusy: Readonly<Ref<boolean>>
   notice: Readonly<Ref<string>>
   hasMoreMessages: Readonly<Ref<boolean>>
+  transcriptionState: Readonly<Ref<string>>
   onSendText: (text: string) => Promise<void>
   onSendAttachment: (file: File) => Promise<void>
   onLoadMore: () => Promise<void>
@@ -42,6 +43,15 @@ const isChat = computed(() => props.mode.value === 'chat')
 const isCalling = computed(() => ['starting', 'dialing', 'connected'].includes(props.phase.value))
 const videoVisible = computed(() => !isChat.value || isCalling.value)
 const canCapture = computed(() => props.phase.value === 'connected')
+const transcriptionActive = computed(() => props.transcriptionState.value === 'recording')
+const transcriptionFailed = computed(() => props.transcriptionState.value === 'error')
+const transcriptionStatusText = computed(() => {
+  if (props.transcriptionState.value === 'starting') return '自动录音启动中…'
+  if (props.transcriptionState.value === 'recording') return '自动录音并转文字中'
+  if (props.transcriptionState.value === 'stopping') return '正在保存录音文字…'
+  if (props.transcriptionState.value === 'error') return '自动录音转文字失败'
+  return '自动录音已结束'
+})
 
 watch(
   () => props.messages.value.length,
@@ -242,6 +252,19 @@ async function captureScreenshot(): Promise<void> {
       </div>
 
       <div v-if="isCalling" class="video-actions">
+        <div
+          v-if="canCapture"
+          class="recording-status"
+          :class="{
+            'recording-status--active': transcriptionActive,
+            'recording-status--error': transcriptionFailed,
+          }"
+          role="status"
+          aria-live="polite"
+        >
+          <span class="recording-indicator" aria-hidden="true" />
+          {{ transcriptionStatusText }}
+        </div>
         <button
           class="capture-button"
           type="button"