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
This commit is contained in:
Jason
2025-10-09 16:44:28 +08:00
parent 9471cb0d19
commit 2bb847cb3d
3 changed files with 11 additions and 6 deletions

View File

@@ -333,7 +333,7 @@ function App() {
{/* 通知组件 - 相对于视窗定位 */} {/* 通知组件 - 相对于视窗定位 */}
{notification && ( {notification && (
<div <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" notification.type === "error"
? "bg-red-500 text-white" ? "bg-red-500 text-white"
: "bg-green-500 text-white" : "bg-green-500 text-white"

View File

@@ -8,7 +8,7 @@ import McpWizardModal from "./McpWizardModal";
interface McpFormModalProps { interface McpFormModalProps {
editingId?: string; editingId?: string;
initialData?: McpServer; initialData?: McpServer;
onSave: (id: string, server: McpServer) => void; onSave: (id: string, server: McpServer) => Promise<void>;
onClose: () => void; onClose: () => void;
} }
@@ -82,7 +82,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
// 解析 JSON 配置 // 解析 JSON 配置
server = JSON.parse(formJson) as McpServer; server = JSON.parse(formJson) as McpServer;
} else { } else {
// 空 JSON 时提供默认值 // 空 JSON 时提供默认值(注意:后端会校验 stdio 需要非空 command / http 需要 url
server = { server = {
type: "stdio", type: "stdio",
command: "", command: "",
@@ -95,9 +95,12 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
server.enabled = initialData.enabled; server.enabled = initialData.enabled;
} }
onSave(formId.trim(), server); // 显式等待父组件保存流程,以便正确处理成功/失败
} catch (error) { await onSave(formId.trim(), server);
alert(t("mcp.error.saveFailed")); } catch (error: any) {
// 将后端错误信息直接提示给用户(例如缺少 command/url 等)
const msg = error?.message || t("mcp.error.saveFailed");
alert(msg);
} finally { } finally {
setSaving(false); setSaving(false);
} }

View File

@@ -115,6 +115,8 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify }) => {
onNotify?.(t("mcp.msg.saved"), "success", 1500); onNotify?.(t("mcp.msg.saved"), "success", 1500);
} catch (e: any) { } catch (e: any) {
onNotify?.(e?.message || t("mcp.error.saveFailed"), "error", 6000); onNotify?.(e?.message || t("mcp.error.saveFailed"), "error", 6000);
// 继续抛出错误,让表单层可以给到直观反馈(避免被更高层遮挡)
throw e;
} }
}; };