apache-shenyu对接mcp-server-swagger-import

友谊是两颗心真诚相待，而不是一颗心对另一颗心的敲打。——鲁迅《鲁迅杂文选》

本次 PR（https://github.com/apache/shenyu-dashboard/pull/556）主要为 ShenYu Dashboard 的 MCP Server 管理模块引入了 Swagger 文件导入的前端支持。改动点如下：

---

主要涉及文件及改动说明

1. src/locales/en-US.json、src/locales/zh-CN.json

   • 改动： 新增多条与 Swagger 导入相关的中英文国际化文案，如“Swagger Import”、“Swagger URL”、“项目名称”等。
   • 目的： 确保新增页面和弹框的所有 UI 字段均能国际化显示。

2. src/models/mcpServer.js

   • 改动：
     • 引入并注册了 mcpSwaggerImport 的异步 effect。
     • 新增了 swaggerImport generator 方法，通过 redux-saga 管理，与后端交互处理导入流程，反馈成功/失败提示，并在必要时回调刷新页面数据。
   • 目的： 规范导入业务异步流程与状态管理，响应式更新页面。

3. src/routes/Plugin/McpServer/SwaggerImportModal.js（新增文件）

   • 改动： 新增一个受控弹窗组件，包含 Swagger URL 与项目名称的填写与校验。
   • 目的： 复用 antd 表单能力，强化 UI 表现，为后续可扩展的导入功能打好基础。

4. src/routes/Plugin/McpServer/index.js

   • 改动：
     • 引入了 SwaggerImportModal 组件。
     • 新增 swaggerImportClick 方法，点击按钮弹出导入弹窗，并在确认后触发 dispatch mcpServer/swaggerImport redux-saga 流程。
     • 在 MCP Server 管理页顶部按钮区新增“导入Swagger”按钮（具备权限控制）。
   • 目的： 优雅集成导入入口及 UI 动作，提升用户操作体验。

5. src/services/api.js

   • 改动： 新增 mcpSwaggerImport 方法，封装接口调用，将 swaggerUrl、projectName 及 namespaceId POST 到后端。
   • 目的： 贯彻前后端解耦原则，方便统一维护 API 层逻辑。

---

知识点

整个“Swagger 导入”流程的异步处理由 redux-saga 管理，具体体现在：

• 调用方式简洁，业务组件触发 dispatch({ type: "mcpServer/swaggerImport", payload }) 即可，不需要关心异步细节。
• 通过 generator （即 redux-saga 的 effect），清晰地串联接口请求、提示展示、数据刷新、回调等一系列异步操作。
• 例如代码片段如下（src/models/mcpServer.js）：

*swaggerImport({ payload, callback }, { call, put }) {
  const json = yield call(mcpSwaggerImport, payload);
  if (json.code === 200) {
    message.success(json.message);
    yield put({ type: "reload" });
    if (callback) callback();
  } else {
    message.warn(json.message);
  }
},

• 这样确保了异步控制流的时序和异常处理都高度集中且易维护，提升了代码健壮性和扩展性。

---

总结

本 PR 前端部分以最小侵入式和最佳实践为原则，完成了 MCP Server Swagger 文件导入的全链路能力 —— 包含国际化、业务数据建模、UI 组件落地和 redux-saga 异步驱动，有力提升了用户操作体验与代码可维护性，为后续类似扩展功能打下坚实基础。