refactor(ui): converge semi access workspace
This commit is contained in:
@@ -59,7 +59,7 @@ test('removes old access rows immediately when the vehicle filter scope changes'
|
|||||||
expect(screen.getByRole('navigation', { name: '接入差异筛选' })).toHaveClass('v2-access-status-tabs');
|
expect(screen.getByRole('navigation', { name: '接入差异筛选' })).toHaveClass('v2-access-status-tabs');
|
||||||
const accessMetrics = screen.getByRole('list', { name: '接入差异概览' });
|
const accessMetrics = screen.getByRole('list', { name: '接入差异概览' });
|
||||||
expect(accessMetrics.closest('.v2-access-metric-rail')).toHaveClass('semi-card', 'is-queue');
|
expect(accessMetrics.closest('.v2-access-metric-rail')).toHaveClass('semi-card', 'is-queue');
|
||||||
expect(within(accessMetrics).getAllByRole('listitem')).toHaveLength(4);
|
expect(within(accessMetrics).getAllByRole('listitem')).toHaveLength(2);
|
||||||
expect(within(accessMetrics).getByRole('button', { name: '筛选需关注,共 0 辆' })).toHaveClass('v2-workspace-metric-action');
|
expect(within(accessMetrics).getByRole('button', { name: '筛选需关注,共 0 辆' })).toHaveClass('v2-workspace-metric-action');
|
||||||
expect(within(accessMetrics).getByRole('button', { name: '筛选全部车辆,共 2 辆' })).toHaveAttribute('aria-pressed', 'true');
|
expect(within(accessMetrics).getByRole('button', { name: '筛选全部车辆,共 2 辆' })).toHaveAttribute('aria-pressed', 'true');
|
||||||
const protocolCoverage = screen.getByLabelText('真实协议来源概览');
|
const protocolCoverage = screen.getByLabelText('真实协议来源概览');
|
||||||
|
|||||||
@@ -390,16 +390,17 @@ export default function AccessPage() {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
const attentionVehicles = Math.max(0, (summary?.totalVehicles ?? 0) - (summary?.healthyVehicles ?? 0));
|
const attentionVehicles = Math.max(0, (summary?.totalVehicles ?? 0) - (summary?.healthyVehicles ?? 0));
|
||||||
const accessMetrics: WorkspaceQueueMetricRailItem[] = mobileLayout
|
const accessMetrics: WorkspaceQueueMetricRailItem[] = [
|
||||||
? [
|
accessMetric('需关注', attentionVehicles, 'attention', {
|
||||||
accessMetric('需关注', attentionVehicles, 'attention', { note: '异常与缺失', tone: 'warning', emphasis: 'primary' }),
|
note: mobileLayout ? '异常与缺失' : '异常、离线或缺失',
|
||||||
accessMetric('全部车辆', summary?.totalVehicles ?? 0, '', { note: '权威主车辆', tone: 'neutral', emphasis: 'primary' })
|
tone: 'warning',
|
||||||
]
|
emphasis: 'primary'
|
||||||
: [
|
}),
|
||||||
accessMetric('需关注', attentionVehicles, 'attention', { note: '异常、离线或缺失', tone: 'warning', emphasis: 'primary' }),
|
accessMetric('全部车辆', summary?.totalVehicles ?? 0, '', {
|
||||||
accessMetric('全部车辆', summary?.totalVehicles ?? 0, '', { note: '权威主车辆口径', tone: 'neutral', emphasis: 'primary' }),
|
note: mobileLayout ? '权威主车辆' : '权威主车辆口径',
|
||||||
accessMetric('尚无来源', summary?.neverReported ?? 0, 'not_connected', { note: '待核对设备映射', tone: 'warning', emphasis: 'secondary' }),
|
tone: 'neutral',
|
||||||
accessMetric('资料待维护', summary?.masterDataIncompleteVehicles ?? 0, 'master_data', { note: '品牌、车型或来源', tone: (summary?.masterDataIncompleteVehicles ?? 0) > 0 ? 'warning' : 'success', emphasis: 'secondary' })
|
emphasis: 'primary'
|
||||||
|
})
|
||||||
];
|
];
|
||||||
const scrollAccessTable = (event: KeyboardEvent<HTMLDivElement>) => {
|
const scrollAccessTable = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||||
if (mobileLayout || event.currentTarget !== event.target || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;
|
if (mobileLayout || event.currentTarget !== event.target || (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')) return;
|
||||||
|
|||||||
@@ -10755,6 +10755,16 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v2-access-command-bar .v2-workspace-command-copy > .semi-typography:first-child {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-command-bar .v2-workspace-command-copy > .semi-typography:last-child {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.v2-ops-command-bar {
|
.v2-ops-command-bar {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
@@ -10786,12 +10796,16 @@
|
|||||||
.v2-access-filter-v3 label > :is(.semi-input-wrapper, .semi-select),
|
.v2-access-filter-v3 label > :is(.semi-input-wrapper, .semi-select),
|
||||||
.v2-access-filter-actions > .semi-button {
|
.v2-access-filter-actions > .semi-button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 38px;
|
height: 40px;
|
||||||
min-height: 38px;
|
min-height: 40px;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v2-access-filter-v3 :is(.semi-input, .semi-select-selection-text) {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
.v2-access-filter-actions {
|
.v2-access-filter-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -10874,7 +10888,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-workspace-metric-list {
|
.v2-access-metric-rail .v2-workspace-metric-list {
|
||||||
grid-template-columns: 1.12fr 1.12fr .94fr .94fr;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-workspace-metric-list > span,
|
.v2-access-metric-rail .v2-workspace-metric-list > span,
|
||||||
@@ -10884,7 +10898,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-workspace-metric-action .semi-button-content {
|
.v2-access-metric-rail .v2-workspace-metric-action .semi-button-content {
|
||||||
padding-block: 5px;
|
padding: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-metric-rail .v2-workspace-metric-action .semi-button-content > small {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-metric-rail .v2-workspace-metric-action .semi-button-content > strong {
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-metric-rail .v2-workspace-metric-action .semi-button-content > em {
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-workspace-metric-list > span.is-action.is-active.is-warning {
|
.v2-access-metric-rail .v2-workspace-metric-list > span.is-action.is-active.is-warning {
|
||||||
@@ -10905,7 +10932,7 @@
|
|||||||
|
|
||||||
.v2-access-metric-rail .v2-access-protocol-coverage > small {
|
.v2-access-metric-rail .v2-access-protocol-coverage > small {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
font-size: 9px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-access-protocol-coverage > span {
|
.v2-access-metric-rail .v2-access-protocol-coverage > span {
|
||||||
@@ -10922,15 +10949,15 @@
|
|||||||
.v2-access-metric-rail .v2-access-protocol-coverage b {
|
.v2-access-metric-rail .v2-access-protocol-coverage b {
|
||||||
display: block;
|
display: block;
|
||||||
color: #49617d;
|
color: #49617d;
|
||||||
font-size: 9px;
|
font-size: 10px;
|
||||||
line-height: 12px;
|
line-height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-metric-rail .v2-access-protocol-coverage em {
|
.v2-access-metric-rail .v2-access-protocol-coverage em {
|
||||||
color: #2f5f9b;
|
color: #2f5f9b;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
line-height: 13px;
|
line-height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-table-v3 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
.v2-access-table-v3 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
|
||||||
@@ -11026,13 +11053,43 @@
|
|||||||
|
|
||||||
.v2-access-connection > span {
|
.v2-access-connection > span {
|
||||||
color: #4e5f76;
|
color: #4e5f76;
|
||||||
font-size: 10px;
|
font-size: 11px;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-connection > small {
|
.v2-access-connection > small {
|
||||||
color: #8b97a8;
|
color: #8b97a8;
|
||||||
font-size: 9px;
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 681px) {
|
||||||
|
.v2-access-table-v3 .v2-workspace-panel-copy > h5.semi-typography {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-table-v3 .v2-workspace-panel-copy > .semi-typography {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-semi-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-semi-table .v2-access-primary-cell > strong {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-semi-table .v2-access-primary-cell > span {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-semi-table .v2-access-protocol-cell > small {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-access-table-v3 .v2-table-pagination-info {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-access-time {
|
.v2-access-time {
|
||||||
|
|||||||
Reference in New Issue
Block a user