Quellcode durchsuchen

feat(speaking): show word-level pronunciation underlines in detailed report

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
jimmylee vor 1 Monat
Ursprung
Commit
7a0aa304eb
1 geänderte Dateien mit 14 neuen und 4 gelöschten Zeilen
  1. 14 4
      src/views/Editor/EnglishSpeaking/preview/DetailedReport.vue

+ 14 - 4
src/views/Editor/EnglishSpeaking/preview/DetailedReport.vue

@@ -124,15 +124,19 @@
             </div>
 
             <!-- 反馈信息 -->
-            <div v-if="sentence.feedback" class="feedback-section">
-              <div v-if="sentence.feedback.comment" class="feedback-block">
+            <div v-if="sentence.feedback || (sentence.wordAnalysis && sentence.wordAnalysis.length)" class="feedback-section">
+              <div v-if="sentence.feedback?.comment" class="feedback-block">
                 <div class="feedback-block-label"><span class="fb-good">✓</span> 一句话点评</div>
                 <p class="feedback-text">{{ sentence.feedback.comment }}</p>
               </div>
-              <div v-if="sentence.feedback.betterExpression" class="feedback-block">
+              <div v-if="sentence.feedback?.betterExpression" class="feedback-block">
                 <div class="feedback-block-label"><span class="fb-suggest">→</span> 进阶表达</div>
                 <p class="better-expression">{{ sentence.feedback.betterExpression }}</p>
               </div>
+              <div v-if="sentence.wordAnalysis && sentence.wordAnalysis.length" class="feedback-block">
+                <div class="feedback-block-label"><span class="fb-mic">🎤</span> 发音详情</div>
+                <WordPronunciationDisplay :words="sentence.wordAnalysis" />
+              </div>
             </div>
           </div>
         </div>
@@ -145,6 +149,7 @@
 import { ref, computed } from 'vue'
 import type { SentenceEvaluation } from '@/types/englishSpeaking'
 import { useAudioPlayer } from '../composables/useAudioPlayer'
+import WordPronunciationDisplay from './WordPronunciationDisplay.vue'
 
 interface Props {
   sentenceEvaluations: SentenceEvaluation[]
@@ -187,7 +192,11 @@ function toggleAll() {
 }
 
 function hasDetails(sentence: SentenceEvaluation) {
-  return Boolean(sentence.pronunciation || sentence.feedback)
+  return Boolean(
+    sentence.pronunciation
+      || sentence.feedback
+      || (sentence.wordAnalysis && sentence.wordAnalysis.length),
+  )
 }
 
 function formatDuration(seconds: number | null | undefined): string {
@@ -343,6 +352,7 @@ function getScoreClass(score: number) {
 .fb-good { color: #22c55e; }
 .fb-fix { color: #3b82f6; }
 .fb-suggest { color: #f59e0b; }
+.fb-mic { color: #f97316; }
 .feedback-text {
   margin: 0;
   font-size: 11px;