From 7534e120296a1866caab72ffa8eac2aba50ff2e4 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 10 Jan 2024 16:52:02 +0800 Subject: [PATCH] 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 3a0689346350b94a5804d09edd9d5b703c162a02. --- .../PinnedPluginListProvider.tsx | 2 +- .../route-switch/antd/admin-layout/index.tsx | 89 +++++++++++++++++-- .../src/schema-component/antd/menu/Menu.tsx | 2 +- .../plugin-multi-app-manager/package.json | 1 + .../client/MultiAppManagerProvider.style.ts | 10 +++ .../src/client/MultiAppManagerProvider.tsx | 4 +- 6 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.style.ts diff --git a/packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx b/packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx index f516bdaa8..32648c667 100644 --- a/packages/core/client/src/plugin-manager/PinnedPluginListProvider.tsx +++ b/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); } diff --git a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx b/packages/core/client/src/route-switch/antd/admin-layout/index.tsx index 1338ef66a..e7b18f3d4 100644 --- a/packages/core/client/src/route-switch/antd/admin-layout/index.tsx +++ b/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 ( + <> + + containerRef.current}>{children} + + ); +}; + export const InternalAdminLayout = (props: any) => { const sideMenuRef = useRef(); const result = useSystemSettings(); @@ -203,17 +270,18 @@ export const InternalAdminLayout = (props: any) => { return ( + .ant-menu-item:hover { - background-color: ${token.colorBgHeaderMenuHover}; - color: ${token.colorTextHeaderMenuHover}; + background-color: ${token.colorBgHeaderMenuHover} !important; + 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 { - color: ${token.colorTextHeaderMenu}; + .ant-menu-item, + .ant-menu-submenu-horizontal { + color: ${token.colorTextHeaderMenu} !important; } `} > @@ -277,7 +346,9 @@ export const InternalAdminLayout = (props: any) => { width: 0; `} > - + + +
{ + return { + button: { + // @ts-ignore + color: token.colorTextHeaderMenu + ' !important', + }, + }; +}); diff --git a/packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.tsx b/packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.tsx index 1cca06a95..f4a56fb2a 100644 --- a/packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.tsx +++ b/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 }} > -