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

2026-09-01 16:31:21 +08:00
parent 55516537bf
commit db8c176b55
51 changed files with 3277 additions and 2442 deletions
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NAlert, NButton, NTable } from 'naive-ui'
 import { computed } from 'vue'
 import { Download } from '@lucide/vue'
 import { downloadText } from '../../../lib/format'
@@ -31,19 +32,19 @@ function exportReceipt() {
    <section class="panel mt-5 p-5" aria-label="生成回执">
        <div class="flex items-center justify-between gap-3">
            <h3 class="text-sm font-semibold">{{ receipt.title }} · 本次回执</h3>
-            <button class="text-button" @click="exportReceipt"><Download :size="13" />导出诊断</button>
+            <NButton @click="exportReceipt" text size="small"><Download :size="13" />导出诊断</NButton>
        </div>
-        <p v-if="failed" class="alert alert-error mt-3" role="alert">
+        <NAlert v-if="failed" role="alert" type="error" :show-icon="false" class="mt-3">
            本次存在失败、校验未通过或未保存项。关闭“批量覆盖已有结果”后再补齐，可跳过已完整保存项。
-        </p>
+        </NAlert>
        <template v-if="receipt.kind === 'batch'">
            <p class="my-4 text-xs text-muted">
                共 {{ receipt.result.episodeCount }} 集 · 完成 {{ receipt.result.completedEpisodes }} · 跳过
                {{ receipt.result.skippedEpisodes }} · 失败 {{ receipt.result.failedEpisodes }}
            </p>
            <div class="table-scroll">
-                <table class="project-table">
-                    <thead>
+                <NTable :single-line="false" class="project-table"
+                    ><thead>
                        <tr>
                            <th>剧集</th>
                            <th>结果</th>
@@ -71,8 +72,8 @@ function exportReceipt() {
                                </p>
                            </td>
                        </tr>
-                    </tbody>
-                </table>
+                    </tbody></NTable
+                >
            </div>
        </template>
        <template v-else-if="receipt.kind === 'prompts'">
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NTag } from 'naive-ui'
 import { directionLabel } from '../model'
 import type { DesignedShot } from '../types'

@@ -14,7 +15,7 @@ defineProps<{ shot: DesignedShot }>()
            </h3>
            <template v-if="shot.direction"
                ><div class="mb-5 flex flex-wrap gap-2">
-                    <span
+                    <NTag
                        v-for="field in [
                            { key: 'shotSize', label: '景别' },
                            { key: 'cameraAngle', label: '角度' },
@@ -23,8 +24,9 @@ defineProps<{ shot: DesignedShot }>()
                            { key: 'depthOfField', label: '景深' }
                        ] as const"
                        :key="field.key"
-                        class="tag"
-                        >{{ field.label }} · {{ directionLabel(shot.direction[field.key], field.key) }}</span
+                        size="small"
+                        :bordered="false"
+                        >{{ field.label }} · {{ directionLabel(shot.direction[field.key], field.key) }}</NTag
                    >
                </div>
                <dl class="detail-grid">
@@ -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"