From fa17d969690ea322efc4fb9c6becc51a546014b3 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Fri, 18 Oct 2024 18:10:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=AB=98=E7=BA=A7=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E5=8C=BA=E5=88=86=E7=94=A8=E6=88=B7=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E5=92=8C=E6=8E=A5=E5=8F=A3=E4=BC=A0=E5=85=A5=E7=9A=84=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../serializers/application_serializers.py    |   2 +-
 ui/src/components/ai-chat/index.vue           |  92 ++++++++++++-
 ui/src/views/application-overview/index.vue   |  10 +-
 .../component/ApiFieldFormDialog.vue          | 126 +++++++++++++++++
 .../component/ApiInputFieldTable.vue          | 122 ++++++++++++++++
 ...FormDialog.vue => UserFieldFormDialog.vue} |  14 +-
 .../component/UserInputFieldTable.vue         | 130 ++++++++++++++++++
 ui/src/workflow/nodes/base-node/index.vue     | 116 +++-------------
 ui/src/workflow/nodes/start-node/index.vue    |  11 +-
 9 files changed, 504 insertions(+), 119 deletions(-)
 create mode 100644 ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
 create mode 100644 ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
 rename ui/src/workflow/nodes/base-node/component/{FieldFormDialog.vue => UserFieldFormDialog.vue} (91%)
 create mode 100644 ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue

diff --git a/apps/application/serializers/application_serializers.py b/apps/application/serializers/application_serializers.py
index 9a68a3e1b..005740b00 100644
--- a/apps/application/serializers/application_serializers.py
+++ b/apps/application/serializers/application_serializers.py
@@ -264,7 +264,7 @@ class ApplicationSerializer(serializers.Serializer):
                 if work_flow is not None:
                     for node in work_flow.get('nodes', []):
                         if node['id'] == 'base-node':
