refine shared Semi UI command tokens

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

@@ -171,8 +171,10 @@ test('renders mobile access vehicles as selectable Semi cards', async () => {
   expect(within(action).getByText('宇通')).toBeInTheDocument();
   expect(screen.queryByLabelText('每页车辆数')).not.toBeInTheDocument();
   expect(screen.getByRole('button', { name: '打开接入治理' })).toHaveTextContent('治理');
+  expect(screen.getByRole('button', { name: '打开接入治理' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   const toolsButton = screen.getByRole('button', { name: '打开接入管理工具' });
   expect(toolsButton).toHaveTextContent('工具');
+  expect(toolsButton).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   expect(screen.queryByRole('menuitem', { name: /导出当前页/ })).not.toBeInTheDocument();
   fireEvent.click(toolsButton);
   await waitFor(() => expect(toolsButton).toHaveAttribute('aria-expanded', 'true'));

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

@@ -267,7 +267,7 @@ export default function AccessPage() {
         status={summary ? `${summary.totalVehicles.toLocaleString('zh-CN')} 辆主车辆` : '正在读取车辆'}
         meta={<Typography.Text type="tertiary">数据时间 <AccessTime value={summary?.asOf} /></Typography.Text>}
         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}
+          {editable ? <Button className="v2-workspace-mobile-tool-button is-muted" 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"
@@ -279,7 +279,7 @@ export default function AccessPage() {
               <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>
+            <Button className="v2-workspace-mobile-tool-button is-muted" 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></>}
       />

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

@@ -216,7 +216,9 @@ test('renders only selectable Semi history cards on mobile', async () => {
   expect(view.container.querySelector('.v2-history-side')).not.toBeInTheDocument();
   expect(mocks.historyExports).not.toHaveBeenCalled();
   expect(screen.getByRole('button', { name: '展开趋势' })).toHaveTextContent('趋势');
+  expect(screen.getByRole('button', { name: '展开趋势' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   expect(screen.getByRole('button', { name: '打开历史数据工具' })).toHaveTextContent('工具');
+  expect(screen.getByRole('button', { name: '打开历史数据工具' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   expect(screen.queryByText('坐标、速度、里程及设备/服务时间通过基础校验')).not.toBeInTheDocument();
   fireEvent.click(action);
   expect(action).toHaveAttribute('aria-pressed', 'true');

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

@@ -430,7 +430,7 @@ export default function HistoryPage() {
             meta={<span className="v2-history-result-meta"><Tag color="blue" type="light" size="small">{visibleMetrics.length} / {allMetrics.length} 字段</Tag>{resultSummary ? <span>{resultSummary.queryDurationMs} ms</span> : null}</span>}
             actionsClassName={`v2-history-result-actions${mobileLayout ? ' is-mobile-actions' : ''}`}
             actions={mobileLayout ? <>
-              <Button className={`v2-history-table-trend${trendExpanded ? ' is-expanded' : ''}`} theme="light" aria-label={trendExpanded ? '收起趋势' : '展开趋势'} aria-expanded={trendExpanded} icon={<IconChevronRight />} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起' : '趋势'}</Button>
+              <Button className={`v2-history-table-trend v2-workspace-mobile-tool-button is-muted${trendExpanded ? ' is-expanded' : ''}`} theme="light" aria-label={trendExpanded ? '收起趋势' : '展开趋势'} aria-expanded={trendExpanded} icon={<IconChevronRight />} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起' : '趋势'}</Button>
               <Dropdown
                 trigger="click"
                 position="bottomRight"
@@ -443,7 +443,7 @@ export default function HistoryPage() {
                   <Dropdown.Item icon={<IconRefresh />} onClick={() => { setMobileToolsOpen(false); void dataQuery.refetch(); }}>刷新数据</Dropdown.Item>
                 </Dropdown.Menu>}
               >
-                <Button theme="light" aria-label="打开历史数据工具" aria-haspopup="menu" aria-expanded={mobileToolsOpen} icon={<IconSetting />}>工具</Button>
+                <Button className="v2-workspace-mobile-tool-button is-muted" theme="light" aria-label="打开历史数据工具" aria-haspopup="menu" aria-expanded={mobileToolsOpen} icon={<IconSetting />}>工具</Button>
               </Dropdown>
             </> : <>
               <Button className={`v2-history-table-trend${trendExpanded ? ' is-expanded' : ''}`} theme="borderless" aria-label={trendExpanded ? '收起趋势' : '展开趋势'} aria-expanded={trendExpanded} icon={<IconChevronRight />} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起趋势' : '聚合趋势'}</Button>

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

@@ -71,6 +71,7 @@ test('renders reconciliation queue, loads evidence on demand and records review
   expect(await screen.findByText('质量问题队列')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '运行与数据质量', level: 5 })).toBeInTheDocument();
   expect(screen.getByLabelText('运维质量操作')).toHaveClass('v2-workspace-command-bar', 'v2-ops-command-bar');
+  expect(screen.getByRole('button', { name: '刷新全局证据' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   const navigation = screen.getByRole('navigation', { name: '运维质量视图' });
   expect(navigation).toHaveClass('v2-ops-navigation');
   expect(within(navigation).getByText('每日自动对账')).toBeInTheDocument();
@@ -87,6 +88,8 @@ test('renders reconciliation queue, loads evidence on demand and records review
   expect(screen.queryByText('活跃问题', { exact: true })).not.toBeInTheDocument();
   expect(screen.queryByText('近 30 天趋势')).not.toBeInTheDocument();
   const trendButton = screen.getByRole('button', { name: '30 天趋势' });
+  expect(trendButton).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
+  expect(screen.getByRole('button', { name: '刷新结果' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-muted');
   expect(trendButton).toHaveAttribute('aria-expanded', 'false');
   fireEvent.click(trendButton);
   expect(screen.getByText('近 30 天趋势').closest('.semi-card')).toHaveClass('v2-reconcile-trend');
@@ -148,6 +151,8 @@ test('renders only the compact mobile reconciliation surface and defers secondar
   fireEvent.click(mobileIssueAction);
   expect(await screen.findByRole('dialog', { name: '差异证据与处置' })).toBeInTheDocument();
   expect(document.querySelector('.v2-reconcile-detail-sidesheet .v2-reconcile-detail.is-sheet')).toBeInTheDocument();
+  expect(document.querySelector('.v2-reconcile-detail-sidesheet')).toHaveClass('semi-sidesheet-bottom');
+  expect(document.querySelector('.v2-reconcile-detail-sidesheet .semi-sidesheet-inner')).toHaveStyle({ height: 'min(84dvh, 740px)' });
   expect(await screen.findByRole('button', { name: '关闭差异详情' })).toBeInTheDocument();
   expect(mobileIssueAction).toHaveAttribute('aria-expanded', 'true');
   fireEvent.click(screen.getByRole('button', { name: '关闭差异详情' }));
@@ -161,6 +166,8 @@ test('renders only the compact mobile reconciliation surface and defers secondar
   expect(screen.queryByText('近 30 天趋势')).not.toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '30 天趋势' }));
   expect(await screen.findByRole('dialog', { name: '30 天差异趋势' })).toBeInTheDocument();
+  expect(document.querySelector('.v2-reconcile-trend-sidesheet')).toHaveClass('semi-sidesheet-bottom');
+  expect(document.querySelector('.v2-reconcile-trend-sidesheet .semi-sidesheet-inner')).toHaveStyle({ height: 'min(62dvh, 560px)' });
   const trend = screen.getByText('近 30 天趋势').closest('.v2-reconcile-trend');
   expect(trend).toBeInTheDocument();
   expect(screen.getByText(/最近运行/)).toBeInTheDocument();

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

@@ -375,7 +375,7 @@ export default function OperationsPage() {
       status={data?.runtime.dataMode === 'production' ? '生产模式' : '状态待确认'}
       statusColor={data?.runtime.dataMode === 'production' ? 'green' : 'orange'}
       meta={<Typography.Text type="tertiary">上海时间 · {data?.runtime.platformRelease ? `版本 ${data.runtime.platformRelease}` : '正在读取运行版本'}</Typography.Text>}
-      actions={<Button theme="light" icon={<IconRefresh />} loading={health.isFetching || readiness.isFetching} onClick={refresh}>刷新全局证据</Button>}
+      actions={<Button className="v2-workspace-mobile-tool-button is-muted" theme="light" icon={<IconRefresh />} aria-label="刷新全局证据" loading={health.isFetching || readiness.isFetching} onClick={refresh}>刷新全局证据</Button>}
     />
     <nav className="v2-ops-navigation" aria-label="运维质量视图">
       <SegmentedTabs

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

@@ -342,7 +342,7 @@ export default function ReconciliationCenter() {
       meta="每日自动对账"
       actions={<>
         <Button
-          className="v2-reconcile-trend-open"
+          className="v2-reconcile-trend-open v2-workspace-mobile-tool-button is-muted"
           theme="borderless"
           type="tertiary"
           icon={trendExpanded ? <IconChevronUp /> : <IconChevronDown />}
@@ -351,7 +351,7 @@ export default function ReconciliationCenter() {
           aria-controls="v2-reconcile-trend"
           onClick={() => setTrendExpanded((value) => !value)}
         >30 天趋势</Button>
-        <Button theme="light" icon={<IconRefresh />} loading={summary.isFetching || issues.isFetching} onClick={refresh}>刷新结果</Button>
+        <Button className="v2-workspace-mobile-tool-button is-muted" theme="light" icon={<IconRefresh />} aria-label="刷新结果" loading={summary.isFetching || issues.isFetching} onClick={refresh}>刷新结果</Button>
       </>}
     />
     {summary.isError ? <InlineError message={summary.error.message} onRetry={() => summary.refetch()} /> : null}
@@ -431,7 +431,8 @@ export default function ReconciliationCenter() {
   <SideSheet
     className="v2-reconcile-detail-sidesheet"
     visible={mobileLayout && Boolean(selectedID)}
-    width="100%"
+    placement="bottom"
+    height="min(84dvh, 740px)"
     aria-label="差异证据与处置"
     title={<div className="v2-reconcile-sheet-title"><strong>差异证据与处置</strong><span>{selectedIssue ? `${selectedIssue.plate || '平台级差异'} · ${ruleLabel(selectedIssue.ruleCode)}` : '加载规则证据与处置履历'}</span></div>}
     onCancel={closeDetail}
@@ -441,7 +442,8 @@ export default function ReconciliationCenter() {
   <SideSheet
     className="v2-reconcile-trend-sidesheet"
     visible={mobileLayout && trendExpanded}
-    width="100%"
+    placement="bottom"
+    height="min(62dvh, 560px)"
     aria-label="30 天差异趋势"
     title="30 天差异趋势"
     footer={null}

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

@@ -208,6 +208,7 @@ test('keeps the customer directory visible on mobile and opens details on demand
   expect(view.container.querySelector('.v2-user-mobile-picker')).not.toBeInTheDocument();
   expect(view.container.querySelector('.v2-customer-list.semi-list')).toBeInTheDocument();
   expect(screen.getByRole('textbox', { name: '搜索客户账号' })).toBeInTheDocument();
+  expect(screen.getByRole('button', { name: '新建客户账号' })).toHaveClass('v2-workspace-mobile-tool-button', 'is-primary');
   const filterToggle = screen.getByRole('button', { name: '修改账号范围：全部状态' });
   expect(filterToggle).toHaveAttribute('aria-expanded', 'false');
   fireEvent.click(filterToggle);

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

@@ -313,7 +313,7 @@ export default function UsersPage() {
         description="菜单与车辆按最小权限开放，变更最多 30 秒生效"
         status={`${customers.length} 个客户账号`}
         meta={<Typography.Text type="tertiary">本地账号 · 可扩展外部身份源</Typography.Text>}
-        actions={<Button theme="solid" icon={<IconPlus />} aria-label="新建客户账号" onClick={startCreate}>新建客户账号</Button>}
+        actions={<Button className="v2-workspace-mobile-tool-button is-primary" theme="solid" icon={<IconPlus />} aria-label="新建客户账号" onClick={startCreate}>新建客户账号</Button>}
       />
       <WorkspaceFilterPanel
         className="v2-user-filter-panel"

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

@@ -11,6 +11,14 @@
   --v2-red: #ef4444;
   --v2-shadow: 0 8px 28px rgba(25, 45, 74, 0.055);
   --v2-radius: 12px;
+  --v2-control-height-mobile: 38px;
+  --v2-control-height-touch: 42px;
+  --v2-control-radius: 8px;
+  --v2-control-border: #dbe5f0;
+  --v2-control-bg-muted: #f7f9fc;
+  --v2-control-text-muted: #536980;
+  --v2-menu-radius: 11px;
+  --v2-sheet-radius-mobile: 18px;
 }
 
 * { box-sizing: border-box; }

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -7011,17 +7011,17 @@
 .v2-workspace-mobile-tools-menu {
   width: 168px;
   min-width: 168px;
-  border: 1px solid #dbe4ef;
+  border: 1px solid var(--v2-control-border);
-  border-radius: 11px;
+  border-radius: var(--v2-menu-radius);
   padding: 6px;
   box-shadow: 0 18px 44px rgba(27, 45, 72, .16);
 }
 
 .v2-workspace-mobile-tools-menu .semi-dropdown-item {
-  min-height: 42px;
+  min-height: var(--v2-control-height-touch);
-  border-radius: 8px;
+  border-radius: var(--v2-control-radius);
   padding-inline: 11px;
-  color: #445a72;
+  color: var(--v2-control-text-muted);
   font-size: 11px;
   font-weight: 650;
 }
@@ -9341,28 +9341,6 @@
     font-size: 9px;
   }
 
-  .v2-access-command-bar .v2-workspace-command-actions > .v2-access-mobile-tool-button.semi-button {
-    width: auto;
-    min-width: 58px;
-    min-height: 38px;
-    border: 1px solid #dbe5f0;
-    border-radius: 8px;
-    background: #f7f9fc;
-    padding: 0 9px;
-    color: #536980;
-  }
-
-  .v2-access-command-bar .v2-access-mobile-tool-button .semi-button-content-right {
-    margin-left: 4px;
-    font-size: 10px;
-    font-weight: 700;
-  }
-
-  .v2-access-command-bar .v2-access-mobile-tool-button .semi-icon {
-    color: #5f7188;
-    font-size: 14px;
-  }
-
   .v2-access-discovery-shell > .v2-access-filter-card-v3.semi-card {
     border: 1px solid #dce6f2;
     border-radius: 10px;
@@ -13805,3 +13783,55 @@
     justify-content: center;
   }
 }
+
+@media (max-width: 680px) {
+  .semi-sidesheet-bottom .semi-sidesheet-inner {
+    border-radius: var(--v2-sheet-radius-mobile) var(--v2-sheet-radius-mobile) 0 0;
+  }
+
+  .v2-workspace-mobile-tool-button.semi-button {
+    width: auto !important;
+    min-width: 58px !important;
+    max-width: none;
+    min-height: var(--v2-control-height-mobile);
+    flex: 0 0 auto;
+    border-radius: var(--v2-control-radius);
+    padding-inline: 9px !important;
+    font-size: 10px !important;
+  }
+
+  .v2-workspace-mobile-tool-button.is-muted.semi-button {
+    border: 1px solid var(--v2-control-border);
+    background: var(--v2-control-bg-muted);
+    color: var(--v2-control-text-muted);
+  }
+
+  .v2-workspace-mobile-tool-button .semi-button-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px !important;
+  }
+
+  .v2-workspace-mobile-tool-button .semi-button-content-right {
+    display: inline-flex !important;
+    margin-left: 4px;
+    color: inherit;
+    font-size: 10px !important;
+    font-weight: 700;
+  }
+
+  .v2-workspace-mobile-tool-button .semi-icon {
+    margin-right: 0;
+    color: inherit;
+    font-size: 14px !important;
+  }
+
+  .v2-reconcile-heading > .v2-workspace-panel-actions > .v2-workspace-mobile-tool-button.semi-button {
+    width: auto !important;
+    min-width: 58px !important;
+    max-width: none;
+    flex-basis: auto;
+    padding-inline: 8px !important;
+  }
+}