perf(web): warm frequent routes during idle time

vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx

@@ -1,6 +1,6 @@
 import { IconArrowDown, IconArrowUp, IconClose, IconDownload, IconRefresh, IconSearch, IconSetting } from '@douyinfe/semi-icons';
 import { useQuery } from '@tanstack/react-query';
-import { FormEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { DailyMileageRow, MileageStatistics, VehicleRow } from '../../api/types';
@@ -127,7 +127,17 @@ function VehicleMultiSelect({ value, onChange }: { value: VehicleOption[]; onCha
   const [search, setSearch] = useState('');
   const [debounced, setDebounced] = useState('');
   const [open, setOpen] = useState(false);
+  const closeTimerRef = useRef<number>();
   useEffect(() => { const timer = window.setTimeout(() => setDebounced(search.trim()), 220); return () => window.clearTimeout(timer); }, [search]);
+  useEffect(() => () => window.clearTimeout(closeTimerRef.current), []);
+  const openPicker = () => {
+    window.clearTimeout(closeTimerRef.current);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    window.clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = window.setTimeout(() => setOpen(false), 120);
+  };
   const candidateParams = useMemo(() => {
     const params = new URLSearchParams({ limit: '12', offset: '0' });
     if (debounced) params.set('keyword', debounced);
@@ -157,7 +167,7 @@ function VehicleMultiSelect({ value, onChange }: { value: VehicleOption[]; onCha
         {value.map((vehicle) => <button key={vehicle.vin} type="button" className="v2-mileage-chip" title={vehicle.vin} onClick={() => onChange(value.filter((item) => item.vin !== vehicle.vin))}>
           <span>{vehicle.plate || vehicle.vin}</span><IconClose />
         </button>)}
-        <input value={search} onFocus={() => setOpen(true)} onBlur={() => window.setTimeout(() => setOpen(false), 120)} onChange={(event) => { setSearch(event.target.value); setOpen(true); }} placeholder={value.length ? '继续添加车牌' : '输入车牌搜索，可多选'} aria-label="搜索车牌" />
+        <input value={search} onFocus={openPicker} onBlur={closePicker} onChange={(event) => { setSearch(event.target.value); setOpen(true); }} placeholder={value.length ? '继续添加车牌' : '输入车牌搜索，可多选'} aria-label="搜索车牌" />
       </div>
       {open ? <div className="v2-mileage-options" role="listbox">
         <header><span>车牌候选</span><em>{value.length}/{MAX_SELECTED_VEHICLES} 已选</em></header>

vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx

@@ -75,7 +75,17 @@ function eventTone(type: string) {
 function VehiclePicker({ value, onChange, onSelect }: { value: string; onChange: (value: string) => void; onSelect: (vehicle: VehicleRow) => void }) {
   const [open, setOpen] = useState(false);
   const [debounced, setDebounced] = useState(value.trim());
+  const closeTimerRef = useRef<number>();
   useEffect(() => { const timer = window.setTimeout(() => setDebounced(value.trim()), 220); return () => window.clearTimeout(timer); }, [value]);
+  useEffect(() => () => window.clearTimeout(closeTimerRef.current), []);
+  const openPicker = () => {
+    window.clearTimeout(closeTimerRef.current);
+    setOpen(true);
+  };
+  const closePicker = () => {
+    window.clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = window.setTimeout(() => setOpen(false), 140);
+  };
   const params = useMemo(() => {
     const next = new URLSearchParams({ limit: '10', offset: '0' });
     if (debounced) next.set('keyword', debounced);
@@ -87,7 +97,7 @@ function VehiclePicker({ value, onChange, onSelect }: { value: string; onChange:
     <IconSearch />
     <input
       aria-label="搜索轨迹车辆" autoComplete="off" placeholder="输入车牌 / VIN / 终端标识"
-      value={value} onFocus={() => setOpen(true)} onBlur={() => window.setTimeout(() => setOpen(false), 140)}
+      value={value} onFocus={openPicker} onBlur={closePicker}
       onChange={(event) => { onChange(event.target.value); setOpen(true); }}
     />
     {value ? <button type="button" aria-label="清空车辆" onMouseDown={(event) => event.preventDefault()} onClick={() => onChange('')}><IconClose /></button> : null}