From 26674b220f22c3de4a14078de4bbb6edd84582bd Mon Sep 17 00:00:00 2001
From: zhaowei <cp3hnu@gmail.com>
Date: Thu, 4 Sep 2025 11:04:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/app.tsx                             |  8 ++------
 react-ui/src/components/PageContainer/index.less | 14 ++++++++++++++
 react-ui/src/components/PageContainer/index.tsx  | 16 ++++++++++++++++
 react-ui/src/global.less                         |  8 --------
 4 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 react-ui/src/components/PageContainer/index.less
 create mode 100644 react-ui/src/components/PageContainer/index.tsx

diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx
index 25b9fab0..6de3d781 100644
--- a/react-ui/src/app.tsx
+++ b/react-ui/src/app.tsx
@@ -10,6 +10,7 @@ import defaultSettings from '../config/defaultSettings';
 import '../public/fonts/font.css';
 import { getAccessToken } from './access';
 import ErrorBoundary from './components/ErrorBoundary';
+import PageContainer from './components/PageContainer';
 import './dayjsConfig';
 import { removeAllPageCacheState } from './hooks/useCacheState';
 import { globalGetSeverTime } from './hooks/useServerTime';
@@ -87,12 +88,7 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
     childrenRender: (children) => {
       // 增加一个 loading 的状态
       // if (initialState?.loading) return <PageLoading />;
-      return (
-        <div className="kf-page-container">
-          {/* <RightContent></RightContent> */}
-          <div className="kf-page-container__content">{children}</div>
-        </div>
-      );
+      return <PageContainer>{children}</PageContainer>;
     },
     collapsedButtonRender: false,
     collapsed: initialState?.collapsed,
diff --git a/react-ui/src/components/PageContainer/index.less b/react-ui/src/components/PageContainer/index.less
new file mode 100644
index 00000000..6f055f71
--- /dev/null
+++ b/react-ui/src/components/PageContainer/index.less
@@ -0,0 +1,14 @@
+.kf-page-container {
+  height: 100%;
+
+  &__breadcrumb {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    padding-left: 30px;
+  }
+
+  &__content {
+    height: calc(100% - 70px);
+  }
+}
diff --git a/react-ui/src/components/PageContainer/index.tsx b/react-ui/src/components/PageContainer/index.tsx
new file mode 100644
index 00000000..c8a35416
--- /dev/null
+++ b/react-ui/src/components/PageContainer/index.tsx
@@ -0,0 +1,16 @@
+import { ProBreadcrumb } from '@ant-design/pro-components';
+import React from 'react';
+import './index.less';
+
+function PageContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="kf-page-container">
+      <div className="kf-page-container__breadcrumb">
+        <ProBreadcrumb></ProBreadcrumb>
+      </div>
+      <div className="kf-page-container__content">{children}</div>
+    </div>
+  );
+}
+
+export default PageContainer;
diff --git a/react-ui/src/global.less b/react-ui/src/global.less
index 6a8506af..c7b3c868 100644
--- a/react-ui/src/global.less
+++ b/react-ui/src/global.less
@@ -137,14 +137,6 @@ ol {
   }
 }
 
-.kf-page-container {
-  height: 100%;
-
-  &__content {
-    height: calc(100% - 55px);
-  }
-}
-
 .kf-menu-collapsed {
   position: fixed;
   top: 0;