feat(web): make instance overview card-first

apps/web/src/app-shell.integration.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { cleanup, render, screen, within } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
@@ -7,6 +7,7 @@ import { AppShell, type InstanceContext } from './app-shell.js';
 import type { AuditDataSource } from './audit/audit-page.js';
 import type { EventStreamClient } from './events/event-stream-client.js';
 import { type FleetDataSource, type FleetSnapshot } from './fleet/fleet-page.js';
+import type { InstanceDataSource } from './instances/instance-api-data-source.js';
 import type { JobsDataSource } from './jobs/jobs-page.js';
 
 afterEach(() => {
@@ -91,6 +92,82 @@ describe('React AppShell and Fleet vertical slice', () => {
     ).toBe(false);
   });
 
+  it('makes cards, add, detail, edit, and safe deletion available from the overview', async () => {
+    const user = userEvent.setup();
+    const remove = vi.fn<InstanceDataSource['delete']>().mockResolvedValue(undefined);
+    const instanceDataSource: InstanceDataSource = {
+      get: vi.fn().mockResolvedValue({
+        id: 'bravo',
+        name: 'Bravo',
+        origin: 'http://bravo.example:8080',
+        tags: ['west'],
+        revision: 7,
+        credentialConfigured: true,
+      }),
+      create: vi.fn(),
+      update: vi.fn(),
+      testConnection: vi.fn(),
+      delete: remove,
+    };
+
+    render(
+      <AppShell
+        pathname="/fleet"
+        fleetDataSource={source(async () => snapshot)}
+        instanceDataSource={instanceDataSource}
+      />,
+    );
+
+    expect(await screen.findByRole('region', { name: '实例卡片' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: '添加实例' }).getAttribute('href')).toBe(
+      '/instances/new',
+    );
+    const card = screen.getByRole('article', { name: 'Bravo 实例概览' });
+    expect(within(card).getByText('40 ms')).toBeTruthy();
+    expect(within(card).getByText('2.0')).toBeTruthy();
+    expect(within(card).getByRole('link', { name: '管理 Bravo' }).getAttribute('href')).toBe(
+      '/instances/bravo/overview',
+    );
+    expect(within(card).getByRole('link', { name: '编辑 Bravo' }).getAttribute('href')).toBe(
+      '/settings/instances/bravo',
+    );
+
+    await user.click(within(card).getByRole('button', { name: '删除 Bravo' }));
+    expect(within(card).getByText('删除后无法撤销。')).toBeTruthy();
+    await user.type(within(card).getByRole('textbox', { name: '输入 bravo 以确认删除' }), 'bravo');
+    await user.click(within(card).getByRole('button', { name: '确认删除 Bravo' }));
+    expect(remove).toHaveBeenCalledWith('bravo', 7);
+    expect(within(card).getByRole('status').textContent).toContain('删除请求已提交');
+  });
+
+  it('loads route-owned instance context so overview-card navigation opens detail management', async () => {
+    const instanceDataSource: InstanceDataSource = {
+      get: vi.fn().mockResolvedValue({
+        id: 'bravo',
+        name: 'Bravo',
+        origin: 'http://bravo.example:8080',
+        tags: ['west'],
+        revision: 7,
+        credentialConfigured: true,
+      }),
+      create: vi.fn(),
+      update: vi.fn(),
+      testConnection: vi.fn(),
+      delete: vi.fn(),
+    };
+
+    render(
+      <AppShell pathname="/instances/bravo/overview" instanceDataSource={instanceDataSource} />,
+    );
+
+    expect(screen.getByRole('status').textContent).toContain('正在加载实例');
+    expect(await screen.findByText('Bravo')).toBeTruthy();
+    expect(screen.getByRole('heading', { name: '概览' })).toBeTruthy();
+    expect(screen.getByRole('link', { name: '编辑实例' }).getAttribute('href')).toBe(
+      '/settings/instances/bravo',
+    );
+  });
+
   it('supports accessible search, status filtering, sorting, and visible selection', async () => {
     const user = userEvent.setup();
     render(<AppShell pathname="/fleet" fleetDataSource={source(async () => snapshot)} />);
@@ -164,7 +241,6 @@ describe('React AppShell and Fleet vertical slice', () => {
   });
 
   it('paginates fleet rows and selects only the current page', async () => {
-    const user = userEvent.setup();
     const many: FleetSnapshot = {
       instances: Array.from({ length: 11 }, (_, index) => ({
         id: `instance-${String(index + 1).padStart(2, '0')}`,
@@ -178,9 +254,9 @@ describe('React AppShell and Fleet vertical slice', () => {
 
     expect(screen.queryByRole('row', { name: /Instance 11/ })).toBeNull();
     expect(screen.getByText('第 1 页，共 2 页')).toBeTruthy();
-    await user.click(screen.getByRole('checkbox', { name: '选择当前页全部实例' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: '选择当前页全部实例' }));
     expect(screen.getByText('已选择 10 项')).toBeTruthy();
-    await user.click(screen.getByRole('button', { name: '下一页' }));
+    fireEvent.click(screen.getByRole('button', { name: '下一页' }));
     expect(await screen.findByRole('row', { name: /Instance 11/ })).toBeTruthy();
     expect(screen.getByText('第 2 页，共 2 页')).toBeTruthy();
   });
@@ -205,7 +281,7 @@ describe('React AppShell and Fleet vertical slice', () => {
 
     rerender(<AppShell pathname="/instances/someone-else/messages" instance={instance} />);
     expect(screen.queryByText('Owner modem')).toBeNull();
-    expect(screen.getByText(/此路由缺少实例上下文/i)).toBeTruthy();
+    expect(screen.getByRole('status').textContent).toContain('正在加载实例');
   });
 
   it.each([

apps/web/src/app-shell.tsx

@@ -1,7 +1,7 @@
 import { AuditPage, type AuditDataSource } from './audit/audit-page.js';
 import { createAuditApiDataSource } from './audit/audit-api-data-source.js';
 import type { ReactNode } from 'react';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useControlPlaneEvents } from './events/use-control-plane-events.js';
 import { createEventStreamClient, type EventStreamClient } from './events/event-stream-client.js';
@@ -18,6 +18,7 @@ import {
 import { EsimModule, type EsimDataSource } from './instances/esim-module.js';
 import { OverviewSystemPage, type OverviewDataSource } from './instances/overview-system.js';
 import { InstanceEditor, type InstanceDataSource } from './instances/instance-crud.js';
+import { createInstanceApiDataSource } from './instances/instance-api-data-source.js';
 import { JobsPage, type JobsDataSource } from './jobs/jobs-page.js';
 import { createJobsApiDataSource } from './jobs/jobs-api-data-source.js';
 import { MessagesModule, type MessagesDataSource } from './instances/messages-module.js';
@@ -198,6 +199,7 @@ function Page({
     return (
       <FleetPage
         {...(fleetDataSource ? { dataSource: fleetDataSource } : {})}
+        {...(instanceDataSource ? { instanceDataSource } : {})}
         {...(fleetData ? { initialData: fleetData } : {})}
         refreshSignal={fleetRefreshSignal}
       />
@@ -407,6 +409,7 @@ export function AppShell({
 }: AppShellProps) {
   const defaultEventStreamClient = useMemo(() => createEventStreamClient(), []);
   const defaultFleetDataSource = useMemo(() => createFleetApiDataSource(), []);
+  const defaultInstanceDataSource = useMemo(() => createInstanceApiDataSource(), []);
   const resolvedJobsDataSource = useMemo(
     () => jobsDataSource ?? createJobsApiDataSource(),
     [jobsDataSource],
@@ -418,6 +421,50 @@ export function AppShell({
   const resolved = resolveRoute(pathname);
   const route = resolved.kind === 'redirect' ? resolveRoute(resolved.to ?? '/fleet') : resolved;
   const routeInstanceId = route.params?.instanceId;
+  const resolvedInstanceDataSource = instanceDataSource ?? defaultInstanceDataSource;
+  const [loadedInstance, setLoadedInstance] = useState<InstanceContext>();
+  const [instanceLoading, setInstanceLoading] = useState(false);
+  const [instanceLoadFailed, setInstanceLoadFailed] = useState(false);
+
+  useEffect(() => {
+    setLoadedInstance(undefined);
+    setInstanceLoadFailed(false);
+    if (!routeInstanceId || instance?.id === routeInstanceId) {
+      setInstanceLoading(false);
+      return;
+    }
+    let active = true;
+    setInstanceLoading(true);
+    void resolvedInstanceDataSource.get(routeInstanceId).then(
+      (owner) => {
+        if (!active) return;
+        if (owner.id !== routeInstanceId) {
+          setInstanceLoadFailed(true);
+          setInstanceLoading(false);
+          return;
+        }
+        setLoadedInstance({
+          id: owner.id,
+          name: owner.name,
+          origin: owner.origin,
+          status: 'unknown',
+          authentication: 'unknown',
+          freshness: 'unknown',
+        });
+        setInstanceLoading(false);
+      },
+      () => {
+        if (!active) return;
+        setInstanceLoadFailed(true);
+        setInstanceLoading(false);
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [instance, resolvedInstanceDataSource, routeInstanceId]);
+
+  const routeInstance = instance?.id === routeInstanceId ? instance : loadedInstance;
   const refresh = useControlPlaneEvents(
     routeInstanceId,
     eventStreamClient ?? defaultEventStreamClient,
@@ -455,12 +502,19 @@ export function AppShell({
           </ul>
         </nav>
         <main id="main-content" tabIndex={-1}>
+          {routeInstanceId && instanceLoading ? (
+            <p role="status">正在加载实例…</p>
+          ) : routeInstanceId && instanceLoadFailed ? (
+            <p role="alert" className="state-panel state-error">
+              无法加载此实例，请返回总览后重试。
+            </p>
+          ) : (
             <Page
               route={route}
               fleetDataSource={fleetDataSource ?? defaultFleetDataSource}
               fleetData={fleetData}
-            instance={instance}
+              instance={routeInstance}
-            instanceDataSource={instanceDataSource}
+              instanceDataSource={resolvedInstanceDataSource}
               capabilities={capabilities}
               capabilityDataSource={capabilityDataSource}
               overviewDataSource={overviewDataSource}
@@ -477,6 +531,7 @@ export function AppShell({
               fleetRefreshSignal={refresh.fleet}
               detailRefreshSignal={refresh.detail}
             />
+          )}
         </main>
       </div>
     </div>

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

@@ -9,6 +9,7 @@ import {
   type FleetStatus,
   type SortDirection,
 } from './fleet-table-view-model.js';
+import type { InstanceDataSource } from '../instances/instance-crud.js';
 
 export interface FleetSnapshot {
   readonly instances: readonly FleetInstance[];
@@ -19,6 +20,7 @@ export interface FleetDataSource {
 }
 export interface FleetPageProps {
   readonly dataSource?: FleetDataSource;
+  readonly instanceDataSource?: InstanceDataSource;
   readonly initialData?: FleetSnapshot;
   readonly refreshSignal?: number;
 }
@@ -75,7 +77,12 @@ export function canonicalHttpOrigin(value: string): string | null {
   }
 }
 
-export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetPageProps) {
+export function FleetPage({
+  dataSource,
+  instanceDataSource,
+  initialData,
+  refreshSignal = 0,
+}: FleetPageProps) {
   const [snapshot, setSnapshot] = useState<FleetSnapshot | null>(initialData ?? null);
   const [error, setError] = useState<string | null>(null);
   const [attempt, setAttempt] = useState(0);
@@ -94,6 +101,13 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
   const [shownColumns, setShownColumns] = useState<ReadonlySet<string>>(new Set(ALL_COLUMNS));
   const [columnsOpen, setColumnsOpen] = useState(false);
   const [batchOpen, setBatchOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<string>();
+  const [deleteOwner, setDeleteOwner] = useState<Readonly<{ id: string; revision: number }>>();
+  const [deleteConfirmation, setDeleteConfirmation] = useState('');
+  const [deleteBusy, setDeleteBusy] = useState(false);
+  const deleteRequestRef = useRef(0);
+  const [deleteStatus, setDeleteStatus] =
+    useState<Readonly<{ id: string; kind: 'success' | 'error'; message: string }>>();
   const selectAllRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -184,6 +198,47 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
     });
   }
 
+  async function beginDelete(id: string): Promise<void> {
+    const request = ++deleteRequestRef.current;
+    setDeleteId(id);
+    setDeleteOwner(undefined);
+    setDeleteConfirmation('');
+    setDeleteStatus(undefined);
+    if (!instanceDataSource) {
+      setDeleteStatus({ id, kind: 'error', message: '无法准备删除，请稍后重试。' });
+      return;
+    }
+    setDeleteBusy(true);
+    try {
+      const current = await instanceDataSource.get(id);
+      if (request !== deleteRequestRef.current) return;
+      if (current.id !== id) throw new Error('owner mismatch');
+      setDeleteOwner({ id: current.id, revision: current.revision });
+    } catch {
+      if (request === deleteRequestRef.current) {
+        setDeleteStatus({ id, kind: 'error', message: '无法准备删除，请稍后重试。' });
+      }
+    } finally {
+      if (request === deleteRequestRef.current) setDeleteBusy(false);
+    }
+  }
+
+  async function remove(id: string): Promise<void> {
+    if (!instanceDataSource || deleteOwner?.id !== id || deleteConfirmation !== id) return;
+    setDeleteBusy(true);
+    setDeleteStatus(undefined);
+    try {
+      await instanceDataSource.delete(id, deleteOwner.revision);
+      setDeleteStatus({ id, kind: 'success', message: '删除请求已提交。' });
+      setDeleteId(undefined);
+      setDeleteConfirmation('');
+    } catch {
+      setDeleteStatus({ id, kind: 'error', message: '删除请求失败，请稍后重试。' });
+    } finally {
+      setDeleteBusy(false);
+    }
+  }
+
   const selectFilter = (
     label: string,
     value: string,
@@ -216,6 +271,9 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
           <p>查找、对比并管理所有 SimAdmin 实例。</p>
         </div>
         <div className="fleet-actions">
+          <a className="primary-action" href="/instances/new">
+            添加实例
+          </a>
           <span className="selection-summary" aria-live="polite">
             已选择 {model.selectedIds.length} 项
           </span>
@@ -234,6 +292,7 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
         </div>
       ) : null}
       <div className="fleet-toolbar">
+        <div className="fleet-toolbar-primary">
           <label>
             <span>搜索实例</span>
             <input
@@ -258,6 +317,10 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
               <option value="unknown">未知</option>
             </select>
           </label>
+        </div>
+        <details className="fleet-advanced-filters">
+          <summary>更多筛选与列设置</summary>
+          <div className="fleet-advanced-filter-grid">
             <label>
               <span>认证</span>
               <select
@@ -308,6 +371,8 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
               ) : null}
             </div>
           </div>
+        </details>
+      </div>
 
       {!snapshot && !error ? (
         <p role="status" aria-label="实例加载状态">
@@ -324,13 +389,137 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
       ) : null}
       {snapshot && model.emptyReason ? (
         <div className="state-panel">
-          {model.emptyReason === 'config' ? <p>尚未配置实例。</p> : null}
+          {model.emptyReason === 'config' ? (
+            <>
+              <p>尚未配置实例。</p>
+              <a className="primary-action" href="/instances/new">
+                添加实例
+              </a>
+            </>
+          ) : null}
           {model.emptyReason === 'search' ? <p>没有实例符合搜索与筛选条件。</p> : null}
           {model.emptyReason === 'filter' ? <p>没有实例符合当前筛选条件。</p> : null}
         </div>
       ) : null}
       {snapshot && model.rows.length > 0 ? (
         <>
+          <section className="fleet-card-section" aria-label="实例卡片">
+            <div className="fleet-card-grid">
+              {model.rows.map((row) => (
+                <article
+                  className="fleet-card"
+                  aria-label={`${row.displayName} 实例概览`}
+                  key={row.id}
+                >
+                  <header>
+                    <div>
+                      <h2>{row.displayName}</h2>
+                      <code>{row.id}</code>
+                    </div>
+                    <span className={`status status-${row.statusKind}`}>
+                      {STATUS_LABELS[row.statusKind]}
+                    </span>
+                  </header>
+                  <dl className="fleet-card-metrics">
+                    <div>
+                      <dt>延迟</dt>
+                      <dd>{row.latencyMs === undefined ? '—' : `${row.latencyMs} ms`}</dd>
+                    </div>
+                    <div>
+                      <dt>版本</dt>
+                      <dd>{row.version ?? '—'}</dd>
+                    </div>
+                    <div>
+                      <dt>新鲜度</dt>
+                      <dd>{FRESHNESS_LABELS[row.freshness] ?? row.freshness}</dd>
+                    </div>
+                  </dl>
+                  <div className="capability-tags" aria-label="能力">
+                    {row.capabilities.length > 0 ? (
+                      row.capabilities.map((item) => (
+                        <span key={item}>{capabilityLabel(item)}</span>
+                      ))
+                    ) : (
+                      <span>能力未知</span>
+                    )}
+                  </div>
+                  <div className="fleet-card-actions">
+                    <a
+                      href={`/instances/${encodeURIComponent(row.id)}/overview`}
+                      aria-label={`管理 ${row.displayName}`}
+                    >
+                      管理
+                    </a>
+                    <a
+                      href={`/settings/instances/${encodeURIComponent(row.id)}`}
+                      aria-label={`编辑 ${row.displayName}`}
+                    >
+                      编辑
+                    </a>
+                    <button
+                      type="button"
+                      className="danger-button"
+                      aria-label={`删除 ${row.displayName}`}
+                      onClick={() => void beginDelete(row.id)}
+                    >
+                      删除
+                    </button>
+                  </div>
+                  {deleteId === row.id ? (
+                    <div className="card-delete-confirmation">
+                      <p>删除后无法撤销。</p>
+                      <label>
+                        输入 {row.id} 以确认删除
+                        <input
+                          value={deleteConfirmation}
+                          onChange={(event) => setDeleteConfirmation(event.currentTarget.value)}
+                        />
+                      </label>
+                      <div className="fleet-card-actions">
+                        <button
+                          type="button"
+                          className="danger-button"
+                          disabled={
+                            deleteBusy ||
+                            deleteOwner?.id !== row.id ||
+                            deleteConfirmation !== row.id
+                          }
+                          aria-label={`确认删除 ${row.displayName}`}
+                          onClick={() => void remove(row.id)}
+                        >
+                          确认删除
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setDeleteId(undefined);
+                            setDeleteConfirmation('');
+                            setDeleteStatus(undefined);
+                          }}
+                        >
+                          取消
+                        </button>
+                      </div>
+                    </div>
+                  ) : null}
+                  {deleteStatus?.id === row.id ? (
+                    <p
+                      role={deleteStatus.kind === 'error' ? 'alert' : 'status'}
+                      className={
+                        deleteStatus.kind === 'error'
+                          ? 'card-operation-error'
+                          : 'card-operation-success'
+                      }
+                    >
+                      {deleteStatus.message}
+                    </p>
+                  ) : null}
+                </article>
+              ))}
+            </div>
+          </section>
+          <section className="fleet-details" aria-labelledby="fleet-details-title">
+            <h2 id="fleet-details-title">高级详细列表</h2>
             <div className="table-scroll" tabIndex={0}>
               <table className="dense-table">
                 <caption>实例列表</caption>
@@ -460,6 +649,7 @@ export function FleetPage({ dataSource, initialData, refreshSignal = 0 }: FleetP
                 下一页
               </button>
             </nav>
+          </section>
         </>
       ) : null}
     </section>

apps/web/src/instances/instance-detail.tsx

@@ -145,6 +145,7 @@ export function InstanceDetail({
             打开源站
           </a>
         ) : null}
+        <a href={`/settings/instances/${encodeURIComponent(instanceId)}`}>编辑实例</a>
         <nav aria-label="实例模块">
           <ul>
             {MODULES.map((item) => {

apps/web/src/styles.css

@@ -262,6 +262,114 @@ main > section > header p {
 small {
   color: var(--muted);
 }
+.primary-action {
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--mint-dark);
+  border-radius: 999px;
+  color: #fff;
+  background: var(--mint);
+  box-shadow: 0 5px 0 var(--mint-dark);
+  font-weight: 800;
+  text-decoration: none;
+}
+.fleet-card-section {
+  margin: 1rem 0 1.5rem;
+}
+.fleet-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+  gap: 1rem;
+}
+.fleet-card {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-raised);
+  box-shadow: 0 7px 18px rgba(121, 79, 39, 0.09);
+}
+.fleet-card > header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.fleet-card h2 {
+  margin: 0 0 0.2rem;
+  font-size: 1.15rem;
+}
+.fleet-card code {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+.fleet-card-metrics {
+  margin: 1rem 0;
+}
+.fleet-card-metrics div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.35rem 0;
+  border-bottom: 1px dashed var(--border);
+}
+.capability-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-bottom: 1rem;
+}
+.capability-tags span {
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  color: #187f77;
+  background: #d8f5ec;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+.fleet-card-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+.fleet-card-actions a {
+  min-height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 0.7rem;
+  border-radius: 999px;
+  font-weight: 700;
+}
+.danger-button {
+  color: #a4423b;
+  border-color: #db938d;
+}
+.card-delete-confirmation {
+  display: grid;
+  gap: 0.65rem;
+  margin-top: 1rem;
+  padding-top: 0.8rem;
+  border-top: 1px solid #db938d;
+}
+.card-delete-confirmation p {
+  margin: 0;
+}
+.card-delete-confirmation label {
+  display: grid;
+  gap: 0.35rem;
+}
+.card-operation-success {
+  color: #087b70;
+}
+.card-operation-error {
+  color: #a4423b;
+}
+.fleet-details > h2 {
+  margin-top: 0;
+}
 .fleet-toolbar,
 .jobs-toolbar {
   display: flex;
@@ -285,6 +393,37 @@ small {
   flex: 1;
   min-width: min(100%, 15rem);
 }
+.fleet-toolbar {
+  display: block;
+}
+.fleet-toolbar-primary {
+  display: grid;
+  grid-template-columns: minmax(12rem, 1fr) minmax(9rem, 12rem);
+  align-items: end;
+  gap: 0.65rem;
+}
+.fleet-toolbar-primary label:first-child {
+  min-width: 0;
+}
+.fleet-advanced-filters {
+  margin-top: 0.65rem;
+}
+.fleet-advanced-filters > summary {
+  width: fit-content;
+  min-height: 2.75rem;
+  display: flex;
+  align-items: center;
+  color: var(--brown);
+  font-weight: 800;
+  cursor: pointer;
+}
+.fleet-advanced-filter-grid {
+  display: flex;
+  align-items: end;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  padding-top: 0.65rem;
+}
 .column-picker {
   position: relative;
 }
@@ -552,6 +691,34 @@ main ul[aria-label='已配置实例'] {
   .jobs-toolbar label {
     width: 100%;
   }
+  .fleet-heading {
+    align-items: flex-start;
+  }
+  .fleet-heading > div:first-child p,
+  .selection-summary,
+  .fleet-actions > button {
+    display: none;
+  }
+  .fleet-toolbar {
+    margin: 0.55rem 0;
+    padding: 0.65rem;
+  }
+  .fleet-toolbar-primary {
+    grid-template-columns: minmax(0, 1fr) 7.5rem;
+  }
+  .fleet-toolbar-primary label {
+    min-width: 0;
+  }
+  .fleet-toolbar-primary span {
+    font-size: 0.75rem;
+  }
+  .fleet-advanced-filters > summary {
+    min-height: 2.25rem;
+    font-size: 0.82rem;
+  }
+  .fleet-card-section {
+    margin-top: 0.55rem;
+  }
   .table-scroll {
     overflow-x: auto;
     border: 1px solid var(--border);
@@ -594,6 +761,13 @@ main ul[aria-label='已配置实例'] {
     max-width: 100%;
     white-space: normal;
   }
+  .fleet-card-actions > * {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+  .fleet-card {
+    padding: 0.8rem;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   *,