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

src/features/visual-style/VisualStylePage.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import WorkspacePage from '../../components/ui/WorkspacePage.vue'
+import { NAlert, NButton, NTag } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { usePolling } from '../../composables/usePolling'
 import { runOperation } from '../workflows/operations'
@@ -87,18 +89,22 @@ function removeImage(image: VisualStyleImage) {
 </script>
 
 <template>
-    <section class="mt-7">
-        <div class="flex flex-wrap items-end justify-between gap-4">
-            <div>
-                <h2 class="text-lg font-semibold">项目视觉风格</h2>
-                <p class="mt-2 text-sm text-muted">确定项目统一的视觉语言，再为人物、场景和道具建立稳定身份。</p>
-            </div>
-            <RouterLink :to="`/projects/${projectId}/subject-identity`" class="text-button"
-                >下一步：主体身份 →</RouterLink
-            >
-        </div>
+    <WorkspacePage
+        ><template #header
+            ><div class="flex flex-wrap items-end justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-semibold">项目视觉风格</h2>
+                    <p class="mt-2 text-sm text-muted">确定项目统一的视觉语言，再为人物、场景和道具建立稳定身份。</p>
+                </div>
+                <RouterLink :to="`/projects/${projectId}/subject-identity`" class="text-button"
+                    >下一步：主体身份 →</RouterLink
+                >
+            </div></template
+        >
         <div class="my-5 flex flex-wrap items-center gap-3">
-            <span class="tag">{{ style ? (style.isLocked ? '已锁定' : '未锁定') : '尚未创建' }}</span>
+            <NTag size="small" :bordered="false">{{
+                style ? (style.isLocked ? '已锁定' : '未锁定') : '尚未创建'
+            }}</NTag>
             <ConfirmAction
                 :label="style ? 'AI 重新生成风格' : 'AI 生成风格'"
                 :disabled="disabled || !!style?.isLocked || dirty"
@@ -106,26 +112,24 @@ function removeImage(image: VisualStyleImage) {
                 description="调用文本模型生成整体及分类风格。重新生成会覆盖已保存的文本与硬约束；旧身份、旧图片和已有提示词不会自动更新。"
                 @confirm="generate"
             />
-            <button class="text-button" :disabled="query.loading.value" @click="query.refresh">刷新风格</button>
+            <NButton :disabled="query.loading.value" @click="query.refresh" text size="small">刷新风格</NButton>
         </div>
-        <p v-if="query.error.value" class="alert alert-error mb-4" role="alert">
-            {{ query.error.value }} 请确认后端 dev 已更新并重启；查询失败不等同于尚未创建。
-        </p>
+        <NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mb-4"
+            >{{ query.error.value }} 请确认后端 dev 已更新并重启；查询失败不等同于尚未创建。
+        </NAlert>
         <p v-if="dirty" class="mb-4 text-xs text-muted">
             有未保存修改，AI 重生成暂不可用。自动刷新不会覆盖编辑内容；离开页面不会自动保存。
         </p>
-        <p class="alert mb-5 text-xs">
+        <NAlert type="info" :show-icon="false" class="mb-5 text-xs">
             AI
-            生成时，若项目和世界观没有明确其它人物背景，人物风格默认采用中国人物选角基线；人工填写的人物背景和角色事实优先。修改风格只影响之后的生成，旧资产不会自动更新。
-        </p>
-        <StyleEditor
+            生成时，若项目和世界观没有明确其它人物背景，人物风格默认采用中国人物选角基线；人工填写的人物背景和角色事实优先。修改风格只影响之后的生成，旧资产不会自动更新。 </NAlert
+        ><StyleEditor
             v-if="query.data.value"
             :key="editorRevision"
-            :style="style"
+            :visual-style="style"
             :disabled="disabled"
             @save="save"
-            @dirty="dirty = $event"
-        />
+            @dirty="dirty = $event" />
         <p v-else-if="query.loading.value" class="py-8 text-sm text-muted" role="status">正在读取视觉风格…</p>
         <StyleImages
             :key="imageRevision"
@@ -134,6 +138,5 @@ function removeImage(image: VisualStyleImage) {
             @add="addImage"
             @toggle="toggleImage"
             @remove="removeImage"
-        />
-    </section>
+    /></WorkspacePage>
 </template>