refine Semi UI history workspace
This commit is contained in:
lingniu
@@ -110,13 +110,15 @@ test('clears stale rows, charts, and evidence as soon as the history scope chang
|
||||
const view = renderPage();
|
||||
expect((await screen.findAllByText('旧车牌')).length).toBeGreaterThan(0);
|
||||
expect(screen.queryByText('OLDVIN-evidence')).not.toBeInTheDocument();
|
||||
for (const className of ['v2-history-filter-card', 'v2-history-metrics-card', 'v2-history-summary', 'v2-history-trend', 'v2-history-table-card']) {
|
||||
for (const className of ['v2-history-filter-card', 'v2-history-context-card', 'v2-history-table-card']) {
|
||||
expect(view.container.querySelector(`.${className}.semi-card`)).toBeInTheDocument();
|
||||
}
|
||||
expect(view.container.querySelector('.v2-history-context .v2-history-metrics')).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-context .v2-history-summary')).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-evidence')).not.toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-workspace')).not.toHaveClass('is-inspector-open');
|
||||
expect(screen.getByRole('heading', { level: 5, name: '聚合趋势' })).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-trend')).toHaveClass('is-collapsed');
|
||||
expect(screen.queryByRole('heading', { level: 5, name: '聚合趋势' })).not.toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-trend')).not.toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /展开趋势/ })).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(screen.queryByRole('heading', { level: 5, name: '导出任务' })).not.toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-data-table.semi-table-wrapper')).toBeInTheDocument();
|
||||
@@ -139,6 +141,8 @@ test('clears stale rows, charts, and evidence as soon as the history scope chang
|
||||
expect(desktopHistoryRow).toHaveAttribute('aria-expanded', 'true');
|
||||
fireEvent.click(screen.getByRole('button', { name: /展开趋势/ }));
|
||||
await waitFor(() => expect(mocks.historySeries).toHaveBeenCalledTimes(1));
|
||||
expect(screen.getByRole('heading', { level: 5, name: '聚合趋势' })).toBeInTheDocument();
|
||||
expect(view.container.querySelector('.v2-history-trend')).toHaveClass('is-expanded');
|
||||
|
||||
fireEvent.change(screen.getByPlaceholderText('车牌 / VIN，多台用逗号分隔'), { target: { value: 'NEWVIN' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: '查询' }));
|
||||
|
||||
@@ -9,7 +9,6 @@ import { buildHistorySeriesPanels, formatExportFileSize, formatHistoryValue, for
|
||||
import { downloadBlob } from '../domain/download';
|
||||
import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
|
||||
import { MonitorReturnBar } from '../shared/MonitorReturnBar';
|
||||
import { PageHeader } from '../shared/PageHeader';
|
||||
import { TablePagination } from '../shared/TablePagination';
|
||||
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
|
||||
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
|
||||
@@ -57,18 +56,18 @@ function HistoryTrend({ response, category, loading, error, hasMetrics, expanded
|
||||
const header = <WorkspacePanelHeader
|
||||
title="聚合趋势"
|
||||
description={description}
|
||||
meta={expanded && summary ? `${formatSeriesGrain(summary.grainSeconds)}粒度 · 覆盖 ${coverage.toFixed(1)}% · ${summary.rawPointCount.toLocaleString('zh-CN')} 原始点` : undefined}
|
||||
meta={summary ? `${formatSeriesGrain(summary.grainSeconds)}粒度 · 覆盖 ${coverage.toFixed(1)}% · ${summary.rawPointCount.toLocaleString('zh-CN')} 原始点` : undefined}
|
||||
actions={<Button
|
||||
className={`v2-history-trend-toggle${expanded ? ' is-expanded' : ''}`}
|
||||
className="v2-history-trend-toggle is-expanded"
|
||||
theme="borderless"
|
||||
type="tertiary"
|
||||
size="small"
|
||||
icon={<IconChevronRight />}
|
||||
aria-expanded={expanded}
|
||||
aria-expanded="true"
|
||||
onClick={onToggle}
|
||||
>{expanded ? '收起趋势' : '展开趋势'}</Button>}
|
||||
>收起趋势</Button>}
|
||||
/>;
|
||||
if (!expanded) return <Card className="v2-history-trend is-collapsed" bodyStyle={{ padding: 0 }}>{header}</Card>;
|
||||
if (!expanded) return null;
|
||||
if (category !== 'location') return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}<Empty className="v2-history-chart-empty" title={category === 'raw' ? '原始报文不生成趋势' : '日里程按自然日展示'} description={category === 'raw' ? '离散报文请通过明细与导出核验证据。' : '请通过明细表核对每日起止里程。'} /></Card>;
|
||||
if (!hasMetrics) return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}<Empty className="v2-history-chart-empty" title="尚未选择趋势指标" description="选择“速度”或“总里程”后展示聚合趋势。" /></Card>;
|
||||
return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}
|
||||
@@ -331,12 +330,6 @@ export default function HistoryPage() {
|
||||
|
||||
return <div className="v2-history-page">
|
||||
<MonitorReturnBar />
|
||||
<PageHeader
|
||||
title="历史数据"
|
||||
description="按车辆、时间与协议查询可追溯数据，统一核对设备时间、服务时间、字段质量和原始证据。"
|
||||
status="证据可追溯"
|
||||
meta={<Typography.Text type="tertiary">{keywords.length ? `${keywords.length} 辆车辆` : '等待选择车辆'}</Typography.Text>}
|
||||
/>
|
||||
<WorkspaceFilterPanel
|
||||
className="v2-history-filter-card"
|
||||
title="查询范围"
|
||||
@@ -355,23 +348,44 @@ export default function HistoryPage() {
|
||||
<div className="v2-history-toolbar-actions"><Button className="v2-primary-button" theme="solid" htmlType="submit" disabled={!parseHistoryKeywords(draft.keywords).length}>查询</Button><Button className="v2-secondary-button" theme="light" onClick={reset}>重置</Button>{exportAllowed ? <CreateExportButton disabled={!resultRows.length} request={{ keywords, category: criteria.category, protocol: criteria.protocol || undefined, dateFrom: criteria.dateFrom, dateTo: criteria.dateTo, metrics: visibleKeys, format: 'csv' }} /> : <Tag className="v2-history-permission-tag" color="grey" type="light" size="large">只读</Tag>}</div>
|
||||
</form>
|
||||
</WorkspaceFilterPanel>
|
||||
<Card className="v2-history-metrics-card" bodyStyle={{ padding: 0 }}>
|
||||
<div className="v2-history-metrics">
|
||||
<strong>已选字段</strong>
|
||||
<div className="v2-history-metric-scroll" aria-label="当前显示字段">
|
||||
{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}
|
||||
<Card className="v2-history-context-card" bodyStyle={{ padding: 0 }}>
|
||||
<div className="v2-history-context">
|
||||
<div className="v2-history-metrics">
|
||||
<div className="v2-history-metrics-heading">
|
||||
<strong>显示字段</strong>
|
||||
<small>{visibleMetrics.length} / {allMetrics.length}</small>
|
||||
</div>
|
||||
<div className="v2-history-metric-scroll" aria-label="当前显示字段">
|
||||
{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>
|
||||
<Button className="v2-history-metrics-manage" theme="borderless" icon={<IconSetting />} aria-label="管理字段" onClick={() => setColumnSettingsOpen(true)} disabled={!allMetrics.length}>管理字段</Button>
|
||||
</div>
|
||||
<div className="v2-history-summary" aria-label="当前查询摘要">
|
||||
<div className="is-primary"><small>结果行数</small><strong>{result?.total?.toLocaleString('zh-CN') ?? '—'}</strong></div>
|
||||
<div><small>车辆数</small><strong>{resultSummary?.vehicleCount ?? '—'}</strong></div>
|
||||
<div><small>数据源</small><strong className="is-source" title={summarySources}>{summarySources}</strong></div>
|
||||
<div><small>查询耗时</small><strong>{resultSummary ? `${resultSummary.queryDurationMs} ms` : '—'}</strong></div>
|
||||
</div>
|
||||
<Button className="v2-history-metrics-manage" theme="borderless" icon={<IconSetting />} aria-label="管理字段" onClick={() => setColumnSettingsOpen(true)} disabled={!allMetrics.length}>管理字段</Button>
|
||||
</div>
|
||||
</Card>
|
||||
{dataQuery.isError ? <InlineError message={dataQuery.error instanceof Error ? dataQuery.error.message : '历史查询失败'} onRetry={() => dataQuery.refetch()} /> : null}
|
||||
<div className={`v2-history-workspace${selectedRow && !mobileLayout ? ' is-inspector-open' : ''}`}>
|
||||
<div className={`v2-history-main${trendExpanded ? ' has-expanded-trend' : ''}`}>
|
||||
<Card className="v2-history-summary" bodyStyle={{ padding: 0 }}><div><small>结果行数</small><strong>{result?.total?.toLocaleString('zh-CN') ?? '—'}</strong></div><div><small>车辆数</small><strong>{resultSummary?.vehicleCount ?? '—'}</strong></div><div><small>数据源</small><strong className="is-source" title={summarySources}>{summarySources}</strong></div><div><small>查询耗时</small><strong>{resultSummary ? `${resultSummary.queryDurationMs} ms` : '—'}</strong></div></Card>
|
||||
<HistoryTrend response={seriesQuery.data} category={criteria.category} loading={seriesQuery.isFetching} error={seriesQuery.isError ? (seriesQuery.error instanceof Error ? seriesQuery.error.message : '未知错误') : undefined} hasMetrics={Boolean(seriesMetricKey)} expanded={trendExpanded} onToggle={() => setTrendExpanded((value) => !value)} />
|
||||
<Card className={`v2-history-table-card is-${density}`} bodyStyle={{ padding: 0 }}>
|
||||
<WorkspacePanelHeader title="数据明细" actions={<><Button theme="borderless" aria-label="列设置" aria-haspopup="dialog" aria-expanded={columnSettingsOpen} aria-controls="v2-history-column-settings" icon={<IconSetting />} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置</Button>{exportAllowed ? <Button theme="borderless" aria-label="查看导出任务" aria-haspopup="dialog" aria-expanded={exportJobsOpen} aria-controls="v2-history-export-jobs" icon={<IconDownload />} onClick={() => setExportJobsOpen(true)}>导出任务</Button> : null}{!mobileLayout ? <Select aria-label="表格密度" value={density} onChange={(value) => setDensity(String(value) as typeof density)} optionList={[{ value: 'compact', label: '紧凑' }, { value: 'comfortable', label: '舒适' }]} /> : null}<Button theme="borderless" onClick={() => dataQuery.refetch()} aria-label="刷新历史数据" icon={<IconRefresh />} /></>} />
|
||||
<WorkspacePanelHeader
|
||||
title="历史明细"
|
||||
description={keywords.length ? `${(result?.total ?? 0).toLocaleString('zh-CN')} 条记录 · ${resultSummary?.vehicleCount ?? 0} 辆车辆 · ${summarySources}` : '选择车辆和时间范围后查询'}
|
||||
meta={resultSummary ? `${resultSummary.queryDurationMs} ms` : undefined}
|
||||
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>
|
||||
{exportAllowed ? <Button theme="borderless" aria-label="查看导出任务" aria-haspopup="dialog" aria-expanded={exportJobsOpen} aria-controls="v2-history-export-jobs" icon={<IconDownload />} onClick={() => setExportJobsOpen(true)}>导出任务</Button> : null}
|
||||
{!mobileLayout ? <Select aria-label="表格密度" value={density} onChange={(value) => setDensity(String(value) as typeof density)} optionList={[{ value: 'compact', label: '紧凑' }, { value: 'comfortable', label: '舒适' }]} /> : null}
|
||||
<Button theme="borderless" onClick={() => dataQuery.refetch()} aria-label="刷新历史数据" icon={<IconRefresh />} />
|
||||
</>}
|
||||
/>
|
||||
<ColumnVisibilityPanel visible={columnSettingsOpen} metrics={allMetrics} visibleKeys={visibleKeys} onToggle={toggleMetric} onShowAll={() => setVisibleMetrics(allMetrics.map((metric) => metric.key))} onReset={() => setVisibleMetrics(allMetrics.filter((metric) => metric.defaultVisible).map((metric) => metric.key))} onClose={() => setColumnSettingsOpen(false)} />
|
||||
<div className="v2-history-table-scroll">
|
||||
{mobileLayout
|
||||
|
||||
@@ -350,7 +350,7 @@ function TelemetryPanel({ data, pending, error }: { data?: LatestTelemetryRespon
|
||||
return <Card className="v2-record-card v2-telemetry-card" bodyStyle={{ padding: 0 }}>
|
||||
<WorkspacePanelHeader
|
||||
title="实时遥测"
|
||||
description="按协议与字段分类查看当前值、质量和来源"
|
||||
description="按协议查看当前值、质量和来源"
|
||||
meta={`${data?.values.length ?? 0} 项`}
|
||||
/>
|
||||
<div className="v2-telemetry-tabs">
|
||||
|
||||
@@ -55,12 +55,14 @@ describe('V2 production entry', () => {
|
||||
expect(source).toContain("from '@douyinfe/semi-ui'");
|
||||
expect(source).toContain('<Button');
|
||||
}
|
||||
for (const name of ['VehiclePage', 'HistoryPage', 'AlertsPage', 'AccessPage', 'UsersPage', 'OperationsPage']) {
|
||||
for (const name of ['VehiclePage', 'AlertsPage', 'AccessPage', 'UsersPage', 'OperationsPage']) {
|
||||
expect(corePageSources[name]).toContain("from '../shared/PageHeader'");
|
||||
expect(corePageSources[name]).toContain('<PageHeader');
|
||||
}
|
||||
expect(corePageSources.StatisticsPage).not.toContain("from '../shared/PageHeader'");
|
||||
expect(corePageSources.StatisticsPage).not.toContain('<PageHeader');
|
||||
for (const name of ['HistoryPage', 'StatisticsPage']) {
|
||||
expect(corePageSources[name]).not.toContain("from '../shared/PageHeader'");
|
||||
expect(corePageSources[name]).not.toContain('<PageHeader');
|
||||
}
|
||||
expect(corePageSources.VehiclePage).toContain('<Select');
|
||||
expect(corePageSources.VehiclePage).toContain('<Card className="v2-identity-band v2-record-card v2-live-card v2-live-overview v2-vehicle-command-card"');
|
||||
expect(corePageSources.VehiclePage).toContain('className="v2-live-grid" role="list" aria-label="车辆实时指标"');
|
||||
@@ -121,9 +123,10 @@ describe('V2 production entry', () => {
|
||||
expect(corePageSources.HistoryPage).toContain('v2-history-column-sidesheet');
|
||||
expect(corePageSources.HistoryPage).toContain('<Card key={row.id} className={`v2-history-mobile-card');
|
||||
expect(corePageSources.HistoryPage).toContain('v2-history-trend');
|
||||
for (const surface of ['v2-export-jobs', 'v2-history-evidence', 'v2-history-metrics-card', 'v2-history-summary']) {
|
||||
for (const surface of ['v2-export-jobs', 'v2-history-evidence', 'v2-history-context-card']) {
|
||||
expect(corePageSources.HistoryPage).toContain(`<Card className="${surface}"`);
|
||||
}
|
||||
expect(corePageSources.HistoryPage).toContain('<div className="v2-history-summary" aria-label="当前查询摘要">');
|
||||
expect(corePageSources.HistoryPage).toContain('<WorkspaceFilterPanel');
|
||||
expect(corePageSources.HistoryPage).toContain('className="v2-history-filter-card"');
|
||||
expect(corePageSources.HistoryPage).toContain('<Card className={`v2-history-table-card');
|
||||
|
||||
@@ -5396,3 +5396,442 @@
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI history workspace refinement.
|
||||
* Keep one query surface and one evidence surface; the table owns the viewport.
|
||||
*/
|
||||
.v2-history-context-card.semi-card {
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dce5ef;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 6px 20px rgba(31, 47, 70, .045);
|
||||
}
|
||||
|
||||
.v2-history-context-card > .semi-card-body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.v2-history-context {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
grid-template-columns: minmax(360px, 1.2fr) minmax(440px, .8fr);
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-right: 1px solid #e5ebf2;
|
||||
background: linear-gradient(90deg, #f8fbff 0%, #fff 30%);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading > strong {
|
||||
color: #30445d;
|
||||
font-size: 12px;
|
||||
font-weight: 720;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading > small {
|
||||
color: #8795a8;
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metric-tag.semi-tag {
|
||||
height: 30px;
|
||||
border-color: #c2d8f8;
|
||||
border-radius: 7px;
|
||||
background: #edf5ff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage.semi-button {
|
||||
min-width: 88px;
|
||||
min-height: 34px;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid #d9e4f1;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #526983;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 78px;
|
||||
grid-template-columns: 1.05fr .75fr 1.45fr .8fr;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary > div {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: 10px 13px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary > div + div::before {
|
||||
position: absolute;
|
||||
inset: 17px auto 17px 0;
|
||||
width: 1px;
|
||||
background: #e5ebf2;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary small {
|
||||
color: #7c8a9d;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary strong {
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
color: #27384f;
|
||||
font-size: 17px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 760;
|
||||
line-height: 1.1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary .is-primary strong {
|
||||
color: #1268df;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary strong.is-source {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-history-main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.v2-history-main > .v2-history-trend.semi-card {
|
||||
height: 190px;
|
||||
min-height: 190px;
|
||||
flex: 0 0 190px;
|
||||
}
|
||||
|
||||
.v2-history-main > .v2-history-table-card.semi-card {
|
||||
min-height: 180px;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.v2-history-workspace.is-inspector-open {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-header {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-copy > h5.semi-typography {
|
||||
color: #263950;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-copy > .semi-typography:last-child {
|
||||
max-width: min(46vw, 580px);
|
||||
overflow: hidden;
|
||||
color: #718096;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-meta {
|
||||
color: #8a97a8;
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.v2-history-table-trend .semi-icon,
|
||||
.v2-history-trend-toggle .semi-icon {
|
||||
transition: transform .18s ease;
|
||||
}
|
||||
|
||||
.v2-history-table-trend.is-expanded .semi-icon,
|
||||
.v2-history-trend-toggle.is-expanded .semi-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.v2-history-table-scroll {
|
||||
scrollbar-color: #b7c4d4 #f4f7fa;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.v2-history-table-scroll::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.v2-history-table-scroll::-webkit-scrollbar-track {
|
||||
background: #f4f7fa;
|
||||
}
|
||||
|
||||
.v2-history-table-scroll::-webkit-scrollbar-thumb {
|
||||
border: 2px solid #f4f7fa;
|
||||
border-radius: 999px;
|
||||
background: #b7c4d4;
|
||||
}
|
||||
|
||||
.v2-history-table-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #91a4ba;
|
||||
}
|
||||
|
||||
@media (min-width: 681px) {
|
||||
.v2-history-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
padding: 16px 18px 18px;
|
||||
}
|
||||
|
||||
.v2-history-filter-card .v2-workspace-filter-heading {
|
||||
min-height: 42px;
|
||||
padding-block: 6px;
|
||||
}
|
||||
|
||||
.v2-history-toolbar {
|
||||
min-height: 64px;
|
||||
padding: 9px 12px 10px;
|
||||
}
|
||||
|
||||
.v2-history-workspace {
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1260px) and (min-width: 681px) {
|
||||
.v2-history-context {
|
||||
grid-template-columns: minmax(300px, 1fr) minmax(390px, .95fr);
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics {
|
||||
gap: 8px;
|
||||
padding-inline: 11px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage.semi-button {
|
||||
min-width: 34px;
|
||||
width: 34px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage .semi-button-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary > div {
|
||||
padding-inline: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 800px) and (min-width: 901px) {
|
||||
.v2-history-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-history-workspace {
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) and (min-width: 681px) {
|
||||
.v2-history-context {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics {
|
||||
min-height: 58px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary {
|
||||
min-height: 66px;
|
||||
}
|
||||
|
||||
.v2-history-context-card.semi-card,
|
||||
.v2-history-context {
|
||||
min-height: 124px;
|
||||
}
|
||||
|
||||
.v2-history-workspace.is-inspector-open {
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.v2-history-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
gap: 8px;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v2-history-context-card.semi-card {
|
||||
min-height: 118px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.v2-history-context {
|
||||
display: flex;
|
||||
min-height: 118px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics {
|
||||
min-height: 54px;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 7px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e5ebf2;
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading > strong {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading > small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metric-tag.semi-tag {
|
||||
height: 28px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage.semi-button {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage .semi-button-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary {
|
||||
min-height: 64px;
|
||||
flex: 1;
|
||||
grid-template-columns: 1.1fr .72fr 1.18fr .78fr;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary > div {
|
||||
padding: 8px 7px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary > div + div::before {
|
||||
inset-block: 13px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary strong,
|
||||
.v2-history-context .v2-history-summary .is-primary strong {
|
||||
margin-top: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary strong.is-source {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-history-main {
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v2-history-main > .v2-history-table-card.semi-card {
|
||||
min-height: 430px;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.v2-history-main > .v2-history-trend.semi-card {
|
||||
height: 230px;
|
||||
min-height: 230px;
|
||||
flex-basis: 230px;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-header {
|
||||
min-height: 68px;
|
||||
align-items: flex-start;
|
||||
padding: 9px 8px;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-copy > .semi-typography:last-child {
|
||||
display: block;
|
||||
max-width: 72vw;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-meta,
|
||||
.v2-history-table-card .v2-workspace-panel-actions > .semi-button .semi-button-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-actions {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-history-table-card .v2-workspace-panel-actions > .semi-button {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
min-height: 34px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-history-mobile-list {
|
||||
gap: 7px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.v2-history-mobile-list > .v2-history-mobile-card.semi-card {
|
||||
border-radius: 9px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-history-mobile-card-content {
|
||||
padding: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user