From 23669d8190b007e0bcc7a0fd9711dcb0c5fdf8cf Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 18 Jul 2026 18:21:25 +0800 Subject: [PATCH] refine Semi UI track replay summary --- .../apps/web/src/v2/pages/TrackPage.test.tsx | 4 +- .../apps/web/src/v2/pages/TrackPage.tsx | 7 +- .../apps/web/src/v2/styles/v2.css | 6 +- .../apps/web/src/v2/styles/workspace.css | 76 +++++++++++++++++++ 4 files changed, 88 insertions(+), 5 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 c6177c1e..d24c1da1 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 @@ -227,7 +227,9 @@ test('renders a map-first replay workspace and connects stop, event, and panel i expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument(); fireEvent.click(screen.getByRole('button', { name: '隐藏查询与明细' })); - expect(screen.getByRole('button', { name: '打开轨迹详情' })).toBeInTheDocument(); + const expandRail = screen.getByRole('button', { name: '打开轨迹详情' }); + expect(expandRail).toBeInTheDocument(); + expect(expandRail).toHaveTextContent('轨迹详情8 km · 1 个停留'); fireEvent.click(screen.getByRole('button', { name: '打开轨迹详情' })); expect(screen.getByRole('button', { name: '隐藏查询与明细' })).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 7e382e44..8eb76d2f 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx @@ -393,7 +393,12 @@ export default function TrackPage() {
- {railCollapsed && track?.points.length ? : null} + {railCollapsed && track?.points.length ? : null}
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/v2.css b/vehicle-data-platform/apps/web/src/v2/styles/v2.css index 62e4725d..f73f0b64 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/v2.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/v2.css @@ -9273,9 +9273,9 @@ button, a { -webkit-tap-highlight-color: transparent; } .v2-mileage-query-panel.semi-card { flex: 0 0 auto; border-radius: 10px; } .v2-mileage-filter { min-height: 70px; - grid-template-columns: minmax(220px,1.45fr) minmax(112px,.65fr) minmax(112px,.65fr) auto auto minmax(255px,1.2fr); + grid-template-columns: minmax(190px,1.25fr) repeat(2,minmax(138px,.72fr)) auto minmax(170px,.9fr) minmax(232px,1.1fr); align-items: end; - gap: 9px; + gap: 7px; padding: 10px 12px; } .v2-mileage-filter > label { gap: 5px; font-size: 10px; } @@ -9340,7 +9340,7 @@ button, a { -webkit-tap-highlight-color: transparent; } .v2-mileage-evidence { min-height: 17px; flex: 0 0 auto; overflow: hidden; white-space: nowrap; } @media (max-width: 1100px) and (min-width: 681px) { - .v2-mileage-filter { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(112px,.55fr)) auto auto; } + .v2-mileage-filter { grid-template-columns: minmax(190px,1fr) repeat(2,minmax(138px,.72fr)) auto minmax(168px,.9fr); } .v2-mileage-ranges { grid-column: 1 / -1; } .v2-mileage-summary > .semi-card-body { grid-template-columns: minmax(285px,1fr) minmax(0,2fr); } } 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 75abd0dc..ea6dbd07 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -629,6 +629,63 @@ background: #e7edf4; } +.v2-track-rail-expand.semi-button { + top: 50%; + left: 14px; + min-width: 154px; + min-height: 50px; + justify-content: flex-start; + flex-direction: row; + gap: 9px; + border: 1px solid rgba(202, 216, 232, .98); + border-radius: 11px; + background: rgba(255, 255, 255, .97); + padding: 8px 11px; + color: var(--v2-blue); + box-shadow: 0 12px 28px rgba(28, 48, 74, .16); + transform: translateY(-50%); +} + +.v2-track-rail-expand.semi-button:hover { + border-color: #a9c3e7; + background: #fff; + box-shadow: 0 15px 32px rgba(28, 48, 74, .2); +} + +.v2-track-rail-expand.semi-button .semi-icon { + width: 30px; + height: 30px; + flex: 0 0 auto; + border-radius: 9px; + background: #eaf2ff; + color: var(--v2-blue); +} + +.v2-track-rail-expand.semi-button span { + max-width: none; +} + +.v2-track-rail-expand-copy { + display: grid; + min-width: 0; + gap: 2px; + text-align: left; +} + +.v2-track-rail-expand-copy strong { + color: #29415d; + font-size: 12px; + line-height: 1.35; +} + +.v2-track-rail-expand-copy small { + color: #75869a; + font-size: 9px; + font-weight: 550; + line-height: 1.35; + white-space: nowrap; +} + .v2-track-stage-tools { top: 14px; right: 14px; @@ -961,9 +1018,28 @@ } .v2-track-rail-expand { + top: auto; + left: 8px; + min-width: 138px; + min-height: 42px; + padding: 6px 9px; + transform: none; bottom: calc(116px + env(safe-area-inset-bottom)); } + .v2-track-rail-expand.semi-button .semi-icon { + width: 28px; + height: 28px; + } + + .v2-track-rail-expand-copy strong { + font-size: 11px; + } + + .v2-track-rail-expand-copy small { + font-size: 8px; + } + .v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand { bottom: calc(264px + env(safe-area-inset-bottom)); }