feat(platform-web): make vehicle summary filters actionable

2026-07-04 03:46:12 +08:00
parent b7e8aae317
commit ede44ee3d9
4 changed files with 118 additions and 14 deletions
--- a/vehicle-data-platform/apps/web/src/App.tsx
+++ b/vehicle-data-platform/apps/web/src/App.tsx
@@ -117,6 +117,11 @@ export default function App() {
    replaceHash('vehicles', undefined, undefined, filters);
  };

+  const updateVehicleFilters = (filters: Record<string, string> = {}) => {
+    setVehicleFilters(filters);
+    replaceHash('vehicles', undefined, undefined, filters);
+  };
+
  const openVehicle = async (keyword: string, protocol?: string) => {
    const lookupKey = keyword.trim();
    const nextProtocol = protocol?.trim() ?? '';
@@ -176,7 +181,7 @@ export default function App() {

  const pages: Record<PageKey, JSX.Element> = {
    dashboard: <Dashboard onOpenVehicle={openVehicle} onOpenQuality={() => navigatePage('quality')} onOpenVehicles={openVehicles} />,
-    vehicles: <Vehicles onOpenVehicle={openVehicle} initialFilters={vehicleFilters} />,
+    vehicles: <Vehicles onOpenVehicle={openVehicle} onFiltersChange={updateVehicleFilters} initialFilters={vehicleFilters} />,
    realtime: <Realtime onOpenVehicle={openVehicle} />,
    detail: <VehicleDetail vin={activeVin} protocol={activeProtocol} onOpenHistory={openHistoryForVehicle} onOpenMileage={openMileageForVehicle} onQueryChange={updateVehicleDetailQuery} />,
    history: <History initialVin={analysisVin} initialProtocol={activeProtocol} onOpenVehicle={openVehicle} />,
--- a/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx
+++ b/vehicle-data-platform/apps/web/src/pages/Vehicles.tsx
@@ -28,19 +28,28 @@ function vehicleServiceStatus(row: VehicleCoverageRow) {
  return { label: '服务正常', color: 'green' as const };
 }

-export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle: (vin: string) => void; initialFilters?: Record<string, string> }) {
+export function Vehicles({
+  onOpenVehicle,
+  onFiltersChange,
+  initialFilters = {}
+}: {
+  onOpenVehicle: (vin: string) => void;
+  onFiltersChange?: (filters: Record<string, string>) => void;
+  initialFilters?: Record<string, string>;
+}) {
  const [rows, setRows] = useState<VehicleCoverageRow[]>([]);
  const [summary, setSummary] = useState<VehicleCoverageSummary | null>(null);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState<Record<string, string>>(initialFilters);
  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
-  const resultSummary = useMemo(() => {
-    return [
-      { label: '过滤车辆', value: (summary?.totalVehicles ?? pagination.total).toLocaleString() },
-      { label: '在线车辆', value: (summary?.onlineVehicles ?? 0).toLocaleString() },
-      { label: '多源车辆', value: (summary?.multiSourceVehicles ?? 0).toLocaleString() },
-      { label: '待绑定', value: (summary?.unboundVehicles ?? 0).toLocaleString() }
+  const resultSummary = useMemo<Array<{ label: string; value: string; filters: Record<string, string> }>>(() => {
+    const items: Array<{ label: string; value: string; filters: Record<string, string> }> = [
+      { label: '过滤车辆', value: (summary?.totalVehicles ?? pagination.total).toLocaleString(), filters: {} },
+      { label: '在线车辆', value: (summary?.onlineVehicles ?? 0).toLocaleString(), filters: { online: 'online' } },
+      { label: '多源车辆', value: (summary?.multiSourceVehicles ?? 0).toLocaleString(), filters: { coverage: 'multi' } },
+      { label: '待绑定', value: (summary?.unboundVehicles ?? 0).toLocaleString(), filters: { bindingStatus: 'unbound' } }
    ];
+    return items;
  }, [pagination.total, summary]);

  const load = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
@@ -65,6 +74,12 @@ export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle
      .finally(() => setLoading(false));
  };

+  const applyFilters = (nextFilters: Record<string, string>) => {
+    setFilters(nextFilters);
+    onFiltersChange?.(nextFilters);
+    load(nextFilters, 1, pagination.pageSize);
+  };
+
  useEffect(() => {
    setFilters(initialFilters);
    load(initialFilters, 1, pagination.pageSize);
@@ -108,8 +123,7 @@ export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle
      <Card bordered>
        <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
          const nextFilters = values as Record<string, string>;
-          setFilters(nextFilters);
-          load(nextFilters, 1, pagination.pageSize);
+          applyFilters(nextFilters);
        }}>
          <Form.Input field="keyword" label="关键词" placeholder="VIN / 车牌 / 手机号 / OEM" style={{ width: 260 }} />
          <Form.Select field="protocol" label="数据来源" placeholder="全部来源" style={{ width: 180 }}>
@@ -138,8 +152,7 @@ export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle
          <Space>
            <Button htmlType="submit" theme="solid" type="primary">查询</Button>
            <Button onClick={() => {
-              setFilters({});
-              load({}, 1, pagination.pageSize);
+              applyFilters({});
            }}>重置</Button>
          </Space>
        </Form>
@@ -147,10 +160,16 @@ export function Vehicles({ onOpenVehicle, initialFilters = {} }: { onOpenVehicle
      <Card bordered title="当前车辆结果" style={{ marginTop: 16 }}>
        <div className="vp-result-summary-grid">
          {resultSummary.map((item) => (
-            <div key={item.label} className="vp-result-summary-item">
+            <button
+              key={item.label}
+              className="vp-result-summary-item vp-result-summary-button"
+              type="button"
+              aria-label={`${item.label} ${item.value}`}
+              onClick={() => applyFilters({ ...filters, ...item.filters })}
+            >
              <div className="vp-result-summary-value">{item.value}</div>
              <div className="vp-result-summary-label">{item.label}</div>
-            </div>
+            </button>
          ))}
        </div>
      </Card>
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -213,6 +213,20 @@ body {
  background: #fbfcff;
 }

+.vp-result-summary-button {
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vp-result-summary-button:hover,
+.vp-result-summary-button:focus-visible {
+  border-color: rgba(22, 100, 255, 0.42);
+  background: #f5f9ff;
+  outline: none;
+}
+
 .vp-result-summary-value {
  color: var(--vp-text);
  font-size: 22px;
--- a/vehicle-data-platform/apps/web/src/test/App.test.tsx
+++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx
@@ -262,6 +262,72 @@ test('shows vehicle service result summary on vehicle list filters', async () =>
  expect(screen.getByText('VIN-MULTI-001')).toBeInTheDocument();
 });

+test('filters vehicle list from result summary actions', async () => {
+  window.history.replaceState(null, '', '/#/vehicles');
+  const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {
+    const path = String(input);
+    if (path.includes('/api/ops/health')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { linkHealth: [], kafkaLag: 0, redisOnlineKeys: 0, tdengineWritable: true, mysqlWritable: true, runtime: { requestTimeoutMs: 5000 } },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/vehicles/coverage/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            totalVehicles: path.includes('online=online') ? 73 : 181,
+            onlineVehicles: 73,
+            singleSourceVehicles: 108,
+            multiSourceVehicles: 73,
+            unboundVehicles: 9
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    if (path.includes('/api/vehicles/coverage')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: {
+            items: [],
+            total: path.includes('online=online') ? 73 : 181,
+            limit: 20,
+            offset: 0
+          },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 10, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  fireEvent.click(await screen.findByRole('button', { name: /在线车辆 73/ }));
+
+  await waitFor(() => {
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage?limit=20&offset=0&online=online'), undefined);
+  });
+  expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/vehicles/coverage/summary?online=online'), undefined);
+  expect(window.location.hash).toBe('#/vehicles?online=online');
+});
+
 test('shows resolved vehicle service status after topbar search', async () => {
  window.history.replaceState(null, '', '/#/dashboard');
  const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {