fix(菜单管理): 1.新增菜单管理页面；2.新增菜单管理国际化文件

config/routes.ts

@@ -77,6 +77,19 @@
         icon: 'smile',
         component: './system/Permission',
       },
+      {
+        path: '/system/menu',
+        name: 'menu',
+        icon: 'smile',
+        component: './system/Menu',
+      },
+      {
+        path: '/system/menu/detail',
+        name: 'menuDetail',
+        icon: 'smile',
+        hideInMenu: true,
+        component: './system/Menu/Detail',
+      },
       // {
       //   path: '/system/open-api',
       //   name: 'open-api',

src/locales/zh-CN/menu.ts

@@ -13,6 +13,8 @@ export default {
   'menu.system.tenant': '租户管理',
   'menu.system.datasource': '数据源管理',
   'menu.system.department': '部门管理',
+  'menu.system.menu': '菜单管理',
+  'menu.system.menuDetail': '菜单详情',
   'menu.system.assets': '资产分配',
   'menu.system.member': '用户',
   'menu.device': '设备管理',

src/locales/zh-CN/pages.ts

@@ -131,6 +131,10 @@ export default {
   'pages.system.role.option.unBind': '是否解除绑定',
   'pages.system.role.option.unBinds': '是否批量解除绑定?',
   'pages.system.role.option.delete': '确定要删除吗？',
+  // 系统设置-菜单管理
+  'pages.system.menu.option.addChildren': '新增子菜单',
+  'pages.system.menu.detail': '基本信息',
+  'pages.system.menu.buttons': '按钮管理',
   // 系统设置-第三方平台
   'pages.system.openApi': '第三方平台',
   'pages.system.openApi.username': '用户名',

src/pages/system/Department/index.tsx

@@ -170,15 +170,15 @@ export default observer(() => {
         type: 'string',
         title: intl.formatMessage({
           id: 'pages.table.name',
-          defaultMessage: '名称'
+          defaultMessage: '名称',
         }),
         required: true,
         'x-decorator': 'FormItem',
         'x-component': 'Input',
         'x-validator': [
           {
-            max: 50,
-            message: '最多可输入50个字符',
+            max: 64,
+            message: '最多可输入64个字符',
           },
           {
             required: true,
@@ -190,7 +190,7 @@ export default observer(() => {
         type: 'string',
         title: intl.formatMessage({
           id: 'pages.device.instanceDetail.detail.sort',
-          defaultMessage: '排序'
+          defaultMessage: '排序',
         }),
         'x-decorator': 'FormItem',
         'x-component': 'NumberPicker',
@@ -258,10 +258,14 @@ export default observer(() => {
         })}
       />
       <Save<DepartmentItem>
-        title={State.current.parentId ? intl.formatMessage({
-          id: 'pages.system.department.option.add',
-          defaultMessage: '新增子部门'
-        }) : undefined}
+        title={
+          State.current.parentId
+            ? intl.formatMessage({
+                id: 'pages.system.department.option.add',
+                defaultMessage: '新增子部门',
+              })
+            : undefined
+        }
         service={service}
         onCancel={(type) => {
           if (type) {

src/pages/system/Menu/Detail/buttons.tsx

@@ -0,0 +1,325 @@
+import { Form, Input, Button, message, Modal, Popconfirm, Tooltip } from 'antd';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { useCallback, useEffect, useState } from 'react';
+import { service } from '@/pages/system/Menu';
+import ProTable from '@jetlinks/pro-table';
+import type { ProColumns } from '@jetlinks/pro-table';
+import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import type { MenuButtonInfo, MenuItem } from '@/pages/system/Menu/typing';
+import Permission from '@/pages/system/Menu/components/permission';
+import { useRequest } from '@@/plugin-request/request';
+
+type ButtonsProps = {
+  data: MenuItem;
+  onLoad: () => void;
+};
+
+export default (props: ButtonsProps) => {
+  const intl = useIntl();
+
+  const [disabled, setDisabled] = useState(false); // 是否为查看
+  const [buttonItems, setButtonItems] = useState<MenuButtonInfo[]>([]); // button Table数据源
+  const [visible, setVisible] = useState(false); // Modal显示影藏
+  const [id, setId] = useState(''); // 缓存ID
+  const [form] = Form.useForm();
+
+  const { data: permissions, run: queryPermissions } = useRequest(service.queryPermission, {
+    manual: true,
+    formatResult: (response) => response.result.data,
+  });
+
+  useEffect(() => {
+    if (visible) {
+      // 每次打开Modal获取最新权限
+      queryPermissions({ paging: false });
+    }
+    /* eslint-disable */
+  }, [visible]);
+
+  useEffect(() => {
+    if (props.data) {
+      setButtonItems(props.data.buttons || []);
+    }
+  }, [props.data]);
+
+  const resetForm = () => {
+    form.resetFields();
+    setId('');
+    setDisabled(false);
+  };
+  /**
+   * 更新菜单信息
+   * @param data
+   */
+  const updateMenuInfo = useCallback(
+    async (data: MenuButtonInfo[]) => {
+      const response = await service.update({
+        ...props.data,
+        buttons: data,
+      });
+      if (response.status === 200) {
+        message.success('操作成功!');
+        props.onLoad();
+        resetForm();
+        setVisible(false);
+      } else {
+        message.error('操作失败!');
+      }
+      /* eslint-disable */
+    },
+    [props.data],
+  );
+
+  /**
+   * 删除单个按钮
+   */
+  const deleteItem = useCallback(
+    (buttonId) => {
+      const filterButtons = buttonItems.filter((item) => item.id !== buttonId);
+      setButtonItems(filterButtons);
+      updateMenuInfo(filterButtons);
+      /* eslint-disable */
+    },
+    [buttonItems],
+  );
+
+  /**
+   * Model title处理，默认新增
+   * @default 'pages.data.option.add'
+   */
+  const handleTitle = useCallback((): string => {
+    let intlId = 'pages.data.option.add';
+    if (disabled && id) {
+      // 查看
+      intlId = 'pages.data.option.view';
+    } else if (!disabled && id) {
+      // 编辑
+      intlId = 'pages.data.option.edit';
+    }
+    return intl.formatMessage({
+      id: intlId,
+    });
+    /* eslint-disable */
+  }, [disabled, id]);
+
+  /**
+   * 获取表单数据
+   */
+  const saveData = useCallback(async () => {
+    const formData = await form.validateFields();
+    if (formData) {
+      if (buttonItems.some((item) => item.id === formData.id)) {
+        // 编辑
+        updateMenuInfo(buttonItems.map((item) => (item.id === formData.id ? formData : item)));
+      } else {
+        updateMenuInfo([formData, ...buttonItems]);
+      }
+    }
+    /* eslint-disable */
+  }, [buttonItems]);
+
+  const columns: ProColumns<MenuButtonInfo>[] = [
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.encoding',
+        defaultMessage: '编码',
+      }),
+      width: 220,
+      dataIndex: 'id',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.name',
+        defaultMessage: '名称',
+      }),
+      width: 300,
+      dataIndex: 'name',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.describe',
+        defaultMessage: '备注说明',
+      }),
+      dataIndex: 'describe',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      align: 'center',
+      width: 240,
+      render: (_, record) => [
+        <a
+          key="edit"
+          onClick={() => {
+            form.setFieldsValue(record);
+            setId(record.id);
+            setDisabled(false);
+            setVisible(true);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.edit',
+              defaultMessage: '编辑',
+            })}
+          >
+            <EditOutlined />
+          </Tooltip>
+        </a>,
+        <a
+          key="view"
+          onClick={() => {
+            form.setFieldsValue(record);
+            setId(record.id);
+            setDisabled(true);
+            setVisible(true);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.view',
+              defaultMessage: '查看',
+            })}
+          >
+            <SearchOutlined />
+          </Tooltip>
+        </a>,
+        <Popconfirm
+          key="unBindUser"
+          title={intl.formatMessage({
+            id: 'page.system.menu.table.delete',
+            defaultMessage: '是否删除该按钮',
+          })}
+          onConfirm={() => {
+            deleteItem(record.id);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.delete',
+              defaultMessage: '删除',
+            })}
+          >
+            <a key="delete">
+              <DeleteOutlined />
+            </a>
+          </Tooltip>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<MenuButtonInfo>
+        columns={columns}
+        dataSource={buttonItems}
+        search={false}
+        pagination={false}
+        toolBarRender={() => [
+          <Button
+            onClick={() => {
+              form.resetFields();
+              setVisible(true);
+            }}
+            key="button"
+            icon={<PlusOutlined />}
+            type="primary"
+          >
+            {intl.formatMessage({
+              id: 'pages.data.option.add',
+              defaultMessage: '新增',
+            })}
+          </Button>,
+        ]}
+      />
+      <Modal
+        width={660}
+        visible={visible}
+        title={handleTitle()}
+        onOk={() => {
+          saveData();
+        }}
+        onCancel={() => {
+          resetForm();
+          setVisible(false);
+        }}
+      >
+        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+          <Form.Item
+            name="id"
+            label={intl.formatMessage({
+              id: 'pages.system.org.encoding',
+              defaultMessage: '编码',
+            })}
+            required={true}
+            rules={[
+              { required: true, message: '请输入编码' },
+              { max: 64, message: '最多可输入64个字符' },
+              {
+                pattern: /^[a-zA-Z0-9`!@#$%^&*()_+\-={}|\\\]\[;':",.\/<>?]+$/,
+                message: '请输入英文+数字+特殊字符（`!@#$%^&*()_+-={}|\\][;\':",./<>?）',
+              },
+              {
+                validator: (_, value, callback) => {
+                  if (!(!disabled && id) && buttonItems.some((item) => item.id === value)) {
+                    // 判断是否为新增
+                    callback('重复编码');
+                  }
+                  callback();
+                },
+              },
+            ]}
+          >
+            <Input disabled={!!(!disabled && id)} />
+          </Form.Item>
+          <Form.Item
+            name="name"
+            label={intl.formatMessage({
+              id: 'pages.table.name',
+              defaultMessage: '名称',
+            })}
+            required={true}
+            rules={[
+              { required: true, message: '请输入名称' },
+              { max: 64, message: '最多可输入64个字符' },
+            ]}
+          >
+            <Input disabled={disabled} />
+          </Form.Item>
+          <Form.Item
+            label={intl.formatMessage({
+              id: 'page.system.menu.permissions',
+              defaultMessage: '权限',
+            })}
+            required={true}
+          >
+            <Input disabled={disabled} />
+            <Form.Item name="permissions" rules={[{ required: true, message: '请选择权限' }]}>
+              <Permission
+                title={intl.formatMessage({
+                  id: 'page.system.menu.permissions.operate',
+                  defaultMessage: '操作权限',
+                })}
+                disabled={disabled}
+                data={permissions}
+              />
+            </Form.Item>
+          </Form.Item>
+          <Form.Item
+            name="describe"
+            label={intl.formatMessage({
+              id: 'pages.table.describe',
+              defaultMessage: '描述',
+            })}
+          >
+            <Input.TextArea disabled={disabled} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+};

src/pages/system/Menu/Detail/edit.tsx

@@ -0,0 +1,143 @@
+import { Form, Input, InputNumber, Button, message } from 'antd';
+import Permission from '@/pages/system/Menu/components/permission';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { useEffect, useState } from 'react';
+import { service } from '@/pages/system/Menu';
+import { useRequest } from 'umi';
+import type { MenuItem } from '@/pages/system/Menu/typing';
+
+type EditProps = {
+  data: MenuItem;
+  onLoad: () => void;
+};
+
+export default (props: EditProps) => {
+  const intl = useIntl();
+  const [disabled, setDisabled] = useState(true);
+  const [form] = Form.useForm();
+
+  const { data: permissions, run: queryPermissions } = useRequest(service.queryPermission, {
+    manual: true,
+    formatResult: (response) => response.result.data,
+  });
+
+  const saveData = async () => {
+    const formData = await form.validateFields();
+    if (formData) {
+      const response: any = await service.update(formData);
+      if (response.status === 200) {
+        message.success('操作成功！');
+        setDisabled(true);
+        props.onLoad();
+      } else {
+        message.error('操作失败！');
+      }
+    }
+  };
+
+  useEffect(() => {
+    queryPermissions({ paging: false });
+    /* eslint-disable */
+  }, []);
+
+  useEffect(() => {
+    if (form) {
+      form.setFieldsValue(props.data);
+    }
+    /* eslint-disable */
+  }, [props.data]);
+
+  return (
+    <div>
+      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+        <Form.Item
+          name="code"
+          label={intl.formatMessage({
+            id: 'page.system.menu.encoding',
+            defaultMessage: '编码',
+          })}
+          required={true}
+          rules={[{ required: true, message: '该字段是必填字段' }]}
+        >
+          <Input disabled={true} />
+        </Form.Item>
+        <Form.Item
+          name="name"
+          label={intl.formatMessage({
+            id: 'pages.table.name',
+            defaultMessage: '名称',
+          })}
+          required={true}
+          rules={[{ required: true, message: '该字段是必填字段' }]}
+        >
+          <Input disabled={disabled} />
+        </Form.Item>
+        <Form.Item
+          name="url"
+          label={intl.formatMessage({
+            id: 'page.system.menu.url',
+            defaultMessage: '页面地址',
+          })}
+          required={true}
+          rules={[{ required: true, message: '该字段是必填字段' }]}
+        >
+          <Input disabled={disabled} />
+        </Form.Item>
+        <Form.Item
+          label={intl.formatMessage({
+            id: 'page.system.menu.permissions',
+            defaultMessage: '权限',
+          })}
+        >
+          <Input disabled={disabled} />
+          <Form.Item name="permissions">
+            <Permission
+              title={intl.formatMessage({
+                id: 'page.system.menu.permissions.operate',
+                defaultMessage: '操作权限',
+              })}
+              disabled={disabled}
+              data={permissions}
+            />
+          </Form.Item>
+        </Form.Item>
+        <Form.Item
+          name="sortIndex"
+          label={intl.formatMessage({
+            id: 'page.system.menu.sort',
+            defaultMessage: '排序说明',
+          })}
+        >
+          <InputNumber style={{ width: '100%' }} disabled={disabled} />
+        </Form.Item>
+        <Form.Item
+          name="describe"
+          label={intl.formatMessage({
+            id: 'pages.table.describe',
+            defaultMessage: '描述',
+          })}
+        >
+          <Input.TextArea disabled={disabled} />
+        </Form.Item>
+        <Form.Item name="id" hidden={true}>
+          <Input />
+        </Form.Item>
+      </Form>
+      <Button
+        type="primary"
+        onClick={() => {
+          if (disabled) {
+            setDisabled(false);
+          } else {
+            saveData();
+          }
+        }}
+      >
+        {intl.formatMessage({
+          id: `pages.data.option.${disabled ? 'edit' : 'save'}`,
+          defaultMessage: '编辑',
+        })}
+      </Button>
+    </div>
+  );
+};

src/pages/system/Menu/Detail/index.tsx

@@ -0,0 +1,77 @@
+// 菜单管理-详情
+import { PageContainer } from '@ant-design/pro-layout';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { useEffect, useState } from 'react';
+import BaseDetail from './edit';
+import Buttons from './buttons';
+import { useLocation } from 'umi';
+import { service } from '@/pages/system/Menu';
+import { useRequest } from 'umi';
+
+type LocationType = {
+  id?: string;
+};
+
+export default () => {
+  const intl = useIntl();
+  const [tabKey, setTabKey] = useState('detail');
+  const location = useLocation<LocationType>();
+
+  const { data, run: queryData } = useRequest(service.queryDetail, {
+    manual: true,
+    formatResult: (response) => {
+      return response.result;
+    },
+  });
+
+  /**
+   * 获取当前菜单详情
+   */
+  const queryDetail = () => {
+    const params = new URLSearchParams(location.search);
+    const id = params.get('id');
+    if (id) {
+      queryData(id);
+    }
+  };
+
+  useEffect(() => {
+    queryDetail();
+    /* eslint-disable */
+  }, []);
+
+  return (
+    <PageContainer
+      tabList={[
+        {
+          tab: intl.formatMessage({
+            id: 'pages.system.menu.detail',
+            defaultMessage: '基本详情',
+          }),
+          key: 'detail',
+        },
+        {
+          tab: intl.formatMessage({
+            id: 'pages.system.menu.buttons',
+            defaultMessage: '按钮管理',
+          }),
+          key: 'buttons',
+        },
+      ]}
+      onTabChange={(key) => {
+        setTabKey(key);
+      }}
+    >
+      {tabKey === 'detail' ? (
+        <div style={{ background: '#fff', padding: '16px 24px' }}>
+          <div style={{ width: 660 }}>
+            {' '}
+            <BaseDetail data={data} onLoad={queryDetail} />{' '}
+          </div>
+        </div>
+      ) : (
+        <Buttons data={data} onLoad={queryDetail} />
+      )}
+    </PageContainer>
+  );
+};

src/pages/system/Menu/components/permission.less

@@ -0,0 +1,42 @@
+@import '~antd/lib/style/themes/variable';
+@border: 1px solid @border-color-base;
+
+.permission-container {
+  margin-top: 20px;
+  border: @border;
+
+  .permission-header {
+    padding: @padding-sm;
+    background-color: @border-color-base;
+  }
+
+  .permission-content {
+    max-height: 400px;
+    overflow-y: auto;
+
+    .permission-items {
+      display: flex;
+      border-bottom: @border;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      > div {
+        padding: @padding-xs 0 @padding-xs @padding-sm;
+      }
+
+      .permission-parent {
+        display: flex;
+        align-items: center;
+        width: 180px;
+      }
+
+      .permission-children-checkbox {
+        flex-grow: 1;
+        width: 0;
+        border-left: @border;
+      }
+    }
+  }
+}

src/pages/system/Menu/components/permission.tsx

@@ -0,0 +1,268 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Checkbox } from 'antd';
+import './permission.less';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
+import type { PermissionInfo } from '../typing';
+
+type PermissionDataType = {
+  action: string;
+  id: string;
+  name: string;
+  checked?: boolean;
+  actions: PermissionDataType[];
+};
+
+type PermissionType = {
+  value?: {
+    permission: string;
+    actions: string[];
+  }[];
+  data: PermissionDataType[];
+  title?: React.ReactNode | string;
+  onChange?: (data: PermissionInfo[]) => void;
+  disabled?: boolean;
+};
+
+type ParentNodeChange = { checkedAll: boolean; list: string[]; id: string; state: boolean };
+
+type ParentNodeType = {
+  id: string;
+  name: string;
+  actions: PermissionDataType[];
+  onChange?: (value: ParentNodeChange) => void;
+  disabled?: boolean;
+  checked?: boolean;
+  state?: boolean;
+};
+
+type CheckItem = Omit<ParentNodeType, 'onChange'>;
+
+const ParentNode = (props: ParentNodeType) => {
+  const { actions, checked } = props;
+
+  const [checkedList, setCheckedList] = useState<string[]>([]);
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+
+  const submitData = (checkedAll: boolean, list: string[], state: boolean) => {
+    if (props.onChange) {
+      props.onChange({
+        checkedAll,
+        list,
+        id: props.id,
+        state,
+      });
+    }
+  };
+
+  const onChange = (list: any) => {
+    const _indeterminate = !!list.length && list.length < props.actions.length;
+    setCheckedList(list);
+    setIndeterminate(_indeterminate);
+    setCheckAll(list.length === props.actions.length);
+    submitData(list.length === props.actions.length, list, _indeterminate);
+  };
+
+  const onChangeAll = (e: CheckboxChangeEvent) => {
+    const _list = e.target.checked ? props.actions.map((item) => item.action) : [];
+    setCheckedList(e.target.checked ? _list : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+    submitData(e.target.checked, _list, false);
+  };
+
+  useEffect(() => {
+    onChangeAll({
+      target: {
+        checked: !!props.checked,
+      },
+    } as CheckboxChangeEvent);
+    /* eslint-disable */
+  }, [checked]);
+
+  useEffect(() => {
+    // 通过父级传入checked来控制节点状态
+    const _list = props.actions.filter((a) => a.checked).map((a) => a.action);
+    onChange(_list);
+    /* eslint-disable */
+  }, [actions]);
+
+  return (
+    <div className="permission-items">
+      <div className="permission-parent">
+        <Checkbox
+          id={props.id}
+          onChange={onChangeAll}
+          indeterminate={indeterminate}
+          checked={checkAll}
+          disabled={props.disabled}
+        >
+          {props.name}
+        </Checkbox>
+      </div>
+      <div className="permission-children-checkbox">
+        <Checkbox.Group
+          onChange={onChange}
+          value={checkedList}
+          disabled={props.disabled}
+          options={props.actions.map((item: any) => {
+            return {
+              label: item.name,
+              value: item.action,
+            };
+          })}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default (props: PermissionType) => {
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [checkAll, setCheckAll] = useState(false);
+  const [nodes, setNodes] = useState<React.ReactNode>([]);
+  const checkListRef = useRef<CheckItem[]>([]);
+
+  const onChange = (list: CheckItem[]) => {
+    if (props.onChange) {
+      const _list = list
+        .filter((a) => a.checked || a.actions.filter((b) => b.checked).length)
+        .map((item) => ({
+          permission: item.id,
+          actions: item.actions.filter((b) => b.checked).map((b) => b.action),
+        }));
+      props.onChange(_list);
+    }
+  };
+
+  /**
+   * 全选或者全部取消
+   * @param e
+   */
+  const onChangeAll = (e: CheckboxChangeEvent) => {
+    const _list = props.data.map((item) => {
+      return {
+        ...item,
+        actions: item.actions.map((a) => ({ ...a, checked: e.target.checked })),
+        state: false,
+        checked: e.target.checked,
+      };
+    });
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+    // setCheckedList(_list)
+    checkListRef.current = _list;
+    onChange(_list);
+    setNodes(createContentNode(_list));
+  };
+
+  const parentChange = (value: ParentNodeChange) => {
+    let indeterminateCount = 0;
+    let _checkAll = 0;
+    const list = checkListRef.current.map((item) => {
+      const _checked = item.id === value.id ? value.checkedAll : item.checked;
+      const _state = item.id === value.id ? value.state : item.state;
+      const actions =
+        item.id === value.id
+          ? item.actions.map((a) => ({ ...a, checked: value.list.includes(a.action) }))
+          : item.actions;
+      if (_checked) {
+        // 父checkbox为全选或者有子节点被选中
+        _checkAll += 1;
+        indeterminateCount += 1;
+      } else if (_state) {
+        // 父checkbox下
+        indeterminateCount += 1;
+      }
+
+      return {
+        ...item,
+        actions,
+        state: _state,
+        checked: _checked,
+      };
+    });
+    // 如果全部选中，则取消半选状态
+    const isIndeterminate =
+      _checkAll === list.length && _checkAll !== 0 ? false : !!indeterminateCount;
+    setIndeterminate(isIndeterminate);
+    setCheckAll(_checkAll === list.length && _checkAll !== 0);
+    // setCheckedList(list)
+    checkListRef.current = list;
+    onChange(list);
+  };
+
+  /**
+   * 创建节点
+   */
+  function createContentNode(data: CheckItem[]): React.ReactNode[] {
+    const NodeArr: React.ReactNode[] = [];
+    if (data && data.length) {
+      data.forEach((item) => {
+        if (item.actions) {
+          // 父节点
+          NodeArr.push(
+            <ParentNode
+              {...item}
+              key={item.id}
+              disabled={props.disabled}
+              onChange={parentChange}
+            />,
+          );
+        }
+      });
+    }
+    return NodeArr;
+  }
+
+  /**
+   * 初始化树形节点数据格式
+   * @param data
+   */
+  const initialState = (data: PermissionDataType[]) => {
+    const _list = data.map((item) => {
+      const propsPermission =
+        props.value && props.value.length
+          ? props.value.find((p) => p.permission === item.id)
+          : undefined;
+      const propsActions = propsPermission ? propsPermission.actions : [];
+      return {
+        ...item,
+        actions: item.actions.map((a) => ({ ...a, checked: propsActions.includes(a.action) })),
+        state: false, // 是否为半选中状态
+        checked: false, // 是否为全选
+      };
+    });
+    // setCheckedList(_list)
+    checkListRef.current = _list;
+    setNodes(createContentNode(_list));
+  };
+
+  useEffect(() => {
+    if (props.data && props.data.length) {
+      initialState(props.data);
+    }
+    /* eslint-disable */
+  }, [props.data, props.disabled]);
+
+  return (
+    <div className="permission-container">
+      <div className="permission-header">{props.title}</div>
+      <div className="permission-content">
+        <div className="permission-items">
+          <div className="permission-parent">
+            <Checkbox
+              onChange={onChangeAll}
+              indeterminate={indeterminate}
+              checked={checkAll}
+              disabled={props.disabled}
+            >
+              菜单权限
+            </Checkbox>
+          </div>
+        </div>
+        {nodes}
+      </div>
+    </div>
+  );
+};

src/pages/system/Menu/index.tsx

@@ -0,0 +1,309 @@
+// 菜单管理
+import { PageContainer } from '@ant-design/pro-layout';
+import ProTable from '@jetlinks/pro-table';
+import type { ActionType, ProColumns } from '@jetlinks/pro-table';
+import { useRef, useState } from 'react';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { Button, message, Popconfirm, Tooltip, Card, Divider, Modal, Form, Input } from 'antd';
+import {
+  SearchOutlined,
+  PlusOutlined,
+  PlusCircleOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons';
+import { observer } from '@formily/react';
+import { model } from '@formily/reactive';
+import { useHistory } from 'umi';
+import SearchComponent from '@/components/SearchComponent';
+import Service from './service';
+import type { MenuItem } from './typing';
+import moment from 'moment';
+
+export const service = new Service('menu');
+
+type ModelType = {
+  visible: boolean;
+  current: Partial<MenuItem>;
+  parentId: string | undefined;
+};
+
+export const State = model<ModelType>({
+  visible: false,
+  current: {},
+  parentId: undefined,
+});
+
+export default observer(() => {
+  const actionRef = useRef<ActionType>();
+  const intl = useIntl();
+
+  const [param, setParam] = useState({});
+  const [form] = Form.useForm();
+  const history = useHistory();
+
+  const deleteItem = async (id: string) => {
+    const response: any = await service.remove(id);
+    if (response.status === 200) {
+      message.success(
+        intl.formatMessage({
+          id: 'pages.data.option.success',
+          defaultMessage: '操作成功!',
+        }),
+      );
+    }
+    actionRef.current?.reload();
+  };
+
+  const pageJump = (id: string) => {
+    // 跳转详情
+    history.push(`/system/menu/detail?id=${id}`);
+  };
+
+  const columns: ProColumns<MenuItem>[] = [
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.encoding',
+        defaultMessage: '编码',
+      }),
+      width: 220,
+      dataIndex: 'code',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.name',
+        defaultMessage: '名称',
+      }),
+      width: 300,
+      dataIndex: 'name',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.url',
+        defaultMessage: '页面地址',
+      }),
+      dataIndex: 'url',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.sort',
+        defaultMessage: '排序',
+      }),
+      width: 80,
+      dataIndex: 'sortIndex',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'page.system.menu.describe',
+        defaultMessage: '备注说明',
+      }),
+      width: 200,
+      dataIndex: 'describe',
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.table.createTime',
+        defaultMessage: '创建时间',
+      }),
+      width: 180,
+      dataIndex: 'createTime',
+      render: (_, record) => {
+        return record.createTime ? moment(record.createTime).format('YYYY-MM-DD HH:mm:ss') : '-';
+      },
+    },
+    {
+      title: intl.formatMessage({
+        id: 'pages.data.option',
+        defaultMessage: '操作',
+      }),
+      valueType: 'option',
+      align: 'center',
+      width: 240,
+      render: (_, record) => [
+        <a
+          key="view"
+          onClick={() => {
+            pageJump(record.id);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.view',
+              defaultMessage: '查看',
+            })}
+          >
+            <SearchOutlined />
+          </Tooltip>
+        </a>,
+        <a
+          key="editable"
+          onClick={() => {
+            State.current = {
+              parentId: record.id,
+            };
+            State.visible = true;
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'page.system.menu.table.addChildren',
+              defaultMessage: '新增子菜单',
+            })}
+          >
+            <PlusCircleOutlined />
+          </Tooltip>
+        </a>,
+        <Popconfirm
+          key="unBindUser"
+          title={intl.formatMessage({
+            id: 'page.system.menu.table.delete',
+            defaultMessage: '是否删除该菜单',
+          })}
+          onConfirm={() => {
+            deleteItem(record.id);
+          }}
+        >
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'pages.data.option.delete',
+              defaultMessage: '删除',
+            })}
+          >
+            <a key="delete">
+              <DeleteOutlined />
+            </a>
+          </Tooltip>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  /**
+   * table 查询参数
+   * @param data
+   */
+  const searchFn = (data: any) => {
+    setParam({
+      terms: data,
+    });
+  };
+
+  const modalCancel = () => {
+    State.current = {};
+    State.visible = false;
+    form.resetFields();
+  };
+
+  const saveData = async () => {
+    const formData = await form.validateFields();
+    if (formData) {
+      const _data = {
+        ...formData,
+        parentId: State.current.parentId,
+      };
+      const response: any = await service.save(_data);
+      if (response.status === 200) {
+        message.success('操作成功！');
+        modalCancel();
+        pageJump(response.result.id);
+      } else {
+        message.error('操作成功！');
+      }
+    }
+  };
+
+  return (
+    <PageContainer>
+      <Card>
+        <SearchComponent field={columns} onSearch={searchFn} />
+      </Card>
+      <Divider />
+      <ProTable<MenuItem>
+        columns={columns}
+        actionRef={actionRef}
+        rowKey="id"
+        pagination={false}
+        search={false}
+        params={param}
+        request={async (params) => {
+          const response = await service.queryMenuThree({ ...params, paging: false });
+          return {
+            code: response.message,
+            result: {
+              data: response.result,
+              pageIndex: 0,
+              pageSize: 0,
+              total: 0,
+            },
+            status: response.status,
+          };
+        }}
+        toolBarRender={() => [
+          <Button
+            onClick={() => {
+              State.visible = true;
+            }}
+            key="button"
+            icon={<PlusOutlined />}
+            type="primary"
+          >
+            {intl.formatMessage({
+              id: 'pages.data.option.add',
+              defaultMessage: '新增',
+            })}
+          </Button>,
+        ]}
+        headerTitle={intl.formatMessage({
+          id: 'pages.system.menu',
+          defaultMessage: '菜单列表',
+        })}
+      />
+      <Modal
+        title={intl.formatMessage({
+          id: State.current.parentId
+            ? 'pages.system.menu.option.addChildren'
+            : 'pages.data.option.add',
+          defaultMessage: '新增',
+        })}
+        visible={State.visible}
+        width={660}
+        onOk={saveData}
+        onCancel={modalCancel}
+      >
+        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+          <Form.Item
+            name="code"
+            label={intl.formatMessage({
+              id: 'page.system.menu.encoding',
+              defaultMessage: '编码',
+            })}
+            required={true}
+            rules={[
+              { required: true, message: '请输入编码' },
+              { max: 64, message: '最多可输入64个字符' },
+              {
+                pattern: /^[a-zA-Z0-9`!@#$%^&*()_+\-={}|\\\]\[;':",.\/<>?]+$/,
+                message: '请输入英文+数字+特殊字符（`!@#$%^&*()_+-={}|\\][;\':",./<>?）',
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="name"
+            label={intl.formatMessage({
+              id: 'pages.table.name',
+              defaultMessage: '名称',
+            })}
+            required={true}
+            rules={[
+              { required: true, message: '请输入名称' },
+              { max: 64, message: '最多可输入64个字符' },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </PageContainer>
+  );
+});

src/pages/system/Menu/save.tsx

@@ -0,0 +1,117 @@
+// Modal 弹窗，用于新增、修改数据
+import React from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import {
+  ArrayTable,
+  Editable,
+  Form,
+  FormGrid,
+  FormItem,
+  FormTab,
+  Input,
+  NumberPicker,
+  Password,
+  Select,
+  Switch,
+  Upload,
+  Checkbox,
+} from '@formily/antd';
+import { message, Modal } from 'antd';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import type { ISchema } from '@formily/json-schema';
+import type { ModalProps } from 'antd/lib/modal/Modal';
+import FUpload from '@/components/Upload';
+import * as ICONS from '@ant-design/icons';
+import type BaseService from '@/utils/BaseService';
+
+export interface SaveModalProps<T> extends Omit<ModalProps, 'onOk' | 'onCancel'> {
+  service: BaseService<T>;
+  data?: Partial<T>;
+  /**
+   * Model关闭事件
+   * @param type 是否为请求接口后关闭，用于外部table刷新数据
+   */
+  onCancel?: (type: boolean) => void;
+  schema: ISchema;
+}
+
+const Save = <T extends object>(props: SaveModalProps<T>) => {
+  const { data, schema, onCancel, service } = props;
+  const intl = useIntl();
+
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      FormTab,
+      Input,
+      Password,
+      Upload,
+      Select,
+      ArrayTable,
+      Switch,
+      FormGrid,
+      Editable,
+      NumberPicker,
+      FUpload,
+      Checkbox,
+    },
+    scope: {
+      icon(name: any) {
+        return React.createElement(ICONS[name]);
+      },
+    },
+  });
+
+  const form = createForm({
+    validateFirst: true,
+    initialValues: data || {},
+  });
+
+  /**
+   * 关闭Modal
+   * @param type 是否需要刷新外部table数据
+   */
+  const modalClose = (type: boolean) => {
+    if (typeof onCancel === 'function') {
+      onCancel(type);
+    }
+  };
+
+  /**
+   * 新增、修改数据
+   */
+  const saveData = async () => {
+    const formData: T = await form.submit();
+
+    const response =
+      data && 'id' in data ? await service.update(formData) : await service.save(formData);
+
+    if (response.status === 200) {
+      message.success('操作成功！');
+      modalClose(true);
+    } else {
+      message.error('操作成功！');
+    }
+  };
+
+  return (
+    <Modal
+      title={intl.formatMessage({
+        id: `pages.data.option.${data && 'id' in data ? 'edit' : 'add'}`,
+        defaultMessage: '新增',
+      })}
+      visible={props.visible}
+      onOk={saveData}
+      onCancel={() => {
+        modalClose(false);
+      }}
+    >
+      <Form form={form} labelCol={5} wrapperCol={16}>
+        <SchemaField schema={schema} />
+      </Form>
+    </Modal>
+  );
+};
+
+export default Save;

src/pages/system/Menu/service.ts

@@ -0,0 +1,23 @@
+import BaseService from '@/utils/BaseService';
+import { request } from '@@/plugin-request/request';
+import type { MenuItem } from './typing';
+import SystemConst from '@/utils/const';
+
+class Service extends BaseService<MenuItem> {
+  /**
+   * 获取当前用户可访问菜单
+   * @param data
+   */
+  queryMenuThree = (data: any) => request(`${this.uri}/_all/tree`, { method: 'POST', data });
+
+  /**
+   * 查询权限管理
+   * @param data
+   */
+  queryPermission = (data: any) =>
+    request(`${SystemConst.API_BASE}/permission/_query`, { method: 'POST', data });
+
+  queryDetail = (id: string) => request(`${this.uri}/${id}`, { method: 'GET' });
+}
+
+export default Service;

src/pages/system/Menu/typing.d.ts

@@ -0,0 +1,80 @@
+export type MenuItem = {
+  id: string;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 编码
+   */
+  code: string;
+  /**
+   * 所属应用
+   */
+  application: string;
+  /**
+   * 描述
+   */
+  describe: string;
+  /**
+   * url，路由
+   */
+  url: string;
+  /**
+   * 图标
+   */
+  icon: string;
+  /**
+   * 状态, 0为禁用，1为启用
+   */
+  status: number;
+  /**
+   * 绑定权限信息
+   */
+  permissions: PermissionInfo[];
+  /**
+   * 按钮定义信息
+   */
+  buttons: MenuButtonInfo[];
+  /**
+   * 其他配置信息
+   */
+  options: Record<string, any>;
+  /**
+   * 父级ID
+   */
+  parentId: string;
+  /**
+   * 树结构路径
+   */
+  path: string;
+  /**
+   * 排序序号
+   */
+  sortIndex: number;
+  /**
+   * 树层级
+   */
+  level: number;
+  createTime: number;
+  children: MenuItem;
+};
+
+/**
+ * 权限信息
+ */
+export type PermissionInfo = {
+  permission: string;
+  actions: string[];
+};
+
+/**
+ * 按钮信息
+ */
+export type MenuButtonInfo = {
+  id: string;
+  name: string;
+  permissions: PermissionInfo;
+  createTime: number;
+  options: Record<string, any>;
+};