From 13f0683e2105ebb95c0065eef44368d43e722ca1 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Thu, 19 Oct 2023 14:36:04 +0800
Subject: [PATCH] improve(ui): PageContainer footer bar width adapt to sider
 width of BasicLayout

---
 packages/ui/src/BasicLayout/index.tsx        |  3 ++-
 packages/ui/src/BasicLayout/style/index.ts   | 18 ++++++++++++++----
 packages/ui/src/PageContainer/demo/empty.tsx |  1 +
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/BasicLayout/index.tsx b/packages/ui/src/BasicLayout/index.tsx
index 8a464ef9c..52bd569eb 100644
--- a/packages/ui/src/BasicLayout/index.tsx
+++ b/packages/ui/src/BasicLayout/index.tsx
@@ -292,7 +292,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
   let siderWidth = 0;
   // 根据菜单项的配置计算侧边栏的宽度
   if (subSideMenus && menus) {
-    siderWidth = collapsed ? 104 : 192;
+    siderWidth = collapsed ? 52 * 2 : 208;
   } else if (subSideMenus && !menus) {
     siderWidth = 52;
   } else if (!subSideMenus && menus) {
@@ -307,6 +307,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
       <Layout
         className={classNames(prefix, className, basicLayoutCls, {
           [`${prefix}-with-banner`]: banner,
+          [`${prefixCls}-sider-${siderWidth}`]: true,
         })}
         {...restProps}
       >
diff --git a/packages/ui/src/BasicLayout/style/index.ts b/packages/ui/src/BasicLayout/style/index.ts
index 9b376aeeb..d7f1f8d40 100644
--- a/packages/ui/src/BasicLayout/style/index.ts
+++ b/packages/ui/src/BasicLayout/style/index.ts
@@ -7,7 +7,19 @@ export type BasicLayoutToken = FullToken<any>;
 export const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken> = (
   token: BasicLayoutToken
 ): CSSObject => {
-  const { componentCls, proComponentsCls } = token;
+  const { componentCls, proComponentsCls, motionDurationSlow } = token;
+  const siderWidthList = [0, 52, 52 * 2, 192, 208];
+
+  const footerBarStyle: CSSObject = {};
+  siderWidthList.forEach(width => {
+    footerBarStyle[`${componentCls}${componentCls}-sider-${width}`] = {
+      [`${proComponentsCls}-footer-bar`]: {
+        // footer bar width adapt to sider width of BasicLayout
+        width: width === 0 ? '100%' : `calc(100% - ${width}px - 24px)`,
+        transition: `width ${motionDurationSlow}`,
+      },
+    };
+  });
 
   return {
     [`${componentCls}`]: {
@@ -16,10 +28,8 @@ export const genBasicLayoutStyle: GenerateStyle<BasicLayoutToken> = (
         // 48px is the height of BasicLayout header
         minHeight: 'calc(100vh - 48px)',
       },
-      [`${proComponentsCls}-footer-bar`]: {
-        width: `calc(100% - 192px - 24px)`,
-      },
     },
+    ...footerBarStyle,
   };
 };
 
diff --git a/packages/ui/src/PageContainer/demo/empty.tsx b/packages/ui/src/PageContainer/demo/empty.tsx
index 5ee82a0b6..2e5d64d71 100644
--- a/packages/ui/src/PageContainer/demo/empty.tsx
+++ b/packages/ui/src/PageContainer/demo/empty.tsx
@@ -11,6 +11,7 @@ export default () => {
       header={{
         title: '总览',
       }}
+      footer={[<a>111</a>]}
     >
       <Card
         bordered={false}