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

refine Semi UI track replay workspace

Browse Source
This commit is contained in:
lingniu
2026-07-18 12:21:42 +08:00
parent a00276816b
commit e5bf76ea15
4 changed files with 87 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -255,9 +255,16 @@ test('uses a Semi bottom SideSheet for mobile track criteria and evidence', asyn
}); });
expect(sheet).toHaveClass('semi-sidesheet-inner'); expect(sheet).toHaveClass('semi-sidesheet-inner');
expect(document.querySelector('.v2-track-detail-sidesheet .v2-track-rail')).toBeInTheDocument(); expect(document.querySelector('.v2-track-detail-sidesheet .v2-track-rail')).toBeInTheDocument();
expect(document.querySelector('.v2-track-detail-sidesheet .v2-track-query-summary')).not.toBeInTheDocument(); expect(document.querySelector('.v2-track-detail-sidesheet .v2-track-query-summary')).toBeInTheDocument();
expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument();
expect(screen.getByText('07-15 00:00 – 07-15 23:59 · 自动来源')).toBeInTheDocument(); expect(screen.getByText('07-15 00:00 – 07-15 23:59 · 自动来源')).toBeInTheDocument();
expect(screen.getByText('8 km · 1 个停留 · 3 个事件')).toBeInTheDocument(); expect(screen.getByText('8 km · 1 个停留 · 3 个事件')).toBeInTheDocument();
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: '打开轨迹详情' }));
await screen.findByRole('dialog', { name: '轨迹查询与明细' });
fireEvent.click(screen.getByRole('button', { name: '修改条件' }));
expect(screen.getByRole('textbox', { name: '搜索轨迹车辆' })).toHaveValue('LTEST000000000001');
expect(screen.getByRole('button', { name: '关闭轨迹查询与明细' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '关闭轨迹查询与明细' })).toBeInTheDocument();
}); });

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

