feat: 增强MCP服务器管理功能

- 添加MCP服务器导入导出功能，支持批量管理
- MCP工具项支持动态参数模板变量 {REQUEST_PARAM}
- 新增 @types/qs 依赖用于查询参数处理
- 完善相关国际化文本支持

Author: heqingpan

package-lock.json

@@ -46,6 +46,7 @@
     "@rushstack/eslint-patch": "1.5.1",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^18.16.1",
+    "@types/qs": "^6.14.0",
     "@vicons/antd": "^0.13.0",
     "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^5.2.1",

package.json

@@ -119,6 +119,11 @@
                         >• {IP_PORT} -
                         {{ t('mcpservertollitem.ip_port') }}</n-text
                       >
+                      <br />
+                      <n-text
+                        >• {{ '{' + '{REQUEST_PARAM}' + '}' }} -
+                        {{ t('mcpservertollitem.dynamic_parameters') }}
+                      </n-text>
                     </div>
                   </n-tooltip>
                 </n-space>
@@ -276,9 +281,11 @@
             />
             <template #feedback>
               <n-text depth="3" style="font-size: 12px; line-height: 1.4">
-                {{ t('mcpservertollitem.support_template_vars') }} {IP_PORT}（{{
+                {{ t('mcpservertollitem.support_template_vars') }} {IP_PORT}({{
                   t('mcpservertollitem.ip_port')
-                }}）
+                }}), {{ '{' + '{REQUEST_PARAM}' + '}' }}({{
+                  t('mcpservertollitem.dynamic_parameters')
+                }})
               </n-text>
             </template>
           </n-form-item>

src/components/mcpserver/McpServerToolItem.vue

@@ -426,6 +426,12 @@ const message = {
     create_success: 'MCP server created successfully',
     update_success: 'MCP server updated successfully',
 
+    // Import/Export
+    export_servers: 'Export MCP Services',
+    import_servers: 'Import MCP Services',
+    import_zip_success: 'MCP services imported successfully',
+    import_zip_failed: 'MCP services import failed',
+
     // Detail page
     basic_info: 'Basic Information',
     tool_info: 'Tool Information',
@@ -546,6 +552,7 @@ const message = {
     ip_address: 'IP Address of service instance',
     port: 'Port of service instance',
     ip_port: 'IP:Port of service instance',
+    dynamic_parameters: 'Dynamic parameters',
     tool_selection: 'Tool Selection',
     select_tool_spec: 'Select Tool Spec',
     selected_tool: 'Selected Tool',

src/i18n/lang/en-US.js

@@ -411,6 +411,12 @@ const message = {
     create_success: 'MCP服务器创建成功',
     update_success: 'MCP服务器更新成功',
 
+    // 导入导出
+    export_servers: '导出MCP服务',
+    import_servers: '导入MCP服务',
+    import_zip_success: 'MCP服务导入成功',
+    import_zip_failed: 'MCP服务导入失败',
+
     // 详情页面
     basic_info: '基础信息',
     tool_info: '工具信息',
@@ -533,9 +539,10 @@ const message = {
     service_group: '服务分组',
     additional_headers: '附加头',
     support_template_vars: '支持模板变量：',
-    ip_address: '关联服务实例的IP地址',
-    port: '关联服务实例的端口',
-    ip_port: '关联服务实例的IP:端口',
+    ip_address: '服务实例的IP地址',
+    port: '服务实例的端口',
+    ip_port: '服务实例的IP:端口',
+    dynamic_parameters: '动态参数',
     tool_selection: '工具选择',
     select_tool_spec: '选择工具规范',
     selected_tool: '已选择的工具',

src/i18n/lang/zh-CN.js

@@ -44,6 +44,24 @@
                     @click="showCreate"
                     >{{ t('common.add') }}</n-button
                   >
+                  <n-button @click="download" type="info">{{
+                    t('mcpserver.export_servers')
+                  }}</n-button>
+                  <n-upload
+                    v-if="webResources.canUpdateMcpServer"
+                    :key="uploadKey"
+                    action="/rnacos/api/console/v2/mcp/server/import"
+                    :headers="uploadHeader"
+                    :show-file-list="false"
+                    :max="1"
+                    accept=".zip"
+                    @before-upload="doBeforeZipUpload"
+                    @finish="handleZipUploadFinish"
+                  >
+                    <n-button type="info">{{
+                      t('mcpserver.import_servers')
+                    }}</n-button>
+                  </n-upload>
                 </n-space>
               </n-gi>
             </n-grid>
@@ -94,7 +112,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, nextTick } from 'vue';
 import { mcpServerApi } from '@/api/mcpserver';
 import { namespaceStore } from '@/data/namespace';
 import { useWebResources } from '@/data/resources';
@@ -110,7 +128,8 @@ import template from 'template_js';
 import namespaceApi from '@/api/namespace';
 import * as constant from '@/types/constant';
 import { formatMcpServerForDisplay } from '@/api/mcpserver';
-import type { McpServerDto } from '@/types/mcpserver';
+import { McpServerDto } from '@/types/mcpserver';
+import qs from 'qs';
 
 const defaultModelValue: McpServerDto & { mode: string } = {
   id: 0,
@@ -162,6 +181,12 @@ const param = ref({
 
 const model = ref<McpServerDto & { mode: string }>({ ...defaultModelValue });
 
+// 导入相关状态
+const uploadHeader = ref({
+  namespace: namespaceStore.current.value.namespaceId
+});
+const uploadKey = ref(0);
+
 const pagination = reactive({
   page: 1,
   pageCount: 1,
@@ -416,6 +441,43 @@ const queryList = () => {
   doHandlePageChange(1);
 };
 
+// 导出 McpServer
+const download = () => {
+  const params = {
+    namespaceId: namespaceStore.current.value.namespaceId,
+    nameFilter: param.value.nameFilter,
+    pageNo: 1,
+    pageSize: 20
+  };
+  const queryString = qs.stringify(params);
+  const url = '/rnacos/api/console/v2/mcp/server/download?' + queryString;
+  const link = document.createElement('a');
+  document.body.appendChild(link);
+  link.href = url;
+  link.click();
+  document.body.removeChild(link);
+  return true;
+};
+
+// ZIP文件上传前处理
+const doBeforeZipUpload = () => {
+  uploadHeader.value = {
+    namespace: namespaceStore.current.value.namespaceId
+  };
+};
+
+// 处理ZIP文件上传完成
+const handleZipUploadFinish = ({ file, event }: { file: any; event?: any }) => {
+  if (event?.target?.status === 200) {
+    message.success(t('mcpserver.import_zip_success'));
+    doHandlePageChange(1);
+  } else {
+    message.error(t('mcpserver.import_zip_failed'));
+  }
+  // 通过改变 key 来强制重新渲染上传组件，重置其状态
+  uploadKey.value += 1;
+};
+
 onMounted(() => {
   queryList();
 });