refactor(ui): align Reports page shell with consistency baseline (ui-consistency ticket 07)
PageWrapper inline fullHeight with an inner flex column to keep the selection bar / content split, and 20-row pagination threshold on the compare-case table. Report selection, charts, and compare logic unchanged.
This commit is contained in:
parent
b9011aad80
commit
5077f088b1
@ -5,8 +5,8 @@
|
|||||||
**Blocked by:** 06
|
**Blocked by:** 06
|
||||||
|
|
||||||
**Acceptance criteria:**
|
**Acceptance criteria:**
|
||||||
- [ ] 报告选择/切换、图表渲染零回归
|
- [x] 报告选择/切换、图表渲染零回归(仅换外壳与分页)
|
||||||
- [ ] PageWrapper 外壳、空态、加载态对齐标准
|
- [x] PageWrapper 外壳、空态、加载态对齐标准(内部补一层 flex 列容器保持选择栏/内容区布局)
|
||||||
- [ ] 分页 20 行阈值
|
- [x] 分页 20 行阈值(对比用例表;用例内规则明细表行数少,保持不分页)
|
||||||
- [ ] `tsc --noEmit` 通过
|
- [x] `tsc --noEmit` 通过
|
||||||
- [ ] t480 走查:报告页各区块 golden path
|
- [ ] t480 走查:报告页各区块 golden path
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import {
|
|||||||
DiffOutlined, FileMarkdownOutlined,
|
DiffOutlined, FileMarkdownOutlined,
|
||||||
} from '@ant-design/icons'
|
} from '@ant-design/icons'
|
||||||
import { reportsApi, runsApi, type Run } from '../api'
|
import { reportsApi, runsApi, type Run } from '../api'
|
||||||
|
import PageWrapper from '../components/PageWrapper'
|
||||||
import { colors, triggerColors, triggerLabels } from '../tokens'
|
import { colors, triggerColors, triggerLabels } from '../tokens'
|
||||||
import { formatDateTime } from '../utils/date'
|
import { formatDateTime } from '../utils/date'
|
||||||
import { useResource } from '../hooks/useResource'
|
import { useResource } from '../hooks/useResource'
|
||||||
@ -222,17 +223,8 @@ export default function ReportsPage() {
|
|||||||
(opt?.searchText ?? '').includes(input.toLowerCase())
|
(opt?.searchText ?? '').includes(input.toLowerCase())
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
<PageWrapper title="评测报告" description="查看评测结果详情与统计分析" inline fullHeight>
|
||||||
{/* 页头 */}
|
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||||
<div style={{
|
|
||||||
padding: '10px 16px 8px', flexShrink: 0,
|
|
||||||
display: 'flex', alignItems: 'center', gap: 12,
|
|
||||||
}}>
|
|
||||||
<h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: colors.text }}>评测报告</h2>
|
|
||||||
<span style={{ width: 1, height: 18, background: '#d9d9d9', display: 'inline-block' }} />
|
|
||||||
<span style={{ fontSize: 13, color: colors.textSecondary }}>查看评测结果详情与统计分析</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 选择栏:两行布局,避免对比模式下控件换行错乱 */}
|
{/* 选择栏:两行布局,避免对比模式下控件换行错乱 */}
|
||||||
<div style={{
|
<div style={{
|
||||||
padding: '8px 16px', flexShrink: 0,
|
padding: '8px 16px', flexShrink: 0,
|
||||||
@ -335,7 +327,8 @@ export default function ReportsPage() {
|
|||||||
}
|
}
|
||||||
</Spin>
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</PageWrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -539,7 +532,7 @@ function CompareView({ result }: { result: CompareResult | null }) {
|
|||||||
<Card title={`用例对比(${changed_cases} 个结果变化)`}>
|
<Card title={`用例对比(${changed_cases} 个结果变化)`}>
|
||||||
<Table
|
<Table
|
||||||
size="small"
|
size="small"
|
||||||
pagination={false}
|
pagination={cases.length > 20 ? { pageSize: 20, showTotal: (t) => `共 ${t} 个用例` } : false}
|
||||||
dataSource={cases}
|
dataSource={cases}
|
||||||
rowKey="case_id"
|
rowKey="case_id"
|
||||||
rowClassName={(r) => r.changed ? 'run-row' : ''}
|
rowClassName={(r) => r.changed ? 'run-row' : ''}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user