From 15d0d127aeefb95c62a97d183d65f5736b89f153 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Wed, 5 Aug 2026 15:38:37 +0800
Subject: [PATCH] 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.
---
 frontend/web/src/pages/Targets.tsx | 45 +++++++++++++++++-------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/web/src/pages/Targets.tsx b/frontend/web/src/pages/Targets.tsx
index 2c88290..f28c7ad 100644
--- a/frontend/web/src/pages/Targets.tsx
+++ b/frontend/web/src/pages/Targets.tsx
@@ -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>
   )
 }