refine shared Semi UI command tokens

This commit is contained in:
lingniu
2026-07-18 15:44:17 +08:00
parent 8a2edc8bc9
commit f0c17eac4d
11 changed files with 89 additions and 37 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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"