From 9101d260050f5119b1bc481c1b7ff1907a2e7892 Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Sat, 18 Jul 2026 20:29:32 +0800
Subject: [PATCH] refine Semi UI track replay workspace

---
 .../apps/web/src/v2/pages/TrackPage.test.tsx  | 11 +++-
 .../apps/web/src/v2/pages/TrackPage.tsx       | 18 +++--
 .../apps/web/src/v2/pages/UsersPage.test.tsx  |  6 +-
 .../apps/web/src/v2/styles/workspace.css      | 65 +++++++++++++++++--
 4 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
index d24c1da1..6f24a4d8 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.test.tsx
@@ -106,7 +106,7 @@ test('keeps committed track criteria authoritative to same-route navigation and
   expect((await screen.findAllByText('粤A12345')).length).toBeGreaterThan(0);
   expect(screen.getByTestId('track-map')).toHaveAttribute('data-point-count', '3');
   expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument();
-  expect(screen.getAllByText(/07-15 00:00/).length).toBeGreaterThan(0);
+  expect(screen.getByText(/07-15 00:00.*自动来源/)).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '修改条件' }));
   expect(screen.getByRole('textbox', { name: '搜索轨迹车辆' })).toHaveValue('LTEST000000000001');
 
@@ -174,9 +174,12 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
   expect((await screen.findAllByText('粤A12345')).length).toBeGreaterThan(0);
   expect(view.container.querySelector('.v2-track-rail-shell.semi-card')).toBeInTheDocument();
   expect(screen.getByLabelText('轨迹查询任务栏')).toHaveClass('v2-workspace-command-bar', 'v2-track-query-header');
+  expect(screen.getByLabelText('轨迹查询任务栏')).toHaveTextContent('粤A12345');
   expect(screen.getByLabelText('轨迹查询任务栏')).toHaveTextContent('3 点');
   expect(view.container.querySelector('.v2-track-query-panel')).toHaveClass('is-collapsed');
+  expect(view.container.querySelector('.v2-track-query-summary')).not.toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-rail-result')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-track-result-header')).toHaveTextContent('轨迹证据粤A12345 · LTEST0000000000018 km');
   expect(screen.getByRole('button', { name: '修改条件' })).toHaveAttribute('aria-expanded', 'false');
   expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-current-card.semi-card')).toBeInTheDocument();
@@ -192,6 +195,8 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
   expect(screen.getByRole('button', { name: /停留 00:05:00/ }).closest('.semi-list-item')).toHaveClass('v2-track-evidence-item');
   expect(view.container.querySelector('.v2-track-evidence-list.semi-list')).toBeInTheDocument();
   expect(screen.getByRole('slider', { name: '轨迹播放进度' })).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-track-dock-summary')).toHaveTextContent('行程里程8 km00:20:00 · 1 次停留');
+  expect(view.container.querySelector('.v2-track-progress-meta')).toHaveTextContent('已暂停 · 数据点 1 / 3');
   expect(screen.queryByRole('button', { name: '暂停轨迹播放' })).not.toBeInTheDocument();
   await waitFor(() => expect(mocks.reverseGeocode).toHaveBeenCalledTimes(1));
   expect(client.getQueryCache().findAll({ queryKey: ['track-address'] })).toHaveLength(1);
@@ -216,6 +221,7 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
 
   fireEvent.change(screen.getByRole('combobox', { name: '速度' }), { target: { value: '4' } });
   fireEvent.click(screen.getByRole('button', { name: '开始轨迹播放' }));
+  expect(view.container.querySelector('.v2-track-progress-meta')).toHaveTextContent(/播放中 · 数据点 [12] \/ 3/);
   expect(screen.getByTestId('track-map')).toHaveAttribute('data-follow-duration', '65');
   fireEvent.click(screen.getByRole('button', { name: '暂停轨迹播放' }));
   expect(screen.getByTestId('track-map')).toHaveAttribute('data-follow-duration', '180');
@@ -259,7 +265,8 @@ test('uses a Semi bottom SideSheet for mobile track criteria and evidence', asyn
   });
   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-query-summary')).toBeInTheDocument();
+  expect(document.querySelector('.v2-track-detail-sidesheet .v2-track-query-summary')).not.toBeInTheDocument();
+  expect(screen.getByLabelText('轨迹查询任务栏')).toHaveTextContent('粤A12345');
   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();
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
index 8eb76d2f..a1ba3836 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
@@ -195,13 +195,14 @@ const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopInd
   const choosePreset = (daysBack: number) => onDraft({ ...draft, ...trackWindow(daysBack, daysBack > 0) });
   const appliedWindow = `${draft.dateFrom.replace('T', ' ').slice(5)} – ${draft.dateTo.replace('T', ' ').slice(5)}`;
   const appliedSource = draft.protocol || '自动来源';
