fix: 修复身份与形态图库历史图片布局
This commit is contained in:
@@ -60,11 +60,53 @@ function chooseAnchor() {
|
||||
</NAlert>
|
||||
<template v-if="selected">
|
||||
<AssetImage
|
||||
:key="selected.id"
|
||||
:src="selected.status === 'completed' ? selected.imageUrl : null"
|
||||
:alt="`${subjectName} · ${identityViewLabels[selected.viewType]}`"
|
||||
class="asset-image-preview mt-4"
|
||||
:empty-text="selected.status === 'failed' ? '本次生成失败' : '等待后端图片结果'"
|
||||
/>
|
||||
<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="identityViewLabels[image.viewType]"
|
||||
:retryable="false"
|
||||
:empty-text="
|
||||
{ pending: '排队中', generating: '生成中', failed: '生成失败', completed: '图片缺失' }[
|
||||
image.status
|
||||
]
|
||||
"
|
||||
/><span class="image-history-label">{{
|
||||
image.isAnchor
|
||||
? '当前母版'
|
||||
: image.viewType === 'primary'
|
||||
? '母版候选'
|
||||
: identityViewLabels[image.viewType]
|
||||
}}</span>
|
||||
<span class="image-history-meta"
|
||||
><StatusBadge :status="image.status" /><span>{{ image.enabled ? '启用' : '停用' }}</span></span
|
||||
>
|
||||
</NButton>
|
||||
</NScrollbar>
|
||||
<div class="mt-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<StatusBadge :status="selected.status" /><NTag size="small" :bordered="false">{{
|
||||
@@ -132,34 +174,6 @@ function chooseAnchor() {
|
||||
本次锚定图片 ID:{{ readImageProvenance(selected.rawJson).referenceImageId }}
|
||||
</p>
|
||||
<p class="mt-2 break-all font-mono text-[10px] text-muted">Identity image ID · {{ selected.id }}</p>
|
||||
<NScrollbar
|
||||
x-scrollable
|
||||
content-class="image-history-content"
|
||||
class="image-history mt-4"
|
||||
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="identityViewLabels[image.viewType]"
|
||||
:retryable="false"
|
||||
:empty-text="image.status === 'failed' ? '失败' : '无图'"
|
||||
/><span class="mt-1 block text-[10px]">{{
|
||||
image.isAnchor
|
||||
? '当前母版'
|
||||
: image.viewType === 'primary'
|
||||
? '母版候选'
|
||||
: identityViewLabels[image.viewType]
|
||||
}}</span></NButton
|
||||
>
|
||||
</NScrollbar>
|
||||
</template>
|
||||
<p v-else class="py-8 text-sm text-muted">尚无身份参考图。先保存身份提示词,再生成第一张母版。</p>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user