From 86652192f973633b3c3a7202ccaa8244c9dfb983 Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Thu, 29 Oct 2026 13:54:13 +0800
Subject: [PATCH] feat: Rendering of user input on the conversation page

---
 ui/src/components/COMPONENT_README.md         |   8 +-
 .../select-model/ModelParamsDialog.vue        |   4 +-
 .../constructor/items/ModelConstructor.vue    |  59 +++-
 .../mk-dynamics-form/items/model/Model.vue    |  37 ++-
 .../components/message-input/index.ts         |  18 +-
 .../components/message-input/index.vue        |   4 +-
 .../message-input/user-form/index.ts          | 162 ++++++++++
 .../message-input/user-form/index.vue         | 295 ++++++++++++++++++
 ui/src/conversation-panel/view/debug/index.ts |   1 +
 .../user-input/UserInputSettingDialog.vue     |   4 +-
 .../component/user-input/constant.ts          |   2 +-
 11 files changed, 579 insertions(+), 15 deletions(-)
 create mode 100644 ui/src/conversation-panel/components/message-input/user-form/index.ts
 create mode 100644 ui/src/conversation-panel/components/message-input/user-form/index.vue

diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 670642f649c..5374f9296d8 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -724,6 +724,8 @@ MultiRow、RadioRow 的配置器与运行时复用字段组件，分别使用复
 扁平 `ModelItem[]`，由选择器统一分组和展示供应商。已有快照未保存状态时保留可选行为，已保存的
 状态按 `SelectModel` 的可用性规则处理。切换模型一次性回写 `model_id` 和深拷贝后的
 `model_params_setting`；清空时回写空 ID 和空参数，避免修改原配置中的参数对象。
+配置器为每个可选模型保存 `model_form_field` 参数表单快照；运行时快照非空时开启 `SelectModel`
+参数入口，参数表单与默认值取自快照中的 `model_form_field` 和 `model_params_setting`，不请求接口。
 
 Knowledge 配置器复用 `SelectKnowledgeDialog` 选择可选知识库，沿用文件夹、共享资源查询及
 相同 Embedding 模型约束。打开时传入已选快照，确认后回写可选知识库并清理已取消 ID 对应的
@@ -733,8 +735,10 @@ Model 配置器通过 `getSelectModelList(query)` 注入加载可选模型，返
 上层提供 `ModelApi.getModelListWithShared` 或工作流的 `store.force.getModelListWithShared`；
 循环体转发同名注入。该名称用于数据加载能力，与业务 API 方法名区分。
 
-Model 配置器的默认模型也使用 `SelectModel`，仅展示已选的可选模型，不开启参数设置入口。
-选择时将模型 ID 转换为包含已配置参数的 `default_value` 对象，清空时重置为空对象。
+Model 配置器的默认模型也使用 `SelectModel`，仅展示已选的可选模型，并开启参数设置入口。
+选择时将模型 ID 转换为包含已配置参数的 `default_value` 对象，清空时重置为空对象；参数弹窗以该模型
+快照中的参数为默认值，确认后同时回写 `default_value` 和对应可选模型的 `model_params_setting`。
+编辑已有字段时为缺少 `model_form_field` 的可选模型补齐参数表单快照。
 
 ## 跨页面业务组件
 
diff --git a/ui/src/components/business/select-model/ModelParamsDialog.vue b/ui/src/components/business/select-model/ModelParamsDialog.vue
index 4a8915b4cc2..47131c927d9 100644
--- a/ui/src/components/business/select-model/ModelParamsDialog.vue
+++ b/ui/src/components/business/select-model/ModelParamsDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, ref, useTemplateRef } from 'vue'
+import { inject, nextTick, ref, useTemplateRef } from 'vue'
 import { cloneDeep } from 'lodash'
 import type { DynamicFormField } from '@/api/types'
 import { MkDynamicsForm, type FormField } from '@/components/mk-dynamics-form'
@@ -41,6 +41,8 @@ function open(modelId: string, settings?: Record<string, unknown>) {
     const validFields = new Set(formFields.value.map(({ field }) => field))
     const savedSettings = Object.fromEntries(Object.entries(settings ?? {}).filter(([field]) => validFields.has(field)))
     formData.value = { ...defaults, ...cloneDeep(savedSettings) }
+    // 弹窗内容打开即挂载，表单只在挂载时读取字段；字段异步返回后重新渲染
+    return nextTick(() => formRef.value?.render(formFields.value, formData.value))
   })
 }
 
diff --git a/ui/src/components/mk-dynamics-form/constructor/items/ModelConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/items/ModelConstructor.vue
index 011c8f9a9d2..b1f4ea73e03 100644
--- a/ui/src/components/mk-dynamics-form/constructor/items/ModelConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/items/ModelConstructor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { ModelItem } from '@/api/types'
 import type { DynamicFormValue } from '../../type'
