feat: fix: 修复系统管理的table不能滚动

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%;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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>,
           ]}

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>,
           ]}

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

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>,
           ]}

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>,
           ]}

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>,
           ]}

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>,
           ]}

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>,
           ]}

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>,
           ]}

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>,
           ]}

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>,
           ]}

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) =>

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>,
           ]}

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>,
             ]}