refactor(ui): align Runs page shell with consistency baseline (ui-consistency ticket 06)

Replace custom header with PageWrapper inline fullHeight and add
Popconfirm to the stop action. The nav-only-tabs content-split hack is
preserved; WebSocket session, rerun, and list logic untouched.
This commit is contained in:
sinohqb 2026-08-05 20:25:17 +08:00
parent 1588972a8e
commit b9011aad80
2 changed files with 12 additions and 16 deletions

View File

@ -5,8 +5,8 @@
**Blocked by:** 05 **Blocked by:** 05
**Acceptance criteria:** **Acceptance criteria:**
- [ ] WebSocket 实时会话、取消、重跑等功能零回归 - [x] WebSocket 实时会话、取消、重跑等功能零回归(未触碰 useRunSession/WS 逻辑)
- [ ] 导航内容分离 hack 保留且有注释说明原因 - [x] 导航内容分离 hack 保留且有注释说明原因
- [ ] 空态、加载态对齐标准;危险操作(取消)Popconfirm - [x] 空态、加载态对齐标准;停止操作已加 Popconfirm
- [ ] `tsc --noEmit` 通过 - [x] `tsc --noEmit` 通过
- [ ] t480 走查run 列表 + 详情 + 实时进度 + 取消 golden path - [ ] t480 走查run 列表 + 详情 + 实时进度 + 取消 golden path

View File

@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { import {
Alert, Button, Empty, message, Progress, Select, Space, Tabs, Tooltip, Typography, Alert, Button, Empty, message, Popconfirm, Progress, Select, Space, Tabs, Tooltip, Typography,
} from 'antd' } from 'antd'
import { import {
FileTextOutlined, PlayCircleOutlined, ReloadOutlined, StopOutlined, FileTextOutlined, PlayCircleOutlined, ReloadOutlined, StopOutlined,
@ -11,6 +11,7 @@ import RunList from '../components/RunList'
import CaseBlock from '../components/CaseBlock' import CaseBlock from '../components/CaseBlock'
import RuleOverview from '../components/RuleOverview' import RuleOverview from '../components/RuleOverview'
import CaseDetail from '../components/CaseDetail' import CaseDetail from '../components/CaseDetail'
import PageWrapper from '../components/PageWrapper'
import { useRunSession } from '../hooks/useRunSession' import { useRunSession } from '../hooks/useRunSession'
import { useTicker } from '../hooks/useTicker' import { useTicker } from '../hooks/useTicker'
import { useResource } from '../hooks/useResource' import { useResource } from '../hooks/useResource'
@ -94,16 +95,9 @@ export default function RunsPage() {
} }
return ( return (
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}> <PageWrapper title="评测执行" description="启动评测任务并查看实时执行详情" inline fullHeight>
{/* 页头 */}
<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>
{/* 主体 grid — 贴边铺满 */} {/* 主体 grid — 贴边铺满 */}
<div style={{ flex: 1, minHeight: 0 }}> <div style={{ height: '100%' }}>
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'minmax(360px, 28vw) 1fr', gridTemplateColumns: 'minmax(360px, 28vw) 1fr',
@ -225,7 +219,7 @@ export default function RunsPage() {
</div> </div>
</div> </div>
</div> </div>
</div> </PageWrapper>
) )
} }
@ -328,7 +322,9 @@ function DetailWorkspace({
</Typography.Text> </Typography.Text>
</Tooltip> </Tooltip>
{isLive ? ( {isLive ? (
<Button danger size="small" icon={<StopOutlined />} onClick={onCancel}></Button> <Popconfirm title="停止该评测任务?" onConfirm={onCancel} okButtonProps={{ danger: true }}>
<Button danger size="small" icon={<StopOutlined />}></Button>
</Popconfirm>
) : ( ) : (
<Space size={4}> <Space size={4}>
<Button size="small" icon={<ReloadOutlined />} onClick={onRerun}></Button> <Button size="small" icon={<ReloadOutlined />} onClick={onRerun}></Button>