fix: calc scrollheight dynamically for tabs change

src/pages/llmodels/forms/backend.tsx

@@ -29,7 +29,7 @@ const BackendFields: React.FC = () => {
   const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
   const backend = Form.useWatch('backend', form);
 
-  const handleBackendVersionOnBlur = () => {
+  const handleBackendVersionOnChange = () => {
     onValuesChange?.({}, form.getFieldsValue());
   };
 
@@ -137,13 +137,14 @@ const BackendFields: React.FC = () => {
       {backendOptionsMap.custom !== backend && (
         <Form.Item name="backend_version">
           <SealSelect
+            allowClear
             options={backendVersions}
             optionRender={optionRender}
             labelRender={labelRender}
             placeholder={intl.formatMessage({
               id: 'models.form.backendVersion.holder'
             })}
-            onBlur={handleBackendVersionOnBlur}
+            onChange={handleBackendVersionOnChange}
             label={intl.formatMessage({ id: 'models.form.backendVersion' })}
             description={intl.formatMessage(
               {

src/pages/llmodels/forms/catalog.tsx

@@ -4,33 +4,22 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
 import { DeployFormKeyMap } from '../config';
-import { useCatalogFormContext, useFormContext } from '../config/form-context';
+import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
+/**
+ * It can access some props from CatalogFormContext
+ */
 const CatalogForm: React.FC = () => {
   const intl = useIntl();
   const formCtx = useFormContext();
-  const catalogFormCtx = useCatalogFormContext();
   const { getRuleMessage } = useAppUtils();
   const { formKey } = formCtx;
-  const {
-    sizeOptions,
-    quantizationOptions,
-    onSizeChange,
-    onQuantizationChange
-  } = catalogFormCtx;
 
   if (formKey !== DeployFormKeyMap.CATALOG) {
     return null;
   }
 
-  const handleSizeChange = (val: any) => {
-    onSizeChange?.(val);
-  };
-
-  const handleOnQuantizationChange = (val: any) => {
-    onQuantizationChange?.(val);
-  };
   return (
     <>
       <Form.Item<FormData>

src/pages/llmodels/forms/index.tsx

@@ -1,6 +1,7 @@
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import CollapsePanel from '@/pages/_components/collapse-panel';
+import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
 import { useIntl } from '@umijs/max';
 import { Form, Segmented } from 'antd';
 import _ from 'lodash';
@@ -72,6 +73,13 @@ interface DataFormProps {
   onBackendChange?: (value: string) => void;
 }
 
+const TABKeysMap = {
+  BASIC: 'basic',
+  SCHEDULING: 'scheduling',
+  PERFORMANCE: 'performance',
+  ADVANCED: 'advanced'
+};
+
 const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const {
     action,
@@ -89,6 +97,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onValuesChange,
     onOk
   } = props;
+  const { getScrollElementScrollableHeight } = useWrapperContext();
   const { backendOptions, getBackendOptions } = useQueryBackends();
   const { getGPUOptionList, gpuOptions, workerLabelOptions } =
     useGenerateGPUOptions();
@@ -96,14 +105,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const intl = useIntl();
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
   const scheduleType = Form.useWatch('scheduleType', form);
-  const [target, setTarget] = React.useState<string>('basic');
-
-  const TABKeysMap = {
-    BASIC: 'basic',
-    SCHEDULING: 'scheduling',
-    PERFORMANCE: 'performance',
-    ADVANCED: 'advanced'
-  };
+  const [target, setTarget] = React.useState<string>(TABKeysMap.BASIC);
 
   const segmentOptions = [
     {
@@ -128,14 +130,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     }
   ];
 
-  const { scrollToSegment } = useFieldScroll({
-    form,
-    activeKey,
-    setActiveKey,
-    segmentOptions
-  });
+  console.log(
+    'getScrollElementScrollableHeight',
+    getScrollElementScrollableHeight?.()
+  );
 
-  const SegmentedTop = useMemo(() => {
+  const segmentedTop = useMemo(() => {
     if (
       modelSourceMap.local_path_value === source ||
       action === PageAction.EDIT ||
@@ -153,6 +153,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     };
   }, [source, formKey, action]);
 
+  const { scrollToSegment, holderHeight } = useFieldScroll({
+    form,
+    activeKey,
+    setActiveKey,
+    segmentOptions,
+    segmentedTop: segmentedTop,
+    getScrollElementScrollableHeight: getScrollElementScrollableHeight
+  });
+
   const handleSumit = () => {
     form.submit();
   };
@@ -288,7 +297,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const handleTargetChange = async (val: any) => {
     setTarget(val);
 
-    await scrollToSegment(val, { offsetTop: SegmentedTop.offsetTop });
+    await scrollToSegment(val, { offsetTop: segmentedTop.offsetTop });
   };
 
   const handleOnFinishFailed = (errorInfo: any) => {
@@ -389,7 +398,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         onBackendChange: handleBackendChange
       }}
     >
-      <SegmentedHeader $top={SegmentedTop.top}>
+      <SegmentedHeader $top={segmentedTop.top}>
         <SegmentedInner
           defaultValue="basic"
           value={target}
@@ -465,6 +474,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             }
           ]}
         ></CollapsePanel>
+        <div className="holder" style={{ height: holderHeight }}></div>
       </Form>
     </FormContext.Provider>
   );

src/pages/llmodels/forms/schedule-type.tsx

@@ -5,9 +5,10 @@ import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Form, InputNumber } from 'antd';
 import _ from 'lodash';
 import React from 'react';
+import styled from 'styled-components';
 import GPUCard from '../components/gpu-card';
 import {
   placementStrategyOptions,
@@ -18,6 +19,10 @@ import { backendOptionsMap } from '../config/backend-parameters';
 import { useFormContext } from '../config/form-context';
 import { FormData } from '../config/types';
 
+const InputWrapper = styled.div`
+  padding: 8px 4px;
+`;
+
 const placementStrategyTips = [
   {
     title: 'Spread',
@@ -70,6 +75,10 @@ const ScheduleTypeForm: React.FC = () => {
   const form = Form.useFormInstance();
   const scheduleType = Form.useWatch('scheduleType', form);
   const workerSelector = Form.useWatch('worker_selector', form);
+  const GPUsPerReplicas = Form.useWatch(
+    ['gpu_selector', 'gpus_per_replica'],
+    form
+  );
 
   const handleScheduleTypeChange = async (value: string) => {
     if (value === ScheduleValueMap.Auto) {
@@ -81,6 +90,15 @@ const ScheduleTypeForm: React.FC = () => {
       form.setFieldValue(['gpu_selector', 'gpus_per_replica'], null);
     }
   };
+  const handleGpusPerReplicasChange = (val: string | number | null) => {
+    if (val === null) {
+      form.setFieldValue(['gpu_selector', 'gpus_per_replica'], null);
+    } else {
+      form.setFieldValue(['gpu_selector', 'gpus_per_replica'], val);
+    }
+
+    onValuesChange?.({}, form.getFieldsValue());
+  };
 
   const handleGpuSelectorChange = (value: any[]) => {
     if (value.length > 0) {
@@ -191,15 +209,32 @@ const ScheduleTypeForm: React.FC = () => {
                   { label: '2', value: 2 },
                   { label: '4', value: 4 },
                   { label: '8', value: 8 },
-                  { label: '16', value: 16 },
-                  { label: '32', value: 32 },
-                  { label: '64', value: 64 },
-                  { label: '128', value: 128 },
-                  { label: '256', value: 256 }
+                  { label: '16', value: 16 }
                 ]}
                 description={
                   <TooltipList list={GPUsPerReplicaTips}></TooltipList>
                 }
+                popupRender={(originNode) => (
+                  <div>
+                    {originNode}
+                    <InputWrapper>
+                      <InputNumber
+                        min={1}
+                        max={16}
+                        step={1}
+                        style={{ width: '100%' }}
+                        defaultValue={
+                          GPUsPerReplicas === -1 ? null : GPUsPerReplicas
+                        }
+                        placeholder={intl.formatMessage({
+                          id: 'models.form.gpuPerReplica.tips'
+                        })}
+                        value={GPUsPerReplicas === -1 ? null : GPUsPerReplicas}
+                        onChange={handleGpusPerReplicasChange}
+                      />
+                    </InputWrapper>
+                  </div>
+                )}
               />
             </Form.Item>
           </>