chore: use drawer for creation

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

@@ -1,6 +1,5 @@
-import ModalFooter from '@/components/modal-footer';
-import ScrollerModal from '@/components/scroller-modal/index';
 import { PageActionType } from '@/config/types';
+import FormDrawer from '@/pages/_components/form-drawer';
 import React, { useRef } from 'react';
 import { ProviderType } from '../config';
 import {
@@ -48,19 +47,12 @@ const AddCluster: React.FC<AddModalProps> = ({
   };
 
   return (
-    <ScrollerModal
+    <FormDrawer
       title={title}
       open={open}
       onCancel={handleCancel}
-      destroyOnHidden={true}
-      closeIcon={true}
-      maskClosable={false}
-      keyboard={false}
-      centered={true}
-      width={680}
-      footer={
-        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
-      }
+      onSubmit={handleSubmit}
+      width={700}
     >
       <ClusterForm
         ref={form}
@@ -70,7 +62,7 @@ const AddCluster: React.FC<AddModalProps> = ({
         currentData={currentData}
         onFinish={handleOk}
       />
-    </ScrollerModal>
+    </FormDrawer>
   );
 };
 

src/pages/cluster-management/components/add-credential.tsx

@@ -1,9 +1,8 @@
-import ModalFooter from '@/components/modal-footer';
-import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
+import FormDrawer from '@/pages/_components/form-drawer';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
@@ -66,19 +65,11 @@ const AddModal: React.FC<AddModalProps> = ({
   }, [currentData]);
 
   return (
-    <ScrollerModal
+    <FormDrawer
       title={title}
       open={open}
-      centered={true}
-      onOk={handleSumit}
-      destroyOnHidden={true}
-      closeIcon={false}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      footer={
-        <ModalFooter onOk={handleSumit} onCancel={handleCancel}></ModalFooter>
-      }
+      onSubmit={handleSumit}
+      onCancel={handleCancel}
     >
       <Form form={form} onFinish={handleOk} preserve={false}>
         <Form.Item<FormData>
@@ -140,7 +131,7 @@ const AddModal: React.FC<AddModalProps> = ({
           ></SealInput.TextArea>
         </Form.Item>
       </Form>
-    </ScrollerModal>
+    </FormDrawer>
   );
 };
 

src/pages/cluster-management/components/add-pool.tsx

@@ -1,6 +1,5 @@
-import ModalFooter from '@/components/modal-footer';
-import ScrollerModal from '@/components/scroller-modal';
 import { PageActionType } from '@/config/types';
+import FormDrawer from '@/pages/_components/form-drawer';
 import React, { useEffect, useRef } from 'react';
 import { ProviderType } from '../config';
 import {
@@ -61,20 +60,11 @@ const AddPool: React.FC<AddModalProps> = ({
   }, [clusterData, open]);
 
   return (
-    <ScrollerModal
+    <FormDrawer
       title={title}
       open={open}
       onCancel={handleCancel}
-      destroyOnHidden={true}
-      closeIcon={true}
-      centered={true}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
-      footer={
-        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
-      }
+      onSubmit={handleSubmit}
     >
       <PoolForm
         ref={formRef}
@@ -83,7 +73,7 @@ const AddPool: React.FC<AddModalProps> = ({
         currentData={currentData}
         onFinish={handleOnFinish}
       ></PoolForm>
-    </ScrollerModal>
+    </FormDrawer>
   );
 };
 

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

@@ -6,6 +6,7 @@ import metaxLogo from '@/assets/logo/metax.png';
 import mooreLogo from '@/assets/logo/moore-logo.png';
 import nvidiaLogo from '@/assets/logo/nvidia.png';
 import IconFont from '@/components/icon-font';
+import useUserSettings from '@/hooks/use-user-settings';
 import {
   AddWorkerDockerNotes,
   GPUDriverMap
@@ -46,6 +47,17 @@ const Box = styled.div`
       background-color: var(--ant-blue-1);
     }
   }
+  &.dark-theme {
+    .template-card-wrapper {
+      background-color: rgba(255, 255, 255, 0.05);
+      &:hover {
+        background-color: var(--ant-color-bg-solid);
+      }
+      &.active {
+        background-color: var(--ant-color-bg-solid);
+      }
+    }
+  }
 `;
 
 const ProviderImage = ({ src, height }: { src: string; height?: number }) => {
@@ -72,6 +84,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
   current
 }) => {
   const intl = useIntl();
+  const { userSettings } = useUserSettings();
 
   const supportedHardPlatforms = [
     {
@@ -97,7 +110,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
       icon: (
         <IconFont
           type="icon-amd-logo"
-          style={{ fontSize: 64, color: 'var(--ant-color-text)' }}
+          style={{ fontSize: 64, color: '#000' }}
         />
       )
     },
@@ -174,7 +187,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
   ];
 
   return (
-    <Box>
+    <Box className={userSettings?.theme === 'realDark' ? 'dark-theme' : ''}>
       <ProviderCatalog
         onSelect={onSelect}
         height={60}