diff --git a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx index 25a4f4f1..529e9c94 100644 --- a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx @@ -603,9 +603,12 @@ test('renders one selected plate and smoothly follows it until the map is dragge expect(setZoomAndCenter).toHaveBeenCalledTimes(1); const follow = screen.getByRole('button', { name: '跟随车辆' }); + expect(follow).toHaveClass('semi-button', 'v2-map-control-button', 'v2-map-follow-control', 'is-active'); + expect(follow).toHaveTextContent('跟随中'); expect(follow).toHaveAttribute('aria-pressed', 'true'); act(() => mapHandlers.get('dragstart')?.({})); expect(follow).toHaveAttribute('aria-pressed', 'false'); + expect(follow).toHaveTextContent('已暂停'); const panCountAfterDrag = panTo.mock.calls.length; view.rerender( @@ -640,9 +643,12 @@ test('renders one selected plate and smoothly follows it until the map is dragge expect(markerOptions[markerOptions.length - 1]?.content).toContain('is-idle'); const toggle = screen.getByRole('button', { name: '悬浮车牌' }); + expect(toggle).toHaveClass('semi-button', 'v2-map-control-button', 'v2-map-layer-control', 'is-active'); + expect(toggle).toHaveTextContent('已显示'); expect(toggle).toHaveAttribute('aria-pressed', 'true'); fireEvent.click(toggle); await waitFor(() => expect(toggle).toHaveAttribute('aria-pressed', 'false')); + expect(toggle).toHaveTextContent('已隐藏'); expect(removeLabels).toHaveBeenCalled(); const hiddenFloatingLabels = removeLabels.mock.calls[removeLabels.mock.calls.length - 1]?.[0] as TestLabelMarker[]; expect(hiddenFloatingLabels).toHaveLength(1); diff --git a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx index fecdc156..671bcf38 100644 --- a/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx +++ b/vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx @@ -1,4 +1,5 @@ import { IconEyeClosed, IconEyeOpened, IconMapPin } from '@douyinfe/semi-icons'; +import { Button, Tag } from '@douyinfe/semi-ui'; import { useEffect, useMemo, useRef, useState } from 'react'; import { getAMapConfig, isAMapConfigured } from '../../config/appConfig'; import { @@ -1020,32 +1021,35 @@ export function FleetMap({ vehicles, selectedVin, onSelect, monitorMap, onSelect return (
-
+
{selectedVin ? ( - + 跟随车辆{followSelected ? '车辆移动时实时居中' : '地图由你自由浏览'} + {followSelected ? '跟随中' : '已暂停'} + ) : null} - + 悬浮车牌{monitorMap?.mode === 'clusters' || monitorMap?.mode === 'provinces' ? '下钻后应用显示设置' : '车辆明细点标签'} + {showLabels ? '已显示' : '已隐藏'} +
{state !== 'ready' ? (
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 58961cbf..e2e8697a 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/v2.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/v2.css @@ -302,22 +302,52 @@ button, a { -webkit-tap-highlight-color: transparent; } .v2-fleet-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e8f0f6; } .v2-fleet-map-canvas { position: absolute; inset: 0; } .v2-map-controls { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; align-items: stretch; gap: 8px; } -.v2-map-layer-control { display: grid; height: 44px; grid-template-columns: auto auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 10px; color: #435168; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; } -.v2-map-layer-control > svg { color: var(--v2-blue); font-size: 15px; } -.v2-map-layer-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } -.v2-map-layer-control strong { font-size: 10px; line-height: 1.2; } -.v2-map-layer-control small { color: #7b8ba0; font-size: 8px; } -.v2-map-layer-control > i { position: relative; width: 24px; height: 14px; border-radius: 8px; background: #cbd5e1; transition: background .16s; } -.v2-map-layer-control > i::after { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); content: ""; transition: transform .16s; } -.v2-map-layer-control > i.is-on { background: var(--v2-blue); } -.v2-map-layer-control > i.is-on::after { transform: translateX(10px); } -.v2-map-follow-control { display: grid; height: 44px; grid-template-columns: auto auto; align-items: center; gap: 8px; border: 1px solid #d7e1ee; border-radius: 8px; background: #fff; padding: 0 11px; color: #607086; box-shadow: 0 5px 16px rgba(21,32,51,.1); cursor: pointer; transition: border-color .16s, background .16s, color .16s; } -.v2-map-follow-control > svg { font-size: 16px; } -.v2-map-follow-control span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } -.v2-map-follow-control strong { font-size: 10px; line-height: 1.2; } -.v2-map-follow-control small { color: #8a98aa; font-size: 8px; } -.v2-map-follow-control.is-active { border-color: #9ec0f7; background: #eef5ff; color: #1268f3; } -.v2-map-follow-control.is-active small { color: #4e82cf; } +.v2-map-control-button.semi-button { + width: auto; + height: 46px; + border: 1px solid rgba(210,220,233,.96); + border-radius: 10px; + background: rgba(255,255,255,.96); + padding: 0 9px 0 11px; + color: #53677f; + box-shadow: 0 9px 26px rgba(21,32,51,.13); + backdrop-filter: blur(14px); + transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; +} +.v2-map-control-button.semi-button:hover { + border-color: #b9cae0; + background: #fff; + box-shadow: 0 12px 30px rgba(21,32,51,.16); + transform: translateY(-1px); +} +.v2-map-control-button.semi-button:active { transform: translateY(0); } +.v2-map-control-button.semi-button.is-active { + border-color: #aac8f5; + background: rgba(244,248,255,.98); + color: var(--v2-blue); +} +.v2-map-control-button .semi-button-content { + display: grid; + min-width: 0; + grid-template-columns: auto minmax(0,1fr) auto; + align-items: center; + gap: 8px; +} +.v2-map-control-button .semi-icon { color: currentColor; font-size: 16px; } +.v2-map-control-copy { display: grid; min-width: 0; align-items: start; gap: 2px; text-align: left; } +.v2-map-control-copy strong { color: #31445b; font-size: 10px; line-height: 1.15; } +.v2-map-control-copy small { color: #8190a3; font-size: 8px; font-weight: 500; line-height: 1.15; white-space: nowrap; } +.v2-map-control-button.is-active .v2-map-control-copy strong { color: #245f9f; } +.v2-map-control-button.is-active .v2-map-control-copy small { color: #6387b7; } +.v2-map-control-state.semi-tag { + min-width: 44px; + height: 22px; + justify-content: center; + border-radius: 999px; + padding-inline: 7px; + font-size: 8px; + font-weight: 700; +} .v2-map-selection-marker { --v2-selection-color: #f59e0b; --v2-selection-rgb: 245,158,11; position: relative; width: 48px; height: 48px; pointer-events: none; } .v2-map-selection-marker.is-driving { --v2-selection-color: #1677ff; --v2-selection-rgb: 22,119,255; } .v2-map-selection-marker.is-idle { --v2-selection-color: #12a46f; --v2-selection-rgb: 18,164,111; } @@ -1651,8 +1681,12 @@ button, a { -webkit-tap-highlight-color: transparent; } .v2-nav-item { justify-content: center; padding: 0; } .v2-filterbar > .semi-card-body { grid-template-columns: 1fr 1fr; } .v2-search-field { grid-column: 1 / -1; } - .v2-monitor-workspace, .v2-monitor-workspace.is-detail-open, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); } - .v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(340px, calc(100% - 240px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); } + .v2-monitor-workspace, .v2-monitor-workspace.is-detail-collapsed { position: relative; grid-template-columns: 220px minmax(0, 1fr); } + .v2-monitor-workspace.is-detail-open { position: relative; grid-template-columns: minmax(0, 1fr); } + .v2-monitor-workspace.is-detail-open > .v2-vehicle-rail { display: none; } + .v2-monitor-workspace.is-detail-open .v2-map-controls { right: auto; left: 12px; } + .v2-monitor-workspace.is-detail-open .v2-map-legend { right: 370px; left: 12px; width: auto; max-width: none; transform: none; } + .v2-vehicle-detail { position: absolute; inset: 10px 10px 10px auto; z-index: 8; display: block; width: min(350px, calc(100% - 20px)); border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: 0 12px 36px rgba(21,32,51,.16); } .v2-detail-peek { position: absolute; right: 10px; bottom: 10px; z-index: 8; display: block; min-width: 0; min-height: 0; border: 1px solid #cfe0f8; border-radius: 22px; box-shadow: 0 7px 24px rgba(18,104,243,.16); } .v2-detail-peek .semi-button { width: auto; height: 44px; border-radius: 22px; padding: 0 14px; } .v2-detail-peek .semi-button-content { flex-direction: row; gap: 7px; } @@ -1894,9 +1928,10 @@ button, a { -webkit-tap-highlight-color: transparent; } .v2-vehicle-row { min-height: 64px; padding: 9px 11px; } .v2-vehicle-identity strong { font-size: 13px; } .v2-map-controls { top: 8px; right: 8px; gap: 6px; } - .v2-map-layer-control, .v2-map-follow-control { width: 44px; height: 44px; grid-template-columns: 1fr; justify-items: center; padding: 0; } - .v2-map-layer-control span:not(.semi-icon), .v2-map-layer-control > i, .v2-map-follow-control span:not(.semi-icon) { display: none; } - .v2-map-layer-control .semi-icon, .v2-map-follow-control .semi-icon { display: inline-flex; font-size: 18px; } + .v2-map-control-button.semi-button { width: 44px; height: 44px; padding: 0; } + .v2-map-control-button .semi-button-content { display: flex; width: 100%; justify-content: center; } + .v2-map-control-button .v2-map-control-copy, .v2-map-control-button .v2-map-control-state { display: none; } + .v2-map-control-button .semi-icon { display: inline-flex; font-size: 18px; } .v2-province-marker.is-compact { width: 68px; min-height: 38px; grid-template-columns: minmax(0,1fr) auto; gap: 4px; border-radius: 8px; padding: 6px 7px; } .v2-province-marker.is-compact > span { font-size: 11px; } .v2-province-marker.is-compact > strong { font-size: 17px; }