fix: redefine global styles for header menu background color (#6551)

* fix: redefine global styles for header menu background color

* chore: update comment

* fix: update header menu styles and correct context provider syntax

* refactor: correct context provider naming for header context

* refactor: replace global style with createStyles for header menu

* refactor: rename useHeaderPopupStyle to useHeaderStyle for clarity

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -52,6 +52,7 @@ import { KeepAlive } from './KeepAlive';
 import { NocoBaseDesktopRoute, NocoBaseDesktopRouteType } from './convertRoutesToSchema';
 import { MenuSchemaToolbar, ResetThemeTokenAndKeepAlgorithm } from './menuItemSettings';
 import { userCenterSettings } from './userCenterSettings';
+import { createGlobalStyle, createStyles } from 'antd-style';
 
 export { KeepAlive, NocoBaseDesktopRouteType };
 
@@ -268,7 +269,7 @@ const GroupItem: FC<{ item: any }> = (props) => {
 };
 
 const WithTooltip: FC<{ title: string; hidden: boolean }> = (props) => {
-  const { inHeader } = useContext(headerContext);
+  const { inHeader } = useContext(HeaderContext);
 
   return (
     <RouteContext.Consumer>
@@ -406,7 +407,7 @@ const contentStyle = {
   paddingInline: 0,
 };
 
-const headerContext = React.createContext<{ inHeader: boolean }>({ inHeader: false });
+const HeaderContext = React.createContext<{ inHeader: boolean }>({ inHeader: false });
 
 const popoverStyle = css`
   .ant-popover-inner {
@@ -495,9 +496,38 @@ const collapsedButtonRender = (collapsed, dom) => {
   return <CollapsedButton collapsed={collapsed}>{dom}</CollapsedButton>;
 };
 
+/**
+ * 这个问题源自 antd 的一个 bug，等 antd 修复了这个问题后，可以删除这个样式。
+ * - issue: https://github.com/ant-design/pro-components/issues/8593
+ * - issue: https://github.com/ant-design/pro-components/issues/8522
+ * - issue: https://github.com/ant-design/pro-components/issues/8432
+ */
+const useHeaderStyle = createStyles(({ token }: any) => {
+  return {
+    headerPopup: {
+      '&.ant-menu-submenu-popup>.ant-menu': {
+        backgroundColor: `${token.colorBgHeader}`,
+      },
+    },
+    headerMenuActive: {
+      '& .ant-menu-submenu-selected>.ant-menu-submenu-title': {
+        color: token.colorTextHeaderMenuActive,
+      },
+    },
+  };
+});
 const headerContextValue = { inHeader: true };
+const HeaderWrapper: FC = (props) => {
+  const { styles } = useHeaderStyle();
+
+  return (
+    <span className={styles.headerMenuActive}>
+      <HeaderContext.Provider value={headerContextValue}>{props.children}</HeaderContext.Provider>
+    </span>
+  );
+};
 const headerRender = (props: HeaderViewProps, defaultDom: React.ReactNode) => {
-  return <headerContext.Provider value={headerContextValue}>{defaultDom}</headerContext.Provider>;
+  return <HeaderWrapper>{defaultDom}</HeaderWrapper>;
 };
 
 const IsMobileLayoutContext = React.createContext<{
@@ -531,6 +561,7 @@ export const InternalAdminLayout = () => {
   const doNotChangeCollapsedRef = useRef(false);
   const { t } = useMenuTranslation();
   const designable = isMobileLayout ? false : _designable;
+  const { styles } = useHeaderStyle();
 
   const route = useMemo(() => {
     return {
@@ -544,7 +575,7 @@ export const InternalAdminLayout = () => {
         colorBgHeader: token.colorBgHeader,
         colorTextMenu: token.colorTextHeaderMenu,
         colorTextMenuSelected: token.colorTextHeaderMenuActive,
-        colorTextMenuActive: token.colorTextHeaderMenuActive,
+        colorTextMenuActive: token.colorTextHeaderMenuHover,
         colorBgMenuItemHover: token.colorBgHeaderMenuHover,
         colorBgMenuItemSelected: token.colorBgHeaderMenuActive,
         heightLayoutHeader: 46,
@@ -591,6 +622,12 @@ export const InternalAdminLayout = () => {
     });
   }, []);
 
+  const menuProps = useMemo(() => {
+    return {
+      overflowedIndicatorPopupClassName: styles.headerPopup,
+    };
+  }, [styles.headerPopup]);
+
   return (
     <DndContext onDragEnd={onDragEnd}>
       <ProLayout
@@ -612,6 +649,7 @@ export const InternalAdminLayout = () => {
         onCollapse={onCollapse}
         collapsed={collapsed}
         onPageChange={onPageChange}
+        menuProps={menuProps}
       >
         <RouteContext.Consumer>
           {(value: RouteContextType) => {