refactor(ui): migrate ModelConfigs page to consistency baseline (ui-consistency ticket 04)

FormDrawer with footer submit and submitting guard, 20-row conditional
pagination, Empty locale, unified delete Popconfirm wording. Capability
and modality validation logic unchanged.

.scratch/ui-consistency/issues/04-model-configs.md

@@ -5,8 +5,8 @@
 **Blocked by:** 03（检查点通过后）
 
 **Acceptance criteria:**
-- [ ] 创建/编辑表单统一 FormDrawer
+- [x] 创建/编辑表单统一 FormDrawer
-- [ ] 删除有 Popconfirm；启用/停用开关行为不变
+- [x] 删除有 Popconfirm；启用/停用开关行为不变
-- [ ] 空态 Empty、20 行分页阈值
+- [x] 空态 Empty、20 行分页阈值
-- [ ] `tsc --noEmit` 通过
+- [x] `tsc --noEmit` 通过
 - [ ] t480 走查：模型配置 CRUD + 能力约束校验 golden path

frontend/web/src/pages/ModelConfigs.tsx

@@ -1,15 +1,16 @@
 import { useState } from 'react'
 import {
-  Button, Divider, Drawer, Form, Input, InputNumber, message, Popconfirm, Select, Space, Switch, Table, Tag,
+  Button, Divider, Empty, Form, Input, InputNumber, message, Popconfirm, Select, Space, Switch, Table, Tag,
   Tooltip,
 } from 'antd'
 import {
-  ApiOutlined, CheckCircleOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined,
+  ApiOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined,
 } from '@ant-design/icons'
 import {
   modelConfigsApi, type ModelCapability, type ModelConfig, type ModelConfigPayload, type ModelModality,
   type ModelProtocol,
 } from '../api'
+import FormDrawer from '../components/FormDrawer'
 import PageWrapper from '../components/PageWrapper'
 import { useResource } from '../hooks/useResource'
 import { formatDateTime } from '../utils/date'
@@ -85,6 +86,7 @@ const protocolOptions: Record<ModelProtocol, {
 export default function ModelConfigsPage() {
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [editing, setEditing] = useState<ModelConfig | null>(null)
+  const [submitting, setSubmitting] = useState(false)
   const [testingId, setTestingId] = useState<string | null>(null)
   const [capability, setCapability] = useState<ModelCapability | undefined>()
   const [enabled, setEnabled] = useState<boolean | undefined>()
@@ -170,11 +172,21 @@ export default function ModelConfigsPage() {
       description: values.description || '',
     }
     if (editing) {
-      await modelConfigsApi.update(editing.id, payload)
+      setSubmitting(true)
-      message.success('模型配置已更新')
+      try {
+        await modelConfigsApi.update(editing.id, payload)
+        message.success('模型配置已更新')
+      } finally {
+        setSubmitting(false)
+      }
     } else {
-      await modelConfigsApi.create(payload)
+      setSubmitting(true)
-      message.success('模型配置已创建')
+      try {
+        await modelConfigsApi.create(payload)
+        message.success('模型配置已创建')
+      } finally {
+        setSubmitting(false)
+      }
     }
     notifyModelConfigsChanged()
     setDrawerOpen(false)
@@ -317,7 +329,7 @@ export default function ModelConfigsPage() {
           <Tooltip title="编辑">
             <Button type="text" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)} />
           </Tooltip>
-          <Popconfirm title="确认删除该模型配置？" onConfirm={() => remove(record)}>
+          <Popconfirm title="删除该模型配置？" onConfirm={() => remove(record)}>
             <Tooltip title="删除">
               <Button type="text" size="small" danger icon={<DeleteOutlined />} />
             </Tooltip>
@@ -356,25 +368,25 @@ export default function ModelConfigsPage() {
         </Space>
       }
     >
-      <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
+      <div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
         <Table
           dataSource={configs ?? []}
           columns={columns}
           rowKey="id"
           loading={loading}
-          pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (total) => `共 ${total} 个` }}
+          pagination={(configs?.length ?? 0) > 20 ? { pageSize: 20, showTotal: (t) => `共 ${t} 个` } : false}
-          scroll={{ y: 'calc(100vh - 200px)' }}
+          locale={{ emptyText: <Empty description="还没有模型配置" /> }}
-          style={{ height: '100%' }}
           tableLayout="auto"
         />
       </div>
 
-      <Drawer
+      <FormDrawer
         title={editing ? '编辑模型配置' : '新增模型配置'}
-        width="min(680px, 100vw)"
         open={drawerOpen}
         onClose={() => setDrawerOpen(false)}
-        extra={<Button type="primary" icon={<CheckCircleOutlined />} onClick={submit}>保存</Button>}
+        onSubmit={submit}
+        submitting={submitting}
+        okText="保存"
       >
         <Form form={form} layout="vertical">
           <Divider orientation="left" plain style={{ marginTop: 0 }}>基础信息</Divider>
@@ -472,7 +484,7 @@ export default function ModelConfigsPage() {
             </Form.Item>
           </Space>
         </Form>
-      </Drawer>
+      </FormDrawer>
     </PageWrapper>
   )
 }