From c429097239381b83830346e9706891a2e0a50667 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Thu, 21 Aug 2025 17:14:36 +0800
Subject: [PATCH] feat: add MCP Service Config dialog and update tool form
 labels

---
 ui/src/locales/lang/en-US/views/tool.ts       |  1 +
 ui/src/locales/lang/zh-CN/views/tool.ts       |  1 +
 ui/src/locales/lang/zh-Hant/views/tool.ts     |  1 +
 .../tool/component/McpToolConfigDialog.vue    | 67 +++++++++++++++++++
 .../tool/component/ToolListContainer.vue      | 18 +++++
 5 files changed, 88 insertions(+)
 create mode 100644 ui/src/views/tool/component/McpToolConfigDialog.vue

diff --git a/ui/src/locales/lang/en-US/views/tool.ts b/ui/src/locales/lang/en-US/views/tool.ts
index 7ec020c98..780f38512 100644
--- a/ui/src/locales/lang/en-US/views/tool.ts
+++ b/ui/src/locales/lang/en-US/views/tool.ts
@@ -40,6 +40,7 @@ export default {
   form: {
     create: 'Create Tool',
     createMcp: 'Create MCP',
+    mcpConfig: 'MCP Service Config',
     toolName: {
       label: 'Name',
       name: 'Tool Name',
diff --git a/ui/src/locales/lang/zh-CN/views/tool.ts b/ui/src/locales/lang/zh-CN/views/tool.ts
index 6af79fda0..e81969a52 100644
--- a/ui/src/locales/lang/zh-CN/views/tool.ts
+++ b/ui/src/locales/lang/zh-CN/views/tool.ts
@@ -34,6 +34,7 @@ export default {
   form: {
     create: '创建工具',
     createMcp: '创建MCP',
+    mcpConfig: 'MCP服务配置',
     toolName: {
       label: '名称',
       name: '工具名称',
diff --git a/ui/src/locales/lang/zh-Hant/views/tool.ts b/ui/src/locales/lang/zh-Hant/views/tool.ts
index aea7add76..b178bb521 100644
--- a/ui/src/locales/lang/zh-Hant/views/tool.ts
+++ b/ui/src/locales/lang/zh-Hant/views/tool.ts
@@ -37,6 +37,7 @@ export default {
   form: {
     create: '建立工具',
     createMcp: '建立MCP',
+    mcpConfig: 'MCP服務配置',
     toolName: {
       label: '名稱',
       name: '工具名稱',
diff --git a/ui/src/views/tool/component/McpToolConfigDialog.vue b/ui/src/views/tool/component/McpToolConfigDialog.vue
new file mode 100644
index 000000000..dc71e4e72
--- /dev/null
+++ b/ui/src/views/tool/component/McpToolConfigDialog.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    :title="$t('views.tool.form.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
+  >
+    <el-form label-width="auto" label-position="top">
+      <el-form-item>
+        <el-input
+          type="textarea"
+          v-model="mcp_servers"
+          rows="8"
+          disabled
+        ></el-input>
+        <AppIcon
+          iconName="app-copy"
+          class="copy-icon color-secondary"
+          @click="copyClick(mcp_servers)"
+        />
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {copyClick} from '@/utils/clipboard'
+
+
+const mcp_servers = ref<string>('')
+const dialogVisible = ref<boolean>(false)
+
+const close = () => {
+  dialogVisible.value = false
+}
+const open = (item: any) => {
+  mcp_servers.value = item.code
+  dialogVisible.value = true
+}
+
+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; // 给右上角图标留空间
+}
+</style>
diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index 32b73b148..f5ef04c9c 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -218,6 +218,13 @@
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
+                          <el-dropdown-item
+                            v-if="item.tool_type === 'MCP'"
+                            @click.stop="showMcpConfig(item)"
+                          >
+                            <AppIcon iconName="app-edit" class="color-secondary"></AppIcon>
+                            {{ $t('views.tool.form.mcpConfig') }}
+                          </el-dropdown-item>
                           <el-dropdown-item
                             v-if="item.template_id && permissionPrecise.edit(item.id)"
                             @click.stop="addInternalTool(item, true)"
@@ -306,6 +313,7 @@
   <CreateFolderDialog ref="CreateFolderDialogRef" v-if="!isShared" @refresh="refreshFolder" />
   <ToolStoreDialog ref="toolStoreDialogRef" :api-type="apiType" @refresh="refresh" />
   <AddInternalToolDialog ref="AddInternalToolDialogRef" @refresh="confirmAddInternalTool" />
+  <McpToolConfigDialog ref="McpToolConfigDialogRef" @refresh="refresh" />
   <AuthorizedWorkspace
     ref="AuthorizedWorkspaceDialogRef"
     v-if="isSystemShare"
@@ -336,6 +344,7 @@ import ToolStoreDialog from '@/views/tool/toolStore/ToolStoreDialog.vue'
 import AddInternalToolDialog from '@/views/tool/toolStore/AddInternalToolDialog.vue'
 import MoveToDialog from '@/components/folder-tree/MoveToDialog.vue'
 import ResourceAuthorizationDrawer from '@/components/resource-authorization-drawer/index.vue'
+import McpToolConfigDialog from "@/views/tool/component/McpToolConfigDialog.vue";
 import { resetUrl } from '@/utils/common'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
 import { SourceTypeEnum } from '@/enums/common'
@@ -644,6 +653,15 @@ function importTool(file: any) {
     })
 }
 
+const McpToolConfigDialogRef = ref()
+function showMcpConfig(item: any) {
+  loadSharedApi({ type: 'tool', systemType: apiType.value })
+    .getToolById(item?.id, loading)
+    .then((res: any) => {
+      McpToolConfigDialogRef.value.open(res.data)
+    })
+}
+
 function refresh(data?: any) {
   if (data) {
     const list = cloneDeep(tool.toolList)