@@ -175,7 +175,7 @@ function OverviewPanel({ track }: { track: TrackPlaybackResponse }) {
</div>; </div>;
} }
const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopIndexes, activeEventIndexes, tab, queryCollapsed, mobileLayout, onDraft, onSubmit, onTab, onSelectIndex, onToggleQuery, onCollapse }: { const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopIndexes, activeEventIndexes, tab, queryCollapsed, onDraft, onSubmit, onTab, onSelectIndex, onToggleQuery, onCollapse }: {
draft: Draft; draft: Draft;
track?: TrackPlaybackResponse; track?: TrackPlaybackResponse;
loading: boolean; loading: boolean;
@@ -183,7 +183,6 @@ const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopInd
activeEventIndexes: readonly number[]; activeEventIndexes: readonly number[];
tab: PanelTab; tab: PanelTab;
queryCollapsed: boolean; queryCollapsed: boolean;
mobileLayout: boolean;
onDraft: (draft: Draft) => void; onDraft: (draft: Draft) => void;
onSubmit: (event: FormEvent) => void; onSubmit: (event: FormEvent) => void;
onTab: (tab: PanelTab) => void; onTab: (tab: PanelTab) => void;
@@ -216,7 +215,7 @@ const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopInd
<Button className="v2-track-rail-hide" theme="borderless" aria-label="隐藏查询与明细" icon={<IconChevronLeft />} onClick={onCollapse}><span className="v2-track-rail-hide-label">地图</span></Button> <Button className="v2-track-rail-hide" theme="borderless" aria-label="隐藏查询与明细" icon={<IconChevronLeft />} onClick={onCollapse}><span className="v2-track-rail-hide-label">地图</span></Button>
</>} </>}
/> />
{queryCollapsed && !mobileLayout ? <div className="v2-track-query-summary"> {queryCollapsed ? <div className="v2-track-query-summary">
<span><strong>{draft.keyword || '尚未选择车辆'}</strong><small>{draft.dateFrom.replace('T', ' ').slice(5)} – {draft.dateTo.replace('T', ' ').slice(5)}</small></span> <span><strong>{draft.keyword || '尚未选择车辆'}</strong><small>{draft.dateFrom.replace('T', ' ').slice(5)} – {draft.dateTo.replace('T', ' ').slice(5)}</small></span>
<Tag color={draft.protocol ? 'blue' : 'grey'} type="light" size="small">{draft.protocol || '自动来源'}</Tag> <Tag color={draft.protocol ? 'blue' : 'grey'} type="light" size="small">{draft.protocol || '自动来源'}</Tag>
</div> : <form className="v2-track-query" onSubmit={onSubmit}> </div> : <form className="v2-track-query" onSubmit={onSubmit}>
@@ -361,6 +360,10 @@ export default function TrackPage() {
setSearchParams(preserveMonitorReturn(url, monitorReturn), { replace: true }); setSearchParams(preserveMonitorReturn(url, monitorReturn), { replace: true });
}, [draft, monitorReturn, setSearchParams]); }, [draft, monitorReturn, setSearchParams]);
const selectIndex = useCallback((index: number) => { setPlaying(false); setActiveIndex(Math.max(0, Math.min(points.length - 1, index))); }, [points.length]); const selectIndex = useCallback((index: number) => { setPlaying(false); setActiveIndex(Math.max(0, Math.min(points.length - 1, index))); }, [points.length]);
const selectRailIndex = useCallback((index: number) => {
selectIndex(index);
if (mobileLayout) setRailCollapsed(true);
}, [mobileLayout, selectIndex]);
const collapseRail = useCallback(() => setRailCollapsed(true), []); const collapseRail = useCallback(() => setRailCollapsed(true), []);
const togglePlayback = () => { const togglePlayback = () => {
if (points.length < 2) return; if (points.length < 2) return;
@@ -369,7 +372,7 @@ export default function TrackPage() {
setPlaying((value) => !value); setPlaying((value) => !value);
}; };
const progress = points.length > 1 ? boundedIndex / (points.length - 1) * 100 : 0; 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} mobileLayout={mobileLayout} onDraft={setDraft} onSubmit={submit} onTab={setPanelTab} onSelectIndex={selectIndex} onToggleQuery={() => setQueryCollapsed((value) => !value)} onCollapse={collapseRail} />; 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={selectRailIndex} onToggleQuery={() => setQueryCollapsed((value) => !value)} onCollapse={collapseRail} />;
return <div className={`v2-track-page${mobileLayout ? ' is-mobile-layout' : ''}${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 /> <MonitorReturnBar />

4
vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
View File

@@ -461,9 +461,9 @@ describe('V2 production entry', () => {
expect(reconciliationSource).toContain('<Tag className={`v2-reconcile-severity'); expect(reconciliationSource).toContain('<Tag className={`v2-reconcile-severity');
expect(reconciliationSource).toContain('<Tag className={`v2-reconcile-status'); expect(reconciliationSource).toContain('<Tag className={`v2-reconcile-status');
expect(workspaceStyles).toContain('.v2-track-rail-expand {'); expect(workspaceStyles).toContain('.v2-track-rail-expand {');
expect(workspaceStyles).toContain('bottom: calc(112px + env(safe-area-inset-bottom));'); expect(workspaceStyles).toContain('bottom: calc(116px + env(safe-area-inset-bottom));');
expect(workspaceStyles).toContain('.v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand {'); expect(workspaceStyles).toContain('.v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand {');
expect(workspaceStyles).toContain('bottom: calc(252px + env(safe-area-inset-bottom));'); expect(workspaceStyles).toContain('bottom: calc(264px + env(safe-area-inset-bottom));');
expect(v2Styles).toContain('grid-template-rows: minmax(0, 1fr);'); expect(v2Styles).toContain('grid-template-rows: minmax(0, 1fr);');
expect(appShellSource).toContain("section === 'tracks' ? ' is-track-workspace' : ''"); expect(appShellSource).toContain("section === 'tracks' ? ' is-track-workspace' : ''");
expect(corePageSources.TrackPage).toContain("monitorReturn ? ' has-monitor-return' : ''"); expect(corePageSources.TrackPage).toContain("monitorReturn ? ' has-monitor-return' : ''");

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

@@ -45,7 +45,7 @@
/* Semi UI trajectory replay workspace: one evidence rail, one map overlay and /* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
* one compact playback surface. */ * one compact playback surface. */
.v2-track-page { .v2-track-page {
grid-template-columns: 326px minmax(0, 1fr); grid-template-columns: 352px minmax(0, 1fr);
background: #edf2f7; background: #edf2f7;
} }
@@ -90,13 +90,13 @@
.v2-track-query-panel .v2-workspace-panel-copy > h5.semi-typography { .v2-track-query-panel .v2-workspace-panel-copy > h5.semi-typography {
color: #26384f; color: #26384f;
font-size: 15px; font-size: 16px;
font-weight: 750; font-weight: 750;
} }
.v2-track-query-panel .v2-workspace-panel-copy > .semi-typography { .v2-track-query-panel .v2-workspace-panel-copy > .semi-typography {
color: #8491a2; color: #8491a2;
font-size: 10px; font-size: 11px;
} }
.v2-track-query-panel .v2-workspace-panel-actions { .v2-track-query-panel .v2-workspace-panel-actions {
@@ -105,13 +105,13 @@
.v2-track-query-panel .v2-track-query-toggle.semi-button { .v2-track-query-panel .v2-track-query-toggle.semi-button {
width: auto; width: auto;
min-width: 78px; min-width: 84px;
height: 32px; height: 34px;
justify-content: center; justify-content: center;
border-radius: 7px; border-radius: 7px;
padding: 0 8px; padding: 0 10px;
color: #526780; color: #526780;
font-size: 10px; font-size: 11px;
font-weight: 700; font-weight: 700;
} }
@@ -128,24 +128,24 @@
} }
.v2-track-query-panel .v2-track-query-summary { .v2-track-query-panel .v2-track-query-summary {
min-height: 56px; min-height: 58px;
padding: 7px 12px 11px; padding: 8px 14px 11px;
background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
} }
.v2-track-query-panel .v2-track-query-summary strong { .v2-track-query-panel .v2-track-query-summary strong {
color: #30445d; color: #30445d;
font-size: 12px; font-size: 13px;
} }
.v2-track-query-panel .v2-track-query-summary small, .v2-track-query-panel .v2-track-query-summary small,
.v2-track-query-panel .v2-track-query-summary .semi-tag { .v2-track-query-panel .v2-track-query-summary .semi-tag {
font-size: 9px; font-size: 10px;
} }
.v2-track-query-panel .v2-track-query { .v2-track-query-panel .v2-track-query {
border-bottom: 0; border-bottom: 0;
padding: 10px 12px 13px; padding: 12px 14px 15px;
} }
.v2-track-rail-result { .v2-track-rail-result {
@@ -158,31 +158,31 @@
} }
.v2-track-result-header { .v2-track-result-header {
min-height: 62px; min-height: 64px;
background: #fbfcfe; background: #fbfcfe;
padding: 9px 12px; padding: 10px 14px;
} }
.v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography { .v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography {
color: #25384f; color: #25384f;
font-size: 14px; font-size: 15px;
} }
.v2-track-result-header .v2-workspace-panel-copy > .semi-typography { .v2-track-result-header .v2-workspace-panel-copy > .semi-typography {
color: #8592a3; color: #8592a3;
font-size: 9px; font-size: 11px;
} }
.v2-track-result-header .v2-workspace-panel-meta .semi-tag { .v2-track-result-header .v2-workspace-panel-meta .semi-tag {
border-radius: 999px; border-radius: 999px;
padding-inline: 8px; padding-inline: 10px;
font-size: 10px; font-size: 11px;
font-weight: 700; font-weight: 700;
} }
.v2-track-rail-tabs { .v2-track-rail-tabs {
height: 42px; height: 46px;
flex-basis: 42px; flex-basis: 46px;
border-block: 1px solid #e3e9f1; border-block: 1px solid #e3e9f1;
border-bottom-color: #dfe6ef; border-bottom-color: #dfe6ef;
background: #fff; background: #fff;
@@ -190,8 +190,8 @@
} }
.v2-track-rail-tabs > .semi-button { .v2-track-rail-tabs > .semi-button {
height: 40px; height: 44px;
font-size: 11px; font-size: 12px;
} }
.v2-track-rail-scroll { .v2-track-rail-scroll {
@@ -224,7 +224,7 @@
.v2-track-overview-section .v2-workspace-panel-header .semi-tag { .v2-track-overview-section .v2-workspace-panel-header .semi-tag {
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 999px; border-radius: 999px;
font-size: 9px; font-size: 10px;
} }
.v2-track-quality-card.is-good { .v2-track-quality-card.is-good {
@@ -285,8 +285,8 @@
.v2-track-current-card.semi-card { .v2-track-current-card.semi-card {
top: 14px; top: 14px;
left: 14px; left: 14px;
width: min(360px, calc(100% - 330px)); width: min(392px, calc(100% - 350px));
min-width: 310px; min-width: 340px;
border: 1px solid rgba(210, 221, 234, .97); border: 1px solid rgba(210, 221, 234, .97);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, .97); background: rgba(255, 255, 255, .97);
@@ -295,8 +295,8 @@
} }
.v2-track-current-card .v2-workspace-panel-header { .v2-track-current-card .v2-workspace-panel-header {
min-height: 52px; min-height: 56px;
padding: 8px 11px; padding: 9px 12px;
} }
.v2-track-current-card .v2-workspace-panel-meta .semi-tag { .v2-track-current-card .v2-workspace-panel-meta .semi-tag {
@@ -304,7 +304,7 @@
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: 999px;
padding-inline: 8px; padding-inline: 8px;
font-size: 10px; font-size: 11px;
font-weight: 750; font-weight: 750;
} }
@@ -316,7 +316,7 @@
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span { .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
min-width: 0; min-width: 0;
padding: 7px 9px; padding: 9px 10px;
} }
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span + span { .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span + span {
@@ -325,32 +325,32 @@
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics small { .v2-track-current-card > .semi-card-body > .v2-track-current-metrics small {
color: #8491a2; color: #8491a2;
font-size: 9px; font-size: 10px;
} }
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong { .v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong {
margin-top: 4px; margin-top: 4px;
color: #25384f; color: #25384f;
font-size: 12px; font-size: 14px;
text-shadow: none; text-shadow: none;
} }
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence { .v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
display: flex; display: flex;
min-height: 38px; min-height: 42px;
align-items: center; align-items: center;
gap: 7px; gap: 7px;
border: 0; border: 0;
border-bottom: 1px solid #e8edf3; border-bottom: 1px solid #e8edf3;
padding: 6px 10px; padding: 7px 11px;
color: #66778c; color: #66778c;
font-size: 9px; font-size: 10px;
} }
.v2-track-current-evidence .semi-tag { .v2-track-current-evidence .semi-tag {
flex: 0 0 auto; flex: 0 0 auto;
border-radius: 6px; border-radius: 6px;
font-size: 8px; font-size: 10px;
} }
.v2-track-current-evidence > span { .v2-track-current-evidence > span {
@@ -380,7 +380,7 @@
.v2-track-current-evidence strong { .v2-track-current-evidence strong {
overflow: hidden; overflow: hidden;
color: #34475e; color: #34475e;
font-size: 10px; font-size: 11px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@@ -388,7 +388,7 @@
.v2-track-current-evidence em { .v2-track-current-evidence em {
flex: 0 0 auto; flex: 0 0 auto;
color: #6d7e92; color: #6d7e92;
font-size: 8px; font-size: 9px;
font-style: normal; font-style: normal;
white-space: nowrap; white-space: nowrap;
} }
@@ -397,20 +397,20 @@
margin-left: auto; margin-left: auto;
overflow: hidden; overflow: hidden;
color: #7c8a9d; color: #7c8a9d;
font-size: 8px; font-size: 9px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.v2-track-current-card > .semi-card-body > p { .v2-track-current-card > .semi-card-body > p {
min-height: 34px; min-height: 38px;
padding: 8px 10px; padding: 9px 11px;
color: #52657b; color: #52657b;
font-size: 9px; font-size: 10px;
} }
.v2-track-playback-dock.semi-card { .v2-track-playback-dock.semi-card {
min-height: 96px; min-height: 104px;
border-top-color: rgba(205, 216, 229, .98); border-top-color: rgba(205, 216, 229, .98);
background: rgba(255, 255, 255, .97); background: rgba(255, 255, 255, .97);
box-shadow: 0 -10px 30px rgba(24, 41, 63, .12); box-shadow: 0 -10px 30px rgba(24, 41, 63, .12);
@@ -423,18 +423,18 @@
} }
.v2-track-playback-dock > .semi-card-body { .v2-track-playback-dock > .semi-card-body {
min-height: 96px; min-height: 104px;
grid-template-columns: 136px minmax(220px, 1fr) auto; grid-template-columns: 150px minmax(240px, 1fr) auto;
gap: 14px; gap: 16px;
padding: 10px 14px !important; padding: 11px 16px !important;
} }
.v2-track-dock-summary strong { .v2-track-dock-summary strong {
font-size: 17px; font-size: 20px;
} }
.v2-track-dock-summary span { .v2-track-dock-summary span {
font-size: 9px; font-size: 11px;
} }
.v2-track-segment-rail, .v2-track-segment-rail,
@@ -448,7 +448,7 @@
} }
.v2-track-progress-meta { .v2-track-progress-meta {
font-size: 9px; font-size: 10px;
} }
.v2-track-dock-controls { .v2-track-dock-controls {
@@ -456,21 +456,21 @@
} }
.v2-track-dock-controls > .semi-button { .v2-track-dock-controls > .semi-button {
width: 32px; width: 36px;
min-width: 32px; min-width: 36px;
height: 32px; height: 36px;
border-radius: 8px; border-radius: 8px;
} }
.v2-track-dock-controls > .semi-button.is-primary { .v2-track-dock-controls > .semi-button.is-primary {
width: 40px; width: 44px;
min-width: 40px; min-width: 44px;
height: 40px; height: 44px;
} }
@media (max-width: 1180px) { @media (max-width: 1180px) {
.v2-track-page { .v2-track-page {
grid-template-columns: 304px minmax(0, 1fr); grid-template-columns: 320px minmax(0, 1fr);
} }
.v2-track-page.is-rail-collapsed { .v2-track-page.is-rail-collapsed {
@@ -479,14 +479,14 @@
.v2-track-current-card.semi-card { .v2-track-current-card.semi-card {
top: 62px; top: 62px;
width: min(360px, calc(100% - 28px)); width: min(382px, calc(100% - 28px));
min-width: 0; min-width: 0;
} }
.v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card { .v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card {
top: 14px; top: 14px;
width: min(360px, calc(100% - 330px)); width: min(382px, calc(100% - 350px));
min-width: 310px; min-width: 340px;
} }
.v2-track-playback-dock > .semi-card-body { .v2-track-playback-dock > .semi-card-body {
@@ -512,12 +512,12 @@
} }
.v2-track-query-panel .v2-track-query-header { .v2-track-query-panel .v2-track-query-header {
min-height: 52px; min-height: 54px;
padding: 8px 12px; padding: 8px 13px;
} }
.v2-track-result-header { .v2-track-result-header {
min-height: 58px; min-height: 60px;
} }
.v2-track-stage-tools { .v2-track-stage-tools {
@@ -546,17 +546,17 @@
} }
.v2-track-current-card .v2-workspace-panel-header { .v2-track-current-card .v2-workspace-panel-header {
min-height: 46px; min-height: 48px;
padding: 7px 9px; padding: 7px 10px;
} }
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span { .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
padding: 6px 9px; padding: 7px 8px;
} }
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence { .v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
min-height: 36px; min-height: 38px;
padding: 4px 9px; padding: 5px 9px;
} }
.v2-track-current-evidence > small { .v2-track-current-evidence > small {
@@ -569,7 +569,7 @@
.v2-track-playback-dock.semi-card, .v2-track-playback-dock.semi-card,
.v2-track-playback-dock > .semi-card-body { .v2-track-playback-dock > .semi-card-body {
min-height: 102px; min-height: 106px;
} }
.v2-track-playback-dock > .semi-card-body { .v2-track-playback-dock > .semi-card-body {
@@ -579,11 +579,11 @@
} }
.v2-track-rail-expand { .v2-track-rail-expand {
bottom: calc(112px + env(safe-area-inset-bottom)); bottom: calc(116px + env(safe-area-inset-bottom));
} }
.v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand { .v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand {
bottom: calc(252px + env(safe-area-inset-bottom)); bottom: calc(264px + env(safe-area-inset-bottom));
} }
} }