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

src/features/subject-identity/components/IdentityEditor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NButton, NCheckbox, NInput } from 'naive-ui'
 import { computed, reactive, ref, watch } from 'vue'
 import type { SaveIdentityInput, SubjectIdentity } from '../types'
 
@@ -34,21 +35,27 @@ function save() {
         <fieldset :disabled="disabled" class="space-y-4">
             <label class="block"
                 ><span class="field-label">稳定身份描述</span
-                ><textarea
-                    id="identity-description"
-                    v-model="form.description"
-                    class="input min-h-28"
+                ><NInput
+                    :disabled="disabled"
                     placeholder="只描述跨形态不变的面部、结构、材质等特征"
-                />
+                    :input-props="{ id: 'identity-description' }"
+                    class="min-h-28"
+                    v-model:value="form.description"
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 12 }"
+                ></NInput>
             </label>
             <label class="block"
                 ><span class="field-label">身份核心提示词（稳定事实）</span
-                ><textarea
-                    id="identity-prompt"
-                    v-model="form.generationPrompt"
-                    class="input min-h-36"
+                ><NInput
+                    :disabled="disabled"
                     placeholder="不固定某一形态的服装、伤势或临时状态"
-                />
+                    :input-props="{ id: 'identity-prompt' }"
+                    class="min-h-36"
+                    v-model:value="form.generationPrompt"
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 12 }"
+                ></NInput>
             </label>
             <p class="text-xs leading-6 text-muted">
                 {{
@@ -60,18 +67,22 @@ function save() {
                 }}
                 这里保存身份事实；背景、视角和参考图约束由后端另行编译，不是最终整段生图 Prompt。
             </p>
-            <label class="flex items-start gap-2 text-xs leading-6"
-                ><input id="identity-lock" v-model="form.isLocked" type="checkbox" class="mt-1.5 accent-accent" />{{
+            <NCheckbox
+                :disabled="disabled"
+                id="identity-lock"
+                v-model:checked="form.isLocked"
+                class="flex items-start gap-2 text-xs leading-6"
+                >{{
                     module === 'character'
                         ? '确认并锁定演员身份。Character 必须同时具有身份母版并锁定 Identity，首帧才能进入就绪状态。'
                         : '确认并锁定身份文本。锁定后仍可人工保存、生成图片及切换母版。'
-                }}</label
+                }}</NCheckbox
             >
             <div class="flex flex-wrap items-center justify-between gap-3">
                 <span class="text-xs text-muted">{{
                     dirty ? '有未保存修改，自动刷新不会覆盖草稿。' : '图片以已保存的身份提示词为准。'
                 }}</span
-                ><button class="button button-primary" type="submit" :disabled="disabled">保存主体身份</button>
+                ><NButton :disabled="disabled" type="primary" attr-type="submit">保存主体身份</NButton>
             </div>
         </fieldset>
     </form>