Explorar o código

feat(speaking): render AI image in detailed report for video scene mode

jimmylee hai 1 mes
pai
achega
4463a0f9e3
Modificáronse 1 ficheiros con 17 adicións e 3 borrados
  1. 17 3
      src/views/Editor/EnglishSpeaking/preview/DetailedReport.vue

+ 17 - 3
src/views/Editor/EnglishSpeaking/preview/DetailedReport.vue

@@ -83,9 +83,14 @@
                 </span>
               </div>
 
-              <!-- 文本 -->
-              <p class="card-text">{{ sentence.content }}</p>
-              <p v-if="sentence.contentZh" class="card-text-zh">{{ sentence.contentZh }}</p>
+              <!-- 文本 / 图片 -->
+              <template v-if="sentence.imageUrl">
+                <img :src="sentence.imageUrl" class="card-image" alt="AI generated image" />
+              </template>
+              <template v-else>
+                <p class="card-text">{{ sentence.content }}</p>
+                <p v-if="sentence.contentZh" class="card-text-zh">{{ sentence.contentZh }}</p>
+              </template>
             </div>
 
             <!-- 评分标签 -->
@@ -310,6 +315,15 @@ function getScoreClass(score: number) {
 .card-text { font-size: 12px; color: #1f2937; margin: 0; line-height: 1.5; }
 .card-text-zh { font-size: 10px; color: #9ca3af; margin: 2px 0 0; }
 
+.card-image {
+  width: 100%;
+  max-width: 320px;
+  border-radius: 8px;
+  display: block;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+}
+
 .card-right {
   display: flex;
   flex-direction: column;