From 231313258d7781090bbc192fa6ca36278ccc4c78 Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Fri, 26 Jul 2024 11:30:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20fix:=20=E4=BF=AE=E5=A4=8D=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E7=AE=A1=E7=90=86=E7=9A=84table=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/overrides.less                   | 56 +++++++++++++++++++
 react-ui/src/pages/Monitor/Job/index.tsx      | 11 ++--
 react-ui/src/pages/Monitor/JobLog/index.tsx   | 11 ++--
 react-ui/src/pages/System/Config/index.tsx    | 11 ++--
 react-ui/src/pages/System/Dept/index.tsx      | 11 ++--
 react-ui/src/pages/System/Dict/index.tsx      | 11 ++--
 react-ui/src/pages/System/DictData/index.tsx  | 11 ++--
 .../src/pages/System/Logininfor/index.tsx     | 15 +++--
 react-ui/src/pages/System/Menu/index.tsx      | 11 ++--
 react-ui/src/pages/System/Notice/index.tsx    | 11 ++--
 react-ui/src/pages/System/Operlog/index.tsx   | 11 ++--
 react-ui/src/pages/System/Post/index.tsx      | 11 ++--
 react-ui/src/pages/System/Role/authUser.tsx   | 12 ++--
 react-ui/src/pages/System/Role/index.tsx      | 11 ++--
 react-ui/src/pages/System/User/index.tsx      | 15 +++--
 15 files changed, 158 insertions(+), 61 deletions(-)

diff --git a/react-ui/src/overrides.less b/react-ui/src/overrides.less
index a3080072..e20ad0e4 100644
--- a/react-ui/src/overrides.less
+++ b/react-ui/src/overrides.less
@@ -120,6 +120,12 @@
   .ant-select-single {
     height: 46px;
   }
+
+  .ant-input-number {
+    .ant-input-number-input {
+      height: 44px;
+    }
+  }
 }
 
 // Confirm Modal
@@ -187,3 +193,53 @@
 .ant-pro-layout .ant-pro-sider-logo > a > h1 {
   margin-inline-start: 12px;
 }
