feat(web): refine mileage summary hierarchy
This commit is contained in:
@@ -77,11 +77,11 @@ test('renders only the desktop matrix with dates as columns and a period total',
|
|||||||
expect(view.container.querySelector('.v2-mileage-page > .v2-page-heading')).not.toBeInTheDocument();
|
expect(view.container.querySelector('.v2-mileage-page > .v2-page-heading')).not.toBeInTheDocument();
|
||||||
expect(view.container.querySelector('.v2-mileage-summary')).toHaveClass('v2-workspace-metric-rail', 'is-queue');
|
expect(view.container.querySelector('.v2-mileage-summary')).toHaveClass('v2-workspace-metric-rail', 'is-queue');
|
||||||
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveAttribute('aria-label', '里程查询统计信息');
|
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveAttribute('aria-label', '里程查询统计信息');
|
||||||
expect(view.container.querySelectorAll('.v2-mileage-summary .v2-workspace-metric-list > span')).toHaveLength(4);
|
expect(view.container.querySelectorAll('.v2-mileage-summary .v2-workspace-metric-list > span')).toHaveLength(3);
|
||||||
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list > span.is-primary')).toHaveTextContent('区间总里程193.3 km2 条车辆日记录');
|
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list > span.is-primary')).toHaveTextContent('区间总里程193.3 km2 条车辆日记录');
|
||||||
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('已绑定主车辆1 辆已选择 1 辆');
|
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('已绑定主车辆1 辆已选择 1 辆');
|
||||||
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('统计天数2 天2026/07/13 — 07/14');
|
|
||||||
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('日均里程96.7 km按有效车辆日平均');
|
expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('日均里程96.7 km按有效车辆日平均');
|
||||||
|
expect(view.container.querySelector('.v2-mileage-summary-window')).toHaveTextContent('统计窗口2 天2026/07/13 — 07/14');
|
||||||
expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument();
|
expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument();
|
||||||
expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('0 km已上报、无里程增量');
|
expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('0 km已上报、无里程增量');
|
||||||
expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('—无可用里程');
|
expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('—无可用里程');
|
||||||
|
|||||||
@@ -328,13 +328,6 @@ function SummaryRail({ data, criteria, fleetTotal, loading }: { data?: MileageSt
|
|||||||
tone: 'success',
|
tone: 'success',
|
||||||
emphasis: 'primary'
|
emphasis: 'primary'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: '统计天数',
|
|
||||||
value: withUnit(days, '天'),
|
|
||||||
note: summaryRange,
|
|
||||||
tone: 'neutral',
|
|
||||||
emphasis: 'secondary'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: '日均里程',
|
label: '日均里程',
|
||||||
value: loading ? '—' : withUnit(formatKm(data?.averageDailyMileageKm), 'km'),
|
value: loading ? '—' : withUnit(formatKm(data?.averageDailyMileageKm), 'km'),
|
||||||
@@ -348,6 +341,11 @@ function SummaryRail({ data, criteria, fleetTotal, loading }: { data?: MileageSt
|
|||||||
className="v2-mileage-summary"
|
className="v2-mileage-summary"
|
||||||
ariaLabel="里程查询统计信息"
|
ariaLabel="里程查询统计信息"
|
||||||
items={items}
|
items={items}
|
||||||
|
context={<span className="v2-mileage-summary-window">
|
||||||
|
<small>统计窗口</small>
|
||||||
|
<strong>{days} 天</strong>
|
||||||
|
<em>{summaryRange}</em>
|
||||||
|
</span>}
|
||||||
/>;
|
/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15384,6 +15384,43 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body {
|
||||||
|
grid-template-columns: minmax(0, 1fr) 218px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list {
|
||||||
|
grid-template-columns: minmax(240px, 1.3fr) minmax(210px, 1fr) minmax(190px, .86fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list > span:first-child {
|
||||||
|
background: linear-gradient(145deg, #f3f8ff 0%, #f8fbff 100%);
|
||||||
|
box-shadow: inset 3px 0 #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list > span:first-child > strong {
|
||||||
|
color: #0f5fc7;
|
||||||
|
font-size: clamp(22px, 2vw, 28px);
|
||||||
|
letter-spacing: -.035em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-context {
|
||||||
|
background: #f8fafc;
|
||||||
|
padding-inline: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary-window {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary-window strong {
|
||||||
|
color: #334b66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary-window em {
|
||||||
|
color: #7f8ea1;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
.v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body {
|
.v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body {
|
||||||
background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
|
background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
|
||||||
}
|
}
|
||||||
@@ -15693,6 +15730,14 @@
|
|||||||
min-width: 52px;
|
min-width: 52px;
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body {
|
||||||
|
grid-template-columns: minmax(0, 1fr) 190px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list {
|
||||||
|
grid-template-columns: minmax(210px, 1.2fr) minmax(180px, 1fr) minmax(155px, .82fr);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 680px) {
|
@media (max-width: 680px) {
|
||||||
@@ -15733,6 +15778,18 @@
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body {
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.v2-mileage-summary .v2-workspace-metric-list > span:first-child > strong {
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
.v2-mileage-query-panel .v2-mileage-vehicle-field > small {
|
.v2-mileage-query-panel .v2-mileage-vehicle-field > small {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -24817,7 +24874,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.v2-mileage-summary .v2-workspace-metric-list {
|
.v2-mileage-summary .v2-workspace-metric-list {
|
||||||
grid-template-columns: 1.3fr 1.1fr .9fr .9fr;
|
grid-template-columns: minmax(240px, 1.3fr) minmax(210px, 1fr) minmax(190px, .86fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.v2-mileage-summary .v2-workspace-metric-list > span {
|
.v2-mileage-summary .v2-workspace-metric-list > span {
|
||||||
|
|||||||
Reference in New Issue
Block a user