fix(layout): fix popupBg no work error

package.json

@@ -48,14 +48,14 @@
     "@ant-design/antd-theme-variable": "^1.0.0",
     "@ant-design/cssinjs": "^1.17.2",
     "@ant-design/icons": "^5.2.6",
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.3",
     "@babel/eslint-plugin": "^7.22.10",
-    "@babel/parser": "^7.23.0",
+    "@babel/parser": "^7.23.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
-    "@babel/traverse": "^7.23.2",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/traverse": "^7.23.3",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.2",
@@ -68,49 +68,49 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
-    "@types/chroma-js": "^2.4.1",
+    "@types/chroma-js": "^2.4.3",
     "@types/glob": "^8.1.0",
     "@types/history": "^4.7.11",
-    "@types/lodash": "^4.14.199",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/mockjs": "^1.0.8",
+    "@types/lodash": "^4.14.201",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/mockjs": "^1.0.10",
     "@types/node": "^14.18.63",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@types/react-helmet": "^6.1.7",
-    "@types/react-responsive": "^8.0.6",
-    "@types/shallowequal": "^1.1.2",
-    "@types/warning": "^3.0.1",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-helmet": "^6.1.9",
+    "@types/react-responsive": "^8.0.8",
+    "@types/shallowequal": "^1.1.4",
+    "@types/warning": "^3.0.3",
     "@umijs/babel-preset-umi": "^3.5.41",
     "@umijs/doctor": "^1.0.5",
     "@umijs/fabric": "^4.0.1",
     "@umijs/plugin-analytics": "^0.2.4",
     "@umijs/test": "^3.5.41",
     "@umijs/test-utils": "^3.5.41",
-    "@umijs/utils": "^4.0.86",
+    "@umijs/utils": "^4.0.88",
     "@vitest/coverage-istanbul": "^0.34.6",
     "animated-scroll-to": "^2.3.0",
-    "antd": "^5.10.0",
-    "antd-style": "^3.5.0",
+    "antd": "^5.11.1",
+    "antd-style": "^3.5.2",
     "babel-loader": "^9.1.3",
     "babel-types": "^6.26.0",
     "chalk": "^4.1.2",
     "chroma-js": "^2.4.2",
     "copy-to-clipboard": "^3.3.3",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
-    "dumi": "^2.2.13",
+    "dumi": "^2.2.14",
     "dumi-theme-antd-style": "0.25.1",
     "esbuild": "^0.15.18",
-    "eslint": "^8.51.0",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint": "^8.53.0",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^47.0.0",
     "execa": "^5.1.1",
     "express": "^4.18.2",
     "fast-deep-equal": "^3.1.3",
-    "father": "^4.3.5",
+    "father": "^4.3.7",
     "gh-pages": "^3.2.3",
     "glob": "^8.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -129,16 +129,16 @@
     "octokit": "^1.8.1",
     "polished": "^4.2.2",
     "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-packagejson": "^2.4.6",
     "pretty-quick": "^3.1.3",
     "query-string": "^6.14.1",
-    "rc-field-form": "^1.39.0",
+    "rc-field-form": "^1.40.0",
     "rc-footer": "^0.6.8",
-    "rc-resize-observer": "^1.3.1",
+    "rc-resize-observer": "^1.4.0",
     "rc-steps": "^6.0.1",
     "rc-table": "^7.35.2",
-    "rc-util": "^5.38.0",
+    "rc-util": "^5.38.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
@@ -153,13 +153,13 @@
     "timezone-mock": "^1.3.6",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "umi": "^4.0.86",
+    "umi": "^4.0.88",
     "umi-request": "^1.4.0",
     "vitest": "^0.34.6",
     "write-pkg": "^4.0.0",
     "xhr-mock": "^2.5.1",
     "yorkie": "^2.0.0",
