feat: 完善菜单管理

src/pages/system/menu/config.tsx

@@ -1,10 +1,13 @@
 // src/pages/system/menu/config.tsx
-import type {
+import {
-  ProColumns,
+  type ProColumns,
-  ProFormColumnsType,
+  type ProFormColumnsType,
+  ProFormRadio,
+  ProFormText,
 } from '@ant-design/pro-components';
 import { Switch } from 'antd';
-import type { MenuVO } from '@/services/system/menu';
+import { getSimpleMenusList, type MenuVO } from '@/services/system/menu';
+import { handleTree } from '@/utils/tree';
 
 export const baseMenuColumns: ProColumns<MenuVO>[] = [
   {
@@ -16,6 +19,7 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
     title: '图标',
     dataIndex: 'icon',
     width: 60,
+    hideInSearch: true,
     render: (_, record: MenuVO) => (
       <span>
         {record.icon ? <i className={`anticon ${record.icon}`} /> : '—'}
@@ -26,21 +30,25 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
     title: '排序',
     dataIndex: 'sort',
     width: 80,
+    hideInSearch: true,
   },
   {
     title: '权限标识',
     dataIndex: 'permission',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '组件路径',
     dataIndex: 'component',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '组件名称',
     dataIndex: 'componentName',
     width: 150,
+    hideInSearch: true,
   },
   {
     title: '状态',
@@ -56,6 +64,22 @@ export const baseMenuColumns: ProColumns<MenuVO>[] = [
 ];
 
 export const formColumns = (_type: string): ProFormColumnsType[] => [
+  {
+    title: '上级菜单',
+    dataIndex: 'parentId',
+    valueType: 'treeSelect',
+    request: async () => {
+      const res = await getSimpleMenusList();
+      console.log(res);
+      const menu: Tree = { id: 0, name: '主类目', children: [] };
+      menu.children = handleTree(res);
+      return [menu];
+    },
+    fieldProps: {
+      fieldNames: { label: 'name', value: 'id', children: 'children' },
+      placeholder: '请选择上级菜单',
+    },
+  },
   {
     title: '菜单名称',
     dataIndex: 'name',
@@ -69,39 +93,105 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
     },
   },
   {
-    title: '图标',
+    title: '菜单类型',
-    dataIndex: 'icon',
+    dataIndex: 'type',
-    valueType: 'select',
+    valueType: 'radioButton',
     fieldProps: {
-      placeholder: '请选择图标',
+      placeholder: '请选择菜单类型',
       options: [
-        { label: '商品', value: 'icon-product' },
+        { label: '目录', value: 1 },
-        { label: '系统', value: 'icon-system' },
+        { label: '菜单', value: 2 },
-        { label: '用户', value: 'icon-user' },
+        { label: '按钮', value: 3 },
-        { label: '设置', value: 'icon-setting' },
+      ],
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入菜单类型',
+        },
       ],
     },
   },
   {
-    title: '排序',
+    title: '菜单图标',
-    dataIndex: 'sort',
+    dataIndex: 'icon',
-    valueType: 'digit',
     fieldProps: {
-      placeholder: '请输入排序值',
+      placeholder: '请选择图标',
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
-    title: '权限标识',
+    title: '路由地址',
-    dataIndex: 'permission',
+    dataIndex: 'path',
+    tooltip:
+      '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
     fieldProps: {
-      placeholder: '请输入权限标识',
+      placeholder: '请输入路由地址',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入菜单路径',
+        },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
-    title: '组件路径',
+    title: '组件地址',
     dataIndex: 'component',
     fieldProps: {
-      placeholder: '请输入组件路径',
+      placeholder: '请输入组件地址',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入组件地址',
+        },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type !== 2) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
     },
   },
   {
@@ -110,11 +200,68 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
     fieldProps: {
       placeholder: '请输入组件名称',
     },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type !== 2) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
   },
   {
-    title: '状态',
+    title: '权限标识',
+    dataIndex: 'permission',
+    tooltip:
+      "Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)",
+    fieldProps: {
+      placeholder: '请输入权限标识',
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 1) return null;
+      return (
+        <ProFormText
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '显示排序',
+    dataIndex: 'sort',
+    valueType: 'digit',
+    fieldProps: {
+      style: {
+        width: '100%',
+      },
+      placeholder: '请输入排序值',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          message: '请输入排序值',
+        },
+      ],
+    },
+  },
+
+  {
+    title: '菜单状态',
     dataIndex: 'status',
-    valueType: 'select',
+    valueType: 'radio',
     fieldProps: {
       options: [
         { label: '启用', value: 1 },
@@ -122,4 +269,82 @@ export const formColumns = (_type: string): ProFormColumnsType[] => [
       ],
     },
   },
+  {
+    title: '显示状态',
+    dataIndex: 'visible',
+    valueType: 'radio',
+    tooltip: '选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问',
+    fieldProps: {
+      options: [
+        { label: '显示', value: true },
+        { label: '隐藏', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '总是显示',
+    dataIndex: 'alwaysShow',
+    valueType: 'radio',
+    tooltip: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+    fieldProps: {
+      options: [
+        { label: '总是', value: true },
+        { label: '不是', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
+  {
+    dataIndex: 'keepAlive',
+    title: '缓存状态',
+    valueType: 'radio',
+    tooltip: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+    fieldProps: {
+      options: [
+        { label: '总是', value: true },
+        { label: '不是', value: false },
+      ],
+    },
+    dependencies: ['type'],
+    renderFormItem: (_schema, _config, form) => {
+      const type = form.getFieldValue('type');
+      if (type === 3) return null;
+      return (
+        <ProFormRadio.Group
+          formItemProps={{
+            style: {
+              marginBottom: 0,
+            },
+          }}
+        />
+      );
+    },
+  },
 ];

src/pages/system/menu/index.tsx

@@ -1,8 +1,9 @@
 // src/pages/system/menu/index.tsx
 
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
-import { Popconfirm } from 'antd';
+import { useModel } from '@umijs/max';
+import { Modal, Popconfirm } from 'antd';
 import React, { useCallback, useRef, useState } from 'react';
 import ConfigurableDrawerForm, {
   type ConfigurableDrawerFormRef,
@@ -10,6 +11,8 @@ import ConfigurableDrawerForm, {
 import EnhancedProTable from '@/components/EnhancedProTable';
 import type { ToolbarAction } from '@/components/EnhancedProTable/types';
 import { formStatusType } from '@/constants';
+import { useMessage } from '@/hooks/antd/useMessage';
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache';
 import {
   createMenu,
   deleteMenu,
@@ -24,10 +27,11 @@ import { baseMenuColumns, formColumns } from './config';
 const SystemMenu = () => {
   const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
   const tableRef = useRef<ActionType>(null);
-
+  const { wsCache } = useCache();
+  const message = useMessage(); // 消息弹窗
   const [type, setType] = useState<'create' | 'update'>('create');
   const [id, setId] = useState<number>(0);
-
+  const { initialState, setInitialState } = useModel('@@initialState');
   const handleEdit = (record: MenuVO) => {
     setType('update');
     setId(record.id);
@@ -47,7 +51,19 @@ const SystemMenu = () => {
   };
   const handleAdd = () => {
     setType('create');
-    configurableDrawerRef.current?.open({});
+    configurableDrawerRef.current?.open({ type: 1 });
+  };
+
+  const handleReload = async () => {
+    try {
+      await message.confirm('即将更新缓存刷新浏览器！', '刷新菜单缓存');
+      // 清空，从而触发刷新
+      // wsCache.delete(CACHE_KEY.USER);
+      // wsCache.delete(CACHE_KEY.ROLE_ROUTERS);
+      await initialState?.fetchUserInfo?.();
+      // 刷新浏览器
+      location.reload();
+    } catch {}
   };
 
   const handleSubmit = useCallback(
@@ -74,6 +90,13 @@ const SystemMenu = () => {
       icon: <PlusOutlined />,
       onClick: handleAdd,
     },
+    {
+      key: 'reload',
+      label: '刷新菜单缓存',
+      type: 'primary',
+      icon: <ReloadOutlined />,
+      onClick: handleReload,
+    },
   ];
 
   const actionColumns: ProColumns<MenuVO> = {
@@ -108,7 +131,7 @@ const SystemMenu = () => {
         columns={columns}
         request={onFetch}
         toolbarActions={toolbarActions}
-        headerTitle="租户列表"
+        headerTitle="菜单管理"
         showIndex={false}
         showSelection={false}
       />
@@ -118,6 +141,7 @@ const SystemMenu = () => {
         title={formStatusType[type]}
         columns={formColumns(type)}
         onSubmit={handleSubmit}
+        width={900}
       />
     </>
   );