feat: 同步视觉风格与主体身份母版工作区

对齐后端 dev 059e597，新增项目风格编辑锁定、身份文本生成、身份参考图与母版切换。整理六个工作区入口，接通人物及场景母版继承说明、形态图片来源追溯。补充草稿保护、正式 ID 校验、费用确认及部分失败回执，67 项测试和静态检查、构建通过。未修改后端，未调用真实模型；本环境未完成浏览器视觉验收。
2026-08-28 19:28:27 +08:00
parent 47443c0efe
commit 669f4d9df0
34 changed files with 2273 additions and 22 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { AssetImage, StatusBadge } from '../../../components/ui'
+import { referenceImageUrl } from '../../../lib/assets'
+import { formatDate } from '../../../lib/format'
+import { canBeAnchor, currentAnchor, identityViewLabels, readImageProvenance } from '../model'
+import type { IdentityImage } from '../types'
+
+/** 身份图库区分权威母版、primary 候选和辅助视图，保留后端原始状态。 */
+const props = defineProps<{ images: IdentityImage[]; subjectName: string; disabled: boolean }>()
+const emit = defineEmits<{ anchor: [imageId: string] }>()
+const selectedId = ref('')
+const confirming = ref(false)
+const anchor = computed(() => currentAnchor(props.images))
+const selected = computed(
+    () => props.images.find(image => image.id === selectedId.value) ?? anchor.value ?? props.images[0]
+)
+const canSelect = computed(
+    () => !props.disabled && !!selected.value && canBeAnchor(selected.value) && !selected.value.isAnchor
+)
+const imageUrl = computed(() => referenceImageUrl(selected.value?.imageUrl ?? ''))
+watch(
+    () => selected.value?.id,
+    () => {
+        confirming.value = false
+    }
+)
+
+/** 只发出用户确认过的目标 ID，父页面再核验图片归属。 */
+function chooseAnchor() {
+    if (!canSelect.value || !confirming.value || !selected.value) return
+    emit('anchor', selected.value.id)
+    confirming.value = false
+}
+</script>
+
+<template>
+    <section class="mt-5 border-t border-line pt-5" aria-label="身份参考图库">
+        <div class="flex items-center justify-between gap-3">
+            <h3 class="text-sm font-medium">身份参考图 · {{ images.length }}</h3>
+            <span class="tag">{{ anchor ? '已选母版' : '尚无母版' }}</span>
+        </div>
+        <p class="mt-2 text-xs leading-6 text-muted">
+            身份母版确定“是谁”；形态主图确定“该造型长什么样”。切换母版仅影响之后的生成，不会替换已有形态图、分镜参考图或提示词。
+        </p>
+        <template v-if="selected">
+            <AssetImage
+                :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="mt-3 flex flex-wrap items-center justify-between gap-3">
+                <div class="flex flex-wrap items-center gap-2">
+                    <StatusBadge :status="selected.status" /><span class="tag">{{
+                        selected.isAnchor
+                            ? '当前身份母版'
+                            : selected.viewType === 'primary'
+                              ? '母版候选'
+                              : identityViewLabels[selected.viewType]
+                    }}</span
+                    ><span class="text-xs text-muted"
+                        >{{ selected.enabled ? '启用' : '停用' }} · {{ selected.width || '—' }} ×
+                        {{ selected.height || '—' }}</span
+                    >
+                </div>
+                <a
+                    v-if="imageUrl && selected.status === 'completed'"
+                    :href="imageUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-button"
+                    >打开原图</a
+                >
+            </div>
+            <p v-if="selected.error" class="alert alert-error mt-3" role="alert">{{ selected.error }}</p>
+            <div class="mt-3 flex flex-wrap items-center gap-3">
+                <button
+                    v-if="!selected.isAnchor"
+                    class="button button-secondary"
+                    :disabled="!canSelect"
+                    @click="confirming = true"
+                >
+                    设为身份母版</button
+                ><span class="text-[11px] text-muted"
+                    >{{ selected.provider }} · {{ selected.model }} · {{ formatDate(selected.createdAt) }}</span
+                >
+            </div>
+            <p v-if="selected.viewType !== 'primary'" class="mt-2 text-xs text-muted">
+                辅助视图不能直接设为母版；可以选它作为参考，另生成一张 primary 候选。
+            </p>
+            <div v-if="confirming" class="alert mt-3">
+                <p class="text-xs">
+                    确认切换身份母版？旧 primary
+                    母版将停用并保留。后续人物／场景形态生图会引用新母版，道具暂不自动引用。此操作不调用模型。
+                </p>
+                <div class="mt-3 flex gap-3">
+                    <button class="button button-primary" :disabled="!canSelect" @click="chooseAnchor">
+                        确认切换身份母版</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>
+            </details>
+            <p
+                v-if="readImageProvenance(selected.rawJson).referenceImageId"
+                class="mt-3 break-all text-[11px] text-muted"
+            >
+                本次锚定图片 ID：{{ readImageProvenance(selected.rawJson).referenceImageId }}
+            </p>
+            <p class="mt-2 break-all font-mono text-[10px] text-muted">Identity image ID · {{ selected.id }}</p>
+            <div class="image-history mt-4" aria-label="身份图片历史">
+                <button
+                    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
+                        :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>
+                </button>
+            </div>
+        </template>
+        <p v-else class="py-8 text-sm text-muted">尚无身份参考图。先保存身份提示词，再生成第一张母版。</p>
+    </section>
+</template>