feat: 完善访谈与vlog模块页面，重组设备与图片公共资源，新增音频管理与一班对接工具

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

src/views/interview/work/index.vue

@@ -4,7 +4,7 @@ import { ref, computed } from 'vue'
 import { getBackgroundImage, IMAGE_PATHS, getStaticImage } from '@/utils'
 import { ImgButton } from '@/components/Button'
 import WorkSideSwitcher from './components/WorkSideSwitcher.vue'
-import { GuideSteps, type GuideStep } from '@/components/Guide'
+import { GuideSteps } from '@/components/Guide'
 import { useRouter } from 'vue-router'
 import { useScale } from '@/composables/useScale'
 import { ImagePreview } from '@/components'
@@ -17,7 +17,6 @@ const interview = useInterviewStore()
 type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
 
 const selected = ref<WorkTab>('case')
-const stepIndex = ref(0)
 const workSideSwitcherRef = ref<InstanceType<typeof WorkSideSwitcher>>()
 
 const isGuideInterviewTask = computed(() => interview.isGuideInterviewTask)
@@ -28,32 +27,37 @@ const steps = [
   {
     id: 'step1',
     content:
-      '现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。'
+      '现在我们要一起走进 Vlog 的世界。简单说，Vlog 就是用视频记录生活的一种方式 —— 它像一本会动的日记，能把我们身边的小事、瞬间的心情，通过镜头变得生动又具体。',
+    highlightSelector: '.img-switch-item--case'
   },
-  { id: 'step2', content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。' }
+  {
+    id: 'step2',
+    content: '接下来，我们就通过一个具体的案例，看看 Vlog 是怎么“捕捉美好” 的吧。',
+    highlightSelector: '.work-border'
+  }
 ]
 
 //切换图片
 const sideSwitcherItems = ref([
   {
     key: 'vlog',
-    description: '记录身边的美好',
-    image: 'work/vlog背景全屏待定'
+    description: '我的职业蓝图',
+    image: 'interview/work/案件赏析小屏'
   },
   {
     key: 'case',
-    description: '案例赏析-桂花酒酿小圆子',
-    image: 'work/案例背景待定'
+    description: '我的职业蓝图',
+    image: 'interview/work/案件赏析小屏'
   },
   {
     key: 'profession',
-    description: '专业剖析-桂花酒酿小圆子',
-    image: 'work/专业剖析小屏'
+    description: '我的职业蓝图',
+    image: 'interview/work/案件赏析小屏'
   },
   {
     key: 'idea',
-    description: '思路提点-桂花酒酿小圆子',
-    image: 'work/思路提点小屏'
+    description: '我的职业蓝图',
+    image: 'interview/work/思路提点小屏'
   }
 ])
 
@@ -62,21 +66,13 @@ const currentItem = computed(() => {
   return sideSwitcherItems.value.find(item => item.key === selected.value)
 })
 
-const currentHighlight = computed(() =>
-  stepIndex.value === 0 ? '.img-switch-item--case' : '.work-border'
-)
-
-const handleStepChange = (_step: GuideStep | null, index: number) => {
-  stepIndex.value = index
-}
-
 const handleSideSwitcherChange = (value: WorkTab) => {
   if (selected.value === value) return
 }
 
 const handleImageClick = () => {
   router.push({
-    name: 'FilmVideo',
+    name: 'InterviewVideo',
     query: {
       image:
         workSideSwitcherRef.value?.items.find(item => item.key === selected.value)?.activeImage ||
@@ -87,7 +83,7 @@ const handleImageClick = () => {
 }
 
 const handleClose = () => {
-  router.push({ name: 'Film' })
+  router.push({ name: 'Interview' })
 }
 
 const handleWorkClick = () => {
@@ -99,7 +95,6 @@ const handleGuideComplete = () => {
 }
 
 const handleOpenGuide = () => {
-  stepIndex.value = 0
   interview.setIsGuideInterviewTask(true)
 }
 
@@ -120,7 +115,7 @@ function openImages(urls: string[], startIndex = 0) {
     <!-- 背景图片-center -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BG) }"
+      :style="{ backgroundImage: getBackgroundImage('interview/work/任务取景框背景') }"
     ></div>
 
     <!-- 关闭 -->
@@ -135,6 +130,13 @@ function openImages(urls: string[], startIndex = 0) {
       class="work-border absolute top-[140px] left-24 inset-0 bg-cover bg-center bg-no-repeat z-10 w-[1360px] h-[800px] p-10"
       :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.BORDER) }"
     >
+      <!-- 手 -->
+      <div
+        class="absolute left-[46%] top-[40%] -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>
+      </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"
         :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.WORK.TITLE) }"
@@ -142,8 +144,8 @@ function openImages(urls: string[], startIndex = 0) {
         <span
           class="mt-24 text-white font-bold text-6xl [text-shadow:0_2px_4px_rgba(0,0,0,0.2),0_0_6px_rgba(0,207,255,0.9),0_0_14px_rgba(0,207,255,0.7)]"
         >
-          {{ currentItem?.description }}</span
-        >
+          {{ currentItem?.description }}
+        </span>
       </div>
       <img
         @click="handleImageClick"
@@ -174,10 +176,8 @@ function openImages(urls: string[], startIndex = 0) {
     <GuideSteps
       v-if="isGuideInterviewTask"
       :steps="steps"
-      :highlight-selector="currentHighlight"
       :highlight-padding="12"
       :highlight-radius="20"
-      @step-change="handleStepChange"
       @complete="handleGuideComplete"
       @skip="handleGuideComplete"
       position-offset-y="85%"