From a5acdad7b1ce7a8e82f958e345c991b72d5609ae Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 25 Mar 2025 18:31:42 +0800
Subject: [PATCH] perf: refine user input style

---
 ui/src/assets/fx/bochaai/detail.md            | 13 +++---
 ui/src/assets/fx/google_search/detail.md      | 25 ++++++-----
 ui/src/assets/fx/langsearch/detail.md         | 16 ++++----
 .../component/chat-input-operate/index.vue    |  1 -
 .../ai-chat/component/user-form/index.vue     | 24 ++++++++---
 ui/src/components/ai-chat/index.vue           | 24 ++++++++++-
 .../layout/components/sidebar/SidebarItem.vue |  4 +-
 ui/src/views/function-lib/index.vue           |  9 ++++
 ui/src/workflow/common/NodeControl.vue        |  6 ---
 .../workflow/icons/function-lib-node-icon.vue |  2 +-
 ui/src/workflow/nodes/ai-chat-node/index.vue  | 41 ++++++++-----------
 ui/src/workflow/nodes/mcp-node/index.vue      |  5 ++-
 12 files changed, 97 insertions(+), 73 deletions(-)

diff --git a/ui/src/assets/fx/bochaai/detail.md b/ui/src/assets/fx/bochaai/detail.md
index 729dd233d76..dbbf940c90d 100644
--- a/ui/src/assets/fx/bochaai/detail.md
+++ b/ui/src/assets/fx/bochaai/detail.md
@@ -2,15 +2,14 @@
 
 博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
 
-
 ## 配置
 
 1. 获取API Key 
