fix(header): avoid affecting the colours of other menus (#3357)

* fix: avoid affecting the colours of other menus

* Revert "Revert "fix(theme): fix color of header menu (#3354)""

This reverts commit 3a06893463.

packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx

@@ -31,7 +31,7 @@ export const PinnedPluginList = () => {
           width: 46px;
           border-radius: 0;
           background: none;
-          color: rgba(255, 255, 255, 0.65) !important;
+          color: rgba(255, 255, 255, 0.65);
           &:hover {
             background: rgba(255, 255, 255, 0.1);
           }

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import { useSessionStorageState } from 'ahooks';
-import { App, Layout } from 'antd';
+import { App, ConfigProvider, Layout } from 'antd';
+import { createGlobalStyle } from 'antd-style';
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom';
 import {
@@ -193,6 +194,72 @@ const MenuEditor = (props) => {
   );
 };
 
+/**
+ * 鼠标悬浮在顶部“更多”按钮时显示的子菜单的样式
+ */
+const GlobalStyleForAdminLayout = createGlobalStyle`
+  .nb-container-of-header-submenu {
+    .ant-menu.ant-menu-submenu.ant-menu-submenu-popup {
+      .ant-menu.ant-menu-sub.ant-menu-vertical {
+        background-color: ${(p) => {
+          // @ts-ignore
+          return p.theme.colorBgHeader + ' !important';
+        }};
+        color: ${(p) => {
+          // @ts-ignore
+          return p.theme.colorTextHeaderMenu + ' !important';
+        }};
+        .ant-menu-item:hover {
+          color: ${(p) => {
+            // @ts-ignore
+            return p.theme.colorTextHeaderMenuHover + ' !important';
+          }};
+          background-color: ${(p) => {
+            // @ts-ignore
+            return p.theme.colorBgHeaderMenuHover + ' !important';
+          }};
+        }
+        .ant-menu-item.ant-menu-item-selected {
+          color: ${(p) => {
+            // @ts-ignore
+            return p.theme.colorTextHeaderMenuActive + ' !important';
+          }};
+          background-color: ${(p) => {
+            // @ts-ignore
+            return p.theme.colorBgHeaderMenuActive + ' !important';
+          }};
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * 确保顶部菜单的子菜单的主题样式正确
+ * @param param0
+ * @returns
+ */
+const SetThemeOfHeaderSubmenu = ({ children }) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    containerRef.current = document.createElement('div');
+    containerRef.current.classList.add('nb-container-of-header-submenu');
+    document.body.appendChild(containerRef.current);
+
+    return () => {
+      document.body.removeChild(containerRef.current);
+    };
+  }, []);
+
+  return (
+    <>
+      <GlobalStyleForAdminLayout />
+      <ConfigProvider getPopupContainer={() => containerRef.current}>{children}</ConfigProvider>
+    </>
+  );
+};
+
 export const InternalAdminLayout = (props: any) => {
   const sideMenuRef = useRef<HTMLDivElement>();
   const result = useSystemSettings();
@@ -203,17 +270,18 @@ export const InternalAdminLayout = (props: any) => {
 
   return (
     <Layout>
+      <GlobalStyleForAdminLayout />
       <Layout.Header
         className={css`
           .ant-menu.ant-menu-dark .ant-menu-item-selected,
           .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
           .ant-menu-submenu-horizontal.ant-menu-submenu-selected {
-            background-color: ${token.colorBgHeaderMenuActive};
+            background-color: ${token.colorBgHeaderMenuActive} !important;
-            color: ${token.colorTextHeaderMenuActive};
+            color: ${token.colorTextHeaderMenuActive} !important;
           }
           .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
-            background-color: ${token.colorBgHeaderMenuHover};
+            background-color: ${token.colorBgHeaderMenuHover} !important;
-            color: ${token.colorTextHeaderMenuHover};
+            color: ${token.colorTextHeaderMenuHover} !important;
           }
 
           position: fixed;
@@ -223,14 +291,15 @@ export const InternalAdminLayout = (props: any) => {
           line-height: var(--nb-header-height);
           padding: 0;
           z-index: 100;
-          background-color: ${token.colorBgHeader};
+          background-color: ${token.colorBgHeader} !important;
 
           .ant-menu {
             background-color: transparent;
           }
 
-          .ant-menu-item {
+          .ant-menu-item,
-            color: ${token.colorTextHeaderMenu};
+          .ant-menu-submenu-horizontal {
+            color: ${token.colorTextHeaderMenu} !important;
           }
         `}
       >
@@ -277,7 +346,9 @@ export const InternalAdminLayout = (props: any) => {
                 width: 0;
               `}
             >
-              <MenuEditor sideMenuRef={sideMenuRef} />
+              <SetThemeOfHeaderSubmenu>
+                <MenuEditor sideMenuRef={sideMenuRef} />
+              </SetThemeOfHeaderSubmenu>
             </div>
           </div>
           <div

packages/core/client/src/schema-component/antd/menu/Menu.tsx

@@ -18,9 +18,9 @@ import { createDesignable, DndContext, SortableItem, useDesignable, useDesigner
 import { Icon, useAPIClient, useSchemaInitializerRender } from '../../../';
 import { useCollectMenuItems, useMenuItem } from '../../../hooks/useMenuItem';
 import { useProps } from '../../hooks/useProps';
+import { useMenuTranslation } from './locale';
 import { MenuDesigner } from './Menu.Designer';
 import { findKeysByUid, findMenuItem } from './util';
-import { useMenuTranslation } from './locale';
 
 const subMenuDesignerCss = css`
   position: relative;

packages/plugins/@nocobase/plugin-multi-app-manager/package.json

@@ -11,6 +11,7 @@
     "@formily/react": "2.x",
     "@formily/shared": "2.x",
     "antd": "5.x",
+    "antd-style": "3.x",
     "async-mutex": "^0.3.2",
     "mysql2": "^2.3.3",
     "pg": "^8.7.3",

packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.style.ts

@@ -0,0 +1,10 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ token }) => {
+  return {
+    button: {
+      // @ts-ignore
+      color: token.colorTextHeaderMenu + ' !important',
+    },
+  };
+});

packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.tsx

@@ -3,9 +3,11 @@ import { Button, Dropdown } from 'antd';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { AppNameInput } from './AppNameInput';
+import { useStyles } from './MultiAppManagerProvider.style';
 import { usePluginUtils } from './utils';
 
 const MultiAppManager = () => {
+  const { styles } = useStyles();
   const { data, run } = useRequest<{
     data: any[];
   }>(
@@ -46,7 +48,7 @@ const MultiAppManager = () => {
       }}
       menu={{ items }}
     >
-      <Button title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
+      <Button className={styles.button} title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
     </Dropdown>
   );
 };