fix(layout): support antd@5.6.4

package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@ant-design/antd-theme-variable": "^1.0.0",
-    "@ant-design/cssinjs": "^1.10.1",
+    "@ant-design/cssinjs": "^1.11.0",
     "@ant-design/icons": "^5.1.4",
     "@babel/core": "^7.22.5",
     "@babel/eslint-plugin": "^7.22.5",
@@ -75,9 +75,9 @@
     "@types/lodash": "^4.14.195",
     "@types/lodash.merge": "^4.6.7",
     "@types/mockjs": "^1.0.7",
-    "@types/node": "^14.18.51",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/node": "^14.18.53",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "@types/react-helmet": "^6.1.6",
     "@types/react-responsive": "^8.0.5",
     "@types/shallowequal": "^1.1.1",
@@ -88,23 +88,23 @@
     "@umijs/plugin-analytics": "^0.2.3",
     "@umijs/test": "^3.5.41",
     "@umijs/test-utils": "^3.5.41",
-    "@umijs/utils": "^4.0.71",
+    "@umijs/utils": "^4.0.72",
     "animated-scroll-to": "^2.3.0",
-    "antd": "^5.6.2",
-    "antd-style": "^3.3.0",
+    "antd": "^5.6.4",
+    "antd-style": "^3.4.1",
     "babel-loader": "^9.1.2",
     "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.8",
+    "dayjs": "^1.11.9",
     "dumi": "^2.2.1",
     "dumi-theme-antd-style": "0.25.1",
     "esbuild": "^0.15.18",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.43.0",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint": "^8.44.0",
+    "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unicorn": "^47.0.0",
@@ -117,7 +117,7 @@
     "identity-obj-proxy": "^3.0.0",
     "inquirer": "^8.2.5",
     "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.5.1",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.5.0",
     "jest-fetch-mock": "^3.0.3",
     "jsdom": "^19.0.0",
@@ -133,15 +133,15 @@
     "polished": "^4.2.2",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.2",
-    "prettier-plugin-packagejson": "^2.4.3",
+    "prettier-plugin-packagejson": "^2.4.4",
     "pretty-quick": "^3.1.3",
     "query-string": "^6.14.1",
-    "rc-field-form": "^1.32.2",
+    "rc-field-form": "^1.34.1",
     "rc-footer": "^0.6.8",
     "rc-resize-observer": "^1.3.1",
     "rc-steps": "^6.0.0",
     "rc-table": "^7.32.1",
-    "rc-util": "^5.33.1",
+    "rc-util": "^5.34.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
@@ -156,7 +156,7 @@
     "timezone-mock": "^1.3.6",
     "ts-node": "^10.9.1",
     "typescript": "~4.8.4",
-    "umi": "^4.0.71",
+    "umi": "^4.0.72",
     "umi-request": "^1.4.0",
     "use-merge-value": "^1.2.0",
     "write-pkg": "^4.0.0",

packages/layout/src/components/SiderMenu/SiderMenu.tsx

@@ -1,7 +1,6 @@
 import type { GenerateStyle } from '@ant-design/pro-provider';
 import { ProProvider } from '@ant-design/pro-provider';
-import type { AvatarProps, SiderProps } from 'antd';
-import { Avatar, Layout, Menu, Space } from 'antd';
+import { Avatar, AvatarProps, Layout, Menu, SiderProps, Space } from 'antd';
 import type { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
@@ -474,6 +473,7 @@ const SiderMenu: React.FC<SiderMenuProps & PrivateSiderMenuProps> = (props) => {
           }}
         />
       )}
+
       <Sider
         collapsible
         trigger={null}

packages/layout/src/components/SiderMenu/style/index.ts

@@ -21,16 +21,17 @@ export const proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
 const genSiderMenuStyle: GenerateStyle<SiderMenuToken> = (token) => {
   return {
     [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-sider${token.componentCls}`]: {
+        background: token.layout?.sider?.colorMenuBackground || 'transparent',
+      },
       [token.componentCls]: {
         position: 'relative',
-        background: token.layout?.sider?.colorMenuBackground || 'transparent',
         boxSizing: 'border-box',
         '&-menu': {
           position: 'relative',
           zIndex: 10,
           minHeight: '100%',
         },
-
         [`${token.antCls}-layout-sider-children`]: {
           position: 'relative',
           display: 'flex',