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

fix mobile track workspace layout

Browse Source
This commit is contained in:
lingniu
2026-07-18 07:57:53 +08:00
parent 40fcb6fc7b
commit fb171fb0de
3 changed files with 28 additions and 2 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

@@ -241,9 +241,11 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
test('uses a Semi bottom SideSheet for mobile track criteria and evidence', async () => {
Object.defineProperty(window, 'matchMedia', { configurable: true, value: vi.fn(() => ({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })) });
const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
render(<QueryClientProvider client={client}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/tracks?keyword=LTEST000000000001&dateFrom=2026-07-15T00:00&dateTo=2026-07-15T23:59']}><TrackPage /></MemoryRouter></QueryClientProvider>);
const view = render(<QueryClientProvider client={client}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/tracks?keyword=LTEST000000000001&dateFrom=2026-07-15T00:00&dateTo=2026-07-15T23:59']}><TrackPage /></MemoryRouter></QueryClientProvider>);
expect((await screen.findAllByText('粤A12345')).length).toBeGreaterThan(0);
expect(view.container.querySelector('.v2-track-page')).toHaveClass('is-mobile-layout', 'is-rail-collapsed');
expect(view.container.querySelector('.v2-track-page > .v2-track-stage')).toBeInTheDocument();
fireEvent.click(screen.getByRole('button', { name: '展开查询与明细' }));
const sheet = await waitFor(() => {

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

@@ -368,7 +368,7 @@ export default function TrackPage() {
const progress = points.length > 1 ? boundedIndex / (points.length - 1) * 100 : 0;
const trackRail = <TrackRail draft={draft} track={track} loading={query.isFetching} activeStopIndexes={activeStopIndexes} activeEventIndexes={activeEventIndexes} tab={panelTab} queryCollapsed={queryCollapsed} onDraft={setDraft} onSubmit={submit} onTab={setPanelTab} onSelectIndex={selectIndex} onToggleQuery={() => setQueryCollapsed((value) => !value)} onCollapse={collapseRail} />;
return <div className={`v2-track-page${railCollapsed ? ' is-rail-collapsed' : ''}${monitorReturn ? ' has-monitor-return' : ''}`}>
return <div className={`v2-track-page${mobileLayout ? ' is-mobile-layout' : ''}${railCollapsed ? ' is-rail-collapsed' : ''}${monitorReturn ? ' has-monitor-return' : ''}`}>
<MonitorReturnBar />
{mobileLayout ? <SideSheet
className="v2-track-detail-sidesheet"

24
vehicle-data-platform/apps/web/src/v2/styles/workspace.css
View File

@@ -18,6 +18,30 @@
padding: 8px 14px;
}
/*
* Track criteria live in a portal-backed SideSheet on phones, so the stage is
* the only in-flow workspace child. Bind layout to the component's mobile
* state instead of relying on overlapping historical media-query overrides.
*/
.v2-track-page.is-mobile-layout,
.v2-track-page.is-mobile-layout.is-rail-collapsed {
display: flex;
grid-template-columns: none;
grid-template-rows: none;
flex-direction: column;
}
.v2-track-page.is-mobile-layout > .v2-monitor-return {
flex: 0 0 auto;
}
.v2-track-page.is-mobile-layout > .v2-track-stage {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
}
/* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
* one compact playback surface. */
.v2-track-page {