From 43ef8b4af334e72ef71f419545f36cb1b7361cf6 Mon Sep 17 00:00:00 2001
From: zhangzhanwei <zhanwei.zhang@fit2cloud.com>
Date: Fri, 22 May 2026 11:16:04 +0800
Subject: [PATCH] feat: User input params float

---
 .../component/chat-input-operate/index.vue    |   7 +-
 .../inline-params/InlineFormItem.vue          | 157 +++++++++++
 .../ai-chat/component/inline-params/index.vue | 264 ++++++++++++++++++
 .../ai-chat/component/user-form/index.vue     |  12 +-
 ui/src/components/ai-chat/index.vue           |  46 +--
 ui/src/components/dynamics-form/index.vue     |   4 +-
 .../items/common/SelectHeader.vue             |  30 ++
 .../items/knowledge/Knowledge.vue             |   4 +
 .../dynamics-form/items/model/Model.vue       |   4 +
 .../items/select/MultiSelect.vue              |   4 +
 .../items/select/SingleSelect.vue             |   4 +
 .../dynamics-form/items/tree/TreeSelect.vue   |  10 +-
 .../component/UserInputFieldTable.vue         |  12 +-
 .../component/UserInputTitleDialog.vue        |  62 +++-
 14 files changed, 573 insertions(+), 47 deletions(-)
 create mode 100644 ui/src/components/ai-chat/component/inline-params/InlineFormItem.vue
 create mode 100644 ui/src/components/ai-chat/component/inline-params/index.vue
 create mode 100644 ui/src/components/dynamics-form/items/common/SelectHeader.vue

diff --git a/ui/src/components/ai-chat/component/chat-input-operate/index.vue b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
index 5739d68ae24..4240df59962 100644
--- a/ui/src/components/ai-chat/component/chat-input-operate/index.vue
+++ b/ui/src/components/ai-chat/component/chat-input-operate/index.vue
@@ -210,10 +210,9 @@
         @paste="handlePaste"
         class="chat-operate-textarea"
       />
-
       <div class="operate flex-between">
         <div>
-          <slot name="userInput" />
+          <slot name="inlineParams" />
         </div>
         <div class="flex align-center">
           <template v-if="props.applicationDetails.stt_model_enable">
@@ -922,9 +921,7 @@ function autoSendMessage() {
         quickInputRef.value.textarea.style.height = '45px'
       }
     })
