refine Semi UI access workspace

vehicle-data-platform/apps/web/src/v2/pages/AccessPage.tsx

@@ -1,5 +1,5 @@
-import { IconChevronRight, IconClose, IconDownload, IconRefresh, IconSave, IconSearch, IconSetting } from '@douyinfe/semi-icons';
-import { Button, Card, CardGroup, Collapse, Descriptions, Empty, Input, Select, SideSheet, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import { IconChevronRight, IconClose, IconDownload, IconMore, IconRefresh, IconSave, IconSearch, IconSetting } from '@douyinfe/semi-icons';
+import { Button, Card, CardGroup, Collapse, Descriptions, Dropdown, Empty, Input, Select, SideSheet, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, KeyboardEvent, memo, useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
@@ -219,6 +219,7 @@ export default function AccessPage() {
   const mobileLayout = useMobileLayout();
   const [offset, setOffset] = useState(0); const [limit, setLimit] = useState(() => mobileLayout ? 20 : 50); const [selectedVIN, setSelectedVIN] = useState('');
   const [governanceOpen, setGovernanceOpen] = useState(false);
+  const [mobileToolsOpen, setMobileToolsOpen] = useState(false);
   const [thresholdDraft, setThresholdDraft] = useState<AccessThresholdUpdate>(); const queryClient = useQueryClient();
   const baseQuery = useMemo(() => Object.fromEntries(Object.entries(criteria).filter(([, value]) => value)) as AccessQuery, [criteria]);
   const vehicleScope = useMemo(() => queryScopeKey(baseQuery), [baseQuery]);
@@ -229,7 +230,10 @@ export default function AccessPage() {
   useEffect(() => { if (thresholdQuery.data && !thresholdDraft) setThresholdDraft({ version: thresholdQuery.data.version, defaultThresholdSec: thresholdQuery.data.defaultThresholdSec, delayThresholdSec: thresholdQuery.data.delayThresholdSec, longOfflineSec: thresholdQuery.data.longOfflineSec, protocols: thresholdQuery.data.protocols }); }, [thresholdDraft, thresholdQuery.data]);
   const updateThreshold = useMutation({ mutationFn: api.updateAccessThresholds, onSuccess: async (config) => { setThresholdDraft({ version: config.version, defaultThresholdSec: config.defaultThresholdSec, delayThresholdSec: config.delayThresholdSec, longOfflineSec: config.longOfflineSec, protocols: config.protocols }); await Promise.all([queryClient.invalidateQueries({ queryKey: ['access-summary'] }), queryClient.invalidateQueries({ queryKey: ['access-vehicles'] })]); } });
   useEffect(() => {
-    if (!mobileLayout) return;
+    if (!mobileLayout) {
+      setMobileToolsOpen(false);
+      return;
+    }
     setLimit(20);
     setOffset(0);
   }, [mobileLayout]);
@@ -257,10 +261,27 @@ export default function AccessPage() {
         className="v2-access-command-bar"
         ariaLabel="接入管理操作"
         title="真实来源与接入健康"
-        description="真实来源、在线健康与资料差异一处核对"
+        description={mobileLayout
+          ? summary ? `截至 ${compactTime(summary.asOf)} · ${summary.totalVehicles.toLocaleString('zh-CN')} 辆主车辆` : '正在读取最新接入状态'
+          : '真实来源、在线健康与资料差异一处核对'}
         status={summary ? `${summary.totalVehicles.toLocaleString('zh-CN')} 辆主车辆` : '正在读取车辆'}
         meta={<Typography.Text type="tertiary">数据时间 <AccessTime value={summary?.asOf} /></Typography.Text>}
-        actions={<>{editable ? <Button theme="light" icon={<IconSetting />} aria-haspopup="dialog" aria-controls="v2-access-governance" aria-expanded={governanceOpen} onClick={() => setGovernanceOpen(true)}>接入治理{unresolvedQuery.data?.total ? ` · ${unresolvedQuery.data.total}` : ''}</Button> : null}<Button theme="light" icon={<IconRefresh />} onClick={() => void refresh()}>刷新</Button></>}
+        actions={mobileLayout ? <>
+          {editable ? <Button className="v2-access-mobile-tool-button" theme="light" icon={<IconSetting />} aria-label="打开接入治理" aria-haspopup="dialog" aria-controls="v2-access-governance" aria-expanded={governanceOpen} onClick={() => setGovernanceOpen(true)}>治理{unresolvedQuery.data?.total ? ` · ${unresolvedQuery.data.total}` : ''}</Button> : null}
+          <Dropdown
+            trigger="click"
+            position="bottomRight"
+            visible={mobileToolsOpen}
+            onVisibleChange={setMobileToolsOpen}
+            contentClassName="v2-workspace-mobile-tools-menu"
+            render={<Dropdown.Menu>
+              <Dropdown.Item disabled={!rows.length} icon={<IconDownload />} onClick={() => { setMobileToolsOpen(false); downloadRows(rows); }}>导出当前页</Dropdown.Item>
+              <Dropdown.Item icon={<IconRefresh />} onClick={() => { setMobileToolsOpen(false); void refresh(); }}>刷新数据</Dropdown.Item>
+            </Dropdown.Menu>}
+          >
+            <Button className="v2-access-mobile-tool-button" theme="light" aria-label="打开接入管理工具" aria-haspopup="menu" aria-expanded={mobileToolsOpen} icon={<IconMore />}>工具</Button>
+          </Dropdown>
+        </> : <>{editable ? <Button theme="light" icon={<IconSetting />} aria-haspopup="dialog" aria-controls="v2-access-governance" aria-expanded={governanceOpen} onClick={() => setGovernanceOpen(true)}>接入治理{unresolvedQuery.data?.total ? ` · ${unresolvedQuery.data.total}` : ''}</Button> : null}<Button theme="light" icon={<IconRefresh />} onClick={() => void refresh()}>刷新</Button></>}
       />
       <WorkspaceFilterPanel
         className="v2-access-filter-card-v3"
@@ -292,7 +313,7 @@ export default function AccessPage() {
           title={scopeLabels[criteria.connectionState] || '车辆接入清单'}
           description="缺席协议仅表示当前未发现；优先核对异常、离线与资料差异"
           actionsClassName="v2-access-table-actions"
-          actions={<><ProtocolCoverage summary={summary} /><Button theme="light" icon={<IconDownload />} onClick={() => downloadRows(rows)} disabled={!rows.length}>导出当前页</Button></>}
+          actions={mobileLayout ? null : <><ProtocolCoverage summary={summary} /><Button theme="light" icon={<IconDownload />} onClick={() => downloadRows(rows)} disabled={!rows.length}>导出当前页</Button></>}
         />
         <nav className="v2-access-status-tabs" aria-label="接入差异筛选">{[
           { label: '主车辆', value: summary?.totalVehicles ?? 0, tone: 'all', connectionState: '', hint: '全部' },