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

src/features/breakdown/components/SubjectList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NCollapse, NCollapseItem, NInput, NTag } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { Search, ChevronDown } from '@lucide/vue'
 import { EmptyState } from '../../../components/ui'
@@ -21,7 +22,12 @@ const filtered = computed(() =>
         <div class="mb-5 flex items-center justify-between gap-3">
             <p class="text-sm text-muted">{{ subjects.length }} 个主体</p>
             <div class="search-field">
-                <Search :size="14" /><input v-model="search" placeholder="搜索名称或引用" aria-label="搜索主体" />
+                <Search :size="14" /><NInput
+                    placeholder="搜索名称或引用"
+                    aria-label="搜索主体"
+                    :input-props="{ 'aria-label': '搜索主体' }"
+                    v-model:value="search"
+                ></NInput>
             </div>
         </div>
         <div v-if="filtered.length" class="divide-y divide-line">
@@ -46,28 +52,31 @@ const filtered = computed(() =>
                     class="text-button mt-3"
                     >查看形态图片／生图</RouterLink
                 >
-                <details class="subject-details mt-4">
-                    <summary>
-                        <ChevronDown :size="14" />外观描述与形态
-                        <span class="ml-1 text-muted">{{
-                            forms.filter(form => form.profileId === subject.profileId).length
-                        }}</span>
-                    </summary>
-                    <p class="mt-3 whitespace-pre-wrap text-sm leading-7 text-muted">
-                        {{ subject.appearance_prompt || '暂无外观描述' }}
-                    </p>
-                    <div
-                        v-for="form in forms.filter(item => item.profileId === subject.profileId)"
-                        :key="form.formId"
-                        class="mt-3 border-l-2 border-line pl-4"
-                    >
-                        <p class="text-sm font-medium">
-                            {{ form.formName || form.name }}<span v-if="form.isDefault" class="tag ml-2">默认</span>
+                <NCollapse class="subject-details mt-4"
+                    ><NCollapseItem name="details"
+                        ><template #header
+                            ><ChevronDown :size="14" />外观描述与形态
+                            <span class="ml-1 text-muted">{{
+                                forms.filter(form => form.profileId === subject.profileId).length
+                            }}</span></template
+                        >
+                        <p class="mt-3 whitespace-pre-wrap text-sm leading-7 text-muted">
+                            {{ subject.appearance_prompt || '暂无外观描述' }}
                         </p>
-                        <p class="mt-2 text-sm leading-6 text-muted">{{ form.description }}</p>
-                        <p class="mt-2 text-xs leading-6 text-muted">{{ form.appearancePrompt }}</p>
-                    </div>
-                </details>
+                        <div
+                            v-for="form in forms.filter(item => item.profileId === subject.profileId)"
+                            :key="form.formId"
+                            class="mt-3 border-l-2 border-line pl-4"
+                        >
+                            <p class="text-sm font-medium">
+                                {{ form.formName || form.name
+                                }}<NTag v-if="form.isDefault" size="small" :bordered="false">默认</NTag>
+                            </p>
+                            <p class="mt-2 text-sm leading-6 text-muted">{{ form.description }}</p>
+                            <p class="mt-2 text-xs leading-6 text-muted">{{ form.appearancePrompt }}</p>
+                        </div></NCollapseItem
+                    ></NCollapse
+                >
             </article>
         </div>
         <EmptyState