-    .catch(() => {
-      emit('update:showUserInput', true)
-    })
+    .catch(() => {})
 }
 
 function sendChatHandle(event?: any) {
diff --git a/ui/src/components/ai-chat/component/inline-params/InlineFormItem.vue b/ui/src/components/ai-chat/component/inline-params/InlineFormItem.vue
new file mode 100644
index 00000000000..befe04f55bf
--- /dev/null
+++ b/ui/src/components/ai-chat/component/inline-params/InlineFormItem.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    class="inline-form-item"
+    v-loading="loading"
+    :style="{
+      width:
+        formfield.input_type === 'SwitchInput' || formfield.input_type === 'DatePicker'
+          ? 'auto'
+          : '150px',
+    }"
+  >
+    <div
+      v-if="formfield.input_type === 'SwitchInput'"
+      style="
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        padding: 0 8px;
+        height: 32px;
+      "
+    >
+      <span style="font-size: 13px; color: #606266; white-space: nowrap">{{ switchLabel }}</span>
+      <component
+        ref="componentFormRef"
+        :view="view"
+        v-model="itemValue"
+        :is="formfield.input_type"
+        :form-field="formfield"
+        :other-params="otherParams"
+        :field="formfield.field"
+        v-bind="attrs"
+        :formfield-list="formfieldList"
+      ></component>
+    </div>
+    <component
+      v-else
+      ref="componentFormRef"
+      :view="view"
+      v-model="itemValue"
+      :is="formfield.input_type"
+      :form-field="formfield"
+      :other-params="otherParams"
+      :field="formfield.field"
+      v-bind="attrs"
+      :formfield-list="formfieldList"
+    ></component>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, type Ref } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import type { Dict } from '@/api/type/common'
+import bus from '@/utils/bus'
+import { get } from 'lodash'
+
+const props = defineProps<{
+  modelValue: any
+  formfield: FormField
+  view: boolean
+  otherParams: any
+  trigger: (
+    trigger_field: string,
+    trigger_value: any,
+    trigger_setting: any,
+    self: any,
+    loading: Ref<boolean>,
+  ) => void
+  initDefaultData: (formItem: FormField) => void
+  defaultItemWidth: string
+  formValue: Dict<any>
+  formfieldList: Array<FormField>
+  parent_field?: string
+}>()
+
+const emit = defineEmits(['change', 'changeLabel'])
+const loading = ref<boolean>(false)
+const componentFormRef = ref<any>()
+
+const itemValue = computed({
+  get: () => props.modelValue,
+  set: (value: any) => {
+    emit('change', value)
+    if (props.parent_field) {
+      bus.emit(props.parent_field + '.' + props.formfield.field, value)
+    } else {
+      bus.emit(props.formfield.field, value)
+    }
+  },
+})
+
+const attrs = computed(() => props.formfield.attrs || {})
+
+const switchLabel = computed(() => {
+  const label =
+    typeof props.formfield.label === 'string'
+      ? props.formfield.label
+      : props.formfield.label?.label || props.formfield.field
+  return label.length > 5 ? label.slice(0, 5) + '…' : label
+})
+
+const initTrigger = (self: any, trigger_field_dict?: Dict<any>) => {
+  if (trigger_field_dict) {
+    Object.keys(trigger_field_dict).forEach((key) => {
+      const setting = trigger_field_dict[key]
+      const triggerValues = setting['values']
+      const value = get(props.formValue, key)
+      if (triggerValues && triggerValues.length > 0) {
+        if (triggerValues.includes(value)) {
+          props.trigger(key, value, setting, self, loading)
+        }
+      } else {
+        props.trigger(key, value, setting, self, loading)
+      }
+    })
+  }
+}
+
+const onTrigger = (self: any, trigger_field_dict?: Dict<any>) => {
+  if (trigger_field_dict) {
+    Object.keys(trigger_field_dict).forEach((key) => {
+      const setting = trigger_field_dict[key]
+      const values: Array<any> = setting.values
+      bus.on(key, (v: any) => {
+        if (values && values.length > 0) {
+          if (values.includes(v)) {
+            props.trigger(key, v, setting, self, loading)
+          }
+        } else {
+          props.trigger(key, v, setting, self, loading)
+        }
+      })
+    })
+  }
+}
+
+onMounted(() => {
+  props.initDefaultData(props.formfield)
+  initTrigger(props.formfield, props.formfield.relation_trigger_field_dict)
+  onTrigger(props.formfield, props.formfield.relation_trigger_field_dict)
+})
+
+defineExpose({
+  validate: () => {
+    if (props.formfield.trigger_type === 'CHILD_FORMS' && componentFormRef.value) {
+      return componentFormRef.value.validate()
+    }
+    return Promise.resolve()
+  },
+})
+</script>
+<style lang="scss" scoped>
+.inline-form-item {
+  flex-shrink: 0;
+}
+</style>
diff --git a/ui/src/components/ai-chat/component/inline-params/index.vue b/ui/src/components/ai-chat/component/inline-params/index.vue
new file mode 100644
index 00000000000..464276e05f6
--- /dev/null
+++ b/ui/src/components/ai-chat/component/inline-params/index.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="inline-params" v-if="fieldList.length > 0">
+    <template v-for="item in exposedFields" :key="item.field">
+      <InlineFormItem
+        v-if="show(item)"
+        v-bind:modelValue="formValue[item.field]"
+        @change="change(item, $event)"
+        :formfield="item"
+        :trigger="trigger"
+        :view="false"
+        :initDefaultData="initDefaultData"
+        defaultItemWidth="auto"
+        :other-params="{}"
+        :form-value="formValue"
+        :formfield-list="fieldList"
+      />
+    </template>
+    <el-button link v-if="dialogFields.length > 0" @click="emit('openDialog')">
+      <AppIcon iconName="app-setting"></AppIcon>
+    </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import type { FormField } from '@/components/dynamics-form/type'
+import type { Dict } from '@/api/type/common'
+import { evaluateVisibility } from '@/components/dynamics-form/visibility'
+import InlineFormItem from './InlineFormItem.vue'
+import { t } from '@/locales'
+import _ from 'lodash'
+import { MsgWarning } from '@/utils/message'
+
+const props = defineProps<{
+  application: any
+  formData: any
+  maxExposed?: number
+}>()
+
+const emit = defineEmits(['update:formData', 'openDialog'])
+
+const fieldList = ref<FormField[]>([])
+const formValue = ref<Dict<any>>({})
+const setting = ref<{ exposed_fields: string[]; menu_title: string }>({
+  exposed_fields: [],
+  menu_title: '更多设置',
+})
+
+watch(
+  formValue,
+  () => {
+    emit('update:formData', formValue.value)
+  },
+  { deep: true },
+)
+
+watch(
+  () => props.formData,
+  (val) => {
+    if (val && JSON.stringify(val) !== JSON.stringify(formValue.value)) {
+      formValue.value = val
+      for (const field of fieldList.value) {
+        if (
+          field.default_value &&
+          !formValue.value[field.field] &&
+          formValue.value[field.field] !== false &&
+          (field.show_default_value === true || field.show_default_value === undefined)
+        ) {
+          formValue.value[field.field] = field.default_value
+        }
+      }
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.application,
+  () => {
+    handleInputFieldList()
+  },
+)
+
+function handleInputFieldList() {
+  props.application?.work_flow?.nodes
+    ?.filter((v: any) => v.id === 'base-node')
+    .map((v: any) => {
+      fieldList.value = v.properties.user_input_field_list
+        ? v.properties.user_input_field_list.map((v: any) => {
+            let field
+            switch (v.type) {
+              case 'input':
+                field = {
+                  field: v.variable,
+                  input_type: 'TextInput',
+                  label: v.name,
+                  default_value: v.default_value,
+                  required: v.is_required,
+                }
+                break
+              case 'select':
+                field = {
+                  field: v.variable,
+                  input_type: 'SingleSelect',
+                  label: v.name,
+                  default_value: v.default_value,
+                  required: v.is_required,
+                  option_list: v.optionList.map((o: any) => ({ key: o, value: o })),
+                }
+                break
+              case 'date':
+                field = {
+                  field: v.variable,
+                  input_type: 'DatePicker',
+                  label: v.name,
+                  default_value: v.default_value,
+                  required: v.is_required,
+                  attrs: {
+                    format: 'YYYY-MM-DD HH:mm:ss',
+                    'value-format': 'YYYY-MM-DD HH:mm:ss',
+                    type: 'datetime',
+                  },
+                }
+                break
+              default:
+                field = { ...v }
+                break
+            }
+            const isEmpty =
+              !field.default_value ||
+              (Array.isArray(field.default_value) && field.default_value.length === 0) ||
+              (typeof field.default_value === 'object' &&
+                Object.keys(field.default_value).length === 0)
+            if (isEmpty) {
+              const label =
+                typeof field.label === 'string' ? field.label : field.label?.label || field.field
+              const truncated = label.length > 5 ? label.slice(0, 5) + '…' : label
+              field.attrs = { ...field.attrs, placeholder: truncated }
+            }
+            field.attrs = {
+              ...field.attrs,
+              popperHeader: {
+                label:
+                  typeof field.label === 'string' ? field.label : field.label?.label || field.field,
+                required: field.required,
+                tooltip: typeof field.label === 'object' ? field.label?.attrs?.tooltip : undefined,
+              },
+            }
+            return field
+          })
+        : []
+
+      setting.value = v.properties.user_input_field_list_setting || {
+        exposed_fields: [],
+        menu_title: '更多设置',
+      }
+    })
+}
+
+const exposedFields = computed(() => {
+  if (setting.value.exposed_fields.length === 0) return fieldList.value
+  return setting.value.exposed_fields
+    .map((field: string) => fieldList.value.find((f) => f.field === field))
+    .filter(Boolean)
+    .slice(0, props.maxExposed ?? 3) as FormField[]
+})
+
+const dialogFields = computed(() => {
+  if (setting.value.exposed_fields.length === 0) return []
+  return fieldList.value.filter((f) => !setting.value.exposed_fields.includes(f.field))
+})
+
+const show = (field: FormField) => {
+  if (field.relation_show_field_dict) {
+    const keys = Object.keys(field.relation_show_field_dict)
+    for (const index in keys) {
+      const key = keys[index]
+      const v = _.get(formValue.value, key)
+      if (v && v !== undefined && v !== null) {
+        const values = field.relation_show_field_dict[key]
+        if (values && values.length > 0) {
+          return values.includes(v)
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    }
+  }
+  if (field.visibility_rules?.node_id) {
+    return evaluateVisibility(field.visibility_rules, {
+      formValue: formValue.value,
+      currentNodeId: field.visibility_rules.node_id,
+      currentNodeName: field.visibility_rules.node_name || '',
+    })
+  }
+  return true
+}
+
+defineExpose({
+  validate: () => {
+    for (const item of exposedFields.value) {
+      if (!show(item)) continue
+      const isRequired = item.required ?? item.is_required
+      if (isRequired) {
+        const value = formValue.value[item.field]
+        const isEmpty =
+          value === undefined ||
+          value === null ||
+          value === '' ||
+          (Array.isArray(value) && value.length === 0) ||
+          (typeof value === 'object' && Object.keys(value).length === 0)
+        if (isEmpty) {
+          const name = typeof item.label === 'string' ? item.label : item.label?.label || item.field
+          MsgWarning(`${name} 为必填属性`)
+          return Promise.reject(false)
+        }
+      }
+    }
+    return Promise.resolve(true)
+  },
+})
+
+const change = (field: FormField, value: any) => {
+  formValue.value[field.field] = value
+}
+
+const trigger = (
+  trigger_field: string,
+  trigger_value: any,
+  trigger_setting: any,
+  self: any,
+  loading: any,
+) => {
+  // 暂留空，后续按需补充
+}
+
+const initDefaultData = (formField: FormField) => {
+  if (
+    formField.default_value &&
+    (formValue.value[formField.field] === undefined ||
+      formValue.value[formField.field] === null ||
+      !formValue.value[formField.field]) &&
+    formValue.value[formField.field] != false
+  ) {
+    if (formField.show_default_value === true || formField.show_default_value === undefined) {
+      formValue.value[formField.field] = formField.default_value
+    }
+  }
+}
+
+onMounted(() => {
+  handleInputFieldList()
+})
+</script>
+<style lang="scss" scoped>
+.inline-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding: 4px 0;
+}
+</style>
diff --git a/ui/src/components/ai-chat/component/user-form/index.vue b/ui/src/components/ai-chat/component/user-form/index.vue
index 327ec2cf4a6..07f1bebf4fa 100644
--- a/ui/src/components/ai-chat/component/user-form/index.vue
+++ b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -8,8 +8,8 @@
   >
     <el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px">
       <div class="flex align-center cursor w-full" style="padding: 0 8px">
-        <span class="break-all ellipsis-1 mr-16" :title="inputFieldConfig.title">
-          {{ inputFieldConfig.title }}
+        <span class="break-all ellipsis-1 mr-16" :title="props.title || '更多设置'">
+          {{ props.title || '更多设置' }}
         </span>
       </div>
 
@@ -66,6 +66,8 @@ const props = defineProps<{
   api_form_data: any
   form_data: any
   first?: boolean
+  excludeFields?: string[]
+  title?: string
 }>()
 // 用于刷新动态表单
 const dynamicsFormRefresh = ref(0)
@@ -191,7 +193,11 @@ function handleInputFieldList() {
                 }
               })
           : []
-
+      if (props.excludeFields?.length) {
+        inputFieldList.value = inputFieldList.value.filter(
+          (f: any) => !props.excludeFields!.includes(f.field),
+        )
+      }
       apiInputFieldList.value = v.properties.api_input_field_list
         ? v.properties.api_input_field_list.map((v: any) => {
             switch (v.type) {
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index c784ff1c997..77d6815a452 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -14,14 +14,21 @@
       <UserForm
         v-model:api_form_data="api_form_data"
         v-model:form_data="form_data"
+        :excludeFields="
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_field_list_setting?.exposed_fields || []
+        "
+        :title="
+          applicationDetails?.work_flow?.nodes?.find((v: any) => v.id === 'base-node')?.properties
+            ?.user_input_field_list_setting?.menu_title
+        "
         :application="applicationDetails"
         :type="type"
         :first="firsUserInput"
         @confirm="UserFormConfirm"
         @cancel="UserFormCancel"
         ref="userFormRef"
-      >
-      </UserForm>
+      />
     </div>
     <template v-if="!(isUserInput || isAPIInput) || !firsUserInput || type === 'log'">
       <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
@@ -141,17 +148,15 @@
           v-model:show-user-input="showUserInput"
           v-else-if="type !== 'log' && type !== 'share'"
         >
-          <template #userInput>
-            <el-button
-              v-if="isUserInput || isAPIInput"
-              class="user-input-button mb-8"
-              @click="toggleUserInput"
+          <template #inlineParams>
+            <InlineParams
+              ref="inlineParamsRef"
+              :application="applicationDetails"
+              :maxExposed="isMobile ? 1 : 3"
+              v-model:form-data="form_data"
+              @openDialog="handleOpenDialog"
             >
-              <AppIcon iconName="app-edit" :size="16" class="mr-4"></AppIcon>
-              <span class="ellipsis">
-                {{ userInputTitle || $t('chat.userInput') }}
-              </span>
-            </el-button>
+            </InlineParams>
           </template>
         </ChatInputOperate>
       </div>
@@ -196,6 +201,7 @@ import { throttle } from 'lodash-es'
 import { copyClick } from '@/utils/clipboard'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import { getWrite } from '@/utils/chat'
+import InlineParams from '@/components/ai-chat/component/inline-params/index.vue'
 
 provide('upload', (file: any, loading?: Ref<boolean>) => {
   return props.type === 'debug-ai-chat'
@@ -273,6 +279,8 @@ const showUserInput = ref(false)
 const initialFormData = ref({})
 const initialApiFormData = ref({})
 
+const inlineParamsRef = ref<InstanceType<typeof InlineParams>>()
+
 const isUserInput = computed(
   () =>
     props.applicationDetails?.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')[0]
@@ -304,11 +312,6 @@ watch(
       firsUserInput.value = false
     } else {
       chartOpenId.value = ''
-      if (isUserInput.value) {
-        firsUserInput.value = true
-      } else if (props.type == 'debug-ai-chat' && isAPIInput.value) {
-        firsUserInput.value = true
-      }
     }
   },
   { deep: true, immediate: true },
@@ -391,6 +394,12 @@ function toggleSelect(id: number) {
   }
 }
 
+const handleOpenDialog = () => {
+  showUserInput.value = true
+  initialFormData.value = JSON.parse(JSON.stringify(form_data.value))
+  initialApiFormData.value = JSON.parse(JSON.stringify(api_form_data.value))
+}
+
 function cancelCheckHandle() {
   checkAll.value = false
   multipleSelectionChat.value = []
@@ -420,7 +429,7 @@ function UserFormCancel() {
 }
 
 const validate = () => {
-  return userFormRef.value?.validate() || Promise.reject(false)
+  return inlineParamsRef.value?.validate() || Promise.resolve(true)
 }
 
 function sendMessage(val: string, other_params_data?: any, chat?: chatType): Promise<boolean> {
@@ -561,7 +570,6 @@ function getChartOpenId(chat?: any, problem?: string, re_chat?: boolean, other_p
   })
 }
 
-
 const errorWrite = (chat: any, message?: string) => {
   ChatManagement.addChatRecord(chat, 50, loading)
   ChatManagement.write(chat.id)
diff --git a/ui/src/components/dynamics-form/index.vue b/ui/src/components/dynamics-form/index.vue
index a6ad5f18ab5..64bcaf47199 100644
--- a/ui/src/components/dynamics-form/index.vue
+++ b/ui/src/components/dynamics-form/index.vue
@@ -266,7 +266,9 @@ const getFormDefaultValue = (fieldList: Array<any>, form_data?: any) => {
             if (typeof form_data[item.field] === 'string') {
               return i[value_field] === form_data[item.field]
             } else {
-              return form_data[item.field].indexOf([value_field]) === -1
+              return form_data[item.field]
+                ? form_data[item.field].indexOf([value_field]) === -1
+                : false
             }
           })
           if (find) {
diff --git a/ui/src/components/dynamics-form/items/common/SelectHeader.vue b/ui/src/components/dynamics-form/items/common/SelectHeader.vue
new file mode 100644
index 00000000000..019593c3827
--- /dev/null
+++ b/ui/src/components/dynamics-form/items/common/SelectHeader.vue
@@ -0,0 +1,30 @@
+<template>
+  <div
+    v-if="header"
+    style="font-size: 13px; color: #1f2329; padding: 2px 4px; display: flex; align-items: center"
+  >
+    <span>{{ header.label }}</span>
+    <span v-if="header.required" style="color: #f54a45; margin-left: 4px">*</span>
+    <el-tooltip v-if="header.tooltip" effect="dark" placement="right">
+      <template #content>
+        <div style="max-width: 200px">{{ header.tooltip }}</div>
+      </template>
+      <AppIcon
+        iconName="app-warning"
+        class="app-warning-icon"
+        style="margin-left: 4px; flex-shrink: 0"
+      ></AppIcon>
+    </el-tooltip>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps<{
+  header: any
+}>()
+</script>
+<style lang="scss">
+.el-select-dropdown__header {
+  border-bottom: none;
+  padding: 4px 8px 0;
+}
+</style>
diff --git a/ui/src/components/dynamics-form/items/knowledge/Knowledge.vue b/ui/src/components/dynamics-form/items/knowledge/Knowledge.vue
index 901c2b149dc..5434c271ebc 100644
--- a/ui/src/components/dynamics-form/items/knowledge/Knowledge.vue
+++ b/ui/src/components/dynamics-form/items/knowledge/Knowledge.vue
@@ -6,6 +6,9 @@
       class="w-full"
       :placeholder="$t('views.chatLog.selectKnowledgePlaceholder')"
     >
+      <template #header v-if="$attrs.popperHeader">
+        <SelectHeader :header="$attrs.popperHeader" />
+      </template>
       <el-option v-for="item in availableList" :key="item.id" :label="item.name" :value="item.id">
         <el-space :size="8">
           <KnowledgeIcon :type="item.type" :size="20" style="--el-avatar-border-radius: 6px" />
@@ -30,6 +33,7 @@
 import { computed } from 'vue'
 import type { FormField } from '../../type'
 import { relatedObject } from '@/utils/array'
+import SelectHeader from '@/components/dynamics-form/items/common/SelectHeader.vue'
 const props = withDefaults(
   defineProps<{
     modelValue?: string[]
diff --git a/ui/src/components/dynamics-form/items/model/Model.vue b/ui/src/components/dynamics-form/items/model/Model.vue
index 8c42b876f59..954330fcbbf 100644
--- a/ui/src/components/dynamics-form/items/model/Model.vue
+++ b/ui/src/components/dynamics-form/items/model/Model.vue
@@ -6,6 +6,9 @@
       v-bind="$attrs"
       popper-class="select-model"
     >
+      <template #header v-if="$attrs.popperHeader">
+        <SelectHeader :header="$attrs.popperHeader" />
+      </template>
       <el-option-group
         v-for="(modelList, providerName) in groupedOptions"
         :key="providerName"
@@ -54,6 +57,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { groupBy, flatMap } from 'lodash'
+import SelectHeader from '@/components/dynamics-form/items/common/SelectHeader.vue'
 import { relatedObject } from '@/utils/array'
 import type { FormField } from '../../type'
 import { providerList } from './provider-data'
diff --git a/ui/src/components/dynamics-form/items/select/MultiSelect.vue b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
index b5332780ac7..dae4681a77b 100644
--- a/ui/src/components/dynamics-form/items/select/MultiSelect.vue
+++ b/ui/src/components/dynamics-form/items/select/MultiSelect.vue
@@ -10,6 +10,9 @@
     v-bind="$attrs"
     v-model="_modelValue"
   >
+    <template #header v-if="$attrs.popperHeader">
+      <SelectHeader :header="$attrs.popperHeader" />
+    </template>
     <el-option
       v-for="(item, index) in option_list"
       :key="index"
@@ -21,6 +24,7 @@
 </template>
 <script setup lang="ts">
 import type { FormField } from '@/components/dynamics-form/type'
+import SelectHeader from '@/components/dynamics-form/items/common/SelectHeader.vue'
 import { computed, ref } from 'vue'
 import _ from 'lodash'
 const rowTemp = ref<any>()
diff --git a/ui/src/components/dynamics-form/items/select/SingleSelect.vue b/ui/src/components/dynamics-form/items/select/SingleSelect.vue
index 2c6612fa179..e5aafad8bcb 100644
--- a/ui/src/components/dynamics-form/items/select/SingleSelect.vue
+++ b/ui/src/components/dynamics-form/items/select/SingleSelect.vue
@@ -7,6 +7,9 @@
     v-bind="$attrs"
     v-model="_modelValue"
   >
+    <template #header v-if="$attrs.popperHeader">
+      <SelectHeader :header="$attrs.popperHeader" />
+    </template>
     <el-option
       v-for="(item, index) in option_list"
       :key="index"
@@ -19,6 +22,7 @@
 </template>
 <script setup lang="ts">
 import type { FormField } from '@/components/dynamics-form/type'
+import SelectHeader from '@/components/dynamics-form/items/common/SelectHeader.vue'
 import { computed, ref, useAttrs } from 'vue'
 import _ from 'lodash'
 const attrs = useAttrs() as any
diff --git a/ui/src/components/dynamics-form/items/tree/TreeSelect.vue b/ui/src/components/dynamics-form/items/tree/TreeSelect.vue
index a82bd2a12cb..e865471ffff 100644
--- a/ui/src/components/dynamics-form/items/tree/TreeSelect.vue
+++ b/ui/src/components/dynamics-form/items/tree/TreeSelect.vue
@@ -1,5 +1,11 @@
 <template>
-  <el-tree-select v-bind="$attrs" />
+  <el-tree-select v-bind="$attrs">
+    <template #header v-if="$attrs.popperHeader">
+      <SelectHeader :header="$attrs.popperHeader" />
+    </template>
+  </el-tree-select>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SelectHeader from '@/components/dynamics-form/items/common/SelectHeader.vue'
+</script>
 <style lang="scss"></style>
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
index 92914fb2d37..84973935694 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -111,7 +111,11 @@ function openAddDialog(data?: any, index?: any) {
 }
 
 function openChangeTitleDialog() {
-  UserInputTitleDialogRef.value.open(inputFieldConfig.value)
+  UserInputTitleDialogRef.value.open(
+    inputFieldConfig.value,
+    inputFieldList.value,
+    props.nodeModel.properties.user_input_field_list_setting,
+  )
 }
 
 function deleteField(index: any) {
@@ -145,8 +149,10 @@ function refreshFieldList(data: any, index: any) {
   onDragHandle()
 }
 
-function refreshFieldTitle(data: any) {
-  inputFieldConfig.value = data
+function refreshFieldTitle(setting: any) {
+  if (setting) {
+    set(props.nodeModel.properties, 'user_input_field_list_setting', setting)
+  }
   UserInputTitleDialogRef.value.close()
 }
 
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
index 08c2f48c32f..e318becf056 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
@@ -16,12 +16,26 @@
       require-asterisk-position="right"
       @submit.prevent
     >
-      <el-form-item :label="$t('common.title')" prop="title">
+      <el-form-item label="外置参数设置（最多可显示3个）">
+        <el-select v-model="form.exposed_fields" multiple placeholder="请选择" style="width: 100%">
+          <el-option
+            v-for="item in fieldOptions"
+            :key="item.field"
+            :label="getFieldLabel(item)"
+            :value="item.field"
+            :disabled="
+              !allowedTypes.includes(item.input_type) ||
+              (form.exposed_fields.length >= 3 && !form.exposed_fields.includes(item.field))
+            "
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标题" prop="menu_title">
         <el-input
-          v-model="form.title"
+          v-model="form.menu_title"
           maxlength="64"
           show-word-limit
-          @blur="form.title = form.title.trim()"
+          @blur="form.menu_title = form.menu_title.trim()"
         />
       </el-form-item>
     </el-form>
@@ -36,32 +50,49 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
-import { cloneDeep } from 'lodash'
 import { t } from '@/locales'
 const emit = defineEmits(['refresh'])
 
 const fieldFormRef = ref()
 const loading = ref<boolean>(false)
+const fieldOptions = ref<any[]>([])
 
 const form = ref<any>({
-  title: t('chat.userInput'),
+  exposed_fields: [],
+  menu_title: '更多设置',
 })
 
 const rules = reactive({
-  title: [
-    { required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' },
-  ],
+  menu_title: [{ required: true, message: '请输入菜单标题', trigger: 'blur' }],
 })
 
+const allowedTypes = [
+  'Model',
+  'Knowledge',
+  'SwitchInput',
+  'DatePicker',
+  'TreeSelect',
+  'SingleSelect',
+  'MultiSelect',
+  'RadioCard',
+  'RadioRow',
+]
 const dialogVisible = ref<boolean>(false)
 
-const open = (row: any) => {
-  if (row) {
-    form.value = cloneDeep(row)
-  }
+const getFieldLabel = (item: any) => {
+  if (typeof item.label === 'string') return item.label
+  if (item.label?.label) return item.label.label
+  return item.field
+}
 
+const open = (row: any, fields?: any[], setting?: any) => {
+  form.value = {
+    exposed_fields: setting?.exposed_fields || [],
+    menu_title: setting?.menu_title || '更多设置',
+  }
+  fieldOptions.value = fields || []
   dialogVisible.value = true
 }
 
@@ -73,7 +104,10 @@ const submit = async (formEl: FormInstance | undefined) => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
-      emit('refresh', form.value)
+      emit('refresh', {
+        exposed_fields: form.value.exposed_fields,
+        menu_title: form.value.menu_title,
+      })
     }
   })
 }