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([])
  const [unauthorized, setUnauthorized] = useState(false)

  useEffect(() => {
    async function load() {
      try {
        // 调用接口获取用户列表
        const data = await fetchUserList(superAdminId)
        
        // 检查是否是权限错误
        if (data && data.status === 'error' && data.message === 'Unauthorized') {
          setUnauthorized(true)
          setUsers([])
          return
        }
        
        // 确保数据是数组格式
        let userList = []
        if (Array.isArray(data)) {
          userList = data
        } else if (Array.isArray(data.data)) {
          userList = data.data
        } else if (Array.isArray(data.users)) {
          userList = data.users
        }
        
        setUsers(userList)
        setUnauthorized(false)
      } catch (e) {
        console.error(e)
        if (e.message === 'Unauthorized') {
          setUnauthorized(true)
          setUsers([])
        } else {
          message.error('获取用户列表失败：' + e.message)
        }
      }
    }

    // 只有当 superAdminId 有值时才发请求
    if (superAdminId) {
      load()
    }
  }, [superAdminId])

  // 处理角色变更
  const handleRoleChange = async (userId, newRole) => {
    try {
      let result
      if (newRole === '用户') {
        result = await giveUser(userId)
      } else if (newRole === '管理员') {
        result = await giveAdmin(userId)
      } else if (newRole === '超级管理员') {
        result = await giveSuperAdmin(userId)
      }
      
      // 检查返回结果是否有权限错误
      if (result && result.status === 'error' && result.message === 'Unauthorized') {
        setUnauthorized(true)
        message.error('权限不足，无法执行此操作')
        return
      }
      
      // 本地更新状态
      setUsers(us =>
        us.map(u => (u.id === userId ? { ...u, role: newRole } : u))
      )
      message.success('修改成功')
    } catch (e) {
      console.error(e)
      if (e.message === 'Unauthorized') {
        setUnauthorized(true)
        message.error('权限不足，无法执行此操作')
      } else {
        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">
      {unauthorized ? (
        <div style={{ 
          textAlign: 'center', 
          padding: '50px', 
          fontSize: '18px',
          color: '#ff4d4f'
        }}>
          权限不足，无法访问用户管理功能
        </div>
      ) : (
        <Table
          dataSource={users}
          columns={columns}
          rowKey="id"
          pagination={false}
        />
      )}
    </div>
  )
}