From 5077f088b152d525c87381de5b8a64b7dcdd7607 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Wed, 5 Aug 2026 20:26:43 +0800
Subject: [PATCH] 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.
---
 .scratch/ui-consistency/issues/07-reports.md |  8 ++++----
 frontend/web/src/pages/Reports.tsx           | 19 ++++++-------------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/.scratch/ui-consistency/issues/07-reports.md b/.scratch/ui-consistency/issues/07-reports.md
index dcb82ac..19bdeb2 100644
--- a/.scratch/ui-consistency/issues/07-reports.md
+++ b/.scratch/ui-consistency/issues/07-reports.md
@@ -5,8 +5,8 @@
 **Blocked by:** 06
 
 **Acceptance criteria:**
-- [ ] 报告选择/切换、图表渲染零回归
-- [ ] PageWrapper 外壳、空态、加载态对齐标准
-- [ ] 分页 20 行阈值
-- [ ] `tsc --noEmit` 通过
+- [x] 报告选择/切换、图表渲染零回归（仅换外壳与分页）
+- [x] PageWrapper 外壳、空态、加载态对齐标准（内部补一层 flex 列容器保持选择栏/内容区布局）
+- [x] 分页 20 行阈值（对比用例表；用例内规则明细表行数少，保持不分页）
+- [x] `tsc --noEmit` 通过
 - [ ] t480 走查：报告页各区块 golden path
diff --git a/frontend/web/src/pages/Reports.tsx b/frontend/web/src/pages/Reports.tsx
index 71f9a6e..f32e8a9 100644
--- a/frontend/web/src/pages/Reports.tsx
+++ b/frontend/web/src/pages/Reports.tsx
@@ -10,6 +10,7 @@ import {
   DiffOutlined, FileMarkdownOutlined,
 } from '@ant-design/icons'
 import { reportsApi, runsApi, type Run } from '../api'
+import PageWrapper from '../components/PageWrapper'
 import { colors, triggerColors, triggerLabels } from '../tokens'
 import { formatDateTime } from '../utils/date'
 import { useResource } from '../hooks/useResource'
@@ -222,17 +223,8 @@ export default function ReportsPage() {
     (opt?.searchText ?? '').includes(input.toLowerCase())
 
   return (
-    <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>
-
+    <PageWrapper title="评测报告" description="查看评测结果详情与统计分析" inline fullHeight>
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
       {/* 选择栏：两行布局，避免对比模式下控件换行错乱 */}
       <div style={{
         padding: '8px 16px', flexShrink: 0,
@@ -335,7 +327,8 @@ export default function ReportsPage() {
           }
         </Spin>
       </div>
-    </div>
+      </div>
+    </PageWrapper>
   )
 }
 
@@ -539,7 +532,7 @@ function CompareView({ result }: { result: CompareResult | null }) {
       <Card title={`用例对比（${changed_cases} 个结果变化）`}>
         <Table
           size="small"
-          pagination={false}
+          pagination={cases.length > 20 ? { pageSize: 20, showTotal: (t) => `共 ${t} 个用例` } : false}
           dataSource={cases}
           rowKey="case_id"
           rowClassName={(r) => r.changed ? 'run-row' : ''}