AI-Website/frontend/src/pages/Admin/AdminUsers.js

import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, Form, Input, InputNumber, message } from 'antd';
import { authFetch } from '../../auth';

// 定义列配置函数，将handleEdit作为参数传入
const getColumns = (handleEdit) => [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '用户名', dataIndex: 'username', key: 'username' },
  { title: '余额', dataIndex: 'balance', key: 'balance' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { 
    title: '操作', 
    key: 'action', 
    render: (_, record) => <Button type="link" onClick={() => handleEdit(record)}>编辑</Button> 
  },
];

export default function AdminUsers() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [form] = Form.useForm();

  const fetchUsers = async () => {
    setLoading(true);
    try {
      // 使用authFetch添加认证信息
      const result = await authFetch('/users/');
      if (result) {
        setData(result);
      } else {
        console.error('用户数据格式不正确:', result);
        setData([]);
      }
    } catch (e) {
      console.error('获取用户数据失败:', e);
      setData([]);
    }
    setLoading(false);
  };
  useEffect(() => { fetchUsers(); }, []);

  // 删除用户
  const handleDelete = async (user) => {
    if (window.confirm(`确定要删除用户 "${user.username}" 吗？`)) {
      try {
        const response = await authFetch(`/users/delete/${user.id}`, { method: 'DELETE' });
        if (response && response.msg) {
          message.success(response.msg || '删除成功');
          fetchUsers(); // 刷新列表
        } else {
          message.error('删除失败，请重试');
        }
      } catch (error) {
        console.error('删除用户出错:', error);
        message.error('删除失败: ' + (error.message || '未知错误'));
      }
    }
  };

  // 打开添加用户模态框
  const showModal = () => {
    form.resetFields();
    setIsEditing(false);
    setEditingUser(null);
    setIsModalVisible(true);
  };

  // 关闭模态框
  const handleCancel = () => {
    setIsModalVisible(false);
    setIsEditing(false);
    setEditingUser(null);
  };
  
  // 处理编辑用户
  const handleEdit = (user) => {
    setIsEditing(true);
    setEditingUser(user);
    form.setFieldsValue({
      username: user.username,
      balance: user.balance,
      is_admin: user.is_admin || false
    });
    setIsModalVisible(true);
  };

  // 提交表单
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      
      if (isEditing && editingUser) {
        // 编辑用户
        const response = await authFetch(`/users/update/${editingUser.id}`, {
          method: 'PUT',
          body: JSON.stringify({
            username: values.username,
            balance: values.balance,
            is_admin: values.is_admin
          })
        });

        if (response && (response.id || response.msg === '更新成功')) {
          message.success('编辑用户成功');
          setIsModalVisible(false);
          setIsEditing(false);
          setEditingUser(null);
          fetchUsers(); // 刷新用户列表
        } else {
          message.error('编辑用户失败: ' + (response?.detail || '未知错误'));
        }
      } else {
        // 添加用户
        const response = await authFetch('/users/create', {
          method: 'POST',
          body: JSON.stringify({
            username: values.username,
            password: values.password,
            balance: values.balance || 0,
            is_admin: values.is_admin || false
          })
        });

        if (response && response.id) {
          message.success('添加用户成功');
          setIsModalVisible(false);
          fetchUsers(); // 刷新用户列表
        } else {
          message.error('添加用户失败: ' + (response?.detail || '未知错误'));
        }
      }
    } catch (error) {
      console.error('表单验证或提交错误:', error);
      message.error((isEditing ? '编辑' : '添加') + '用户失败: ' + (error.message || '未知错误'));
    }
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" style={{ marginRight: 8 }} onClick={showModal}>新增用户</Button>
        <Button onClick={fetchUsers}>刷新</Button>
      </div>
      <Table columns={getColumns(handleEdit)} dataSource={data} rowKey="id" loading={loading} />
      
      {/* 用户模态框 */}
      <Modal
        title={isEditing ? '编辑用户' : '添加用户'}
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
        footer={[
          // 在编辑模式下显示删除按钮
          isEditing && (
            <Button key="delete" type="primary" danger onClick={() => handleDelete(editingUser)}>
              删除用户
            </Button>
          ),
          <Button key="cancel" onClick={handleCancel}>取消</Button>,
          <Button key="submit" type="primary" onClick={handleOk}>确定</Button>,
        ].filter(Boolean)}
      >
        <Form
          form={form}
          layout="vertical"
          name="user_form"
        >
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          
          {!isEditing && (
            <Form.Item
              name="password"
              label="密码"
              rules={[{ required: !isEditing, message: '请输入密码' }]}
            >
              <Input.Password />
            </Form.Item>
          )}
          
          <Form.Item
            name="balance"
            label={isEditing ? '余额' : '初始余额'}
            rules={[{ required: true, message: '请输入余额' }]}
          >
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
          
          <Form.Item
            name="is_admin"
            label="管理员权限"
            valuePropName="checked"
          >
            <Input type="checkbox" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}