chore: bypass pre-commit for now

src/views/afterditing/color.vue

@@ -20,15 +20,15 @@ const colorBarList = ref([
   },
   {
     id: 2,
-    name: '滤镜-冬日物语',
-    image: getStaticImage('afterditing/color/冬日物语.jpg'),
-    Screenshot: getStaticImage('afterditing/color/卡片-冬日物语.png')
+    name: '滤镜-日落增色',
+    image: getStaticImage('afterditing/color/日落增色.png'),
+    Screenshot: getStaticImage('afterditing/color/卡片-日落增色.png')
   },
   {
     id: 3,
-    name: '滤镜-日落电影',
-    image: getStaticImage('afterditing/color/落日余晖.jpg'),
-    Screenshot: getStaticImage('afterditing/color/卡片-落日余晖.png')
+    name: '滤镜-落日火烧云',
+    image: getStaticImage('afterditing/color/落日火烧云.png'),
+    Screenshot: getStaticImage('afterditing/color/卡片-落日火烧云.png')
   }
 ])
 

src/views/home/index.vue

@@ -12,15 +12,15 @@ import { ImgButton } from '@/components/Button'
     ></div>
     <!-- 按钮 -->
     <!-- 开始拍摄 -->
-    <div class="absolute right-[580px] bottom-[290px]">
+    <div class="absolute right-[320px] bottom-[100px]">
       <ImgButton :image="IMAGE_PATHS.BUTTONS.START_FILMING" :path="{ name: 'Action' }" />
     </div>
     <!-- 课程框架 -->
-    <div class="absolute right-0 bottom-40">
+    <div class="absolute right-20 bottom-36">
       <ImgButton :image="IMAGE_PATHS.BUTTONS.COURSE_FRAME" />
     </div>
     <!-- 操作指引 -->
-    <div class="absolute right-0 bottom-0">
+    <div class="absolute right-20 bottom-10">
       <ImgButton :image="IMAGE_PATHS.BUTTONS.OPERATE_GUIDE" />
     </div>
   </div>

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

