feat: 对接各个视频数据

src/views/interview/components/menu.vue

@@ -0,0 +1,171 @@
+<script lang="tsx" setup>
+import { getStaticImage } from '@/utils'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getBackgroundImage } from '@/utils'
+defineOptions({ name: 'VlogMenu' })
+
+/**
+ * 菜单项 （前期准备、中期拍摄、后期剪辑）
+ * 前期准备-资源筹备、创意构想、脚本撰写、分镜制作
+ * 中期拍摄-设备准备、实地取景、现场拍摄
+ * 后期剪辑-素材管理、剪辑、调色、导出发布
+ */
+const category = ref([
+  {
+    label: '前期准备',
+    value: 1,
+    icon: getStaticImage('midterm/准备图标.png')
+  },
+  {
+    label: '中期拍摄',
+    value: 2,
+    icon: getStaticImage('midterm/拍摄图标.png')
+  },
+  {
+    label: '后期剪辑',
+    value: 3,
+    icon: getStaticImage('midterm/剪辑图标.png')
+  }
+])
+const menuItems = ref([
+  {
+    label: '资源筹备',
+    routeName: 'InterviewResource',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '创意构想',
+    routeName: 'InterviewCreative',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '脚本撰写',
+    routeName: 'InterviewScriptWriting',
+    parentValue: 1,
+    disabled: false
+  },
+  {
+    label: '分镜制作',
+    routeName: 'InterviewStoryboard',
+    parentValue: 1,
+    disabled: true
+  },
+  {
+    label: '设备准备',
+    routeName: 'InterviewMidtermEquipment',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '实地取景',
+    routeName: 'InterviewMidtermShooting',
+    parentValue: 2,
+    disabled: false
+  },
+  {
+    label: '现场拍摄',
+    routeName: 'Interview现场拍摄',
+    parentValue: 2,
+    disabled: true
+  },
+  {
+    label: '素材管理',
+    routeName: 'Interview素材管理',
+    parentValue: 3,
+    disabled: true
+  },
+  {
+    label: '剪辑',
+    routeName: 'InterviewEditing',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '调色',
+    routeName: 'InterviewColor',
+    parentValue: 3,
+    disabled: false
+  },
+  {
+    label: '导出发布',
+    routeName: 'Interview导出发布',
+    parentValue: 3,
+    disabled: true
+  }
+])
+
+const props = defineProps<{
+  currentStep: number
+}>()
+
+const router = useRouter()
+
+const currentParentValue = computed<number>(() => {
+  return props.currentStep
+}) // 当前选中的父级菜单项
+
+const currentItemValue = ref<string>('') // 当前选中的子级菜单项
+
+const getMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.parentValue === currentParentValue.value)
+})
+
+const handleItemClick = (item: { routeName: string; disabled: boolean }) => {
+  if (item.disabled) return
+  currentItemValue.value = item.routeName
+  router.push({ name: item.routeName })
+}
+</script>
+
+<template>
+  <div class="absolute left-20 top-0 bottom-0 w-[520px] pt-28" v-if="currentStep">
+    <!-- 分类名称 -->
+    <div class="absolute top-3 left-24 flex items-center space-x-2">
+      <span class="text-4xl text-[#fbbf24] font-black">{{
+        category[currentParentValue - 1].label
+      }}</span>
+      <img class="filter-blue" :src="category[currentParentValue - 1].icon" alt="" />
+    </div>
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-left bg-no-repeat -z-10"
+      :style="{ backgroundImage: getBackgroundImage('components/menu-bg.png') }"
+    ></div>
+    <div class="flex items-center flex-col pl-[60px]">
+      <template v-for="(item, index) in getMenuItems" :key="item.routeName">
+        <div
+          class="relative w-[373px] h-[143px] pl-14 flex items-center justify-center group text-4xl font-black transition-colors"
+          :class="[
+            currentItemValue === item.routeName ? 'text-blue-400' : 'text-white',
+            item.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer'
+          ]"
+          :style="{ marginLeft: -index * 40 + 'px' }"
+          @click="handleItemClick(item)"
+        >
+          <div
+            v-if="!item.disabled"
+            class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+            :style="{ backgroundImage: getBackgroundImage('components/menu-hover.png') }"
+          ></div>
+          <span :class="[!item.disabled ? 'menu-glow-text' : '']">{{ item.label }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filter-blue {
+  filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(1190%) hue-rotate(330deg)
+    brightness(102%) contrast(98%);
+}
+
+.menu-glow-text {
+  text-shadow:
+    0 0 40px rgba(0, 180, 255, 0.9),
+    0 0 20px rgba(0, 180, 255, 0.7);
+}
+</style>