refactor: page layout

src/pages/_components/page-box.tsx

@@ -0,0 +1,49 @@
+import {
+  PageContainer,
+  type PageContainerProps
+} from '@ant-design/pro-components';
+import styled from 'styled-components';
+
+const paddingInlinePageContainerContent = 32;
+
+const StyledPageContainer = styled(PageContainer)`
+  .ant-affix {
+    top: 0 !important;
+    height: auto;
+  }
+  .ant-page-header {
+    padding-block-end: 8px;
+    .ant-page-header-heading {
+      padding-block-start: 0;
+    }
+  }
+  .ant-pro-page-container-warp-page-header {
+    padding-inline: ${paddingInlinePageContainerContent}px;
+  }
+  .ant-page-header-heading-title {
+    font-size: 16px;
+  }
+`;
+
+export const PageContainerInner: React.FC<PageContainerProps> = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledPageContainer
+      {...rest}
+      fixedHeader
+      token={{
+        paddingInlinePageContainerContent: paddingInlinePageContainerContent
+      }}
+    >
+      {children}
+    </StyledPageContainer>
+  );
+};
+
+const PageBox: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+export default PageBox;

src/pages/_components/page-breadcrumb/index.tsx

@@ -0,0 +1,27 @@
+import IconFont from '@/components/icon-font';
+import { Breadcrumb, type BreadcrumbProps } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledBreadcrumb = styled(Breadcrumb)`
+  .ant-breadcrumb-link {
+    font-size: 16px;
+    font-weight: 500;
+    a {
+      background: unset;
+    }
+  }
+  .ant-breadcrumb-separator {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const App: React.FC<BreadcrumbProps> = ({ items }) => (
+  <StyledBreadcrumb
+    separator={<IconFont type="icon-down2" rotate={-90} />}
+    items={items}
+  />
+);
+
+export default App;