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

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

src/views/interview/index.vue

@@ -1,8 +1,9 @@
-<script lang="tsx" setup>
+<script lang="tsx" name="Interview" setup>
+defineOptions({ name: 'Interview' })
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
 
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { ProgressBar, Overlay } from '@/components'
 import { useRouter } from 'vue-router'
 import { useInterviewStore } from '@/stores'
@@ -12,7 +13,8 @@ const router = useRouter()
 const interview = useInterviewStore()
 const visible = ref(false)
 
-const currentStep = ref(interview.InterviewUnlockProgress)
+const currentStep = computed(() => interview.InterviewUnlockProgress)
+const progress = computed(() => interview.progressPercent)
 
 const handleComplete = () => {
   // console.log('完成前置条件')
@@ -21,8 +23,7 @@ const handleComplete = () => {
 }
 
 const handleStepChange = (step: number) => {
-  // 处理步骤变化逻辑
-  currentStep.value = step
+  interview.setInterviewUnlockProgress(step)
   visible.value = true
 }
 
@@ -48,9 +49,19 @@ onMounted(() => {
     <!-- 背景图片-center -->
     <div
       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+      :style="{ backgroundImage: getBackgroundImage('interview/访谈背景.png') }"
     ></div>
 
+    <!-- 关闭 -->
+    <div class="absolute top-[140px] left-[calc(50%)] -translate-x-1/2">
+      <div
+        class="flex items-center justify-center text-white font-[1000] [text-shadow:_6px_6px_4px_#2b80c1,_6px_6px_4px_#2b80c1,_6px_6px_4px_#2b80c1,_6px_6px_4px_#2b80c1]"
+      >
+        <span class="text-6xl">学习进度：</span>
+        <span class="text-7xl">{{ progress }}%</span>
+      </div>
+    </div>
+
     <!-- 关闭 -->
     <ImgButton
       class="absolute right-0 top-0 z-20"
@@ -66,7 +77,7 @@ onMounted(() => {
 
     <!-- 标题 -->
     <div class="absolute top-2 left-1/2 -translate-x-1/2">
-      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+      <ImgButton :image="'interview/访谈-聆听与对话.png'" />
     </div>
 
     <!-- 任务取景按钮 -->
@@ -96,13 +107,20 @@ onMounted(() => {
 
       <!-- 进度条 -->
       <div class="absolute left-0 bottom-0 w-full">
-        <ProgressBar :current-step="currentStep" @step-change="handleStepChange" />
+        <ProgressBar
+          module-name="interview"
+          :current-step="currentStep"
+          :completed-step="interview.completedStep"
+          @step-change="handleStepChange"
+        />
       </div>
     </Overlay>
 
     <div class="absolute bottom-0 w-full">
       <ProgressBar
+        module-name="interview"
         :current-step="currentStep"
+        :completed-step="interview.completedStep"
         @complete="handleComplete"
         @step-change="handleStepChange"
       />