feat(intelligent-eval): open detail/report in right-side drawer

列表常驻,详情与报告改为右侧抽屉弹出,减少页面层级嵌套。
This commit is contained in:
sinohqb 2026-08-06 00:29:52 +08:00
parent 935f0a1f57
commit 1d2c37277c

View File

@ -1,6 +1,6 @@
import { useState } from 'react'
import {
Button, Empty, Form, Input, InputNumber, Select, Space, Table, Tag, Tooltip, message,
Button, Drawer, Empty, Form, Input, InputNumber, Select, Space, Spin, Table, Tag, Tooltip, message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { PlusOutlined, ReloadOutlined, EyeOutlined, FileTextOutlined } from '@ant-design/icons'
@ -18,7 +18,7 @@ import {
import { colors } from '../tokens'
import { formatDateTime } from '../utils/date'
type View = 'list' | 'detail' | 'report'
type DrawerView = 'detail' | 'report'
interface CreateFormValues {
name: string
@ -31,7 +31,7 @@ interface CreateFormValues {
}
export default function IntelligentEvalsPage() {
const [view, setView] = useState<View>('list')
const [drawerView, setDrawerView] = useState<DrawerView>('detail')
const [selectedId, setSelectedId] = useState<string | null>(null)
const [detailTick, setDetailTick] = useState(0)
const [createOpen, setCreateOpen] = useState(false)
@ -52,7 +52,7 @@ export default function IntelligentEvalsPage() {
{ deps: [selectedId, detailTick] },
)
const pollActive = view === 'detail' && selected != null
const pollActive = selected != null
&& (selected.status === 'planning' || selected.status === 'executing' || selected.status === 'pending_approval')
usePolling(() => void reloadSelected(true), 5000, pollActive)
@ -62,12 +62,18 @@ export default function IntelligentEvalsPage() {
const openDetail = (id: string) => {
setSelectedId(id)
setView('detail')
setDrawerView('detail')
}
const openReport = (id: string) => {
setSelectedId(id)
setView('report')
setDrawerView('report')
}
const closeDrawer = () => {
setSelectedId(null)
setDrawerView('detail')
void reload()
}
const submitCreate = async () => {
@ -149,42 +155,6 @@ export default function IntelligentEvalsPage() {
},
]
if (view === 'detail' && selectedId) {
if (!selected) {
return (
<PageWrapper title="智能评估" inline fullHeight>
<div style={{ padding: 16 }}></div>
</PageWrapper>
)
}
return (
<PageWrapper title="智能评估" inline fullHeight>
<EvalDetail
ev={selected}
targetName={targetName(selected.target_id)}
onBack={() => { setView('list'); void reload() }}
onOpenReport={() => setView('report')}
onChanged={() => setDetailTick((t) => t + 1)}
/>
</PageWrapper>
)
}
if (view === 'report' && selectedId) {
if (!selected) {
return (
<PageWrapper title="智能评估" inline fullHeight>
<div style={{ padding: 16 }}></div>
</PageWrapper>
)
}
return (
<PageWrapper title="智能评估" inline fullHeight>
<EvalReport ev={selected} onBack={() => setView('detail')} />
</PageWrapper>
)
}
return (
<PageWrapper
title="智能评估"
@ -211,6 +181,29 @@ export default function IntelligentEvalsPage() {
/>
</div>
<Drawer
title={drawerView === 'report' ? '评估报告' : '评估详情'}
open={selectedId != null}
onClose={closeDrawer}
width={1040}
destroyOnClose
styles={{ body: { padding: 0 } }}
>
{selected == null ? (
<div style={{ padding: 48, textAlign: 'center' }}><Spin /></div>
) : drawerView === 'report' ? (
<EvalReport ev={selected} onBack={() => setDrawerView('detail')} />
) : (
<EvalDetail
ev={selected}
targetName={targetName(selected.target_id)}
onBack={closeDrawer}
onOpenReport={() => setDrawerView('report')}
onChanged={() => setDetailTick((t) => t + 1)}
/>
)}
</Drawer>
<FormDrawer
title="新建智能评估"
open={createOpen}