refactor: ui/ux

src/pages/_components/page-box.tsx

@@ -1,44 +1,67 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import {
   PageContainer,
+  RouteContext,
   type PageContainerProps
 } from '@ant-design/pro-components';
-import styled from 'styled-components';
+import classNames from 'classnames';
+import { useContext, useEffect, useRef } from 'react';
+import pageBoxCss from './styles/page-box.less';
 
-const paddingInlinePageContainerContent = 32;
+const paddingInlinePageContainerContent = 24;
 
-const StyledPageContainer = styled(PageContainer)`
-  .ant-affix {
-    top: 0 !important;
-    height: auto;
+export const PageContainerInner: React.FC<
+  PageContainerProps & {
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    styles?: {
+      containerWrapper?: React.CSSProperties;
+    };
   }
-  .ant-page-header {
-    padding-block-end: 8px;
-    .ant-page-header-heading {
-      padding-block-start: 0;
+> = ({ children, styles, title, leftContent, rightContent, ...rest }) => {
+  const { initialize: initialize } = useOverlayScroller({
+    defer: false
+  });
+  const pageContext = useContext(RouteContext);
+  const contentWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (contentWrapperRef.current) {
+      const ins = initialize(contentWrapperRef.current);
+      window.__GPUSTACK_BODY_SCROLLER__ = ins;
     }
-  }
-  .ant-pro-page-container-warp-page-header {
-    padding-inline: ${paddingInlinePageContainerContent}px;
-  }
-  .ant-page-header-heading-title {
-    font-size: 16px;
-  }
-`;
+  }, [initialize, contentWrapperRef]);
 
-export const PageContainerInner: React.FC<PageContainerProps> = ({
-  children,
-  ...rest
-}) => {
   return (
-    <StyledPageContainer
-      {...rest}
-      fixedHeader={true}
-      token={{
-        paddingInlinePageContainerContent: paddingInlinePageContainerContent
-      }}
-    >
-      {children}
-    </StyledPageContainer>
+    <div className={pageBoxCss.containerWrapper}>
+      <PageContainer
+        {...rest}
+        fixedHeader={false}
+        title={false}
+        style={{
+          flex: 1
+        }}
+        token={{
+          paddingInlinePageContainerContent: paddingInlinePageContainerContent
+        }}
+      >
+        <div className={pageBoxCss.title}>
+          <div className={pageBoxCss.left}>
+            {leftContent || pageContext.title}
+          </div>
+          {rightContent && (
+            <div className={pageBoxCss.right}>{rightContent}</div>
+          )}
+        </div>
+        <div
+          className={classNames(pageBoxCss.contentWrapper)}
+          style={styles?.containerWrapper}
+          ref={contentWrapperRef}
+        >
+          {children}
+        </div>
+      </PageContainer>
+    </div>
   );
 };
 

src/pages/_components/styles/page-box.less

@@ -0,0 +1,62 @@
+.containerWrapper {
+  :global {
+    .ant-affix {
+      top: 0 !important;
+      height: auto;
+    }
+
+    .ant-page-header {
+      padding-block-end: 8px;
+
+      .ant-page-header-heading {
+        padding-block-start: 0;
+      }
+    }
+
+    .ant-page-header-heading-title {
+      font-size: 16px;
+    }
+
+    .ant-pro-page-container-children-container {
+      height: calc(100vh - 56px);
+      display: flex;
+      flex-direction: column;
+      border: 1px solid rgb(237, 237, 237);
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: var(--ant-color-bg-container);
+      padding: 0;
+    }
+  }
+
+  .contentWrapper {
+    flex: 1;
+    overflow-y: auto;
+    padding-block: var(--layout-content-blockpadding);
+    padding-inline: var(--layout-content-inlinepadding);
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding-inline: var(--layout-content-inlinepadding);
+    font-size: 16px;
+    color: var(--ant-color-text);
+    font-weight: 600;
+    padding-block: 9px 8px;
+    height: 56px;
+    border-bottom: 1px solid var(--ant-color-split);
+
+    .left {
+      display: flex;
+      align-items: center;
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+    }
+  }
+}