+  const contextTitle = queryCollapsed ? track?.plate || draft.keyword || '轨迹查询' : '轨迹查询';
   return <aside className="v2-track-rail">
     <Card className="v2-track-rail-shell" bodyStyle={{ padding: 0 }}>
       <section className={`v2-track-query-panel${queryCollapsed ? ' is-collapsed' : ''}`}>
         <WorkspaceCommandBar
           className="v2-track-query-header"
           ariaLabel="轨迹查询任务栏"
-          title="轨迹查询"
+          title={contextTitle}
           description={queryCollapsed ? `${appliedWindow} · ${appliedSource}` : '最长支持连续 7 天'}
           status={loading ? '读取中' : track ? `${track.points.length.toLocaleString('zh-CN')} 点` : '等待查询'}
           statusColor={loading ? 'blue' : track ? 'green' : 'grey'}
@@ -219,10 +220,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>
           </>}
         />
-        {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>
-          <Tag color={draft.protocol ? 'blue' : 'grey'} type="light" size="small">{draft.protocol || '自动来源'}</Tag>
-        </div> : <form className="v2-track-query" onSubmit={onSubmit}>
+        {!queryCollapsed ? <form className="v2-track-query" onSubmit={onSubmit}>
           <label><span>车辆</span><VehiclePicker value={draft.keyword} onChange={(keyword) => onDraft({ ...draft, keyword })} onSelect={(vehicle) => onDraft({ ...draft, keyword: vehicle.plate || vehicle.vin })} /></label>
           <div className="v2-track-presets">
             <Button theme={activePreset === 'today' ? 'solid' : 'light'} aria-pressed={activePreset === 'today'} onClick={() => choosePreset(0)}>今天</Button>
@@ -232,15 +230,15 @@ const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopInd
           <div className="v2-track-date-grid"><label><span>开始时间</span><Input aria-label="开始时间" type="datetime-local" value={draft.dateFrom} onChange={(value) => onDraft({ ...draft, dateFrom: value })} /></label><label><span>结束时间</span><Input aria-label="结束时间" type="datetime-local" value={draft.dateTo} onChange={(value) => onDraft({ ...draft, dateTo: value })} /></label></div>
           <label><span id="track-source-label">数据来源</span><Select aria-labelledby="track-source-label" value={draft.protocol} onChange={(value) => onDraft({ ...draft, protocol: String(value) })} optionList={[{ value: '', label: '自动选择最佳来源' }, { value: 'GB32960', label: 'GB32960 · 仪表盘里程' }, { value: 'JT808', label: 'JT808 · GPS 里程' }, { value: 'YUTONG_MQTT', label: 'YUTONG · 仪表盘里程' }]} /></label>
           <Button className="v2-track-query-button" theme="solid" htmlType="submit" icon={<IconSearch />} loading={loading} disabled={!draft.keyword.trim()}>查询轨迹</Button>
-        </form>}
+        </form> : null}
       </section>
 
       <section className="v2-track-rail-result">
         <WorkspacePanelHeader
           variant="compact"
           className="v2-track-result-header"
-          title={track ? track.plate || track.vin : '轨迹证据'}
-          description={track ? track.vin : '停留、事件与来源统一呈现'}
+          title="轨迹证据"
+          description={track ? track.plate ? `${track.plate} · ${track.vin}` : track.vin : '停留、事件与来源统一呈现'}
           meta={<Tag color={track ? 'blue' : 'grey'} type="light" size="small">{track ? `${number(track.summary.distanceKm)} km` : '等待查询'}</Tag>}
         />
         <SegmentedTabs className="v2-track-rail-tabs" ariaLabel="轨迹明细分类" value={tab} onChange={onTab} items={[{ key: 'stops', label: '停留点', count: track?.stops.length ?? 0 }, { key: 'events', label: '事件点', count: track?.events.length ?? 0 }, { key: 'overview', label: '概览' }]} />
