Refine data management and collection workflows

frontend/src/pages/Users/Users.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Table, Button, Tag, Space, message, Modal, Form, Input, Select } from 'antd'
 import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
 import axios from 'axios'
@@ -18,6 +18,8 @@ function Users() {
   const [loading, setLoading] = useState(false)
   const [modalVisible, setModalVisible] = useState(false)
   const [editingUser, setEditingUser] = useState<User | null>(null)
+  const tableRegionRef = useRef<HTMLDivElement | null>(null)
+  const [tableHeight, setTableHeight] = useState(360)
   const [form] = Form.useForm()
 
   const fetchUsers = async () => {
@@ -34,6 +36,24 @@ function Users() {
     fetchUsers()
   }, [])
 
+  useEffect(() => {
+    const updateTableHeight = () => {
+      const regionHeight = tableRegionRef.current?.offsetHeight || 0
+      setTableHeight(Math.max(220, regionHeight - 56))
+    }
+
+    updateTableHeight()
+
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined
+    }
+
+    const observer = new ResizeObserver(updateTableHeight)
+    if (tableRegionRef.current) observer.observe(tableRegionRef.current)
+
+    return () => observer.disconnect()
+  }, [users.length])
+
   const handleAdd = () => {
     setEditingUser(null)
     form.resetFields()
@@ -77,12 +97,13 @@ function Users() {
 
   const columns = [
     { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
-    { title: '用户名', dataIndex: 'username', key: 'username' },
-    { title: '邮箱', dataIndex: 'email', key: 'email' },
+    { title: '用户名', dataIndex: 'username', key: 'username', width: 180 },
+    { title: '邮箱', dataIndex: 'email', key: 'email', width: 260, ellipsis: true },
     {
       title: '角色',
       dataIndex: 'role',
       key: 'role',
+      width: 140,
       render: (role: string) => {
         const colors: Record<string, string> = {
           super_admin: 'red',
@@ -97,6 +118,7 @@ function Users() {
       title: '状态',
       dataIndex: 'is_active',
       key: 'is_active',
+      width: 120,
       render: (active: boolean) => (
         <Tag color={active ? 'green' : 'red'}>{active ? '活跃' : '禁用'}</Tag>
       ),
@@ -104,6 +126,7 @@ function Users() {
     {
       title: '操作',
       key: 'action',
+      width: 180,
       render: (_: unknown, record: User) => (
         <Space>
           <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
@@ -121,8 +144,15 @@ function Users() {
           <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>添加用户</Button>
         </div>
         <div className="page-shell__body">
-          <div className="table-scroll-region" style={{ height: '100%' }}>
-            <Table columns={columns} dataSource={users} rowKey="id" loading={loading} scroll={{ x: 'max-content', y: 'calc(100% - 72px)' }} tableLayout="fixed" />
+          <div ref={tableRegionRef} className="table-scroll-region data-source-table-region" style={{ height: '100%' }}>
+            <Table
+              columns={columns}
+              dataSource={users}
+              rowKey="id"
+              loading={loading}
+              scroll={{ x: 'max-content', y: tableHeight }}
+              tableLayout="fixed"
+            />
           </div>
         </div>
       </div>