fix: 实验参数修改

react-ui/src/components/ParameterInput/index.tsx

@@ -29,7 +29,6 @@ function ParameterInput({
   onClick,
   canInput = true,
   textArea = false,
-  placeholder,
   allowClear,
   className,
   style,
@@ -44,6 +43,7 @@ function ParameterInput({
   }
   const isSelect = valueObj?.fromSelect;
   const InputComponent = textArea ? Input.TextArea : Input;
+  const placeholder = valueObj?.placeholder;
 
   return (
     <>

react-ui/src/components/ParameterSelect/config.tsx

@@ -0,0 +1,72 @@
+import { getDatasetList, getModelList } from '@/services/dataset/index.js';
+import { getComputingResourceReq } from '@/services/pipeline';
+import { ComputingResource } from '@/types';
+import { type SelectProps } from 'antd';
+
+// 过滤资源规格
+const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
+  input: string,
+  option?: ComputingResource,
+) => {
+  return (
+    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
+  );
+};
+
+// id 从 number 转换为 string
+const convertId = (item: any) => ({ ...item, id: String(item.id) });
+
+export type SelectPropsConfig = {
+  getOptions: () => Promise<any>;
+  fieldNames?: SelectProps['fieldNames'];
+  optionFilterProp?: SelectProps['optionFilterProp'];
+  filterOption?: SelectProps['filterOption'];
+};
+
+export const paramSelectConfig: Record<string, SelectPropsConfig> = {
+  dataset: {
+    getOptions: async () => {
+      const res = await getDatasetList({
+        page: 0,
+        size: 1000,
+        available_range: 0,
+      });
+      return res?.data?.content?.map(convertId) ?? [];
+    },
+    fieldNames: {
+      label: 'name',
+      value: 'id',
+    },
+    optionFilterProp: 'name',
+  },
+  model: {
+    getOptions: async () => {
+      const res = await getModelList({
+        page: 0,
+        size: 1000,
+        available_range: 0,
+      });
+      return res?.data?.content?.map(convertId) ?? [];
+    },
+    fieldNames: {
+      label: 'name',
+      value: 'id',
+    },
+    optionFilterProp: 'name',
+  },
+  resource: {
+    getOptions: async () => {
+      const res = await getComputingResourceReq({
+        page: 0,
+        size: 1000,
+        resource_type: '',
+      });
+      return res?.data?.content ?? [];
+    },
+    fieldNames: {
+      label: 'description',
+      value: 'standard',
+    },
+    filterOption: filterResourceStandard as SelectProps['filterOption'],
+  },
+};

react-ui/src/components/ParameterSelect/index.tsx

@@ -1,85 +1,20 @@
+import { PipelineNodeModelParameter } from '@/types';
 import { to } from '@/utils/promise';
+import { Select } from 'antd';
 import { useEffect, useState } from 'react';
-// import styles from './index.less';
-import { getDatasetList, getModelList } from '@/services/dataset/index.js';
-import { getComputingResourceReq } from '@/services/pipeline';
-import { ComputingResource, PipelineNodeModelParameter } from '@/types';
-import { Select, type SelectProps } from 'antd';
-
-// 过滤资源规格
-const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
-  input: string,
-  option?: ComputingResource,
-) => {
-  return (
-    option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
-  );
-};
-
-// id 从 number 转换为 string
-const convertId = (item: any) => ({ ...item, id: String(item.id) });
-
-type SelectPropsConfig = {
-  getOptions: () => Promise<any>;
-  fieldNames?: SelectProps['fieldNames'];
-  filterOption?: SelectProps['filterOption'];
-};
-
-const config: Record<string, SelectPropsConfig> = {
-  dataset: {
-    getOptions: async () => {
-      const res = await getDatasetList({
-        page: 0,
-        size: 1000,
-        available_range: 0,
-      });
-      return res?.data?.content?.map(convertId) ?? [];
-    },
-    fieldNames: {
-      label: 'name',
-      value: 'id',
-    },
-  },
-  model: {
-    getOptions: async () => {
-      const res = await getModelList({
-        page: 0,
-        size: 1000,
-        available_range: 0,
-      });
-      return res?.data?.content?.map(convertId) ?? [];
-    },
-    fieldNames: {
-      label: 'name',
-      value: 'id',
-    },
-  },
-  resource: {
-    getOptions: async () => {
-      const res = await getComputingResourceReq({
-        page: 0,
-        size: 1000,
-        resource_type: '',
-      });
-      return res?.data?.content ?? [];
-    },
-    fieldNames: {
-      label: 'description',
-      value: 'standard',
-    },
-    filterOption: filterResourceStandard as SelectProps['filterOption'],
-  },
-};
+import { paramSelectConfig } from './config';
 
 type ParameterSelectProps = {
   value?: PipelineNodeModelParameter;
   onChange?: (value: PipelineNodeModelParameter) => void;
+  disabled?: boolean;
 };
 
-function ParameterSelect({ value, onChange }: ParameterSelectProps) {
+function ParameterSelect({ value, onChange, disabled = false }: ParameterSelectProps) {
   const [options, setOptions] = useState([]);
   const valueNonNullable = value ?? ({} as PipelineNodeModelParameter);
   const { item_type } = valueNonNullable;
+  const propsConfig = paramSelectConfig[item_type];
 
   useEffect(() => {
     getSelectOptions();
@@ -94,7 +29,6 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) {
 
   // 获取下拉数据
   const getSelectOptions = async () => {
-    const propsConfig = config[item_type];
     if (!propsConfig) {
       return;
     }
@@ -108,11 +42,13 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) {
   return (
     <Select
       placeholder={valueNonNullable.placeholder}
-      filterOption={config[item_type]?.filterOption}
+      filterOption={propsConfig?.filterOption}
       options={options}
-      fieldNames={config[item_type]?.fieldNames}
+      fieldNames={propsConfig?.fieldNames}
       value={valueNonNullable.value}
+      optionFilterProp={propsConfig.optionFilterProp}
       onChange={hangleChange}
+      disabled={disabled}
       showSearch
       allowClear
     />

react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx

@@ -1,3 +1,5 @@
+import ParameterInput from '@/components/ParameterInput';
+import ParameterSelect from '@/components/ParameterSelect';
 import SubAreaTitle from '@/components/SubAreaTitle';
 import { useComputingResource } from '@/hooks/resource';
 import { PipelineNodeModelSerialize } from '@/types';
@@ -122,15 +124,8 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
         <TextArea disabled />
       </Form.Item>
       {controlStrategyList.map((item) => (
-        <Form.Item
-          key={item.key}
-          name={['control_strategy', item.key]}
-          label={item.value.label}
-          getValueProps={(e) => {
-            return { value: e.showValue || e.value };
-          }}
-        >
-          <Input disabled />
+        <Form.Item key={item.key} name={['control_strategy', item.key]} label={item.value.label}>
+          <ParameterInput disabled />
         </Form.Item>
       ))}
       <div className={styles['experiment-parameter__title']}>
@@ -142,11 +137,12 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
           name={['in_parameters', item.key]}
           label={item.value.label + '(' + item.key + ')'}
           rules={[{ required: item.value.require ? true : false }]}
-          getValueProps={(e) => {
-            return { value: e.showValue || e.value };
-          }}
         >
-          <Input disabled />
+          {item.value.type === 'select' ? (
+            <ParameterSelect disabled />
+          ) : (
+            <ParameterInput disabled />
+          )}
         </Form.Item>
       ))}
       <div className={styles['experiment-parameter__title']}>
@@ -158,11 +154,8 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
           name={['out_parameters', item.key]}
           label={item.value.label + '(' + item.key + ')'}
           rules={[{ required: item.value.require ? true : false }]}
-          getValueProps={(e) => {
-            return { value: e.showValue || e.value };
-          }}
         >
-          <Input disabled />
+          <ParameterInput disabled />
         </Form.Item>
       ))}
     </Form>

react-ui/src/pages/Pipeline/editPipeline/props.tsx

@@ -388,7 +388,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
             name={['control_strategy', item.key]}
             label={getLabel(item, 'control_strategy')}
           >
-            <ParameterInput placeholder={item.value.placeholder} allowClear></ParameterInput>
+            <ParameterInput allowClear></ParameterInput>
           </Form.Item>
         ))}
         <div className={styles['pipeline-drawer__title']}>
@@ -409,11 +409,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
                 {item.value.type === 'select' ? (
                   <ParameterSelect />
                 ) : (
-                  <ParameterInput
-                    placeholder={item.value.placeholder}
-                    canInput={canInput(item.value)}
-                    allowClear
-                  ></ParameterInput>
+                  <ParameterInput canInput={canInput(item.value)} allowClear></ParameterInput>
                 )}
               </Form.Item>
               {item.value.type === 'ref' && (
@@ -442,7 +438,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
             label={getLabel(item, 'out_parameters')}
             rules={[{ required: item.value.require ? true : false }]}
           >
-            <ParameterInput placeholder={item.value.placeholder} allowClear></ParameterInput>
+            <ParameterInput allowClear></ParameterInput>
           </Form.Item>
         ))}
       </Form>