fix(mcp): eliminate panel flicker on toggle with optimistic updates
- Add fixed height (h-16) to MCP list items for visual consistency - Implement optimistic UI updates in handleToggle to prevent flicker - Remove reload() call that caused loading state transitions - Add automatic rollback on API failure with error notifications
This commit is contained in:
@@ -47,8 +47,8 @@ const McpListItem: React.FC<McpListItemProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn(cardStyles.interactive, "!p-4")}>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={cn(cardStyles.interactive, "!p-4 h-16")}>
|
||||
<div className="flex items-center gap-4 h-full">
|
||||
{/* 左侧:Toggle 开关 */}
|
||||
<div className="flex-shrink-0">
|
||||
<McpToggle
|
||||
|
||||
@@ -67,17 +67,27 @@ const McpPanel: React.FC<McpPanelProps> = ({ onClose, onNotify, appType }) => {
|
||||
}, [appType]);
|
||||
|
||||
const handleToggle = async (id: string, enabled: boolean) => {
|
||||
try {
|
||||
// 启用/禁用已存在的条目
|
||||
// 乐观更新:立即更新 UI
|
||||
const previousServers = servers;
|
||||
setServers((prev) => ({
|
||||
...prev,
|
||||
[id]: {
|
||||
...prev[id],
|
||||
enabled,
|
||||
},
|
||||
}));
|
||||
|
||||
try {
|
||||
// 后台调用 API
|
||||
await window.api.setMcpEnabled(appType, id, enabled);
|
||||
await reload();
|
||||
onNotify?.(
|
||||
enabled ? t("mcp.msg.enabled") : t("mcp.msg.disabled"),
|
||||
"success",
|
||||
1500,
|
||||
);
|
||||
} catch (e: any) {
|
||||
// 失败时回滚
|
||||
setServers(previousServers);
|
||||
const detail = extractErrorMessage(e);
|
||||
onNotify?.(
|
||||
detail || t("mcp.error.saveFailed"),
|
||||
|
||||
Reference in New Issue
Block a user