style: MCP config dialog style (#3911)

Co-authored-by: wangdan-fit2cloud <[email protected]>

Author: shaohuzhang1

ui/src/locales/lang/en-US/views/tool.ts

@@ -8,6 +8,7 @@ export default {
   copyTool: 'Copy Tool',
   importTool: 'Import Tool',
   settingTool: 'Set Tool',
+  mcpConfig: 'MCP Service Config',
   toolStore: {
     title: 'Tool Store',
     createFromToolStore: 'Create from Tool Store',
@@ -38,9 +39,6 @@ export default {
   },
 
   form: {
-    create: 'Create Tool',
-    createMcp: 'Create MCP',
-    mcpConfig: 'MCP Service Config',
     toolName: {
       label: 'Name',
       name: 'Tool Name',

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -8,6 +8,7 @@ export default {
   copyTool: '复制工具',
   importTool: '导入工具',
   settingTool: '设置工具',
+  mcpConfig: 'MCP服务配置',
   toolStore: {
     title: '工具商店',
     createFromToolStore: '从工具商店创建',
@@ -32,9 +33,6 @@ export default {
     saveMessage: '当前的更改尚未保存，确认退出吗?',
   },
   form: {
-    create: '创建工具',
-    createMcp: '创建MCP',
-    mcpConfig: 'MCP服务配置',
     toolName: {
       label: '名称',
       name: '工具名称',

ui/src/locales/lang/zh-Hant/views/tool.ts

@@ -8,6 +8,7 @@ export default {
   copyTool: '複製工具',
   importTool: '匯入工具',
   settingTool: '設定工具',
+  mcpConfig: 'MCP服務配置',
   toolStore: {
     title: '工具商店',
     createFromToolStore: '從工具商店創建',
@@ -35,9 +36,6 @@ export default {
     confirmMessage: '停用後，引用該工具的應用在查詢時會報錯，請謹慎操作。',
   },
   form: {
-    create: '建立工具',
-    createMcp: '建立MCP',
-    mcpConfig: 'MCP服務配置',
     toolName: {
       label: '名稱',
       name: '工具名稱',

ui/src/views/tool/component/McpToolConfigDialog.vue

@@ -1,13 +1,14 @@
 <template>
   <el-dialog
-    :title="$t('views.tool.form.mcpConfig')"
+    :title="$t('views.tool.mcpConfig')"
     width="600"
     v-model="dialogVisible"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :destroy-on-close="true"
     :before-close="close"
     append-to-body
+    class="mcp-config-dialog"
   >
     <el-form label-width="auto" label-position="top">
       <el-form-item>
@@ -16,24 +17,25 @@
           v-model="mcp_servers"
           rows="8"
           disabled
+          class="config-textarea"
+          @mouseenter.stop="showIcon = true"
+          @mouseleave.stop="showIcon = false"
         ></el-input>
-        <AppIcon
-          iconName="app-copy"
-          class="copy-icon color-secondary"
-          @click="copyClick(mcp_servers)"
-        />
+        <el-button circle class="copy-icon" v-if="showIcon" @click="copyClick(mcp_servers)">
+          <AppIcon iconName="app-copy" class="color-secondary"/>
+        </el-button>
       </el-form-item>
     </el-form>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
-import {copyClick} from '@/utils/clipboard'
-
+import { ref } from 'vue'
+import { copyClick } from '@/utils/clipboard'
 
 const mcp_servers = ref<string>('')
 const dialogVisible = ref<boolean>(false)
+const showIcon = ref<boolean>(false)
 
 const close = () => {
   dialogVisible.value = false
@@ -43,25 +45,23 @@ const open = (item: any) => {
   dialogVisible.value = true
 }
 
-defineExpose({open,})
+defineExpose({ open })
 </script>
 
 <style scoped lang="scss">
-
-.copy-icon {
-  position: absolute;
-  top: 6px;
-  right: 8px;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 2;
-}
-
-.copy-icon:hover {
-  opacity: 0.85;
-}
-
-:deep(.el-textarea__inner) {
-  padding-right: 34px; // 给右上角图标留空间
+.mcp-config-dialog {
+  .copy-icon {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    box-shadow: 0px 4px 8px 0px rgba(31, 35, 41, 0.1);
+    z-index: 2;
+  }
+  .config-textarea {
+    :deep(.el-textarea__inner) {
+      color: var(--el-text-color-primary);
+      cursor: pointer;
+    }
+  }
 }
 </style>

ui/src/views/tool/component/ToolListContainer.vue

@@ -50,7 +50,7 @@
                     <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
-                    <div class="lighter">{{ $t('views.tool.form.create') }}</div>
+                    <div class="lighter">{{ $t('views.tool.createTool') }}</div>
                   </div>
                 </div>
               </el-dropdown-item>
@@ -60,7 +60,7 @@
                     <img src="@/assets/workflow/icon_mcp.svg" style="width: 75%" alt="" />
                   </el-avatar>
                   <div class="pre-wrap ml-8">
-                    <div class="lighter">{{ $t('views.tool.form.createMcp') }}</div>
+                    <div class="lighter">{{ $t('views.tool.createMcpTool') }}</div>
                   </div>
                 </div>
               </el-dropdown-item>
@@ -222,8 +222,8 @@
                             v-if="item.tool_type === 'MCP'"
                             @click.stop="showMcpConfig(item)"
                           >
-                            <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
-                            {{ $t('views.tool.form.mcpConfig') }}
+                            <AppIcon iconName="app-operate-log" class="color-secondary"></AppIcon>
+                            {{ $t('views.tool.mcpConfig') }}
                           </el-dropdown-item>
                           <el-dropdown-item
                             v-if="item.template_id && permissionPrecise.edit(item.id)"

ui/src/workflow/nodes/start-node/index.vue

@@ -20,12 +20,10 @@
         </el-button>
       </el-tooltip>
     </div>
-    <template v-if="nodeModel.properties.config.chatFields">
+    <template v-if="nodeModel.properties.config.chatFields?.length">
       <h5 class="title-decoration-1 mb-8">{{ $t('views.applicationWorkflow.variable.chat') }}</h5>
       <div
-        v-for="(item, index) in nodeModel.properties.config.chatFields
-          ? nodeModel.properties.config.chatFields
-          : []"
+        v-for="(item, index) in nodeModel.properties.config.chatFields || []"
         :key="index"
         class="flex-between border-r-6 p-8-12 mb-8 layout-bg lighter"
         @mouseenter="showicon = true"