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

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

src/views/interview/work/index.vue

@@ -1,7 +1,12 @@
 <script lang="tsx" name="Work" setup>
 defineOptions({ name: 'Work' })
 import { ref, computed } from 'vue'
-import { getBackgroundImage, IMAGE_PATHS, getStaticImage, getPublicPath } from '@/utils'
+import {
+  getBackgroundImage,
+  IMAGE_PATHS,
+  getStaticImage,
+  getPublicPath,
+} from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
 import { GuideSteps } from '@/components/Guide'
@@ -28,14 +33,14 @@ const steps = [
     id: 'step1',
     audioSrc: getPublicPath('audio/py_3_001.MP3'),
     content: '我们常常会思考，未来自己想成为什么样的人呢？',
-    highlightSelector: '.img-switch-item--case'
+    highlightSelector: '.img-switch-item--case',
   },
   {
     id: 'step2',
     audioSrc: getPublicPath('audio/py_3_002.MP3'),
     content: '如果把这份思考勇敢地说出来，被镜头记录下来，你会如何表达呢？',
-    highlightSelector: '.work-border'
-  }
+    highlightSelector: '.work-border',
+  },
 ]
 
 //切换图片
@@ -43,28 +48,28 @@ const sideSwitcherItems = ref([
   {
     key: 'vlog',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'case',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'profession',
     description: '我的职业蓝图',
-    image: 'interview/work/案件赏析小屏'
+    image: 'interview/work/案件赏析小屏',
   },
   {
     key: 'idea',
     description: '我的职业蓝图',
-    image: 'interview/work/思路提点小屏'
-  }
+    image: 'interview/work/思路提点小屏',
+  },
 ])
 
 //当前选中的item
 const currentItem = computed(() => {
-  return sideSwitcherItems.value.find(item => item.key === selected.value)
+  return sideSwitcherItems.value.find((item) => item.key === selected.value)
 })
 
 const handleSideSwitcherChange = (value: WorkTab) => {
@@ -76,10 +81,11 @@ const handleImageClick = () => {
     name: 'InterviewVideo',
     query: {
       image:
-        workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
-        '',
-      key: selected.value
-    }
+        workSideSwitcherRef.value?.items.find(
+          (item) => item.key === selected.value,
+        )?.activeImage || '',
+      key: selected.value,
+    },
   })
 }
 
@@ -106,7 +112,11 @@ function openImages(urls: string[], startIndex = 0) {
     images: urls,
     startIndex,
     maskClosable: true,
-    getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+    getScaleMetrics: () => ({
+      scale: scale.value,
+      offsetX: offsetX.value,
+      offsetY: offsetY.value,
+    }),
   })
 }
 </script>
@@ -116,7 +126,9 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 背景图片-center -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage('interview/work/任务取景框背景') }"
+      :style="{
+        backgroundImage: getBackgroundImage('interview/work/任务取景框背景'),
+      }"
     ></div>
 
     <!-- 关闭 -->
@@ -133,10 +145,14 @@ function openImages(urls: string[], startIndex = 0) {
     >
       <!-- 手 -->
       <div
-        class="absolute left-[46%] top-[40%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
+        class="absolute left-[46%] top-[45%] -translate-x-1/2 -translate-y-1/2 z-10 animate-bounce pointer-events-none"
       >
-        <img class="w-40" :src="getStaticImage('work/小手')" alt="" />
-        <span class="text-white text-2xl font-bold ml-5">点击进入</span>
+        <img
+          class="w-40"
+          :src="getStaticImage('work/小手')"
+          alt=""
+        />
+        <!-- <span class="text-white text-2xl font-bold ml-5">点击进入</span> -->
       </div>
       <div
         class="flex items-center pl-16 w-[1357px] h-[265px] absolute -bottom-16 left-0 bg-cover bg-center bg-no-repeat z-20"
@@ -169,7 +185,11 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 任务取景按钮 -->
     <ImgButton
       class="absolute right-14 bottom-10"
-      :image="isInterviewUnlock ? IMAGE_PATHS.WORK.TASK_BTN_OK : IMAGE_PATHS.WORK.TASK_BTN"
+      :image="
+        isInterviewUnlock
+          ? IMAGE_PATHS.WORK.TASK_BTN_OK
+          : IMAGE_PATHS.WORK.TASK_BTN
+      "
       @click="handleWorkClick"
     />