fix: 收紧图库镜头导航并移除空白定位横条

src/features/subject-images/SubjectImagesPage.vue

@@ -6,7 +6,7 @@ import WorkspaceTools from '../../components/ui/WorkspaceTools.vue'
 import { NAlert, NButton, NCheckbox, NCollapse, NCollapseItem, NInput, NInputNumber, NSelect, NTag } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Search, RefreshCw, Download, ImagePlus, ArrowRight, AlertTriangle } from '@lucide/vue'
+import { Search, RefreshCw, Download, ImagePlus, ArrowLeft, ArrowRight, LayoutGrid, AlertTriangle } from '@lucide/vue'
 import { AssetImage, EmptyState, StatusBadge } from '../../components/ui'
 import { downloadText } from '../../lib/format'
 import ConfirmAction from '../workflows/ConfirmAction.vue'
@@ -51,6 +51,35 @@ const targetForm = computed(() => forms.value.find(form => form.id === targetFor
 const impact = useKeyframeImpact(id, sourceShotId)
 const sourceShot = impact.source
 const linkedReferences = computed(() => referenceTargets(impact.references.data.value, []))
+/** 定位说明仅在有实际状态、引用或错误时出现，避免两项导航操作单独撑起空白横条。 */
+const sourceMissing = computed(
+    () => sourceShotId.value && !sourceShot.value && !impact.query.loading.value && !impact.query.error.value
+)
+const sourceCurrent = computed(
+    () =>
+        sourceShot.value &&
+        !sourceShot.value.primaryKeyframeStale &&
+        !impact.query.loading.value &&
+        !impact.query.error.value
+)
+const targetUnlinked = computed(
+    () =>
+        targetForm.value &&
+        impact.references.data.value &&
+        !impact.references.error.value &&
+        !impact.relatedForms.value.has(targetForm.value.id)
+)
+const showImpactDetails = computed(
+    () =>
+        sourceShotId.value &&
+        (sourceMissing.value ||
+            sourceCurrent.value ||
+            sourceShot.value?.inconsistent ||
+            targetUnlinked.value ||
+            linkedReferences.value.length ||
+            impact.references.loading.value ||
+            impact.references.error.value)
+)
 const sourceLocation = computed(() =>
     sourceShot.value
         ? {
@@ -380,17 +409,53 @@ async function showStaleForms() {
                 <NButton text size="small" @click="impact.query.refresh">重试检查</NButton></NAlert
             >
             <div class="form-image-filter-region">
-                <div class="form-image-toolbar" :class="{ 'has-impact-picker': impactOptions.length || sourceShotId }">
-                    <NSelect
+                <div
+                    class="form-image-toolbar"
+                    :class="{
+                        'has-impact-picker': impactOptions.length || sourceShotId,
+                        'has-impact-actions': sourceShotId || targetFormId
+                    }"
+                >
+                    <div
                         v-if="impactOptions.length || sourceShotId"
-                        :value="sourceShot?.shotId ?? null"
-                        :options="impactOptions"
-                        placeholder="选择过期镜头，查看关联素材"
-                        clearable
-                        aria-label="选择关联镜头"
-                        class="asset-impact-select"
-                        @update:value="selectImpactShot"
-                    />
+                        class="asset-impact-picker"
+                        role="group"
+                        aria-label="镜头定位与导航"
+                    >
+                        <NSelect
+                            :value="sourceShot?.shotId ?? null"
+                            :options="impactOptions"
+                            placeholder="选择过期镜头，查看关联素材"
+                            clearable
+                            aria-label="选择关联镜头"
+                            class="asset-impact-select"
+                            @update:value="selectImpactShot"
+                        />
+                        <RouterLink v-if="sourceLocation" :to="sourceLocation" custom v-slot="{ href, navigate }">
+                            <NButton
+                                tag="a"
+                                :href="href"
+                                @click="navigate"
+                                class="icon-button"
+                                :aria-label="`返回第 ${sourceShot?.episodeNo} 集 · 镜头 ${sourceShot?.shotNo}`"
+                                :title="`返回第 ${sourceShot?.episodeNo} 集 · 镜头 ${sourceShot?.shotNo}`"
+                            >
+                                <template #icon><ArrowLeft :size="16" /></template>
+                                <span class="sr-only"
+                                    >返回第 {{ sourceShot?.episodeNo }} 集 · 镜头 {{ sourceShot?.shotNo }}</span
+                                >
+                            </NButton>
+                        </RouterLink>
+                        <NButton
+                            v-if="sourceShotId || targetFormId"
+                            class="icon-button"
+                            aria-label="查看全部素材"
+                            title="查看全部素材（清除定位与筛选）"
+                            @click="resetFilters"
+                        >
+                            <template #icon><LayoutGrid :size="16" /></template>
+                        </NButton>
+                    </div>
                     <div class="form-image-filters" role="group" aria-label="形态图片筛选">
                         <NInput
                             placeholder="搜索主体、引用或形态"
@@ -417,51 +482,22 @@ async function showStaleForms() {
                     </div>
                 </div>
             </div>
-            <div v-if="sourceShotId" class="asset-impact-context mt-3" aria-label="镜头与素材定位">
-                <div class="flex flex-wrap items-center gap-3">
-                    <RouterLink v-if="sourceLocation" :to="sourceLocation" class="text-button"
-                        >返回第 {{ sourceShot?.episodeNo }} 集 · 镜头 {{ sourceShot?.shotNo }} →</RouterLink
-                    >
-                    <NButton v-if="targetFormId || sourceShotId" text size="small" @click="resetFilters"
-                        >查看全部素材</NButton
-                    >
-                </div>
-                <p
-                    v-if="sourceShotId && !sourceShot && !impact.query.loading.value && !impact.query.error.value"
-                    class="mt-3 text-danger"
-                >
-                    来源镜头不存在或不属于当前项目，未读取其素材。
-                </p>
-                <p
-                    v-if="
-                        sourceShot &&
-                        !sourceShot.primaryKeyframeStale &&
-                        !impact.query.error.value &&
-                        !impact.query.loading.value
-                    "
-                    class="mt-3 text-xs"
-                >
+            <div v-if="showImpactDetails" class="asset-impact-context mt-3" aria-label="镜头与素材定位">
+                <p v-if="sourceMissing" class="text-danger">来源镜头不存在或不属于当前项目，未读取其素材。</p>
+                <p v-if="sourceCurrent" class="text-xs">
                     当前检查：{{
-                        sourceShot.primaryKeyframeId ? '该镜头主首帧未被标记为过期' : '该镜头暂无主首帧'
+                        sourceShot?.primaryKeyframeId ? '该镜头主首帧未被标记为过期' : '该镜头暂无主首帧'
                     }}。请以后端最新就绪状态为准。
                 </p>
-                <p v-if="sourceShot?.inconsistent" class="mt-3 text-xs text-danger">
+                <p v-if="sourceShot?.inconsistent" class="text-xs text-danger">
                     当前镜头：首帧检查未标记过期，但视频检查报告过期。请核对后端检查逻辑与身份母版，暂不建议重复生图。
                 </p>
-                <p
-                    v-if="
-                        targetForm &&
-                        impact.references.data.value &&
-                        !impact.references.error.value &&
-                        !impact.relatedForms.value.has(targetForm.id)
-                    "
-                    class="mt-3 text-xs text-danger"
-                >
+                <p v-if="targetUnlinked" class="text-xs text-danger">
                     指定形态不在该镜头当前的有效引用列表中，关联可能已调整或主图缺失，请从下方关联素材重新核对。
                 </p>
                 <div
                     v-if="linkedReferences.length && !impact.references.error.value"
-                    class="mt-3 flex flex-wrap items-center gap-3"
+                    class="flex flex-wrap items-center gap-3"
                 >
                     <span class="text-xs text-muted">本镜头当前关联素材：</span
                     ><RouterLink
@@ -472,8 +508,8 @@ async function showStaleForms() {
                         >{{ target.label }} →</RouterLink
                     >
                 </div>
-                <p v-if="impact.references.loading.value" class="mt-2 text-xs text-muted">正在读取镜头关联素材…</p>
-                <p v-if="impact.references.error.value" class="mt-2 text-xs text-danger">
+                <p v-if="impact.references.loading.value" class="text-xs text-muted">正在读取镜头关联素材…</p>
+                <p v-if="impact.references.error.value" class="text-xs text-danger">
                     {{ impact.references.error.value }}
                     <NButton text size="small" @click="impact.references.refresh">重试读取素材</NButton>
                 </p>