-在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
-![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
+   在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
+   ![API Key](/src/assets/fx/img/bocha_APIKey.jpg)
 1. 在函数库中配置
-在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。   
-![启动参数](/src/assets/fx/img/bocha_setting.jpg)
+   在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。  
+   ![启动参数](/src/assets/fx/img/bocha_setting.jpg)
 1. 在应用中使用
-在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
-![应用中使用](/src/assets/fx/img/bocha_app_used.jpg)
\ No newline at end of file
+   在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+   ![应用中使用](/src/assets/fx/img/bocha_app_used.jpg)
diff --git a/ui/src/assets/fx/google_search/detail.md b/ui/src/assets/fx/google_search/detail.md
index e6daef90270..42bc23664b4 100644
--- a/ui/src/assets/fx/google_search/detail.md
+++ b/ui/src/assets/fx/google_search/detail.md
@@ -5,19 +5,18 @@ Google 搜索工具是一个实时 API，可提取搜索引擎结果，提供来
 ## 配置
 
 1. 创建 Google Custom Search Engine
-在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
-![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
+   在[Programmable Search Engine]（https://programmablesearchengine.google.com/）中 添加 Search Engine
+   ![google 创建引擎](/src/assets/fx/img/google_AddSearchEngine.jpg)
 2. 获取cx参数
-进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
-![google cx ](/src/assets/fx/img/google_cx.jpg)
-3.获取 API Key
-打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
-![google API Key](/src/assets/fx/img/google_APIKey.jpg)
+   进入添加引擎，在【基本】菜单中获取搜索引擎的ID，即cx。
+   ![google cx ](/src/assets/fx/img/google_cx.jpg) 3.获取 API Key
+   打开 https://developers.google.com/custom-search/v1/overview?hl=zh-cn，获取API Key。
+   ![google API Key](/src/assets/fx/img/google_APIKey.jpg)
 
-4. 配置启动参数
-在Google搜索函数的启动参数中填写配置以上参数。
-![启动参数](/src/assets/fx/img/google_setting.jpg)
+3. 配置启动参数
+   在Google搜索函数的启动参数中填写配置以上参数。
+   ![启动参数](/src/assets/fx/img/google_setting.jpg)
 
-5. 在应用中使用
-在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
-![应用中使用](/src/assets/fx/img/google_app_used.jpg)
+4. 在应用中使用
+   在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+   ![应用中使用](/src/assets/fx/img/google_app_used.jpg)
diff --git a/ui/src/assets/fx/langsearch/detail.md b/ui/src/assets/fx/langsearch/detail.md
index 75347e1da79..0ca6556b1dd 100644
--- a/ui/src/assets/fx/langsearch/detail.md
+++ b/ui/src/assets/fx/langsearch/detail.md
@@ -2,16 +2,14 @@
 
 博查工具是一个支持自然语言搜索的 Web Search API，从近百亿网页和生态内容源中搜索高质量世界知识，包括新闻、图片、视频、百科、机酒、学术等.
 
-
 ## 配置
 
 1. 获取API Key 
-在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
-![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
+   在[博查开放平台](https://open.bochaai.com/overview) 上申请 API 密钥。
+   ![API Key](/src/assets/fx/img/langsearch_APIKey.jpg)
 2. 在函数库中配置
-在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。   
-![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
-1. 在应用中使用
-在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
- ![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)
- 
\ No newline at end of file
+   在函数库的博查函数面板中，点击 … > 启用参数，填写 API 密钥，并启用博查函数。  
+   ![启动参数](/src/assets/fx/img/langsearch_setting.jpg)
+3. 在应用中使用
+   在高级编排应用中，点击添加组件->函数库->博查，设置使用参数。
+   ![应用中使用](/src/assets/fx/img/langsearch_app_used.jpg)
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 83d2e0ddfb6..5a7986ef0ae 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
@@ -749,7 +749,6 @@ onMounted(() => {
 
 @media only screen and (max-width: 768px) {
   .ai-chat {
-    height: calc(100% - 100px);
     &__operate {
       position: fixed;
       bottom: 0;
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 97350cc913e..ea7d83f8bd6 100644
--- a/ui/src/components/ai-chat/component/user-form/index.vue
+++ b/ui/src/components/ai-chat/component/user-form/index.vue
@@ -4,8 +4,7 @@
       (inputFieldList.length > 0 || (type === 'debug-ai-chat' && apiInputFieldList.length > 0)) &&
       type !== 'log'
     "
-    class="mb-16 w-full"
-    style="padding: 0 24px; max-width: 400px"
+    class="user-form-container mb-16 w-full"
   >
     <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">
@@ -16,9 +15,14 @@
           {{ inputFieldConfig.title }}
         </span>
       </div>
-      <el-scrollbar max-height="160">
+
+      <el-scrollbar :max-height="first ? 0 : 450">
         <el-collapse-transition>
-          <div v-show="showUserInput" class="mt-16" style="padding: 0 8px">
+          <div
+            v-show="showUserInput"
+            class="mt-16"
+            style="padding: 0 8px; height: calc(100% - 100px)"
+          >
             <DynamicsForm
               :key="dynamicsFormRefresh"
               v-model="form_data_context"
@@ -40,6 +44,7 @@
           </div>
         </el-collapse-transition>
       </el-scrollbar>
+
       <div class="text-right mr-8">
         <el-button type="primary" v-if="first" @click="confirmHandle">{{
           $t('chat.operation.startChat')
@@ -359,4 +364,13 @@ onMounted(() => {
   handleInputFieldList()
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.user-form-container {
+  padding: 0 24px;
+}
+@media only screen and (max-width: 768px) {
+  .user-form-container {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 62e5a7fddde..403e560bdf1 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <div ref="aiChatRef" class="ai-chat" :class="type">
+  <div
+    ref="aiChatRef"
+    class="ai-chat"
+    :class="type"
+    :style="{ height: firsUserInput ? '100%' : undefined }"
+  >
     <div
       v-show="showUserInputContent"
       :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
@@ -521,7 +526,15 @@ defineExpose({
   height: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
+  overflow: auto;
+  .user-form-container {
+    max-width: 70%;
+  }
+}
+.debug-ai-chat {
+  .user-form-container {
+    max-width: 100%;
+  }
 }
 .popperUserInput {
   position: absolute;
@@ -531,4 +544,11 @@ defineExpose({
   width: calc(100% - 50px);
   max-width: 400px;
 }
+@media only screen and (max-width: 768px) {
+  .firstUserInput {
+    .user-form-container {
+      max-width: 100%;
+    }
+  }
+}
 </style>
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index 29a058c5303..f89feeda282 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -58,8 +58,8 @@ function showMenu() {
   }
 }
 
-function clickHandle(item: any) {
-  if (isWorkFlow(type) && item.name === 'AppSetting') {
+function clickHandle(item?: any) {
+  if (isWorkFlow(type) && item?.name === 'AppSetting') {
     router.push({ path: `/application/${id}/workflow` })
   }
 }
diff --git a/ui/src/views/function-lib/index.vue b/ui/src/views/function-lib/index.vue
index 0d397bca06b..ef826171ff9 100644
--- a/ui/src/views/function-lib/index.vue
+++ b/ui/src/views/function-lib/index.vue
@@ -152,12 +152,21 @@
                       size="small"
                       class="mr-4"
                     />
+                    <el-divider direction="vertical" />
                     <el-dropdown trigger="click">
                       <el-button text @click.stop>
                         <el-icon><MoreFilled /></el-icon>
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
+                          <el-dropdown-item
+                            v-if="!item.template_id"
+                            :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
+                            @click.stop="openCreateDialog(item)"
+                          >
+                            <el-icon><EditPen /></el-icon>
+                            {{ $t('common.edit') }}
+                          </el-dropdown-item>
                           <el-dropdown-item
                             :disabled="item.permission_type === 'PUBLIC' && !canEdit(item)"
                             v-if="!item.template_id"
diff --git a/ui/src/workflow/common/NodeControl.vue b/ui/src/workflow/common/NodeControl.vue
index e972fa31ba4..8e822b0978d 100644
--- a/ui/src/workflow/common/NodeControl.vue
+++ b/ui/src/workflow/common/NodeControl.vue
@@ -2,7 +2,6 @@
   <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
     <el-button link @click="zoomOut">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.zoomOut')"
         placement="top"
@@ -14,7 +13,6 @@
     </el-button>
     <el-button link @click="zoomIn">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.zoomIn')"
         placement="top"
@@ -26,7 +24,6 @@
     </el-button>
     <el-button link @click="fitView">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.fitView')"
         placement="top"
@@ -40,7 +37,6 @@
     <el-divider direction="vertical" />
     <el-button link @click="retract">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.retract')"
         placement="top"
@@ -54,7 +50,6 @@
     </el-button>
     <el-button link @click="extend">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.extend')"
         placement="top"
@@ -68,7 +63,6 @@
     </el-button>
     <el-button link @click="layout">
       <el-tooltip
-        class="box-item"
         effect="dark"
         :content="$t('views.applicationWorkflow.control.beautify')"
         placement="top"
diff --git a/ui/src/workflow/icons/function-lib-node-icon.vue b/ui/src/workflow/icons/function-lib-node-icon.vue
index 2b96396d186..00dff7062c2 100644
--- a/ui/src/workflow/icons/function-lib-node-icon.vue
+++ b/ui/src/workflow/icons/function-lib-node-icon.vue
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { isAppIcon } from '@/utils/application'
 const props = defineProps<{
-  item: {
+  item?: {
     name: string
     icon: string
   }
diff --git a/ui/src/workflow/nodes/ai-chat-node/index.vue b/ui/src/workflow/nodes/ai-chat-node/index.vue
index 9ab41294aa7..db7db68375f 100644
--- a/ui/src/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/workflow/nodes/ai-chat-node/index.vue
@@ -116,22 +116,33 @@
           />
         </el-form-item>
 
-        <el-form-item>
+        <div class="flex-between mb-16">
+          <div class="lighter">{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
+          <el-button type="primary" link @click="openMcpServersDialog" @refreshForm="refreshParam">
+            <el-icon><Setting /></el-icon>
+          </el-button>
+        </div>
+
+        <el-form-item @click.prevent>
           <template #label>
-            <div class="flex-between">
-              <div>{{ $t('views.applicationWorkflow.nodes.mcpNode.tool') }}</div>
+            <div class="flex-between w-full">
+              <div>
+                <span>{{
+                  $t('views.application.applicationForm.form.reasoningContent.label')
+                }}</span>
+              </div>
               <el-button
                 type="primary"
                 link
-                @click="openMcpServersDialog"
+                @click="openReasoningParamSettingDialog"
                 @refreshForm="refreshParam"
               >
                 <el-icon><Setting /></el-icon>
               </el-button>
             </div>
           </template>
+          <el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
         </el-form-item>
-
         <el-form-item @click.prevent>
           <template #label>
             <div class="flex align-center">
@@ -151,26 +162,6 @@
           </template>
           <el-switch size="small" v-model="chat_data.is_result" />
         </el-form-item>
-        <el-form-item @click.prevent>
-          <template #label>
-            <div class="flex-between w-full">
-              <div>
-                <span>{{
-                  $t('views.application.applicationForm.form.reasoningContent.label')
-                }}</span>
-              </div>
-              <el-button
-                type="primary"
-                link
-                @click="openReasoningParamSettingDialog"
-                @refreshForm="refreshParam"
-              >
-                <el-icon><Setting /></el-icon>
-              </el-button>
-            </div>
-          </template>
-          <el-switch size="small" v-model="chat_data.model_setting.reasoning_content_enable" />
-        </el-form-item>
       </el-form>
     </el-card>
 
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
index b01834fb3c1..fb4149c8571 100644
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -38,17 +38,18 @@
               :key="item.value"
               :label="item.name"
               :value="item.name"
+              class="flex align-center"
             >
               <el-tooltip
-                class="box-item"
                 effect="dark"
                 :content="item.description"
                 placement="top-start"
+                popper-class="max-w-350"
               >
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
 
-              <span>{{ item.name }}</span>
+              <span class="ml-4">{{ item.name }}</span>
             </el-option>
           </el-select>
         </el-form-item>