28 lines
2.2 KiB
Vue
28 lines
2.2 KiB
Vue
<template>
|
||
<section v-if="plan" class="composed-frame" data-testid="composed-first-frame">
|
||
<div class="frame-heading"><strong>分镜首帧</strong><span>{{ plan.reusedFromTaskId ? '复用已验证素材清单的首帧' : `${plan.assets?.length || 0} 个绑定素材 · ${plan.rounds} 轮融合` }}</span></div>
|
||
<p>图片模型：{{ plan.imageModel }} · {{ plan.imageGpu === 'auto' ? '自动分配显卡' : plan.imageGpu?.toUpperCase() }}</p>
|
||
<p>{{ plan.assets?.map(a => a.name).join('、') }}</p>
|
||
<button v-if="plan.frameUrl || plan.images?.length" type="button" class="frame-image" @click="$emit('preview', plan.frameUrl || plan.images.at(-1))">
|
||
<img :src="src(plan.frameUrl || plan.images.at(-1))" alt="本次视频任务的分镜首帧" />
|
||
<span>{{ plan.frameUrl ? '已合成的分镜首帧 · 点击查看' : `第 ${plan.images.length} 轮中间图 · 尚未提交视频` }}</span>
|
||
</button>
|
||
<p v-else>正在准备完整画面。全部首帧步骤成功后，才会提交视频。</p>
|
||
<small>这是最近一次视频任务的素材快照。修改人物、场景或分镜后，下次生成会重新准备首帧。</small>
|
||
</section>
|
||
</template>
|
||
<script setup lang="ts">
|
||
const props = defineProps<{ task?: Record<string,any> | null }>()
|
||
defineEmits(['preview'])
|
||
const plan = computed(() => { try { return JSON.parse(props.task?.params || '{}').firstFrameComposition || null } catch { return null } })
|
||
const src = (value:string) => value?.startsWith('static/') ? '/' + value : value
|
||
</script>
|
||
<style scoped>
|
||
.composed-frame { margin:12px 16px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-1); font-size:12px; line-height:1.6; }
|
||
.frame-heading { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
|
||
.frame-heading span, small { color:var(--text-3); } p { margin:6px 0; overflow-wrap:anywhere; }
|
||
.frame-image { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; text-align:center; color:inherit; }
|
||
.frame-image img { display:block; width:100%; max-height:230px; object-fit:contain; border-radius:8px; background:#111; }
|
||
.frame-image span { display:block; padding:5px; } small { display:block; margin-top:6px; }
|
||
</style>
|