From b37cc3ba1c751bb7aab67c33b311501a234719c1 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 29 Apr 2025 11:34:27 +0800
Subject: [PATCH] perf: The style of MCP nodes when there is no data (#3017)

---
 ui/src/workflow/nodes/mcp-node/index.vue | 266 ++++++++++++-----------
 1 file changed, 140 insertions(+), 126 deletions(-)

diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
index d5430f284..4e1d0f34a 100644
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -59,135 +59,149 @@
     <h5 class="title-decoration-1 mb-8">
       {{ $t('views.applicationWorkflow.nodes.mcpNode.toolParam') }}
     </h5>
-    <div
-      class="border-r-4 p-8-12 mb-8 layout-bg lighter"
-      v-if="form_data.tool_params[form_data.params_nested]"
-    >
-      <el-form
-        ref="dynamicsFormRef"
-        label-position="top"
-        v-loading="loading"
-        require-asterisk-position="right"
-        :hide-required-asterisk="true"
-        v-if="form_data.mcp_tool"
-        @submit.prevent
-      >
-        <el-form-item
-          v-for="item in form_data.tool_form_field" :key="item.field"
-          :required="item.required"
+    <template v-if="form_data.tool_params[form_data.params_nested]">
+      <div class="p-8-12" v-if="!form_data.mcp_tool">
+        <el-text type="info">{{ $t('common.noData') }}</el-text>
+      </div>
+      <div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <el-form
+          ref="dynamicsFormRef"
+          label-position="top"
+          v-loading="loading"
+          require-asterisk-position="right"
+          :hide-required-asterisk="true"
+          v-if="form_data.mcp_tool"
+          @submit.prevent
         >
-          <template #label>
-            <div class="flex-between">
-              <div>
-                <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
-                <span v-if="item.required" class="danger">*</span>
+          <el-form-item
+            v-for="item in form_data.tool_form_field"
+            :key="item.field"
+            :required="item.required"
+          >
+            <template #label>
+              <div class="flex-between">
+                <div>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
+                  <span v-if="item.required" class="danger">*</span>
+                </div>
+                <el-select
+                  :teleported="false"
+                  v-model="item.source"
+                  size="small"
+                  style="width: 85px"
+                  @change="form_data.tool_params[form_data.params_nested] = {}"
+                >
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                    value="referencing"
+                  />
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                    value="custom"
+                  />
+                </el-select>
               </div>
-              <el-select :teleported="false" v-model="item.source" size="small"
-                         style="width: 85px"
-                         @change="form_data.tool_params[form_data.params_nested] = {}">
-                <el-option
-                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
-                  value="referencing"
-                />
-                <el-option
-                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
-                  value="custom"
-                />
-              </el-select>
-            </div>
-          </template>
-          <el-input
-            v-if="item.source === 'custom' && item.input_type === 'TextInput'"
-            v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
-          />
-          <el-input-number
-            v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
-            v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
-          />
-          <el-switch
-            v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
-            v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
-          />
-          <el-input
-            v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
-            v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
-            type="textarea"
-          />
-          <NodeCascader
-            v-if="item.source === 'referencing'"
-            ref="nodeCascaderRef2"
-            :nodeModel="nodeModel"
-            class="w-full"
-            :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-            v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
-          />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div
-      v-else
-      class="border-r-4 p-8-12 mb-8 layout-bg lighter"
-    >
-      <el-form
-        ref="dynamicsFormRef"
-        label-position="top"
-        v-loading="loading"
-        require-asterisk-position="right"
-        :hide-required-asterisk="true"
-        v-if="form_data.mcp_tool"
-        @submit.prevent
-      >
-        <el-form-item
-          v-for="item in form_data.tool_form_field" :key="item.field"
-          :required="item.required"
+            </template>
+            <el-input
+              v-if="item.source === 'custom' && item.input_type === 'TextInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-input-number
+              v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-switch
+              v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+            <el-input
+              v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+              type="textarea"
+            />
+            <NodeCascader
+              v-if="item.source === 'referencing'"
+              ref="nodeCascaderRef2"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="form_data.tool_params[form_data.params_nested][item.label.label]"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+    <template v-else>
+      <div class="p-8-12"  v-if="!form_data.mcp_tool">
+        <el-text type="info">{{ $t('common.noData') }}</el-text>
+      </div>
+      <div v-else class="border-r-4 p-8-12 mb-8 layout-bg lighter">
+        <el-form
+          ref="dynamicsFormRef"
+          label-position="top"
+          v-loading="loading"
+          require-asterisk-position="right"
+          :hide-required-asterisk="true"
+          v-if="form_data.mcp_tool"
+          @submit.prevent
         >
-          <template #label>
-            <div class="flex-between">
-              <div>
-                <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
-                <span v-if="item.required" class="danger">*</span>
+          <el-form-item
+            v-for="item in form_data.tool_form_field"
+            :key="item.field"
+            :required="item.required"
+          >
+            <template #label>
+              <div class="flex-between">
+                <div>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
+                  <span v-if="item.required" class="danger">*</span>
+                </div>
+                <el-select
+                  :teleported="false"
+                  v-model="item.source"
+                  size="small"
+                  style="width: 85px"
+                >
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
+                    value="referencing"
+                  />
+                  <el-option
+                    :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
+                    value="custom"
+                  />
+                </el-select>
               </div>
-              <el-select :teleported="false" v-model="item.source" size="small"
-                         style="width: 85px">
-                <el-option
-                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
-                  value="referencing"
-                />
-                <el-option
-                  :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.custom')"
-                  value="custom"
-                />
-              </el-select>
-            </div>
-          </template>
-          <el-input
-            v-if="item.source === 'custom' && item.input_type === 'TextInput'"
-            v-model="form_data.tool_params[item.label.label]"
-          />
-          <el-input-number
-            v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
-            v-model="form_data.tool_params[item.label.label]"
-          />
-          <el-switch
-            v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
-            v-model="form_data.tool_params[item.label.label]"
-          />
-          <el-input
-            v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
-            v-model="form_data.tool_params[item.label.label]"
-            type="textarea"
-          />
-          <NodeCascader
-            v-if="item.source === 'referencing'"
-            ref="nodeCascaderRef2"
-            :nodeModel="nodeModel"
-            class="w-full"
-            :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-            v-model="form_data.tool_params[item.label.label]"
-          />
-        </el-form-item>
-      </el-form>
-    </div>
+            </template>
+            <el-input
+              v-if="item.source === 'custom' && item.input_type === 'TextInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-input-number
+              v-else-if="item.source === 'custom' && item.input_type === 'NumberInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-switch
+              v-else-if="item.source === 'custom' && item.input_type === 'SwitchInput'"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+            <el-input
+              v-else-if="item.source === 'custom' && item.input_type === 'JsonInput'"
+              v-model="form_data.tool_params[item.label.label]"
+              type="textarea"
+            />
+            <NodeCascader
+              v-if="item.source === 'referencing'"
+              ref="nodeCascaderRef2"
+              :nodeModel="nodeModel"
+              class="w-full"
+              :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+              v-model="form_data.tool_params[item.label.label]"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
   </NodeContainer>
 </template>
 <script setup lang="ts">
@@ -319,7 +333,7 @@ function changeTool() {
       } else if (args_schema.properties[item].type === 'object') {
         input_type = 'JsonInput'
       }
-      console.log(args_schema.properties[item]);
+      console.log(args_schema.properties[item])
       form_data.value.tool_form_field.push({
         field: item,
         label: {