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:
@@ -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"
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user