refactor: page layout

src/pages/resources/components/gpus.tsx

@@ -2,8 +2,8 @@ import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import useTableFetch from '@/hooks/use-table-fetch';
 import NoResult from '@/pages/_components/no-result';
+import PageBox from '@/pages/_components/page-box';
 import { queryClusterList } from '@/pages/cluster-management/apis';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
 import { ConfigProvider, Table } from 'antd';
 import React, { useEffect, useState } from 'react';
@@ -76,17 +76,7 @@ const GPUList: React.FC = () => {
 
   return (
     <>
-      <PageContainer
-        ghost
-        header={{
-          title: 'GPUs',
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
+      <PageBox>
         <FilterBar
           marginBottom={22}
           marginTop={30}
@@ -116,7 +106,7 @@ const GPUList: React.FC = () => {
             }}
           ></Table>
         </ConfigProvider>
-      </PageContainer>
+      </PageBox>
     </>
   );
 };

src/pages/resources/components/model-files.tsx

@@ -7,6 +7,7 @@ import useAppUtils from '@/hooks/use-app-utils';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useTableFetch from '@/hooks/use-table-fetch';
 import NoResult from '@/pages/_components/no-result';
+import PageBox from '@/pages/_components/page-box';
 import { createModel } from '@/pages/llmodels/apis';
 import DeployModal from '@/pages/llmodels/components/deploy-modal';
 import { modelSourceMap } from '@/pages/llmodels/config';
@@ -20,7 +21,6 @@ import DownloadModal from '@/pages/llmodels/download';
 import useCheckBackend from '@/pages/llmodels/hooks/use-check-backend';
 import { useGenerateWorkerOptions } from '@/pages/llmodels/hooks/use-form-initial-values';
 import useRecognizeAudio from '@/pages/llmodels/hooks/use-recognize-audio';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { ConfigProvider, Table, message } from 'antd';
@@ -290,17 +290,7 @@ const ModelFiles = () => {
 
   return (
     <>
-      <PageContainer
-        ghost
-        header={{
-          title: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
+      <PageBox>
         <FilterBar
           marginBottom={22}
           marginTop={30}
@@ -365,7 +355,7 @@ const ModelFiles = () => {
           isGGUF={openDeployModal.isGGUF}
           clusterList={clusterList}
         ></DeployModal>
-      </PageContainer>
+      </PageBox>
     </>
   );
 };

src/pages/resources/components/workers.tsx

@@ -2,8 +2,8 @@ import DeleteModal from '@/components/delete-modal';
 import IconFont from '@/components/icon-font';
 import { FilterBar } from '@/components/page-tools';
 import useTableFetch from '@/hooks/use-table-fetch';
+import PageBox from '@/pages/_components/page-box';
 import { queryClusterList } from '@/pages/cluster-management/apis';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, ConfigProvider, Table, message } from 'antd';
@@ -227,7 +227,7 @@ const Workers: React.FC = () => {
 
   return (
     <>
-      <PageContainer
+      <PageBox
         ghost
         footer={[
           <TerminalTabs
@@ -239,14 +239,6 @@ const Workers: React.FC = () => {
             onClose={handleTerminalClose}
           />
         ]}
-        header={{
-          title: intl.formatMessage({ id: 'resources.nodes' }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
       >
         <FilterBar
           showSelect={true}
@@ -300,7 +292,7 @@ const Workers: React.FC = () => {
             setWorkerDetailStatus({ currentData: null, open: false })
           }
         />
-      </PageContainer>
+      </PageBox>
     </>
   );
 };