feat: 完善课程引导与实战评价体验

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/views/interview/practice/video/index.vue

@@ -2,9 +2,10 @@
 import { useRouter } from 'vue-router'
 import { Video } from '@/components'
 import { ImgButton } from '@/components/Button'
-import { StarRating } from '@/components/Rating'
-import { IMAGE_PATHS, getBackgroundImage } from '@/utils'
-import { Overlay } from '@/components/Overlay'
+import PracticeRatingModal, {
+  type PracticeRatingItem,
+} from '@/components/PracticeRatingModal'
+import { IMAGE_PATHS, getPublicPath } from '@/utils'
 import { ref } from 'vue'
 
 const router = useRouter()
@@ -12,46 +13,42 @@ const router = useRouter()
 const props = defineProps({
   path: {
     type: String,
-    required: true
-  }
+    required: true,
+  },
 })
 
-interface EvaluationItem {
-  /** 标题 */
-  title: string
-  /** 描述 */
-  description: string
-  /** 评分 */
-  score: number
-}
-
 /** 评估项目列表 */
-const evaluationItems = ref<EvaluationItem[]>([
+const evaluationItems = ref<PracticeRatingItem[]>([
   {
-    title: '主题与内容',
-    description: '主题明确聚焦"身边美好"，内容真实、有感染力，能让观众感受到日常闪光',
-    score: 3
+    title: '人物表达',
+    description: '能清晰介绍人物身份、特点或故事，让观众认识人物',
+    score: 4,
   },
   {
-    title: '拍摄技巧',
-    description: '运镜自然、光线运用合理、画面清晰饱和度、能辅助主题表达（至少1种运镜+1种光线）',
-    score: 4
+    title: '素材拍摄',
+    description: '画面包含必要人物镜头、环境镜头与细节素材，内容较丰富',
+    score: 2,
   },
   {
-    title: '剪辑与包装',
-    description: '素材拼接流畅，调色/滤镜适配、字幕清晰、音乐不盖人声、整体风格统一',
-    score: 5
+    title: '镜头语言',
+    description: '合理使用移动镜头、特写、跟拍等方式增强表现力',
+    score: 5,
   },
   {
-    title: '创意与独特性',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”,避免平淡复刻',
-    score: 4
+    title: '剪辑结构',
+    description: '结构完整清晰，段落顺畅，内容有起承转合',
+    score: 0,
   },
   {
-    title: '综合感受',
-    description: '视角新颖、有个人观察，或用特殊细节/情节展现“美好”避免平淡复刻',
-    score: 5
-  }
+    title: '音画关系',
+    description: '画面与配音/环境音基本匹配，能辅助理解内容',
+    score: 5,
+  },
+  {
+    title: '综合观感',
+    description: '作品完整，有真实感与感染力，具备观看吸引力',
+    score: 5,
+  },
 ])
 
 /** 保存弹窗 */
@@ -76,54 +73,20 @@ const handleBack = (): void => {
       @click="showModal = true"
     />
     <Video
-      :src="decodeURIComponent(props.path)"
+      :src="getPublicPath(decodeURIComponent(props.path))"
       :volume="1"
       :muted="false"
       :controls="true"
       :loop="false"
     />
 
-    <!-- 保存图片弹窗 -->
-    <Overlay :visible="showModal" :clickable="false">
-      <div
-        class="w-[1795px] h-[987px] bg-no-repeat bg-cover p-10 pt-[80px]"
-        :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分底板') }"
-      >
-        <ImgButton
-          class="absolute -top-8 -right-14 z-10"
-          :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-          @click="showModal = false"
-        />
-
-        <div class="relative h-full overflow-y-scroll px-8">
-          <div
-            class="w-full bg-no-repeat bg-cover bg-left py-44"
-            :style="{ backgroundImage: getBackgroundImage('vlog/practice/滑动表内文字') }"
-          >
-            <div class="pl-10 space-y-16">
-              <div
-                v-for="(item, index) in evaluationItems"
-                :key="index"
-                class="relative w-full h-[182px] bg-no-repeat bg-cover px-12 py-3 flex justify-between"
-                :style="{ backgroundImage: getBackgroundImage('vlog/practice/评分条') }"
-              >
-                <div class="pr-8 space-y-10">
-                  <h4 class="text-3xl font-bold text-white mb-3">
-                    {{ `0${index + 1}` }} {{ item.title }}
-                  </h4>
-                  <p class="text-3xl text-gray-800 font-bold leading-relaxed">
-                    {{ item.description }}
-                  </p>
-                </div>
-                <StarRating class="absolute -bottom-5 right-10" :score="item.score" size="lg" />
-              </div>
-              <div class="w-full flex justify-center">
-                <ImgButton image="vlog/practice/保存" @click="showModal = false" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Overlay>
+    <PracticeRatingModal
+      :visible="showModal"
+      :items="evaluationItems"
+      background-image="interview/practice/人物访谈短片创作-作品评分表"
+      top-tip="评分时要关注6个维度哦~分别是人物表达、素材拍摄、镜头语言、剪辑结构、音画关系、综合观感每个维度满分5分，能打1-5分，记得对照作品表现来打分呀~"
+      bottom-tip="己评价的实战作品，从封面入口就能直接看到具体评分！打了多少分一目了然，不用再点进详情页翻找啦～"
+      @close="showModal = false"
+    />
   </div>
 </template>