feat: 主体目录增加母版缩略图与紧凑图文布局

src/components/ui/DirectoryItem.test.ts

@@ -8,6 +8,17 @@ let wrapper: VueWrapper | undefined
 afterEach(() => wrapper?.unmount())
 
 describe('统一目录条目', () => {
+    it('主体缩略图使用可选前导槽位，与标题一起保留满行点击区域', () => {
+        wrapper = mount(DirectoryItem, {
+            props: { active: true },
+            slots: { leading: '<span>母版缩略图</span>', default: '林默', eyebrow: '@CH0001' }
+        })
+        expect(wrapper.classes()).toContain('has-leading')
+        expect(wrapper.get('.directory-item-leading').text()).toBe('母版缩略图')
+        expect(wrapper.get('.directory-item-title').text()).toBe('林默')
+        expect(wrapper.get('.directory-item-leading').element.closest('button')).toBe(wrapper.element)
+    })
+
     it('编号、长标题和多项状态各占独立层级，沿用 Naive 按钮', () => {
         const title = '雨夜霓虹街全景与记忆当铺外的人群和闪烁灯牌'
         wrapper = mount(DirectoryItem, {
@@ -48,6 +59,10 @@ describe('统一目录条目', () => {
         expect(css).toMatch(/\.directory-item-title\s*\{[^}]*overflow-wrap:\s*anywhere/)
         expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
         expect(css).toContain('grid-template-columns: clamp(240px, 22%, 280px) minmax(0, 1fr)')
+        expect(css).toMatch(/\.identity-subject-list-content\s*\{[^}]*gap:\s*0;[^}]*padding:\s*0 0 8px/)
+        expect(css).toMatch(/\.n-button\.identity-subject-item\s*\{[^}]*min-height:\s*86px;[^}]*border-bottom:/)
+        expect(css).toMatch(/\.identity-thumbnail\s*\{[^}]*width:\s*48px;[^}]*height:\s*64px/)
+        expect(css).toMatch(/\.n-button\.identity-subject-item:not\(\.selected\)\s*\{[^}]*var\(--app-surface\)/)
     })
 
     it('侧栏与主体、镜头、剧集目录统一直角满行，保留文字内边距和移动端滚动', () => {

src/components/ui/DirectoryItem.vue

@@ -10,9 +10,10 @@ defineProps<{ active: boolean }>()
         quaternary
         block
         class="directory-item"
-        :class="{ selected: active }"
+        :class="{ selected: active, 'has-leading': !!$slots.leading }"
         :aria-current="active ? 'true' : undefined"
     >
+        <span v-if="$slots.leading" class="directory-item-leading"><slot name="leading" /></span>
         <span class="directory-item-body">
             <span v-if="$slots.eyebrow" class="directory-item-eyebrow"><slot name="eyebrow" /></span>
             <span class="directory-item-title"><slot /></span>