fix(theme): fix color of header menu (#3354)
This commit is contained in:
		
							parent
							
								
									0ce0ca6441
								
							
						
					
					
						commit
						70633840da
					
				@ -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) !important;
 | 
					          color: rgba(255, 255, 255, 0.65);
 | 
				
			||||||
          &:hover {
 | 
					          &:hover {
 | 
				
			||||||
            background: rgba(255, 255, 255, 0.1);
 | 
					            background: rgba(255, 255, 255, 0.1);
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
 | 
				
			|||||||
@ -1,6 +1,7 @@
 | 
				
			|||||||
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 {
 | 
				
			||||||
@ -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) => {
 | 
					export const InternalAdminLayout = (props: any) => {
 | 
				
			||||||
  const sideMenuRef = useRef<HTMLDivElement>();
 | 
					  const sideMenuRef = useRef<HTMLDivElement>();
 | 
				
			||||||
  const result = useSystemSettings();
 | 
					  const result = useSystemSettings();
 | 
				
			||||||
@ -203,17 +242,18 @@ 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};
 | 
					            background-color: ${token.colorBgHeaderMenuActive} !important;
 | 
				
			||||||
            color: ${token.colorTextHeaderMenuActive};
 | 
					            color: ${token.colorTextHeaderMenuActive} !important;
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
          .ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
 | 
					          .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;
 | 
					          position: fixed;
 | 
				
			||||||
@ -223,14 +263,15 @@ 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};
 | 
					          background-color: ${token.colorBgHeader} !important;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          .ant-menu {
 | 
					          .ant-menu {
 | 
				
			||||||
            background-color: transparent;
 | 
					            background-color: transparent;
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          .ant-menu-item {
 | 
					          .ant-menu-item,
 | 
				
			||||||
            color: ${token.colorTextHeaderMenu};
 | 
					          .ant-menu-submenu-horizontal {
 | 
				
			||||||
 | 
					            color: ${token.colorTextHeaderMenu} !important;
 | 
				
			||||||
          }
 | 
					          }
 | 
				
			||||||
        `}
 | 
					        `}
 | 
				
			||||||
      >
 | 
					      >
 | 
				
			||||||
 | 
				
			|||||||
@ -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;
 | 
				
			||||||
 | 
				
			|||||||
@ -11,6 +11,7 @@
 | 
				
			|||||||
    "@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",
 | 
				
			||||||
 | 
				
			|||||||
@ -0,0 +1,10 @@
 | 
				
			|||||||
 | 
					import { createStyles } from 'antd-style';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export const useStyles = createStyles(({ token }) => {
 | 
				
			||||||
 | 
					  return {
 | 
				
			||||||
 | 
					    button: {
 | 
				
			||||||
 | 
					      // @ts-ignore
 | 
				
			||||||
 | 
					      color: token.colorTextHeaderMenu + ' !important',
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
@ -3,9 +3,11 @@ 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[];
 | 
				
			||||||
  }>(
 | 
					  }>(
 | 
				
			||||||
@ -46,7 +48,7 @@ const MultiAppManager = () => {
 | 
				
			|||||||
      }}
 | 
					      }}
 | 
				
			||||||
      menu={{ items }}
 | 
					      menu={{ items }}
 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <Button title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
 | 
					      <Button className={styles.button} title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
 | 
				
			||||||
    </Dropdown>
 | 
					    </Dropdown>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user