From 21b241662fa3f397984a8fa998fb2a88efe723ba Mon Sep 17 00:00:00 2001
From: panxinying <xinying.pan@fit2cloud.com>
Date: Thu, 3 Sep 2026 10:58:03 +0800
Subject: [PATCH] feat: parameter extraction node

---
 .../icons/parameter-extraction-node-icon.vue  |   6 +
 .../component/ParametersFieldDialog.vue       | 102 +++++++++++
 .../component/ParametersFieldTable.vue        | 117 +++++++++++++
 .../nodes/parameter-extraction-node/index.ts  |  11 ++
 .../nodes/parameter-extraction-node/index.vue | 162 ++++++++++++++++++
 5 files changed, 398 insertions(+)
 create mode 100644 ui/src/workflow-canvas/icons/parameter-extraction-node-icon.vue
 create mode 100644 ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue
 create mode 100644 ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
 create mode 100644 ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
 create mode 100644 ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue

diff --git a/ui/src/workflow-canvas/icons/parameter-extraction-node-icon.vue b/ui/src/workflow-canvas/icons/parameter-extraction-node-icon.vue
new file mode 100644
index 00000000000..7ea4a139f8c
--- /dev/null
+++ b/ui/src/workflow-canvas/icons/parameter-extraction-node-icon.vue
@@ -0,0 +1,6 @@
+<template>
+  <el-avatar class="ai-avatar-gradient" shape="square">
+    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
+  </el-avatar>
+</template>
+<script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue
new file mode 100644
index 00000000000..14569f64c02
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldDialog.vue
@@ -0,0 +1,102 @@
+<template>
+  <MkDialog
+    v-model="dialogVisible"
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    width="520px"
+    append-to-body
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form ref="fieldFormRef" label-position="top" require-asterisk-position="right" :rules="rules" :model="form">
+      <el-form-item label="参数" prop="field" :rules="rules.field">
+        <el-input v-model="form.field" :maxlength="64" placeholder="请输入参数" show-word-limit />
+      </el-form-item>
+      <el-form-item label="显示名称" prop="label" :rules="rules.label">
+        <el-input v-model="form.label" :maxlength="64" placeholder="请输入显示名称" show-word-limit />
+      </el-form-item>
+      <el-form-item label="参数类型" prop="parameter_type" :rules="rules.parameter_type">
+        <el-select :teleported="false" v-model="form.parameter_type" placeholder="请选择参数类型" style="width: 100%">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="描述" prop="desc">
+        <el-input v-model="form.desc" type="textarea" :rows="2" placeholder="请输入描述" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)"> 保存 </el-button>
+      </span>
+    </template>
+  </MkDialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, useTemplateRef } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { FormInstance } from 'element-plus'
+
+defineOptions({ name: 'ParameterExtractionFieldDialog' })
+
+const emit = defineEmits<{ refresh: [data: Record<string, unknown>, index?: number] }>()
+
+const options = [
+  { value: 'string', label: 'string' },
+  { value: 'number', label: 'number' },
+  { value: 'object', label: 'object' },
+  { value: 'boolean', label: 'boolean' },
+  { value: 'array', label: 'array' },
+]
+
+const fieldFormRef = useTemplateRef<FormInstance>('fieldFormRef')
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const currentIndex = ref<number | undefined>(undefined)
+const form = ref<{ field: string; label: string; parameter_type: string; desc: string }>({
+  field: '',
+  label: '',
+  parameter_type: '',
+  desc: '',
+})
+
+const rules = reactive({
+  field: [
+    { required: true, message: '请输入参数', trigger: 'blur' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '参数可由字母、数字、下划线组成', trigger: 'blur' },
+  ],
+  label: [{ required: true, message: '请输入显示名称', trigger: 'blur' }],
+  parameter_type: [{ required: true, message: '请选择参数类型', trigger: 'change' }],
+})
+
+function resetForm() {
+  form.value = { field: '', label: '', parameter_type: '', desc: '' }
+}
+
+function open(row?: Record<string, unknown>, index?: number) {
+  resetForm()
+  if (row) {
+    form.value = cloneDeep(row as typeof form.value)
+    isEdit.value = true
+    currentIndex.value = index
+  }
+  dialogVisible.value = true
+}
+
+function close() {
+  dialogVisible.value = false
+  isEdit.value = false
+  currentIndex.value = undefined
+  resetForm()
+}
+
+const submit = async (formEl: FormInstance | null) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', cloneDeep(form.value), currentIndex.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
new file mode 100644
index 00000000000..eeb31c42583
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/component/ParametersFieldTable.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="w-full">
+    <div class="flex w-full items-center justify-between">
+      <h6 class="font-medium">
+        提取参数
+        <span class="text-danger">*</span>
+      </h6>
+      <el-button link type="primary" @click="openAddDialog()">
+        <MkIcon name="icon_add_outlined" class="mr-1" />
+        添加
+      </el-button>
+    </div>
+
+    <el-table v-if="inputFieldList.length > 0" :data="inputFieldList" row-key="field" class="border">
+      <el-table-column prop="field" label="参数" width="100" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span :title="row.field" class="ellipsis-1">{{ row.field }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="label" label="显示名称">
+        <template #default="{ row }">
+          <span :title="row.label" class="ellipsis-1">{{ row.label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="参数类型">
+        <template #default="{ row }">
+          <el-tag size="small" type="info" class="info-tag">{{ row.parameter_type }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="90">
+        <template #default="{ row, $index }">
+          <el-button link type="primary" @click="openAddDialog(row, $index)">
+            <MkIcon name="icon_edit_outlined" />
+          </el-button>
+          <el-button link type="info" @click="deleteField($index)">
+            <MkIcon name="icon_delete-trash_outlined" />
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-empty v-else description="暂无参数，请点击添加" :image-size="60" />
+
+    <ParametersFieldDialog ref="ParamsFieldDialogRef" @refresh="refreshFieldList" />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+
+import ParametersFieldDialog from './ParametersFieldDialog.vue'
+
+defineOptions({ name: 'WorkflowParameterExtractionFieldTable' })
+
+const props = defineProps<{ nodeModel: WorkflowNodeModel }>()
+
+const ParamsFieldDialogRef = ref<InstanceType<typeof ParametersFieldDialog>>()
+
+const nodeProps = props.nodeModel.properties as unknown as {
+  config: Record<string, unknown>
+  node_data: Record<string, unknown>
+}
+
+const inputFieldList = computed<Array<Record<string, unknown>>>({
+  get: () => {
+    if (!nodeProps.node_data) {
+      set(nodeProps, 'node_data', {})
+    }
+    if (!Array.isArray(nodeProps.node_data.variable_list)) {
+      set(nodeProps.node_data, 'variable_list', [])
+    }
+    return nodeProps.node_data.variable_list as Array<Record<string, unknown>>
+  },
+  set: (value) => {
+    set(nodeProps.node_data, 'variable_list', value)
+  },
+})
+
+function syncConfig() {
+  const fields = [{ label: '结果', value: 'result' }, ...inputFieldList.value.map((item) => ({ label: item.label, value: item.field }))]
+  if (!nodeProps.config) {
+    set(nodeProps, 'config', {})
+  }
+  set(nodeProps.config, 'fields', fields)
+  props.nodeModel.clearNextNodeField(false)
+}
+
+function openAddDialog(data?: Record<string, unknown>, index?: number) {
+  ParamsFieldDialogRef.value?.open(data, index)
+}
+
+function deleteField(index: number) {
+  const list = cloneDeep(inputFieldList.value)
+  list.splice(index, 1)
+  inputFieldList.value = list
+  syncConfig()
+}
+
+function refreshFieldList(data: Record<string, unknown>, index?: number) {
+  const field = data as { field: string }
+  for (let i = 0; i < inputFieldList.value.length; i++) {
+    if ((inputFieldList.value[i] as { field: string }).field === field.field && index !== i) {
+      return
+    }
+  }
+
+  const list = cloneDeep(inputFieldList.value)
+  if (index === undefined || index === null) {
+    list.push(data)
+  } else {
+    list.splice(index, 1, data)
+  }
+  inputFieldList.value = list
+  ParamsFieldDialogRef.value?.close()
+  syncConfig()
+}
+</script>
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
new file mode 100644
index 00000000000..fee77a46ce4
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.ts
@@ -0,0 +1,11 @@
+import ParameterExtractionNodeVue from './index.vue'
+import { WorkflowNodeModel, WorkflowNodeView } from '@/workflow-canvas/core/workflow-node'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+class ParameterExtractionNodeView extends WorkflowNodeView {
+  constructor(props: ConstructorParameters<typeof WorkflowNodeView>[0]) {
+    super(props, ParameterExtractionNodeVue)
+  }
+}
+
+export default { type: WorkflowNodeType.ParameterExtractionNode, model: WorkflowNodeModel, view: ParameterExtractionNodeView }
diff --git a/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue
new file mode 100644
index 00000000000..d0231cdb22e
--- /dev/null
+++ b/ui/src/workflow-canvas/nodes/parameter-extraction-node/index.vue
@@ -0,0 +1,162 @@
+<template>
+  <NodeContainer :node-model="model">
+    <h6 class="mb-3">节点设置</h6>
+    <el-form ref="formRef" :model="formData" label-position="top" hide-required-asterisk @submit.prevent>
+      <el-form-item
+        v-if="formData.model_id_type === 'reference'"
+        prop="model_id_reference"
+        :rules="{ required: true, message: '请选择 AI 模型', trigger: 'change' }"
+      >
+        <template #label>
+          <div class="flex-between gap-3 w-full">
+            <span>AI 模型<span class="text-danger">*</span></span>
+            <el-select v-model="formData.model_id_type" :teleported="false" class="w-30!" size="small" @change="formData.model_id_reference = []">
+              <el-option label="引用变量" value="reference" />
+              <el-option label="自定义" value="custom" />
+            </el-select>
+          </div>
+        </template>
+        <NodeCascader
+          ref="modelCascaderRef"
+          v-model="formData.model_id_reference"
+          :node-model="model"
+          class="w-full"
+          placeholder="请选择变量"
+        />
+      </el-form-item>
+
+      <el-form-item
+        v-else
+        prop="model_id"
+        :rules="{ required: true, message: '请选择 AI 模型', trigger: 'change' }"
+      >
+        <template #label>
+          <div class="flex-between gap-3 w-full">
+            <span>AI 模型<span class="text-danger">*</span></span>
+            <el-select v-model="formData.model_id_type" :teleported="false" class="w-30!" size="small" @change="formData.model_id_reference = []">
+              <el-option label="引用变量" value="reference" />
+              <el-option label="自定义" value="custom" />
+            </el-select>
+          </div>
+        </template>
+        <ModelSelect placeholder="请输入 AI 模型 ID" :options="modelList" :provider-options="providerOptions" v-model="formData.model_id" />
+      </el-form-item>
+
+      <el-form-item prop="input_variable" :rules="{ required: true, message: '请选择输入变量', trigger: 'change' }">
+        <template #label>
+          <span>输入变量<span class="text-danger">*</span></span>
+        </template>
+        <NodeCascader ref="inputVariableCascaderRef" v-model="formData.input_variable" :node-model="model" class="w-full" placeholder="请选择变量" />
+      </el-form-item>
+
+      <el-form-item prop="variable_list" :rules="{ required: true, message: '请添加提取参数', trigger: 'blur' }">
+        <ParametersFieldTable ref="paramsFieldTableRef" :node-model="model" />
+      </el-form-item>
+    </el-form>
+  </NodeContainer>
+</template>
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { set } from 'lodash'
+import type { FormInstance } from 'element-plus'
+import ModelSelect from '@/components/business/model-select/index.vue'
+import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
+import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
+import { useWorkflowStore } from '@/workflow-canvas/store'
+import type { BaseNodeModel } from '@logicflow/core'
+import type { ModelItem, ModelProviderItem } from '@/api/types'
+import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
+import ParametersFieldTable from './component/ParametersFieldTable.vue'
+
+defineOptions({ name: 'WorkflowParameterExtractionNode' })
+const getModel = inject('getModel') as () => BaseNodeModel
+const apiType = (inject('apiType') as string) || 'workspace'
+const model = getModel() as WorkflowNodeModel
+
+interface ParameterExtractionForm {
+  input_variable: string[]
+  model_params_setting: Record<string, unknown>
+  model_id: string
+  model_id_type: 'custom' | 'reference'
+  model_id_reference: string[]
+  variable_list: Array<Record<string, unknown>>
+}
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const modelCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('modelCascaderRef')
+const inputVariableCascaderRef = useTemplateRef<InstanceType<typeof NodeCascader>>('inputVariableCascaderRef')
+const paramsFieldTableRef = useTemplateRef<InstanceType<typeof ParametersFieldTable>>('paramsFieldTableRef')
+
+const store = useWorkflowStore(apiType)
+const modelList = ref<Array<ModelItem>>([])
+const providerOptions = ref<Array<ModelProviderItem>>([])
+
+const formData = computed<ParameterExtractionForm>({
+  get: () => {
+    if (!model.properties.node_data) {
+      set(model.properties, 'node_data', {
+        input_variable: [],
+        model_params_setting: {},
+        model_id: '',
+        model_id_type: 'custom',
+        model_id_reference: [],
+        variable_list: [],
+      })
+    }
+    const data = model.properties.node_data as ParameterExtractionForm
+    if (data.model_id_type === undefined) set(data, 'model_id_type', 'custom')
+    if (!Array.isArray(data.model_id_reference)) set(data, 'model_id_reference', [])
+    if (!data.model_params_setting) set(data, 'model_params_setting', {})
+    const shouldInit = data.input_variable !== undefined || data.variable_list !== undefined
+    if (shouldInit) {
+      if (!Array.isArray(data.input_variable)) set(data, 'input_variable', [])
+      if (!Array.isArray(data.variable_list)) set(data, 'variable_list', [])
+    }
+    return data
+  },
+  set: (value) => (model.properties.node_data = value),
+})
+
+watch(
+  () => [formData.value.model_id, formData.value.model_id_reference],
+  () => {
+    const isReference = formData.value.model_id_type === 'reference'
+    const targetProp = isReference ? 'model_id_reference' : 'model_id'
+    const hasValue = isReference ? formData.value.model_id_reference.length > 0 : Boolean(formData.value.model_id)
+    if (hasValue) {
+      formRef.value?.clearValidate(targetProp)
+    }
+  },
+)
+
+function validate() {
+  const list: Array<Promise<unknown>> = []
+  const formResult = formRef.value?.validate()
+  if (formResult) list.push(formResult)
+  if (formData.value.model_id_type === 'reference') {
+    const r = modelCascaderRef.value?.validate()
+    if (r) list.push(r)
+  }
+  const inputR = inputVariableCascaderRef.value?.validate()
+  if (inputR) list.push(inputR)
+  if (!formData.value.variable_list.length) {
+    list.push(Promise.reject('请添加提取参数'))
+  }
+  return Promise.all(list).catch((error) => Promise.reject({ node: model, errMessage: error }))
+}
+
+onMounted(() => {
+  set(model, 'validate', validate)
+  store.getModelList({ model_type: 'LLM' }).then((data) => {
+    modelList.value = data
+  })
+  store.getProviderList().then((data) => {
+    providerOptions.value = data
+  })
+})
+</script>
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  margin-bottom: 16px;
+}
+</style>