feat: Add description fields to interface parameters (#4189)

Author: shaohuzhang1

ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue

@@ -1,10 +1,6 @@
 <template>
   <el-dialog
-    :title="
-      isEdit
-        ? $t('common.param.editParam')
-        : $t('common.param.addParam')
-    "
+    :title="isEdit ? $t('common.param.editParam') : $t('common.param.addParam')"
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
@@ -38,7 +34,7 @@
         :rules="{
           required: form.is_required,
           message: $t('dynamicsForm.default.placeholder'),
-          trigger: 'blur'
+          trigger: 'blur',
         }"
       >
         <el-input
@@ -47,6 +43,22 @@
           @blur="form.name = form.name.trim()"
         />
       </el-form-item>
+      <el-form-item
+        :label="$t('views.application.form.appDescription.label')"
+        prop="desc"
+        :rules="{
+          required: form.is_required,
+          message:
+            $t('common.inputPlaceholder') + $t('views.application.form.appDescription.label'),
+          trigger: 'blur',
+        }"
+      >
+        <el-input
+          v-model="form.desc"
+          :placeholder="$t('dynamicsForm.default.placeholder')"
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -76,15 +88,22 @@ const form = ref<any>({
   is_required: true,
   assignment_method: 'api_input',
   optionList: [''],
-  default_value: ''
+  default_value: '',
+  desc: '',
 })
 
 const rules = reactive({
-  name: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }],
+  name: [
+    { required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' },
+  ],
   variable: [
-    { required: true, message:  t('dynamicsForm.paramForm.field.requiredMessage'), trigger: 'blur' },
-    { pattern: /^[a-zA-Z0-9_]+$/, message: t('dynamicsForm.paramForm.field.requiredMessage2'), trigger: 'blur' }
-  ]
+    { required: true, message: t('dynamicsForm.paramForm.field.requiredMessage'), trigger: 'blur' },
+    {
+      pattern: /^[a-zA-Z0-9_]+$/,
+      message: t('dynamicsForm.paramForm.field.requiredMessage2'),
+      trigger: 'blur',
+    },
+  ],
 })
 
 const dialogVisible = ref<boolean>(false)
@@ -98,7 +117,8 @@ watch(dialogVisible, (bool) => {
       is_required: true,
       assignment_method: 'api_input',
       optionList: [''],
-      default_value: ''
+      default_value: '',
+      desc: '',
     }
     isEdit.value = false
   }

ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue

@@ -20,6 +20,13 @@
         </span>
       </template>
     </el-table-column>
+    <el-table-column prop="desc" :label="$t('views.application.form.appDescription.label')">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.desc">
+          {{ row.desc }}
+        </span>
+      </template>
+    </el-table-column>
     <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
       <template #default="{ row }">
         <span class="ellipsis-1" :title="row.default_value">