-    "zustand": "^4.4.3"
+    "zustand": "^4.4.6"
   },
   "gitHooks": {
     "pre-commit": "pretty-quick --staged",

packages/layout/src/ProLayout.tsx

@@ -787,15 +787,18 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
               // @ts-ignore
               theme={{
                 hashed: isNeedOpenHash(),
+                token: {
+                  controlHeightLG:
+                    token.layout?.sider?.menuHeight || token?.controlHeightLG,
+                },
                 components: {
                   Menu: coverToNewToken({
                     colorItemBg:
                       token.layout?.sider?.colorMenuBackground || 'transparent',
                     colorSubItemBg:
                       token.layout?.sider?.colorMenuBackground || 'transparent',
                     radiusItem: token.borderRadius,
-                    controlHeightLG:
-                      token.layout?.sider?.menuHeight || token?.controlHeightLG,
+
                     colorItemBgSelected:
                       token.layout?.sider?.colorBgMenuItemSelected ||
                       token?.colorBgTextHover,
@@ -820,9 +823,9 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                     colorItemTextSelected:
                       token.layout?.sider?.colorTextMenuSelected ||
                       'rgba(0, 0, 0, 1)',
-                    colorBgElevated:
-                      token.layout?.sider?.colorBgMenuItemCollapsedElevated ||
-                      '#fff',
+                    popupBg: token?.colorBgElevated,
+                    // @ts-expect-error
+                    darkPopupBg: token?.colorBgElevated,
                   }),
                 },
               }}

packages/layout/src/components/Help/ProHelpPanel.tsx

@@ -226,11 +226,13 @@ export const ProHelpPanel: React.FC<ProHelpPanelProps> = ({
             <ConfigProvider
               theme={{
                 hashed: isNeedOpenHash(),
+                token: {
+                  lineHeight: 1.2,
+                  fontSize: 12,
+                  controlHeightLG: 26,
+                },
                 components: {
                   Menu: coverToNewToken({
-                    lineHeight: 1.2,
-                    controlHeightLG: 26,
-                    fontSize: 12,
                     radiusItem: token.borderRadius,
                     colorActiveBarWidth: 0,
                     colorActiveBarBorderSize: 0,
@@ -251,9 +253,9 @@ export const ProHelpPanel: React.FC<ProHelpPanelProps> = ({
                       'rgba(0, 0, 0, 1)',
                     colorItemBg: 'transparent',
                     colorSubItemBg: 'transparent',
-                    colorBgElevated:
-                      token.layout?.sider?.colorBgMenuItemCollapsedElevated ||
-                      '#fff',
+                    popupBg: token?.colorBgElevated,
+                    // @ts-expect-error
+                    darkPopupBg: token?.colorBgElevated,
                   }),
                 },
               }}

packages/layout/src/components/TopNavHeader/index.tsx

@@ -99,9 +99,9 @@ const TopNavHeader: React.FC<TopNavHeaderProps> = (
                 colorItemTextSelected:
                   token.layout?.header?.colorTextMenuSelected ||
                   'rgba(0, 0, 0, 1)',
-                colorBgElevated:
-                  token.layout?.header?.colorBgMenuElevated ||
-                  token.colorBgElevated,
+                popupBg: token?.colorBgElevated,
+                // @ts-expect-error
+                darkPopupBg: token?.colorBgElevated,
               }),
             },
           },

packages/utils/src/compareVersions/coverToNewToken.ts

@@ -1,9 +1,10 @@
-import { compareVersions } from './index';
+import { ComponentToken } from 'antd/es/menu/style';
+import { compareVersions } from './index';
 import { getVersion } from './openVisibleCompatible';
 
 export function coverToNewToken(
-  token: Record<string, string | number | undefined>,
-) {
+  token: Partial<ComponentToken>,
+): Partial<ComponentToken> {
   if (compareVersions(getVersion(), '5.6.0') < 0) return token;
   const deprecatedTokens = {
     colorGroupTitle: 'groupTitleColor',
@@ -33,10 +34,10 @@ export function coverToNewToken(
 
   const newToken = { ...token };
   Object.keys(deprecatedTokens).forEach((key) => {
-    if (newToken[key] !== undefined) {
+    if (newToken[key as keyof ComponentToken] !== undefined) {
       // @ts-ignore
       newToken[deprecatedTokens[key]] = newToken[key];
-      delete newToken[key];
+      delete newToken[key as keyof ComponentToken];
     }
   });
   return newToken;