refactor: 使用 Naive UI 重构后台布局与黑白双主题
This commit is contained in:
GouJ
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { NAlert, NButton, NCollapse, NCollapseItem, NTag } from 'naive-ui'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { ExternalLink, RefreshCw } from '@lucide/vue'
|
||||
import { AppDialog, AssetImage, StatusBadge } from '../../../components/ui'
|
||||
@@ -83,14 +84,16 @@ async function choosePrimary() {
|
||||
>
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<span class="text-xs text-muted">{{ images.length }} 条图片记录</span
|
||||
><button class="text-button" :disabled="query.loading.value" @click="query.refresh">
|
||||
<RefreshCw :size="13" :class="{ 'animate-spin': query.loading.value }" />刷新图片
|
||||
</button>
|
||||
><NButton :disabled="query.loading.value" @click="query.refresh" text size="small"
|
||||
><RefreshCw :size="13" :class="{ 'animate-spin': query.loading.value }" />刷新图片
|
||||
</NButton>
|
||||
</div>
|
||||
<p v-if="query.error.value" class="alert alert-error mt-3" role="alert">
|
||||
{{ query.error.value }} 当前保留上次读取的记录，主图操作已暂停。
|
||||
</p>
|
||||
<p v-if="operation.error" class="alert alert-error mt-3" role="alert">{{ operation.error }}</p>
|
||||
<NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mt-3"
|
||||
>{{ query.error.value }} 当前保留上次读取的记录，主图操作已暂停。
|
||||
</NAlert>
|
||||
<NAlert v-if="operation.error" role="alert" type="error" :show-icon="false" class="mt-3">{{
|
||||
operation.error
|
||||
}}</NAlert>
|
||||
<div v-if="selected" class="mt-4">
|
||||
<AssetImage
|
||||
:key="selected.id"
|
||||
@@ -101,8 +104,11 @@ async function choosePrimary() {
|
||||
/>
|
||||
<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<StatusBadge :status="selected.status" /><span v-if="selected.isPrimary" class="tag"
|
||||
>当前主参考图</span
|
||||
<StatusBadge :status="selected.status" /><NTag
|
||||
v-if="selected.isPrimary"
|
||||
size="small"
|
||||
:bordered="false"
|
||||
>当前主参考图</NTag
|
||||
><span class="text-xs text-muted">{{ selected.width || '—' }} × {{ selected.height || '—' }}</span>
|
||||
</div>
|
||||
<a
|
||||
@@ -114,36 +120,37 @@ async function choosePrimary() {
|
||||
>打开原图<ExternalLink :size="12"
|
||||
/></a>
|
||||
</div>
|
||||
<p v-if="selected.error" class="alert alert-error mt-3 whitespace-pre-wrap" role="alert">
|
||||
{{ selected.error }}
|
||||
</p>
|
||||
<NAlert
|
||||
v-if="selected.error"
|
||||
role="alert"
|
||||
type="error"
|
||||
:show-icon="false"
|
||||
class="mt-3 whitespace-pre-wrap"
|
||||
>{{ selected.error }}</NAlert
|
||||
>
|
||||
<div class="mt-4 flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
v-if="!selected.isPrimary"
|
||||
class="button button-secondary"
|
||||
:disabled="!canSetPrimary"
|
||||
@click="confirming = true"
|
||||
>
|
||||
设为主参考图</button
|
||||
<NButton v-if="!selected.isPrimary" :disabled="!canSetPrimary" @click="confirming = true">
|
||||
设为主参考图</NButton
|
||||
><span class="text-[11px] text-muted"
|
||||
>{{ selected.provider }} · {{ selected.model }} · {{ formatDate(selected.createdAt) }}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="confirming" class="alert mt-3">
|
||||
<p class="text-xs">确认将这张图用于此形态后续的分镜参考？旧主图仍会保留，此操作不调用模型。</p>
|
||||
<NAlert v-if="confirming" type="info" :show-icon="false" class="mt-3"
|
||||
><p class="text-xs">确认将这张图用于此形态后续的分镜参考？旧主图仍会保留，此操作不调用模型。</p>
|
||||
<div class="mt-3 flex gap-3">
|
||||
<button class="button button-primary" :disabled="!canSetPrimary" @click="choosePrimary">
|
||||
确认切换主图</button
|
||||
><button class="text-button" @click="confirming = false">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
<details v-if="selected.prompt" class="mt-4 text-xs">
|
||||
<summary class="cursor-pointer text-muted">查看本次实际提示词</summary>
|
||||
<p class="mt-3 whitespace-pre-wrap leading-6">{{ selected.prompt }}</p>
|
||||
<p v-if="selected.negativePrompt" class="mt-3 whitespace-pre-wrap leading-6">
|
||||
Negative prompt: {{ selected.negativePrompt }}
|
||||
</p>
|
||||
</details>
|
||||
<NButton :disabled="!canSetPrimary" @click="choosePrimary" type="primary"> 确认切换主图</NButton
|
||||
><NButton @click="confirming = false" text size="small">取消</NButton>
|
||||
</div></NAlert
|
||||
>
|
||||
<NCollapse v-if="selected.prompt" class="mt-4 text-xs"
|
||||
><NCollapseItem name="details"
|
||||
><template #header>查看本次实际提示词</template>
|
||||
<p class="mt-3 whitespace-pre-wrap leading-6">{{ selected.prompt }}</p>
|
||||
<p v-if="selected.negativePrompt" class="mt-3 whitespace-pre-wrap leading-6">
|
||||
Negative prompt: {{ selected.negativePrompt }}
|
||||
</p></NCollapseItem
|
||||
></NCollapse
|
||||
>
|
||||
<p class="mt-3 break-all font-mono text-[10px] text-muted">Image ID · {{ selected.id }}</p>
|
||||
<p class="mt-2 break-all text-[11px] text-muted">
|
||||
{{
|
||||
@@ -153,16 +160,15 @@ async function choosePrimary() {
|
||||
}}
|
||||
</p>
|
||||
<div class="image-history mt-5" aria-label="图片历史">
|
||||
<button
|
||||
<NButton
|
||||
v-for="image in images"
|
||||
:key="image.id"
|
||||
class="image-history-item"
|
||||
:class="{ selected: image.id === selected.id }"
|
||||
:aria-label="`查看图片 ${image.id}`"
|
||||
:aria-pressed="image.id === selected.id"
|
||||
@click="selectedId = image.id"
|
||||
>
|
||||
<AssetImage
|
||||
class="image-history-item"
|
||||
:class="{ selected: image.id === selected.id }"
|
||||
><AssetImage
|
||||
:src="image.status === 'completed' ? image.imageUrl : null"
|
||||
:alt="`${form?.name}候选图`"
|
||||
:retryable="false"
|
||||
@@ -177,8 +183,8 @@ async function choosePrimary() {
|
||||
: { completed: '候选图', failed: '失败记录', pending: '排队中', generating: '生成中' }[
|
||||
image.status
|
||||
]
|
||||
}}</span>
|
||||
</button>
|
||||
}}</span></NButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="py-10 text-center text-sm text-muted">
|
||||
|
||||
Reference in New Issue
Block a user