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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-05 15:41:41 +08:00
1 parent c4c9be9d35
commit fc9633f371
@@ -0,0 +1,113 @@
+import { defineComponent, ref } from 'vue'
+import { getBackgroundImage, getPublicPath, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+import { GuideSteps, ImagePreview } from '@/components'
+import { useScale } from '@/composables/useScale'
+
+const CourseFrameGuide = () => (
+  <div class="flex items-center justify-start">
+    点击
+    <img class="w-20" src={getStaticImage(IMAGE_PATHS.BUTTONS.COURSE_FRAME)} alt="" />
+    查看课程结构，快速了解每个模块的学习内容。
+  </div>
+)
+
+const OperateGuide = () => (
+  <div class="flex items-center justify-start">
+    <img class="w-20 inline" src={getStaticImage(IMAGE_PATHS.BUTTONS.OPERATE_GUIDE)} alt="" />
+    包含课程介绍和操作指南，观看指引视频，轻松上手课程。（资源建设中...）
+  </div>
+)
+
+const StartFilmingGuide = () => (
+  <div class="flex items-center justify-start">
+    点击
+    <img class="w-20" src={getStaticImage(IMAGE_PATHS.BUTTONS.START_FILMING)} alt="" />
+    正式进入课程，开启你的短视频拍摄之旅。
+  </div>
+)
+
+export default defineComponent({
+  name: 'HomeView',
+  setup() {
+    const guideSteps = ref([
+      {
+        id: 'step-1',
+        title: '',
+        content: '欢迎来到《短视频达人养成记》网络课程的学习！',
+        highlightSelector: null,
+        audioSrc: getPublicPath('audio/py_0_001.MP3'),
+        positionOffsetY: '80%'
+      },
+      {
+        id: 'step-2',
+        title: '',
+        content: CourseFrameGuide,
+        highlightSelector: '.kecheng-wrapper',
+        audioSrc: getPublicPath('audio/py_0_002.MP3'),
+        positionOffsetY: '40%'
+      },
+      {
+        id: 'step-3',
+        title: '',
+        content: OperateGuide,
+        highlightSelector: '.zhiying-wrapper',
+        audioSrc: getPublicPath('audio/py_0_003.MP3'),
+        positionOffsetY: '40%'
+      },
+      {
+        id: 'step-4',
+        title: '',
+        content: StartFilmingGuide,
+        highlightSelector: '.start-filming-wrapper',
+        audioSrc: getPublicPath('audio/py_0_004.MP3'),
+        positionOffsetY: '40%'
+      }
+    ])
+    const showGuide = ref(true)
+    const { scale, offsetX, offsetY } = useScale()
+
+    const handleComplete = () => {
+      console.log('handleComplete')
+    }
+
+    const openMindMap = () => {
+      ImagePreview({
+        images: [getStaticImage('maps/dt')],
+        maskClosable: true,
+        getScaleMetrics: () => ({ scale: scale.value, offsetX: offsetX.value, offsetY: offsetY.value })
+      })
+    }
+
+    return () => (
+      <div class="w-full h-full relative">
+        <div
+          class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{ backgroundImage: getBackgroundImage(IMAGE_PATHS.HOME_BG) }}
+        />
+
+        <div class="absolute right-[420px] bottom-[200px] start-filming-wrapper">
+          <ImgButton image="home/action-btn" path={{ name: 'Action' }} />
+        </div>
+
+        <div class="absolute right-20 bottom-36 kecheng-wrapper">
+          <ImgButton image={IMAGE_PATHS.BUTTONS.COURSE_FRAME} onClick={openMindMap} />
+        </div>
+
+        <div class="absolute right-20 bottom-10 zhiying-wrapper">
+          <ImgButton image={IMAGE_PATHS.BUTTONS.OPERATE_GUIDE} />
+        </div>
+
+        <GuideSteps
+          visible={showGuide.value}
+          steps={guideSteps.value}
+          highlightPadding={12}
+          highlightRadius={16}
+          keyboardNavigation={true}
+          highlightMode="border"
+          onComplete={handleComplete}
+        />
+      </div>
+    )
+  }
+})