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

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NAlert, NButton, NCheckbox, NInput, NInputNumber } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { AppDialog } from '../../../components/ui'
 import { validImageSize } from '../../subject-images/model'
@@ -38,18 +39,20 @@ function submit() {
 <template>
     <AppDialog v-model:open="open" title="生成角色选角候选" :description="`${subjectName} · 候选不会自动成为身份母版`">
         <form class="mt-5 space-y-4" @submit.prevent="submit">
-            <p class="alert text-xs">
+            <NAlert type="info" :show-icon="false" class="text-xs">
                 后端会依据角色 Identity、项目视觉风格和默认选角约束独立生成一张 primary
                 候选，不会复用当前身份母版。生成完成后仍需人工点击“确认选角”。
-            </p>
+            </NAlert>
             <label class="block">
                 <span class="field-label">覆盖本次完整提示词（可选）</span>
-                <textarea
-                    id="casting-candidate-prompt"
-                    v-model="prompt"
-                    class="input min-h-24"
+                <NInput
                     placeholder="建议留空，使用后端编译的稳定身份和选角约束；未明确人物背景时默认中国人物"
-                />
+                    :input-props="{ id: 'casting-candidate-prompt' }"
+                    class="min-h-24"
+                    v-model:value="prompt"
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 12 }"
+                ></NInput>
             </label>
             <p v-if="prompt.trim()" class="text-xs text-danger">
                 自定义文本会替换后端完整提示词，请自行包含人物身份、基础服装和中性参考图要求。
@@ -57,27 +60,35 @@ function submit() {
             <div class="grid grid-cols-2 gap-4">
                 <label
                     ><span class="field-label">宽度（px）</span
-                    ><input v-model.number="width" class="input" type="number" min="1" placeholder="后端默认"
-                /></label>
+                    ><NInputNumber
+                        placeholder="后端默认"
+                        :value="typeof width === 'number' ? width : null"
+                        @update:value="width = $event ?? ''"
+                        :min="1"
+                    ></NInputNumber
+                ></label>
                 <label
                     ><span class="field-label">高度（px）</span
-                    ><input v-model.number="height" class="input" type="number" min="1" placeholder="后端默认"
-                /></label>
+                    ><NInputNumber
+                        placeholder="后端默认"
+                        :value="typeof height === 'number' ? height : null"
+                        @update:value="height = $event ?? ''"
+                        :min="1"
+                    ></NInputNumber
+                ></label>
             </div>
             <p v-if="!valid" class="text-xs text-danger">宽高需要同时留空，或同时填写正整数。</p>
-            <label class="flex items-start gap-2 text-xs leading-6">
-                <input
-                    id="casting-candidate-cost"
-                    v-model="acknowledged"
-                    type="checkbox"
-                    class="mt-1.5 accent-accent"
-                />我已确认调用 Seedream 可能产生费用，且当前没有同项目生成任务。
-            </label>
+            <NCheckbox
+                id="casting-candidate-cost"
+                v-model:checked="acknowledged"
+                class="flex items-start gap-2 text-xs leading-6"
+                >我已确认调用 Seedream 可能产生费用，且当前没有同项目生成任务。
+            </NCheckbox>
             <div class="dialog-footer">
-                <button type="button" class="button button-secondary" @click="open = false">取消</button>
-                <button type="submit" class="button button-primary" :disabled="disabled || !valid || !acknowledged">
+                <NButton @click="open = false">取消</NButton>
+                <NButton :disabled="disabled || !valid || !acknowledged" type="primary" attr-type="submit">
                     确认生成候选
-                </button>
+                </NButton>
             </div>
         </form>
     </AppDialog>