fix(style): k8s form

2026-06-01 21:06:56 +08:00
parent e314f25a77
commit 95ffe0350e
12 changed files with 328 additions and 249 deletions
@@ -11,8 +11,14 @@ import {
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import { useAtomValue } from 'jotai';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState
+} from 'react';
 import { ProviderType, ProviderValueMap } from '../config';
+import { FormContext } from '../config/form-context';
 import {
  ClusterFormData as FormData,
  ClusterListItem as ListItem
@@ -37,6 +43,7 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
    const [k8sActiveKey, setK8sActiveKey] = React.useState<string[]>([
      'k8sOptions'
    ]);
+    const [submitAttempted, setSubmitAttempted] = useState(false);
    const advanceConfigRef = React.useRef<any>(null);
    const systemConfig = useAtomValue(systemConfigAtom);

@@ -171,7 +178,12 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
        };
      },
      validateFields: async () => {
-        await form.validateFields();
+        try {
+          await form.validateFields();
+        } catch (e) {
+          setSubmitAttempted(true);
+          throw e;
+        }
        const values = form.getFieldsValue(true);

        const workerConfig = yaml2Json(
@@ -187,103 +199,112 @@ const ClusterForm: React.FC<AddModalProps> = forwardRef(
      }
    }));

+    const handleOnFinishFailed = () => {
+      setSubmitAttempted(true);
+    };
+
    return (
-      <Form
-        name="clusterForm"
-        form={form}
-        onFinish={handleOnFinish}
-        preserve={false}
-        scrollToFirstError={true}
-        initialValues={currentData}
-      >
-        <Form.Item<FormData>
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage(
-                { id: 'common.form.rule.input' },
+      <FormContext.Provider value={{ submitAttempted }}>
+        <Form
+          name="clusterForm"
+          form={form}
+          onFinish={handleOnFinish}
+          onFinishFailed={handleOnFinishFailed}
+          preserve={false}
+          scrollToFirstError={true}
+          initialValues={currentData}
+        >
+          <Form.Item<FormData>
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: intl.formatMessage(
+                  { id: 'common.form.rule.input' },
+                  {
+                    name: intl.formatMessage({ id: 'common.table.name' })
+                  }
+                )
+              }
+            ]}
+          >
+            <CInput.Input
+              label={intl.formatMessage({ id: 'common.table.name' })}
+              required
+              trim={false}
+            ></CInput.Input>
+          </Form.Item>
+          <PluginExtraFields name="CreateOrgScopeField" context={{ action }} />
+          {provider === ProviderValueMap.DigitalOcean && (
+            <CloudProvider
+              provider={provider}
+              action={action}
+              credentialID={currentData?.credential_id}
+              credentialList={credentialList}
+            ></CloudProvider>
+          )}
+
+          <Form.Item<FormData>
+            name="description"
+            rules={[{ required: false }]}
+            style={{ marginBottom: 8 }}
+          >
+            <SealTextArea
+              scaleSize
+              label={intl.formatMessage({ id: 'common.table.description' })}
+            ></SealTextArea>
+          </Form.Item>
+
+          {provider === ProviderValueMap.Kubernetes && (
+            <CollapsePanel
+              accordion={false}
+              activeKey={k8sActiveKey}
+              onChange={(keys) =>
+                setK8sActiveKey(Array.isArray(keys) ? keys : [keys])
+              }
+              items={[
                {
-                  name: intl.formatMessage({ id: 'common.table.name' })
+                  key: 'k8sOptions',
+                  label: intl.formatMessage({
+                    id: 'clusters.k8sOptions.title'
+                  }),
+                  forceRender: true,
+                  children: (
+                    <K8sPodSpec
+                      key={currentData?.id ?? 'new'}
+                      action={action}
+                      initialGpuInstanceOptions={
+                        currentData?.k8s_options?.gpuInstanceOptions
+                      }
+                    ></K8sPodSpec>
+                  )
                }
-              )
-            }
-          ]}
-        >
-          <CInput.Input
-            label={intl.formatMessage({ id: 'common.table.name' })}
-            required
-            trim={false}
-          ></CInput.Input>
-        </Form.Item>
-        <PluginExtraFields name="CreateOrgScopeField" context={{ action }} />
-        {provider === ProviderValueMap.DigitalOcean && (
-          <CloudProvider
-            provider={provider}
-            action={action}
-            credentialID={currentData?.credential_id}
-            credentialList={credentialList}
-          ></CloudProvider>
-        )}
+              ]}
+            ></CollapsePanel>
+          )}

-        <Form.Item<FormData>
-          name="description"
-          rules={[{ required: false }]}
-          style={{ marginBottom: 8 }}
-        >
-          <SealTextArea
-            scaleSize
-            label={intl.formatMessage({ id: 'common.table.description' })}
-          ></SealTextArea>
-        </Form.Item>
-
-        {provider === ProviderValueMap.Kubernetes && (
          <CollapsePanel
            accordion={false}
-            activeKey={k8sActiveKey}
-            onChange={(keys) =>
-              setK8sActiveKey(Array.isArray(keys) ? keys : [keys])
-            }
+            activeKey={activeKey}
+            onChange={handleOnCollapseChange}
            items={[
              {
-                key: 'k8sOptions',
-                label: intl.formatMessage({ id: 'clusters.k8sOptions.title' }),
+                key: 'advanceConfig',
+                label: intl.formatMessage({ id: 'resources.form.advanced' }),
                forceRender: true,
                children: (
-                  <K8sPodSpec
-                    key={currentData?.id ?? 'new'}
+                  <AdvanceConfig
                    action={action}
-                    initialGpuInstanceOptions={
-                      currentData?.k8s_options?.gpuInstanceOptions
-                    }
-                  ></K8sPodSpec>
+                    provider={provider}
+                    currentData={currentData}
+                    ref={advanceConfigRef}
+                  ></AdvanceConfig>
                )
              }
            ]}
          ></CollapsePanel>
-        )}
-
-        <CollapsePanel
-          accordion={false}
-          activeKey={activeKey}
-          onChange={handleOnCollapseChange}
-          items={[
-            {
-              key: 'advanceConfig',
-              label: intl.formatMessage({ id: 'resources.form.advanced' }),
-              forceRender: true,
-              children: (
-                <AdvanceConfig
-                  action={action}
-                  provider={provider}
-                  currentData={currentData}
-                  ref={advanceConfigRef}
-                ></AdvanceConfig>
-              )
-            }
-          ]}
-        ></CollapsePanel>
-      </Form>
+        </Form>
+      </FormContext.Provider>
    );
  }
 );