feat: 系统管理

src/pages/system/menu/config.tsx

@@ -0,0 +1,125 @@
+// src/pages/system/menu/config.tsx
+import type {
+  ProColumns,
+  ProFormColumnsType,
+} from '@ant-design/pro-components';
+import { Switch } from 'antd';
+import type { MenuVO } from '@/services/system/menu';
+
+export const baseMenuColumns: ProColumns<MenuVO>[] = [
+  {
+    title: '菜单名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '图标',
+    dataIndex: 'icon',
+    width: 60,
+    render: (_, record: MenuVO) => (
+      <span>
+        {record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
+      </span>
+    ),
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    width: 80,
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'permission',
+    width: 150,
+  },
+  {
+    title: '组件路径',
+    dataIndex: 'component',
+    width: 150,
+  },
+  {
+    title: '组件名称',
+    dataIndex: 'componentName',
+    width: 150,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    render: (_, record: MenuVO) => (
+      <Switch
+        checked={record.status === 1}
+        disabled={true} // 可后续改为可编辑
+      />
+    ),
+  },
+];
+
+export const formColumns = (_type: string): ProFormColumnsType[] => [
+  {
+    title: '菜单名称',
+    dataIndex: 'name',
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入菜单名称',
+        },
+      ],
+    },
+  },
+  {
+    title: '图标',
+    dataIndex: 'icon',
+    valueType: 'select',
+    fieldProps: {
+      placeholder: '请选择图标',
+      options: [
+        { label: '商品', value: 'icon-product' },
+        { label: '系统', value: 'icon-system' },
+        { label: '用户', value: 'icon-user' },
+        { label: '设置', value: 'icon-setting' },
+      ],
+    },
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    valueType: 'digit',
+    fieldProps: {
+      placeholder: '请输入排序值',
+    },
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'permission',
+    fieldProps: {
+      placeholder: '请输入权限标识',
+    },
+  },
+  {
+    title: '组件路径',
+    dataIndex: 'component',
+    fieldProps: {
+      placeholder: '请输入组件路径',
+    },
+  },
+  {
+    title: '组件名称',
+    dataIndex: 'componentName',
+    fieldProps: {
+      placeholder: '请输入组件名称',
+    },
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'select',
+    fieldProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '禁用', value: 0 },
+      ],
+    },
+  },
+];

src/pages/system/menu/index.tsx

@@ -1,5 +1,126 @@
-const SyStemMenu = () => {
-  return <>SyStemMenu</>;
+// src/pages/system/menu/index.tsx
+
+import { PlusOutlined } from '@ant-design/icons';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { Popconfirm } from 'antd';
+import React, { useCallback, useRef, useState } from 'react';
+import ConfigurableDrawerForm, {
+  type ConfigurableDrawerFormRef,
+} from '@/components/DrawerForm';
+import EnhancedProTable from '@/components/EnhancedProTable';
+import type { ToolbarAction } from '@/components/EnhancedProTable/types';
+import { formStatusType } from '@/constants';
+import {
+  createMenu,
+  deleteMenu,
+  getMenuList,
+  type MenuReqVO,
+  type MenuVO,
+  updateMenu,
+} from '@/services/system/menu';
+import { handleTree } from '@/utils/tree';
+import { baseMenuColumns, formColumns } from './config';
+
+const SystemMenu = () => {
+  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
+  const tableRef = useRef<ActionType>(null);
+
+  const [type, setType] = useState<'create' | 'update'>('create');
+  const [id, setId] = useState<number>(0);
+
+  const handleEdit = (record: MenuVO) => {
+    setType('update');
+    setId(record.id);
+
+    configurableDrawerRef.current?.open(record);
+  };
+
+  const onFetch = async (params: MenuReqVO) => {
+    const data = await getMenuList({
+      ...params,
+    });
+    return {
+      data: handleTree(data),
+      success: true,
+      total: data.total,
+    };
+  };
+  const handleAdd = () => {
+    setType('create');
+    configurableDrawerRef.current?.open({});
+  };
+
+  const handleSubmit = useCallback(
+    async (values: MenuVO) => {
+      if (type === 'create') {
+        await createMenu(values);
+      } else {
+        await updateMenu({
+          ...values,
+          id,
+        });
+      }
+      tableRef.current?.reload();
+      return true;
+    },
+    [type, id],
+  );
+
+  const toolbarActions: ToolbarAction[] = [
+    {
+      key: 'add',
+      label: '新建',
+      type: 'primary',
+      icon: <PlusOutlined />,
+      onClick: handleAdd,
+    },
+  ];
+
+  const actionColumns: ProColumns<MenuVO> = {
+    title: '操作',
+    dataIndex: 'option',
+    valueType: 'option',
+    fixed: 'right',
+    width: 120,
+    render: (_text: React.ReactNode, record: MenuVO, _: any, action: any) => [
+      <a key="editable" onClick={() => handleEdit(record)}>
+        编辑
+      </a>,
+      <Popconfirm
+        title="是否删除?"
+        key="delete"
+        onConfirm={async () => {
+          await deleteMenu(record.id);
+          action?.reload();
+        }}
+        okText="是"
+        cancelText="否"
+      >
+        <a>删除</a>
+      </Popconfirm>,
+    ],
+  };
+  const columns = [...baseMenuColumns, actionColumns];
+  return (
+    <>
+      <EnhancedProTable<MenuVO>
+        ref={tableRef}
+        columns={columns}
+        request={onFetch}
+        toolbarActions={toolbarActions}
+        headerTitle="租户列表"
+        showIndex={false}
+        showSelection={false}
+      />
+
+      <ConfigurableDrawerForm
+        ref={configurableDrawerRef}
+        title={formStatusType[type]}
+        columns={formColumns(type)}
+        onSubmit={handleSubmit}
+      />
+    </>
+  );
 };
 
-export default SyStemMenu;
+export default SystemMenu;