From 2bb847cb3dee35b8e143588ac1abca4204b59ae8 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Thu, 9 Oct 2025 16:44:28 +0800
Subject: [PATCH] fix(mcp): improve error handling and notification visibility

- Increase notification z-index to z-[80] to prevent overlay issues
- Make MCP save operation async with proper error propagation
- Display specific backend error messages in form validation
- Ensure errors are visible in both form and panel layers
---
 src/App.tsx                         |  2 +-
 src/components/mcp/McpFormModal.tsx | 13 ++++++++-----
 src/components/mcp/McpPanel.tsx     |  2 ++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d6c5b12..af9e551 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -333,7 +333,7 @@ function App() {
             {/* 通知组件 - 相对于视窗定位 */}
             {notification && (
               <div
-                className={`fixed top-20 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
+                className={`fixed top-20 left-1/2 transform -translate-x-1/2 z-[80] px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
                   notification.type === "error"
                     ? "bg-red-500 text-white"
                     : "bg-green-500 text-white"
diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index 26582f8..4014983 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -8,7 +8,7 @@ import McpWizardModal from "./McpWizardModal";
 interface McpFormModalProps {
   editingId?: string;
   initialData?: McpServer;
-  onSave: (id: string, server: McpServer) => void;
+  onSave: (id: string, server: McpServer) => Promise<void>;
   onClose: () => void;
 }
 
@@ -82,7 +82,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         // 解析 JSON 配置
         server = JSON.parse(formJson) as McpServer;
       } else {
-        // 空 JSON 时提供默认值
+        // 空 JSON 时提供默认值（注意：后端会校验 stdio 需要非空 command / http 需要 url）
         server = {
           type: "stdio",
           command: "",
@@ -95,9 +95,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
         server.enabled = initialData.enabled;
       }
 
-      onSave(formId.trim(), server);
-    } catch (error) {
-      alert(t("mcp.error.saveFailed"));
+      // 显式等待父组件保存流程，以便正确处理成功/失败
+      await onSave(formId.trim(), server);
+    } catch (error: any) {
+      // 将后端错误信息直接提示给用户（例如缺少 command/url 等）
+      const msg = error?.message || t("mcp.error.saveFailed");
+      alert(msg);
     } finally {
       setSaving(false);
     }
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index 0899db9..7c861c6 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -115,6 +115,8 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify }) => {
       onNotify?.(t("mcp.msg.saved"), "success", 1500);
     } catch (e: any) {
       onNotify?.(e?.message || t("mcp.error.saveFailed"), "error", 6000);
+      // 继续抛出错误，让表单层可以给到直观反馈（避免被更高层遮挡）
+      throw e;
     }
   };