perf(web): warm frequent routes during idle time
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user