fix: 修复身份与形态图库历史图片布局

src/features/subject-images/components/ImageGalleryDialog.vue

@@ -102,6 +102,44 @@ async function choosePrimary() {
                 :empty-text="selected.status === 'failed' ? '本次生成失败' : '等待后端生成结果'"
                 class="asset-image-preview"
             />
+            <div class="image-history-heading">
+                <h4 class="font-medium">历史记录 · {{ images.length }} 条</h4>
+                <span class="text-muted">点击缩略图切换预览，可横向滚动</span>
+            </div>
+            <NScrollbar
+                x-scrollable
+                trigger="none"
+                content-class="image-history-content"
+                :content-style="{ width: 'max-content' }"
+                class="image-history"
+                aria-label="图片历史"
+            >
+                <NButton
+                    v-for="image in images"
+                    :key="image.id"
+                    :aria-label="`查看图片 ${image.id}`"
+                    :aria-pressed="image.id === selected.id"
+                    @click="selectedId = image.id"
+                    class="image-history-item"
+                    :class="{ selected: image.id === selected.id }"
+                    ><AssetImage
+                        :src="image.status === 'completed' ? image.imageUrl : null"
+                        :alt="`${form?.name}候选图`"
+                        :retryable="false"
+                        :empty-text="
+                            { pending: '排队中', generating: '生成中', failed: '生成失败', completed: '图片缺失' }[
+                                image.status
+                            ]
+                        "
+                    /><span class="image-history-label">{{
+                        image.isPrimary
+                            ? '主参考图'
+                            : { completed: '候选图', failed: '失败记录', pending: '排队中', generating: '生成中' }[
+                                  image.status
+                              ]
+                    }}</span></NButton
+                >
+            </NScrollbar>
             <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
                 <div class="flex items-center gap-2">
                     <StatusBadge :status="selected.status" /><NTag
@@ -159,38 +197,6 @@ async function choosePrimary() {
                         : '此记录未提供身份母版来源，不能据此判断是否使用了当前母版。'
                 }}
             </p>
-            <NScrollbar
-                x-scrollable
-                content-class="image-history-content"
-                class="image-history mt-5"
-                aria-label="图片历史"
-            >
-                <NButton
-                    v-for="image in images"
-                    :key="image.id"
-                    :aria-label="`查看图片 ${image.id}`"
-                    :aria-pressed="image.id === selected.id"
-                    @click="selectedId = image.id"
-                    class="image-history-item"
-                    :class="{ selected: image.id === selected.id }"
-                    ><AssetImage
-                        :src="image.status === 'completed' ? image.imageUrl : null"
-                        :alt="`${form?.name}候选图`"
-                        :retryable="false"
-                        :empty-text="
-                            { pending: '排队中', generating: '生成中', failed: '生成失败', completed: '图片缺失' }[
-                                image.status
-                            ]
-                        "
-                    /><span class="mt-1 block text-[10px]">{{
-                        image.isPrimary
-                            ? '主参考图'
-                            : { completed: '候选图', failed: '失败记录', pending: '排队中', generating: '生成中' }[
-                                  image.status
-                              ]
-                    }}</span></NButton
-                >
-            </NScrollbar>
         </div>
         <p v-else class="py-10 text-center text-sm text-muted">
             {{ query.loading.value ? '正在读取图片记录…' : '此形态尚无图片记录，可以先生成一张。' }}