node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/app/(admin)/system/users/page.tsx

@@ -0,0 +1,620 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import {
+  Alert,
+  App,
+  Button,
+  Card,
+  Col,
+  Form,
+  Input,
+  Modal,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+  Switch,
+  Tag,
+  TreeSelect,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ApartmentOutlined, KeyOutlined, UserAddOutlined } from '@ant-design/icons';
+import DataTable from '@/components/DataTable';
+import { fs, MILITARY } from '@/lib/theme';
+import { useAuth } from '@/components/AuthContext';
+import { useRowFlash } from '@/components/feedback';
+import { fmtDateTime } from '@/lib/format';
+import { graphHref } from '@/lib/graph-link';
+import { SECURITY_QUESTIONS } from '@/lib/security-questions';
+import { formRules } from '@/lib/formRules';
+
+type RoleBrief = { id: string; code: string; name: string };
+
+type UserRow = {
+  id: string;
+  username: string;
+  name: string;
+  email: string | null;
+  phone: string | null;
+  deptId: string | null;
+  dept: { id: string; name: string } | null;
+  status: number;
+  isSuper: number;
+  securityQuestion: string | null;
+  mustChangePassword: number;
+  lastLogin: string | null;
+  roles: RoleBrief[];
+};
+
+type DeptNode = { id: string; name: string; parentId: string | null; children?: DeptNode[] };
+type TreeNode = { value: string; title: string; children?: TreeNode[] };
+
+type FormValues = {
+  username: string;
+  password?: string;
+  name: string;
+  email?: string;
+  phone?: string;
+  deptId?: string;
+  roleIds?: string[];
+  status: number;
+  remark?: string;
+  securityQuestion?: string;
+  securityAnswer?: string;
+};
+
+/** 统一的 axios 包装：把「HTTP 200 但业务失败」也当异常抛出 */
+async function request<T>(
+  method: 'get' | 'post' | 'put' | 'delete',
+  url: string,
+  body?: unknown,
+  params?: unknown
+): Promise<T> {
+  const { data } = await axios.request({ method, url, data: body, params });
+  if (!data || data.code !== 0) throw new Error(data?.message || '请求失败');
+  return data.data as T;
+}
+
+function errMsg(e: unknown): string {
+  if (axios.isAxiosError(e)) {
+    const d = e.response?.data as { message?: string } | undefined;
+    return d?.message || e.message;
+  }
+  return e instanceof Error ? e.message : String(e);
+}
+
+function toTreeData(nodes: DeptNode[]): TreeNode[] {
+  return nodes.map((n) => ({
+    value: n.id,
+    title: n.name,
+    children: n.children?.length ? toTreeData(n.children) : undefined,
+  }));
+}
+
+/** 部门下拉用扁平结构（带缩进），TreeSelect 用树结构 */
+function flattenDepts(nodes: DeptNode[], depth = 0): { label: string; value: string }[] {
+  const out: { label: string; value: string }[] = [];
+  for (const n of nodes) {
+    out.push({ label: `${'　'.repeat(depth)}${n.name}`, value: n.id });
+    if (n.children?.length) out.push(...flattenDepts(n.children, depth + 1));
+  }
+  return out;
+}
+
+export default function UsersPage() {
+  const { message } = App.useApp();
+  const { user, hasPerm } = useAuth();
+
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<UserRow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm<FormValues>();
+
+  /**
+   * 注册开关（仅超级管理员可见可改）。
+   * 与接口侧约定一致：PUT /api/auth/register-config 只认 isSuper，
+   * 这里的 isSuper 判断只是「别给非超管看一个拨了没反应的开关」。
+   */
+  const isSuper = Boolean(user?.isSuper);
+  const [registerEnabled, setRegisterEnabled] = useState(false);
+  const [togglingRegister, setTogglingRegister] = useState(false);
+
+  useEffect(() => {
+    if (!isSuper) return;
+    let alive = true;
+    axios
+      .get('/api/auth/register-config')
+      .then(({ data }) => {
+        if (alive && data?.code === 0) setRegisterEnabled(Boolean(data.data?.enabled));
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [isSuper]);
+
+  const toggleRegister = async (checked: boolean) => {
+    setTogglingRegister(true);
+    try {
+      const { data } = await axios.put('/api/auth/register-config', { enabled: checked });
+      if (data?.code !== 0) throw new Error(data?.message || '切换失败');
+      setRegisterEnabled(checked);
+      message.success(checked ? '注册功能已开放，登录页将出现注册入口' : '注册功能已关闭');
+    } catch (e) {
+      // 受控 Switch：不更新 state，antd 会自动把拨片弹回原位
+      message.error(errMsg(e));
+    } finally {
+      setTogglingRegister(false);
+    }
+  };
+
+  /**
+   * 保存 / 切换状态后，让目标行闪一下。
+   * 只有 toast 的时候，用户看到"保存成功"却不知道改的是哪一行 ——
+   * 尤其是宽表横向滚动过、或者刚翻过页的情况下。
+   */
+  const { highlightRow, flashRow } = useRowFlash();
+
+  const [resetTarget, setResetTarget] = useState<UserRow | null>(null);
+  const [resetSubmitting, setResetSubmitting] = useState(false);
+  const [resetForm] = Form.useForm<{ password: string; confirm: string }>();
+
+  const deptQuery = useQuery({
+    queryKey: ['depts'],
+    queryFn: () => request<DeptNode[]>('get', '/api/depts'),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const roleQuery = useQuery({
+    queryKey: ['roles-all'],
+    queryFn: () => request<{ list: RoleBrief[] }>('get', '/api/roles', undefined, { page: 1, pageSize: 200 }),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const deptTree = deptQuery.data ?? [];
+  const roleOptions = (roleQuery.data?.list ?? []).map((r) => ({ label: r.name, value: r.id }));
+
+  const refresh = () => setRefreshKey((k) => k + 1);
+
+  const openCreate = () => {
+    setEditing(null);
+    form.resetFields();
+    form.setFieldsValue({ status: 1, roleIds: [] });
+    setOpen(true);
+  };
+
+  const openEdit = (row: UserRow) => {
+    setEditing(row);
+    form.resetFields();
+    form.setFieldsValue({
+      username: row.username,
+      name: row.name,
+      email: row.email ?? undefined,
+      phone: row.phone ?? undefined,
+      deptId: row.deptId ?? undefined,
+      roleIds: row.roles.map((r) => r.id),
+      status: row.status,
+    });
+    setOpen(true);
+  };
+
+  const submit = async () => {
+    let values: FormValues;
+    try {
+      values = await form.validateFields();
+    } catch {
+      return; // 校验未通过，antd 已在字段上给出红字提示
+    }
+
+    setSubmitting(true);
+    try {
+      if (editing) {
+        const body: Partial<FormValues> = { ...values };
+        delete body.username; // 用户名不允许改，避免破坏审计线索
+        delete body.password;
+        // 密保只在新建时设置；编辑态不提交这两个字段，避免误清空已有密保
+        delete body.securityQuestion;
+        delete body.securityAnswer;
+        await request('put', `/api/users/${editing.id}`, body);
+        message.success('保存成功');
+        flashRow(editing.id);
+      } else {
+        await request('post', '/api/users', values);
+        message.success('新增成功');
+      }
+      setOpen(false);
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const toggleStatus = async (row: UserRow, checked: boolean) => {
+    try {
+      await request('put', `/api/users/${row.id}`, { status: checked ? 1 : 0 });
+      message.success(checked ? '已启用' : '已停用');
+      flashRow(row.id);
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const remove = async (row: UserRow) => {
+    try {
+      await request('delete', `/api/users/${row.id}`);
+      message.success('删除成功');
+      refresh();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const submitReset = async () => {
+    let values: { password: string; confirm: string };
+    try {
+      values = await resetForm.validateFields();
+    } catch {
+      return;
+    }
+    if (!resetTarget) return;
+    setResetSubmitting(true);
+    try {
+      await request('put', `/api/users/${resetTarget.id}/password`, { password: values.password });
+      message.success('密码已重置，该用户下次登录需先修改密码');
+      setResetTarget(null);
+      resetForm.resetFields();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setResetSubmitting(false);
+    }
+  };
+
+  const columns: ColumnsType<UserRow> = [
+    {
+      title: '用户名',
+      dataIndex: 'username',
+      width: 140,
+      render: (v: string, row) => (
+        <Space size={6} wrap>
+          <span>{v}</span>
+          {row.isSuper === 1 ? <Tag color="gold">超管</Tag> : null}
+          {row.mustChangePassword === 1 ? <Tag color="warning">待改密</Tag> : null}
+          {!row.securityQuestion ? <Tag>未设密保</Tag> : null}
+        </Space>
+      ),
+    },
+    { title: '姓名', dataIndex: 'name', width: 120 },
+    { title: '部门', dataIndex: ['dept', 'name'], width: 140, render: (_v, row) => row.dept?.name ?? '-' },
+    {
+      title: '角色',
+      dataIndex: 'roles',
+      width: 200,
+      render: (_v, row) =>
+        row.roles.length ? (
+          <Space size={4} wrap>
+            {row.roles.map((r) => (
+              <Tag key={r.id} style={{ background: MILITARY.soft, color: MILITARY.primary, borderColor: MILITARY.softStrong }}>
+                {r.name}
+              </Tag>
+            ))}
+          </Space>
+        ) : (
+          '-'
+        ),
+    },
+    { title: '手机号', dataIndex: 'phone', width: 140, render: (v: string | null) => v || '-' },
+    { title: '邮箱', dataIndex: 'email', width: 200, ellipsis: true, render: (v: string | null) => v || '-' },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 100,
+      render: (v: number, row) => (
+        <Switch
+          checked={v === 1}
+          checkedChildren="启用"
+          unCheckedChildren="停用"
+          disabled={!hasPerm('system:user:edit')}
+          onChange={(checked) => toggleStatus(row, checked)}
+        />
+      ),
+    },
+    {
+      title: '最后登录',
+      dataIndex: 'lastLogin',
+      width: 180,
+      render: (v: string | null) => fmtDateTime(v),
+    },
+    {
+      // ★ 多实体关联：一条账号 = 部门 + 若干角色，
+      //   点「关联」跳图谱后会高亮这几个节点之间的连线（而不是只定位一个节点）。
+      //   放在固定的操作列里，宽表横向滚动时也始终可见。
+      title: '操作',
+      key: 'action',
+      width: 270,
+      fixed: 'right',
+      render: (_v, row) => (
+        <Space size={4}>
+          <Button type="link" size="small" icon={<ApartmentOutlined />} href={graphHref('User', row.id)}>
+            关联
+          </Button>
+          {hasPerm('system:user:edit') ? (
+            <Button type="link" size="small" onClick={() => openEdit(row)}>
+              编辑
+            </Button>
+          ) : null}
+          {hasPerm('system:user:reset') ? (
+            <Button
+              type="link"
+              size="small"
+              icon={<KeyOutlined />}
+              onClick={() => {
+                resetForm.resetFields();
+                setResetTarget(row);
+              }}
+            >
+              重置密码
+            </Button>
+          ) : null}
+          {hasPerm('system:user:del') ? (
+            <Popconfirm
+              title="确认删除该用户？"
+              description="删除后该账号将无法登录，历史操作日志仍会保留。"
+              okText="删除"
+              cancelText="取消"
+              okButtonProps={{ danger: true }}
+              onConfirm={() => remove(row)}
+            >
+              <Button type="link" size="small" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          ) : null}
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      {/* 注册开关：只给超管看。非超管即便猜到接口也改不了（PUT 侧校验 isSuper） */}
+      {isSuper ? (
+        <Card size="small" style={{ marginBottom: 12 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+            <UserAddOutlined style={{ fontSize: fs(18), color: MILITARY.primary }} />
+            <div style={{ flex: '1 1 240px' }}>
+              <div style={{ fontWeight: 600, fontSize: fs(13.5), color: MILITARY.text }}>注册设置</div>
+              <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 2, lineHeight: 1.6 }}>
+                开启后，登录页会显示「注册账号」入口，访客可自助开通账号。新注册账号默认没有角色与部门，
+                需手动分配后才能使用功能；同一 IP 10 分钟内最多注册 5 个账号。
+              </div>
+            </div>
+            <Switch
+              checked={registerEnabled}
+              loading={togglingRegister}
+              checkedChildren="开放注册"
+              unCheckedChildren="关闭注册"
+              onChange={toggleRegister}
+            />
+          </div>
+        </Card>
+      ) : null}
+
+      <DataTable<UserRow>
+        api="/api/users"
+        rowKey="id"
+        columns={columns}
+        refreshKey={refreshKey}
+        highlightRow={highlightRow}
+        scrollX={1400}
+        selectable={hasPerm('system:user:del')}
+        onBatchDelete={async (keys) => {
+          try {
+            await Promise.all(keys.map((k) => request('delete', `/api/users/${String(k)}`)));
+            message.success('批量删除完成');
+            refresh();
+          } catch (e) {
+            message.error(errMsg(e));
+          }
+        }}
+        searchFields={[
+          {
+            name: 'status',
+            label: '状态',
+            type: 'select',
+            options: [
+              { label: '启用', value: 1 },
+              { label: '停用', value: 0 },
+            ],
+          },
+          { name: 'deptId', label: '部门', type: 'select', options: flattenDepts(deptTree) },
+        ]}
+        canAdd={hasPerm('system:user:add')}
+        onAdd={openCreate}
+        addText="新增用户"
+      />
+
+      <Modal
+        title={editing ? '编辑用户' : '新增用户'}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={submit}
+        confirmLoading={submitting}
+        destroyOnHidden
+        mask={{ closable: false }}
+        width={560}
+      >
+        <Form form={form} layout="vertical" style={{ marginTop: 8 }}>
+          <Form.Item
+            name="username"
+            label="用户名"
+            rules={formRules('username', { label: '用户名', required: true })}
+          >
+            <Input maxLength={32} placeholder="登录账号，创建后不可修改" disabled={Boolean(editing)} />
+          </Form.Item>
+
+          {!editing ? (
+            <Form.Item
+              name="password"
+              label="初始密码"
+              rules={formRules('password', { label: '初始密码', required: true })}
+            >
+              <Input.Password maxLength={64} placeholder="6-64 位，不能含空格" autoComplete="new-password" />
+            </Form.Item>
+          ) : null}
+
+          {!editing ? (
+            <>
+              <Alert
+                type="info"
+                showIcon
+                style={{ marginBottom: 16 }}
+                title="建议创建账号时设置密保问题"
+                description="用户忘记密码时可凭密保问题自助找回；未设置密保的账号只能提交人工申诉，由超管核实后重置。"
+              />
+              <Row gutter={16}>
+                <Col span={12}>
+                  <Form.Item
+                    name="securityQuestion"
+                    label="密保问题"
+                    dependencies={['securityAnswer']}
+                    rules={[
+                      ({ getFieldValue }) => ({
+                        validator: (_r, value) =>
+                          !getFieldValue('securityAnswer') || value
+                            ? Promise.resolve()
+                            : Promise.reject(new Error('请选择密保问题')),
+                      }),
+                    ]}
+                  >
+                    <Select
+                      allowClear
+                      placeholder="选填（推荐设置）"
+                      options={SECURITY_QUESTIONS.map((q) => ({ label: q, value: q }))}
+                    />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <Form.Item
+                    name="securityAnswer"
+                    label="密保答案"
+                    dependencies={['securityQuestion']}
+                    rules={[
+                      ({ getFieldValue }) => ({
+                        validator: (_r, value) =>
+                          !getFieldValue('securityQuestion') || value
+                            ? Promise.resolve()
+                            : Promise.reject(new Error('请填写密保答案')),
+                      }),
+                    ]}
+                  >
+                    <Input.Password placeholder="选填，加密保存" autoComplete="new-password" />
+                  </Form.Item>
+                </Col>
+              </Row>
+            </>
+          ) : null}
+
+          <Form.Item
+            name="name"
+            label="姓名"
+            rules={formRules('name', { label: '姓名', required: true })}
+          >
+            <Input maxLength={32} placeholder="真实姓名，2-32 个汉字" />
+          </Form.Item>
+
+          <Form.Item name="deptId" label="所属部门">
+            <TreeSelect
+              allowClear
+              treeDefaultExpandAll
+              placeholder="请选择部门"
+              treeData={toTreeData(deptTree)}
+            />
+          </Form.Item>
+
+          <Form.Item name="roleIds" label="角色">
+            <Select
+              mode="multiple"
+              allowClear
+              placeholder="可多选"
+              options={roleOptions}
+              loading={roleQuery.isLoading}
+            />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="phone" label="手机号" rules={formRules('phone', { label: '手机号' })}>
+                <Input maxLength={20} placeholder="选填，11 位手机号" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="email" label="邮箱" rules={formRules('email', { label: '邮箱' })}>
+                <Input maxLength={254} placeholder="选填，如 name@example.com" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item name="status" label="状态" initialValue={1}>
+            <Select
+              options={[
+                { label: '启用', value: 1 },
+                { label: '停用', value: 0 },
+              ]}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title={`重置密码${resetTarget ? ` — ${resetTarget.name}` : ''}`}
+        open={Boolean(resetTarget)}
+        onCancel={() => setResetTarget(null)}
+        onOk={submitReset}
+        confirmLoading={resetSubmitting}
+        destroyOnHidden
+        width={420}
+      >
+        <Alert
+          type="warning"
+          showIcon
+          style={{ marginBottom: 16 }}
+          title="重置后该用户首次登录必须修改密码"
+          description="请通过安全渠道把临时密码告知本人；用户登录后会被强制跳转到修改密码页。"
+        />
+        <Form form={resetForm} layout="vertical" style={{ marginTop: 8 }}>
+          <Form.Item
+            name="password"
+            label="新密码"
+            rules={formRules('password', { label: '新密码', required: true })}
+          >
+            <Input.Password maxLength={64} placeholder="6-64 位，不能含空格" autoComplete="new-password" />
+          </Form.Item>
+          <Form.Item
+            name="confirm"
+            label="确认新密码"
+            dependencies={['password']}
+            rules={[
+              { required: true, message: '请再次输入新密码' },
+              ({ getFieldValue }) => ({
+                validator: (_r, value) =>
+                  !value || getFieldValue('password') === value
+                    ? Promise.resolve()
+                    : Promise.reject(new Error('两次输入的密码不一致')),
+              }),
+            ]}
+          >
+            <Input.Password maxLength={64} placeholder="再次输入" autoComplete="new-password" />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}