feat: 增加了脚本编写和后期剪辑

src/views/prepare/index.vue

@@ -48,6 +48,18 @@ const handleStepChangeGui = (_step: SimpleStep | null, index: number) => {
   stepIndex.value = index
 }
 const highlightShow = ref(true)
+// const StoryboardButton = ref()
+const SelectArrowtext = ref('脚本撰写')
+const ScriptingClick = (routeName: string) => {
+  SelectArrowtext.value = '脚本撰写'
+  router.push({ name: routeName })
+}
+const StoryboardClick = (routeName: string) => {
+  SelectArrowtext.value = '分镜制作'
+  router.push({ name: routeName })
+  // IMAGE_PATHS.VLOG.Storyboard
+  // IMAGE_PATHS.VLOG.SelectedStoryboard
+}
 </script>
 
 <template>
@@ -82,12 +94,37 @@ const highlightShow = ref(true)
     </div>
     <!-- 脚本撰写按钮 -->
     <div v-if="highlightShow" class="absolute left-[13%] top-1/3">
-      <ImgButton :image="IMAGE_PATHS.VLOG.Scripting" />
+      <ImgButton
+        :image="
+          SelectArrowtext == '脚本撰写'
+            ? IMAGE_PATHS.VLOG.SelectedScripting
+            : IMAGE_PATHS.VLOG.Scripting
+        "
+        @click="ScriptingClick('script-writing')"
+      />
     </div>
+
     <!-- 选中箭头 -->
-    <div v-if="highlightShow" class="absolute left-[13%] top-[37%] -translate-x-1/2">
+    <div
+      v-if="highlightShow"
+      class="absolute left-[13%] top-[37%] -translate-x-1/2"
+      :class="SelectArrowtext == '脚本撰写' ? 'SelectArrow-Scripting' : 'SelectArrow-Storyboard'"
+    >
       <ImgButton :image="IMAGE_PATHS.VLOG.SelectArrow" />
     </div>
+
+    <!-- 分镜制作 -->
+    <div v-if="highlightShow" class="absolute left-[20%] top-[47%] -translate-x-1/2">
+      <ImgButton
+        :image="
+          SelectArrowtext == '分镜制作'
+            ? IMAGE_PATHS.VLOG.SelectedStoryboard
+            : IMAGE_PATHS.VLOG.Storyboard
+        "
+        @click="StoryboardClick"
+      />
+    </div>
+
     <!-- 进度百分比 -->
     <div v-if="highlightShow" class="absolute left-1/2 top-[12%] -translate-x-1/2">
       <div class="flex">
@@ -137,4 +174,16 @@ const highlightShow = ref(true)
 .dragon-character {
   top: 80% !important;
 }
+
+.SelectArrow-Scripting {
+  position: absolute;
+  left: 13%;
+  top: 37%;
+}
+
+.SelectArrow-Storyboard {
+  position: absolute;
+  left: 11%;
+  top: 51%;
+}
 </style>