@@ -428,11 +426,11 @@ export default function TrackPage() {
       {query.isError ? <div className="v2-track-error"><InlineError message={query.error instanceof Error ? query.error.message : '轨迹查询失败'} onRetry={() => query.refetch()} /></div> : null}
 
       <Card className="v2-track-playback-dock" bodyStyle={{ padding: 0 }}>
-        <div className="v2-track-dock-summary"><strong>{track ? `${number(track.summary.distanceKm)} km` : '等待查询'}</strong><span>{track ? `${formatDuration(track.summary.durationSeconds)} · ${track.summary.stopCount} 次停留` : '查询后可播放完整轨迹'}</span></div>
+        <div className="v2-track-dock-summary"><small>行程里程</small><strong>{track ? `${number(track.summary.distanceKm)} km` : '等待查询'}</strong><span>{track ? `${formatDuration(track.summary.durationSeconds)} · ${track.summary.stopCount} 次停留` : '查询后可播放完整轨迹'}</span></div>
         <div className="v2-track-dock-progress">
           {track ? <SegmentRail track={track} /> : <div className="v2-track-segment-placeholder" />}
           <Slider key={`track-progress-${points.length}`} className="v2-track-progress-slider" aria-label="轨迹播放进度" min={0} max={Math.max(0, points.length - 1)} step={1} value={boundedIndex} onChange={(value) => selectIndex(Number(value))} disabled={!points.length} showBoundary={false} tipFormatter={(value) => `第 ${Number(value) + 1} / ${points.length} 个数据点`} />
-          <div className="v2-track-progress-meta"><time>{time(current?.deviceTime)}</time><span>数据点 {points.length ? boundedIndex + 1 : 0} / {points.length}</span><time>{time(track?.summary.endTime)}</time></div>
+          <div className="v2-track-progress-meta"><time>{time(current?.deviceTime)}</time><span>{playing ? '播放中' : '已暂停'} · 数据点 {points.length ? boundedIndex + 1 : 0} / {points.length}</span><time>{time(track?.summary.endTime)}</time></div>
         </div>
         <div className="v2-track-dock-controls">
           <Button theme="borderless" aria-label="上一个轨迹点" icon={<IconChevronLeft />} onClick={() => selectIndex(boundedIndex - 1)} disabled={!boundedIndex} />
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
index c5c17f51..9791934e 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/UsersPage.test.tsx
@@ -16,6 +16,7 @@ vi.mock('../hooks/useMobileLayout', () => ({ useMobileLayout: () => layout.mobil
 
 afterEach(() => {
   cleanup();
+  document.querySelectorAll('.semi-portal').forEach((portal) => portal.remove());
   layout.mobile = false;
   Object.values(mocks).forEach((mock) => mock.mockReset());
 });
@@ -310,8 +311,9 @@ test('filters the customer directory by status and exposes the active result sco
 
   fireEvent.click(screen.getByRole('combobox', { name: '访问状态' }));
   const attentionOption = await waitFor(() => {
-    const option = [...document.querySelectorAll<HTMLElement>('.semi-select-option')]
-      .find((item) => item.textContent?.includes('待完善权限'));
+    const options = [...document.querySelectorAll<HTMLElement>('.semi-select-option')]
+      .filter((item) => item.textContent?.includes('待完善权限'));
+    const option = options[options.length - 1];
     expect(option).toBeInTheDocument();
     return option!;
   });
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
index 0c2d9e94..2ea17b86 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -427,7 +427,7 @@
 /* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
  * one compact playback surface. */
 .v2-track-page {
-  grid-template-columns: 352px minmax(0, 1fr);
+  grid-template-columns: 340px minmax(0, 1fr);
   background: #edf2f7;
 }
 
@@ -530,6 +530,28 @@
   padding: 12px 14px 15px;
 }
 
+.v2-track-query .v2-track-date-grid {
+  grid-template-columns: 1fr;
+}
+
+.v2-track-query .v2-track-vehicle-picker.is-open {
+  height: auto;
+  flex-wrap: wrap;
+}
+
+.v2-track-query .v2-track-vehicle-options {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  max-height: 174px;
+  flex: 1 0 100%;
+  overflow: auto;
+  margin-top: 2px;
+  border-radius: 8px;
+  box-shadow: 0 8px 22px rgba(29, 43, 63, .11);
+  overscroll-behavior: contain;
+}
+
 .v2-track-rail-result {
   display: flex;
   min-height: 0;
@@ -868,12 +890,30 @@
   padding: 11px 16px !important;
 }
 
+.v2-track-dock-summary small,
+.v2-track-dock-summary strong,
+.v2-track-dock-summary span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-track-dock-summary small {
+  margin-bottom: 2px;
+  color: #8593a5;
+  font-size: 9px;
+  font-weight: 650;
+  letter-spacing: .04em;
+}
+
 .v2-track-dock-summary strong {
   font-size: 20px;
 }
 
 .v2-track-dock-summary span {
-  font-size: 11px;
+  margin-top: 3px;
+  font-size: 10px;
 }
 
 .v2-track-segment-rail,
@@ -887,9 +927,15 @@
 }
 
 .v2-track-progress-meta {
+  align-items: center;
   font-size: 10px;
 }
 
+.v2-track-progress-meta > span {
+  color: #5f7188;
+  font-weight: 650;
+}
+
 .v2-track-dock-controls {
   gap: 4px;
 }
@@ -909,7 +955,7 @@
 
 @media (max-width: 1180px) {
   .v2-track-page {
-    grid-template-columns: 320px minmax(0, 1fr);
+    grid-template-columns: 312px minmax(0, 1fr);
   }
 
   .v2-track-page.is-rail-collapsed {
@@ -955,8 +1001,17 @@
     padding: 8px 13px;
   }
 
-  .v2-track-result-header {
-    min-height: 60px;
+  .v2-track-query .v2-track-vehicle-options {
+    max-height: 156px;
+  }
+
+  .v2-track-detail-sidesheet .v2-track-result-header {
+    display: none;
+  }
+
+  .v2-track-detail-sidesheet .v2-track-date-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 7px;
   }
 
   .v2-track-stage-tools {