From 4a21fdf5ad56aa09a9c06b20063ea27203267913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@antgroup.com>
Date: Mon, 15 Jan 2024 14:51:46 +0800
Subject: [PATCH] fix(layout): fix bgLayout no work error

---
 packages/layout/src/ProLayout.tsx             |   8 +-
 tests/form/__snapshots__/demo.test.ts.snap    |   3 +
 tests/layout/__snapshots__/demo.test.ts.snap  | 120 ++++++++++++++++++
 .../layout/__snapshots__/index.test.tsx.snap  |  21 +++
 .../layout/__snapshots__/mobile.test.tsx.snap |  21 +++
 .../__snapshots__/pageContainer.test.tsx.snap |   9 ++
 .../pageHeaderWarp.test.tsx.snap              |   6 +
 7 files changed, 184 insertions(+), 4 deletions(-)

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
index 00be8a67fce4..c07367d70fbf 100644
--- a/packages/layout/src/ProLayout.tsx
+++ b/packages/layout/src/ProLayout.tsx
@@ -724,9 +724,11 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
 
   useDocumentTitle(pageTitleInfo, props.title || false);
 
+  const { token } = useContext(ProProvider);
+
   const bgImgStyleList = useMemo(() => {
     if (bgLayoutImgList && bgLayoutImgList.length > 0) {
-      return bgLayoutImgList.map((item, index) => {
+      return bgLayoutImgList?.map((item, index) => {
         return (
           <img
             key={index}
@@ -742,8 +744,6 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
     return null;
   }, [bgLayoutImgList]);
 
-  const { token } = useContext(ProProvider);
-
   return wrapSSR(
     <RouteContext.Provider
       value={{
@@ -772,7 +772,7 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
         <>{children}</>
       ) : (
         <div className={className}>
-          {bgImgStyleList ? (
+          {bgImgStyleList || token.layout?.bgLayout ? (
             <div
               className={classNames(`${proLayoutClassName}-bg-list`, hashId)}
             >
diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
index 31f3016fefee..ed38e82e4c69 100644
--- a/tests/form/__snapshots__/demo.test.ts.snap
+++ b/tests/form/__snapshots__/demo.test.ts.snap
@@ -49039,6 +49039,9 @@ exports[`form demos > 📸 renders ./packages/form/src/demos/layout-footer.tsx c
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/demo.test.ts.snap b/tests/layout/__snapshots__/demo.test.ts.snap
index b68f7323459e..79ace5d29a87 100644
--- a/tests/layout/__snapshots__/demo.test.ts.snap
+++ b/tests/layout/__snapshots__/demo.test.ts.snap
@@ -4198,6 +4198,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/AlwaysDefaultOp
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -4442,6 +4445,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/BreadcrumbsRepe
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -4744,6 +4750,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/DefaultOpenAllM
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -4988,6 +4997,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/IconFont.tsx co
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5232,6 +5244,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/MenuGroup.tsx c
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5476,6 +5491,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/MultipleMenuOne
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -5742,6 +5760,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/Nested.tsx corr
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout ant-layout-has-sider"
           style="min-height: 100%; flex-direction: row;"
@@ -5756,6 +5777,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/Nested.tsx corr
               <div
                 class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-is-children ant-pro-layout-side"
               >
+                <div
+                  class="ant-pro-layout-bg-list"
+                />
                 <div
                   class="ant-layout"
                   style="min-height: 100%; flex-direction: row; height: 400px;"
@@ -5955,6 +5979,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/TopmenuNested.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -6135,6 +6162,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/TopmenuNested.t
               <div
                 class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-is-children ant-pro-layout-fix-siderbar ant-pro-layout-side"
               >
+                <div
+                  class="ant-pro-layout-bg-list"
+                />
                 <div
                   class="ant-layout"
                   style="min-height: 100%; flex-direction: row;"
@@ -6284,6 +6314,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/antd@4MenuIconF
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 500px; flex-direction: row;"
@@ -6762,6 +6795,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/api.tsx correct
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -7131,6 +7167,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/appList-group.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -7371,6 +7410,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/appList-group-s
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -9051,6 +9093,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/collapsedShowTi
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -9396,6 +9441,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/config-provider
     <div
       class="ant-design-pro qixian-pro-layout screen-xs qixian-pro-layout-fix-siderbar qixian-pro-layout-side"
     >
+      <div
+        class="qixian-pro-layout-bg-list"
+      />
       <div
         class="qixian-layout"
         style="min-height: 100%; flex-direction: row; max-height: 100vh;"
@@ -10779,6 +10827,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/customize-colla
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -11117,6 +11168,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/customizeMenu.t
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -11255,6 +11309,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dark.tsx correc
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -11640,6 +11697,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/debug-demo.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -13267,6 +13327,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dynamic-setting
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -14325,6 +14388,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/dynamicMenu.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -14644,6 +14710,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/error-boundarie
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -14875,6 +14944,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/footer.tsx corr
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -15602,6 +15674,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/ghost.tsx corre
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -16789,6 +16864,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/hideMenu.tsx co
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -17044,6 +17122,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/immersive-navig
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -17410,6 +17491,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/immersive-navig
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -17933,6 +18017,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/menu-group.tsx
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -18960,6 +19047,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/morse_debug.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -19679,6 +19769,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/searchMenu.tsx
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
@@ -20621,6 +20714,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -20810,6 +20906,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -20827,6 +20926,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -20883,6 +20985,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -20965,6 +21070,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21053,6 +21161,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21148,6 +21259,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/splitMenus.tsx
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row; height: 100vh;"
@@ -21277,6 +21391,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/theme.tsx corre
     <div
       class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout"
         style="min-height: 100%; flex-direction: row;"
@@ -21665,6 +21782,9 @@ exports[`layout demos > 📸 renders ./packages/layout/src/demos/top-breadcrumb.
       <div
         class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
       >
+        <div
+          class="ant-pro-layout-bg-list"
+        />
         <div
           class="ant-layout"
           style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/index.test.tsx.snap b/tests/layout/__snapshots__/index.test.tsx.snap
index 2f15b1664755..b7ec93b9bf29 100644
--- a/tests/layout/__snapshots__/index.test.tsx.snap
+++ b/tests/layout/__snapshots__/index.test.tsx.snap
@@ -5,6 +5,9 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -213,6 +216,9 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -406,6 +412,9 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -633,6 +642,9 @@ exports[`BasicLayout > 🥩 base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -846,6 +858,9 @@ exports[`BasicLayout > 🥩 compatibleStyle 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -1061,6 +1076,9 @@ exports[`BasicLayout > 🥩 contentStyle should change dom 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -1276,6 +1294,9 @@ exports[`BasicLayout > 🥩 mix layout hideInMenu render right 1`] = `
     <div
       class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
     >
+      <div
+        class="ant-pro-layout-bg-list"
+      />
       <div
         class="ant-layout ant-layout-has-sider"
         style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/mobile.test.tsx.snap b/tests/layout/__snapshots__/mobile.test.tsx.snap
index b4d6e9faef00..477a44c1db33 100644
--- a/tests/layout/__snapshots__/mobile.test.tsx.snap
+++ b/tests/layout/__snapshots__/mobile.test.tsx.snap
@@ -5,6 +5,9 @@ exports[`mobile BasicLayout > 📱 base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -195,6 +198,9 @@ exports[`mobile BasicLayout > 📱 collapsed=false 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -383,6 +389,9 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -446,6 +455,9 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender 2`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -509,6 +521,9 @@ exports[`mobile BasicLayout > 📱 layout menuHeaderRender=false 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -571,6 +586,9 @@ exports[`mobile BasicLayout > 📱 layout=mix 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -763,6 +781,9 @@ exports[`mobile BasicLayout > 📱 layout=mix and splitMenus 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-xs ant-pro-layout-fix-siderbar ant-pro-layout-mix"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/pageContainer.test.tsx.snap b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
index 8ed2dfb1acc6..9379aeeaa656 100644
--- a/tests/layout/__snapshots__/pageContainer.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageContainer.test.tsx.snap
@@ -208,6 +208,9 @@ exports[`PageContainer > 🐲 FooterToolbar should know width 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -549,6 +552,9 @@ exports[`PageContainer > 🐲 footer should know width 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-top-menu ant-pro-layout-fix-siderbar ant-pro-layout-top"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout"
       style="min-height: 100%; flex-direction: row;"
@@ -791,6 +797,9 @@ exports[`PageContainer > 🐲 pro-layout support breadcrumbProps 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
diff --git a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
index c5030a04e0cc..6740bfdcb191 100644
--- a/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
+++ b/tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap
@@ -18,6 +18,9 @@ exports[`BasicLayout > base use 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"
@@ -254,6 +257,9 @@ exports[`BasicLayout > content is text 1`] = `
   <div
     class="ant-design-pro ant-pro-layout screen-md ant-pro-layout-fix-siderbar ant-pro-layout-side"
   >
+    <div
+      class="ant-pro-layout-bg-list"
+    />
     <div
       class="ant-layout ant-layout-has-sider"
       style="min-height: 100%; flex-direction: row;"