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

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>