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 { 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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user