refactor: page layout

src/pages/cluster-management/cluster-create.tsx

@@ -1,10 +1,11 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import { PageContainer } from '@ant-design/pro-components';
+import PageBreadcrumb from '@/pages/_components/page-breadcrumb';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { PageContainerInner } from '../_components/page-box';
 import { createCluster, queryClusterToken, queryCredentialList } from './apis';
 import ClusterSteps from './components/cluster-steps';
 import FooterButtons from './components/footer-buttons';
@@ -25,7 +26,6 @@ const Container = styled.div`
 const Nav = styled.div`
   display: flex;
   align-items: center;
-  height: 72px;
   font-weight: 400;
   font-size: 20px;
   color: var(--ant-color-text-tertiary);
@@ -280,9 +280,18 @@ const ClusterCreate = () => {
     navigate(-1);
   };
 
+  const breadcrumbItems = [
+    {
+      title: <a>{intl.formatMessage({ id: 'clusters.title' })}</a>,
+      onClick: () => navigate(-1)
+    },
+    {
+      title: intl.formatMessage({ id: 'common.button.create' })
+    }
+  ];
+
   return (
-    <PageContainer
-      ghost
+    <PageContainerInner
       footer={[
         <FooterButtons
           key="buttons"
@@ -294,38 +303,14 @@ const ClusterCreate = () => {
         />
       ]}
       header={{
-        title: false,
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
+        title: <PageBreadcrumb items={breadcrumbItems} />
       }}
-      pageHeaderRender={() => (
-        <HeaderContainer>
-          <Nav>
-            <span className="level-1">
-              {intl.formatMessage({ id: 'clusters.title' })}
-            </span>
-            <span
-              style={{
-                marginInline: 20,
-                color: 'var(--ant-color-split)'
-              }}
-            >
-              /
-            </span>
-            <span className="level-2">
-              {intl.formatMessage({ id: 'common.button.create' })}
-            </span>
-          </Nav>
-          <ClusterSteps
-            steps={steps}
-            currentStep={currentStep}
-            onChange={handleStepChange}
-          ></ClusterSteps>
-        </HeaderContainer>
-      )}
     >
+      <ClusterSteps
+        steps={steps}
+        currentStep={currentStep}
+        onChange={handleStepChange}
+      ></ClusterSteps>
       {currentStep === startStep && (
         <ProviderCatalog
           dataList={providerList}
@@ -339,7 +324,7 @@ const ClusterCreate = () => {
       <Container>
         <Content>{renderForms()}</Content>
       </Container>
-    </PageContainer>
+    </PageContainerInner>
   );
 };
 

src/pages/cluster-management/cluster-detail.tsx

@@ -1,30 +1,33 @@
-import { PageContainer } from '@ant-design/pro-components';
-import { useSearchParams } from '@umijs/max';
+import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
+import { PageContainerInner } from '../_components/page-box';
+import PageBreadcrumb from '../_components/page-breadcrumb';
 import ClusterMetrics from './components/cluster-metrics';
 
 const ClusterDetailModal = () => {
+  const navigate = useNavigate();
+  const intl = useIntl();
   const [searchParams] = useSearchParams();
   const provider = searchParams.get('provider');
   const clusterName = searchParams.get('name');
+
+  const breadcrumbItems = [
+    {
+      title: <a>{intl.formatMessage({ id: 'clusters.title' })}</a>,
+      onClick: () => navigate(-1)
+    },
+    {
+      title: clusterName
+    }
+  ];
+
   return (
-    <PageContainer
-      ghost
+    <PageContainerInner
       header={{
-        title: (
-          <span className="flex-center">
-            <span>{clusterName}</span>
-          </span>
-        ),
-        style: {
-          paddingInline: 'var(--layout-content-header-inlinepadding)'
-        },
-        breadcrumb: {}
+        title: <PageBreadcrumb items={breadcrumbItems} />
       }}
-      extra={[]}
     >
       <ClusterMetrics />
-      {/* {provider === ProviderValueMap.DigitalOcean && <WorkerPools />} */}
-    </PageContainer>
+    </PageContainerInner>
   );
 };
 

src/pages/cluster-management/clusters.tsx

@@ -10,13 +10,13 @@ import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableFetch from '@/hooks/use-table-fetch';
 import useWatchList from '@/hooks/use-watch-list';
 import AddWorker from '@/pages/cluster-management/components/add-worker';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, message } from 'antd';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import NoResult from '../_components/no-result';
+import PageBox from '../_components/page-box';
 import {
   CLUSTERS_API,
   createWorkerPool,
@@ -327,19 +327,7 @@ const Clusters: React.FC = () => {
 
   return (
     <>
-      <PageContainer
-        ghost
-        header={{
-          title: intl.formatMessage({
-            id: 'menu.clusterManagement.clusters'
-          }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
+      <PageBox>
         <FilterBar
           showSelect={false}
           showPrimaryButton={true}
@@ -404,7 +392,7 @@ const Clusters: React.FC = () => {
             }}
           ></SealTable>
         </TableContext.Provider>
-      </PageContainer>
+      </PageBox>
       <AddCluster
         provider={openAddModal.provider}
         open={openAddModal.open}

src/pages/cluster-management/components/cluster-metrics.tsx

@@ -53,6 +53,15 @@ interface ClusterDetailProps {
   data: ClusterListItem | null;
 }
 
+const titleConfig = {
+  textStyle: {
+    color: '#000',
+    fontSize: 14,
+    fontWeight: 600
+  },
+  top: -5
+};
+
 const gaugeConfig = {
   radius: '100%',
   progress: {
@@ -140,7 +149,10 @@ const ClusterMetrics = () => {
         <Row gutter={16} style={{ width: '100%' }}>
           <Col span={6}>
             <GaugeChart
-              title="GPU Utilization"
+              title={{
+                text: 'GPU Utilization',
+                ...titleConfig
+              }}
               value={formatValue(detailContent.current.gpu)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
@@ -148,7 +160,10 @@ const ClusterMetrics = () => {
           </Col>
           <Col span={6}>
             <GaugeChart
-              title="CPU Utilization"
+              title={{
+                text: 'CPU Utilization',
+                ...titleConfig
+              }}
               value={formatValue(detailContent.current.cpu)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
@@ -156,7 +171,10 @@ const ClusterMetrics = () => {
           </Col>
           <Col span={6}>
             <GaugeChart
-              title="RAM Utilization"
+              title={{
+                text: 'RAM Utilization',
+                ...titleConfig
+              }}
               value={formatValue(detailContent.current.ram)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}
@@ -164,7 +182,10 @@ const ClusterMetrics = () => {
           </Col>
           <Col span={6}>
             <GaugeChart
-              title="VRAM Utilization"
+              title={{
+                text: 'VRAM Utilization',
+                ...titleConfig
+              }}
               value={formatValue(detailContent.current.vram)}
               height={chartHeight}
               gaugeConfig={gaugeConfig}

src/pages/cluster-management/credentials.tsx

@@ -5,13 +5,13 @@ import { FilterBar } from '@/components/page-tools';
 import { PageAction } from '@/config';
 import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
-import { PageContainer } from '@ant-design/pro-components';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import { Button, ConfigProvider, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 import NoResult from '../_components/no-result';
+import PageBox from '../_components/page-box';
 import {
   createCredential,
   deleteCredential,
@@ -178,26 +178,14 @@ const Credentials: React.FC = () => {
 
   return (
     <>
-      <PageContainer
-        ghost
-        header={{
-          title: intl.formatMessage({
-            id: 'menu.clusterManagement.credentials'
-          }),
-          style: {
-            paddingInline: 'var(--layout-content-header-inlinepadding)'
-          },
-          breadcrumb: {}
-        }}
-        extra={[]}
-      >
+      <PageBox>
         <FilterBar
           actionItems={addActions}
           actionType="dropdown"
           showSelect={false}
           showPrimaryButton={true}
           marginBottom={22}
-          marginTop={30}
+          marginTop={0}
           buttonText={intl.formatMessage({
             id: 'clusters.button.addCredential'
           })}
@@ -228,7 +216,7 @@ const Credentials: React.FC = () => {
             }}
           ></Table>
         </ConfigProvider>
-      </PageContainer>
+      </PageBox>
       <AddModal
         provider={openModalStatus.provider}
         open={openModalStatus.open}