node-resource-utils 0.0.0-stage → 1.1.8

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

@@ -0,0 +1,215 @@
+'use client';
+
+import { useState } from 'react';
+import axios from 'axios';
+import { App, Button, Descriptions, Drawer, Popconfirm, Tag, Typography } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { ClearOutlined, EyeOutlined } from '@ant-design/icons';
+import DataTable from '@/components/DataTable';
+import { useAuth } from '@/components/AuthContext';
+import { fmtDateTime } from '@/lib/format';
+import { fs, MILITARY } from '@/lib/theme';
+
+type LogRow = {
+  id: string;
+  userId: string | null;
+  username: string | null;
+  module: string;
+  action: string;
+  method: string | null;
+  path: string | null;
+  targetId: string | null;
+  detail: string | null;
+  ip: string | null;
+  userAgent: string | null;
+  status: number;
+  durationMs: number | null;
+  createdAt: string;
+};
+
+const MODULE_OPTIONS = [
+  '用户管理',
+  '角色管理',
+  '菜单管理',
+  '操作日志',
+  '员工管理',
+  '数据导出',
+  '文档处理',
+  '文件管理',
+].map((m) => ({ label: m, value: m }));
+
+const ACTION_OPTIONS = ['新增', '修改', '删除', '导出', '导入', '分配权限', '重置密码', '清空', '解析', '生成导出', '上传'].map(
+  (a) => ({ label: a, value: a })
+);
+
+async function request<T>(method: 'get' | 'post' | 'put' | 'delete', url: string, body?: unknown): Promise<T> {
+  const { data } = await axios.request({ method, url, data: body });
+  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);
+}
+
+/** detail 存的是 JSON 字符串；解析失败就原样展示，不要因为一条脏日志把抽屉搞崩 */
+function prettyDetail(detail: string | null): string {
+  if (!detail) return '（无详情）';
+  try {
+    return JSON.stringify(JSON.parse(detail), null, 2);
+  } catch {
+    return detail;
+  }
+}
+
+export default function LogsPage() {
+  const { message, modal } = App.useApp();
+  const { hasPerm } = useAuth();
+
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [detail, setDetail] = useState<LogRow | null>(null);
+
+  const clearAll = async () => {
+    try {
+      const res = await request<{ deleted: number }>('delete', '/api/logs');
+      message.success(`已清空 ${res.deleted} 条日志`);
+      setRefreshKey((k) => k + 1);
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const columns: ColumnsType<LogRow> = [
+    { title: '时间', dataIndex: 'createdAt', width: 180, render: (v: string) => fmtDateTime(v) },
+    { title: '操作人', dataIndex: 'username', width: 120, render: (v: string | null) => v || '-' },
+    { title: '模块', dataIndex: 'module', width: 120, render: (v: string) => <Tag style={{ background: MILITARY.soft, color: MILITARY.primary, borderColor: MILITARY.softStrong }}>{v}</Tag> },
+    { title: '动作', dataIndex: 'action', width: 110 },
+    { title: '方法', dataIndex: 'method', width: 90, render: (v: string | null) => v || '-' },
+    { title: '路径', dataIndex: 'path', ellipsis: true, render: (v: string | null) => v || '-' },
+    { title: 'IP', dataIndex: 'ip', width: 140, render: (v: string | null) => v || '-' },
+    {
+      title: '结果',
+      dataIndex: 'status',
+      width: 90,
+      render: (v: number) => (v === 1 ? <Tag color="success">成功</Tag> : <Tag color="error">失败</Tag>),
+    },
+    {
+      title: '耗时',
+      dataIndex: 'durationMs',
+      width: 100,
+      render: (v: number | null) => (v === null || v === undefined ? '-' : `${v} ms`),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      fixed: 'right',
+      render: (_v, row) => (
+        <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => setDetail(row)}>
+          详情
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <DataTable<LogRow>
+        api="/api/logs"
+        rowKey="id"
+        columns={columns}
+        refreshKey={refreshKey}
+        scrollX={1400}
+        exportable={{ filename: '操作日志.xlsx', module: 'logs' }}
+        searchFields={[
+          { name: 'logModule', label: '模块', type: 'select', options: MODULE_OPTIONS },
+          { name: 'action', label: '动作', type: 'select', options: ACTION_OPTIONS },
+          { name: 'dateRange', label: '时间范围', type: 'dateRange' },
+        ]}
+        toolbar={
+          hasPerm('system:log:del') ? (
+            <Popconfirm
+              title="确认清空全部日志？"
+              description="该操作不可恢复。"
+              okText="清空"
+              cancelText="取消"
+              okButtonProps={{ danger: true }}
+              onConfirm={clearAll}
+            >
+              <Button danger icon={<ClearOutlined />}>
+                清空日志
+              </Button>
+            </Popconfirm>
+          ) : null
+        }
+      />
+
+      <Drawer
+        title="日志详情"
+        size={560}
+        open={Boolean(detail)}
+        onClose={() => setDetail(null)}
+        extra={
+          <Button
+            onClick={() => {
+              modal.info({
+                title: '原始 User-Agent',
+                width: 560,
+                content: <div style={{ wordBreak: 'break-all' }}>{detail?.userAgent || '（无）'}</div>,
+              });
+            }}
+          >
+            查看 UA
+          </Button>
+        }
+      >
+        {detail ? (
+          <>
+            <Descriptions column={1} size="small" bordered>
+              <Descriptions.Item label="时间">{fmtDateTime(detail.createdAt)}</Descriptions.Item>
+              <Descriptions.Item label="操作人">{detail.username || '-'}</Descriptions.Item>
+              <Descriptions.Item label="模块 / 动作">
+                {detail.module} / {detail.action}
+              </Descriptions.Item>
+              <Descriptions.Item label="请求">
+                {detail.method || '-'} {detail.path || ''}
+              </Descriptions.Item>
+              <Descriptions.Item label="目标 ID">{detail.targetId || '-'}</Descriptions.Item>
+              <Descriptions.Item label="IP">{detail.ip || '-'}</Descriptions.Item>
+              <Descriptions.Item label="结果">
+                {detail.status === 1 ? '成功' : '失败'}
+                {detail.durationMs !== null && detail.durationMs !== undefined
+                  ? `（${detail.durationMs} ms）`
+                  : ''}
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Typography.Title level={5} style={{ marginTop: 20 }}>
+              变更内容
+            </Typography.Title>
+            <pre
+              style={{
+                margin: 0,
+                padding: 12,
+                // 跟随皮肤：深色皮肤下写死浅灰底会让 JSON 明细变成浅底浅字
+                background: MILITARY.soft,
+                color: MILITARY.text,
+                borderRadius: 6,
+                maxHeight: 380,
+                overflow: 'auto',
+                fontSize: fs(12),
+                lineHeight: 1.7,
+              }}
+            >
+              {prettyDetail(detail.detail)}
+            </pre>
+          </>
+        ) : null}
+      </Drawer>
+    </>
+  );
+}

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

@@ -0,0 +1,403 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import {
+  App,
+  Button,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+  TreeSelect,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+import { useAuth } from '@/components/AuthContext';
+import { BADGE_META, BADGE_SOURCES } from '@/lib/badges';
+
+type MenuRow = {
+  id: string;
+  parentId: string | null;
+  name: string;
+  path: string | null;
+  icon: string | null;
+  keywords: string | null;
+  badgeKey: string | null;
+  type: string;
+  permCode: string | null;
+  sort: number;
+  hidden: number;
+  status: number;
+  children?: MenuRow[];
+};
+
+type TreeSelectNode = { value: string; title: string; children?: TreeSelectNode[] };
+
+type FormValues = {
+  name: string;
+  parentId?: string;
+  path?: string;
+  icon?: string;
+  keywords?: string;
+  badgeKey?: string;
+  type: 'dir' | 'menu' | 'button';
+  permCode?: string;
+  sort: number;
+  hidden: number;
+  status: number;
+};
+
+const TYPE_META: Record<string, { text: string; color: string }> = {
+  dir: { text: '目录', color: 'blue' },
+  menu: { text: '菜单', color: 'green' },
+  button: { text: '按钮', color: 'orange' },
+};
+
+async function request<T>(
+  method: 'get' | 'post' | 'put' | 'delete',
+  url: string,
+  body?: unknown
+): Promise<T> {
+  const { data } = await axios.request({ method, url, data: body });
+  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);
+}
+
+/** antd 会把 children: [] 也当成有子节点渲染出展开箭头，需要拍掉空数组 */
+function normalize(nodes: MenuRow[]): MenuRow[] {
+  return nodes.map((n) => {
+    const children = n.children?.length ? normalize(n.children) : undefined;
+    return { ...n, children };
+  });
+}
+
+/** 排除自身及其子孙，避免把父级选成自己造成环 */
+function toParentOptions(nodes: MenuRow[], excludeId?: string): TreeSelectNode[] {
+  return nodes
+    .filter((n) => n.id !== excludeId && n.type !== 'button')
+    .map((n) => ({
+      value: n.id,
+      title: n.name,
+      children: n.children?.length ? toParentOptions(n.children, excludeId) : undefined,
+    }));
+}
+
+export default function MenusPage() {
+  const { message } = App.useApp();
+  const { hasPerm } = useAuth();
+  const canEdit = hasPerm('system:menu:edit');
+
+  const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState<MenuRow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [form] = Form.useForm<FormValues>();
+  // 只是为了让「徽标」那一项在选中后立刻显示这条计数源的说明
+  const watchedBadgeKey = Form.useWatch('badgeKey', form);
+
+  const query = useQuery({
+    queryKey: ['menus'],
+    queryFn: () => request<MenuRow[]>('get', '/api/menus'),
+  });
+
+  const tree = normalize(query.data ?? []);
+
+  const openCreate = (parent?: MenuRow) => {
+    setEditing(null);
+    form.resetFields();
+    form.setFieldsValue({
+      parentId: parent?.id,
+      type: parent ? 'menu' : 'dir',
+      sort: 0,
+      hidden: 0,
+      status: 1,
+    });
+    setOpen(true);
+  };
+
+  const openEdit = (row: MenuRow) => {
+    setEditing(row);
+    form.setFieldsValue({
+      name: row.name,
+      parentId: row.parentId ?? undefined,
+      path: row.path ?? undefined,
+      icon: row.icon ?? undefined,
+      keywords: row.keywords ?? undefined,
+      badgeKey: row.badgeKey ?? undefined,
+      type: (row.type as FormValues['type']) ?? 'menu',
+      permCode: row.permCode ?? undefined,
+      sort: row.sort,
+      hidden: row.hidden,
+      status: row.status,
+    });
+    setOpen(true);
+  };
+
+  const submit = async () => {
+    let values: FormValues;
+    try {
+      values = await form.validateFields();
+    } catch {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const body = { ...values, parentId: values.parentId || null };
+      if (editing) {
+        await request('put', `/api/menus/${editing.id}`, body);
+        message.success('保存成功');
+      } else {
+        await request('post', '/api/menus', body);
+        message.success('新增成功');
+      }
+      setOpen(false);
+      query.refetch();
+    } catch (e) {
+      message.error(errMsg(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const remove = async (row: MenuRow) => {
+    try {
+      await request('delete', `/api/menus/${row.id}`);
+      message.success('删除成功');
+      query.refetch();
+    } catch (e) {
+      message.error(errMsg(e));
+    }
+  };
+
+  const columns: ColumnsType<MenuRow> = [
+    { title: '菜单名称', dataIndex: 'name', width: 220 },
+    {
+      title: '类型',
+      dataIndex: 'type',
+      width: 90,
+      render: (v: string) => <Tag color={TYPE_META[v]?.color ?? 'default'}>{TYPE_META[v]?.text ?? v}</Tag>,
+    },
+    { title: '路由地址', dataIndex: 'path', width: 190, render: (v: string | null) => v || '-' },
+    {
+      title: '搜索别名',
+      dataIndex: 'keywords',
+      width: 150,
+      render: (v: string | null) => v || <span style={{ color: '#bbb' }}>-</span>,
+    },
+    {
+      title: '侧边栏徽标',
+      dataIndex: 'badgeKey',
+      width: 150,
+      render: (v: string | null) =>
+        v ? (
+          <Tag color="red">{BADGE_META[v]?.label ?? v}</Tag>
+        ) : (
+          <span style={{ color: '#bbb' }}>-</span>
+        ),
+    },
+    {
+      title: '权限标识',
+      dataIndex: 'permCode',
+      width: 200,
+      render: (v: string | null) => (v ? <Tag>{v}</Tag> : '-'),
+    },
+    { title: '图标', dataIndex: 'icon', width: 170, render: (v: string | null) => v || '-' },
+    { title: '排序', dataIndex: 'sort', width: 70 },
+    {
+      title: '显示',
+      dataIndex: 'hidden',
+      width: 80,
+      render: (v: number) => (v === 1 ? <Tag>隐藏</Tag> : <Tag color="success">显示</Tag>),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 80,
+      render: (v: number) => (v === 1 ? <Tag color="success">启用</Tag> : <Tag color="default">停用</Tag>),
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      render: (_v, row) =>
+        canEdit ? (
+          <Space size={4}>
+            {row.type !== 'button' ? (
+              <Button type="link" size="small" icon={<PlusOutlined />} onClick={() => openCreate(row)}>
+                子菜单
+              </Button>
+            ) : null}
+            <Button type="link" size="small" onClick={() => openEdit(row)}>
+              编辑
+            </Button>
+            <Popconfirm
+              title="确认删除该菜单？"
+              description="存在子菜单时无法删除。"
+              okText="删除"
+              cancelText="取消"
+              okButtonProps={{ danger: true }}
+              onConfirm={() => remove(row)}
+            >
+              <Button type="link" size="small" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        ) : (
+          '-'
+        ),
+    },
+  ];
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginBottom: 12 }}>
+        <Button icon={<ReloadOutlined />} onClick={() => query.refetch()}>
+          刷新
+        </Button>
+        {canEdit ? (
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => openCreate()}>
+            新增菜单
+          </Button>
+        ) : null}
+      </div>
+
+      <Table<MenuRow>
+        rowKey="id"
+        columns={columns}
+        dataSource={tree}
+        loading={query.isLoading}
+        pagination={false}
+        size="middle"
+        defaultExpandAllRows
+        scroll={{ x: 1340 }}
+      />
+
+      <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="parentId" label="上级菜单">
+            <TreeSelect
+              allowClear
+              treeDefaultExpandAll
+              placeholder="不选表示顶级菜单"
+              treeData={toParentOptions(tree, editing?.id)}
+            />
+          </Form.Item>
+
+          <Form.Item name="type" label="类型" rules={[{ required: true, message: '请选择类型' }]}>
+            <Select
+              options={[
+                { label: '目录', value: 'dir' },
+                { label: '菜单', value: 'menu' },
+                { label: '按钮', value: 'button' },
+              ]}
+            />
+          </Form.Item>
+
+          <Form.Item name="name" label="菜单名称" rules={[{ required: true, message: '请输入菜单名称' }]}>
+            <Input placeholder="显示在侧边栏的文字" />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item name="path" label="路由地址">
+                <Input placeholder="如 /system/users" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item name="icon" label="图标名">
+                <Input placeholder="如 TeamOutlined" />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Form.Item name="permCode" label="权限标识" tooltip="唯一；按钮级鉴权用它判断显隐">
+            <Input placeholder="如 system:user:add" />
+          </Form.Item>
+
+          <Form.Item
+            name="keywords"
+            label="搜索别名"
+            tooltip="全局搜索（Ctrl K）的命中词。用户口头怎么叫这个功能，就写什么，空格或逗号分隔"
+          >
+            <Input placeholder="如：员工 花名册 人员" />
+          </Form.Item>
+
+          <Form.Item
+            name="badgeKey"
+            label="侧边栏徽标"
+            tooltip="选了计数源，这个菜单就会在侧边栏显示红色数字"
+            extra={
+              watchedBadgeKey
+                ? BADGE_META[watchedBadgeKey]?.hint
+                : '留空表示不显示徽标。数字由对应模块实时计算，不同角色看到的可能不同'
+            }
+          >
+            <Select
+              allowClear
+              placeholder="不显示徽标"
+              options={BADGE_SOURCES.map((src) => ({
+                label: src.label,
+                value: src.key,
+                title: src.hint,
+              }))}
+            />
+          </Form.Item>
+
+          <Row gutter={16}>
+            <Col span={8}>
+              <Form.Item name="sort" label="排序">
+                <InputNumber min={0} max={9999} style={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="hidden" label="侧边栏">
+                <Select
+                  options={[
+                    { label: '显示', value: 0 },
+                    { label: '隐藏', value: 1 },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="status" label="状态">
+                <Select
+                  options={[
+                    { label: '启用', value: 1 },
+                    { label: '停用', value: 0 },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
+    </div>
+  );
+}