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>
   );
 };