From d070739d83a8bad71180a9e052209ea58b0bc73c Mon Sep 17 00:00:00 2001
From: gaofeihang <2635294817@qq.com>
Date: Wed, 17 Sep 2025 02:28:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=84=9A=E6=9C=AC=E7=BC=96=E5=86=99?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vlog/进度数字/{％.png => percentage.png}  | Bin
 src/router/index.ts                           |   8 ++
 src/utils/index.ts                            |  15 +++
 src/views/prepare/index.vue                   | 126 ++++++++++++++++++
 4 files changed, 149 insertions(+)
 rename src/assets/images/vlog/进度数字/{％.png => percentage.png} (100%)
 create mode 100644 src/views/prepare/index.vue

diff --git a/src/assets/images/vlog/进度数字/％.png b/src/assets/images/vlog/进度数字/percentage.png
similarity index 100%
rename from src/assets/images/vlog/进度数字/％.png
rename to src/assets/images/vlog/进度数字/percentage.png
diff --git a/src/router/index.ts b/src/router/index.ts
index 3871014..1280c8f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -43,6 +43,14 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '发现与记录'
     }
+  },
+  {
+    path: '/prepare',
+    name: 'Prepare',
+    component: () => import('@/views/prepare/index.vue'),
+    meta: {
+      title: '脚本准备'
+    }
   }
 ]
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0994741..460292f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -68,6 +68,21 @@ export const IMAGE_PATHS = {
     BG: 'vlog/bg',
     BG_CENTER: 'vlog/bg-center',
     TITLE: 'vlog/title',
+    PREPARE: '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',
diff --git a/src/views/prepare/index.vue b/src/views/prepare/index.vue
new file mode 100644
index 0000000..4de2f26
--- /dev/null
+++ b/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>