shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine Semi UI mobile history workspace

Browse Source
This commit is contained in:
lingniu
2026-07-18 08:06:08 +08:00
parent fb171fb0de
commit 1adcff5ecb
3 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,6 +180,9 @@ test('renders only selectable Semi history cards on mobile', async () => {
expect(action).toHaveAttribute('aria-expanded', 'false');
expect(view.container.querySelector('.v2-history-table-scroll.is-mobile-scroll')).toHaveAttribute('aria-label', '历史明细列表，可上下滚动');
expect(view.container.querySelector('.v2-history-table-scroll.is-mobile-scroll')).toHaveAttribute('tabindex', '0');
expect(view.container.querySelector('.v2-history-metric-scroll')).toHaveAttribute('aria-label', '当前显示字段，可左右滑动');
expect(view.container.querySelector('.v2-history-metric-scroll')).toHaveAttribute('tabindex', '0');
expect(view.container.querySelector('.v2-history-result-actions')).toHaveClass('is-mobile-actions');
expect(screen.queryByText('MOBILEVIN-evidence')).not.toBeInTheDocument();
expect((mocks.historyData.mock.calls[0]?.[0] as URLSearchParams).get('limit')).toBe('20');
expect(screen.queryByLabelText('每页数量')).not.toBeInTheDocument();

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

@@ -355,7 +355,11 @@ export default function HistoryPage() {
<strong>显示字段</strong>
<small>{visibleMetrics.length} / {allMetrics.length}</small>
</div>
<div className="v2-history-metric-scroll" aria-label="当前显示字段">
<div
className="v2-history-metric-scroll"
tabIndex={mobileLayout ? 0 : undefined}
aria-label={mobileLayout ? '当前显示字段，可左右滑动' : '当前显示字段'}
>
{visibleMetrics.map((metric) => <Tag className="v2-history-metric-tag" color="blue" type="light" size="large" closable tabIndex={0} aria-label={`已选字段 ${metric.label}${metric.unit ? ` ${metric.unit}` : ''}，点击取消显示`} onClick={() => toggleMetric(metric.key)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMetric(metric.key); } }} onClose={(_, event) => { event.stopPropagation(); toggleMetric(metric.key); }} key={metric.key}>{metric.label}{metric.unit ? ` (${metric.unit})` : ''}</Tag>)}
{allMetrics.length > visibleMetrics.length ? <span>另有 {allMetrics.length - visibleMetrics.length} 项可选</span> : !allMetrics.length ? <span>查询后加载可用指标</span> : null}
</div>
@@ -378,7 +382,7 @@ export default function HistoryPage() {
title="历史明细"
description={keywords.length ? `${(result?.total ?? 0).toLocaleString('zh-CN')} 条记录 · ${resultSummary?.vehicleCount ?? 0} 辆车辆 · ${summarySources}` : '选择车辆和时间范围后查询'}
meta={resultSummary ? `${resultSummary.queryDurationMs} ms` : undefined}
actionsClassName="v2-history-result-actions"
actionsClassName={`v2-history-result-actions${mobileLayout ? ' is-mobile-actions' : ''}`}
actions={<>
<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>
<Button theme="borderless" aria-label="列设置" aria-haspopup="dialog" aria-expanded={columnSettingsOpen} aria-controls="v2-history-column-settings" icon={<IconSetting />} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置</Button>

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

@@ -6371,23 +6371,46 @@
}
.v2-history-context-card.semi-card {
min-height: 110px;
min-height: 126px;
border-radius: 11px;
}
.v2-history-context {
display: flex;
min-height: 110px;
min-height: 126px;
flex-direction: column;
}
.v2-history-context .v2-history-metrics {
min-height: 52px;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 7px;
min-height: 68px;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 6px 8px;
border-right: 0;
border-bottom: 1px solid #e5ebf2;
padding: 8px 9px;
padding: 7px 9px 8px;
}
.v2-history-metrics-heading {
grid-column: 1;
grid-row: 1;
align-items: baseline;
flex-direction: row;
gap: 6px;
}
.v2-history-metric-scroll {
width: 100%;
grid-column: 1 / -1;
grid-row: 2;
padding: 1px 12px 1px 0;
scroll-padding-inline: 0 12px;
scroll-snap-type: inline proximity;
scrollbar-width: none;
}
.v2-history-metric-scroll::-webkit-scrollbar {
display: none;
}
.v2-history-metrics-heading > strong {
@@ -6400,18 +6423,21 @@
.v2-history-context .v2-history-metric-tag.semi-tag {
height: 28px;
scroll-snap-align: start;
font-size: 10px;
}
.v2-history-context .v2-history-metrics-manage.semi-button {
width: 34px;
min-width: 34px;
min-height: 34px;
padding: 0;
width: auto;
min-width: 76px;
min-height: 30px;
grid-column: 2;
grid-row: 1;
padding: 0 8px;
}
.v2-history-context .v2-history-metrics-manage .semi-button-content-right {
display: none;
display: inline;
}
.v2-history-context .v2-history-summary {
@@ -6475,8 +6501,7 @@
font-size: 9px;
}
.v2-history-table-card .v2-workspace-panel-meta,
.v2-history-table-card .v2-workspace-panel-actions > .semi-button .semi-button-content {
.v2-history-table-card .v2-workspace-panel-meta {
display: none;
}
@@ -6491,6 +6516,25 @@
padding: 0;
}
.v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-button-content {
display: inline-flex;
align-items: center;
justify-content: center;
}
.v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-button-content-right {
display: none;
}
.v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-icon {
color: #5f7188;
font-size: 16px;
}
.v2-history-table-card .v2-history-result-actions.is-mobile-actions > .v2-history-table-trend.is-expanded .semi-icon {
color: var(--v2-blue);
}
.v2-history-workspace {
min-height: 0;
flex: 1 1 0;