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

2026-09-01 19:40:40 +08:00
parent 9e3bff7997
commit 799f16d336
8 changed files with 182 additions and 35 deletions
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { DirectoryItem } from '../../../components/ui'
+import type { DesignedShot } from '../types'
+
+/** 分镜设计与镜头生产共用的两级目录；选择始终使用正式 Shot ID。 */
+const props = defineProps<{ shots: DesignedShot[]; activeId: string; itemClass: string }>()
+const emit = defineEmits<{ select: [shotId: string] }>()
+const directoryId = useId()
+const groups = computed(() => {
+    const entries = new Map<number, DesignedShot[]>()
+    for (const shot of props.shots) {
+        const items = entries.get(shot.beatNo) ?? []
+        items.push(shot)
+        entries.set(shot.beatNo, items)
+    }
+    return [...entries]
+        .toSorted(([a], [b]) => a - b)
+        .map(([beatNo, shots]) => ({
+            beatNo,
+            shots: shots.toSorted((a, b) => a.shotNo - b.shotNo)
+        }))
+})
+</script>
+
+<template>
+    <div
+        v-for="group in groups"
+        :key="group.beatNo"
+        class="beat-directory-group"
+        role="group"
+        :aria-labelledby="`${directoryId}-beat-${group.beatNo}`"
+    >
+        <h4 :id="`${directoryId}-beat-${group.beatNo}`" class="directory-group-heading">
+            <span>BEAT {{ String(group.beatNo).padStart(2, '0') }}</span>
+            <span class="directory-group-count">{{ group.shots.length }} 镜</span>
+        </h4>
+        <div class="beat-directory-items">
+            <DirectoryItem
+                v-for="shot in group.shots"
+                :key="shot.shotId"
+                :active="activeId === shot.shotId"
+                :class="itemClass"
+                :aria-label="`BEAT ${group.beatNo} · 镜头 ${shot.shotNo} · ${shot.title}`"
+                @click="emit('select', shot.shotId)"
+            >
+                {{ shot.title }}
+                <template #eyebrow>
+                    <!-- 窄屏目录变为横向条目时补回归属，桌面不重复显示分组编号。 -->
+                    <span class="directory-mobile-beat">BEAT {{ String(group.beatNo).padStart(2, '0') }} / </span>
+                    <span class="directory-shot-number">镜头 {{ String(shot.shotNo).padStart(2, '0') }}</span>
+                </template>
+                <template #meta><slot name="meta" :shot="shot" /></template>
+            </DirectoryItem>
+        </div>
+    </div>
+</template>