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

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

src/views/film/midterm-shooting/shooting/index.vue

@@ -4,7 +4,12 @@ import { useRouter } from 'vue-router'
 import { GuideSteps } from '@/components/Guide'
 import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import {
+  getBackgroundImage,
+  getPublicPath,
+  getStaticImage,
+  IMAGE_PATHS,
+} from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/new/composition/xsdh_jzgtf_batch.mp4'
 import KnowledgeCard from '@/components/KnowledgeCard/FilmKnowledgeCard.vue'
@@ -35,26 +40,26 @@ const steps = ref([
     id: '1',
     audioSrc: getPublicPath('audio/py_4_015.MP3'),
     content: '哇，徐汇滨江真的超适合取景！一起看看可以运用哪些构图方法吧~',
-    highlightSelector: '.btn-1'
-  }
+    highlightSelector: '.btn-1',
+  },
 ])
 
 const guideSteps = ref([
   {
     id: '1',
     content: '点击框架构图，查看构图方法',
-    highlightSelector: '.btn-item-1'
+    highlightSelector: '.btn-item-1',
   },
   {
     id: '2',
     content: '点击对称构图，查看构图方法',
-    highlightSelector: '.btn-item-2'
+    highlightSelector: '.btn-item-2',
   },
   {
     id: '3',
     content: '点击引导线构图，查看构图方法',
-    highlightSelector: '.btn-item-3'
-  }
+    highlightSelector: '.btn-item-3',
+  },
 ])
 const showModal = ref(false)
 
@@ -65,7 +70,7 @@ const currentItem = ref<Btn>({
   name: '',
   btnImage: '',
   images: [],
-  desc: ''
+  desc: '',
 })
 
 const btnList = ref<Btn[]>([
@@ -74,22 +79,25 @@ const btnList = ref<Btn[]>([
     name: '框架构图',
     btnImage: 'film/shooting/框架构图',
     desc: '框架构图是拍摄时用“框架”把主体框起来，可以让画面更加有空间感及层次感，并且使用也并不复杂，比如镜子、门窗、山洞等，也可以说是光影框等。',
-    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图']
+    images: ['film/shooting/01框架构图_底图', 'film/shooting/02框架构图_底图'],
   },
   {
     key: '2',
     name: '对称构图',
     btnImage: 'film/shooting/对称构图',
     desc: '对称构图是通过画面中轴线（水平 / 垂直）两侧元素镜像分布的构图方式，属于平衡类构图。它借对称的视觉均衡感，让画面显规整、稳定，同时强化主体秩序与美感。拍摄可找天然对称景物（如建筑、倒影），或调整角度让元素对称；略有不对称可后期微调，适合展现建筑、对称静物等规整场景。',
-    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图']
+    images: ['film/shooting/03对称构图_底图', 'film/shooting/04对称构图_底图'],
   },
   {
     key: '3',
     name: '引导线构图',
     btnImage: 'film/shooting/引导线构图',
-    desc: '引导线构图的关键在于引导线，借助环境中的引导线，把观者注意力集中到引导线上，营造画面纵深效果，我们日常拍摄中常见的引导线有:马路及其延伸(马路线、栏杆、走廊)',
-    images: ['film/shooting/05引导线构图_底图', 'film/shooting/06引导线构图_底图']
-  }
+    desc: '引导线构图的关键在于引导线，借助环境中的引导线，把观者注意力集中到引导线上，营造画面纵深效果，我们日常拍摄中常见的引导线有:马路及其延伸(马路线、栏杆、走廊)。',
+    images: [
+      'film/shooting/05引导线构图_底图',
+      'film/shooting/06引导线构图_底图',
+    ],
+  },
 ])
 
 const handleModalClose = () => {
@@ -135,19 +143,36 @@ const back = () => {
     ></div>
 
     <div class="shooting-title">
-      <img :src="shootingtitle" alt="" />
+      <img
+        :src="shootingtitle"
+        alt=""
+      />
     </div>
     <div class="shooting-return">
-      <ImgButton image="shooting/返回.png" @click="back" />
+      <ImgButton
+        image="shooting/返回.png"
+        @click="back"
+      />
     </div>
     <div class="absolute left-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton class="btn-2" image="film/shooting/龙美术馆入口.png" @click="handleClickA" />
+      <ImgButton
+        class="btn-2"
+        image="film/shooting/龙美术馆入口.png"
+        @click="handleClickA"
+      />
     </div>
     <div class="absolute right-[12%] top-1/2 -translate-y-[calc(50%-70px)]">
-      <ImgButton class="btn-3" image="film/shooting/油罐艺术公园入口.png" @click="handleClickB" />
+      <ImgButton
+        class="btn-3"
+        image="film/shooting/油罐艺术公园入口.png"
+        @click="handleClickB"
+      />
     </div>
     <div class="shooting-composition btn-1">
-      <ImgButton image="shooting/构图指南.png" @click="openCompositionGuide" />
+      <ImgButton
+        image="shooting/构图指南.png"
+        @click="openCompositionGuide"
+      />
     </div>
 
     <!-- 引导步骤 -->
@@ -164,7 +189,7 @@ const back = () => {
       :visible="showModal"
       :clickable="false"
       :customStyle="{
-        backgroundImage: getBackgroundImage('film/shooting/构图指南底图')
+        backgroundImage: getBackgroundImage('film/shooting/构图指南底图'),
       }"
       customClass="inset-0 bg-cover bg-center bg-no-repeat"
       contentClass="relative w-full h-full"
@@ -177,15 +202,25 @@ const back = () => {
       />
 
       <!-- 构图指南 -->
-      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+      <ImgButton
+        class="absolute left-0 top-0 z-10"
+        image="shooting/标题-构图指南"
+      />
 
       <!-- 新手导航视频 -->
       <div class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2">
-        <ImgButton image="shooting/新手导航-视频回顾" @click="showModal3 = true" />
+        <ImgButton
+          image="shooting/新手导航-视频回顾"
+          @click="showModal3 = true"
+        />
         <div
           class="absolute left-[40%] top-[42%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
         >
-          <img class="w-32" :src="getStaticImage('work/小手')" alt="" />
+          <img
+            class="w-32"
+            :src="getStaticImage('work/小手')"
+            alt=""
+          />
           <span class="text-white text-2xl font-bold ml-5">点击进入</span>
         </div>
       </div>
@@ -220,8 +255,16 @@ const back = () => {
         @close="showModal2 = false"
       />
       <!-- 视频 -->
-      <Overlay :visible="showModal3" :clickable="false">
-        <Video :src="videoSrc" controls :volume="1" :muted="false"></Video>
+      <Overlay
+        :visible="showModal3"
+        :clickable="false"
+      >
+        <Video
+          :src="videoSrc"
+          controls
+          :volume="1"
+          :muted="false"
+        ></Video>
         <!-- 返回 -->
         <ImgButton
           class="absolute right-0 top-0 z-10"