style: use drawer for adding worker

src/pages/cluster-management/components/add-worker/index.tsx

@@ -1,4 +1,5 @@
-import ScrollerModal from '@/components/scroller-modal';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import ColumnWrapper from '@/pages/_components/column-wrapper';
 import useAddWorkerMessage from '@/pages/cluster-management/hooks/use-add-worker-message';
 import { useIntl } from '@umijs/max';
 import { Alert } from 'antd';
@@ -118,46 +119,55 @@ const AddWorker: React.FC<AddWorkerProps> = (props) => {
   };
 
   return (
-    <ScrollerModal
+    <GSDrawer
       title={title}
       open={open}
-      centered={true}
-      onCancel={onCancel}
+      onClose={onCancel}
       destroyOnHidden={true}
-      closeIcon={true}
+      closeIcon={false}
       maskClosable={false}
       keyboard={false}
-      width={865}
-      style={{}}
-      maxContentHeight={'max(calc(100vh - 200px), 600px)'}
-      footer={
-        <Footer>
-          {addedCount > 0 && (
-            <Alert
-              style={{
-                textAlign: 'left',
-                borderColor: 'var(--ant-color-success)',
-                width: '100%'
-              }}
-              type="success"
-              title={renderMessage(addedCount)}
-              closable
-            />
-          )}
-        </Footer>
-      }
+      styles={{
+        body: {
+          paddingBlock: 0
+        },
+        wrapper: { width: 865 }
+      }}
+      footer={false}
     >
-      <AddWorkerStep
-        onCancel={onCancel}
-        actionSource={'modal'}
-        stepList={stepList}
-        provider={provider}
-        clusterList={clusterList}
-        clusterLoading={clusterLoading}
-        onClusterChange={handleOnClusterChange}
-        registrationInfo={registrationInfo}
-      ></AddWorkerStep>
-    </ScrollerModal>
+      <ColumnWrapper
+        styles={{
+          container: { paddingBlock: 16 }
+        }}
+        footer={
+          <Footer style={{ paddingInline: 24, paddingBottom: 24 }}>
+            {addedCount > 0 && (
+              <Alert
+                style={{
+                  textAlign: 'left',
+                  borderColor: 'var(--ant-color-success)',
+                  width: '100%'
+                }}
+                type="success"
+                title={renderMessage(addedCount)}
+                closable
+              />
+            )}
+          </Footer>
+        }
+      >
+        <AddWorkerStep
+          onCancel={onCancel}
+          actionSource={'modal'}
+          stepList={stepList}
+          provider={provider}
+          clusterList={clusterList}
+          clusterLoading={clusterLoading}
+          onClusterChange={handleOnClusterChange}
+          registrationInfo={registrationInfo}
+        ></AddWorkerStep>
+      </ColumnWrapper>
+    </GSDrawer>
   );
 };
 

src/pages/cluster-management/components/success-result.tsx

@@ -1,4 +1,5 @@
 import { CheckCircleFilled } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
 import { Button, Flex, Result } from 'antd';
 import React from 'react';
 import { ProviderValueMap } from '../config';
@@ -8,14 +9,19 @@ const SuccessResult: React.FC<{
   onSkip: () => void;
   onAddWorker: () => void;
 }> = ({ provider, onSkip, onAddWorker }) => {
-  const k8sTips =
-    'Next, register this Kubernetes cluster. You can also skip this step and register it later from the cluster list.';
+  const intl = useIntl();
+
+  const k8sTips = (
+    <div className="flex-column">
+      <span>{intl.formatMessage({ id: 'clusters.create.k8sTips1' })}</span>
+      <span>{intl.formatMessage({ id: 'clusters.create.k8sTips2' })}</span>
+    </div>
+  );
+
   const dockerTips = (
     <div className="flex-column">
-      <span>Next, add worker to this cluster.</span>
-      <span>
-        You can also skip this step and add them later from the cluster list.
-      </span>
+      <span>{intl.formatMessage({ id: 'clusters.create.dockerTips1' })}</span>
+      <span>{intl.formatMessage({ id: 'clusters.create.dockerTips2' })}</span>
     </div>
   );
 
@@ -33,17 +39,17 @@ const SuccessResult: React.FC<{
         />
       }
       status="success"
-      title="Cluster Created Successfully!"
+      title={intl.formatMessage({ id: 'clusters.create.complete.tips' })}
       subTitle={provider === ProviderValueMap.Kubernetes ? k8sTips : dockerTips}
       extra={[
         <Flex gap={16} justify="center" key="buttons">
-          <Button key="buy" onClick={onSkip}>
-            Skip for now
+          <Button key="skip" onClick={onSkip}>
+            {intl.formatMessage({ id: 'clusters.create.skipfornow' })}
           </Button>
-          <Button type="primary" key="console" onClick={onAddWorker}>
+          <Button type="primary" key="add" onClick={onAddWorker}>
             {provider === ProviderValueMap.Kubernetes
-              ? 'Register Cluster'
-              : 'Add Worker'}
+              ? intl.formatMessage({ id: 'clusters.button.register' })
+              : intl.formatMessage({ id: 'resources.button.create' })}
           </Button>
         </Flex>
       ]}

src/pages/cluster-management/components/support-gpus.tsx

@@ -110,7 +110,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       locale: false,
       notes: AddWorkerDockerNotes[GPUDriverMap.ASCEND],
       link: 'https://docs.gpustack.ai/latest/installation/requirements/#ascend-npu',
-      icon: <ProviderImage src={ascendLogo} height={32} />
+      icon: <ProviderImage src={ascendLogo} height={30} />
     },
     {
       label: intl.formatMessage({ id: 'vendor.hygon' }),
@@ -121,7 +121,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       locale: false,
       notes: AddWorkerDockerNotes[GPUDriverMap.HYGON],
       link: 'https://docs.gpustack.ai/latest/installation/requirements/#hygon-dcu',
-      icon: <ProviderImage src={hyponPNG} height={20} />
+      icon: <ProviderImage src={hyponPNG} height={18} />
     },
     {
       label: intl.formatMessage({ id: 'vendor.moorthreads' }),
@@ -133,7 +133,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       locale: false,
       notes: AddWorkerDockerNotes[GPUDriverMap.MOORE_THREADS],
       link: 'https://docs.gpustack.ai/latest/installation/requirements/#mthreads-gpu',
-      icon: <ProviderImage src={mooreLogo} height={26} />
+      icon: <ProviderImage src={mooreLogo} height={24} />
     },
     {
       label: intl.formatMessage({ id: 'vendor.iluvatar' }),
@@ -145,7 +145,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       locale: false,
       notes: AddWorkerDockerNotes[GPUDriverMap.ILUVATAR],
       link: 'https://docs.gpustack.ai/latest/installation/requirements/#iluvatar-gpu',
-      icon: <ProviderImage src={iluvatarWEBP} height={26} />
+      icon: <ProviderImage src={iluvatarWEBP} height={24} />
     },
     {
       label: intl.formatMessage({ id: 'vendor.cambricon' }),
@@ -157,7 +157,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       locale: false,
       notes: AddWorkerDockerNotes[GPUDriverMap.CAMBRICON],
       link: 'https://docs.gpustack.ai/latest/installation/requirements/#cambricon-mlu',
-      icon: <ProviderImage src={CambriconPNG} height={26} />
+      icon: <ProviderImage src={CambriconPNG} height={24} />
     },
     {
       label: intl.formatMessage({ id: 'vendor.metax' }),