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

src/features/projects/components/CreateProjectDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { NAlert, NButton, NInput, NInputNumber } from 'naive-ui'
 import { reactive, ref } from 'vue'
-import { DialogTrigger } from 'reka-ui'
 import { ArrowRight, LoaderCircle, Plus } from '@lucide/vue'
 import { AppDialog } from '../../../components/ui'
 import { projectsApi } from '../api'
@@ -47,58 +47,54 @@ async function submit() {
         :busy="busy"
     >
         <template #trigger
-            ><DialogTrigger class="button button-primary"><Plus :size="16" />新建剧本</DialogTrigger></template
+            ><NButton @click="open = true" type="primary"><Plus :size="16" />新建剧本</NButton></template
         >
         <form class="mt-7 space-y-5" @submit.prevent="submit">
             <div>
                 <label class="field-label" for="topic">故事主题 <span class="text-accent">*</span></label
-                ><textarea
-                    id="topic"
-                    v-model="form.topic"
-                    class="input min-h-32 resize-y"
+                ><NInput
                     placeholder="描述主角、故事背景，以及你希望展开的核心冲突……"
-                    required
                     :disabled="busy"
-                ></textarea>
+                    :input-props="{ id: 'topic', required: true }"
+                    class="min-h-32 resize-y"
+                    v-model:value="form.topic"
+                    type="textarea"
+                    :autosize="{ minRows: 3, maxRows: 12 }"
+                ></NInput>
             </div>
             <div class="grid grid-cols-[1fr_110px] gap-4">
                 <div>
                     <label class="field-label" for="style">剧本风格</label
-                    ><input
-                        id="style"
-                        v-model="form.style"
-                        class="input"
+                    ><NInput
                         placeholder="如：都市悬疑、爽文反转"
                         :disabled="busy"
-                    />
+                        :input-props="{ id: 'style' }"
+                        v-model:value="form.style"
+                    ></NInput>
                 </div>
                 <div>
                     <label class="field-label" for="episode-count">计划集数</label
-                    ><input
-                        id="episode-count"
-                        v-model.number="form.episodeCount"
-                        class="input"
-                        type="number"
-                        min="1"
-                        step="1"
-                        required
+                    ><NInputNumber
                         :disabled="busy"
-                    />
+                        :input-props="{ id: 'episode-count', required: true }"
+                        :value="typeof form.episodeCount === 'number' ? form.episodeCount : null"
+                        @update:value="form.episodeCount = $event ?? 0"
+                        :min="1"
+                        :step="1"
+                    ></NInputNumber>
                 </div>
             </div>
             <p class="text-xs leading-5 text-muted">
                 建议先用 3 集验证生成效果。生成会实际调用后端模型，产生相应费用。
             </p>
-            <p v-if="error" class="alert alert-error" role="alert">{{ error }}</p>
+            <NAlert v-if="error" role="alert" type="error" :show-icon="false" class=" ">{{ error }}</NAlert>
             <div class="dialog-footer">
-                <button type="button" class="button button-secondary" :disabled="busy" @click="open = false">
-                    取消</button
-                ><button type="submit" class="button button-primary" :disabled="busy">
-                    <LoaderCircle v-if="busy" :size="16" class="animate-spin" />开始生成<ArrowRight
+                <NButton :disabled="busy" @click="open = false"> 取消</NButton
+                ><NButton :disabled="busy" type="primary" attr-type="submit"
+                    ><LoaderCircle v-if="busy" :size="16" class="animate-spin" />开始生成<ArrowRight
                         v-if="!busy"
                         :size="16"
-                    />
-                </button>
+                /></NButton>
             </div>
         </form>
     </AppDialog>