style: 按 Beat 分组整理镜头目录并去除重复编号

src/features/storyboard/StoryboardPage.vue

@@ -16,12 +16,13 @@ import {
 } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { ArrowLeft, Download, RefreshCw } from '@lucide/vue'
-import { DirectoryItem, EmptyState } from '../../components/ui'
+import { EmptyState } from '../../components/ui'
 import { downloadText } from '../../lib/format'
 import ConfirmAction from '../workflows/ConfirmAction.vue'
 import GenerationReceipt from './components/GenerationReceipt.vue'
 import ShotDesign from './components/ShotDesign.vue'
 import ShotTools from './components/ShotTools.vue'
+import BeatShotDirectory from './components/BeatShotDirectory.vue'
 import { useStoryboard } from './useStoryboard'
 
 const detailTab = ref('design')
@@ -353,25 +354,17 @@ watch(
                     content-class="directory-list-content shot-list-content"
                     x-scrollable
                 >
-                    <template v-for="(item, index) in shots" :key="item.shotId"
-                        ><h4
-                            v-if="index === 0 || shots[index - 1]?.beatNo !== item.beatNo"
-                            class="directory-group-heading"
-                        >
-                            BEAT {{ String(item.beatNo).padStart(2, '0') }}
-                        </h4>
-                        <DirectoryItem
-                            :active="shot.shotId === item.shotId"
-                            @click="selectedShot = item.shotId"
-                            class="shot-link"
-                            >{{ item.title }}
-                            <template #eyebrow>BEAT {{ item.beatNo }} / SHOT {{ item.shotNo }}</template>
-                            <template #meta>
-                                <span class="directory-status">{{ item.direction ? '设计已保存' : '待设计' }}</span>
-                                <span class="directory-status">{{ item.visualState ? '状态已保存' : '待状态' }}</span>
-                            </template></DirectoryItem
-                        ></template
+                    <BeatShotDirectory
+                        :shots="shots"
+                        :active-id="shot.shotId"
+                        item-class="shot-link"
+                        @select="selectedShot = $event"
                     >
+                        <template #meta="{ shot: item }">
+                            <span class="directory-status">{{ item.direction ? '设计已保存' : '待设计' }}</span>
+                            <span class="directory-status">{{ item.visualState ? '状态已保存' : '待状态' }}</span>
+                        </template>
+                    </BeatShotDirectory>
                 </NScrollbar>
             </nav>
             <article class="storyboard-detail min-w-0">