From 70633840da4985397db59f98785748806b54257d Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Wed, 10 Jan 2024 09:15:41 +0800 Subject: [PATCH] fix(theme): fix color of header menu (#3354) --- .../PinnedPluginListProvider.tsx | 2 +- .../route-switch/antd/admin-layout/index.tsx | 55 ++++++++++++++++--- .../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, 64 insertions(+), 10 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..251ba2fc6 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 { 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,44 @@ const MenuEditor = (props) => { ); }; +/** + * 鼠标悬浮在顶部“更多”按钮时显示的子菜单的样式 + */ +const GlobalStyleForAdminLayout = createGlobalStyle` + .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'; + }}; + } + } + } +`; + export const InternalAdminLayout = (props: any) => { const sideMenuRef = useRef(); const result = useSystemSettings(); @@ -203,17 +242,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 +263,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; } `} > diff --git a/packages/core/client/src/schema-component/antd/menu/Menu.tsx b/packages/core/client/src/schema-component/antd/menu/Menu.tsx index 7113ad8a6..699a5fdf8 100644 --- a/packages/core/client/src/schema-component/antd/menu/Menu.tsx +++ b/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; diff --git a/packages/plugins/@nocobase/plugin-multi-app-manager/package.json b/packages/plugins/@nocobase/plugin-multi-app-manager/package.json index 27d352bca..af65ed714 100644 --- a/packages/plugins/@nocobase/plugin-multi-app-manager/package.json +++ b/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", diff --git a/packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.style.ts b/packages/plugins/@nocobase/plugin-multi-app-manager/src/client/MultiAppManagerProvider.style.ts new file mode 100644 index 000000000..fcd0dcf45 --- /dev/null +++ b/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', + }, + }; +}); 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 }} > -