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

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

src/views/interview/after-editing/editing.vue

@@ -1,69 +1,63 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
-// import { GuideSteps } from '@/components/Guide'
+import { StepNavigation } from '@/components/Guide'
 import { IMAGE_PATHS } from '@/utils'
+import { Video } from '@/components'
+
 const router = useRouter()
 
-// 导入视频文件
 import videoBasic from '/video/vlog_zhizuobianjiaojing_jichujianji.mp4'
 import videoSoundeffect from '/video/vlog_renwuqujing_yingxiaochuli.mp4'
 import videoPackaging from '/video/vlog_renwuqujing_baozhuang.mp4'
 import videoCopyright from '/video/vlog_renwuqujing_banquanguifan.mp4'
 const videoList = [videoBasic, videoSoundeffect, videoPackaging, videoCopyright]
 
-const videoRef = ref<HTMLVideoElement>()
+const navigationSteps = [
+  {
+    id: 'step1',
+    label: '后期制作',
+    content: '声画剪辑流程',
+    type: 'post' as const
+  },
+  {
+    id: 'step2',
+    label: '后期制作',
+    content: 'J-cut/L-cut运用',
+    type: 'post' as const
+  },
+  {
+    id: 'step3',
+    label: '后期制作',
+    content: '【Q3】节奏剪辑技巧',
+    type: 'post' as const
+  }
+]
+
 const currentVideoIndex = ref(0)
+const playing = ref(false)
+const showStepNavigation = ref(false)
 
-onMounted(() => {
-  // 确保视频元素加载并自动播放
-  if (videoRef.value) {
-    videoRef.value.src = videoList[currentVideoIndex.value]
-    videoRef.value.load()
-
-    // 尝试自动播放
-    const playPromise = videoRef.value.play()
-
-    if (playPromise !== undefined) {
-      playPromise.catch(error => {
-        // 自动播放失败，可能是浏览器策略阻止，需要用户交互
-        console.log('自动播放被阻止:', error)
-      })
-    }
-
-    // 监听视频结束事件
-    videoRef.value.addEventListener('ended', playNextVideo)
-  }
-})
-
-// 播放下一个视频
 const playNextVideo = () => {
-  if (currentVideoIndex.value < videoList.length - 1) {
-    currentVideoIndex.value++
-    if (videoRef.value) {
-      videoRef.value.src = videoList[currentVideoIndex.value]
-      videoRef.value.load()
-
-      // 自动播放下一个视频
-      const playPromise = videoRef.value.play()
-
-      if (playPromise !== undefined) {
-        playPromise.catch(error => {
-          console.log('自动播放被阻止:', error)
-        })
-      }
-    }
+  if (currentVideoIndex.value >= videoList.length - 1) {
+    playing.value = false
+    return
   }
+
+  currentVideoIndex.value++
+  nextTick(() => {
+    playing.value = true
+  })
 }
 
-// 监听当前视频索引变化
-watch(currentVideoIndex, newIndex => {
-  if (videoRef.value) {
-    videoRef.value.src = videoList[newIndex]
-    videoRef.value.load()
-  }
-})
+const handleStepClick = (index: number) => {
+  currentVideoIndex.value = index
+  // showStepNavigation.value = false
+  nextTick(() => {
+    playing.value = true
+  })
+}
 
 const handleClose = () => {
   router.back()
@@ -71,29 +65,40 @@ const handleClose = () => {
 </script>
 
 <template>
-  <div>
-    <!--使用动态绑定和ref-->
-    <video
-      ref="videoRef"
+  <div class="relative w-full h-full overflow-hidden bg-black">
+    <Video
       :src="videoList[currentVideoIndex]"
-      type="video/mp4"
-      controls
-      preload="auto"
-      class="video-player"
-      autoplay
-    ></video>
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      @ended="playNextVideo"
+    />
     <ImgButton
       class="absolute right-0 top-0 z-10"
       :image="IMAGE_PATHS.COMPONENTS.BACK"
       @click="handleClose"
     />
+    <button
+      class="absolute right-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500/80 text-white transition-all duration-200 hover:bg-blue-500"
+      title="步骤导航"
+      @click="showStepNavigation = true"
+    >
+      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <path
+          d="M3 4H17M3 8H17M3 12H17M3 16H17"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </button>
+    <StepNavigation
+      :visible="showStepNavigation"
+      :background-image="''"
+      :steps="navigationSteps"
+      :current-step-index="currentVideoIndex"
+      @step-click="handleStepClick"
+      @close="showStepNavigation = false"
+    />
   </div>
 </template>
-
-<style scoped>
-.video-player {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-</style>