refactor: 统一主体与镜头目录并优化筛选工具栏布局

src/features/storyboard/StoryboardPage.vue

@@ -15,7 +15,7 @@ import {
 } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { ArrowLeft, Download, RefreshCw } from '@lucide/vue'
-import { EmptyState } from '../../components/ui'
+import { DirectoryItem, EmptyState } from '../../components/ui'
 import { downloadText } from '../../lib/format'
 import ConfirmAction from '../workflows/ConfirmAction.vue'
 import GenerationReceipt from './components/GenerationReceipt.vue'
@@ -310,31 +310,35 @@ watch(
             正在读取正式分镜数据……
         </div>
         <div v-else-if="shot" class="panel storyboard-workspace">
-            <nav class="shot-list" aria-label="本集镜头">
-                <NScrollbar class="panel-scroll" content-class="shot-list-content">
-                    <p class="px-4 pb-3 pt-5 text-[10px] text-muted">{{ shots.length }} 个镜头 · 按 Beat 排列</p>
+            <nav class="shot-list directory-panel" aria-label="本集镜头">
+                <div class="directory-heading">
+                    <h3>
+                        镜头目录 <span>{{ shots.length }} 镜</span>
+                    </h3>
+                    <span>按 Beat 排列</span>
+                </div>
+                <NScrollbar
+                    class="panel-scroll directory-scroll"
+                    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="px-4 pb-2 pt-4 font-mono text-[10px] text-muted"
+                            class="directory-group-heading"
                         >
                             BEAT {{ String(item.beatNo).padStart(2, '0') }}
                         </h4>
-                        <NButton
-                            :aria-current="shot.shotId === item.shotId ? 'true' : undefined"
+                        <DirectoryItem
+                            :active="shot.shotId === item.shotId"
                             @click="selectedShot = item.shotId"
                             class="shot-link"
-                            :class="{ selected: shot.shotId === item.shotId }"
-                            ><span class="font-mono text-[10px] text-muted">{{
-                                String(item.shotNo).padStart(2, '0')
-                            }}</span
-                            ><span class="min-w-0"
-                                ><span class="block truncate text-xs font-medium">{{ item.title }}</span
-                                ><span class="mt-1 block text-[10px] text-muted"
-                                    >{{ item.direction ? '设计已保存' : '待设计' }} ·
-                                    {{ item.visualState ? '状态已保存' : '待状态' }}</span
-                                ></span
-                            ></NButton
+                            >{{ 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
                     >
                 </NScrollbar>