refactor(ui): migrate Targets page to consistency baseline (ui-consistency ticket 02)

FormDrawer with footer submit, submitting guard, 20-row conditional
pagination, Empty locale, unified delete Popconfirm wording.
This commit is contained in:
sinohqb 2026-08-05 15:38:37 +08:00
parent d4c254e121
commit 15d0d127ae

View File

@ -1,10 +1,11 @@
import { useState } from 'react' import { useState } from 'react'
import { import {
Button, Drawer, Form, Input, message, Popconfirm, Button, Empty, Form, Input, message, Popconfirm,
Space, Table, Tag, Select, Tooltip, Space, Table, Tag, Select, Tooltip,
} from 'antd' } from 'antd'
import { PlusOutlined, ApiOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons' import { PlusOutlined, ApiOutlined, EditOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons'
import { targetsApi, type Target } from '../api' import { targetsApi, type Target } from '../api'
import FormDrawer from '../components/FormDrawer'
import PageWrapper from '../components/PageWrapper' import PageWrapper from '../components/PageWrapper'
import { useResource } from '../hooks/useResource' import { useResource } from '../hooks/useResource'
import { colors } from '../tokens' import { colors } from '../tokens'
@ -17,6 +18,7 @@ export default function TargetsPage() {
) )
const [drawerOpen, setDrawerOpen] = useState(false) const [drawerOpen, setDrawerOpen] = useState(false)
const [editingTarget, setEditingTarget] = useState<Target | null>(null) const [editingTarget, setEditingTarget] = useState<Target | null>(null)
const [submitting, setSubmitting] = useState(false)
const [form] = Form.useForm() const [form] = Form.useForm()
const openCreate = () => { const openCreate = () => {
@ -64,11 +66,21 @@ export default function TargetsPage() {
} }
if (editingTarget) { if (editingTarget) {
setSubmitting(true)
try {
await targetsApi.update(editingTarget.id, payload) await targetsApi.update(editingTarget.id, payload)
message.success('更新成功') message.success('更新成功')
} finally {
setSubmitting(false)
}
} else { } else {
setSubmitting(true)
try {
await targetsApi.create(payload) await targetsApi.create(payload)
message.success('创建成功') message.success('创建成功')
} finally {
setSubmitting(false)
}
} }
setDrawerOpen(false) setDrawerOpen(false)
reload() reload()
@ -122,7 +134,7 @@ export default function TargetsPage() {
<Tooltip title="编辑"> <Tooltip title="编辑">
<Button size="small" type="text" icon={<EditOutlined />} onClick={() => openEdit(record)} /> <Button size="small" type="text" icon={<EditOutlined />} onClick={() => openEdit(record)} />
</Tooltip> </Tooltip>
<Popconfirm title="确认删除?" onConfirm={() => handleDelete(record.id)}> <Popconfirm title="删除该评测对象" onConfirm={() => handleDelete(record.id)}>
<Tooltip title="删除"> <Tooltip title="删除">
<Button size="small" type="text" danger icon={<DeleteOutlined />} /> <Button size="small" type="text" danger icon={<DeleteOutlined />} />
</Tooltip> </Tooltip>
@ -149,29 +161,24 @@ export default function TargetsPage() {
</Space> </Space>
} }
> >
{/* 表格区 — 撑满剩余高度 */} <div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
<Table <Table
dataSource={targets ?? []} dataSource={targets ?? []}
columns={columns} columns={columns}
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (t) => `${t}` }} pagination={(targets?.length ?? 0) > 20 ? { pageSize: 20, showTotal: (t) => `${t}` } : false}
scroll={{ y: 'calc(100vh - 200px)' }} locale={{ emptyText: <Empty description="还没有评测对象" /> }}
style={{ height: '100%' }}
/> />
</div> </div>
<Drawer <FormDrawer
title={editingTarget ? '编辑评测对象' : '新增评测对象'} title={editingTarget ? '编辑评测对象' : '新增评测对象'}
open={drawerOpen} open={drawerOpen}
onClose={() => setDrawerOpen(false)} onClose={() => setDrawerOpen(false)}
width={480} onSubmit={handleSubmit}
extra={ submitting={submitting}
<Button type="primary" onClick={handleSubmit}> okText={editingTarget ? '更新' : '创建'}
{editingTarget ? '更新' : '创建'}
</Button>
}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}> <Form.Item name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
@ -218,7 +225,7 @@ export default function TargetsPage() {
</Form.Item> </Form.Item>
</div> </div>
</Form> </Form>
</Drawer> </FormDrawer>
</PageWrapper> </PageWrapper>
) )
} }