From fe8973600abf1e6bd78a6a4bd9af5a9ea7f5b022 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Fri, 4 Sep 2026 16:36:44 +0800
Subject: [PATCH] feat: Basic nodes of tool workflow

---
 .../component/input/InputFieldFormDialog.vue  | 137 ++++++++++++++++++
 .../component/input/InputFieldTable.vue       | 137 ++++++++++++++++++
 .../component/input/InputTitleDialog.vue      |  81 +++++++++++
 .../output/OutputFieldFormDialog.vue          | 111 ++++++++++++++
 .../component/output/OutputFieldTable.vue     | 110 ++++++++++++++
 .../component/output/OutputTitleDialog.vue    |  81 +++++++++++
 .../nodes/tool-base-node/index.ts             |  18 +++
 .../nodes/tool-base-node/index.vue            |  33 +++++
 8 files changed, 708 insertions(+)
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldFormDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldTable.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputTitleDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldFormDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldTable.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputTitleDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/index.ts
 create mode 100644 ui/src/workflow-canvas/nodes/tool-base-node/index.vue

diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldFormDialog.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldFormDialog.vue
new file mode 100644
index 00000000000..7e69076e046
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldFormDialog.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const typeOptions = ['string', 'int', 'dict', 'array', 'float', 'boolean']
+const emit = defineEmits(['refresh'])
+const fieldFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const form = ref<any>({
+  field: '',
+  type: typeOptions[0],
+  label: '',
+  desc: '',
+  is_required: true,
+})
+
+const rules = reactive({
+  field: [
+    {
+      required: true,
+      message: '请输入参数名',
+      trigger: 'blur',
+    },
+  ],
+  label: [
+    {
+      required: true,
+      message: '请输入显示名',
+      trigger: 'blur',
+    },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      field: '',
+      type: typeOptions[0],
+      label: '',
+      desc: '',
+      is_required: true,
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({ open, close })
+</script>
+
+<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="field">
+        <el-input
+          v-model="form.field"
+          placeholder="请输入参数名"
+          maxlength="64"
+          show-word-limit
+          @blur="form.field = form.field.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="显示名" prop="label">
+        <el-input
+          v-model="form.label"
+          placeholder="请输入显示名"
+          :maxlength="128"
+          show-word-limit
+          @blur="form.label = form.label?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input
+          v-model="form.desc"
+          placeholder="请输入描述"
+          :maxlength="128"
+          show-word-limit
+          @blur="form.desc = form.desc?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="数据类型">
+        <el-select v-model="form.type">
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="必填" @click.prevent>
+        <el-switch size="small" v-model="form.is_required" />
+      </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>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldTable.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldTable.vue
new file mode 100644
index 00000000000..c141606bac0
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldTable.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import { MsgError } from '@/utils/message'
+import InputFieldFormDialog from './InputFieldFormDialog.vue'
+import InputTitleDialog from './InputTitleDialog.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+const inputFieldFormDialogRef = ref<InstanceType<typeof InputFieldFormDialog>>()
+const inputTitleDialogRef = ref<InstanceType<typeof InputTitleDialog>>()
+const inputFieldList = ref<any[]>([])
+const inputFieldConfig = ref({ title: '用户输入' })
+
+function openAddDialog(data?: any, index?: any) {
+  if (index !== undefined) {
+    currentIndex.value = index
+  }
+  inputFieldFormDialogRef.value?.open(data)
+}
+
+function openChangeTitleDialog() {
+  inputTitleDialogRef.value?.open(inputFieldConfig.value)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  set(props.nodeModel.properties, 'user_input_field_list', cloneDeep(inputFieldList.value))
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+const currentIndex = ref<number | null>(null)
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    if (
+      inputFieldList.value
+        .filter((item, index) => index != currentIndex.value)
+        .some((field) => field.field == data.field)
+    ) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    inputFieldList.value?.splice(currentIndex.value, 1, data)
+  } else {
+    if (inputFieldList.value.some((field) => field.field == data.field)) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    inputFieldList.value?.push(data)
+  }
+  set(props.nodeModel.properties, 'user_input_field_list', cloneDeep(inputFieldList.value))
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  props.nodeModel.graphModel.getNodeModelById('tool-start-node')?.clearNextNodeField(true)
+  inputFieldFormDialogRef.value?.close()
+  currentIndex.value = null
+}
+
+function refreshFieldTitle(data: any) {
+  inputFieldConfig.value = data
+  inputTitleDialogRef.value?.close()
+}
+
+onMounted(() => {
+  if (props.nodeModel.properties.user_input_config) {
+    inputFieldConfig.value = cloneDeep(props.nodeModel.properties.user_input_config)
+  }
+  if (props.nodeModel.properties.user_input_field_list) {
+    inputFieldList.value = cloneDeep(props.nodeModel.properties.user_input_field_list)
+  }
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+})
+</script>
+
+<template>
+  <div class="flex-between mb-4">
+    <h6 class="break-all ellipsis lighter" style="max-width: 80%" :title="inputFieldConfig.title">
+      {{ inputFieldConfig.title }}
+    </h6>
+    <div>
+      <el-button type="primary" link @click="openChangeTitleDialog">
+        <MkIcon name="icon_setting_outlined" />
+      </el-button>
+      <span class="ml-4">
+        <el-button link type="primary" @click="openAddDialog()">
+          <MkIcon name="icon_add_outlined" class="mr-4" />
+          添加
+        </el-button>
+      </span>
+    </div>
+  </div>
+
+  <el-table :data="inputFieldList" class="mb-4">
+    <el-table-column prop="field" label="参数名">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.field">
+          {{ row.field }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="label" label="显示名">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.label">
+          {{ row.label }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column label="数据类型">
+      <template #default="{ row }">
+        <el-tag type="info" class="info-tag">{{ row.type }}</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 label="操作" align="left" width="90">
+      <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)">
+              <MkIcon name="icon_edit_outlined" />
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <MkIcon name="icon_delete_outlined" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+  <InputFieldFormDialog ref="inputFieldFormDialogRef" @refresh="refreshFieldList" />
+  <InputTitleDialog ref="inputTitleDialogRef" @refresh="refreshFieldTitle" />
+</template>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputTitleDialog.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputTitleDialog.vue
new file mode 100644
index 00000000000..054c4f945fa
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputTitleDialog.vue
@@ -0,0 +1,81 @@
+<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<FormInstance>()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  title: '用户输入',
+})
+
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+  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>
+
+<template>
+  <el-dialog
+    title="设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input
+          v-model="form.title"
+          maxlength="64"
+          show-word-limit
+          @blur="form.title = form.title.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">
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldFormDialog.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldFormDialog.vue
new file mode 100644
index 00000000000..ae72f4e6986
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldFormDialog.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const typeOptions = ['string', 'int', 'dict', 'array', 'float', 'boolean']
+const emit = defineEmits(['refresh'])
+const fieldFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const form = ref<any>({
+  field: '',
+  type: typeOptions[0],
+  label: '',
+  is_required: true,
+})
+
+const rules = reactive({
+  field: [
+    {
+      required: true,
+      message: '请输入参数名',
+      trigger: 'blur',
+    },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      field: '',
+      type: typeOptions[0],
+      label: '',
+      is_required: true,
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({ open, close })
+</script>
+
+<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="field">
+        <el-input
+          v-model="form.field"
+          placeholder="请输入参数名"
+          maxlength="64"
+          show-word-limit
+          @blur="form.field = form.field.trim()"
+        />
+      </el-form-item>
+
+      <el-form-item label="显示名">
+        <el-input
+          v-model="form.label"
+          placeholder="请输入显示名"
+          :maxlength="128"
+          show-word-limit
+          @blur="form.label = form.label?.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>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldTable.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldTable.vue
new file mode 100644
index 00000000000..5366aecfecf
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputFieldTable.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import { MsgError } from '@/utils/message'
+import OutputFieldFormDialog from './OutputFieldFormDialog.vue'
+import OutputTitleDialog from './OutputTitleDialog.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+const outputFieldFormDialogRef = ref<InstanceType<typeof OutputFieldFormDialog>>()
+const outputTitleDialogRef = ref<InstanceType<typeof OutputTitleDialog>>()
+const outputFieldList = ref<any[]>([])
+const outputFieldConfig = ref({ title: '输出参数' })
+
+function openAddDialog(data?: any, index?: any) {
+  if (index !== undefined) {
+    currentIndex.value = index
+  }
+  outputFieldFormDialogRef.value?.open(data)
+}
+
+function openChangeTitleDialog() {
+  outputTitleDialogRef.value?.open(outputFieldConfig.value)
+}
+
+function deleteField(index: any) {
+  outputFieldList.value = outputFieldList.value.filter((item, i) => i !== index)
+  set(props.nodeModel.properties, 'user_output_field_list', outputFieldList.value)
+}
+
+const currentIndex = ref<number | null>(null)
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    if (
+      outputFieldList.value
+        .filter((item, index) => index != currentIndex.value)
+        .some((field) => field.field == data.field)
+    ) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    outputFieldList.value?.splice(currentIndex.value, 1, data)
+  } else {
+    if (outputFieldList.value.some((field) => field.field == data.field)) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    outputFieldList.value?.push(data)
+  }
+  set(props.nodeModel.properties, 'user_output_field_list', cloneDeep(outputFieldList.value))
+  outputFieldFormDialogRef.value?.close()
+  props.nodeModel.graphModel.getNodeModelById('tool-start-node')?.clearNextNodeField(true)
+  currentIndex.value = null
+}
+
+function refreshFieldTitle(data: any) {
+  outputFieldConfig.value = data
+  outputTitleDialogRef.value?.close()
+}
+
+onMounted(() => {
+  if (props.nodeModel.properties.user_output_config) {
+    outputFieldConfig.value = cloneDeep(props.nodeModel.properties.user_output_config)
+  }
+  if (props.nodeModel.properties.user_output_field_list) {
+    outputFieldList.value = cloneDeep(props.nodeModel.properties.user_output_field_list)
+  }
+})
+</script>
+
+<template>
+  <div class="flex-between mb-4">
+    <h6 class="break-all ellipsis lighter" style="max-width: 80%" :title="outputFieldConfig.title">
+      {{ outputFieldConfig.title }}
+    </h6>
+    <div>
+      <el-button type="primary" link @click="openChangeTitleDialog">
+        <MkIcon name="icon_setting_outlined" />
+      </el-button>
+      <span class="ml-4">
+        <el-button link type="primary" @click="openAddDialog()">
+          <MkIcon name="icon_add_outlined" class="mr-4" />
+          添加
+        </el-button>
+      </span>
+    </div>
+  </div>
+
+  <el-table :data="outputFieldList" class="mb-4">
+    <el-table-column prop="field" label="参数名" />
+    <el-table-column prop="label" label="显示名" />
+    <el-table-column label="操作" align="left" width="90">
+      <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)">
+              <MkIcon name="icon_edit_outlined" />
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <MkIcon name="icon_delete_outlined" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+  <OutputFieldFormDialog ref="outputFieldFormDialogRef" @refresh="refreshFieldList" />
+  <OutputTitleDialog ref="outputTitleDialogRef" @refresh="refreshFieldTitle" />
+</template>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputTitleDialog.vue b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputTitleDialog.vue
new file mode 100644
index 00000000000..2f516d281f8
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/component/output/OutputTitleDialog.vue
@@ -0,0 +1,81 @@
+<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<FormInstance>()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  title: '输出参数',
+})
+
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+  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>
+
+<template>
+  <el-dialog
+    title="设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input
+          v-model="form.title"
+          maxlength="64"
+          show-word-limit
+          @blur="form.title = form.title.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">
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/index.ts b/ui/src/workflow-canvas/nodes/tool-base-node/index.ts
new file mode 100644
index 00000000000..2f977e624de
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/index.ts
@@ -0,0 +1,18 @@
+import ToolBaseNode from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types.ts'
+
+class ToolBaseNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ToolBaseNode)
+  }
+}
+
+class ToolBaseNodeModel extends WorkflowNodeModel {
+  setAttributes() {
+    super.setAttributes()
+    this.width = 600
+  }
+}
+
+export default { type: WorkflowNodeType.ToolBaseNode, model: ToolBaseNodeModel, view: ToolBaseNodeView }
\ No newline at end of file
diff --git a/ui/src/workflow-canvas/nodes/tool-base-node/index.vue b/ui/src/workflow-canvas/nodes/tool-base-node/index.vue
new file mode 100644
index 00000000000..02e7d62b9f1
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/tool-base-node/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+import InputFieldTable from './component/input/InputFieldTable.vue'
+import OutputFieldTable from './component/output/OutputFieldTable.vue'
+
+defineOptions({ name: 'WorkflowToolBaseNode' })
+
+const getModel = inject('getModel') as () => WorkflowNodeModel
+const model = getModel()
+
+const formData = computed({
+  get: () => model.properties,
+  set: (value) => set(model.properties, 'node_data', value),
+})
+
+onMounted(() => {
+  if (!Array.isArray(model.properties.user_input_field_list)) model.properties.user_input_field_list = []
+  if (!Array.isArray(model.properties.user_output_field_list)) model.properties.user_output_field_list = []
+  if (!model.properties.user_input_config) model.properties.user_input_config = { title: '用户输入' }
+  if (!model.properties.user_output_config) model.properties.user_output_config = { title: '输出参数' }
+})
+</script>
+
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mk-title-decoration mb-2">节点设置</h6>
+    <InputFieldTable :node-model="model" />
+    <OutputFieldTable :node-model="model" />
+  </NodeContainer>
+</template>
\ No newline at end of file