chore: use drawer for creation

src/layouts/index.tsx

@@ -322,12 +322,12 @@ export default (props: any) => {
       }}
       modal={{
         mask: {
-          blur: true
+          blur: false
         }
       }}
       drawer={{
         mask: {
-          blur: true
+          blur: false
         }
       }}
     >

src/pages/_components/form-drawer.tsx

@@ -0,0 +1,59 @@
+import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
+import ColumnWrapper from '@/pages/_components/column-wrapper';
+
+const ModalFooterStyle = {
+  padding: '16px 24px 8px',
+  display: 'flex',
+  justifyContent: 'flex-end'
+};
+
+type AddModalProps = {
+  title: string;
+  open: boolean;
+  onCancel: () => void;
+  children?: React.ReactNode;
+  onSubmit: () => void;
+  width?: number;
+};
+const FormDrawer: React.FC<AddModalProps> = ({
+  title,
+  open,
+  onCancel,
+  onSubmit,
+  children,
+  width = 600
+}) => {
+  return (
+    <GSDrawer
+      title={title}
+      open={open}
+      onClose={onCancel}
+      destroyOnHidden={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      styles={{
+        wrapper: { width }
+      }}
+      footer={false}
+    >
+      <ColumnWrapper
+        styles={{
+          container: { paddingBlock: 0 }
+        }}
+        footer={
+          <ModalFooter
+            onOk={onSubmit}
+            onCancel={onCancel}
+            style={ModalFooterStyle}
+          ></ModalFooter>
+        }
+      >
+        {children}
+      </ColumnWrapper>
+    </GSDrawer>
+  );
+};
+
+export default FormDrawer;

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

@@ -38,8 +38,17 @@ const Content = styled.div`
   width: 100%;
 `;
 
+const StepWrapper = styled.div`
+  position: sticky;
+  top: 0;
+  background: var(--ant-color-bg-elevated);
+  z-index: 10;
+  padding: 16px 24px;
+`;
+
 const MainWrapper = styled.div`
   display: flex;
+  flex-direction: column;
   height: 100%;
 `;
 
@@ -308,7 +317,15 @@ const ClusterCreate: React.FC<{
 
   return (
     <MainWrapper>
+      {!isAddWorkerStep && (
+        <StepWrapper>
+          <ClusterSteps steps={steps} currentStep={currentStep}></ClusterSteps>
+        </StepWrapper>
+      )}
       <ColumnWrapper
+        maxHeight={
+          isAddWorkerStep ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)'
+        }
         styles={{
           container: { paddingTop: 16, paddingBottom: 16 }
         }}
@@ -324,14 +341,6 @@ const ClusterCreate: React.FC<{
           />
         }
       >
-        {!isAddWorkerStep && (
-          <div style={{ marginBottom: 32 }}>
-            <ClusterSteps
-              steps={steps}
-              currentStep={currentStep}
-            ></ClusterSteps>
-          </div>
-        )}
         <div style={{ flex: 1 }}>
           {currentStep === startStep && (
             <ProviderCatalog

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}
+      onSubmit={handleSubmit}
-      closeIcon={true}
+      width={700}
-      maskClosable={false}
-      keyboard={false}
-      centered={true}
-      width={680}
-      footer={
-        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
-      }
     >
       <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}
+      onSubmit={handleSumit}
-      onOk={handleSumit}
+      onCancel={handleCancel}
-      destroyOnHidden={true}
-      closeIcon={false}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      footer={
-        <ModalFooter onOk={handleSumit} onCancel={handleCancel}></ModalFooter>
-      }
     >
       <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}
+      onSubmit={handleSubmit}
-      closeIcon={true}
-      centered={true}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      maxContentHeight={'max(calc(100vh - 300px), 500px)'}
-      footer={
-        <ModalFooter onOk={handleSubmit} onCancel={onCancel}></ModalFooter>
-      }
     >
       <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}

src/pages/cluster-management/credentials.tsx

@@ -114,10 +114,10 @@ const Credentials: React.FC = () => {
             firstAddWorker: false,
             firstAddCluster: true
           });
+          setIsFromCluster(false);
           navigate(-1);
         }
       }
-      setIsFromCluster(false);
       fetchData();
       setOpenModalStatus({ ...openModalStatus, open: false });
       message.success(intl.formatMessage({ id: 'common.message.success' }));

src/pages/users/components/add-modal.tsx

@@ -1,6 +1,4 @@
 import IconFont from '@/components/icon-font';
-import ModalFooter from '@/components/modal-footer';
-import ScrollerModal from '@/components/scroller-modal';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import SealSwitch from '@/components/seal-form/seal-switch';
@@ -9,6 +7,7 @@ import { PageActionType } from '@/config/types';
 import { useIntl, useModel } from '@umijs/max';
 import { Form, Select } from 'antd';
 import { useEffect } from 'react';
+import FormDrawer from '../../_components/form-drawer';
 import { UserRoles, UserRolesOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
 
@@ -47,7 +46,7 @@ const AddModal: React.FC<AddModalProps> = ({
     }
   };
 
-  const handleSumit = () => {
+  const handleSubmit = () => {
     form.submit();
   };
 
@@ -56,20 +55,11 @@ const AddModal: React.FC<AddModalProps> = ({
   }, [open]);
 
   return (
-    <ScrollerModal
+    <FormDrawer
       title={title}
       open={open}
-      centered={true}
-      onOk={handleSumit}
       onCancel={onCancel}
-      destroyOnHidden={true}
+      onSubmit={handleSubmit}
-      closeIcon={false}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      footer={
-        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
-      }
     >
       <Form name="addUserForm" form={form} onFinish={onOk} preserve={false}>
         <Form.Item<FormData>
@@ -165,7 +155,7 @@ const AddModal: React.FC<AddModalProps> = ({
           ></SealInput.Password>
         </Form.Item>
       </Form>
-    </ScrollerModal>
+    </FormDrawer>
   );
 };