feat: 合并解决冲突

package.json

@@ -12,6 +12,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "less": "^4.4.1",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },

src/components/ProgressBar/ProgressBar.vue

@@ -23,8 +23,11 @@
           class="step-item"
           :class="getStepStatus(index)"
         >
-          <span class="step-text">{{ step.name }}</span>
+          <span class="step-text">
-          <div class="step-dots">•••••</div>
+            <img :src="step.name" alt="" />
+            <img :src="step.icon" alt="" />
+            <img class="step-ellipsis" src="@/assets/images/midterm/进度装饰（未完成.png" alt="" />
+          </span>
         </div>
       </div>
       <div class="absolute top-0 left-40" v-else>
@@ -89,10 +92,18 @@ const handleComplete = () => {
 
 // 步骤配置
 const steps = [
-  { name: '前期准备', icon: '📋' },
+  {
-  { name: '中期拍摄', icon: '📹' },
+    name: '/src/assets/images/midterm/前期准备.png',
-  { name: '后期剪辑', icon: '🎬' },
+    icon: '/src/assets/images/midterm/准备图标.png'
-  { name: '即可开启实战', icon: '⚡' }
+  },
+  {
+    name: '/src/assets/images/midterm/中期拍摄.png',
+    icon: '/src/assets/images/midterm/拍摄图标.png'
+  },
+  {
+    name: '/src/assets/images/midterm/后期剪辑.png',
+    icon: '/src/assets/images/midterm/剪辑图标.png'
+  }
 ]
 
 // 获取步骤状态
@@ -142,6 +153,7 @@ const getStepStatus = (stepIndex: number) => {
 }
 
 .step-item {
+  padding-left: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -150,12 +162,19 @@ const getStepStatus = (stepIndex: number) => {
 }
 
 .step-text {
-  font-size: 26px;
+  /* font-size: 40px; */
   color: white;
   font-weight: bold;
   text-align: center;
   white-space: nowrap;
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.step-ellipsis {
+  padding-left: 17px;
 }
 
 .step-dots {

src/router/index.ts

@@ -51,6 +51,31 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '视频'
     }
+  },
+  //中期拍摄
+  {
+    path: '/midterm',
+    name: 'midterm',
+    component: () => import('@/views/midterm-shooting/midterm/index.vue'),
+    meta: {
+      title: '中期拍摄'
+    }
+  },
+  {
+    path: '/equipment',
+    name: 'equipment',
+    component: () => import('@/views/midterm-shooting/equipment/index.vue'),
+    meta: {
+      title: '设备准备'
+    }
+  },
+  {
+    path: '/prepare',
+    name: 'Prepare',
+    component: () => import('@/views/prepare/index.vue'),
+    meta: {
+      title: '脚本准备'
+    }
   }
 ]
 

src/utils/index.ts

@@ -68,6 +68,25 @@ export const IMAGE_PATHS = {
     BG: 'vlog/bg',
     BG_CENTER: 'vlog/bg-center',
     TITLE: 'vlog/title',
+    PREPARE: 'vlog/制作变焦镜/入口节点/前期准备底板',
+    Midterm: 'vlog/制作变焦镜/入口节点/中期拍摄底板',
+    MidtermEquipment: 'vlog/制作变焦镜/入口节点/按钮-设备准备',
+    MidtermFraming: 'vlog/制作变焦镜/入口节点/按钮-实地取景',
+    MidtermShoot: 'vlog/制作变焦镜/入口节点/按钮-现场拍摄',
+    Scripting: 'vlog/制作变焦镜/入口节点/按钮选中-脚本撰写',
+    SelectArrow: 'vlog/制作变焦镜/入口节点/选中箭头',
+    Progress: 'vlog/进度数字/进度',
+    Zero: 'vlog/进度数字/0',
+    One: 'vlog/进度数字/1',
+    Two: 'vlog/进度数字/2',
+    Three: 'vlog/进度数字/3',
+    Four: 'vlog/进度数字/4',
+    Five: 'vlog/进度数字/5',
+    Six: 'vlog/进度数字/6',
+    Seven: 'vlog/进度数字/7',
+    Eight: 'vlog/进度数字/8',
+    Nine: 'vlog/进度数字/9',
+    Percentage: 'vlog/进度数字/percentage',
     TASK_CAMERA: 'vlog/task-camera',
     TASK_BTN_OK: 'vlog/task-btn-ok',
     TASK_BTN: 'vlog/task-btn',
@@ -161,5 +180,12 @@ export const IMAGE_PATHS = {
     COMPLETE_BUTTON: 'components/进入-实战操作',
     COMPLETE_BUTTON_DISABLED: 'components/完成前置-即可开启实战',
     BACKGROUND: 'components/制作变焦镜-底板'
+  },
+
+  // 设备准备
+  EQUIPMENT: {
+    BG: 'equipment/设备准备-背景',
+    SELECT_THE_BUTTON: 'equipment/按钮选中-设备准备',
+    NAVIGATION_SIDEBAR: 'equipment/侧边导航栏'
   }
 } as const

src/views/midterm-shooting/equipment/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="equipment-index">
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
+    >
+      <div class="equipment-bar">
+        <img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
+        <div class="equipment-item" :hidden="hiddenbar">
+          <span>
+            <img src="@/assets/images/equipment/选中按钮.png" alt="" />
+            <img src="@/assets/images/equipment/手机-亮.png" alt="" />
+          </span>
+        </div>
+        <!-- 设备准备按钮 -->
+        <div class="equipment-bt">
+          <img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
+        </div>
+        <div
+          :class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'"
+          @click="hiddenbarclick()"
+        >
+          <img src="@/assets/images/equipment/按钮-展开.png" alt="" />
+        </div>
+      </div>
+      <GuideSteps
+        @complete="handleComplete"
+        @skip="handleSkip"
+        :keyboard-navigation="true"
+        position-offset-y="85%"
+      >
+        <GuideStepsItem>
+          <img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { GuideSteps, GuideStepsItem } from '@/components/Guide'
+
+import { ref } from 'vue'
+const hiddenbar = ref()
+const hiddenbarclick = () => {
+  hiddenbar.value = !hiddenbar.value
+}
+
+const handleComplete = () => {
+  console.log('引导完成')
+}
+
+const handleSkip = () => {
+  console.log('跳过引导')
+}
+</script>
+<style lang="less" scoped>
+.equipment-index {
+  // display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.equipment-bg {
+  display: flex;
+}
+
+.equipment-bar {
+  position: relative;
+
+  .equipment-bt {
+    position: absolute;
+    top: 0;
+    left: -135px;
+    width: 577px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .equipment-unfold1 {
+    position: absolute;
+    top: 45%;
+    right: -110px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      /* 确保图片按比例缩放 */
+    }
+  }
+
+  .equipment-unfold2 {
+    position: absolute;
+    top: 45%;
+    right: -69px;
+    width: 150px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      /* 确保图片按比例缩放 */
+    }
+  }
+
+  .equipment-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-top: 220px;
+
+    span {
+      display: flex;
+    }
+  }
+}
+</style>

