feat(platform): show active mileage filters

vehicle-data-platform/apps/web/src/App.tsx

@@ -215,7 +215,8 @@ export default function App() {
       setAnalysisVin(nextFilters.keyword);
     }
     setActiveProtocol(nextFilters.protocol ?? '');
-    replaceMileageHash(nextFilters);
+    const { keyword, protocol, ...restFilters } = nextFilters;
+    replaceHash('mileage', keyword ?? analysisVin, protocol, restFilters);
   };
 
   const replaceMileageHash = (filters: Record<string, string> = {}) => {

vehicle-data-platform/apps/web/src/pages/Mileage.tsx

@@ -61,6 +61,12 @@ export function Mileage({
   const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 20, total: 0 });
   const currentVehicleKeyword = filters.keyword?.trim() ?? '';
   const currentProtocol = filters.protocol?.trim() ?? '';
+  const filterSummary = [
+    currentVehicleKeyword ? `车辆：${currentVehicleKeyword}` : '',
+    currentProtocol ? `数据来源：${currentProtocol}` : '',
+    filters.dateFrom?.trim() ? `开始日期：${filters.dateFrom.trim()}` : '',
+    filters.dateTo?.trim() ? `结束日期：${filters.dateTo.trim()}` : ''
+  ].filter(Boolean);
 
   const loadSummary = (values: Record<string, string> = filters) => {
     setSummaryLoading(true);
@@ -81,6 +87,17 @@ export function Mileage({
       .finally(() => setLoading(false));
   };
 
+  const applyFilters = (nextFilters: Record<string, string>) => {
+    setFilters(nextFilters);
+    onFiltersChange?.(nextFilters);
+    loadSummary(nextFilters);
+    load(nextFilters, 1, pagination.pageSize);
+  };
+
+  const clearRangeFilters = () => {
+    applyFilters(currentVehicleKeyword ? { keyword: currentVehicleKeyword } : {});
+  };
+
   useEffect(() => {
     const nextFilters = mergeInitialFilters(initialVin, initialProtocol, initialFilters);
     setFilters(nextFilters);
@@ -107,10 +124,7 @@ export function Mileage({
       <Card bordered>
         <Form key={JSON.stringify(filters)} initValues={filters} layout="horizontal" onSubmit={(values) => {
           const nextFilters = values as Record<string, string>;
-          setFilters(nextFilters);
-          onFiltersChange?.(nextFilters);
-          loadSummary(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 }}>
@@ -124,14 +138,21 @@ export function Mileage({
             <Button htmlType="submit" theme="solid" type="primary">查询</Button>
             <Button onClick={() => {
               const nextFilters = mergeInitialFilters(initialVin, initialProtocol, {});
-              setFilters(nextFilters);
-              onFiltersChange?.(nextFilters);
-              loadSummary(nextFilters);
-              load(nextFilters, 1, pagination.pageSize);
+              applyFilters(nextFilters);
             }}>重置</Button>
           </Space>
         </Form>
       </Card>
+      {filterSummary.length > 0 ? (
+        <Card bordered title="当前里程筛选" style={{ marginTop: 16 }}>
+          <Space wrap>
+            {filterSummary.map((item) => (
+              <Tag key={item} color="blue">{item}</Tag>
+            ))}
+            <Button size="small" onClick={clearRangeFilters}>清空筛选</Button>
+          </Space>
+        </Card>
+      ) : null}
       <div className="vp-kpi-grid" style={{ marginTop: 16 }}>
         {[
           { label: '车辆数', value: summary.vehicleCount.toLocaleString() },

vehicle-data-platform/apps/web/src/test/App.test.tsx

@@ -2424,6 +2424,55 @@ test('applies mileage date range from shareable hash to API requests', async ()
   expect(screen.getByText('当前来源：JT808')).toBeInTheDocument();
 });
 
+test('shows and clears current mileage filters while keeping vehicle scope', async () => {
+  window.history.replaceState(null, '', '/#/mileage?keyword=VIN-MILEAGE-002&protocol=JT808&dateFrom=2026-07-01&dateTo=2026-07-03');
+  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/mileage/summary')) {
+      return {
+        ok: true,
+        json: async () => ({
+          data: { vehicleCount: 1, recordCount: 2, sourceCount: 1, totalMileageKm: 12.3, averageMileagePerVin: 12.3 },
+          traceId: 'trace-test',
+          timestamp: 1783094400000
+        })
+      } as Response;
+    }
+    return {
+      ok: true,
+      json: async () => ({
+        data: { items: [], total: 0, limit: 20, offset: 0 },
+        traceId: 'trace-test',
+        timestamp: 1783094400000
+      })
+    } as Response;
+  });
+
+  render(<App />);
+
+  expect(await screen.findByText('当前里程筛选')).toBeInTheDocument();
+  expect(screen.getByText('车辆：VIN-MILEAGE-002')).toBeInTheDocument();
+  expect(screen.getByText('数据来源：JT808')).toBeInTheDocument();
+  expect(screen.getByText('开始日期：2026-07-01')).toBeInTheDocument();
+  expect(screen.getByText('结束日期：2026-07-03')).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: '清空筛选' }));
+
+  await waitFor(() => {
+    expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/mileage/summary?keyword=VIN-MILEAGE-002'), undefined);
+  });
+  expect(window.location.hash).toBe('#/mileage?keyword=VIN-MILEAGE-002');
+});
+
 test('updates mileage hash when mileage filters are submitted', async () => {
   window.history.replaceState(null, '', '/#/mileage');
   const fetchMock = vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => {