style: update model modal type

src/pages/llmodels/components/update-modal.tsx

@@ -1,7 +1,8 @@
 import ModalFooter from '@/components/modal-footer';
+import GSDrawer from '@/components/scroller-modal/gs-drawer';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
-import { Button, Modal } from 'antd';
+import { Button } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
 import ColumnWrapper from '../../_components/column-wrapper';
@@ -34,6 +35,12 @@ type AddModalProps = {
   onCancel: () => void;
 };
 
+const ModalFooterStyle = {
+  padding: '16px 24px',
+  display: 'flex',
+  justifyContent: 'flex-end'
+};
+
 const UpdateModal: React.FC<AddModalProps> = (props) => {
   const {
     title,
@@ -249,57 +256,34 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
   }, [open, formData]);
 
   return (
-    <Modal
+    <GSDrawer
       title={title}
       open={open}
-      centered={true}
-      onOk={handleSumit}
-      onCancel={handleOnClose}
+      onClose={handleOnClose}
       destroyOnHidden={true}
       closeIcon={true}
       maskClosable={false}
       keyboard={false}
       width={600}
       styles={{
-        content: {
-          padding: '0 0 16px 0'
-        },
-        header: {
-          padding: 'var(--ant-modal-content-padding)',
-          paddingBottom: '0'
-        },
         body: {
-          padding: '0'
+          height: 'calc(100vh - 57px)',
+          padding: '16px 0',
+          overflowX: 'hidden'
         },
-        footer: {
-          padding: '16px 24px',
-          margin: '0'
+        content: {
+          borderRadius: '6px 0 0 6px'
         }
       }}
-      footer={
-        <>
-          <ModalFooter
-            onCancel={onCancel}
-            onOk={handleSumit}
-            showOkBtn={!showExtraButton}
-            extra={
-              showExtraButton && (
-                <Button type="primary" onClick={handleSubmitAnyway}>
-                  {intl.formatMessage({
-                    id: 'models.form.submit.anyway'
-                  })}
-                </Button>
-              )
-            }
-          ></ModalFooter>
-        </>
-      }
+      footer={false}
     >
       <ColumnWrapper
-        maxHeight={550}
-        paddingBottom={
-          warningStatus.show ? (warningStatus.isDefault ? 50 : 100) : 0
-        }
+        styles={{
+          container: {
+            paddingTop: 0
+          }
+        }}
+        paddingBottom={warningStatus.show ? 100 : 50}
         footer={
           <>
             <CompatibilityAlert
@@ -313,6 +297,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
               warningStatus={warningStatus}
               contentStyle={{ paddingInline: 0 }}
             ></CompatibilityAlert>
+            <ModalFooter
+              style={ModalFooterStyle}
+              onCancel={onCancel}
+              onOk={handleSumit}
+              showOkBtn={!showExtraButton}
+              extra={
+                showExtraButton && (
+                  <Button type="primary" onClick={handleSubmitAnyway}>
+                    {intl.formatMessage({
+                      id: 'models.form.submit.anyway'
+                    })}
+                  </Button>
+                )
+              }
+            ></ModalFooter>
           </>
         }
       >
@@ -329,7 +328,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
           onValuesChange={handleManulOnValuesChange}
         ></DataForm>
       </ColumnWrapper>
-    </Modal>
+    </GSDrawer>
   );
 };
 

src/pages/llmodels/forms/basic.tsx

