short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 使用 Naive UI 重构后台布局与黑白双主题

Browse Source
This commit is contained in:
GouJ
2026-09-01 16:31:21 +08:00
parent 55516537bf
commit db8c176b55
51 changed files with 3277 additions and 2442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/storyboard/components/ShotTools.vue
+17 -23
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { NAlert, NButton, NCheckbox } from 'naive-ui'
import { computed, onScopeDispose, ref, watch } from 'vue'
import { Download, ExternalLink, RefreshCw } from '@lucide/vue'
import { storyboardApi } from '../api'
@@ -101,20 +102,18 @@ function exportResult(kind: 'spec' | 'prompt') {
<section>
<div class="flex flex-wrap items-center justify-between gap-3">
<h3 class="text-sm font-semibold">主体参考图</h3>
<button
class="button button-secondary"
:disabled="busy.references || locked"
@click="load('references')"
>
<RefreshCw :size="13" :class="{ 'animate-spin': busy.references }" />{{
<NButton :disabled="busy.references || locked" @click="load('references')"
><RefreshCw :size="13" :class="{ 'animate-spin': busy.references }" />{{
references ? '刷新参考图' : '读取参考图'
}}
</button>
}}</NButton
>
</div>
<p class="mt-2 text-xs leading-6 text-muted">
读取镜头已绑定形态的图片，不生成新图。参考图缺失会影响视频提示词生成。
</p>
<p v-if="errors.references" class="alert alert-error mt-3" role="alert">{{ errors.references }}</p>
<NAlert v-if="errors.references" role="alert" type="error" :show-icon="false" class="mt-3">{{
errors.references
}}</NAlert>
<template v-if="references">
<div class="reference-grid mt-4">
<article v-for="item in references.references" :key="item.shotSubjectId" class="reference-card">
@@ -165,24 +164,24 @@ function exportResult(kind: 'spec' | 'prompt') {
<section class="border-t border-line pt-6">
<div class="flex flex-wrap items-center justify-between gap-3">
<h3 class="text-sm font-semibold">镜头生成规格</h3>
<button
class="button button-secondary"
<NButton
:disabled="locked || busy.spec || !shot.direction || !shot.visualState"
@click="load('spec')"
>{{ busy.spec ? '编译中…' : '读取生成规格' }}</NButton
>
{{ busy.spec ? '编译中…' : '读取生成规格' }}
</button>
</div>
<p class="mt-2 text-xs leading-6 text-muted">
后端合并主体稳定身份、具体形态、摄影设计与即时状态，编译为 GenerationSpec，不调用模型。需要本镜头已有
Direction 和 VisualState。
</p>
<p v-if="errors.spec" class="alert alert-error mt-3" role="alert">{{ errors.spec }}</p>
<NAlert v-if="errors.spec" role="alert" type="error" :show-icon="false" class="mt-3">{{
errors.spec
}}</NAlert>
<template v-if="spec"
><div class="mt-4 flex items-center justify-between">
<span class="text-xs text-muted"
>{{ spec.subjects.length }} 个主体 · {{ spec.durationSeconds }} 秒</span
><button class="text-button" @click="exportResult('spec')"><Download :size="13" />导出规格</button>
><NButton @click="exportResult('spec')" text size="small"><Download :size="13" />导出规格</NButton>
</div>
<pre class="storyboard-json mt-3">{{ JSON.stringify(spec, null, 2) }}</pre>
</template>
@@ -204,19 +203,14 @@ function exportResult(kind: 'spec' | 'prompt') {
: '读取此镜头已有提示词；若不存在，将调用模型并保存结果。后端会检查参考图是否齐全。'
"
@confirm="generatePrompt"
/><label class="flex items-center gap-2 text-xs"
><input
v-model="force"
type="checkbox"
class="accent-accent"
:disabled="locked"
/>覆盖此镜头提示词</label
/><NCheckbox v-model:checked="force" :disabled="locked" class="flex items-center gap-2 text-xs"
>覆盖此镜头提示词</NCheckbox
>
</div>
<div v-if="prompt" class="mt-5">
<div class="mb-3 flex items-center justify-between">
<span class="text-xs font-medium">本会话已读取的正文</span
><button class="text-button" @click="exportResult('prompt')"><Download :size="13" />导出</button>
><NButton @click="exportResult('prompt')" text size="small"><Download :size="13" />导出</NButton>
</div>
<p class="whitespace-pre-wrap text-sm leading-7">{{ prompt.videoPrompt }}</p>
<template v-if="prompt.negativePrompt"