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

refine Semi UI map controls

Browse Source
This commit is contained in:
lingniu
2026-07-18 07:09:05 +08:00
parent b54d5ba077
commit 45c0d4d9a3
3 changed files with 80 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
vehicle-data-platform/apps/web/src/v2/map/FleetMap.test.tsx
View File

@@ -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);

32
vehicle-data-platform/apps/web/src/v2/map/FleetMap.tsx
View File

@@ -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 (
<div className="v2-fleet-map">
<div ref={containerRef} className="v2-fleet-map-canvas" aria-label="车辆全局监控地图" />
<div className="v2-map-controls">
<div className="v2-map-controls" role="toolbar" aria-label="地图显示控制">
{selectedVin ? (
<button
type="button"
className={`v2-map-follow-control${followSelected ? ' is-active' : ''}`}
<Button
className={`v2-map-control-button v2-map-follow-control${followSelected ? ' is-active' : ''}`}
theme="light"
type={followSelected ? 'primary' : 'tertiary'}
icon={<IconMapPin />}
aria-label="跟随车辆"
aria-pressed={followSelected}
title={followSelected ? '车辆移动时保持居中；拖动地图可暂停' : '恢复车辆居中跟随'}
onClick={toggleFollow}
>
<IconMapPin />
<span><strong>跟随车辆</strong><small>{followSelected ? '实时居中' : '已暂停'}</small></span>
</button>
<span className="v2-map-control-copy"><strong>跟随车辆</strong><small>{followSelected ? '车辆移动时实时居中' : '地图由你自由浏览'}</small></span>
<Tag className="v2-map-control-state" color={followSelected ? 'blue' : 'grey'} type="light" size="small">{followSelected ? '跟随中' : '已暂停'}</Tag>
</Button>
) : null}
<button
type="button"
className="v2-map-layer-control"
<Button
className={`v2-map-control-button v2-map-layer-control${showLabels ? ' is-active' : ''}`}
theme="light"
type={showLabels ? 'primary' : 'tertiary'}
icon={showLabels ? <IconEyeOpened /> : <IconEyeClosed />}
aria-label="悬浮车牌"
aria-pressed={showLabels}
title={monitorMap?.mode === 'clusters' || monitorMap?.mode === 'provinces' ? '下钻地图后显示车辆车牌' : '显示或隐藏车辆悬浮车牌'}
onClick={() => setShowLabels((current) => !current)}
>
{showLabels ? <IconEyeOpened /> : <IconEyeClosed />}
<span><strong>悬浮车牌</strong><small>{monitorMap?.mode === 'clusters' || monitorMap?.mode === 'provinces' ? '下钻后显示' : '仅明细点'}</small></span>
<i className={showLabels ? 'is-on' : ''} />
</button>
<span className="v2-map-control-copy"><strong>悬浮车牌</strong><small>{monitorMap?.mode === 'clusters' || monitorMap?.mode === 'provinces' ? '下钻后应用显示设置' : '车辆明细点标签'}</small></span>
<Tag className="v2-map-control-state" color={showLabels ? 'blue' : 'grey'} type="light" size="small">{showLabels ? '已显示' : '已隐藏'}</Tag>
</Button>
</div>
{state !== 'ready' ? (
<div className={`v2-map-state is-${state}`}>

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

@@ -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; }