-                            input_field_list = node.get('properties', {}).get('input_field_list', [])
+                            input_field_list = node.get('properties', {}).get('api_input_field_list', node.get('properties', {}).get('input_field_list', []))
                             if input_field_list is not None:
                                 for field in input_field_list:
                                     if field['assignment_method'] == 'api_input' and field['variable'] in params:
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index e88a6e0b6..2c2801b32 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -364,8 +364,47 @@ function handleInputFieldList() {
   props.data.work_flow?.nodes
     ?.filter((v: any) => v.id === 'base-node')
     .map((v: any) => {
-      inputFieldList.value = v.properties.input_field_list
-        ? v.properties.input_field_list
+      inputFieldList.value = v.properties.user_input_field_list
+        ? v.properties.user_input_field_list
+          .map((v: any) => {
+            switch (v.type) {
+              case 'input':
+                return {
+                  field: v.variable,
+                  input_type: 'TextInput',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required
+                }
+              case 'select':
+                return {
+                  field: v.variable,
+                  input_type: 'SingleSelect',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  option_list: v.optionList.map((o: any) => {
+                    return { key: o, value: o }
+                  })
+                }
+              case 'date':
+                return {
+                  field: v.variable,
+                  input_type: 'DatePicker',
+                  label: v.name,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  attrs: {
+                    format: 'YYYY-MM-DD HH:mm:ss',
+                    'value-format': 'YYYY-MM-DD HH:mm:ss',
+                    type: 'datetime'
+                  }
+                }
+              default:
+                break
+            }
+          })
+        : v.properties.input_field_list ? v.properties.input_field_list
             .filter((v: any) => v.assignment_method === 'user_input')
             .map((v: any) => {
               switch (v.type) {
@@ -405,9 +444,50 @@ function handleInputFieldList() {
                   break
               }
             })
-        : []
-      apiInputFieldList.value = v.properties.input_field_list
-        ? v.properties.input_field_list
+          : []
+
+      apiInputFieldList.value = v.properties.api_input_field_list
+        ? v.properties.api_input_field_list
+          .map((v: any) => {
+            switch (v.type) {
+              case 'input':
+                return {
+                  field: v.variable,
+                  input_type: 'TextInput',
+                  label: v.variable,
+                  default_value: default_value[v.variable],
+                  required: v.is_required
+                }
+              case 'select':
+                return {
+                  field: v.variable,
+                  input_type: 'SingleSelect',
+                  label: v.variable,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  option_list: v.optionList.map((o: any) => {
+                    return { key: o, value: o }
+                  })
+                }
+              case 'date':
+                return {
+                  field: v.variable,
+                  input_type: 'DatePicker',
+                  label: v.variable,
+                  default_value: default_value[v.variable],
+                  required: v.is_required,
+                  attrs: {
+                    format: 'YYYY-MM-DD HH:mm:ss',
+                    'value-format': 'YYYY-MM-DD HH:mm:ss',
+                    type: 'datetime'
+                  }
+                }
+              default:
+                break
+            }
+          })
+        : v.properties.input_field_list
+          ? v.properties.input_field_list
             .filter((v: any) => v.assignment_method === 'api_input')
             .map((v: any) => {
               switch (v.type) {
@@ -447,7 +527,7 @@ function handleInputFieldList() {
                   break
               }
             })
-        : []
+          : []
     })
 }
 
diff --git a/ui/src/views/application-overview/index.vue b/ui/src/views/application-overview/index.vue
index ed576232a..186fa4390 100644
--- a/ui/src/views/application-overview/index.vue
+++ b/ui/src/views/application-overview/index.vue
@@ -342,7 +342,15 @@ function getDetail() {
     detail.value.work_flow?.nodes
       ?.filter((v: any) => v.id === 'base-node')
       .map((v: any) => {
-        apiInputParams.value = v.properties.input_field_list
+        apiInputParams.value = v.properties.api_input_field_list
+          ? v.properties.api_input_field_list
+              .map((v: any) => {
+                return {
+                  name: v.variable,
+                  value: v.default_value
+                }
+              })
+          : v.properties.input_field_list
           ? v.properties.input_field_list
               .filter((v: any) => v.assignment_method === 'api_input')
               .map((v: any) => {
diff --git a/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue b/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
new file mode 100644
index 000000000..d57d59d98
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/ApiFieldFormDialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="参数" prop="variable">
+        <el-input
+          v-model="form.variable"
+          placeholder="请输入参数"
+          maxlength="64"
+          show-word-limit
+          @blur="form.variable = form.variable.trim()"
+        />
+      </el-form-item>
+
+      <el-form-item label="是否必填" @click.prevent>
+        <el-switch size="small" v-model="form.is_required"></el-switch>
+      </el-form-item>
+      <el-form-item
+        label="默认值"
+        prop="default_value"
+        :rules="{
+          required: form.is_required,
+          message: '请输入默认值',
+          trigger: 'blur'
+        }"
+      >
+        <el-input
+          v-model="form.default_value"
+          placeholder="请输入默认值"
+          @blur="form.name = form.name.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? '保存' : '添加' }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  name: '',
+  variable: '',
+  type: 'input',
+  is_required: true,
+  assignment_method: 'api_input',
+  optionList: [''],
+  default_value: ''
+})
+
+const rules = reactive({
+  name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+  variable: [
+    { required: true, message: '请输入参数', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母数字和下划线', trigger: 'blur' }
+  ]
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      name: '',
+      variable: '',
+      type: 'input',
+      is_required: true,
+      assignment_method: 'api_input',
+      optionList: [''],
+      default_value: ''
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
new file mode 100644
index 000000000..b9ec6d5d3
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="lighter">{{ '接口传参' }}</h5>
+    <el-button link type="primary" @click="openAddDialog()">
+      <el-icon class="mr-4">
+        <Plus />
+      </el-icon>
+      添加
+    </el-button>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.api_input_field_list"
+    class="mb-16"
+  >
+    <el-table-column prop="variable" label="参数" />
+    <el-table-column prop="default_value" label="默认值" />
+    <el-table-column label="必填">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.is_required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" width="80">
+      <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="修改" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <ApiFieldFormDialog ref="ApiFieldFormDialogRef" @refresh="refreshFieldList" />
+
+</template>
+
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const currentIndex = ref(null)
+const ApiFieldFormDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+  ApiFieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+
+function refreshFieldList(data: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.user_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].variable === data.variable) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  if (currentIndex.value !== null) {
+    inputFieldList.value.splice(currentIndex.value, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  currentIndex.value = null
+  ApiFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.api_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'api_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.api_input_field_list)
+  }
+  set(props.nodeModel.properties, 'api_input_field_list', inputFieldList)
+})
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/ui/src/workflow/nodes/base-node/component/FieldFormDialog.vue b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
similarity index 91%
rename from ui/src/workflow/nodes/base-node/component/FieldFormDialog.vue
rename to ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
index 331a9d457..9ac58f798 100644
--- a/ui/src/workflow/nodes/base-node/component/FieldFormDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    :title="isEdit ? '编辑变量' : '添加变量'"
+    :title="isEdit ? '编辑参数' : '添加参数'"
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
@@ -14,10 +14,10 @@
       :model="form"
       require-asterisk-position="right"
     >
-      <el-form-item label="变量" prop="variable">
+      <el-form-item label="参数" prop="variable">
         <el-input
           v-model="form.variable"
-          placeholder="请输入变量"
+          placeholder="请输入参数"
           maxlength="64"
           show-word-limit
           @blur="form.variable = form.variable.trim()"
@@ -100,12 +100,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="赋值方式">
-        <el-radio-group v-model="form.assignment_method">
-          <el-radio value="user_input">用户输入</el-radio>
-          <el-radio value="api_input">接口传参</el-radio>
-        </el-radio-group>
-      </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
@@ -142,7 +136,7 @@ const form = ref<any>({
 const rules = reactive({
   name: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
   variable: [
-    { required: true, message: '请输入变量', trigger: 'blur' },
+    { required: true, message: '请输入参数', trigger: 'blur' },
     { pattern: /^[a-zA-Z0-9_]+$/, message: '只能输入字母数字和下划线', trigger: 'blur' }
   ]
 })
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
new file mode 100644
index 000000000..b2b1f1f60
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex-between mb-16">
+    <h5 class="lighter">{{ '用户输入' }}</h5>
+    <el-button link type="primary" @click="openAddDialog()">
+      <el-icon class="mr-4">
+        <Plus />
+      </el-icon>
+      添加
+    </el-button>
+  </div>
+  <el-table
+    v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
+    :data="props.nodeModel.properties.user_input_field_list"
+    class="mb-16"
+  >
+    <el-table-column prop="variable" label="参数" />
+    <el-table-column prop="name" label="显示名称" />
+    <el-table-column label="输入类型">
+      <template #default="{ row }">
+        <el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
+        <el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="default_value" label="默认值" />
+    <el-table-column label="必填">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.is_required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" width="80">
+      <template #default="{ row, $index }">
+            <span class="mr-4">
+              <el-tooltip effect="dark" content="修改" placement="top">
+                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+                  <el-icon><EditPen /></el-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <el-icon>
+              <Delete />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
+
+</template>
+
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import { set } from 'lodash'
+import UserFieldFormDialog from './UserFieldFormDialog.vue'
+import { MsgError } from '@/utils/message'
+
+const props = defineProps<{ nodeModel: any }>()
+
+const currentIndex = ref(null)
+const UserFieldFormDialogRef = ref()
+const inputFieldList = ref<any[]>([])
+
+function openAddDialog(data?: any, index?: any) {
+  if (typeof index !== 'undefined') {
+    currentIndex.value = index
+  }
+  UserFieldFormDialogRef.value.open(data)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+
+function refreshFieldList(data: any) {
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  // 查看另一个list又没有重复的
+  let arr = props.nodeModel.properties.api_input_field_list
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].variable === data.variable) {
+      MsgError('参数已存在: ' + data.variable)
+      return
+    }
+  }
+  if (currentIndex.value !== null) {
+    inputFieldList.value.splice(currentIndex.value, 1, data)
+  } else {
+    inputFieldList.value.push(data)
+  }
+  currentIndex.value = null
+  UserFieldFormDialogRef.value.close()
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+onMounted(() => {
+  if (!props.nodeModel.properties.user_input_field_list) {
+    if (props.nodeModel.properties.input_field_list) {
+      props.nodeModel.properties.input_field_list
+        .filter((item: any) => {
+          return item.assignment_method === 'user_input'
+        })
+        .forEach((item: any) => {
+          inputFieldList.value.push(item)
+        })
+    }
+  } else {
+    inputFieldList.value.push(...props.nodeModel.properties.user_input_field_list)
+  }
+  set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
+})
+
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/ui/src/workflow/nodes/base-node/index.vue b/ui/src/workflow/nodes/base-node/index.vue
index 181296fd2..fd5602292 100644
--- a/ui/src/workflow/nodes/base-node/index.vue
+++ b/ui/src/workflow/nodes/base-node/index.vue
@@ -45,57 +45,8 @@
           @submitDialog="submitDialog"
         />
       </el-form-item>
-      <div class="flex-between mb-16">
-        <h5 class="lighter">全局变量</h5>
-        <el-button link type="primary" @click="openAddDialog()">
-          <el-icon class="mr-4"><Plus /></el-icon> 添加
-        </el-button>
-      </div>
-      <el-table
-        v-if="props.nodeModel.properties.input_field_list?.length > 0"
-        :data="props.nodeModel.properties.input_field_list"
-        class="mb-16"
-      >
-        <el-table-column prop="variable" label="变量" />
-        <el-table-column prop="name" label="显示名称" />
-        <el-table-column label="输入类型">
-          <template #default="{ row }">
-            <el-tag type="info" class="info-tag" v-if="row.type === 'input'">文本框</el-tag>
-            <el-tag type="info" class="info-tag" v-if="row.type === 'date'">日期</el-tag>
-            <el-tag type="info" class="info-tag" v-if="row.type === 'select'">下拉选项</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="必填">
-          <template #default="{ row }">
-            <div @click.stop>
-              <el-switch disabled size="small" v-model="row.is_required" />
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="assignment_method" label="赋值方式">
-          <template #default="{ row }">
-            {{ row.assignment_method === 'user_input' ? '用户输入' : '接口传参' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="left" width="80">
-          <template #default="{ row, $index }">
-            <span class="mr-4">
-              <el-tooltip effect="dark" content="修改" placement="top">
-                <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
-                  <el-icon><EditPen /></el-icon>
-                </el-button>
-              </el-tooltip>
-            </span>
-            <el-tooltip effect="dark" content="删除" placement="top">
-              <el-button type="primary" text @click="deleteField($index)">
-                <el-icon>
-                  <Delete />
-                </el-icon>
-              </el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
+      <UserInputFieldTable ref="UserInputFieldTableFef" :node-model="nodeModel"  />
+      <ApiInputFieldTable ref="ApiInputFieldTableFef" :node-model="nodeModel" />
       <el-form-item>
         <template #label>
           <div class="flex-between">
@@ -139,7 +90,7 @@
                 ></span>
                 <span>{{ item.name }}</span>
                 <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
-                  >公用
+                >公用
                 </el-tag>
               </div>
               <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
@@ -162,8 +113,8 @@
                 ></span>
                 <span>{{ item.name }}</span>
                 <span class="danger">{{
-                  $t('views.application.applicationForm.form.aiModel.unavailable')
-                }}</span>
+                    $t('views.application.applicationForm.form.aiModel.unavailable')
+                  }}</span>
               </div>
               <el-icon class="check-icon" v-if="item.id === form_data.stt_model_id">
                 <Check />
@@ -184,7 +135,9 @@
                 @click="openTTSParamSettingDialog"
                 :disabled="!form_data.tts_model_id"
               >
-                <el-icon class="mr-4"><Setting /></el-icon>
+                <el-icon class="mr-4">
+                  <Setting />
+                </el-icon>
                 设置
               </el-button>
               <el-switch size="small" v-model="form_data.tts_model_enable" />
@@ -221,7 +174,7 @@
                 ></span>
                 <span>{{ item.name }}</span>
                 <el-tag v-if="item.permission_type === 'PUBLIC'" type="info" class="info-tag ml-8"
-                  >公用
+                >公用
                 </el-tag>
               </div>
               <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
@@ -244,8 +197,8 @@
                 ></span>
                 <span>{{ item.name }}</span>
                 <span class="danger">{{
-                  $t('views.application.applicationForm.form.aiModel.unavailable')
-                }}</span>
+                    $t('views.application.applicationForm.form.aiModel.unavailable')
+                  }}</span>
               </div>
               <el-icon class="check-icon" v-if="item.id === form_data.tts_model_id">
                 <Check />
@@ -256,7 +209,6 @@
       </el-form-item>
     </el-form>
 
-    <FieldFormDialog ref="FieldFormDialogRef" @refresh="refreshFieldList" />
   </NodeContainer>
   <TTSModeParamSettingDialog ref="TTSModeParamSettingDialogRef" @refresh="refreshTTSForm" />
 </template>
@@ -270,10 +222,12 @@ import { relatedObject } from '@/utils/utils'
 import useStore from '@/stores'
 import applicationApi from '@/api/application'
 import type { Provider } from '@/api/type/model'
-import FieldFormDialog from './component/FieldFormDialog.vue'
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message'
 import { t } from '@/locales'
 import TTSModeParamSettingDialog from '@/views/application/component/TTSModeParamSettingDialog.vue'
+import ApiInputFieldTable from './component/ApiInputFieldTable.vue'
+import UserInputFieldTable from './component/UserInputFieldTable.vue'
+
 const { model } = useStore()
 
 const {
@@ -286,6 +240,8 @@ const sttModelOptions = ref<any>(null)
 const ttsModelOptions = ref<any>(null)
 const providerOptions = ref<Array<Provider>>([])
 const TTSModeParamSettingDialogRef = ref<InstanceType<typeof TTSModeParamSettingDialog>>()
+const UserInputFieldTableFef = ref()
+const ApiInputFieldTableFef = ref()
 
 const form = {
   name: '',
@@ -306,6 +262,7 @@ const wheel = (e: any) => {
 function submitDialog(val: string) {
   set(props.nodeModel.properties.node_data, 'prologue', val)
 }
+
 const form_data = computed({
   get: () => {
     if (props.nodeModel.properties.node_data) {
@@ -356,39 +313,6 @@ function getTTSModel() {
   })
 }
 
-const currentIndex = ref(null)
-const FieldFormDialogRef = ref()
-const inputFieldList = ref<any[]>([])
-
-function openAddDialog(data?: any, index?: any) {
-  if (typeof index !== 'undefined') {
-    currentIndex.value = index
-  }
-
-  FieldFormDialogRef.value.open(data)
-}
-
-function deleteField(index: any) {
-  inputFieldList.value.splice(index, 1)
-  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList', inputFieldList.value)
-}
-
-function refreshFieldList(data: any) {
-  for (let i = 0; i < inputFieldList.value.length; i++) {
-    if (inputFieldList.value[i].variable === data.variable && currentIndex.value !== i) {
-      MsgError('变量已存在: ' + data.variable)
-      return
-    }
-  }
-  if (currentIndex.value !== null) {
-    inputFieldList.value.splice(currentIndex.value, 1, data)
-  } else {
-    inputFieldList.value.push(data)
-  }
-  currentIndex.value = null
-  FieldFormDialogRef.value.close()
-  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList', inputFieldList.value)
-}
 
 const openTTSParamSettingDialog = () => {
   const model_id = form_data.value.tts_model_id
@@ -406,12 +330,6 @@ const refreshTTSForm = (data: any) => {
 
 onMounted(() => {
   set(props.nodeModel, 'validate', validate)
-  if (props.nodeModel.properties.input_field_list) {
-    props.nodeModel.properties.input_field_list.forEach((item: any) => {
-      inputFieldList.value.push(item)
-    })
-  }
-  set(props.nodeModel.properties, 'input_field_list', inputFieldList)
   if (!props.nodeModel.properties.node_data.tts_type) {
     set(props.nodeModel.properties.node_data, 'tts_type', 'BROWSER')
   }
diff --git a/ui/src/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
index dadf40c3c..c5aef22cc 100644
--- a/ui/src/workflow/nodes/start-node/index.vue
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -38,11 +38,18 @@ const globalFields = [
 const inputFieldList = ref<any[]>([])
 
 const getRefreshFieldList = () => {
-  return props.nodeModel.graphModel.nodes
+  const user_input_fields = props.nodeModel.graphModel.nodes
     .filter((v: any) => v.id === 'base-node')
-    .map((v: any) => cloneDeep(v.properties.input_field_list))
+    .map((v: any) => cloneDeep(v.properties.user_input_field_list))
     .reduce((x: any, y: any) => [...x, ...y], [])
     .map((i: any) => ({ label: i.name, value: i.variable }))
+  const api_input_fields = props.nodeModel.graphModel.nodes
+    .filter((v: any) => v.id === 'base-node')
+    .map((v: any) => cloneDeep(v.properties.api_input_field_list))
+    .reduce((x: any, y: any) => [...x, ...y], [])
+    .map((i: any) => ({ label: i.name, value: i.variable }))
+
+  return [...user_input_fields, ...api_input_fields]
 }
 const refreshFieldList = () => {
   const refreshFieldList = getRefreshFieldList()