fix side meun display issue

Author: agile.zhou

src/AgileConfig.Server.UI/react-ui-antd/src/layouts/BasicLayout.tsx

@@ -9,11 +9,11 @@ import {
   Settings,
 } from '@ant-design/pro-layout';
 import ProLayout from '@ant-design/pro-layout';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useCallback } from 'react';
 import { Dispatch, getIntl, getLocale } from 'umi';
 import { Link, useIntl, connect, history } from 'umi';
 import { Result, Button } from 'antd';
-import { getCategories, hasFunction } from '@/utils/authority';
+import { getCategories } from '@/utils/authority';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import type { ConnectState } from '@/models/connect';
@@ -38,6 +38,7 @@ export type BasicLayoutProps = {
   route: ProLayoutProps['route'] & {
     authority: string[];
   };
+  categories?: string[];
   settings: Settings;
   dispatch: Dispatch;
 } & ProLayoutProps;
@@ -46,26 +47,6 @@ export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
 };
 /** Use Authorized check all menu item */
 
-// Filter menu by categories stored from login (e.g., Application, Configuration, Node, Client, User, Role, Service, System)
-const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
-  const cats = getCategories();
-  return menuList
-    .filter(m => {
-      // category filter
-      const category = (m as any).category;
-      if (category && !cats.includes(category)) return false;
-
-      return true;
-    })
-    .map((item) => {
-      const localItem = {
-        ...item,
-        children: item.children ? menuDataRender(item.children) : undefined,
-      };
-      return Authorized.check(item.authority, localItem, null) as MenuDataItem;
-    });
-};
-
 const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const {
     dispatch,
@@ -76,6 +57,38 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     },
   } = props;
 
+  // keep categories in props to force re-render when user changes; fall back to persisted storage to avoid empty menu during bootstrap
+  const categories = useMemo<string[]>(() => {
+    if (props.categories && props.categories.length) {
+      return props.categories;
+    }
+    return getCategories();
+  }, [props.categories]);
+
+  // Filter menu by categories stored from login (e.g., Application, Configuration, Node, Client, User, Role, Service, System)
+  const menuDataRender = useCallback(
+    (menuList: MenuDataItem[]): MenuDataItem[] => {
+      const cats = categories || [];
+      console.log('menuDataRender categories=', cats);
+      return menuList
+        .filter((m) => {
+          // category filter
+          const category = (m as any).category;
+          if (category && !cats.includes(category)) return false;
+
+          return true;
+        })
+        .map((item) => {
+          const localItem = {
+            ...item,
+            children: item.children ? menuDataRender(item.children) : undefined,
+          };
+          return Authorized.check(item.authority, localItem, null) as MenuDataItem;
+        });
+    },
+    [categories],
+  );
+
   const menuDataRef = useRef<MenuDataItem[]>([]);
 
   useEffect(() => {
@@ -166,7 +179,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   );
 };
 
-export default connect(({ global, settings }: ConnectState) => ({
+export default connect(({ global, settings, user }: ConnectState) => ({
   collapsed: global.collapsed,
   settings,
+  categories: user.currentUser?.currentCategories,
 }))(BasicLayout);

src/AgileConfig.Server.UI/react-ui-antd/src/models/user.ts

@@ -17,6 +17,7 @@ export type CurrentUser = {
   }[];
   userid?: string;
   unreadCount?: number;
+  currentCategories?: string[];
 };
 
 export type UserModelState = {

src/AgileConfig.Server.UI/react-ui-antd/src/utils/authority.ts

@@ -60,6 +60,7 @@ export function setFunctions(authority: string | string[] ): void {
 
 // categories (business domains) control which left-menu entries are visible
 export function getCategories(str?: string): string[] {
+  console.log('getCategories called');
   const catString =
     typeof str === 'undefined' && localStorage ? localStorage.getItem('antd-pro-categories') : str;
   let cats;
@@ -77,6 +78,7 @@ export function getCategories(str?: string): string[] {
 }
 
 export function setCategories(categories: string | string[]): void {
+  console.log('setCategories called with', categories);
   const arr = typeof categories === 'string' ? [categories] : categories;
   const safeArr = arr || [];
   localStorage.setItem('antd-pro-categories', JSON.stringify(safeArr));