live-hub-py/web/frontend/src/pages/UsersPage.tsx

import { useEffect, useState, useCallback } from 'react';
import {
  Table, Button, Modal, Form, Input, Select, Tag, Popconfirm, Space,
  Checkbox, Divider, Alert,
} from 'antd';
import type { TableProps } from 'antd';
import { message } from '../utils/antdMessage';
import { PlusOutlined, EditOutlined, DeleteOutlined, SafetyOutlined, ReloadOutlined } from '@ant-design/icons';
import { userApi, type UserInfo } from '../api/modules';
import { usePermissions } from '../hooks/usePermissions';
import { getErrorMessage } from '../utils/error';

const ROLE_OPTIONS = [
  { value: 'super_admin', label: '超级管理员' },
  { value: 'operation', label: '运营' },
  { value: 'support', label: '客服' },
];

const ROLE_COLORS: Record<string, string> = {
  super_admin: 'red',
  operation: 'blue',
  support: 'green',
};

// 权限分组定义
const PERMISSION_GROUPS = [
  { label: '用户管理', prefix: 'user:' },
  { label: '账号管理', prefix: 'account:' },
  { label: '登录任务', prefix: 'login:' },
  { label: 'Cookie', prefix: 'cookie:' },
  { label: '斗鱼活动', prefix: 'douyu:' },
  { label: '虎牙', prefix: 'huya:' },
  { label: '代理 & 白名单', prefix: ['proxy:', 'whitelist:'] },
  { label: '系统', prefix: ['system:', 'audit:'] },
];

function isPrefixMatch(key: string, prefix: string | string[]): boolean {
  if (Array.isArray(prefix)) return prefix.some(p => key.startsWith(p));
  return key.startsWith(prefix);
}

