diff --git a/Merge/front/src/components/UserManagement.js b/Merge/front/src/components/UserManagement.js
index a48f8cf..bed6b8f 100644
--- a/Merge/front/src/components/UserManagement.js
+++ b/Merge/front/src/components/UserManagement.js
@@ -1,51 +1,77 @@
-import React, { useState, useEffect } from 'react';
-import '../style/Admin.css';
-import { Select, message, Table } from 'antd';
-import { fetchUserList, giveUser, giveAdmin, giveSuperAdmin } from '../api/posts_trm';
+// src/components/UserManagement.jsx
 
-const { Option } = Select;
-const ROLE_LIST = ['用户', '管理员', '超级管理员'];
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { Table, Select, message } from 'antd'
+import {
+  fetchUserList,
+  giveUser,
+  giveAdmin,
+  giveSuperAdmin
+} from '../api/posts_trm'
+import '../style/Admin.css'
 
-function UserManagement({ superAdminId }) {
-  const [users, setUsers] = useState([]);
+const { Option } = Select
+const ROLE_LIST = ['用户', '管理员', '超级管理员']
+
+export default function UserManagement() {
+  // 直接从 URL 参数里拿到 superAdminId
+  const { userId: superAdminId } = useParams()
+
+  const [users, setUsers] = useState([])
 
   useEffect(() => {
     async function load() {
       try {
-        const data = superAdminId
-          ? await fetchUserList(superAdminId)
-          : await fetch('/api/users').then(res => res.json());
-        setUsers(data);
+        // 调用接口获取用户列表
+        const data = await fetchUserList(superAdminId)
+        setUsers(data)
       } catch (e) {
-        console.error(e);
+        console.error(e)
+        message.error('获取用户列表失败：' + e.message)
       }
     }
-    load();
-  }, [superAdminId]);
 
-  // handle role changes
+    // 只有当 superAdminId 有值时才发请求
+    if (superAdminId) {
+      load()
+    }
+  }, [superAdminId])
+
+  // 处理角色变更
   const handleRoleChange = async (userId, newRole) => {
     try {
-      if (newRole === '用户') await giveUser(superAdminId, userId);
-      else if (newRole === '管理员') await giveAdmin(superAdminId, userId);
-      else if (newRole === '超级管理员') await giveSuperAdmin(superAdminId, userId);
-      setUsers(us => us.map(u => u.id === userId ? { ...u, role: newRole } : u));
-      message.success('修改成功');
+      if (newRole === '用户') {
+        await giveUser(superAdminId, userId)
+      } else if (newRole === '管理员') {
+        await giveAdmin(superAdminId, userId)
+      } else if (newRole === '超级管理员') {
+        await giveSuperAdmin(superAdminId, userId)
+      }
+      // 本地更新状态
+      setUsers(us =>
+        us.map(u => (u.id === userId ? { ...u, role: newRole } : u))
+      )
+      message.success('修改成功')
     } catch (e) {
-      console.error(e);
-      message.error('修改失败');
+      console.error(e)
+      message.error('修改失败：' + e.message)
     }
-  };
+  }
 
-  // define table columns
+  // 表格列定义
   const columns = [
     { title: '用户名', dataIndex: 'username', key: 'username' },
-    { title: '角色', dataIndex: 'role', key: 'role' },
+    { title: '角色',   dataIndex: 'role',     key: 'role' },
     {
       title: '操作',
       key: 'action',
       render: (_, record) => {
-        const orderedRoles = [record.role, ...ROLE_LIST.filter(r => r !== record.role)];
+        // 当前角色排第一
+        const orderedRoles = [
+          record.role,
+          ...ROLE_LIST.filter(r => r !== record.role)
+        ]
         return (
           <Select
             value={record.role}
@@ -53,13 +79,15 @@
             onChange={value => handleRoleChange(record.id, value)}
           >
             {orderedRoles.map(r => (
-              <Option key={r} value={r}>{r}</Option>
+              <Option key={r} value={r}>
+                {r}
+              </Option>
             ))}
           </Select>
-        );
-      },
-    },
-  ];
+        )
+      }
+    }
+  ]
 
   return (
     <div className="admin-container">
@@ -70,7 +98,5 @@
         pagination={false}
       />
     </div>
-  );
+  )
 }
-
-export default UserManagement;