refine Semi UI map controls

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

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 (
     <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}`}>