src/views/midterm-shooting/midterm/index.vue

@@ -0,0 +1,124 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { ref } from 'vue'
+import { ProgressBar } from '@/components'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const currentStep = ref(1)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+  // 处理完成逻辑
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'Work' })
+}
+const highlightShow = ref(true)
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
+    </div>
+    <!-- 中期拍摄底板 -->
+    <div v-if="highlightShow" class="absolute right-90 ml-[135px]" style="z-index: 998">
+      <ImgButton :image="IMAGE_PATHS.VLOG.Midterm" />
+    </div>
+    <!-- 进度百分比 -->
+    <div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
+      <div class="flex">
+        <ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Four" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
+      </div>
+    </div>
+    <!-- 中期准备按钮文字 -->
+    <div
+      v-if="highlightShow"
+      class="absolute left-[21%] top-[9%] -translate-x-1/2"
+      style="z-index: 998"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermEquipment" class="ml-[60px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermFraming" class="ml-[40px]" />
+      <ImgButton :image="IMAGE_PATHS.VLOG.MidtermShoot" class="ml-[20px]" />
+    </div>
+    <!-- 遮罩层 -->
+    <div class="Shadow" v-if="highlightShow">
+      <div>
+        <img src="" alt="" />
+      </div>
+      <img src="@/assets/images/midterm/引导遮罩.png" alt="" />
+    </div>
+    <!-- 叉 -->
+    <div
+      v-if="highlightShow"
+      class="absolute right-0 top-0"
+      style="z-index: 998; cursor: pointer"
+      @click="highlightShow = false"
+    >
+      <img src="@/assets/images/midterm/叉.png" alt="" />
+    </div>
+    <!-- 引导任务 -->
+    <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
+
+    <div v-if="highlightShow" class="absolute bottom-0 w-full bright">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+  </div>
+</template>
+<style lang="less" scopeds>
+.Shadow {
+  width: 100%;
+  height: 100%;
+
+  img {
+    width: 100%;
+    height: 100%;
+    z-index: 997 !important;
+    position: absolute;
+  }
+}
+
+.bright {
+  z-index: 999 !important;
+}
+</style>

src/views/prepare/index.vue

@@ -0,0 +1,126 @@
+<script lang="tsx" setup>
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
+import { ImgButton } from '@/components/Button'
+
+import { ref, computed } from 'vue'
+import { ProgressBar } from '@/components'
+import { useRouter } from 'vue-router'
+
+import { GuideSteps } from '@/components/Guide'
+type WorkTab = 'vlog' | 'case' | 'profession' | 'idea'
+const steps = [
+  {
+    id: 'step1',
+    content:
+      '引导词：前期准备要做好四件事，【资源筹备】【创意构想】【脚本撰写】【分镜制作】，画面中高亮的按钮是我们可以展开学习的内容。点击进入学习吧！'
+  },
+  { id: 'step2', content: '这是主要内容区域的边框' }
+]
+// const selected = ref<WorkTab>('vlog')
+const stepIndex = ref(0)
+const currentHighlight = computed(() =>
+  stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
+)
+
+const router = useRouter()
+
+const currentStep = ref(0)
+
+const handleComplete = () => {
+  console.log('完成前置条件')
+  // 处理完成逻辑
+}
+
+const handleStepChange = (step: number) => {
+  console.log('步骤变化:', step)
+  // 处理步骤变化逻辑
+}
+
+const handleWorkClick = () => {
+  console.log('任务取景按钮点击')
+  // 处理任务取景按钮点击逻辑
+  router.push({ name: 'Work' })
+}
+interface SimpleStep {
+  id: string
+  content: string
+}
+const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
+  stepIndex.value = index
+}
+</script>
+
+<template>
+  <div class="w-full h-full relative">
+    <!-- 背景图片-center -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG_CENTER) }"
+    ></div>
+
+    <!-- 背景图片 -->
+    <div
+      class="absolute inset-0 bg-cover bg-center bg-no-repeat"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.BG) }"
+    ></div>
+
+    <!-- 标题 -->
+    <div class="absolute top-2 left-1/2 -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.TITLE" />
+    </div>
+
+    <!-- 任务取景按钮 -->
+    <div
+      class="absolute left-24 top-24"
+      :style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.VLOG.TASK_CAMERA) }"
+    >
+      <ImgButton :image="IMAGE_PATHS.VLOG.TASK_BTN" @click="handleWorkClick" />
+    </div>
+    <!-- 前期准备底板 -->
+    <div class="absolute right-90 ml-[135px]">
+      <ImgButton :image="IMAGE_PATHS.VLOG.PREPARE" />
+    </div>
+    <!-- 脚本撰写按钮 -->
+    <div class="absolute left-[13%] top-1/3">
+      <ImgButton :image="IMAGE_PATHS.VLOG.Scripting" />
+    </div>
+    <!-- 选中箭头 -->
+    <div class="absolute left-[13%] top-[37%] -translate-x-1/2">
+      <ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
+    </div>
+    <!-- 进度百分比 -->
+    <div class="absolute left-1/2 top-[12%] -translate-x-1/2">
+      <div class="flex">
+        <ImgButton :image="IMAGE_PATHS.VLOG.Progress" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Four" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Zero" />
+        <ImgButton :image="IMAGE_PATHS.VLOG.Percentage" />
+      </div>
+    </div>
+    <!-- 引导任务 -->
+    <!-- <ImgButton class="absolute right-24 bottom-24" :image="IMAGE_PATHS.VLOG.TASK_PERSON" /> -->
+
+    <div class="absolute bottom-0 w-full">
+      <ProgressBar
+        :current-step="currentStep"
+        @complete="handleComplete"
+        @step-change="handleStepChange"
+      />
+    </div>
+    <GuideSteps
+      :steps="steps"
+      :highlight-selector="currentHighlight"
+      :highlight-padding="12"
+      :highlight-radius="20"
+      @step-change="handleStepChangeGui"
+    />
+  </div>
+</template>
+<style>
+.guide-ui {
+  top: 80% !important;
+}
+.dragon-character {
+  top: 80% !important;
+}
+</style>