@@ -0,0 +1,135 @@
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
+import useAppUtils from '@/hooks/use-app-utils';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import { sourceOptions } from '../config';
+import { FormData } from '../config/types';
+import CatalogFrom from './catalog';
+import LocalPathSource from './local-path-source';
+import OnlineSource from './online-source';
+
+interface BasicFormProps {
+  fields?: string[];
+  sourceDisable?: boolean;
+  sourceList?: Global.BaseOption<string>[];
+  clusterList: Global.BaseOption<number>[];
+  handleClusterChange: (value: number) => void;
+  onSourceChange?: (value: string) => void;
+}
+
+const BasicForm: React.FC<BasicFormProps> = (props) => {
+  const {
+    fields = [],
+    sourceList,
+    clusterList,
+    sourceDisable,
+    handleClusterChange,
+    onSourceChange
+  } = props;
+  const intl = useIntl();
+  const { getRuleMessage } = useAppUtils();
+  const form = Form.useFormInstance();
+
+  const handleOnSourceChange = (val: string) => {
+    onSourceChange?.(val);
+  };
+
+  return (
+    <>
+      <Form.Item<FormData>
+        name="name"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'common.table.name')
+          }
+        ]}
+      >
+        <SealInput.Input
+          label={intl.formatMessage({
+            id: 'common.table.name'
+          })}
+          required
+        ></SealInput.Input>
+      </Form.Item>
+      {fields.includes('source') && (
+        <Form.Item<FormData>
+          name="source"
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('select', 'models.form.source')
+            }
+          ]}
+        >
+          {
+            <SealSelect
+              onChange={handleOnSourceChange}
+              disabled={sourceDisable}
+              label={intl.formatMessage({
+                id: 'models.form.source'
+              })}
+              options={sourceList ?? sourceOptions}
+              required
+            ></SealSelect>
+          }
+        </Form.Item>
+      )}
+
+      <OnlineSource></OnlineSource>
+      <LocalPathSource></LocalPathSource>
+      <Form.Item<FormData>
+        name="cluster_id"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('select', 'clusters.title')
+          }
+        ]}
+      >
+        {
+          <SealSelect
+            onChange={handleClusterChange}
+            label={intl.formatMessage({ id: 'clusters.title' })}
+            options={clusterList}
+            required
+          ></SealSelect>
+        }
+      </Form.Item>
+      <Form.Item<FormData>
+        name="replicas"
+        rules={[
+          {
+            required: true,
+            message: getRuleMessage('input', 'models.form.replicas')
+          }
+        ]}
+      >
+        <SealInput.Number
+          style={{ width: '100%' }}
+          label={intl.formatMessage({
+            id: 'models.form.replicas'
+          })}
+          required
+          description={intl.formatMessage(
+            { id: 'models.form.replicas.tips' },
+            { api: `${window.location.origin}/v1` }
+          )}
+          min={0}
+        ></SealInput.Number>
+      </Form.Item>
+      <CatalogFrom></CatalogFrom>
+      <Form.Item<FormData> name="description">
+        <SealInput.TextArea
+          scaleSize={true}
+          label={intl.formatMessage({
+            id: 'common.table.description'
+          })}
+        ></SealInput.TextArea>
+      </Form.Item>
+    </>
+  );
+};
+
+export default BasicForm;

src/pages/llmodels/forms/index.tsx

@@ -1,13 +1,11 @@
-import SealInput from '@/components/seal-form/seal-input';
-import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
-import useAppUtils from '@/hooks/use-app-utils';
 import CollapsePanel from '@/pages/_components/collapse-panel';