@@ -237,7 +237,7 @@ const currentHighlight = computed(() =>
   stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
 )
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .equipment-index {
   position: relative;
   width: 100%;
@@ -501,6 +501,7 @@ const currentHighlight = computed(() =>
     /* Firefox隐藏滚动条 */
     -ms-overflow-style: none;
     /* IE和Edge隐藏滚动条 */
+    perspective: 1000px;
 
     &::-webkit-scrollbar {
       display: none;
@@ -522,6 +523,7 @@ const currentHighlight = computed(() =>
     top: -9px;
     left: 8px;
     z-index: 2;
+    transform: rotate3d(0, 1, 0, -20deg);
 
     img {
       width: 100%;

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

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { GuideSteps, GuideStepsItem } from '@/components/Guide'
 import { Overlay } from '@/components/Overlay'
 import { ImgButton } from '@/components/Button'
-import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
+import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import shootingtitle from '@/assets/images/shooting/标题-实地取景.png'
 import videoSrc from '/video/新手导航_九种构图法.mp4'
+import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
 
 type Btn = {
   key: string
   name: string
-  image: string
+  btnImage: string
+  images: string[]
   desc: string
 }
 
@@ -24,30 +26,32 @@ const showModal3 = ref(false)
 const currentItem = ref<Btn>({
   key: '',
   name: '',
-  image: '',
+  btnImage: '',
+  images: [],
   desc: ''
 })
 
-const showBoxLine = ref(false)
-
 const btnList = ref<Btn[]>([
   {
     key: '1',
     name: '居中构图',
-    image: 'shooting/居中构图底板',
-    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用'
+    btnImage: 'shooting/居中构图底板',
+    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['shooting/居中构图1', 'shooting/居中构图2']
   },
   {
     key: '2',
     name: '三分法构图',
-    image: 'shooting/三分法构图底板',
-    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调'
+    btnImage: 'shooting/三分法构图底板',
+    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['shooting/图片待定1', 'shooting/图片待定2']
   },
   {
     key: '3',
     name: '对角线构图',
-    image: 'shooting/对角线构图底板',
-    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。'
+    btnImage: 'shooting/对角线构图底板',
+    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
   }
 ])
 
@@ -59,6 +63,11 @@ const handleClick = (item: any) => {
   currentItem.value = item
   showModal2.value = true
 }
+const currentCompositionKey = computed(() => {
+  const k = currentItem.value.key
+  if (k === '1' || k === '2' || k === '3') return k
+  return '1'
+})
 
 const handleClickA = () => {
   // 跳转设备准备
@@ -129,6 +138,9 @@ const back = () => {
         @click="handleModalClose"
       />
 
+      <!-- 构图指南 -->
+      <ImgButton class="absolute left-0 top-0 z-10" image="shooting/标题-构图指南" />
+
       <!-- 新手导航视频 -->
       <ImgButton
         class="absolute left-28 top-[calc(50%-40px)] -translate-y-1/2"
@@ -140,110 +152,21 @@ const back = () => {
         <ImgButton
           v-for="item in btnList"
           :key="item.key"
-          :image="item.image"
+          :image="item.btnImage"
           @click="handleClick(item)"
         />
       </div>
 
       <!-- 知识卡片 -->
-      <Overlay :visible="showModal2" :clickable="false">
-        <div
-          class="relative w-[1752px] h-[932px]"
-          :style="{
-            backgroundImage: getBackgroundImage('shooting/知识卡片底板')
-          }"
-        >
-          <div
-            class="absolute top-4 left-1/2 -translate-x-1/2 text-[45px] text-white font-bold tracking-[2px] drop-shadow-[2px_2px_4px_rgba(0,0,139,0.8)]"
-          >
-            {{ currentItem.name }}
-          </div>
-
-          <div
-            class="absolute w-full h-[38px] top-32 left-1/2 -translate-x-1/2 bg-no-repeat bg-center"
-            :style="{
-              backgroundImage: getBackgroundImage('shooting/文案1')
-            }"
-          ></div>
-
-          <div
-            class="absolute w-[191px] h-[131px] top-[30px] left-[120px] bg-no-repeat bg-center"
-            :style="{
-              backgroundImage: getBackgroundImage('shooting/示意图-三分法')
-            }"
-          ></div>
-
-          <div class="absolute top-[calc(50%-30px)] left-1/2 -translate-x-1/2 -translate-y-1/2">
-            <ImgButton
-              class="absolute right-6 top-6 z-10"
-              :image="showBoxLine ? 'shooting/辅助线开' : 'shooting/辅助线关'"
-              @click="showBoxLine = !showBoxLine"
-            />
-            <div class="relative">
-              <img :src="getStaticImage('shooting/图片待定1')" alt="" />
-
-              <!-- 构图辅助线 -->
-              <div v-if="showBoxLine" class="absolute inset-0 pointer-events-none p-[18px]">
-                <div class="relative w-full h-full overflow-hidden">
-                  <!-- 居中构图 - 十字线 -->
-                  <div v-if="currentItem.key === '1'" class="absolute inset-0">
-                    <!-- 垂直中心线 -->
-                    <div
-                      class="absolute top-0 left-1/2 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
-                    ></div>
-                    <!-- 水平中心线 -->
-                    <div
-                      class="absolute left-0 top-1/2 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
-                    ></div>
-                  </div>
-
-                  <!-- 三分法构图 - 九宫格线 -->
-                  <div v-else-if="currentItem.key === '2'" class="absolute inset-0">
-                    <!-- 垂直三分线 -->
-                    <div
-                      class="absolute top-0 left-1/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
-                    ></div>
-                    <div
-                      class="absolute top-0 left-2/3 w-0.5 h-full bg-white opacity-80 -translate-x-1/2"
-                    ></div>
-                    <!-- 水平三分线 -->
-                    <div
-                      class="absolute left-0 top-1/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
-                    ></div>
-                    <div
-                      class="absolute left-0 top-2/3 w-full h-0.5 bg-white opacity-80 -translate-y-1/2"
-                    ></div>
-                  </div>
-
-                  <!-- 对角线构图 - 对角线 -->
-                  <div v-else-if="currentItem.key === '3'" class="absolute inset-0">
-                    <!-- 对角线：从左上到右下 -->
-                    <div class="absolute top-0 left-0 w-full h-full">
-                      <div
-                        class="absolute top-0 left-0 h-0.5 bg-white opacity-80"
-                        style="width: 141.42%; transform: rotate(33deg); transform-origin: left top"
-                      ></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="absolute w-full px-20 bottom-32 left-1/2 -translate-x-1/2 text-[#395E66] text-3xl font-bold indent-14 leading-[50px]"
-          >
-            {{ currentItem.desc }}
-          </div>
-
-          <!-- 返回 -->
-          <ImgButton
-            class="absolute right-2 top-4 translate-x-1/2 -translate-y-1/2 z-10"
-            :image="IMAGE_PATHS.COMPONENTS.CLOSE"
-            @click="showModal2 = false"
-          />
-        </div>
-      </Overlay>
+      <KnowledgeCard
+        v-if="showModal2 && currentItem.key"
+        :visible="showModal2"
+        :title="currentItem.name"
+        :desc="currentItem.desc"
+        :images="currentItem.images"
+        :compositionKey="currentCompositionKey"
+        @close="showModal2 = false"
+      />
       <!-- 视频 -->
       <Overlay :visible="showModal3" :clickable="false">
         <video :src="videoSrc" controls></video>

src/views/skill/components/CategoryTags.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+
+type CategoryName = '拍摄基础' | '内容策划' | '拍摄执行' | '后期制作' | '版权伦理意识'
+
+const props = defineProps<{
+  status: boolean
+  sideStatus: boolean
+  selectedCategory: string
+}>()
+
+const emit = defineEmits<{ (e: 'select', name: CategoryName): void }>()
+</script>
+
+<template>
+  <div
+    v-show="props.sideStatus || props.selectedCategory === '拍摄基础'"
+    class="module module-left-bottom module-vertical"
+    @click="emit('select', '拍摄基础')"
+  >
+    <div
+      :class="[
+        'module-text blue-text',
+        props.status ? 'text-white' : 'text-[#969696e6_!important]'
+      ]"
+    >
+      拍摄基础
+    </div>
+    <div :class="['module-percent', props.status ? 'red-text' : 'blue-text']">0%</div>
+  </div>
+
+  <div
+    v-show="props.sideStatus || props.selectedCategory === '内容策划'"
+    class="module module-left-middle module-vertical"
+    @click="emit('select', '内容策划')"
+  >
+    <div
+      :class="[
+        'module-text  blue-text',
+        props.status ? 'text-white' : 'text-[#969696e6_!important]'
+      ]"
+    >
+      内容策划
+    </div>
+    <div :class="['module-percent', props.status ? 'red-text' : 'blue-text']">0%</div>
+  </div>
+
+  <div
+    v-show="props.sideStatus || props.selectedCategory === '拍摄执行'"
+    class="module module-right-middle module-vertical"
+    @click="emit('select', '拍摄执行')"
+  >
+    <div
+      :class="[
+        'module-text  blue-text',
+        props.status ? 'text-white' : 'text-[#969696e6_!important]'
+      ]"
+    >
+      拍摄执行
+    </div>
+    <div :class="['module-percent', props.status ? 'red-text' : 'blue-text']">0%</div>
+  </div>
+
+  <div
+    v-show="props.sideStatus || props.selectedCategory === '后期制作'"
+    class="module module-right-upper module-vertical"
+    @click="emit('select', '后期制作')"
+  >
+    <div
+      :class="[
+        'module-text  blue-text',
+        props.status ? 'text-white' : 'text-[#969696e6_!important]'
+      ]"
+    >
+      后期制作
+    </div>
+    <div :class="['module-percent', props.status ? 'red-text' : 'blue-text']">0%</div>
+  </div>
+
+  <div
+    v-show="props.sideStatus || props.selectedCategory === '版权伦理意识'"
+    class="module module-right-far module-vertical"
+    @click="emit('select', '版权伦理意识')"
+  >
+    <div
+      :class="[
+        'module-text  blue-text',
+        props.status ? 'text-white' : 'text-[#969696e6_!important]'
+      ]"
+    >
+      版权伦理意识
+    </div>
+    <div :class="['module-percent', props.status ? 'red-text' : 'blue-text']">0%</div>
+  </div>
+</template>
+
+<style scoped>
+.module {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s ease;
+}
+.module:hover {
+  transform: scale(1.05);
+  filter: brightness(1.2);
+}
+.module-vertical {
+  cursor: pointer;
+  align-items: flex-end;
+}
+.module-vertical .module-text {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+.module-vertical .module-percent {
+  transform: translateY(6px);
+}
+.module-text {
+  font-size: 36px;
+  letter-spacing: 8px;
+}
+.module-percent {
+  color: #ffffff;
+  font-size: 28px;
+}
+.module-left-bottom {
+  left: 10%;
+  bottom: 22%;
+}
+.module-left-middle {
+  left: 25%;
+  top: 48%;
+}
+.module-right-middle {
+  right: 26%;
+  top: 52%;
+}
+.module-right-upper {
+  right: 18%;
+  top: 42%;
+}
+.module-right-far {
+  right: 8%;
+  top: 50%;
+}
+.blue-text {
+  background: linear-gradient(180deg, #cfffff 0%, #9ff3ff 40%, #6ee7ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow:
+    0 0 2px rgba(255, 255, 255, 0.9),
+    0 0 6px rgba(79, 241, 255, 0.9),
+    0 0 14px rgba(79, 241, 255, 0.8),
+    0 0 28px rgba(0, 199, 255, 0.6),
+    0 0 46px rgba(0, 199, 255, 0.45);
+}
+.red-text {
+  background: linear-gradient(180deg, #ffffff 0%, #ffe9e9 55%, #ffd1d1 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow:
+    0 0 2px rgba(255, 255, 255, 0.9),
+    0 0 8px rgba(255, 135, 135, 0.85),
+    0 0 18px rgba(255, 135, 135, 0.65),
+    0 0 32px rgba(255, 110, 110, 0.55);
+}
+</style>

src/views/skill/components/IconLayer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, computed } from 'vue'
+import { ImgButton } from '@/components/Button'
+
+const props = defineProps<{
+  positions: { top: string; left: string }[]
+  displayedIcons: string[]
+  sideStatus: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'iconClick', icon: string): void }>()
+</script>
+
+<template>
+  <ImgButton
+    v-for="(icon, index) in props.displayedIcons"
+    :key="index"
+    v-show="!props.sideStatus"
+    @click="emit('iconClick', icon)"
+    class="absolute z-10"
+    :style="{ top: props.positions[index]?.top, left: props.positions[index]?.left }"
+    :image="icon"
+  />
+</template>

src/views/skill/components/ModuleSwitcher.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { defineEmits, defineProps } from 'vue'
+import { ImgButton } from '@/components/Button'
+
+const props = defineProps<{ moduleName: string }>()
+const emit = defineEmits<{ (e: 'prev'): void; (e: 'next'): void }>()
+</script>
+
+<template>
+  <ImgButton
+    @click="emit('prev')"
+    class="absolute left-0 top-1/2 -translate-y-1/2"
+    :image="'skill/左滑'"
+  />
+
+  <ImgButton
+    @click="emit('next')"
+    class="absolute right-0 top-1/2 -translate-y-1/2"
+    :image="'skill/右滑'"
+  />
+
+  <div class="absolute bottom-28 left-1/2 -translate-x-1/2 z-10">
+    <span class="blue-text tracking-[18px] text-5xl">{{ props.moduleName }}</span>
+  </div>
+</template>
+
+<style scoped>
+.blue-text {
+  background: linear-gradient(180deg, #cfffff 0%, #9ff3ff 40%, #6ee7ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow:
+    0 0 2px rgba(255, 255, 255, 0.9),
+    0 0 6px rgba(79, 241, 255, 0.9),
+    0 0 14px rgba(79, 241, 255, 0.8),
+    0 0 28px rgba(0, 199, 255, 0.6),
+    0 0 46px rgba(0, 199, 255, 0.45);
+}
+</style>

src/views/skill/index.vue

@@ -1,239 +1,155 @@
 <script lang="tsx" setup>
 defineOptions({ name: 'SkillPage' })
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { getBackgroundImage, IMAGE_PATHS } from '@/utils'
 import { ImgButton } from '@/components/Button'
+import ModuleSwitcher from './components/ModuleSwitcher.vue'
+import CategoryTags from './components/CategoryTags.vue'
+import IconLayer from './components/IconLayer.vue'
 import { GuideSteps } from '@/components/Guide'
-import { useRouter } from 'vue-router'
+import KnowledgeCard from '@/components/KnowledgeCard/KnowledgeCard.vue'
+import { useSkillState, type KnowledgeBtn } from './useSkillState'
 
 const router = useRouter()
-const stepIndex = ref(0)
-const selected = ref(false)
+
+// 仅从 hook 获取必要的业务状态与意图判断
+const {
+  currentModule,
+  nextModule,
+  prevModule,
+  selectedCategory,
+  handleCategoryClick,
+  currentCategoryConfig,
+  displayedIcons,
+  showSubIcons,
+  selectedPrimaryIcon,
+  getIconAction
+} = useSkillState()
+
+// 页面 UI 状态（留在组件内）
+const status = ref(false)
+setTimeout(() => {
+  status.value = true
+}, 1000)
 const sideStatus = ref(true)
 
-const status = ref(false)
-
-const selectedModule = ref(1)
-const selectedCategory = ref('') // 新增：选中的分类
-
-// 新增：分类配置类型定义
-interface CategoryConfig {
-  icons: string[]
-  positions: { top: string; left: string }[]
-}
-
-// 新增：模块配置类型定义
-interface ModuleConfig {
-  name: string
-  value: number
-  categories: Record<string, CategoryConfig>
-}
-
-const moduleList = ref<ModuleConfig[]>([
-  {
-    name: '技能书-新手启航',
-    value: 1,
-    categories: {
-      拍摄基础: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      内容策划: {
-        icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      拍摄执行: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      后期制作: {
-        icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      版权伦理意识: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      }
-    }
-  },
-  {
-    name: '技能书-vlog',
-    value: 2,
-    categories: {
-      拍摄基础: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      内容策划: {
-        icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      拍摄执行: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      后期制作: {
-        icons: ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      },
-      版权伦理意识: {
-        icons: ['skill/画面构图选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
-        positions: [
-          { top: '25%', left: '25%' },
-          { top: '15%', left: '34%' },
-          { top: '20%', left: '45%' },
-          { top: '28%', left: '58%' }
-        ]
-      }
-    }
-  }
-])
-
-const currentModule = computed(() => {
-  return moduleList.value.find(item => item.value === selectedModule.value) || moduleList.value[0]
-})
-
-const nextModule = () => {
-  if (selectedModule.value === moduleList.value.length) {
-    selectedModule.value = 1
-  } else {
-    selectedModule.value++
-  }
-  // 切换模块时重置分类选择
-  if (selectedCategory.value) {
-    selectedCategory.value = ''
-    sideStatus.value = true
-  }
-}
-
-const prevModule = () => {
-  if (selectedModule.value === 1) {
-    selectedModule.value = moduleList.value.length
-  } else {
-    selectedModule.value--
-  }
-  // 切换模块时重置分类选择
-  if (selectedCategory.value) {
-    selectedCategory.value = ''
-    sideStatus.value = true
-  }
-}
-
-//引导步骤
-const steps = [
-  {
-    id: 'step1',
-    content: '可以点击左右箭头切换到对应模块的知识树哦'
-  }
-]
-
-// 预留：模块按钮（如需启用再补充实现）
-
+// 引导
+const stepIndex = ref(0)
+type SimpleStep = { id: string; content: string }
+const steps: SimpleStep[] = [{ id: 'step1', content: '可以点击左右箭头切换到对应模块的知识树哦' }]
 const currentHighlight = computed(() =>
   stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
 )
-
-// const selectedImage = computed(() => {
-//   return selected.value ? 'skill/画面构图选中' : 'skill/画面构图未选中'
-// })
-
-interface SimpleStep {
-  id: string
-  content: string
-}
-
 const handleStepChange = (_step: SimpleStep | null, index: number) => {
   stepIndex.value = index
 }
 
+// 模块切换（本地完成联动重置）
+const onNextModule = () => {
+  nextModule()
+  if (selectedCategory.value) {
+    selectedCategory.value = ''
+    sideStatus.value = true
+  }
+  showSubIcons.value = false
+  selectedPrimaryIcon.value = null
+}
+const onPrevModule = () => {
+  prevModule()
+  if (selectedCategory.value) {
+    selectedCategory.value = ''
+    sideStatus.value = true
+  }
+  showSubIcons.value = false
+  selectedPrimaryIcon.value = null
+}
+
+// 分类选择（保持原交互）
+const onCategorySelect = (categoryName: string) => {
+  handleCategoryClick(categoryName)
+  sideStatus.value = false
+  showSubIcons.value = false
+  selectedPrimaryIcon.value = null
+}
+
+// 返回按钮相关
+const handleBackToMain = () => {
+  selectedCategory.value = ''
+  sideStatus.value = true
+  showSubIcons.value = false
+  selectedPrimaryIcon.value = null
+}
+const backButtonTooltip = computed(() => {
+  if (showSubIcons.value) return '返回上一步'
+  return selectedCategory.value ? '返回主视图' : '退出页面'
+})
 const handleClose = () => {
-  // 如果当前在分类选中状态，则退出选中回到主视图
+  if (showSubIcons.value) {
+    showSubIcons.value = false
+    selectedPrimaryIcon.value = null
+    return
+  }
   if (selectedCategory.value) {
     handleBackToMain()
   } else {
-    // 否则退出页面
     router.back()
   }
 }
 
-const handleClick = () => {
-  selected.value = true
-  router.push({
-    name: 'SkillVdieo'
-  })
+// 知识卡片（本地维护）
+const showKnowledgeCard = ref(false)
+const currentKnowledge = ref<KnowledgeBtn | null>(null)
+const knowledgeMap: Record<'三分法构图' | '居中构图' | '对角线构图', KnowledgeBtn> = {
+  居中构图: {
+    key: '1',
+    name: '居中构图',
+    btnImage: 'shooting/居中构图底板',
+    desc: '居中构图就是主体放在画面中心，让画面更稳定主体更突出，拍摄时需避免选取杂乱的背景，可以用大光圈或者长焦距让背景虚化使主体从背景中跳出来适合拍摄单个主体，操作比较简单，非常适合新手使用',
+    images: ['shooting/居中构图1', 'shooting/居中构图2']
+  },
+  三分法构图: {
+    key: '2',
+    name: '三分法构图',
+    btnImage: 'shooting/三分法构图底板',
+    desc: '三分法构图又称九宫格构图，就是把拍摄主体置于九宫格的任意一条三分位置，三分构图法是比较常见的构图法可以视觉上让整体画面更加生动，使用三分构图法拍摄人像时，尽量占据画面的下2格比例和重心会更协调',
+    images: ['shooting/图片待定1', 'shooting/图片待定2']
+  },
+  对角线构图: {
+    key: '3',
+    name: '对角线构图',
+    btnImage: 'shooting/对角线构图底板',
+    desc: '对角线构图属于引导线构图的一种，所以也是借助引导线的视觉引导效果来突出强调主体。另外对角线构图在画面中制造出对角线的走向即可。',
+    images: ['shooting/对角线构图1', 'shooting/对角线构图2']
+  }
 }
-
-// 新增：处理分类点击事件
-const handleCategoryClick = (categoryName: string) => {
-  selectedCategory.value = categoryName
-  sideStatus.value = false // 隐藏其他模块标签
+const openKnowledge = (name: '三分法构图' | '居中构图' | '对角线构图') => {
+  currentKnowledge.value = knowledgeMap[name]
+  showKnowledgeCard.value = true
 }
-
-// 新增：返回主视图
-const handleBackToMain = () => {
-  selectedCategory.value = ''
-  sideStatus.value = true
-}
-
-// 新增：获取当前分类的配置
-const currentCategoryConfig = computed(() => {
-  if (!selectedCategory.value) return null
-  return currentModule.value.categories[selectedCategory.value] || null
+const currentCompositionKey = computed(() => {
+  const k = currentKnowledge.value?.key
+  if (k === '1' || k === '2' || k === '3') return k
+  return '1'
 })
 
-// 新增：返回按钮提示文本
-const backButtonTooltip = computed(() => {
-  return selectedCategory.value ? '返回主视图' : '退出页面'
-})
-
-setTimeout(() => {
-  status.value = true
-}, 1000)
+// 图标点击（基于 hook 的意图判断）
+const handleIconClick = (icon: string) => {
+  const action = getIconAction(icon)
+  if (!action) return
+  if (action.type === 'navigate') {
+    router.push(action.payload)
+    return
+  }
+  if (action.type === 'expand') {
+    showSubIcons.value = true
+    selectedPrimaryIcon.value = 'skill/画面构图选中'
+    return
+  }
+  if (action.type === 'openKnowledge') {
+    openKnowledge(action.payload.name)
+  }
+}
 </script>
 
 <template>
@@ -244,101 +160,24 @@ setTimeout(() => {
       :style="{ backgroundImage: getBackgroundImage('skill/技能树背景') }"
     ></div>
 
-    <ImgButton
-      @click="prevModule"
-      class="absolute left-0 top-1/2 -translate-y-1/2"
-      :image="'skill/左滑'"
-    >
-    </ImgButton>
-
-    <ImgButton
-      @click="nextModule"
-      class="absolute right-0 top-1/2 -translate-y-1/2"
-      :image="'skill/右滑'"
-    >
-    </ImgButton>
+    <ModuleSwitcher :module-name="currentModule.name" @prev="onPrevModule" @next="onNextModule" />
 
     <!-- 周围模块标签（静态绘制） -->
-    <div
-      v-show="sideStatus || selectedCategory === '拍摄基础'"
-      class="module module-left-bottom module-vertical"
-      @click="handleCategoryClick('拍摄基础')"
-    >
-      <div
-        :class="['module-text blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
-      >
-        拍摄基础
-      </div>
-      <div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
-    </div>
-
-    <div
-      v-show="sideStatus || selectedCategory === '内容策划'"
-      class="module module-left-middle module-vertical"
-      @click="handleCategoryClick('内容策划')"
-    >
-      <div
-        :class="['module-text  blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
-      >
-        内容策划
-      </div>
-      <div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
-    </div>
-
-    <div
-      v-show="sideStatus || selectedCategory === '拍摄执行'"
-      class="module module-right-middle module-vertical"
-      @click="handleCategoryClick('拍摄执行')"
-    >
-      <div
-        :class="['module-text  blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
-      >
-        拍摄执行
-      </div>
-      <div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
-    </div>
-
-    <div
-      v-show="sideStatus || selectedCategory === '后期制作'"
-      class="module module-right-upper module-vertical"
-      @click="handleCategoryClick('后期制作')"
-    >
-      <div
-        :class="['module-text  blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
-      >
-        后期制作
-      </div>
-      <div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
-    </div>
-
-    <div
-      v-show="sideStatus || selectedCategory === '版权伦理意识'"
-      class="module module-right-far module-vertical"
-      @click="handleCategoryClick('版权伦理意识')"
-    >
-      <div
-        :class="['module-text  blue-text', status ? 'text-white' : 'text-[#969696e6_!important]']"
-      >
-        版权伦理意识
-      </div>
-      <div :class="['module-percent', status ? 'red-text' : 'blue-text']">0%</div>
-    </div>
+    <CategoryTags
+      :status="status"
+      :side-status="sideStatus"
+      :selected-category="selectedCategory"
+      @select="onCategorySelect"
+    />
 
     <!-- 动态显示分类对应的icon -->
-    <template v-if="currentCategoryConfig">
-      <ImgButton
-        v-for="(icon, index) in currentCategoryConfig.icons"
-        :key="index"
-        v-show="!sideStatus"
-        @click="handleClick"
-        class="absolute z-10"
-        :style="{
-          top: currentCategoryConfig.positions[index].top,
-          left: currentCategoryConfig.positions[index].left
-        }"
-        :image="icon"
-      />
-    </template>
+    <IconLayer
+      v-if="currentCategoryConfig"
+      :positions="currentCategoryConfig.positions"
+      :displayed-icons="displayedIcons"
+      :side-status="sideStatus"
+      @iconClick="handleIconClick"
+    />
 
     <!-- 返回按钮 -->
     <ImgButton
@@ -358,18 +197,9 @@ setTimeout(() => {
       }"
     ></div>
 
-    <div class="absolute bottom-28 left-1/2 -translate-x-1/2">
-      <span class="blue-text tracking-[18px] text-5xl">
-        {{ selectedCategory || currentModule.name }}
-      </span>
-    </div>
     <div class="absolute bottom-10 left-1/2 -translate-x-1/2">
       <span class="red-text text-4xl">{{
-        !status
-          ? '当前尚未收集任何知识点,快去学习收集知识点吧'
-          : selectedCategory
-            ? `当前${selectedCategory}模块已全部解锁`
-            : '当前已全部解锁'
+        !status ? '当前尚未收集任何知识点,快去学习收集知识点吧' : '当前已全部解锁'
       }}</span>
     </div>
 
@@ -383,6 +213,17 @@ setTimeout(() => {
       @step-change="handleStepChange"
       position-offset-y="85%"
     />
+
+    <!-- 知识卡片 -->
+    <KnowledgeCard
+      v-if="currentKnowledge"
+      :visible="showKnowledgeCard"
+      :title="currentKnowledge.name"
+      :desc="currentKnowledge.desc"
+      :images="currentKnowledge.images"
+      :compositionKey="currentCompositionKey"
+      @close="showKnowledgeCard = false"
+    />
   </div>
 </template>
 

src/views/skill/useSkillState.ts

@@ -0,0 +1,214 @@
+import { ref, computed } from 'vue'
+
+// 分类配置
+interface CategoryConfig {
+  icons: string[]
+  positions: { top: string; left: string }[]
+}
+
+// 模块配置
+interface ModuleConfig {
+  name: string
+  value: number
+  categories: Record<string, CategoryConfig>
+}
+
+// 知识卡片按钮数据结构（与 shooting/index.vue 对齐）
+export type KnowledgeBtn = {
+  key: string
+  name: string
+  btnImage: string
+  images: string[]
+  desc: string
+}
+
+export function useSkillState() {
+  // 模块/分类/图标层级状态（仅保留必要业务状态）
+  const selectedModule = ref(1)
+  const selectedCategory = ref('')
+  const showSubIcons = ref(false)
+  const selectedPrimaryIcon = ref<string | null>(null)
+
+  const moduleList = ref<ModuleConfig[]>([
+    {
+      name: '技能树-新手启航',
+      value: 1,
+      categories: {
+        拍摄基础: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        内容策划: {
+          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        拍摄执行: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        后期制作: {
+          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        版权伦理意识: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        }
+      }
+    },
+    {
+      name: '技能树-vlog',
+      value: 2,
+      categories: {
+        拍摄基础: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        内容策划: {
+          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        拍摄执行: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        后期制作: {
+          icons: ['skill/画面构图未选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        },
+        版权伦理意识: {
+          icons: ['skill/画面构图未选中', 'skill/景别', 'skill/运镜技巧', 'skill/光线运用'],
+          positions: [
+            { top: '36%', left: '23%' },
+            { top: '15%', left: '34%' },
+            { top: '20%', left: '45%' },
+            { top: '28%', left: '58%' }
+          ]
+        }
+      }
+    }
+  ])
+
+  const currentModule = computed(() => {
+    return moduleList.value.find(item => item.value === selectedModule.value) || moduleList.value[0]
+  })
+
+  const nextModule = () => {
+    if (selectedModule.value === moduleList.value.length) {
+      selectedModule.value = 1
+    } else {
+      selectedModule.value++
+    }
+  }
+
+  const prevModule = () => {
+    if (selectedModule.value === 1) {
+      selectedModule.value = moduleList.value.length
+    } else {
+      selectedModule.value--
+    }
+  }
+
+  const handleCategoryClick = (categoryName: string) => {
+    selectedCategory.value = categoryName
+    showSubIcons.value = false
+    selectedPrimaryIcon.value = null
+  }
+
+  const currentCategoryConfig = computed(() => {
+    if (!selectedCategory.value) return null
+    return currentModule.value.categories[selectedCategory.value] || null
+  })
+
+  const displayedIcons = computed(() => {
+    const cfg = currentCategoryConfig.value
+    if (!cfg) return [] as string[]
+    if (showSubIcons.value && selectedPrimaryIcon.value) {
+      return ['skill/画面构图选中', 'skill/三分法构图', 'skill/居中构图', 'skill/对角线构图']
+    }
+    return cfg.icons
+  })
+
+  type IconAction =
+    | { type: 'navigate'; payload: { name: string } }
+    | { type: 'expand' }
+    | { type: 'openKnowledge'; payload: { name: '三分法构图' | '居中构图' | '对角线构图' } }
+    | null
+
+  const getIconAction = (icon: string): IconAction => {
+    if (icon === 'skill/画面构图未选中' && selectedCategory.value === '拍摄执行') {
+      if (selectedModule.value === 1) return { type: 'navigate', payload: { name: 'SkillVdieo' } }
+      if (selectedModule.value === 2) return { type: 'expand' }
+    }
+    if (showSubIcons.value && selectedModule.value === 2 && selectedCategory.value === '拍摄执行') {
+      const map: Record<string, '三分法构图' | '居中构图' | '对角线构图'> = {
+        'skill/三分法构图': '三分法构图',
+        'skill/居中构图': '居中构图',
+        'skill/对角线构图': '对角线构图'
+      }
+      if (icon in map) return { type: 'openKnowledge', payload: { name: map[icon] } }
+    }
+    return null
+  }
+
+  return {
+    // module switcher
+    currentModule,
+    nextModule,
+    prevModule,
+    // category & icons
+    selectedCategory,
+    handleCategoryClick,
+    currentCategoryConfig,
+    displayedIcons,
+    selectedModule,
+    showSubIcons,
+    selectedPrimaryIcon,
+    getIconAction
+  }
+}

src/views/test-step-navigation.vue

@@ -1 +0,0 @@
- 

src/views/vlog/video/index.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ImgButton from '@/components/Button/ImgButton.vue'
 import { GuideSteps, StepNavigation } from '@/components/Guide'
+import { Video } from '@/components'
 import { getStaticImage, IMAGE_PATHS } from '@/utils'
 import second from '/video/Vlog模块_任务取景框_专业剖析_基础景别运用.mp4'
 import third from '/video/Vlog模块_任务取景框_专业剖析_画面构图.mp4'
@@ -13,7 +14,8 @@ import six from '/video/Vlog模块_任务取景框_专业剖析_素材导入、
 const router = useRouter()
 const route = useRoute()
 
-const videoRef = ref()
+// 受控播放开关（用于切换到下一个视频时自动播放）
+const playing = ref(false)
 const status = ref(false)
 
 //引导步骤
@@ -68,6 +70,11 @@ const currentVideoIndex = ref(0)
 
 //按顺序播放
 const currentVideo = computed(() => videoList[currentVideoIndex.value])
+const resolvedSrc = computed(() => {
+  if (key.value === 'case') return '/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4'
+  if (key.value === 'profession') return currentVideo.value
+  return ''
+})
 const handleVideoChange = () => {
   if (currentVideoIndex.value < videoList.length - 1) {
     currentVideoIndex.value++
@@ -83,10 +90,8 @@ const handleVideoChange = () => {
     return
   }
   nextTick(() => {
-    if (!videoRef.value) return
-    videoRef.value.muted = false
-    videoRef.value.volume = 1
-    videoRef.value.play()
+    // 使用受控播放来触发下一个视频自动播放
+    playing.value = true
   })
 }
 
@@ -97,16 +102,12 @@ const handleClose = () => {
 const image = computed(() => route.query.image as string)
 const key = computed(() => route.query.key as string)
 
-const handleClick = () => {
-  if (!videoRef.value) return
-  videoRef.value.muted = false
-  videoRef.value.volume = 1
-}
+const handleClick = () => {}
 
-const handlePlay = () => {
-  if (!videoRef.value) return
-  videoRef.value.muted = false
-  videoRef.value.volume = 1
+const handlePlay = () => {}
+
+const onEnded = () => {
+  if (key.value === 'profession') handleVideoChange()
 }
 
 const handleComplete = () => {
@@ -132,10 +133,7 @@ const handleStepClick = (index: number) => {
   currentVideoIndex.value = index
   currentNavigationStep.value = index
   nextTick(() => {
-    if (!videoRef.value) return
-    videoRef.value.muted = false
-    videoRef.value.volume = 1
-    videoRef.value.play()
+    playing.value = true
   })
 }
 
@@ -152,12 +150,14 @@ onMounted(() => {
 
 <template>
   <div class="w-full h-full relative bg-white/10" @click="handleClick">
-    <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
-    <ImgButton
-      class="absolute right-0 top-0 z-10"
-      :image="IMAGE_PATHS.COMPONENTS.BACK"
-      @click="handleClose"
-    />
+    <template v-if="key !== 'case' && key !== 'profession'">
+      <ImgButton class="absolute left-4 top-4 z-10" :image="image"></ImgButton>
+      <ImgButton
+        class="absolute right-0 top-0 z-10"
+        :image="IMAGE_PATHS.COMPONENTS.BACK"
+        @click="handleClose"
+      />
+    </template>
     <!-- 步骤导航按钮 -->
     <button
       v-if="key === 'profession'"
@@ -178,22 +178,29 @@ onMounted(() => {
     <div v-if="key === 'vlog'" :src="image">
       <img :src="getStaticImage('work/vlog背景全屏待定')" alt="" />
     </div>
-    <video
-      ref="videoRef"
-      v-else-if="key === 'case'"
-      src="/video/案例赏析-美食小确幸：桂花酒酿小圆子.mp4"
-      controls
+    <Video
+      v-else-if="key === 'case' || key === 'profession'"
+      :src="resolvedSrc"
+      v-model="playing"
+      :muted="false"
+      :volume="1"
+      :controls="true"
+      :hideNativeControls="true"
       @play="handlePlay"
-    ></video>
-    <!-- 专业剖析 -->
-    <video
-      ref="videoRef"
-      v-else-if="key === 'profession'"
-      :src="currentVideo"
-      controls
-      @play="handlePlay"
-      @ended="handleVideoChange"
-    ></video>
+      @ended="onEnded"
+    >
+      <template #overlay>
+        <ImgButton
+          class="absolute left-4 top-4 z-10 pointer-events-auto"
+          :image="image"
+        ></ImgButton>
+        <ImgButton
+          class="absolute right-0 top-0 z-10 pointer-events-auto"
+          :image="IMAGE_PATHS.COMPONENTS.BACK"
+          @click="handleClose"
+        />
+      </template>
+    </Video>
     <div v-else-if="key === 'idea'" :src="image">
       <img :src="getStaticImage('work/思路提点全屏')" alt="" />
     </div>

src/views/vlog/work/index.vue

@@ -39,17 +39,17 @@ const sideSwitcherItems = ref([
   },
   {
     key: 'case',
-    description: '美食小确幸:桂花酒酿小圆子',
+    description: '案例赏析-桂花酒酿小圆子',
     image: 'work/案例背景待定'
   },
   {
     key: 'profession',
-    description: '美食小确幸:桂花酒酿小圆子',
-    image: 'work/案例背景待定'
+    description: '专业剖析-桂花酒酿小圆子',
+    image: 'work/专业剖析小屏'
   },
   {
     key: 'idea',
-    description: '美食小确幸:桂花酒酿小圆子',
+    description: '思路提点-桂花酒酿小圆子',
     image: 'work/思路提点小屏'
   }
 ])
@@ -111,7 +111,7 @@ function openImages(urls: string[], startIndex = 0) {
 
 onActivated(() => {
   if (route.query.key === 'work') {
-    selected.value = 'profession'
+    // selected.value = 'profession'
     isComplete.value = true
   } else {
     status.value = true