From c44fd8a40b61ae4c473191e537787e52f156b983 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Tue, 18 Feb 2025 11:06:26 +0800
Subject: [PATCH] feat: Supports specified user input title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1017888 --user=刘瑞斌 【高级编排应用】“用户输入”可以自定义。 #2288 https://www.tapd.cn/57709429/s/1655214
---
 .../ai-chat/component/user-form/index.vue     |  8 +-
 .../component/UserInputFieldTable.vue         | 39 +++++++--
 .../component/UserInputTitleDialog.vue        | 83 +++++++++++++++++++
 3 files changed, 123 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue

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 6b2ac596f..2744102af 100644
--- a/ui/src/components/ai-chat/component/user-form/index.vue
+++ b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -16,7 +16,7 @@
         <el-icon class="mr-8 arrow-icon" :class="showUserInput ? 'rotate-90' : ''"
           ><CaretRight
         /></el-icon>
-        {{ $t('chat.userInput') }}
+        {{ inputFieldConfig.title }}
       </div>
       <el-scrollbar max-height="160">
         <el-collapse-transition>
@@ -63,6 +63,7 @@ const props = defineProps<{
 const dynamicsFormRefresh = ref(0)
 const inputFieldList = ref<FormField[]>([])
 const apiInputFieldList = ref<FormField[]>([])
+const inputFieldConfig = ref({ title: t('chat.userInput') })
 const showUserInput = ref(true)
 const emit = defineEmits(['update:api_form_data', 'update:form_data'])
 
@@ -260,6 +261,11 @@ function handleInputFieldList() {
                 }
               })
           : []
+
+      //
+      inputFieldConfig.value = v.properties.user_input_config?.title
+        ? v.properties.user_input_config
+        : { title: t('chat.userInput') }
     })
 }
 /**
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
index 703c66490..1a93ac318 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="flex-between mb-16">
     <h5 class="lighter">{{ $t('chat.userInput') }}</h5>
-    <el-button link type="primary" @click="openAddDialog()">
-      <el-icon class="mr-4">
-        <Plus />
-      </el-icon>
-      {{ $t('common.add') }}
-    </el-button>
+    <div>
+      <el-button
+        type="primary"
+        link
+        @click="openChangeTitleDialog"
+      >
+        <el-icon>
+          <Setting />
+        </el-icon>
+      </el-button>
+      <el-button link type="primary" @click="openAddDialog()">
+        <el-icon class="mr-4">
+          <Plus />
+        </el-icon>
+        {{ $t('common.add') }}
+      </el-button>
+    </div>
   </div>
   <el-table
     v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
@@ -92,6 +103,7 @@
   </el-table>
 
   <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
+  <UserInputTitleDialog ref="UserInputTitleDialogRef" @refresh="refreshFieldTitle"/>
 </template>
 
 <script setup lang="ts">
@@ -100,15 +112,22 @@ import { set } from 'lodash'
 import UserFieldFormDialog from './UserFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
+import UserInputTitleDialog from '@/workflow/nodes/base-node/component/UserInputTitleDialog.vue'
 const props = defineProps<{ nodeModel: any }>()
 
 const UserFieldFormDialogRef = ref()
+const UserInputTitleDialogRef = ref()
 const inputFieldList = ref<any[]>([])
+const inputFieldConfig = ref({ title: t('chat.userInput') })
 
 function openAddDialog(data?: any, index?: any) {
   UserFieldFormDialogRef.value.open(data, index)
 }
 
+function openChangeTitleDialog() {
+  UserInputTitleDialogRef.value.open(inputFieldConfig.value)
+}
+
 function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
@@ -138,6 +157,13 @@ function refreshFieldList(data: any, index: any) {
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
 }
 
+function refreshFieldTitle(data: any) {
+  inputFieldConfig.value = data
+  UserInputTitleDialogRef.value.close()
+
+  console.log('inputFieldConfig', inputFieldConfig.value)
+}
+
 const getDefaultValue = (row: any) => {
   if (row.default_value) {
     const default_value = row.option_list
@@ -186,6 +212,7 @@ onMounted(() => {
     }
   })
   set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
+  set(props.nodeModel.properties, 'user_input_config', inputFieldConfig)
 })
 </script>
 
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
new file mode 100644
index 000000000..b05b0529e
--- /dev/null
+++ b/ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue
@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    :title="$t('common.setting')"
+    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"
+    >
+      <el-form-item :label="$t('common.title')" 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"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  title: t('chat.userInput') ,
+})
+
+const rules = reactive({
+  title: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>