export default function UsersPage() {
  const [users, setUsers] = useState<UserInfo[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<UserInfo | null>(null);
  const [form] = Form.useForm();
  const [pageSize, setPageSize] = useState(() => {
    const v = localStorage.getItem('user_page_size');
    return v ? Number(v) || 20 : 20;
  });
  const [currentPage, setCurrentPage] = useState(1);

  // 权限管理
  const [permModalOpen, setPermModalOpen] = useState(false);
  const [permUser, setPermUser] = useState<UserInfo | null>(null);
  const [permList, setPermList] = useState<Record<string, string>>({});
  const [rolePermMap, setRolePermMap] = useState<Record<string, string[]>>({});
  const [selectedPerms, setSelectedPerms] = useState<string[]>([]);
  const [useCustom, setUseCustom] = useState(false);
  const [permLoading, setPermLoading] = useState(false);

  // 手机号绑定 / 设备重置
  const [phoneModalOpen, setPhoneModalOpen] = useState(false);
  const [phoneUser, setPhoneUser] = useState<UserInfo | null>(null);
  const [phoneForm] = Form.useForm<{ phone: string }>();
  const [phoneSaving, setPhoneSaving] = useState(false);
  const [resettingId, setResettingId] = useState<number | null>(null);
  const { can } = usePermissions();

  const canAssignPerm = can('user:assign_permissions');
  const canCreate = can('user:create');
  const canEdit = can('user:edit');
  const canRename = can('user:rename');
  const canDelete = can('user:delete');
  const canManageUser = canEdit || canRename;

  const loadUsers = useCallback(async () => {
    setLoading(true);
    try {
      const data = await userApi.list();
      setUsers(data);
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadUsers();
  }, [loadUsers]);

  const handleCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({ role: 'support' });
    setModalOpen(true);
  };

  const handleEdit = (user: UserInfo) => {
    setEditing(user);
    form.resetFields();
    form.setFieldsValue({
      username: user.username,
      role: user.role,
      remark: user.remark,
    });
    setModalOpen(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      if (editing) {
        if (canRename && values.username !== editing.username) {
          await userApi.rename(editing.id, values.username);
        }
        if (canEdit) {
          const updateData: { role: string; remark: string; password?: string } = { role: values.role, remark: values.remark };
          if (values.password) updateData.password = values.password;
          await userApi.update(editing.id, updateData);
        }
        message.success('已更新');
      } else {
        await userApi.create(values);
        message.success('已创建');
      }
      setModalOpen(false);
      loadUsers();
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await userApi.delete(id);
      message.success('已删除');
      loadUsers();
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    }
  };

  // ---- 手机号 / 设备 ----
  const handlePhoneClick = (user: UserInfo) => {
    setPhoneUser(user);
    phoneForm.setFieldsValue({ phone: user.phone || '' });
    setPhoneModalOpen(true);
  };

  const handlePhoneSave = async () => {
    if (!phoneUser) return;
    try {
      const values = await phoneForm.validateFields();
      setPhoneSaving(true);
      await userApi.bindPhone(phoneUser.id, values.phone.trim());
      message.success('手机号已更新');
      setPhoneModalOpen(false);
      loadUsers();
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    } finally {
      setPhoneSaving(false);
    }
  };

  const handleResetDevice = async (id: number) => {
    setResettingId(id);
    try {
      const result = await userApi.resetDevice(id);
      message.success(result.message || (result.reset ? '已重置设备' : '当前没有已绑定设备'));
      loadUsers();
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    } finally {
      setResettingId(null);
    }
  };

  // ---- 权限管理 ----
  const handlePermClick = async (user: UserInfo) => {
    setPermUser(user);
    setPermModalOpen(true);
    setPermLoading(true);
    try {
      const data = await userApi.listPermissions();
      setPermList(data.permissions || {});
      setRolePermMap(data.role_permissions || {});
      // 初始化选中权限：如果用户有 custom_permissions 则使用，否则使用角色默认
      if (user.custom_permissions !== null && user.custom_permissions !== undefined) {
        setUseCustom(true);
        setSelectedPerms(user.custom_permissions);
      } else {
        setUseCustom(false);
        setSelectedPerms(data.role_permissions?.[user.role] || []);
      }
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    } finally {
      setPermLoading(false);
    }
  };

  const handlePermSave = async () => {
    if (!permUser) return;
    setPermLoading(true);
    try {
      await userApi.update(permUser.id, {
        custom_permissions: useCustom ? selectedPerms : null,
      });
      message.success('权限已更新');
      setPermModalOpen(false);
      loadUsers();
    } catch (e: unknown) {
      message.error(getErrorMessage(e));
    } finally {
      setPermLoading(false);
    }
  };

  const handleRoleChangeForPerm = (role: string) => {
    const rolePerms = rolePermMap[role] || [];
    setSelectedPerms(rolePerms);
  };

  const columns: TableProps<UserInfo>['columns'] = [
    { title: 'ID', dataIndex: 'id', width: 60 },
    { title: '用户名', dataIndex: 'username', width: 128, ellipsis: true },
    {
      title: '角色',
      dataIndex: 'role',
      width: 100,
      render: (role: string) => {
        const label = ROLE_OPTIONS.find((r) => r.value === role)?.label || role;
        return <Tag color={ROLE_COLORS[role] || 'default'}>{label}</Tag>;
      },
    },
    {
      title: '权限模式',
      dataIndex: 'custom_permissions',
      width: 100,
      render: (_: unknown, record: UserInfo) =>
        record.custom_permissions !== null && record.custom_permissions !== undefined
          ? <Tag color="orange">自定义</Tag>
          : <Tag>角色默认</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      width: 80,
      render: (active: boolean) => active ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      width: 170,
      render: (_: unknown, record: UserInfo) => (
        <Space size={4}>
          {record.phone ? (
            <span>{record.phone_masked || record.phone}</span>
          ) : (
            <Tag>未绑定</Tag>
          )}
          {canEdit && (
            <Button size="small" type="link" onClick={() => handlePhoneClick(record)}>
              {record.phone ? '修改' : '绑定'}
            </Button>
          )}
        </Space>
      ),
    },
    {
      title: '绑定设备',
      dataIndex: 'device_id',
      width: 230,
      render: (_: unknown, record: UserInfo) =>
        record.device_id ? (
          <Space size={4} wrap>
            <span style={{ fontFamily: 'monospace' }}>{record.device_id_masked || record.device_id}</span>
            {canEdit && (
              <Popconfirm
                title="确认重置设备？"
                description="重置后该账号下次登录会重新绑定当前设备。"
                onConfirm={() => handleResetDevice(record.id)}
              >
                <Button
                  size="small"
                  type="link"
                  danger
                  icon={<ReloadOutlined />}
                  loading={resettingId === record.id}
                >
                  重置设备
                </Button>
              </Popconfirm>
            )}
          </Space>
        ) : (
          <Tag>未绑定</Tag>
        ),
    },
    { title: '备注', dataIndex: 'remark', width: 180, ellipsis: true },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      align: 'left',
      render: (_: unknown, record: UserInfo) => (
        <Space size={4} wrap={false}>
          {canManageUser && (
            <Button size="small" type="text" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
          )}
          {canAssignPerm && (
            <Button size="small" type="text" icon={<SafetyOutlined />} onClick={() => handlePermClick(record)}>权限</Button>
          )}
          {canDelete && record.role !== 'super_admin' && (
            <Popconfirm
              title="确认删除该用户？"
              description="该用户将被停用并解除账号分配，历史任务会保留。"
              onConfirm={() => handleDelete(record.id)}
            >
              <Button danger size="small" type="text" icon={<DeleteOutlined />}>删除</Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
        <h2>用户管理</h2>
        {canCreate && <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建用户</Button>}
      </div>
      <Table
        columns={columns}
        dataSource={users}
        rowKey="id"
        loading={loading}
        size="small"
        tableLayout="fixed"
        scroll={{ x: 1240 }}
        pagination={{
          current: currentPage,
          pageSize,
          showSizeChanger: true,
          showTotal: (t) => `共 ${t} 条`,
          onChange: (page, size) => {
            setCurrentPage(page);
            if (size !== pageSize) {
              setPageSize(size);
              localStorage.setItem('user_page_size', String(size));
              setCurrentPage(1); // 切换 pageSize 时重置到第1页
            }
          },
        }}
      />

      {/* 编辑/新建用户 Modal */}
      <Modal
        title={editing ? '编辑用户' : '新建用户'}
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        onOk={handleSave}
        okText={editing && !canEdit ? '保存用户名' : '保存'}
        width={560}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="username"
            label="用户名"
            extra={editing && canRename ? '改名不会改变用户 ID，账号分配、任务、支付和审计记录均会保留。' : undefined}
            rules={[{ required: true, message: '请输入用户名' }, { min: 2, max: 64, message: '用户名长度需为 2-64 个字符' }]}
          >
            <Input disabled={!!editing && !canRename} autoComplete="off" />
          </Form.Item>
          <Form.Item
            name="password"
            label={editing ? '新密码（留空不修改）' : '密码'}
            rules={editing ? [] : [{ required: true, message: '请输入密码' }]}
          >
            <Input.Password disabled={!!editing && !canEdit} autoComplete="new-password" placeholder={editing ? '留空不修改' : undefined} />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true }]}>
            <Select disabled={!!editing && !canEdit} options={ROLE_OPTIONS} />
          </Form.Item>
          <Form.Item name="remark" label="备注">
            <Input disabled={!!editing && !canEdit} />
          </Form.Item>
        </Form>
      </Modal>

      {/* 权限管理 Modal */}
      <Modal
        title={permUser ? `权限管理 - ${permUser.username}` : '权限管理'}
        open={permModalOpen}
        onCancel={() => setPermModalOpen(false)}
        onOk={handlePermSave}
        okText="保存"
        width={640}
        confirmLoading={permLoading}
      >
        {permUser && (
          <>
            <Alert
              message={
                useCustom
                  ? '当前使用自定义权限，修改角色不会自动更新权限'
                  : '当前使用角色默认权限，修改角色后权限会自动跟随'
              }
              type={useCustom ? 'warning' : 'info'}
              showIcon
              style={{ marginBottom: 16 }}
            />
            <div style={{ marginBottom: 16 }}>
              <span>权限模式：</span>
              <Select
                value={useCustom ? 'custom' : 'role'}
                style={{ width: 140 }}
                onChange={(v) => {
                  if (v === 'role') {
                    setUseCustom(false);
                    setSelectedPerms(rolePermMap[permUser.role] || []);
                  } else {
                    setUseCustom(true);
                  }
                }}
                options={[
                  { value: 'role', label: '角色默认' },
                  { value: 'custom', label: '自定义' },
                ]}
              />
              {useCustom && (
                <Button
                  type="link"
                  size="small"
                  onClick={() => handleRoleChangeForPerm(permUser.role)}
                >
                  重置为角色默认
                </Button>
              )}
            </div>
            <Checkbox.Group
              value={selectedPerms}
              onChange={(vals) => setSelectedPerms(vals as string[])}
              disabled={!useCustom}
            >
              {PERMISSION_GROUPS.map((group) => {
                const groupKeys = Object.keys(permList).filter(k => isPrefixMatch(k, group.prefix));
                if (groupKeys.length === 0) return null;
                return (
                  <div key={group.label} style={{ marginBottom: 12 }}>
                    <Divider style={{ margin: '8px 0 12px' }}>
                      {group.label}
                    </Divider>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 24px' }}>
                      {groupKeys.map(key => (
                        <Checkbox key={key} value={key}>
                          {permList[key]}
                        </Checkbox>
                      ))}
                    </div>
                  </div>
                );
              })}
            </Checkbox.Group>
          </>
        )}
      </Modal>

      {/* 绑定 / 修改手机号 Modal */}
      <Modal
        title={phoneUser ? `绑定手机号 - ${phoneUser.username}` : '绑定手机号'}
        open={phoneModalOpen}
        onCancel={() => setPhoneModalOpen(false)}
        onOk={handlePhoneSave}
        okText="保存"
        confirmLoading={phoneSaving}
        width={420}
      >
        <Form form={phoneForm} layout="vertical">
          <Form.Item
            name="phone"
            label="手机号"
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的 11 位手机号' },
            ]}
          >
            <Input placeholder="11 位手机号" maxLength={11} autoComplete="tel" />
          </Form.Item>
          <Alert
            type="info"
            showIcon
            message="绑定后该账号必须使用「密码 + 短信验证码 + 本机 DCAuth 设备」登录。"
          />
        </Form>
      </Modal>
    </div>
  );
}