Merge/front/src/components/UserManagement.js

// src/components/UserManagement.jsx

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'

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 = await fetchUserList(superAdminId)
        setUsers(data)
      } catch (e) {
        console.error(e)
        message.error('获取用户列表失败：' + e.message)
      }
    }

    // 只有当 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('修改成功')
    } catch (e) {
      console.error(e)
      message.error('修改失败：' + e.message)
    }
  }

  // 表格列定义
  const columns = [
    { title: '用户名', dataIndex: 'username', key: 'username' },
    { title: '角色',   dataIndex: 'role',     key: 'role' },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => {
        // 当前角色排第一
        const orderedRoles = [
          record.role,
          ...ROLE_LIST.filter(r => r !== record.role)
        ]
        return (
          <Select
            value={record.role}
            style={{ width: 120 }}
            onChange={value => handleRoleChange(record.id, value)}
          >
            {orderedRoles.map(r => (
              <Option key={r} value={r}>
                {r}
              </Option>
            ))}
          </Select>
        )
      }
    }
  ]

  return (
    <div className="admin-container">
      <Table
        dataSource={users}
        columns={columns}
        rowKey="id"
        pagination={false}
      />
    </div>
  )
}