feat(ui): refine fleet search/filter toolbar with status chips

Adopt Portainer/Beszel-style fleet controls: prominent search, status
facet chips with counts, active filter chips, result count, and
primary-row sort/select. Keep advanced filters collapsed for secondary
facets. Tests and production dist rebuild for gateway 8788.

apps/web/src/fleet/fleet-page.test.tsx

@@ -53,6 +53,30 @@ describe('FleetPage card navigation', () => {
   });
 });
 
+describe('FleetPage search and filter toolbar', () => {
+  it('filters by status chips and clears active search conditions', () => {
+    render(<FleetPage initialData={snapshot} />);
+
+    const search = screen.getByRole('search', { name: '实例搜索与筛选' });
+    expect(within(search).getByPlaceholderText('搜索名称、ID、标签、源地址…')).toBeTruthy();
+    expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*1\s*\/\s*1/);
+
+    fireEvent.click(within(search).getByRole('button', { name: /离线/ }));
+    expect(screen.queryByRole('article', { name: 'Alpha modem 实例概览' })).toBeNull();
+    expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*0\s*\/\s*1/);
+    expect(within(search).getByRole('button', { name: /移除筛选 状态：离线/ })).toBeTruthy();
+
+    fireEvent.change(within(search).getByPlaceholderText('搜索名称、ID、标签、源地址…'), {
+      target: { value: 'Alpha' },
+    });
+    expect(within(search).getByRole('button', { name: /移除筛选 搜索：Alpha/ })).toBeTruthy();
+
+    fireEvent.click(within(search).getByRole('button', { name: '清除全部筛选' }));
+    expect(screen.getByRole('article', { name: 'Alpha modem 实例概览' })).toBeTruthy();
+    expect(within(search).getByText(/显示/).textContent).toMatch(/显示\s*1\s*\/\s*1/);
+  });
+});
+
 describe('FleetPage batch and restart actions', () => {
   it('exposes card restart controls and batch restart entry for selected instances', async () => {
     const prepare = vi.fn(async () => ({

apps/web/src/fleet/fleet-page.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   buildFleetTableViewModel,
+  fleetStatusKind,
   type FleetAuthFilter,
   type FleetFilter,
   type FleetInstance,
@@ -252,6 +253,98 @@ export function FleetPage({
     };
   }, [snapshot]);
 
+  const statusFacetCounts = useMemo(() => {
+    const counts: Record<FleetFilter, number> = {
+      all: snapshot?.instances.length ?? 0,
+      online: 0,
+      auth: 0,
+      offline: 0,
+      unknown: 0,
+    };
+    for (const instance of snapshot?.instances ?? []) {
+      const kind = fleetStatusKind(snapshot?.statuses.get(instance.id));
+      counts[kind] += 1;
+    }
+    return counts;
+  }, [snapshot]);
+
+  const activeFilterChips = useMemo(() => {
+    const chips: Array<{ key: string; label: string; onClear: () => void }> = [];
+    const trimmedQuery = query.trim();
+    if (trimmedQuery) {
+      chips.push({
+        key: 'query',
+        label: `搜索：${trimmedQuery}`,
+        onClear: () => {
+          setQuery('');
+          setPage(1);
+        },
+      });
+    }
+    if (filter !== 'all') {
+      chips.push({
+        key: 'status',
+        label: `状态：${STATUS_LABELS[filter] ?? filter}`,
+        onClear: () => {
+          setFilter('all');
+          setPage(1);
+        },
+      });
+    }
+    if (auth !== 'all') {
+      const authLabel =
+        auth === 'authenticated' ? '已认证' : auth === 'required' ? '需要认证' : '未知';
+      chips.push({
+        key: 'auth',
+        label: `认证：${authLabel}`,
+        onClear: () => {
+          setAuth('all');
+          setPage(1);
+        },
+      });
+    }
+    if (capability) {
+      chips.push({
+        key: 'capability',
+        label: `能力：${capabilityLabel(capability)}`,
+        onClear: () => {
+          setCapability('');
+          setPage(1);
+        },
+      });
+    }
+    if (version) {
+      chips.push({
+        key: 'version',
+        label: `版本：${version}`,
+        onClear: () => {
+          setVersion('');
+          setPage(1);
+        },
+      });
+    }
+    if (tag) {
+      chips.push({
+        key: 'tag',
+        label: `标签：${tag}`,
+        onClear: () => {
+          setTag('');
+          setPage(1);
+        },
+      });
+    }
+    return chips;
+  }, [auth, capability, filter, query, tag, version]);
+
+  const advancedFilterCount = useMemo(
+    () =>
+      (auth !== 'all' ? 1 : 0) +
+      (capability ? 1 : 0) +
+      (version ? 1 : 0) +
+      (tag ? 1 : 0),
+    [auth, capability, tag, version],
+  );
+
   useEffect(() => {
     if (page !== model.page) setPage(model.page);
   }, [model.page, page]);
@@ -260,6 +353,16 @@ export function FleetPage({
     action();
     setPage(1);
   }
+
+  function clearAllFilters(): void {
+    setQuery('');
+    setFilter('all');
+    setAuth('all');
+    setCapability('');
+    setVersion('');
+    setTag('');
+    setPage(1);
+  }
   function toggleOne(id: string, checked: boolean): void {
     setSelectedIds((current) => {
       const next = new Set(current);
@@ -562,35 +665,130 @@ export function FleetPage({
           ) : null}
         </div>
       ) : null}
-      <div className="fleet-toolbar">
+      <div className="fleet-toolbar" role="search" aria-label="实例搜索与筛选">
-        <div className="fleet-toolbar-primary">
+        <div className="fleet-search-row">
-          <label>
+          <label className="fleet-search-field">
-            <span>搜索实例</span>
+            <span className="visually-hidden">搜索实例</span>
+            <span className="fleet-search-glyph" aria-hidden="true">
+              ⌕
+            </span>
             <input
               type="search"
               value={query}
               onChange={(event) => resetPage(() => setQuery(event.currentTarget.value))}
-              placeholder="名称、ID、标签、源地址…"
+              placeholder="搜索名称、ID、标签、源地址…"
+              autoComplete="off"
+              spellCheck={false}
             />
-          </label>
+            {query ? (
-          <label>
+              <button
-            <span>状态</span>
+                type="button"
-            <select
+                className="fleet-search-clear"
-              value={filter}
+                aria-label="清除搜索"
-              onChange={(event) =>
+                onClick={() => resetPage(() => setQuery(''))}
-                resetPage(() => setFilter(event.currentTarget.value as FleetFilter))
+              >
-              }
+                清除
-            >
+              </button>
-              <option value="all">全部状态</option>
+            ) : null}
-              <option value="online">在线</option>
-              <option value="auth">需要认证</option>
-              <option value="offline">离线</option>
-              <option value="unknown">未知</option>
-            </select>
           </label>
         </div>
+        <div className="fleet-status-chips" role="group" aria-label="按状态筛选">
+          {(
+            [
+              ['all', '全部'],
+              ['online', '在线'],
+              ['auth', '需认证'],
+              ['offline', '离线'],
+              ['unknown', '未知'],
+            ] as const
+          ).map(([value, label]) => (
+            <button
+              key={value}
+              type="button"
+              className={`fleet-status-chip${filter === value ? ' is-active' : ''}`}
+              aria-pressed={filter === value}
+              onClick={() => resetPage(() => setFilter(value))}
+            >
+              <span>{label}</span>
+              <strong>{statusFacetCounts[value]}</strong>
+            </button>
+          ))}
+        </div>
+        <div className="fleet-toolbar-meta">
+          <p className="fleet-result-count" aria-live="polite">
+            显示 <strong>{model.filteredCount}</strong> / {model.totalCount}
+            {model.pageCount > 1 ? ` · 第 ${model.page}/${model.pageCount} 页` : null}
+          </p>
+          <div className="fleet-toolbar-controls">
+            <label className="fleet-sort-field">
+              <span className="visually-hidden">排序</span>
+              <select
+                aria-label="排序"
+                value={`${sort.column}:${sort.direction}`}
+                onChange={(event) => {
+                  const [column, direction] = event.currentTarget.value.split(':') as [
+                    FleetSortColumn,
+                    SortDirection,
+                  ];
+                  resetPage(() => setSort({ column, direction }));
+                }}
+              >
+                {(Object.keys(SORT_COLUMN_LABELS) as FleetSortColumn[]).flatMap((column) => [
+                  <option key={`${column}:asc`} value={`${column}:asc`}>
+                    {SORT_COLUMN_LABELS[column]} · 升序
+                  </option>,
+                  <option key={`${column}:desc`} value={`${column}:desc`}>
+                    {SORT_COLUMN_LABELS[column]} · 降序
+                  </option>,
+                ])}
+              </select>
+            </label>
+            <div className="fleet-select-all" role="group" aria-label="本页选择">
+              <button
+                type="button"
+                onClick={() => toggleVisible(true)}
+                disabled={model.rows.length === 0}
+              >
+                全选本页
+              </button>
+              <button
+                type="button"
+                onClick={() => toggleVisible(false)}
+                disabled={model.selectedIds.length === 0}
+              >
+                清空选择
+              </button>
+            </div>
+          </div>
+        </div>
+        {activeFilterChips.length > 0 ? (
+          <div className="fleet-active-filters" aria-label="当前筛选条件">
+            {activeFilterChips.map((chip) => (
+              <button
+                key={chip.key}
+                type="button"
+                className="fleet-active-chip"
+                onClick={chip.onClear}
+                aria-label={`移除筛选 ${chip.label}`}
+              >
+                <span>{chip.label}</span>
+                <span aria-hidden="true">×</span>
+              </button>
+            ))}
+            <button type="button" className="fleet-clear-filters" onClick={clearAllFilters}>
+              清除全部筛选
+            </button>
+          </div>
+        ) : null}
         <details className="fleet-advanced-filters">
-          <summary>更多筛选</summary>
+          <summary>
+            更多筛选
+            {advancedFilterCount > 0 ? (
+              <span className="fleet-advanced-count" aria-label={`已启用 ${advancedFilterCount} 项`}>
+                {advancedFilterCount}
+              </span>
+            ) : null}
+          </summary>
           <div className="fleet-advanced-filter-grid">
             <label>
               <span>认证</span>
@@ -616,45 +814,6 @@ export function FleetPage({
             )}
             {selectFilter('版本', version, setVersion, model.facets.versions, '全部版本')}
             {selectFilter('标签', tag, setTag, model.facets.tags, '全部标签')}
-            <label>
-              <span>排序</span>
-              <select
-                aria-label="排序"
-                value={`${sort.column}:${sort.direction}`}
-                onChange={(event) => {
-                  const [column, direction] = event.currentTarget.value.split(':') as [
-                    FleetSortColumn,
-                    SortDirection,
-                  ];
-                  resetPage(() => setSort({ column, direction }));
-                }}
-              >
-                {(Object.keys(SORT_COLUMN_LABELS) as FleetSortColumn[]).flatMap((column) => [
-                  <option key={`${column}:asc`} value={`${column}:asc`}>
-                    {SORT_COLUMN_LABELS[column]} · 升序
-                  </option>,
-                  <option key={`${column}:desc`} value={`${column}:desc`}>
-                    {SORT_COLUMN_LABELS[column]} · 降序
-                  </option>,
-                ])}
-              </select>
-            </label>
-            <div className="fleet-select-all">
-              <button
-                type="button"
-                onClick={() => toggleVisible(true)}
-                disabled={model.rows.length === 0}
-              >
-                全选本页
-              </button>
-              <button
-                type="button"
-                onClick={() => toggleVisible(false)}
-                disabled={model.selectedIds.length === 0}
-              >
-                清空选择
-              </button>
-            </div>
           </div>
         </details>
       </div>

apps/web/src/styles.css

@@ -585,35 +585,216 @@ small {
   min-width: min(100%, 15rem);
 }
 .fleet-toolbar {
-  display: block;
-}
-.fleet-toolbar-primary {
   display: grid;
-  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 12rem);
+  gap: 0.75rem;
-  align-items: end;
+  padding: 0.9rem 1rem 1rem;
-  gap: 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, #fff);
+  box-shadow: 0 8px 24px rgba(121, 79, 39, 0.06);
+  background:
+    linear-gradient(180deg, rgba(255, 253, 245, 0.96), rgba(247, 243, 223, 0.92));
 }
-.fleet-toolbar-primary label:first-child {
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.fleet-search-row {
   min-width: 0;
 }
+.fleet-search-field {
+  position: relative;
+  display: block;
+  min-width: 0;
+  width: 100%;
+}
+.fleet-search-field input[type='search'] {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.65rem 4.5rem 0.65rem 2.6rem;
+  border-radius: 999px;
+  border: 2px solid color-mix(in srgb, var(--border) 70%, #b7a88a);
+  background: #fffdf8;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  transition:
+    border-color 140ms var(--ease-out),
+    box-shadow 140ms var(--ease-out);
+}
+.fleet-search-field input[type='search']::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.fleet-search-field input[type='search']:focus {
+  border-color: color-mix(in srgb, var(--mint) 55%, #b7a88a);
+  box-shadow:
+    0 0 0 4px rgba(25, 200, 185, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+.fleet-search-glyph {
+  position: absolute;
+  left: 0.95rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--muted);
+  font-size: 1.05rem;
+  font-weight: 700;
+  pointer-events: none;
+}
+.fleet-search-clear {
+  position: absolute;
+  right: 0.4rem;
+  top: 50%;
+  transform: translateY(-50%);
+  min-height: 2.15rem;
+  padding: 0.25rem 0.75rem;
+  border-width: 1px;
+  border-color: transparent;
+  background: rgba(121, 79, 39, 0.08);
+  color: var(--brown);
+  font-size: 0.82rem;
+}
+.fleet-status-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+.fleet-status-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.35rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border) 80%, #fff);
+  background: rgba(255, 253, 245, 0.9);
+  color: var(--brown);
+  font-weight: 700;
+  transition:
+    transform 120ms var(--ease-out),
+    background 140ms var(--ease-out),
+    border-color 140ms var(--ease-out),
+    box-shadow 140ms var(--ease-out);
+}
+.fleet-status-chip strong {
+  min-width: 1.25rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: rgba(121, 79, 39, 0.08);
+  font-variant-numeric: tabular-nums;
+  font-size: 0.8rem;
+}
+.fleet-status-chip:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--mint) 40%, var(--border));
+}
+.fleet-status-chip.is-active {
+  color: #0c5f59;
+  border-color: color-mix(in srgb, var(--mint) 55%, #9fd9d1);
+  background:
+    linear-gradient(180deg, rgba(232, 250, 246, 0.98), rgba(214, 244, 238, 0.95));
+  box-shadow: 0 6px 16px rgba(25, 200, 185, 0.16);
+}
+.fleet-status-chip.is-active strong {
+  background: rgba(25, 200, 185, 0.18);
+  color: #0c5f59;
+}
+.fleet-toolbar-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.fleet-result-count {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+.fleet-result-count strong {
+  color: var(--brown);
+  font-variant-numeric: tabular-nums;
+}
+.fleet-toolbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+.fleet-sort-field {
+  min-width: 10rem;
+}
+.fleet-sort-field select {
+  min-width: 11rem;
+  width: 100%;
+}
+.fleet-active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.45rem;
+}
+.fleet-active-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-height: 2rem;
+  padding: 0.2rem 0.65rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--mint) 35%, var(--border));
+  background: rgba(25, 200, 185, 0.1);
+  color: #0f6f68;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.fleet-clear-filters {
+  min-height: 2rem;
+  padding: 0.2rem 0.7rem;
+  border-width: 1px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--brown);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  font-size: 0.82rem;
+}
 .fleet-advanced-filters {
-  margin-top: 0.65rem;
+  margin-top: 0.1rem;
 }
 .fleet-advanced-filters > summary {
   width: fit-content;
-  min-height: 2.75rem;
+  min-height: 2.35rem;
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  gap: 0.45rem;
   color: var(--brown);
   font-weight: 800;
   cursor: pointer;
+  list-style: none;
+}
+.fleet-advanced-filters > summary::-webkit-details-marker {
+  display: none;
+}
+.fleet-advanced-count {
+  min-width: 1.25rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  background: rgba(25, 200, 185, 0.16);
+  color: #0c5f59;
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
 }
 .fleet-advanced-filter-grid {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
   align-items: end;
   gap: 0.65rem;
-  flex-wrap: wrap;
+  padding-top: 0.75rem;
-  padding-top: 0.65rem;
 }
 .column-picker {
   position: relative;
@@ -1216,16 +1397,35 @@ main ul[aria-label='已配置实例'] {
   }
   .fleet-toolbar {
     margin: 0.55rem 0;
-    padding: 0.65rem;
+    padding: 0.7rem;
+    gap: 0.65rem;
   }
-  .fleet-toolbar-primary {
+  .fleet-search-field input[type='search'] {
-    grid-template-columns: minmax(0, 1fr) 7.5rem;
+    min-height: 2.85rem;
+    padding-right: 4.1rem;
   }
-  .fleet-toolbar-primary label {
+  .fleet-status-chips {
-    min-width: 0;
+    gap: 0.35rem;
   }
-  .fleet-toolbar-primary span {
+  .fleet-status-chip {
-    font-size: 0.75rem;
+    min-height: 2.15rem;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.82rem;
+  }
+  .fleet-toolbar-meta {
+    align-items: stretch;
+  }
+  .fleet-toolbar-controls,
+  .fleet-sort-field,
+  .fleet-select-all {
+    width: 100%;
+  }
+  .fleet-sort-field select {
+    width: 100%;
+  }
+  .fleet-select-all {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
   .fleet-advanced-filters > summary {
     min-height: 2.25rem;
@@ -1424,13 +1624,15 @@ main ul[aria-label='已配置实例'] {
 }
 
 .fleet-select-all {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.4rem;
-  align-items: end;
+  align-items: center;
 }
 .fleet-select-all button {
-  min-height: 2.5rem;
+  min-height: 2.35rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.86rem;
 }
 .fleet-card-section + .pagination {
   margin-top: 1rem;