fix(layout): Support for multiple PageContainers to be used together

packages/layout/src/ProLayout.tsx

@@ -615,7 +615,10 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
   }, [location.pathname, location.pathname?.search]);
 
   const [hasFooterToolbar, setHasFooterToolbar] = useState(false);
-  const [hasPageContainer, setHasPageContainer] = useState(false);
+  /**
+   * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className
+   */
+  const [hasPageContainer, setHasPageContainer] = useState(0);
   useDocumentTitle(pageTitleInfo, props.title || false);
   const bgImgStyleList = useMemo(() => {
     if (bgLayoutImgList && bgLayoutImgList.length > 0) {

packages/layout/src/WrapContent.tsx

@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
 import React from 'react';
 
 const WrapContent: React.FC<{
-  hasPageContainer?: boolean;
+  hasPageContainer?: number;
   isChildrenLayout?: boolean;
   prefixCls?: string;
   style?: CSSProperties;
@@ -16,11 +16,11 @@ const WrapContent: React.FC<{
   hasHeader: boolean;
 }> = (props) => {
   const { hashId } = useToken();
-  const { style, prefixCls, children, hasPageContainer } = props;
+  const { style, prefixCls, children, hasPageContainer = 0 } = props;
 
   const contentClassName = classNames(`${prefixCls}-content`, hashId, {
     [`${prefixCls}-has-header`]: props.hasHeader,
-    [`${prefixCls}-content-has-page-container`]: hasPageContainer,
+    [`${prefixCls}-content-has-page-container`]: hasPageContainer > 0,
   });
 
   const ErrorComponent = props.ErrorBoundary || ErrorBoundary;

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

@@ -295,9 +295,9 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
     if (!value || !value?.setHasPageContainer) {
       return () => {};
     }
-    value?.setHasPageContainer?.(true);
+    value?.setHasPageContainer?.((num) => num + 1);
     return () => {
-      value?.setHasPageContainer?.(false);
+      value?.setHasPageContainer?.((num) => num - 1);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

packages/layout/src/context/RouteContext.tsx

@@ -17,9 +17,9 @@ export type RouteContextType = {
   isChildrenLayout?: boolean;
   hasFooterToolbar?: boolean;
   hasFooter?: boolean;
-  hasPageContainer?: boolean;
+  hasPageContainer?: number;
   setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
-  setHasPageContainer?: React.Dispatch<React.SetStateAction<boolean>>;
+  setHasPageContainer?: React.Dispatch<React.SetStateAction<number>>;
   pageTitleInfo?: {
     title: string;
     id: string;

tests/layout/pageContainer.test.tsx

@@ -1,6 +1,7 @@
 import type { ProLayoutProps } from '@ant-design/pro-components';
 import { FooterToolbar, PageContainer, ProLayout } from '@ant-design/pro-components';
 import { render as libraryRender } from '@testing-library/react';
+import { Button } from 'antd';
 import { mount, render } from 'enzyme';
 import React, { useEffect, useMemo, useState } from 'react';
 import { act } from 'react-dom/test-utils';
@@ -26,6 +27,70 @@ describe('PageContainer', () => {
     expect(html.find('.ant-page-header').exists()).toBeFalsy();
   });
 
+  it('💄 has PageContainer className', async () => {
+    const Demo = () => {
+      const [state, setState] = useState(0);
+      return (
+        <ProLayout>
+          <Button
+            onClick={() => {
+              setState((num) => num + 1);
+            }}
+          >
+            切换
+          </Button>
+          {state > 0 && state < 3 ? (
+            <PageContainer title={false} ghost={false} header={undefined} breadcrumbRender={false}>
+              qixian
+            </PageContainer>
+          ) : null}
+          {state > 1 && state < 4 ? (
+            <PageContainer title={false} ghost={false} header={undefined} breadcrumbRender={false}>
+              qixian2
+            </PageContainer>
+          ) : null}
+        </ProLayout>
+      );
+    };
+    const html = libraryRender(<Demo />);
+
+    expect(
+      !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'),
+    ).toBeFalsy();
+
+    await act(async () => {
+      (await html.findByText('切 换'))?.click?.();
+    });
+
+    expect(
+      !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      (await html.findByText('切 换'))?.click?.();
+    });
+
+    expect(
+      !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      (await html.findByText('切 换'))?.click?.();
+    });
+
+    expect(
+      !!html.baseElement.querySelector('.ant-pro-layout-content-has-page-container'),
+    ).toBeTruthy();
+
+    await act(async () => {
+      (await html.findByText('切 换'))?.click?.();
+    });
+
+    expect(
+      !!html.baseElement.querySelector('ant-pro-layout-content-has-page-container'),
+    ).toBeFalsy();
+  });
+
   it('💄 pageContainer support breadcrumbRender', async () => {
     const html = mount(
       <PageContainer breadcrumbRender={() => <div>这里是面包屑</div>}>content</PageContainer>,