refactor: advance collapse

2025-10-13 14:40:26 +08:00
parent a5c1b8e15f
commit 46ecc2467b
18 changed files with 423 additions and 177 deletions
@@ -0,0 +1,134 @@
+import IconFont from '@/components/icon-font';
+import AutoComplete from '@/components/seal-form/auto-complete';
+import SealInput from '@/components/seal-form/seal-input';
+import SealSelect from '@/components/seal-form/seal-select';
+import TooltipList from '@/components/tooltip-list';
+import { PageAction } from '@/config';
+import { useIntl } from '@umijs/max';
+import { Form, Typography } from 'antd';
+import React, { useMemo } from 'react';
+import {
+  backendLabelMap,
+  backendTipsList,
+  getBackendParamsTips,
+  modelSourceMap
+} from '../config';
+import { backendOptionsMap } from '../config/backend-parameters';
+import { useFormContext } from '../config/form-context';
+import { FormData } from '../config/types';
+
+const BackendFields: React.FC = () => {
+  const intl = useIntl();
+  const form = Form.useFormInstance();
+  const {
+    isGGUF,
+    formKey,
+    pageAction: action,
+    source,
+    gpuOptions,
+    onValuesChange,
+    backendOptions,
+    onBackendChange
+  } = useFormContext();
+  const backend = Form.useWatch('backend', form);
+
+  const handleBackendVersionOnBlur = () => {
+    onValuesChange?.({}, form.getFieldsValue());
+  };
+
+  const backendParamsTips = useMemo(() => {
+    return getBackendParamsTips(backend);
+  }, [backend]);
+
+  const backendVersions = useMemo(() => {
+    if (!backend || backend === backendOptionsMap.custom) {
+      return [];
+    }
+    return (
+      backendOptions.find((item) => item.value === backend)?.versions || []
+    );
+  }, [backend]);
+
+  return (
+    <>
+      <Form.Item name="backend" rules={[{ required: true }]}>
+        <SealSelect
+          required
+          onChange={onBackendChange}
+          label={intl.formatMessage({ id: 'models.form.backend' })}
+          description={<TooltipList list={backendTipsList}></TooltipList>}
+          options={backendOptions}
+          disabled={
+            action === PageAction.EDIT &&
+            source !== modelSourceMap.local_path_value
+          }
+        ></SealSelect>
+      </Form.Item>
+      {backendOptionsMap.custom !== backend && (
+        <Form.Item name="backend_version">
+          <AutoComplete
+            options={backendVersions}
+            placeholder="enter or select a version"
+            onBlur={handleBackendVersionOnBlur}
+            label={intl.formatMessage({ id: 'models.form.backendVersion' })}
+            description={intl.formatMessage(
+              {
+                id: 'models.form.backendVersion.tips'
+              },
+              {
+                backend: backendLabelMap[backend],
+                version: backendParamsTips?.version
+                  ? `(${intl.formatMessage({ id: 'common.help.eg' })} ${backendParamsTips?.version})`
+                  : '',
+                link: backendParamsTips?.releases && (
+                  <span
+                    style={{
+                      marginLeft: 5
+                    }}
+                  >
+                    <Typography.Link
+                      className="flex-center"
+                      style={{ display: 'inline' }}
+                      href={backendParamsTips?.releases}
+                      target="_blank"
+                    >
+                      <span>
+                        {intl.formatMessage({ id: 'models.form.releases' })}
+                      </span>
+                      <IconFont
+                        type="icon-external-link"
+                        className="font-size-14 m-l-4"
+                      ></IconFont>
+                    </Typography.Link>
+                  </span>
+                )
+              }
+            )}
+          ></AutoComplete>
+        </Form.Item>
+      )}
+      {backend === backendOptionsMap.custom && (
+        <>
+          <Form.Item<FormData> name="image_name" rules={[{ required: true }]}>
+            <SealInput.Input
+              required
+              allowClear
+              scaleSize={true}
+              label="Image Name"
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item<FormData> name="run_command" rules={[{ required: true }]}>
+            <SealInput.TextArea
+              required
+              scaleSize={true}
+              allowClear
+              label="Execution Command"
+            ></SealInput.TextArea>
+          </Form.Item>
+        </>
+      )}
+    </>
+  );
+};
+
+export default BackendFields;