feat: 统一图片铺满展示与原生预览

src/features/storyboard/components/ShotTools.vue

@@ -2,6 +2,7 @@
 import { NScrollbar, NAlert, NButton, NCheckbox } from 'naive-ui'
 import { computed, onScopeDispose, ref, watch } from 'vue'
 import { Download, ExternalLink, RefreshCw } from '@lucide/vue'
+import { AssetImage } from '../../../components/ui'
 import { storyboardApi } from '../api'
 import { getStoryboardSession, referenceImageUrl } from '../model'
 import type { DesignedShot, ShotReferences } from '../types'
@@ -17,7 +18,6 @@ const references = ref<ShotReferences | null>(null)
 const spec = ref<ShotGenerationSpec | null>(null)
 const errors = ref({ references: '', spec: '' })
 const busy = ref({ references: false, spec: false })
-const brokenImages = ref<string[]>([])
 const force = ref(false)
 const prompt = computed(() => getStoryboardSession(props.projectId).prompts[props.shot.shotId])
 const operation = computed(() => getOperation(props.projectId))
@@ -33,7 +33,6 @@ function reset() {
     spec.value = null
     errors.value = { references: '', spec: '' }
     busy.value = { references: false, spec: false }
-    brokenImages.value = []
 }
 watch(() => JSON.stringify([props.projectId, props.shot.shotId, props.shot.direction, props.shot.visualState]), reset)
 onScopeDispose(reset)
@@ -54,7 +53,6 @@ async function load(kind: 'references' | 'spec') {
             if (version !== revision) return
             if (result.shotId !== shotId) throw new Error('参考图返回的 Shot ID 不匹配。')
             references.value = result
-            brokenImages.value = []
         } else {
             const result = await storyboardApi.generationSpec(shotId, controller.signal)
             if (version !== revision) return
@@ -117,20 +115,13 @@ function exportResult(kind: 'spec' | 'prompt') {
             <template v-if="references">
                 <div class="reference-grid mt-4">
                     <article v-for="item in references.references" :key="item.shotSubjectId" class="reference-card">
-                        <a
-                            v-if="referenceImageUrl(item.imageUrl) && !brokenImages.includes(item.imageId)"
-                            :href="referenceImageUrl(item.imageUrl)!"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="block"
-                            ><img
-                                :src="referenceImageUrl(item.imageUrl)!"
-                                :alt="`${item.subjectName} · ${item.subjectFormName}`"
-                                loading="lazy"
-                                referrerpolicy="no-referrer"
-                                @error="brokenImages.push(item.imageId)"
-                        /></a>
-                        <div v-else class="reference-placeholder">图片不可用</div>
+                        <AssetImage
+                            :key="item.imageId"
+                            :src="referenceImageUrl(item.imageUrl)"
+                            :alt="`${item.subjectName} · ${item.subjectFormName}`"
+                            empty-text="图片不可用"
+                            preview
+                        />
                         <div class="p-3">
                             <p class="text-xs font-medium">{{ item.subjectName }} · {{ item.subjectFormName }}</p>
                             <code class="mt-1 block text-[10px] text-muted">{{ item.subjectRef }}</code