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:
Jason
2025-10-10 23:23:40 +08:00
parent 4543664ba2
commit 3b142155c3
2 changed files with 15 additions and 5 deletions

View File

@@ -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

View File

@@ -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"),