-import { computed, inject, ref } from 'vue'
+import { computed, inject, provide, ref } from 'vue'
+import { cloneDeep } from 'lodash'
 import SelectModel from '@/components/business/select-model/index.vue'
 import { providerList as providerOptions } from '../../items/model/provider-data'
 import { MODEL_TYPE_LABELS } from '@/constants/model'
@@ -50,11 +51,16 @@ const selectedModelsOptions = computed(() => {
   return rawModelOptions.value.filter((model: DynamicFormValue) => ids.includes(model.id))
 })
 
+function loadModelFormFields(modelId: string): Promise<DynamicFormValue[]> {
+  if (!getModelParamsForm) return Promise.resolve([])
+  // 请求层已解包为字段数组，兼容仍返回 { data } 的注入实现
+  return getModelParamsForm(modelId).then((res: DynamicFormValue) => (Array.isArray(res) ? res : res?.data) || [])
+}
+
 function fetchDefaultParams(modelId: string) {
   if (!getModelParamsForm) return
-  getModelParamsForm(modelId).then((res: DynamicFormValue) => {
-    const formFields = res?.data || []
-    const defaults = (res?.data || [])
+  loadModelFormFields(modelId).then((formFields) => {
+    const defaults = formFields
       .map((item: DynamicFormValue) => {
         if (item.show_default_value === false) {
           return { [item.field]: undefined }
@@ -106,6 +112,34 @@ const getProviderItem = (modelId: string) => {
   return { model_id: modelId, model_params_setting: {} }
 }
 
+// 默认模型参数：参数弹窗的默认值使用该模型已保存的参数，确认后同步到可选模型快照。
+function getSavedModelParamsForm(modelId: string) {
+  const provider = formValue.value.provider_list?.find((p: DynamicFormValue) => p.model_id === modelId)
+  const settings = provider?.model_params_setting ?? {}
+  const formFields: Promise<DynamicFormValue[]> = provider?.model_form_field?.length
+    ? Promise.resolve(provider.model_form_field)
+    : loadModelFormFields(modelId)
+  return formFields.then((fields) =>
+    fields.map((field) =>
+      Object.prototype.hasOwnProperty.call(settings, field.field) ? { ...field, default_value: cloneDeep(settings[field.field]) } : field,
+    ),
+  )
+}
+provide('getModelParamsForm', getSavedModelParamsForm)
+
+const defaultModelParams = computed({
+  get: () => formValue.value.default_value?.model_params_setting ?? {},
+  set: (settings: Record<string, unknown>) => {
+    const modelId = formValue.value.default_value?.model_id
+    if (!modelId) return
+    formValue.value.default_value = { ...formValue.value.default_value, model_params_setting: settings }
+    // 切换默认模型时 SelectModel 会先清空参数再加载默认值，清空不覆盖快照中已保存的参数
+    if (!Object.keys(settings).length) return
+    const provider = formValue.value.provider_list?.find((p: DynamicFormValue) => p.model_id === modelId)
+    if (provider) provider.model_params_setting = cloneDeep(settings)
+  },
+})
+
 const defaultModelId = computed({
   get: () => formValue.value.default_value?.model_id ?? '',
   set: (modelId: string) => {
@@ -140,6 +174,13 @@ const render = (formData: DynamicFormValue) => {
   if (formData.model_type) {
     fetchModelByType(formData.model_type)
   }
+  // 补齐缺少参数表单快照的旧数据，保留已保存的参数
+  formValue.value.provider_list.forEach((provider: DynamicFormValue) => {
+    if (provider.model_form_field?.length) return
+    loadModelFormFields(provider.model_id).then((formFields) => {
+      provider.model_form_field = formFields
+    })
+  })
 }
 
 defineExpose({ getData, render })
@@ -171,6 +212,14 @@ defineExpose({ getData, render })
     :rules="formValue.required ? [{ required: true, message: '请选择模型' }] : []"
     v-if="formValue.provider_list && formValue.provider_list.length > 0"
   >
-    <SelectModel v-model="defaultModelId" placeholder="请选择模型" :options="selectedModelsOptions" :provider-options="providerOptions" teleported />
+    <SelectModel
+      v-model="defaultModelId"
+      v-model:model-params="defaultModelParams"
+      can-edit-params
+      placeholder="请选择模型"
+      :options="selectedModelsOptions"
+      :provider-options="providerOptions"
+      teleported
+    />
   </el-form-item>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/model/Model.vue b/ui/src/components/mk-dynamics-form/items/model/Model.vue
index d670ec59b2d..88ecc703f44 100644
--- a/ui/src/components/mk-dynamics-form/items/model/Model.vue
+++ b/ui/src/components/mk-dynamics-form/items/model/Model.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 import { cloneDeep } from 'lodash'
 import { MODEL_STATUS } from '@/api/enums'
 import type { Dict, ModelConfig, ModelItem } from '@/api/types'
@@ -14,6 +14,8 @@ interface ConfiguredModelOption {
   model_name: string
   provider: string
   model_params_setting?: Dict<unknown>
+  /** 配置字段时保存的模型参数表单，运行时据此编辑参数，不再请求接口。 */
+  model_form_field?: FormField[]
   status?: ModelItem['status']
   source?: ModelItem['source']
 }
@@ -41,7 +43,37 @@ const modelOptions = computed<ModelItem[]>(() =>
   })),
 )
 
+// 模型参数：参数表单取自配置快照，默认值使用配置时保存的参数。
+const canEditParams = computed(() => configuredModels.value.some((model) => model.model_form_field?.length))
+
+function getModelParamsForm(modelId: string) {
+  const selectedModel = configuredModels.value.find((model) => model.model_id === modelId)
+  const settings = selectedModel?.model_params_setting ?? {}
+  return Promise.resolve(
+    (selectedModel?.model_form_field ?? []).map((field) =>
+      Object.prototype.hasOwnProperty.call(settings, field.field) ? { ...field, default_value: cloneDeep(settings[field.field]) } : field,
+    ),
+  )
+}
+provide('getModelParamsForm', getModelParamsForm)
+
+// SelectModel 切换模型后同步回写参数，此时 Props 尚未更新，记录当前选中的模型
+const currentModelId = ref(props.modelValue?.model_id ?? '')
+watch(
+  () => props.modelValue?.model_id,
+  (modelId) => {
+    currentModelId.value = modelId ?? ''
+  },
+)
+
+function handleModelParamsChange(settings: Dict<unknown>) {
+  if (!currentModelId.value) return
+  emit('update:modelValue', { model_id: currentModelId.value, model_params_setting: settings })
+  emit('change', props.formField)
+}
+
 function handleModelChange(modelId: string) {
+  currentModelId.value = modelId
   const selectedModel = configuredModels.value.find((model) => model.model_id === modelId)
   emit('update:modelValue', {
     model_id: modelId,
@@ -55,8 +87,11 @@ function handleModelChange(modelId: string) {
   <SelectModel
     v-bind="$attrs"
     :model-value="props.modelValue?.model_id ?? ''"
+    :model-params="props.modelValue?.model_params_setting ?? {}"
+    :can-edit-params="canEditParams"
     :options="modelOptions"
     :provider-options="providerList"
     @update:model-value="handleModelChange"
+    @update:model-params="handleModelParamsChange"
   />
 </template>
diff --git a/ui/src/conversation-panel/components/message-input/index.ts b/ui/src/conversation-panel/components/message-input/index.ts
index b6cf56e4564..bcf16f01a6e 100644
--- a/ui/src/conversation-panel/components/message-input/index.ts
+++ b/ui/src/conversation-panel/components/message-input/index.ts
@@ -3,6 +3,7 @@ import { IMAGE_EXTENSIONS, DOCUMENT_EXTENSIONS, VIDEO_EXTENSIONS, AUDIO_EXTENSIO
 import { isImage, isDocument, isAudio, isVideo } from '@/utils/icon'
 import type { Dict } from '@/api/types'
 import type { ChatMessage, Conversation, ConversationAppInfo, SendMessageOptions } from '../../core/types'
+import { createUserFormStore } from './user-form/index'
 
 export interface FileItem {
   uid: number
@@ -50,6 +51,8 @@ export interface MessageInputDeps {
   appInfo: Readonly<Ref<ConversationAppInfo | null>>
   /** 禁用输入与发送，如门户没有可用智能体时；不传时始终可用。 */
   disabled?: Readonly<Ref<boolean>>
+  /** 是否在用户输入表单中编辑接口传参，仅调试对话开启。 */
+  apiInputEditable?: boolean
 }
 
 // 上传请求返回前进度条的最大值
@@ -61,6 +64,7 @@ const UPLOAD_PROGRESS_PENDING_MAX = 95
 export function createMessageInputStore(deps: MessageInputDeps) {
   const { conversations, getChatId, renameChat, composerResetSignal, messages, streamLoading, sendMessage, uploadFile, stop, appInfo } = deps
   const disabled = computed(() => deps.disabled?.value ?? false)
+  const userForm = createUserFormStore({ appInfo, apiInputEditable: deps.apiInputEditable ?? false })
 
   // 输入状态与附件限制
   const question = ref('')
@@ -187,7 +191,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
       newQuestion: true,
       questionContent: { ...message },
       reChat: false,
-      formData,
+      formData: { ...userForm.getFormData(), ...formData },
       onComplete: (e) => {
         if (!e && isFirstMessage && questionText) renameChat(chatId, abstract).catch(() => {})
       },
@@ -199,6 +203,12 @@ export function createMessageInputStore(deps: MessageInputDeps) {
     if (!canSend.value) return
     sending.value = true
     try {
+      // 用户输入参数校验失败时由表单提示，保留输入内容与附件
+      const formValid = await userForm.validate().then(
+        () => true,
+        () => false,
+      )
+      if (!formValid) return
       // 一次遍历完成附件分类，仅提交有附件的字段。
       const message: QuestionMessage = { type: 'QUESTION', content: question.value.trim() }
       for (const attachment of fileList.value) {
@@ -225,7 +235,10 @@ export function createMessageInputStore(deps: MessageInputDeps) {
   /** 由开场白、回答中的快捷问题或 HTML 渲染发起提问；不读取也不清空输入框与暂存附件。 */
   const sendQuestion = (content: string, options: QuestionOptions = {}) => {
     if (disabled.value || streamLoading.value || sending.value || !content.trim()) return
-    submitQuestion({ ...options.attachments, type: 'QUESTION', content: content.trim() }, options.formData)
+    userForm
+      .validate()
+      .then(() => submitQuestion({ ...options.attachments, type: 'QUESTION', content: content.trim() }, options.formData))
+      .catch(() => {})
   }
 
   // 新建/切换会话时清空暂存文件与输入
@@ -239,6 +252,7 @@ export function createMessageInputStore(deps: MessageInputDeps) {
 
   return {
     appInfo,
+    userForm,
     question,
     fileList,
     maxFiles,
diff --git a/ui/src/conversation-panel/components/message-input/index.vue b/ui/src/conversation-panel/components/message-input/index.vue
index 2d1e8d41e51..da92a1c9dce 100644
--- a/ui/src/conversation-panel/components/message-input/index.vue
+++ b/ui/src/conversation-panel/components/message-input/index.vue
@@ -5,6 +5,7 @@ import { useInputEvents } from '../../core/input-events'
 import { useMessageInputStore, type FileItem } from './index'
 import FileUploadCard from '@/components/mk-drag-upload/FileUploadCard.vue'
 import ImageUploadCard from '@/components/mk-drag-upload/ImageUploadCard.vue'
+import UserForm from './user-form/index.vue'
 
 const {
   question,
@@ -111,7 +112,8 @@ function getAttachmentDescription(file: FileItem) {
     />
 
     <!-- 操作栏 -->
-    <div class="text-right mt-3">
+    <div class="mt-3 flex items-center">
+      <UserForm class="mr-3" />
       <input ref="fileInputRef" type="file" multiple :accept="acceptList" class="hidden" @change="handleFileSelect" />
       <MkTooltip placement="top">
         <template #content>
diff --git a/ui/src/conversation-panel/components/message-input/user-form/index.ts b/ui/src/conversation-panel/components/message-input/user-form/index.ts
new file mode 100644
index 00000000000..9da850e4006
--- /dev/null
+++ b/ui/src/conversation-panel/components/message-input/user-form/index.ts
@@ -0,0 +1,162 @@
+import { computed, ref, watch, type Ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import type { DynamicFormValue, FormField } from '@/components/mk-dynamics-form'
+import type { Dict } from '@/api/types'
+import type { ConversationAppInfo } from '../../../core/types'
+
+/** 开始节点中旧版简写字段（input / select / date）的配置结构。 */
+interface LegacyInputField {
+  variable: string
+  name?: string
+  type?: string
+  is_required?: boolean
+  default_value?: DynamicFormValue
+  optionList?: string[]
+  assignment_method?: 'user_input' | 'api_input'
+}
+
+interface BaseNodeProperties {
+  user_input_field_list?: (FormField | LegacyInputField)[]
+  api_input_field_list?: LegacyInputField[]
+  input_field_list?: LegacyInputField[]
+  user_input_field_list_setting?: { exposed_fields?: string[]; menu_title?: string }
+  user_input_config?: { title?: string }
+}
+
+// ===== 字段转换 =====
+/** 旧版简写字段转为动态表单字段；其他类型视为已是动态表单协议，返回 undefined。 */
+function toFormField(inputField: LegacyInputField, label: string, defaultValue?: DynamicFormValue): FormField | undefined {
+  const baseField = { field: inputField.variable, label, default_value: defaultValue, required: inputField.is_required }
+  switch (inputField.type) {
+    case 'input':
+      return { ...baseField, input_type: 'TextInput' }
+    case 'select':
+      return {
+        ...baseField,
+        input_type: 'SingleSelect',
+        option_list: (inputField.optionList || []).map((option) => ({ key: option, value: option })),
+      }
+    case 'date':
+      return {
+        ...baseField,
+        input_type: 'DatePicker',
+        attrs: { format: 'YYYY-MM-DD HH:mm:ss', 'value-format': 'YYYY-MM-DD HH:mm:ss', type: 'datetime' },
+      }
+    default:
+      return undefined
+  }
+}
+
+function isFormField(field: FormField | undefined): field is FormField {
+  return !!field
+}
+
+function getLegacyInputFields(properties: BaseNodeProperties, assignmentMethod: LegacyInputField['assignment_method']) {
+  return (properties.input_field_list || [])
+    .filter((inputField) => inputField.assignment_method === assignmentMethod)
+    .map((inputField) => toFormField(inputField, inputField.name || inputField.variable))
+    .filter(isFormField)
+}
+
+function getUserInputFields(properties: BaseNodeProperties): FormField[] {
+  if (!properties.user_input_field_list) {
+    return getLegacyInputFields(properties, 'user_input')
+  }
+  return properties.user_input_field_list.map((inputField) => {
+    const legacyField = inputField as LegacyInputField
+    return toFormField(legacyField, legacyField.name || legacyField.variable) || (inputField as FormField)
+  })
+}
+
+function getApiInputFields(properties: BaseNodeProperties): FormField[] {
+  if (!properties.api_input_field_list) {
+    return getLegacyInputFields(properties, 'api_input')
+  }
+  // 接口传参以变量名作为标签，并保留配置的默认值
+  return properties.api_input_field_list
+    .map((inputField) => toFormField(inputField, inputField.variable, inputField.default_value))
+    .filter(isFormField)
+}
+
+export interface UserFormDeps {
+  appInfo: Readonly<Ref<ConversationAppInfo | null>>
+  /** 是否在表单中编辑接口传参；仅调试对话开启，其他场景接口传参来自地址栏。 */
+  apiInputEditable: boolean
+}
+
+/**
+ * 用户输入参数状态：字段配置取自开始节点，表单值随消息一起发送。
+ * 表单校验依赖已渲染的表单实例，由 user-form 组件挂载时绑定。
+ */
+export function createUserFormStore(deps: UserFormDeps) {
+  const { appInfo, apiInputEditable } = deps
+
+  const formData = ref<Dict<DynamicFormValue>>({})
+  const apiFormData = ref<Dict<DynamicFormValue>>({})
+
+  const baseNodeProperties = computed(() => {
+    const baseNode = appInfo.value?.work_flow?.nodes?.find((node) => node.id === 'base-node')
+    return (baseNode?.properties || {}) as BaseNodeProperties
+  })
+  const userInputFields = computed(() => getUserInputFields(baseNodeProperties.value))
+  const apiInputFields = computed(() => getApiInputFields(baseNodeProperties.value))
+  /** 配置为在输入框旁直接展示的字段，实际展示数量由可用宽度决定。 */
+  const exposedFieldNames = computed(() => baseNodeProperties.value.user_input_field_list_setting?.exposed_fields || [])
+  const menuTitle = computed(
+    () => baseNodeProperties.value.user_input_field_list_setting?.menu_title || baseNodeProperties.value.user_input_config?.title || '更多设置',
+  )
+  const hasFields = computed(() => userInputFields.value.length > 0 || (apiInputEditable && apiInputFields.value.length > 0))
+
+  // 切换智能体后字段不同，清空上一个智能体的参数
+  watch(
+    () => appInfo.value?.id,
+    () => {
+      formData.value = {}
+      apiFormData.value = {}
+    },
+  )
+
+  // ===== 校验 =====
+  let validator: (() => Promise<unknown>) | null = null
+  /** 绑定表单校验，返回解绑函数。 */
+  const bindValidator = (validate: () => Promise<unknown>) => {
+    validator = validate
+    return () => {
+      if (validator === validate) validator = null
+    }
+  }
+  const validate = () => (validator ? validator() : Promise.resolve())
+
+  // ===== 编辑快照：取消修改时恢复 =====
+  let snapshot: { formData: Dict<DynamicFormValue>; apiFormData: Dict<DynamicFormValue> } | null = null
+  const saveSnapshot = () => {
+    snapshot = { formData: cloneDeep(formData.value), apiFormData: cloneDeep(apiFormData.value) }
+  }
+  const restoreSnapshot = () => {
+    if (!snapshot) return
+    formData.value = snapshot.formData
+    apiFormData.value = snapshot.apiFormData
+    snapshot = null
+  }
+
+  /** 随消息发送的表单数据，接口传参同名时覆盖用户输入。 */
+  const getFormData = (): Dict<DynamicFormValue> => ({ ...formData.value, ...apiFormData.value })
+
+  return {
+    formData,
+    apiFormData,
+    userInputFields,
+    apiInputFields,
+    exposedFieldNames,
+    menuTitle,
+    hasFields,
+    apiInputEditable,
+    bindValidator,
+    validate,
+    saveSnapshot,
+    restoreSnapshot,
+    getFormData,
+  }
+}
+
+export type UserFormStore = ReturnType<typeof createUserFormStore>
diff --git a/ui/src/conversation-panel/components/message-input/user-form/index.vue b/ui/src/conversation-panel/components/message-input/user-form/index.vue
new file mode 100644
index 00000000000..5832586373f
--- /dev/null
+++ b/ui/src/conversation-panel/components/message-input/user-form/index.vue
@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { MkDynamicsForm } from '@/components/mk-dynamics-form'
+import type { DynamicFormValue, FormField } from '@/components/mk-dynamics-form'
+import type { Dict } from '@/api/types'
+import { MsgWarning } from '@/utils/message'
+import { useMessageInputStore } from '../index'
+
+defineOptions({ name: 'ConversationUserForm' })
+
+// 行内字段按类型固定宽度，按容器宽度计算能展示的数量，其余收进弹出层
+const INLINE_FIELD_WIDTH = 140
+// 模型选择包含供应商图标和参数按钮，需要更宽
+const INLINE_MODEL_FIELD_WIDTH = 200
+// 开关带边框和标签，按标签字数估算宽度：左右内边距与边框 26px、开关 40px、间距 8px
+const INLINE_SWITCH_EXTRA_WIDTH = 74
+const INLINE_SWITCH_CHAR_WIDTH = 14
+// 开关标签最大宽度，超出省略，悬停显示原文
+const INLINE_SWITCH_LABEL_MAX_WIDTH = 56
+const INLINE_GAP = 8
+const MORE_BUTTON_WIDTH = 32
+
+const { userForm } = useMessageInputStore()
+const { formData, apiFormData, userInputFields, apiInputFields, exposedFieldNames, menuTitle, hasFields, apiInputEditable } = userForm
+
+const route = useRoute()
+const accessToken = typeof route.params.accessToken === 'string' ? route.params.accessToken : ''
+const storageKey = accessToken ? `${accessToken}userForm` : ''
+
+const inlineFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
+const popoverFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
+const apiFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
+const moreButtonRef = ref<{ $el: HTMLElement }>()
+const moreButtonEl = computed(() => moreButtonRef.value?.$el)
+const popoverVisible = ref(false)
+
+// ===== 自适应：按宽度决定行内字段 =====
+const containerRef = ref<HTMLElement>()
+const containerWidth = ref(0)
+let resizeObserver: ResizeObserver | null = null
+
+// 模型下拉挂载到 body，避免被输入框和弹出层的滚动容器裁剪
+const displayFields = computed(() =>
+  userInputFields.value.map((field) => (field.input_type === 'Model' ? { ...field, attrs: { teleported: true, ...field.attrs } } : field)),
+)
+
+const exposedFields = computed(() =>
+  exposedFieldNames.value.map((fieldName) => displayFields.value.find((field) => field.field === fieldName)).filter((field) => !!field),
+)
+
+function getFieldLabel(field: FormField) {
+  return typeof field.label === 'string' ? field.label : field.label?.label || field.field
+}
+
+function getInlineFieldWidth(field: FormField) {
+  if (field.input_type === 'Model') return INLINE_MODEL_FIELD_WIDTH
+  if (field.input_type === 'SwitchInput') {
+    return Math.min(INLINE_SWITCH_LABEL_MAX_WIDTH, getFieldLabel(field).length * INLINE_SWITCH_CHAR_WIDTH) + INLINE_SWITCH_EXTRA_WIDTH
+  }
+  return INLINE_FIELD_WIDTH
+}
+
+/** 按顺序累加字段宽度，返回能放下的字段数量。 */
+function getFitCount(width: number) {
+  let usedWidth = -INLINE_GAP
+  let fitCount = 0
+  for (const field of exposedFields.value) {
+    usedWidth += getInlineFieldWidth(field) + INLINE_GAP
+    if (usedWidth > width) break
+    fitCount++
+  }
+  return fitCount
+}
+
+const inlineCount = computed(() => {
+  const allFit = getFitCount(containerWidth.value)
+  const needsMore = allFit < userInputFields.value.length || (apiInputEditable && apiInputFields.value.length > 0)
+  return needsMore ? getFitCount(containerWidth.value - MORE_BUTTON_WIDTH - INLINE_GAP) : allFit
+})
+
+/** 行内字段不展示表单标签：开关将标签放在框内左侧，其他字段以标签作为占位提示；校验结果统一用消息提示。 */
+const inlineFields = computed<FormField[]>(() =>
+  exposedFields.value.slice(0, inlineCount.value).map((field) => {
+    const label = getFieldLabel(field)
+    return {
+      ...field,
+      label: undefined,
+      attrs:
+        field.input_type === 'SwitchInput'
+          ? { ...field.attrs, class: 'mk-conversation-user-form__switch', 'inactive-text': label, title: label }
+          : { placeholder: label, ...field.attrs },
+      props_info: { ...field.props_info, style: { width: `${getInlineFieldWidth(field)}px` }, item_style: { margin: 0 } },
+    }
+  }),
+)
+const popoverFields = computed(() => {
+  const inlineFieldNames = new Set(inlineFields.value.map((field) => field.field))
+  return displayFields.value.filter((field) => !inlineFieldNames.has(field.field))
+})
+const showMoreButton = computed(() => popoverFields.value.length > 0 || (apiInputEditable && apiInputFields.value.length > 0))
+
+// MkDynamicsForm 只在挂载时读取 renderData，字段分组变化后通过 key 重建
+const formRefreshKey = ref(0)
+watch([inlineFields, popoverFields, apiInputFields], () => formRefreshKey.value++)
+
+// ===== 地址栏参数 =====
+function decodeQuery(query: string) {
+  try {
+    return decodeURIComponent(query)
+  } catch {
+    return query
+  }
+}
+
+function getRouteQueryValue(field: string) {
+  const queryValue = route.query[field]
+  if (queryValue == null) return null
+  if (Array.isArray(queryValue)) {
+    return queryValue.filter((value): value is string => value != null).map(decodeQuery)
+  }
+  return decodeQuery(queryValue)
+}
+
+/** 接口传参未赋值时，从地址栏同名参数回填；同时回填提问人 asker。 */
+function initRouteQueryValue() {
+  const queryValues: Dict<DynamicFormValue> = {}
+  for (const field of [...apiInputFields.value.map((apiField) => apiField.field), 'asker']) {
+    if (apiFormData.value[field]) continue
+    const queryValue = getRouteQueryValue(field)
+    if (queryValue) queryValues[field] = queryValue
+  }
+  if (Object.keys(queryValues).length) {
+    apiFormData.value = { ...apiFormData.value, ...queryValues }
+  }
+}
+
+// ===== 校验 =====
+/** 非调试场景接口传参只能来自地址栏，缺少必填参数时提示补充。 */
+function validateApiQuery() {
+  if (apiInputEditable) return Promise.resolve()
+  const missingFields = apiInputFields.value.filter((field) => field.required && !apiFormData.value[field.field]).map((field) => field.field)
+  if (missingFields.length) {
+    MsgWarning(`请在URL中填写参数 ${missingFields.join('、')}的值`)
+    return Promise.reject(false)
+  }
+  return Promise.resolve()
+}
+
+function validateInlineForm() {
+  return (inlineFormRef.value?.validate() ?? Promise.resolve()).catch((error: unknown) => {
+    const invalidFields = error && typeof error === 'object' ? Object.values(error as Dict<{ message?: string }[]>) : []
+    const message = invalidFields[0]?.[0]?.message
+    if (message) MsgWarning(message)
+    throw error
+  })
+}
+
+function validatePopoverForm() {
+  return Promise.all([popoverFormRef.value?.validate(), apiFormRef.value?.validate()]).catch((error: unknown) => {
+    // 弹出层内字段校验失败时打开弹出层展示错误
+    popoverVisible.value = true
+    throw error
+  })
+}
+
+function saveFormData() {
+  if (storageKey) localStorage.setItem(storageKey, JSON.stringify(formData.value))
+}
+
+/** 发送前校验全部参数，通过后保存用户输入。 */
+function validate() {
+  return validateInlineForm().then(validatePopoverForm).then(validateApiQuery).then(saveFormData)
+}
+
+// ===== 弹出层操作 =====
+function confirmHandle() {
+  validatePopoverForm().then(() => {
+    saveFormData()
+    popoverVisible.value = false
+  })
+}
+
+function cancelHandle() {
+  userForm.restoreSnapshot()
+  formRefreshKey.value++
+  popoverVisible.value = false
+}
+
+// ===== 生命周期 =====
+let unbindValidator: (() => void) | null = null
+
+onMounted(() => {
+  if (storageKey && !Object.keys(formData.value).length) {
+    try {
+      formData.value = JSON.parse(localStorage.getItem(storageKey) || '{}')
+    } catch {
+      formData.value = {}
+    }
+  }
+  initRouteQueryValue()
+  unbindValidator = userForm.bindValidator(validate)
+
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(([entry]) => {
+      if (entry) containerWidth.value = entry.contentRect.width
+    })
+    resizeObserver.observe(containerRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  unbindValidator?.()
+  resizeObserver?.disconnect()
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="mk-conversation-user-form flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+    <template v-if="hasFields">
+      <MkDynamicsForm
+        v-if="inlineFields.length"
+        :key="`inline-${formRefreshKey}`"
+        ref="inlineFormRef"
+        v-model="formData"
+        :render-data="inlineFields"
+        inline
+        :show-message="false"
+        class="flex items-center gap-2"
+      />
+
+      <!-- 打开更多参数 -->
+      <el-button v-if="showMoreButton" ref="moreButtonRef" class="size-8! min-w-0! px-0!" @click="popoverVisible = !popoverVisible">
+        <MkIcon name="icon_setting" :size="16" />
+      </el-button>
+
+      <el-popover
+        v-if="showMoreButton"
+        :visible="popoverVisible"
+        :virtual-ref="moreButtonEl"
+        virtual-triggering
+        trigger="manual"
+        placement="top-start"
+        :width="400"
+        :popper-style="{ padding: '16px 8px' }"
+        @show="userForm.saveSnapshot"
+      >
+        <div class="mb-4 truncate break-all font-medium" :title="menuTitle">{{ menuTitle }}</div>
+        <el-scrollbar max-height="450px">
+          <MkDynamicsForm :key="`popover-${formRefreshKey}`" ref="popoverFormRef" v-model="formData" :render-data="popoverFields" />
+          <MkDynamicsForm
+            v-if="apiInputEditable"
+            :key="`api-${formRefreshKey}`"
+            ref="apiFormRef"
+            v-model="apiFormData"
+            :render-data="apiInputFields"
+          />
+        </el-scrollbar>
+        <div class="mt-2 text-right">
+          <!-- 取消修改 -->
+          <el-button @click="cancelHandle">取消</el-button>
+          <!-- 确认参数 -->
+          <el-button type="primary" @click="confirmHandle">确认</el-button>
+        </div>
+      </el-popover>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* 行内开关与下拉框同高同边框（主题将开关高度改为 22px），标签固定为常规文字色，不随开关状态高亮。 */
+:deep(.mk-conversation-user-form__switch) {
+  box-sizing: border-box;
+  height: var(--el-component-size);
+  justify-content: space-between;
+  padding: 0 12px;
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+
+  .el-switch__label {
+    min-width: 0;
+    max-width: 56px;
+    margin-right: 8px;
+    color: var(--el-text-color-regular);
+
+    span {
+      display: block;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/ui/src/conversation-panel/view/debug/index.ts b/ui/src/conversation-panel/view/debug/index.ts
index 3c2b08240ca..e13a369c81a 100644
--- a/ui/src/conversation-panel/view/debug/index.ts
+++ b/ui/src/conversation-panel/view/debug/index.ts
@@ -70,6 +70,7 @@ export function createDebugConversation(application: Readonly<Ref<ApplicationDet
     uploadFile: msgs.uploadFile,
     stop: msgs.stop,
     appInfo,
+    apiInputEditable: true,
   })
   const detail = createExecutionDetailStore()
   return { appInfo, list, msgs, input, detail }
diff --git a/ui/src/workflow-canvas/nodes/base-node/component/user-input/UserInputSettingDialog.vue b/ui/src/workflow-canvas/nodes/base-node/component/user-input/UserInputSettingDialog.vue
index dd55d98258e..611e844504c 100644
--- a/ui/src/workflow-canvas/nodes/base-node/component/user-input/UserInputSettingDialog.vue
+++ b/ui/src/workflow-canvas/nodes/base-node/component/user-input/UserInputSettingDialog.vue
@@ -38,13 +38,13 @@ defineExpose({ open })
       <el-form-item>
         <template #label>
           <span class="flex-align-center gap-1">
-            <span>外置参数设置（最多可显示3个）</span>
+            <span>外置参数设置</span>
             <MkTooltip placement="right" content="仅支持模型、知识库、开关、日期、树形选项卡、单选框、多选框组件类型">
               <MkIcon name="icon_info_outlined" class="text-N600!" />
             </MkTooltip>
           </span>
         </template>
-        <el-select v-model="currentSetting.exposed_fields" multiple :multiple-limit="3" placeholder="请选择">
+        <el-select v-model="currentSetting.exposed_fields" multiple placeholder="请选择">
           <el-option v-for="field in exposedFieldOptions" :key="field.field" :label="formatLabel(field.label, field.field)" :value="field.field" />
         </el-select>
       </el-form-item>
diff --git a/ui/src/workflow-canvas/nodes/base-node/component/user-input/constant.ts b/ui/src/workflow-canvas/nodes/base-node/component/user-input/constant.ts
index 9a9e1ca2ffe..b0a625dab23 100644
--- a/ui/src/workflow-canvas/nodes/base-node/component/user-input/constant.ts
+++ b/ui/src/workflow-canvas/nodes/base-node/component/user-input/constant.ts
@@ -1 +1 @@
-export const exposedInputTypes = ['TextInput', 'TextareaInput', 'PasswordInput', 'SingleSelect', 'MultiSelect', 'DatePicker', 'SwitchInput']
+export const exposedInputTypes = ['TextInput', 'TextareaInput', 'PasswordInput', 'SingleSelect', 'MultiSelect', 'DatePicker', 'SwitchInput','Model',"Knowledge"]