fix: cluster issues

src/components/seal-form/seal-textarea.tsx

@@ -18,6 +18,7 @@ const LabelWrapper = styled.div.attrs({
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  padding-bottom: 2px;
   background-color: var(--ant-color-bg-container);
 `;
 
@@ -111,11 +112,13 @@ const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
     [onInput]
   );
 
+  console.log('style=========', style, rest);
+
   return (
     <InputWrapper>
       <Wrapper
         status={status}
-        label={label}
+        label={<LabelWrapper>{label}</LabelWrapper>}
         isFocus={isFocus}
         required={required}
         description={description}

src/components/seal-form/wrapper/input.ts

@@ -76,6 +76,7 @@ const InputWrapper = styled.div`
   }
   .ant-input.seal-textarea {
     flex: 1;
+    overflow-y: auto !important;
   }
 
   .ant-input-number {

src/pages/llmodels/forms/index.tsx

@@ -20,6 +20,8 @@ import useQueryBackends from '../hooks/use-query-backends';
 import AdvanceConfig from './advance-config';
 import BasicForm from './basic';
 
+const requiredFields = ['gpu_selector', 'backend'];
+
 interface DataFormProps {
   initialValues?: any;
   ref?: any;
@@ -147,18 +149,24 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     setActiveKey(Array.isArray(keys) ? keys : [keys]);
   };
 
+  const handleOnFinishFailed = (errorInfo: any) => {
+    const { errorFields } = errorInfo;
+    if (errorFields && errorFields.length > 0) {
+      const names = errorFields.map((item: any) => item.name[0]);
+      const isRequired = names.some((name: string) =>
+        requiredFields.includes(name)
+      );
+      if (isRequired) {
+        setActiveKey(['advanced']);
+      }
+    }
+  };
+
   const handleTargetChange = (val: string) => {
-    console.log('val', val);
+    form.scrollToField(val, {
-    // if (val === 'performance' && performanceRef.current) {
+      behavior: 'smooth',
-    //   scrollToTarget?.(performanceRef.current);
+      block: 'center'
-    // }
+    });
-    // if (val === 'advanced' && advanceRef.current) {
-    //   scrollToTarget?.(advanceRef.current);
-    // }
-    // scrollToBottom?.();
-    // setTimeout(() => {
-    //   setTarget(val);
-    // }, 100);
   };
 
   useImperativeHandle(ref, () => {
@@ -202,22 +210,25 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         onBackendChange: handleBackendChange
       }}
     >
-      {/* <div className="m-b-8">
+      {/* <div
+        className="m-b-8"
+        style={{ position: 'sticky', top: 0, zIndex: 100 }}
+      >
         <Segmented
           value={target}
           defaultValue="Basic"
           onChange={handleTargetChange}
           options={[
             {
-              value: 'basic',
+              value: 'name',
               label: 'Basic'
             },
             {
-              value: 'performance',
+              value: 'categories',
               label: 'Performance'
             },
             {
-              value: 'advanced',
+              value: 'categories',
               label: 'Advanced'
             }
           ]}
@@ -230,6 +241,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         preserve={false}
         clearOnDestroy={true}
         onValuesChange={handleOnValuesChange}
+        onFinishFailed={handleOnFinishFailed}
         scrollToFirstError={true}
         initialValues={{
           replicas: 1,