feat(intelligent-eval): open detail/report in right-side drawer
列表常驻,详情与报告改为右侧抽屉弹出,减少页面层级嵌套。
This commit is contained in:
parent
935f0a1f57
commit
1d2c37277c
@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import {
|
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'
|
} from 'antd'
|
||||||
import type { ColumnsType } from 'antd/es/table'
|
import type { ColumnsType } from 'antd/es/table'
|
||||||
import { PlusOutlined, ReloadOutlined, EyeOutlined, FileTextOutlined } from '@ant-design/icons'
|
import { PlusOutlined, ReloadOutlined, EyeOutlined, FileTextOutlined } from '@ant-design/icons'
|
||||||
@ -18,7 +18,7 @@ import {
|
|||||||
import { colors } from '../tokens'
|
import { colors } from '../tokens'
|
||||||
import { formatDateTime } from '../utils/date'
|
import { formatDateTime } from '../utils/date'
|
||||||
|
|
||||||
type View = 'list' | 'detail' | 'report'
|
type DrawerView = 'detail' | 'report'
|
||||||
|
|
||||||
interface CreateFormValues {
|
interface CreateFormValues {
|
||||||
name: string
|
name: string
|
||||||
@ -31,7 +31,7 @@ interface CreateFormValues {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function IntelligentEvalsPage() {
|
export default function IntelligentEvalsPage() {
|
||||||
const [view, setView] = useState<View>('list')
|
const [drawerView, setDrawerView] = useState<DrawerView>('detail')
|
||||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
const [detailTick, setDetailTick] = useState(0)
|
const [detailTick, setDetailTick] = useState(0)
|
||||||
const [createOpen, setCreateOpen] = useState(false)
|
const [createOpen, setCreateOpen] = useState(false)
|
||||||
@ -52,7 +52,7 @@ export default function IntelligentEvalsPage() {
|
|||||||
{ deps: [selectedId, detailTick] },
|
{ deps: [selectedId, detailTick] },
|
||||||
)
|
)
|
||||||
|
|
||||||
const pollActive = view === 'detail' && selected != null
|
const pollActive = selected != null
|
||||||
&& (selected.status === 'planning' || selected.status === 'executing' || selected.status === 'pending_approval')
|
&& (selected.status === 'planning' || selected.status === 'executing' || selected.status === 'pending_approval')
|
||||||
|
|
||||||
usePolling(() => void reloadSelected(true), 5000, pollActive)
|
usePolling(() => void reloadSelected(true), 5000, pollActive)
|
||||||
@ -62,12 +62,18 @@ export default function IntelligentEvalsPage() {
|
|||||||
|
|
||||||
const openDetail = (id: string) => {
|
const openDetail = (id: string) => {
|
||||||
setSelectedId(id)
|
setSelectedId(id)
|
||||||
setView('detail')
|
setDrawerView('detail')
|
||||||
}
|
}
|
||||||
|
|
||||||
const openReport = (id: string) => {
|
const openReport = (id: string) => {
|
||||||
setSelectedId(id)
|
setSelectedId(id)
|
||||||
setView('report')
|
setDrawerView('report')
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDrawer = () => {
|
||||||
|
setSelectedId(null)
|
||||||
|
setDrawerView('detail')
|
||||||
|
void reload()
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitCreate = async () => {
|
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 (
|
return (
|
||||||
<PageWrapper
|
<PageWrapper
|
||||||
title="智能评估"
|
title="智能评估"
|
||||||
@ -211,6 +181,29 @@ export default function IntelligentEvalsPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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
|
<FormDrawer
|
||||||
title="新建智能评估"
|
title="新建智能评估"
|
||||||
open={createOpen}
|
open={createOpen}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user