[frontend] feat: use modal to add/edit custom variables on start node

Author: reeeborn33

frontend/src/locale/en_US.json

@@ -1682,5 +1682,23 @@
     "guestTips": "Guest mode has no access authentication, there are potential threats such as data leakage, please use with caution.",
     "wrongAddr": "Access address error",
     "wrongAddrMsg": "Please visit the correct address"
-  }
+  },
+  "inputType": "Input",
+  "numberType": "Number",
+  "dropdownType": "Dropdown",
+  "switchType": "Switch",
+  "multiselectType": "Multi Select",
+  "maxLength": "Max Length",
+  "option": "option",
+  "plsEnterOption": "Please enter an option",
+  "optionShouldBeUnique": "Options should be unique",
+  "addOption": "Add option",
+  "maxValue": "Max Value",
+  "minValue": "Min Value",
+  "addParamField": "Add Param",
+  "editParamField": "Edit Param",
+  "varName": "Param Name",
+  "plsEnterVarName": "Please enter param name",
+  "attributeVarNameMustBeUnique": "Enter a unique param name.",
+  "noDefaultValue": "No default value"
 }

frontend/src/locale/zh_CN.json

@@ -694,8 +694,8 @@
   "access": "访问",
   "preview": "预览",
   "displayName": "展示名称",
-  "paramDisplayNameCannotBeEmpty": "展示名称不能为空",
-  "attributeDisplayNameMustBeUnique": "字段展示名称不能重复",
+  "paramDisplayNameCannotBeEmpty": "请输入展示名称",
+  "attributeDisplayNameMustBeUnique": "展示名称已存在，请重新命名",
   "pleaseInsertDisplayName": "请输入展示名称",
   "startNodeNamePopover": "用于表示入参字段的key，</p>\n<p>格式要求：只能输入英文、数字及下划线，且不能以数字开头",
   "startNodeDisplayNamePopover": "用于表示入参字段在对话配置窗口中的展示名称",
@@ -1682,5 +1682,23 @@
   "guestMode": "游客模式",
   "guestTips": "游客模式无访问鉴权，存在数据泄露等潜在威胁，请务必谨慎使用。",
   "wrongAddr": "访问地址错误",
-  "wrongAddrMsg": "请访问正确的地址"
+  "wrongAddrMsg": "请访问正确的地址",
+  "inputType": "文本",
+  "numberType": "数字",
+  "dropdownType": "单选框",
+  "switchType": "开关",
+  "multiselectType": "多选框",
+  "maxLength": "最大长度",
+  "option": "选项",
+  "plsEnterOption": "请输入选项",
+  "optionShouldBeUnique": "选项不能重复",
+  "addOption": "添加选项",
+  "maxValue": "最大值",
+  "minValue": "最小值",
+  "addParamField": "添加变量",
+  "editParamField": "编辑变量",
+  "varName": "变量名称",
+  "plsEnterVarName": "请输入变量名称",
+  "attributeVarNameMustBeUnique": "名称已存在，请重新命名",
+  "noDefaultValue": "无默认值"
 }

frontend/src/pages/addFlow/components/elsa-stage.tsx

@@ -29,6 +29,7 @@ import { configMap } from '../config';
 import { useTranslation } from 'react-i18next';
 import i18n from '../../../locale/i18n';
 import { cloneDeep } from 'lodash';
+import InputParamModal from '@/pages/configForm/configUi/components/add-input-param';
 
 /**
  * elsa编排组件
@@ -56,6 +57,8 @@ const Stage = (props) => {
   } = props;
   const [showModal, setShowModal] = useState(false);
   const [showTools, setShowTools] = useState(false);
+  const [showInputModal, setShowInputModal] = useState(false);
+  const [inputModalMode, setInputModalMode] = useState('add');
   const [showDrawer, setShowDrawer] = useState(false);
   const [spinning, setSpinning] = useState(false);
   const [isDrawper, setIsDrawper] = useState(false);
@@ -79,6 +82,8 @@ const Stage = (props) => {
   const modelCallback = useRef<any>();
   const knowledgeCallback = useRef<any>();
   const pluginCallback = useRef<any>();
+  const inputParamCallback = useRef<any>();
+  const inputParamRef = useRef<any>({})
   const formCallback = useRef<any>();
   const currentApp = useRef<any>();
   const currentChange = useRef<any>(false);
@@ -251,6 +256,18 @@ const Stage = (props) => {
         setShowTools(true);
         setModalTypes('parallel');
       });
+      agent.onAddInputParam(({onAdd, existParam}) => {
+        inputParamCallback.current = onAdd;
+        setInputModalMode('add')
+        setShowInputModal(true);
+        inputParamRef.current.existParam = existParam;
+      })
+      agent.onEditInputParam(({onEdit, id, selectedParam}) => {
+        inputParamCallback.current = onEdit;
+        setInputModalMode('edit')
+        setShowInputModal(true);
+        inputParamRef.current.selectedParam = selectedParam;
+      })
       if (readOnly) {
         agent.readOnly();
       }
@@ -298,6 +315,10 @@ const Stage = (props) => {
     searchCallback.current(value);
   };
 
+  const addParam = (value) => {
+    inputParamCallback.current(value);
+  }
+
   // 插件工具流选中
   const toolsConfirm = (item) => {
     let obj = {};
@@ -444,6 +465,14 @@ const Stage = (props) => {
       taskName={taskName}
       selectModal={selectModal}
     />
+    {/*input param添加弹窗*/}
+    <InputParamModal
+      mode={inputModalMode}
+      modalRef={inputParamRef}
+      showModal={showInputModal}
+      setShowModal={setShowInputModal}
+      onSubmit={addParam}
+    />
     {/* 添加知识库弹窗 */}
     <AddKnowledge
       modalRef={modalRef}

frontend/src/pages/addFlow/components/flow-test.tsx

@@ -339,7 +339,9 @@ const Index = (props) => {
                   name={debugType.name}
                   label={debugType.displayName}
                   key={index}
-                  isRequired={debugType.isRequired} />
+                  isRequired={debugType.isRequired}
+                  appearance={debugType.appearance}
+                />
               )
             })}
             {