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:
parent
d4c254e121
commit
15d0d127ae
@ -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) {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await targetsApi.update(editingTarget.id, payload)
|
||||
message.success('更新成功')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
} else {
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user