+
+// PageContainer 里的 ProTable 只滑动内容区域
+.system-menu.ant-pro-page-container {
+  height: 100%;
+  overflow: hidden;
+  .ant-pro-grid-content {
+    height: 100%;
+    .ant-pro-grid-content-children {
+      height: 100%;
+      .ant-pro-layout-watermark-wrapper {
+        height: 100%;
+        .ant-pro-page-container-children-container {
+          height: 100%;
+          padding: 0;
+          .ant-pro-table {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            .ant-pro-card.ant-pro-table-search {
+              flex: none;
+              height: auto;
+            }
+            .ant-pro-card {
+              flex: 1;
+              min-height: 0;
+              .ant-pro-card-body {
+                height: 100%;
+                .ant-table-wrapper {
+                  height: calc(100% - 64px);
+                  .ant-spin-nested-loading {
+                    height: 100%;
+                    .ant-spin-container {
+                      height: 100%;
+                      .ant-table-fixed-header {
+                        height: 100%;
+                        .ant-table-container {
+                          height: 100%;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/react-ui/src/pages/Monitor/Job/index.tsx b/react-ui/src/pages/Monitor/Job/index.tsx
index a160be3e..6bf166d9 100644
--- a/react-ui/src/pages/Monitor/Job/index.tsx
+++ b/react-ui/src/pages/Monitor/Job/index.tsx
@@ -319,8 +319,8 @@ const JobTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.Monitor.Job>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -333,6 +333,9 @@ const JobTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -365,7 +368,7 @@ const JobTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -376,7 +379,7 @@ const JobTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/Monitor/JobLog/index.tsx b/react-ui/src/pages/Monitor/JobLog/index.tsx
index c0d7052d..4c69330a 100644
--- a/react-ui/src/pages/Monitor/JobLog/index.tsx
+++ b/react-ui/src/pages/Monitor/JobLog/index.tsx
@@ -217,8 +217,8 @@ const JobLogTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.Monitor.JobLog>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -231,6 +231,9 @@ const JobLogTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -263,7 +266,7 @@ const JobLogTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -274,7 +277,7 @@ const JobLogTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Config/index.tsx b/react-ui/src/pages/System/Config/index.tsx
index a86937dc..bb671cd2 100644
--- a/react-ui/src/pages/System/Config/index.tsx
+++ b/react-ui/src/pages/System/Config/index.tsx
@@ -258,8 +258,8 @@ const ConfigTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Config>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -272,6 +272,9 @@ const ConfigTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -305,7 +308,7 @@ const ConfigTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -316,7 +319,7 @@ const ConfigTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <DownloadOutlined />
+              <DownloadOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
             <Button
diff --git a/react-ui/src/pages/System/Dept/index.tsx b/react-ui/src/pages/System/Dept/index.tsx
index 29b30aa9..df8a27c5 100644
--- a/react-ui/src/pages/System/Dept/index.tsx
+++ b/react-ui/src/pages/System/Dept/index.tsx
@@ -234,8 +234,8 @@ const DeptTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Dept>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -248,6 +248,9 @@ const DeptTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -287,7 +290,7 @@ const DeptTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -298,7 +301,7 @@ const DeptTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Dict/index.tsx b/react-ui/src/pages/System/Dict/index.tsx
index 0332ed88..29d64386 100644
--- a/react-ui/src/pages/System/Dict/index.tsx
+++ b/react-ui/src/pages/System/Dict/index.tsx
@@ -259,8 +259,8 @@ const DictTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.DictType>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -273,6 +273,9 @@ const DictTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -305,7 +308,7 @@ const DictTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -316,7 +319,7 @@ const DictTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/DictData/index.tsx b/react-ui/src/pages/System/DictData/index.tsx
index a4ef118a..28005cc8 100644
--- a/react-ui/src/pages/System/DictData/index.tsx
+++ b/react-ui/src/pages/System/DictData/index.tsx
@@ -303,8 +303,8 @@ const DictDataTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.DictData>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -317,6 +317,9 @@ const DictDataTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -353,7 +356,7 @@ const DictDataTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -364,7 +367,7 @@ const DictDataTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Logininfor/index.tsx b/react-ui/src/pages/System/Logininfor/index.tsx
index ffcffd01..7868ee86 100644
--- a/react-ui/src/pages/System/Logininfor/index.tsx
+++ b/react-ui/src/pages/System/Logininfor/index.tsx
@@ -180,8 +180,8 @@ const LogininforTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.Monitor.Logininfor>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -194,6 +194,9 @@ const LogininforTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               key="remove"
@@ -215,7 +218,7 @@ const LogininforTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -239,7 +242,7 @@ const LogininforTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.cleanAll" defaultMessage="清空" />
             </Button>,
             <Button
@@ -262,7 +265,7 @@ const LogininforTableList: React.FC = () => {
                 });
               }}
             >
-              <UnlockOutlined />
+              <UnlockOutlined />{' '}
               <FormattedMessage id="monitor.logininfor.unlock" defaultMessage="解锁" />
             </Button>,
             <Button
@@ -273,7 +276,7 @@ const LogininforTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Menu/index.tsx b/react-ui/src/pages/System/Menu/index.tsx
index 195f459c..7f58fad0 100644
--- a/react-ui/src/pages/System/Menu/index.tsx
+++ b/react-ui/src/pages/System/Menu/index.tsx
@@ -221,8 +221,8 @@ const MenuTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Menu>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -234,6 +234,9 @@ const MenuTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -266,7 +269,7 @@ const MenuTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -277,7 +280,7 @@ const MenuTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Notice/index.tsx b/react-ui/src/pages/System/Notice/index.tsx
index e21a7615..12211453 100644
--- a/react-ui/src/pages/System/Notice/index.tsx
+++ b/react-ui/src/pages/System/Notice/index.tsx
@@ -259,8 +259,8 @@ const NoticeTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Notice>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -273,6 +273,9 @@ const NoticeTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -305,7 +308,7 @@ const NoticeTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -316,7 +319,7 @@ const NoticeTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Operlog/index.tsx b/react-ui/src/pages/System/Operlog/index.tsx
index 5c94c9c2..7c65bccd 100644
--- a/react-ui/src/pages/System/Operlog/index.tsx
+++ b/react-ui/src/pages/System/Operlog/index.tsx
@@ -227,8 +227,8 @@ const OperlogTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.Monitor.Operlog>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -241,6 +241,9 @@ const OperlogTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -273,7 +276,7 @@ const OperlogTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -284,7 +287,7 @@ const OperlogTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Post/index.tsx b/react-ui/src/pages/System/Post/index.tsx
index d0be93a3..e86693f3 100644
--- a/react-ui/src/pages/System/Post/index.tsx
+++ b/react-ui/src/pages/System/Post/index.tsx
@@ -225,8 +225,8 @@ const PostTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Post>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -239,6 +239,9 @@ const PostTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -271,7 +274,7 @@ const PostTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -282,7 +285,7 @@ const PostTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/Role/authUser.tsx b/react-ui/src/pages/System/Role/authUser.tsx
index 5d702c87..2ba3f3a1 100644
--- a/react-ui/src/pages/System/Role/authUser.tsx
+++ b/react-ui/src/pages/System/Role/authUser.tsx
@@ -163,8 +163,8 @@ const AuthUserTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
-      <div style={{ width: '100%', float: 'right' }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.User>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -176,6 +176,9 @@ const AuthUserTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -208,7 +211,7 @@ const AuthUserTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="system.role.auth.cancelAll" defaultMessage="批量取消授权" />
             </Button>,
             <Button
@@ -218,8 +221,7 @@ const AuthUserTableList: React.FC = () => {
                 history.back();
               }}
             >
-              <RollbackOutlined />
-              <FormattedMessage id="pages.goback" defaultMessage="返回" />
+              <RollbackOutlined /> <FormattedMessage id="pages.goback" defaultMessage="返回" />
             </Button>,
           ]}
           request={(params) =>
diff --git a/react-ui/src/pages/System/Role/index.tsx b/react-ui/src/pages/System/Role/index.tsx
index 2d54af8c..b616c133 100644
--- a/react-ui/src/pages/System/Role/index.tsx
+++ b/react-ui/src/pages/System/Role/index.tsx
@@ -360,9 +360,9 @@ const RoleTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
       {contextHolder}
-      <div style={{ width: '100%', float: 'right' }}>
+      <div style={{ width: '100%', height: '100%' }}>
         <ProTable<API.System.Role>
           headerTitle={intl.formatMessage({
             id: 'pages.searchTable.title',
@@ -375,6 +375,9 @@ const RoleTableList: React.FC = () => {
           search={{
             labelWidth: 120,
           }}
+          scroll={{ y: 'calc(100% - 55px)' }}
+          tableAlertRender={false}
+          tableAlertOptionRender={false}
           toolBarRender={() => [
             <Button
               type="primary"
@@ -416,7 +419,7 @@ const RoleTableList: React.FC = () => {
                 });
               }}
             >
-              <DeleteOutlined />
+              <DeleteOutlined />{' '}
               <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
             </Button>,
             <Button
@@ -427,7 +430,7 @@ const RoleTableList: React.FC = () => {
                 handleExport();
               }}
             >
-              <PlusOutlined />
+              <PlusOutlined />{' '}
               <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
             </Button>,
           ]}
diff --git a/react-ui/src/pages/System/User/index.tsx b/react-ui/src/pages/System/User/index.tsx
index 1135c17f..73cd0984 100644
--- a/react-ui/src/pages/System/User/index.tsx
+++ b/react-ui/src/pages/System/User/index.tsx
@@ -365,10 +365,10 @@ const UserTableList: React.FC = () => {
   ];
 
   return (
-    <PageContainer header={{ breadcrumb: {} }}>
+    <PageContainer header={{ breadcrumb: {}, title: '' }} className="system-menu">
       {contextHolder}
-      <Row gutter={[16, 24]}>
-        <Col lg={6} md={24}>
+      <Row gutter={[16, 24]} style={{ height: '100%' }}>
+        <Col lg={6} md={24} style={{ height: '100%' }}>
           <Card>
             <DeptTree
               onSelect={async (value: any) => {
@@ -380,7 +380,7 @@ const UserTableList: React.FC = () => {
             />
           </Card>
         </Col>
-        <Col lg={18} md={24}>
+        <Col lg={18} md={24} style={{ height: '100%' }}>
           <ProTable<API.System.User>
             headerTitle={intl.formatMessage({
               id: 'pages.searchTable.title',
@@ -393,6 +393,9 @@ const UserTableList: React.FC = () => {
             search={{
               labelWidth: 120,
             }}
+            scroll={{ y: 'calc(100% - 55px)' }}
+            tableAlertRender={false}
+            tableAlertOptionRender={false}
             toolBarRender={() => [
               <Button
                 type="primary"
@@ -452,7 +455,7 @@ const UserTableList: React.FC = () => {
                   });
                 }}
               >
-                <DeleteOutlined />
+                <DeleteOutlined />{' '}
                 <FormattedMessage id="pages.searchTable.delete" defaultMessage="删除" />
               </Button>,
               <Button
@@ -463,7 +466,7 @@ const UserTableList: React.FC = () => {
                   handleExport();
                 }}
               >
-                <PlusOutlined />
+                <PlusOutlined />{' '}
                 <FormattedMessage id="pages.searchTable.export" defaultMessage="导出" />
               </Button>,
             ]}