+import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { excludeFields, ScheduleValueMap, sourceOptions } from '../config';
+import { excludeFields, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { FormContext } from '../config/form-context';
 import {
@@ -18,13 +16,9 @@ import {
 } from '../config/types';
 import { generateGPUIds } from '../config/utils';
 import { useGenerateGPUOptions } from '../hooks/use-form-initial-values';
-import CatalogFrom from './catalog';
-import LocalPathSource from './local-path-source';
-import OnlineSource from './online-source';
-// import AdvanceConfig from './advance-config';
 import useQueryBackends from '../hooks/use-query-backends';
 import AdvanceConfig from './advance-config';
-import Performance from './performance';
+import BasicForm from './basic';
 
 interface DataFormProps {
   initialValues?: any;
@@ -57,13 +51,16 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onValuesChange,
     onOk
   } = props;
+  const { scrollToTarget, scrollToBottom } = useWrapperContext();
   const { backendOptions, getBackendOptions } = useQueryBackends();
   const { getGPUOptionList, gpuOptions } = useGenerateGPUOptions();
-  const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
   const scheduleType = Form.useWatch('scheduleType', form);
+  const [target, setTarget] = React.useState<string>('basic');
+  const performanceRef = React.useRef<HTMLDivElement>(null);
+  const advanceRef = React.useRef<HTMLDivElement>(null);
 
   const handleSumit = () => {
     form.submit();
@@ -106,10 +103,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onOk(allValues);
   };
 
-  const handleOnSourceChange = (val: string) => {
-    onSourceChange?.(val);
-  };
-
   const handleClusterChange = (value: number) => {
     getGPUOptionList({ clusterId: value });
     getBackendOptions({ cluster_id: value });
@@ -133,6 +126,20 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     setActiveKey(Array.isArray(keys) ? keys : [keys]);
   };
 
+  const handleTargetChange = (val: string) => {
+    console.log('val', val);
+    // if (val === 'performance' && performanceRef.current) {
+    //   scrollToTarget?.(performanceRef.current);
+    // }
+    // if (val === 'advanced' && advanceRef.current) {
+    //   scrollToTarget?.(advanceRef.current);
+    // }
+    // scrollToBottom?.();
+    // setTimeout(() => {
+    //   setTarget(val);
+    // }, 100);
+  };
+
   useImperativeHandle(ref, () => {
     return {
       form: form,
@@ -174,6 +181,27 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         onBackendChange: handleBackendChange
       }}
     >
+      {/* <div className="m-b-8">
+        <Segmented
+          value={target}
+          defaultValue="Basic"
+          onChange={handleTargetChange}
+          options={[
+            {
+              value: 'basic',
+              label: 'Basic'
+            },
+            {
+              value: 'performance',
+              label: 'Performance'
+            },
+            {
+              value: 'advanced',
+              label: 'Advanced'
+            }
+          ]}
+        />
+      </div> */}
       <Form
         name="deployModel"
         form={form}
@@ -200,112 +228,31 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           ...initialValues
         }}
       >
-        <Form.Item<FormData>
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'common.table.name')
-            }
-          ]}
-        >
-          <SealInput.Input
-            label={intl.formatMessage({
-              id: 'common.table.name'
-            })}
-            required
-          ></SealInput.Input>
-        </Form.Item>
-        {fields.includes('source') && (
-          <Form.Item<FormData>
-            name="source"
-            rules={[
-              {
-                required: true,
-                message: getRuleMessage('select', 'models.form.source')
-              }
-            ]}
-          >
-            {
-              <SealSelect
-                onChange={handleOnSourceChange}
-                disabled={sourceDisable}
-                label={intl.formatMessage({
-                  id: 'models.form.source'
-                })}
-                options={sourceList ?? sourceOptions}
-                required
-              ></SealSelect>
-            }
-          </Form.Item>
-        )}
-
-        <OnlineSource></OnlineSource>
-        <LocalPathSource></LocalPathSource>
-        <Form.Item<FormData>
-          name="cluster_id"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('select', 'clusters.title')
-            }
-          ]}
-        >
-          {
-            <SealSelect
-              onChange={handleClusterChange}
-              label={intl.formatMessage({ id: 'clusters.title' })}
-              options={clusterList}
-              required
-            ></SealSelect>
-          }
-        </Form.Item>
-        <Form.Item<FormData>
-          name="replicas"
-          rules={[
-            {
-              required: true,
-              message: getRuleMessage('input', 'models.form.replicas')
-            }
-          ]}
-        >
-          <SealInput.Number
-            style={{ width: '100%' }}
-            label={intl.formatMessage({
-              id: 'models.form.replicas'
-            })}
-            required
-            description={intl.formatMessage(
-              { id: 'models.form.replicas.tips' },
-              { api: `${window.location.origin}/v1` }
-            )}
-            min={0}
-          ></SealInput.Number>
-        </Form.Item>
-        <CatalogFrom></CatalogFrom>
-        <Form.Item<FormData> name="description">
-          <SealInput.TextArea
-            scaleSize={true}
-            label={intl.formatMessage({
-              id: 'common.table.description'
-            })}
-          ></SealInput.TextArea>
-        </Form.Item>
+        <BasicForm
+          fields={fields}
+          sourceList={sourceList}
+          clusterList={clusterList}
+          sourceDisable={sourceDisable}
+          handleClusterChange={handleClusterChange}
+          onSourceChange={onSourceChange}
+        ></BasicForm>
         <CollapsePanel
           activeKey={activeKey}
           accordion={false}
           onChange={handleOnCollapseChange}
           items={[
+            // {
+            //   key: 'performance',
+            //   label: intl.formatMessage({ id: 'models.form.performance' }),
+            //   forceRender: true,
+            //   extra: <div ref={performanceRef}></div>,
+            //   children: <Performance></Performance>
+            // },
             {
-              key: 'performance',
-              label: intl.formatMessage({ id: 'models.form.performance' }),
-              forceRender: true,
-              children: <Performance></Performance>
-            },
-            {
-              key: 'advance_config',
+              key: 'advanced',
               label: intl.formatMessage({ id: 'resources.form.advanced' }),
               forceRender: true,
+              extra: <div ref={advanceRef}></div>,
               children: <AdvanceConfig></AdvanceConfig>
             }
           ]}