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

This reverts commit 70633840da.
This commit is contained in:
Zeke Zhang 2024-01-10 11:33:23 +08:00
parent 70633840da
commit 3a06893463
6 changed files with 10 additions and 64 deletions

View File

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

View File

@ -1,7 +1,6 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useSessionStorageState } from 'ahooks'; import { useSessionStorageState } from 'ahooks';
import { App, Layout } from 'antd'; import { App, Layout } from 'antd';
import { createGlobalStyle } from 'antd-style';
import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'; import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom'; import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom';
import { import {
@ -194,44 +193,6 @@ 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) => { export const InternalAdminLayout = (props: any) => {
const sideMenuRef = useRef<HTMLDivElement>(); const sideMenuRef = useRef<HTMLDivElement>();
const result = useSystemSettings(); const result = useSystemSettings();
@ -242,18 +203,17 @@ export const InternalAdminLayout = (props: any) => {
return ( return (
<Layout> <Layout>
<GlobalStyleForAdminLayout />
<Layout.Header <Layout.Header
className={css` className={css`
.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.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 { .ant-menu-submenu-horizontal.ant-menu-submenu-selected {
background-color: ${token.colorBgHeaderMenuActive} !important; background-color: ${token.colorBgHeaderMenuActive};
color: ${token.colorTextHeaderMenuActive} !important; color: ${token.colorTextHeaderMenuActive};
} }
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover { .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
background-color: ${token.colorBgHeaderMenuHover} !important; background-color: ${token.colorBgHeaderMenuHover};
color: ${token.colorTextHeaderMenuHover} !important; color: ${token.colorTextHeaderMenuHover};
} }
position: fixed; position: fixed;
@ -263,15 +223,14 @@ export const InternalAdminLayout = (props: any) => {
line-height: var(--nb-header-height); line-height: var(--nb-header-height);
padding: 0; padding: 0;
z-index: 100; z-index: 100;
background-color: ${token.colorBgHeader} !important; background-color: ${token.colorBgHeader};
.ant-menu { .ant-menu {
background-color: transparent; background-color: transparent;
} }
.ant-menu-item, .ant-menu-item {
.ant-menu-submenu-horizontal { color: ${token.colorTextHeaderMenu};
color: ${token.colorTextHeaderMenu} !important;
} }
`} `}
> >

View File

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

View File

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

View File

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

View File

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