feat: add MCP Service Config dialog and update tool form labels

Author: liuruibin

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',

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

@@ -34,6 +34,7 @@ export default {
   form: {
     create: '创建工具',
     createMcp: '创建MCP',
+    mcpConfig: 'MCP服务配置',
     toolName: {
       label: '名称',
       name: '工具名称',

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

@@ -37,6 +37,7 @@ export default {
   form: {
     create: '建立工具',
     createMcp: '建立MCP',
+    mcpConfig: 'MCP服務配置',
     toolName: {
       label: '名稱',
       name: '工具名稱',

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>

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)