yunrui_asset/frontend/src/pages/UserManagement.jsx

import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  Select,
  message,
  Tag,
  Popconfirm,
  Avatar,
  Tooltip,
  Badge,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  UserOutlined,
  ReloadOutlined,
  LockOutlined,
  CameraOutlined,
  CheckOutlined,
  CloseOutlined,
} from '@ant-design/icons';
import { userAPI, roleAPI } from '../api';

const { Option } = Select;

const UserManagement = () => {
  const [users, setUsers] = useState([]);
  const [roles, setRoles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
  const [modalVisible, setModalVisible] = useState(false);
  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
  const [avatarModalVisible, setAvatarModalVisible] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [passwordUser, setPasswordUser] = useState(null);
  const [avatarUser, setAvatarUser] = useState(null);
  const [uploadLoading, setUploadLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('all');
  const [form] = Form.useForm();
  const [passwordForm] = Form.useForm();
  const fileInputRef = useRef(null);

  useEffect(() => {
    fetchUsers();
    fetchRoles();
  }, [pagination.current]);

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const params = {
        page: pagination.current,
        pageSize: pagination.pageSize,
      };
      if (activeTab !== 'all') {
        params.status = activeTab;
      }
      const response = await userAPI.list(params);
      if (response.success) {
        setUsers(response.data.users);
        setPagination(prev => ({ ...prev, total: response.data.total }));
      }
    } catch (error) {
      message.error('获取用户列表失败');
    } finally {
      setLoading(false);
    }
  }, [pagination.current, pagination.pageSize, activeTab]);

  const fetchRoles = useCallback(async () => {
    try {
      const response = await roleAPI.all();
      if (response.success) {
        setRoles(response.data);
      } else {
        message.error('获取角色列表失败: ' + (response.message || '未知错误'));
      }
    } catch (error) {
      console.error('获取角色列表失败:', error);
      message.error('获取角色列表失败，请检查网络连接');
    }
  }, []);

  const handleAdd = useCallback(() => {
    setEditingUser(null);
    form.resetFields();
    setModalVisible(true);
  }, []);

  const handleEdit = useCallback(user => {
    setEditingUser(user);
    form.setFieldsValue({
      username: user.username,
      email: user.email,
      phone: user.phone,
      realName: user.realName,
      status: user.status,
      roleIds: user.roles?.map(r => r.roleId) || [],
    });
    setModalVisible(true);
  }, []);

  const handleResetPassword = useCallback(user => {
    setPasswordUser(user);
    passwordForm.resetFields();
    setPasswordModalVisible(true);
  }, []);

  const handleAvatarClick = useCallback(user => {
    setAvatarUser(user);
    setAvatarModalVisible(true);
  }, []);

  const handleAvatarUpload = useCallback(
    async e => {
      const file = e.target.files[0];
      if (!file) return;

      if (!file.type.match(/image\/(jpeg|png|gif|webp)/)) {
        message.error('只支持 JPG、PNG、GIF 和 WebP 格式的图片');
        return;
      }

      if (file.size > 5 * 1024 * 1024) {
        message.error('图片大小不能超过 5MB');
        return;
      }

      setUploadLoading(true);
      try {
        const response = await userAPI.uploadAvatar(avatarUser.userId, file);
        if (response.success) {
          message.success('头像上传成功');
          fetchUsers();
          setAvatarModalVisible(false);
        } else {
          message.error(response.message || '上传失败');
        }
      } catch (error) {
        message.error('上传失败');
      } finally {
        setUploadLoading(false);
        if (fileInputRef.current) {
          fileInputRef.current.value = '';
        }
      }
    },
    [avatarUser, fetchUsers]
  );

  const handleAvatarDelete = useCallback(async () => {
    try {
      const response = await userAPI.deleteAvatar(avatarUser.userId);
      if (response.success) {
        message.success('头像已删除');
        fetchUsers();
        setAvatarModalVisible(false);
      } else {
        message.error(response.message || '删除失败');
      }
    } catch (error) {
      message.error('删除失败');
    }
  }, [avatarUser, fetchUsers]);

  const handleDelete = useCallback(
    async userId => {
      try {
        const response = await userAPI.delete(userId);
        if (response.success) {
          message.success('删除成功');
          fetchUsers();
        } else {
          message.error(response.message || '删除失败');
        }
      } catch (error) {
        message.error('删除失败');
      }
    },
    [fetchUsers]
  );

  const handleLockUnlock = useCallback(
    async record => {
      try {
        const newStatus = record.status === 'locked' ? 'active' : 'locked';
        const response = await userAPI.update(record.userId, {
          status: newStatus,
        });
        if (response.success) {
          message.success(record.status === 'locked' ? '解锁成功' : '锁定成功');
          fetchUsers();
        } else {
          message.error(response.message || '操作失败');
        }
      } catch (error) {
        message.error('操作失败');
      }
    },
    [fetchUsers]
  );

  const handleSubmit = useCallback(
    async values => {
      try {
        let response;
        if (editingUser) {
          response = await userAPI.update(editingUser.userId, values);
        } else {
          response = await userAPI.create(values);
        }

        if (response.success) {
          message.success(editingUser ? '更新成功' : '创建成功');
          setModalVisible(false);
          fetchUsers();
        } else {
          message.error(response.message || '操作失败');
        }
      } catch (error) {
        message.error('操作失败');
      }
    },
    [editingUser, fetchUsers]
  );

  const handleResetPasswordSubmit = useCallback(
    async values => {
      try {
        const response = await userAPI.resetPassword(passwordUser.userId, values);
        if (response.success) {
          message.success('密码重置成功');
          setPasswordModalVisible(false);
        } else {
          message.error(response.message || '重置失败');
        }
      } catch (error) {
        message.error('重置失败');
      }
    },
    [passwordUser]
  );

  const getStatusColor = status => {
    const colors = {
      active: 'green',
      inactive: 'red',
      locked: 'orange',
      pending: 'blue',
    };
    return colors[status] || 'default';
  };

  const getStatusText = status => {
    const texts = {
      active: '正常',
      inactive: '禁用',
      locked: '锁定',
      pending: '待审核',
    };
    return texts[status] || status;
  };

  const handleApprove = useCallback(
    async userId => {
      try {
        const response = await userAPI.approve(userId);
        if (response.success) {
          message.success('审核通过');
          fetchUsers();
        } else {
          message.error(response.message || '审核失败');
        }
      } catch (error) {
        message.error('审核失败');
      }
    },
    [fetchUsers]
  );

  const handleReject = useCallback(
    async userId => {
      try {
        const response = await userAPI.reject(userId);
        if (response.success) {
          message.success('已拒绝该用户的注册申请');
          fetchUsers();
        } else {
          message.error(response.message || '操作失败');
        }
      } catch (error) {
        message.error('操作失败');
      }
    },
    [fetchUsers]
  );

  const getAvatarUrl = user => {
    if (!user?.avatar) return null;
    return user.avatar;
  };

  const tableColumns = useMemo(
    () => [
      {
        title: '头像',
        key: 'avatar',
        width: 80,
        render: (_, record) => (
          <Badge dot={!!record.avatar} color="green" offset={[-5, 35]}>
            <Avatar
              size={48}
              icon={!record.avatar && <UserOutlined />}
              src={getAvatarUrl(record)}
              style={{
                backgroundColor: record.avatar ? 'transparent' : '#1890ff',
                cursor: 'pointer',
              }}
              onClick={() => handleAvatarClick(record)}
            />
          </Badge>
        ),
      },
      {
        title: '用户名',
        key: 'username',
        width: 150,
        render: (_, record) => (
          <div>
            <div style={{ fontWeight: 500 }}>{record.realName || record.username}</div>
            <div style={{ fontSize: '12px', color: '#999' }}>@{record.username}</div>
          </div>
        ),
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        key: 'email',
        width: 200,
        render: email => email || '-',
      },
      {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone',
        width: 130,
        render: phone => phone || '-',
      },
      {
        title: '角色',
        key: 'roles',
        render: (_, record) => (
          <Space wrap>
            {record.roles?.map(role => (
              <Tag key={role.roleId} color={role.roleCode === 'admin' ? 'blue' : 'green'}>
                {role.roleName}
              </Tag>
            )) || '-'}
          </Space>
        ),
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: status => <Tag color={getStatusColor(status)}>{getStatusText(status)}</Tag>,
      },
      {
        title: '最后登录',
        key: 'lastLogin',
        render: (_, record) => (
          <div style={{ fontSize: '12px' }}>
            <div>
              {record.lastLoginTime ? new Date(record.lastLoginTime).toLocaleString() : '从未登录'}
            </div>
            <div style={{ color: '#999' }}>{record.lastLoginIp || '-'}</div>
          </div>
        ),
      },
      {
        title: '操作',
        key: 'action',
        render: (_, record) => (
          <Space size="small">
            {record.status === 'pending' ? (
              <>
                <Popconfirm
                  title="确定要通过该用户的注册申请吗？"
                  onConfirm={() => handleApprove(record.userId)}
                  okText="通过"
                  cancelText="取消"
                >
                  <Tooltip title="通过">
                    <Button type="text" icon={<CheckOutlined />} style={{ color: '#52c41a' }} />
                  </Tooltip>
                </Popconfirm>
                <Popconfirm
                  title="确定要拒绝该用户的注册申请吗？"
                  onConfirm={() => handleReject(record.userId)}
                  okText="拒绝"
                  cancelText="取消"
                >
                  <Tooltip title="拒绝">
                    <Button type="text" icon={<CloseOutlined />} style={{ color: '#ff4d4f' }} />
                  </Tooltip>
                </Popconfirm>
              </>
            ) : (
              <>
                <Tooltip title="编辑">
                  <Button type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)} />
                </Tooltip>
                <Tooltip title="重置密码">
                  <Button
                    type="text"
                    icon={<LockOutlined />}
                    onClick={() => handleResetPassword(record)}
                  />
                </Tooltip>
                <Popconfirm
                  title={
                    record.status === 'locked' ? '确定要解锁此用户吗？' : '确定要锁定此用户吗？'
                  }
                  onConfirm={() => handleLockUnlock(record)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tooltip title={record.status === 'locked' ? '解锁' : '锁定'}>
                    <Button
                      type="text"
                      icon={record.status === 'locked' ? <ReloadOutlined /> : <LockOutlined />}
                      style={{ color: record.status === 'locked' ? '#52c41a' : '#faad14' }}
                    />
                  </Tooltip>
                </Popconfirm>
                <Popconfirm
                  title="确定要删除此用户吗？"
                  onConfirm={() => handleDelete(record.userId)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Tooltip title="删除">
                    <Button type="text" danger icon={<DeleteOutlined />} />
                  </Tooltip>
                </Popconfirm>
              </>
            )}
          </Space>
        ),
      },
    ],
    [
      handleAvatarClick,
      handleEdit,
      handleResetPassword,
      handleDelete,
      handleLockUnlock,
      handleApprove,
      handleReject,
    ]
  );

  const pageHeaderStyle = {
    marginBottom: '24px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: '16px',
  };

  const titleStyle = {
    fontSize: '24px',
    fontWeight: '700',
    margin: 0,
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
  };

  const cardStyle = {
    borderRadius: '16px',
    border: 'none',
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
    overflow: 'hidden',
  };

  const cardHeadStyle = {
    borderBottom: '1px solid #f0f0f0',
    padding: '16px 24px',
    background: 'linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%)',
  };

  const primaryButtonStyle = {
    height: '40px',
    borderRadius: '8px',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    border: 'none',
    boxShadow: '0 4px 12px rgba(102, 126, 234, 0.35)',
    fontWeight: '500',
    transition: 'all 0.3s ease',
  };

  const secondaryButtonStyle = {
    height: '40px',
    borderRadius: '8px',
    border: '1px solid #e8e8e8',
    transition: 'all 0.3s ease',
  };

  const actionButtonStyle = {
    height: '32px',
    borderRadius: '6px',
    border: '1px solid #e8e8e8',
    transition: 'all 0.3s ease',
  };

  const modalHeaderStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    fontSize: '18px',
    fontWeight: '600',
  };

  const modalHeaderAccent = {
    width: '4px',
    height: '20px',
    background: 'linear-gradient(180deg, #667eea 0%, #764ba2 100%)',
    borderRadius: '2px',
  };

  const avatarModalStyle = {
    textAlign: 'center',
    padding: '20px 0',
  };

  const avatarWrapperStyle = {
    marginBottom: '24px',
    position: 'relative',
    display: 'inline-block',
  };

  return (
    <div style={{ padding: '8px' }}>
      <div style={pageHeaderStyle}>
        <h1 style={titleStyle}>用户管理</h1>
        <Space size="middle">
          <Button icon={<ReloadOutlined />} onClick={fetchUsers} style={secondaryButtonStyle}>
            刷新
          </Button>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleAdd}
            style={primaryButtonStyle}
          >
            添加用户
          </Button>
        </Space>
      </div>

      <Card
        style={cardStyle}
        styles={{ header: cardHeadStyle, body: { padding: '20px 24px' } }}
        tabList={[
          { key: 'all', tab: '全部用户' },
          { key: 'pending', tab: '待审核' },
          { key: 'active', tab: '正常' },
          { key: 'locked', tab: '锁定' },
          { key: 'inactive', tab: '禁用' },
        ]}
        activeTabKey={activeTab}
        onTabChange={key => {
          setActiveTab(key);
          setPagination(prev => ({ ...prev, current: 1 }));
        }}
      >
        <Table
          columns={tableColumns}
          dataSource={users}
          rowKey="userId"
          loading={loading}
          pagination={{
            ...pagination,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total => `共 ${total} 条记录`,
          }}
          onChange={newPagination => {
            setPagination(prev => ({ ...prev, ...newPagination }));
          }}
          rowClassName={() => 'table-row'}
        />
      </Card>

      <Modal
        title={
          <div style={modalHeaderStyle}>
            <span style={modalHeaderAccent}></span>
            {editingUser ? '编辑用户' : '添加用户'}
          </div>
        }
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
        width={500}
        destroyOnHidden
        styles={{
          body: { padding: '24px' },
          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
        }}
        style={{ borderRadius: '16px', overflow: 'hidden' }}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit} style={{ marginTop: '20px' }}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间' },
            ]}
          >
            <Input placeholder="请输入用户名" style={{ borderRadius: '8px' }} />
          </Form.Item>

          <Form.Item
            name="realName"
            label="真实姓名"
            rules={[{ required: true, message: '请输入真实姓名' }]}
          >
            <Input placeholder="请输入真实姓名" style={{ borderRadius: '8px' }} />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' },
            ]}
          >
            <Input placeholder="请输入邮箱" style={{ borderRadius: '8px' }} />
          </Form.Item>

          <Form.Item name="phone" label="手机号">
            <Input placeholder="请输入手机号" style={{ borderRadius: '8px' }} />
          </Form.Item>

          <Form.Item
            name="roleIds"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select mode="multiple" placeholder="请选择角色" style={{ borderRadius: '8px' }}>
              {roles.map(role => (
                <Option key={role.roleId} value={role.roleId}>
                  {role.roleName}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {!editingUser && (
            <Form.Item
              name="password"
              label="初始密码"
              rules={[
                { required: true, message: '请输入初始密码' },
                { min: 6, message: '密码长度不能少于6个字符' },
              ]}
            >
              <Input.Password placeholder="请输入初始密码" style={{ borderRadius: '8px' }} />
            </Form.Item>
          )}

          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" style={{ borderRadius: '8px' }}>
              <Option value="active">正常</Option>
              <Option value="inactive">禁用</Option>
              <Option value="locked">锁定</Option>
            </Select>
          </Form.Item>

          {editingUser && (
            <Form.Item
              name="newPassword"
              label="新密码"
              rules={[{ min: 6, message: '密码长度不能少于6个字符' }]}
            >
              <Input.Password placeholder="留空则不修改密码" style={{ borderRadius: '8px' }} />
            </Form.Item>
          )}

          <Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
            <Space>
              <Button
                onClick={() => setModalVisible(false)}
                style={{ borderRadius: '8px', height: '40px' }}
              >
                取消
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                style={{
                  ...primaryButtonStyle,
                  width: 'auto',
                  paddingLeft: '24px',
                  paddingRight: '24px',
                }}
              >
                {editingUser ? '更新' : '创建'}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={
          <div style={modalHeaderStyle}>
            <span style={modalHeaderAccent}></span>
            {`重置密码 - ${passwordUser?.username}`}
          </div>
        }
        open={passwordModalVisible}
        onCancel={() => setPasswordModalVisible(false)}
        footer={null}
        width={400}
        destroyOnHidden
        styles={{
          body: { padding: '24px' },
          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
        }}
        style={{ borderRadius: '16px', overflow: 'hidden' }}
      >
        <Form
          form={passwordForm}
          layout="vertical"
          onFinish={handleResetPasswordSubmit}
          style={{ marginTop: '20px' }}
        >
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[
              { required: true, message: '请输入新密码' },
              { min: 6, message: '密码长度不能少于6个字符' },
            ]}
          >
            <Input.Password placeholder="请输入新密码" style={{ borderRadius: '8px' }} />
          </Form.Item>

          <Form.Item style={{ marginBottom: 0, textAlign: 'right', marginTop: '24px' }}>
            <Space>
              <Button
                onClick={() => setPasswordModalVisible(false)}
                style={{ borderRadius: '8px', height: '40px' }}
              >
                取消
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                style={{
                  ...primaryButtonStyle,
                  width: 'auto',
                  paddingLeft: '24px',
                  paddingRight: '24px',
                }}
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={
          <div style={modalHeaderStyle}>
            <span style={modalHeaderAccent}></span>
            {`设置头像 - ${avatarUser?.username}`}
          </div>
        }
        open={avatarModalVisible}
        onCancel={() => setAvatarModalVisible(false)}
        footer={null}
        width={400}
        destroyOnHidden
        styles={{
          body: { padding: '24px' },
          header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' },
        }}
        style={{ borderRadius: '16px', overflow: 'hidden' }}
      >
        <div style={avatarModalStyle}>
          <div style={avatarWrapperStyle}>
            <Badge dot={!!avatarUser?.avatar} color="green" offset={[-5, 35]}>
              <Avatar
                size={120}
                icon={!avatarUser?.avatar && <UserOutlined />}
                src={getAvatarUrl(avatarUser)}
                style={{
                  backgroundColor: avatarUser?.avatar ? 'transparent' : '#1890ff',
                  border: '1px solid #f0f0f0',
                  cursor: 'pointer',
                }}
              />
            </Badge>
          </div>

          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            <input
              type="file"
              accept="image/jpeg,image/png,image/gif,image/webp"
              style={{ display: 'none' }}
              ref={fileInputRef}
              onChange={handleAvatarUpload}
            />

            <Button
              type="primary"
              icon={<CameraOutlined />}
              onClick={() => fileInputRef.current?.click()}
              loading={uploadLoading}
              block
              style={{
                ...primaryButtonStyle,
                height: '44px',
              }}
            >
              {avatarUser?.avatar ? '更换头像' : '上传头像'}
            </Button>

            {avatarUser?.avatar && (
              <Button
                danger
                icon={<DeleteOutlined />}
                onClick={handleAvatarDelete}
                block
                style={{ borderRadius: '8px', height: '44px' }}
              >
                删除头像
              </Button>
            )}
          </Space>

          <div style={{ marginTop: '16px', color: '#8c8c8c', fontSize: '12px' }}>
            支持 JPG、PNG、GIF、WebP 格式，大小不超过 5MB
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default UserManagement;