refactor: 统一主体与镜头目录并优化筛选工具栏布局

src/features/subject-identity/SubjectIdentityPage.vue

@@ -14,8 +14,8 @@ import {
 } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { UserCheck } from '@lucide/vue'
-import { AssetImage, EmptyState, StatusBadge } from '../../components/ui'
+import { RefreshCw, UserCheck } from '@lucide/vue'
+import { AssetImage, DirectoryItem, EmptyState, StatusBadge } from '../../components/ui'
 import { downloadText } from '../../lib/format'
 import ConfirmAction from '../workflows/ConfirmAction.vue'
 import { castingStatusLabel, currentAnchor } from './model'
@@ -336,62 +336,69 @@ watch(
             ></NScrollbar
         >
         <div v-if="subjects.length" class="identity-workspace">
-            <aside class="panel min-w-0 p-4">
-                <h3 class="text-sm font-medium">
-                    主体目录 <span class="ml-2 text-xs text-muted">{{ subjects.length }}</span>
-                </h3>
-                <NInput
-                    placeholder="搜索主体或引用"
-                    aria-label="搜索主体身份"
-                    :input-props="{ 'aria-label': '搜索主体身份' }"
-                    class="mt-4"
-                    v-model:value="search"
-                ></NInput>
-                <NSelect
-                    aria-label="身份主体类型"
-                    v-model:value="module"
-                    :options="[
-                        { label: String('全部类型'), value: 'all' },
-                        { label: String('人物'), value: 'character' },
-                        { label: String('场景'), value: 'scene' },
-                        { label: String('道具'), value: 'prop' }
-                    ]"
-                    class="mt-3"
-                ></NSelect>
-                <NScrollbar
-                    class="identity-subject-list panel-scroll mt-4"
-                    content-class="identity-subject-list-content"
-                >
+            <aside class="panel directory-panel identity-directory">
+                <div class="directory-heading">
+                    <h3>
+                        主体目录 <span>{{ filtered.length }} / {{ subjects.length }}</span>
+                    </h3>
                     <NButton
+                        :disabled="catalog.loading.value || castingQuery.loading.value"
+                        @click="refreshDirectory"
+                        quaternary
+                        circle
+                        size="small"
+                        aria-label="刷新主体目录"
+                        title="刷新主体目录"
+                        ><RefreshCw :size="14"
+                    /></NButton>
+                </div>
+                <div class="directory-filters">
+                    <NInput
+                        placeholder="搜索主体或引用"
+                        aria-label="搜索主体身份"
+                        :input-props="{ 'aria-label': '搜索主体身份' }"
+                        v-model:value="search"
+                        clearable
+                    ></NInput>
+                    <NSelect
+                        aria-label="身份主体类型"
+                        v-model:value="module"
+                        :options="[
+                            { label: String('全部类型'), value: 'all' },
+                            { label: String('人物'), value: 'character' },
+                            { label: String('场景'), value: 'scene' },
+                            { label: String('道具'), value: 'prop' }
+                        ]"
+                    ></NSelect>
+                </div>
+                <NScrollbar
+                    class="identity-subject-list panel-scroll directory-scroll"
+                    content-class="directory-list-content identity-subject-list-content"
+                    x-scrollable
+                >
+                    <DirectoryItem
                         v-for="item in filtered"
                         :key="item.id"
                         :aria-pressed="selectedId === item.id"
+                        :active="selectedId === item.id"
                         @click="select(item.id)"
                         class="identity-subject-item"
-                        :class="{ selected: selectedId === item.id }"
-                        ><span class="block font-medium">{{ item.name }}</span
-                        ><span class="mt-1 block text-[11px] text-muted"
-                            >{{ item.ref }} · {{ item.forms.length }} 个形态<span
+                        >{{ item.name }}
+                        <template #eyebrow>{{ item.ref }}</template>
+                        <template #meta>
+                            <span>{{ item.forms.length }} 个形态</span
+                            ><span
                                 v-if="casting?.items.find(row => row.subjectId === item.id)"
+                                class="directory-status"
                             >
-                                ·
                                 {{
                                     castingStatusLabel(casting.items.find(row => row.subjectId === item.id)!.status)
                                 }}</span
-                            ></span
-                        ></NButton
+                            >
+                        </template></DirectoryItem
                     >
                     <p v-if="!filtered.length" class="py-6 text-xs text-muted">没有匹配主体，请调整筛选。</p>
                 </NScrollbar>
-                <NButton
-                    :disabled="catalog.loading.value || castingQuery.loading.value"
-                    @click="refreshDirectory"
-                    text
-                    size="small"
-                    class="mt-4"
-                >
-                    刷新主体目录
-                </NButton>
             </aside>
             <NScrollbar class="identity-detail panel-scroll min-w-0">
                 <NAlert v-if="pendingSelection" type="info" :show-icon="false" class="mb-4"