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