shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine mobile track workspace

Browse Source
This commit is contained in:
lingniu
2026-07-19 01:50:14 +08:00
parent 3770afabec
commit dcfd78f73b
3 changed files with 98 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
View File

@@ -276,6 +276,10 @@ test('uses a Semi bottom SideSheet for mobile track criteria and evidence', asyn
expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument();
expect(screen.getByText('07-15 00:00 – 07-15 23:59 · 自动来源')).toBeInTheDocument();
expect(screen.getByText('8 km · 1 个停留 · 3 个事件')).toBeInTheDocument();
expect(sheet).toHaveStyle({ height: 'min(82dvh, 326px)' });
fireEvent.click(screen.getByRole('tab', { name: /事件点/ }));
await waitFor(() => expect(sheet).toHaveStyle({ height: 'min(82dvh, 450px)' }));
fireEvent.click(screen.getByRole('tab', { name: /停留点/ }));
fireEvent.click(screen.getByRole('button', { name: /停留 00:05:00/ }));
expect(view.container.querySelector('.v2-track-page')).toHaveClass('is-rail-collapsed');
fireEvent.click(screen.getByRole('button', { name: '打开轨迹详情' }));

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

@@ -39,6 +39,9 @@ const TRACK_SOURCE_OPTIONS = [
const numberFormatters = new Map<number, Intl.NumberFormat>();
const timeFormatter = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
const dateTimeFormatter = new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' });
const TRACK_SHEET_MAX_HEIGHT_PX = 720;
const TRACK_SHEET_CHROME_HEIGHT_PX = 264;
const TRACK_SHEET_ROW_HEIGHT_PX = 62;
function number(value: number, digits = 1) {
let formatter = numberFormatters.get(digits);
@@ -116,6 +119,14 @@ function eventTone(type: string) {
return 'info';
}
function mobileTrackSheetHeight(track: TrackPlaybackResponse | undefined, queryCollapsed: boolean, tab: PanelTab) {
if (!track || !queryCollapsed || tab === 'overview') return `min(82dvh, ${TRACK_SHEET_MAX_HEIGHT_PX}px)`;
const itemCount = tab === 'stops' ? track.stops.length : track.events.length;
const visibleRows = itemCount ? Math.min(itemCount, 7) : 2;
const contentHeight = Math.min(TRACK_SHEET_MAX_HEIGHT_PX, TRACK_SHEET_CHROME_HEIGHT_PX + visibleRows * TRACK_SHEET_ROW_HEIGHT_PX);
return `min(82dvh, ${contentHeight}px)`;
}
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());
@@ -390,7 +401,7 @@ export default function TrackPage() {
className="v2-track-detail-sidesheet"
visible={!railCollapsed}
placement="bottom"
height="min(82dvh, 720px)"
height={mobileTrackSheetHeight(track, queryCollapsed, panelTab)}
aria-label="轨迹查询与明细"
title={<div className="v2-track-detail-sheet-title"><strong>轨迹查询与明细</strong><span>{track ? `${number(track.summary.distanceKm)} km · ${track.stops.length} 个停留 · ${track.events.length} 个事件` : '选择车辆和时间范围'}</span></div>}
footer={null}