style: 统一主体列表搜索与统计布局

src/admin.css

@@ -1340,15 +1340,25 @@ body {
 .casting-item-status {
     flex-shrink: 0;
 }
-.search-field {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    min-width: 180px;
+/* 主体搜索靠左，统计紧随输入框；窄内容区自然换行，不占满整行或挤压控件。 */
+.subject-list-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px 12px;
+    margin-bottom: 20px;
 }
-.search-field input {
-    width: 100%;
-    font-size: inherit;
+.subject-list-search.n-input {
+    flex: 0 1 260px;
+    min-width: 0;
+    max-width: 100%;
+}
+.subject-list-count {
+    flex-shrink: 0;
+    color: var(--app-muted);
+    font-size: 12px;
+    white-space: nowrap;
 }
 .select-control {
     min-width: 130px;

src/features/breakdown/BreakdownPage.test.ts

@@ -146,9 +146,36 @@ describe('拆解页内容滚动', () => {
         const list = wrapper!.get('.subject-record-list')
         expect(list.classes()).toContain('record-list')
         expect(list.findAll(':scope > article')).toHaveLength(30)
-        await wrapper!.get('input[aria-label="搜索主体"]').setValue('主体 30')
+        const toolbar = wrapper!.get('.subject-list-toolbar')
+        expect(toolbar.element.firstElementChild).toBe(toolbar.get('.subject-list-search').element)
+        expect(toolbar.element.lastElementChild).toBe(toolbar.get('.subject-list-count').element)
+        expect(toolbar.get('.n-input__prefix svg').attributes('aria-hidden')).toBe('true')
+        expect(toolbar.find(':scope > svg').exists()).toBe(false)
+        expect(toolbar.get('[role="status"]').text()).toBe('共 30 个主体')
+        const input = toolbar.get('input[aria-label="搜索主体"]')
+        await input.setValue('主体 30')
         expect(list.findAll(':scope > article')).toHaveLength(1)
         expect(list.get(':scope > article h3').text()).toContain('主体 30')
+        expect(toolbar.get('[role="status"]').text()).toBe('匹配 1 / 30 个主体')
+        await input.setValue('不存在的主体')
+        expect(toolbar.get('[role="status"]').text()).toBe('匹配 0 / 30 个主体')
+        expect(wrapper!.text()).toContain('没有匹配的主体')
+        await input.setValue('')
+        expect(toolbar.get('[role="status"]').text()).toBe('共 30 个主体')
+        expect(wrapper!.findAll('.subject-record-list > article')).toHaveLength(30)
+    })
+
+    it('主体搜索与统计靠左居中，窄内容区可换行，输入框不再使用外置图标容器', () => {
+        // DOM 环境不计算布局，保护输入框宽度、主题统计色与窄屏换行的样式契约。
+        const css = readFileSync('src/admin.css', 'utf8')
+        expect(css).toMatch(
+            /\.subject-list-toolbar\s*\{[^}]*display:\s*flex;[^}]*flex-wrap:\s*wrap;[^}]*align-items:\s*center;[^}]*justify-content:\s*flex-start;/
+        )
+        expect(css).toMatch(
+            /\.subject-list-search\.n-input\s*\{[^}]*flex:\s*0 1 260px;[^}]*min-width:\s*0;[^}]*max-width:\s*100%;/
+        )
+        expect(css).toMatch(/\.subject-list-count\s*\{[^}]*color:\s*var\(--app-muted\);/)
+        expect(css + readFileSync('src/styles.css', 'utf8')).not.toContain('.search-field')
     })
 
     it('只为主体斑马纹空白行添加主题化悬停底色，不覆盖已有条纹和操作状态', () => {

src/features/breakdown/components/SubjectList.vue

@@ -19,16 +19,20 @@ const filtered = computed(() =>
 
 <template>
     <div class="p-5 lg:p-7">
-        <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" /><NInput
-                    placeholder="搜索名称或引用"
-                    aria-label="搜索主体"
-                    :input-props="{ 'aria-label': '搜索主体' }"
-                    v-model:value="search"
-                ></NInput>
-            </div>
+        <div class="subject-list-toolbar">
+            <NInput
+                class="subject-list-search"
+                placeholder="搜索名称或引用"
+                aria-label="搜索主体"
+                :input-props="{ 'aria-label': '搜索主体' }"
+                v-model:value="search"
+                clearable
+                ><template #prefix><Search :size="14" aria-hidden="true" /></template
+            ></NInput>
+            <p class="subject-list-count" role="status">
+                <template v-if="search.trim()">匹配 {{ filtered.length }} / {{ subjects.length }} 个主体</template>
+                <template v-else>共 {{ subjects.length }} 个主体</template>
+            </p>
         </div>
         <div v-if="filtered.length" class="record-list subject-record-list">
             <article v-for="subject in filtered" :key="subject.profileId">

src/styles.css

@@ -216,27 +216,6 @@
         }
     }
 
-    .search-field {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        background: var(--app-surface);
-        border-radius: 0;
-        padding: 7px 10px;
-        color: var(--color-muted);
-    }
-    .search-field input {
-        background: transparent;
-        border: none;
-        outline: none;
-        font-size: 11px;
-        width: 145px;
-        color: var(--color-ink);
-    }
-    .search-field:has(> input):focus-within {
-        outline: 2px solid var(--color-accent);
-        outline-offset: 2px;
-    }
     .table-scroll {
         overflow: hidden;
     }