refactor: page layout

src/pages/llmodels/catalog.tsx

@@ -7,7 +7,6 @@ import useBodyScroll from '@/hooks/use-body-scroll';
 import { ScrollerContext } from '@/pages/_components/infinite-scroller/use-scroller-context';
 import { IS_FIRST_LOGIN, writeState } from '@/utils/localstore/index';
 import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Input, Space, message } from 'antd';
@@ -16,6 +15,7 @@ import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import NoResult from '../_components/no-result';
+import PageBox from '../_components/page-box';
 import { createModel, queryCatalogList } from './apis';
 import CatalogList from './components/catalog-list';
 import DelopyBuiltInModal from './components/deploy-builtin-modal';
@@ -219,19 +219,10 @@ const Catalog: React.FC = () => {
   }, [fetchData]);
 
   return (
-    <PageContainer
-      ghost
-      header={{
-        title: intl.formatMessage({ id: 'menu.modelCatalog' }),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
-      }}
-      extra={[]}
-    >
+    <PageBox>
       <PageTools
         marginBottom={22}
+        marginTop={0}
         left={
           <Space>
             <Input
@@ -311,7 +302,7 @@ const Catalog: React.FC = () => {
         onCancel={handleDeployModalCancel}
         onOk={handleCreateModel}
       ></DelopyBuiltInModal>
-    </PageContainer>
+    </PageBox>
   );
 };
 

src/pages/llmodels/components/table-list.tsx

@@ -14,10 +14,10 @@ import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
 import NoResult from '@/pages/_components/no-result';
+import PageBox from '@/pages/_components/page-box';
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { handleBatchRequest } from '@/utils';
 import { DownOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, Input, Space, message } from 'antd';
@@ -596,20 +596,10 @@ const Models: React.FC<ModelsProps> = ({
 
   return (
     <>
-      <PageContainer
-        className="models-page-container"
-        ghost
-        header={{
-          title: intl.formatMessage({ id: 'menu.models.deployment' }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
+      <PageBox>
         <PageTools
           marginBottom={22}
+          marginTop={0}
           left={
             <Space>
               <Input
@@ -742,7 +732,7 @@ const Models: React.FC<ModelsProps> = ({
             onChange: handlePageChange
           }}
         ></SealTable>
-      </PageContainer>
+      </PageBox>
       <UpdateModelModal
         open={openAddModal}
         action={PageAction.EDIT}

src/pages/llmodels/user-models.tsx

@@ -5,13 +5,13 @@ import CardList from '@/components/templates/card-list';
 import CardSkeleton from '@/components/templates/card-skelton';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { SyncOutlined } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
 import { Button, Input, Space } from 'antd';
 import React, { useCallback, useMemo } from 'react';
 import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
 import NoResult from '../_components/no-result';
+import PageBox from '../_components/page-box';
 import { MY_MODELS_API, queryMyModels } from './apis';
 import ModelItem from './components/model-item';
 import {
@@ -172,7 +172,7 @@ const UserModels: React.FC = () => {
   }, [dataSource.dataList, status]);
 
   return (
-    <PageContainer
+    <PageBox
       ghost
       header={{
         title: intl.formatMessage({ id: 'menu.models.userModels' }),
@@ -261,7 +261,7 @@ const UserModels: React.FC = () => {
           subTitle={intl.formatMessage({ id: 'noresult.mymodels.subTitle' })}
         ></NoResult>
       </ScrollerContext.Provider>
-    </PageContainer>
+    </PageBox>
   );
 };