fix(tracks): sync query state with navigation

This commit is contained in:
lingniu
2026-07-16 06:41:06 +08:00
parent f1f0bab590
commit e99087f329
2 changed files with 42 additions and 11 deletions

View File

@@ -188,14 +188,17 @@ const SegmentRail = memo(function SegmentRail({ track, onSelectIndex }: { track:
export default function TrackPage() {
const [searchParams, setSearchParams] = useSearchParams();
const fallback = useMemo(defaultTrackWindow, []);
const initialDraft = useMemo<Draft>(() => ({
keyword: searchParams.get('vin') || searchParams.get('keyword') || '',
dateFrom: searchParams.get('dateFrom') || fallback.dateFrom,
dateTo: searchParams.get('dateTo') || fallback.dateTo,
protocol: searchParams.get('protocol') || ''
}), []);
const [draft, setDraft] = useState(initialDraft);
const [criteria, setCriteria] = useState(initialDraft);
const routeKey = searchParams.toString();
const criteria = useMemo<Draft>(() => {
const params = new URLSearchParams(routeKey);
return {
keyword: params.get('vin') || params.get('keyword') || '',
dateFrom: params.get('dateFrom') || fallback.dateFrom,
dateTo: params.get('dateTo') || fallback.dateTo,
protocol: params.get('protocol') || ''
};
}, [fallback, routeKey]);
const [draft, setDraft] = useState(criteria);
const [activeIndex, setActiveIndex] = useState(0);
const [playing, setPlaying] = useState(false);
const [playbackSpeed, setPlaybackSpeed] = useState<PlaybackSpeed>(1);
@@ -224,6 +227,7 @@ export default function TrackPage() {
const currentAddressPoint = useMemo(() => trackAddressCoordinate(current?.longitude, current?.latitude), [current?.latitude, current?.longitude]);
const [addressPoint, setAddressPoint] = useState<TrackAddressCoordinate>();
useEffect(() => { setDraft(criteria); }, [criteria]);
useEffect(() => {
if (playing || !currentAddressPoint) return;
const timer = window.setTimeout(() => setAddressPoint(currentAddressPoint), TRACK_ADDRESS_SETTLE_MS);
@@ -264,7 +268,6 @@ export default function TrackPage() {
const keyword = draft.keyword.trim();
if (!keyword) return;
const next = { ...draft, keyword };
setCriteria(next);
const url = new URLSearchParams({ keyword });
if (next.dateFrom) url.set('dateFrom', next.dateFrom);
if (next.dateTo) url.set('dateTo', next.dateTo);