企业官网建设流程全解析

ComfyUI 的插件体系容易让人产生一个误解：只有能往工作流里拖“节点”的才叫插件。实际很多高频痛点并不在模型推理链路里，而在前端交互层。画布位置及缩放记录与恢复就是一个典型：当工作流有上百个节点时，用户往往会盯住某一块区域反复调试，但浏览器刷新、切换工作流或误关页面后，画布会回到默认位置，之前研究的区域要找回来通常靠记忆和反复滚动。把这种能力做成 comfyui 插件，能让每次打开工作流时自动回到上次编辑的位置、缩放级别和可视区域，属于投入小但体验提升非常直接的工程。

这篇文章会围绕“画布位置及缩放记录与恢复”这个目标展开。先分析 ComfyUI 画布状态到底存在哪里、默认为什么不记录；再给出一个适合放在 custom_nodes 目录下的前端插件最小工程；然后逐步实现采集、节流保存、按工作流区分、加载后恢复等逻辑；最后补充常见问题排查和更适合生产环境的扩展方向。阅读前建议先了解 ComfyUI 的安装目录结构、custom_nodes 的基本作用，以及前端浏览器控制台的打开方式。实现不依赖特定节点，不需要 Python 端有太多后端逻辑，重点是理解 ComfyUI 采用 LiteGraph 驱动画布后，视图状态应该如何读写。

1. 画布位置与缩放记录恢复的本质：操作 LiteGraph 视图状态

1.1 ComfyUI 画布并不是一个 HTML 图片，而是一个有坐标系的图编辑器

ComfyUI 的工作区底层使用 LiteGraph 类图编辑器实现。LiteGraph 维护的不仅是节点数据，还有一张“无限大小”的画布，所有节点都有 graph 坐标系下的 x、y 坐标。用户看到的窗口是一个“摄像机窗口”，窗口能看到什么区域，取决于三个核心数据：

• 当前缩放比例（scale），小于 1 表示缩小看全局，大于 1 表示放大看细节；
• 画布在水平方向的滚动偏移（offsetX 或 offset[0]）；
• 画布在垂直方向的滚动偏移（offsetY 或 offset[1]）。

在 ComfyUI 前端运行环境里，这些状态通常挂在app.canvas.ds附近。ds是 DragAndScale 的简写，负责把鼠标位置、缩放比例和滚动偏移统一换算成图坐标系坐标。用户滚轮缩放、拖动空白处平移画布、鼠标悬浮到节点上移动视野，最终改变的都是这几个数值。

理解了这一点，插件要做的事就很清晰：在合适的时机读取scale和两个偏移量，把它们存起来；下次同一个工作流加载完，再把这三个数写回canvas.ds。业务上不需要分析节点内部数据，也不需要调用 Python API。

1.2 默认不保存视图状态是合理设计，插件不能直接“依赖官方记忆”

很多用户会问：为什么 ComfyUI 不把画布位置和缩放一并记住？原因主要有三个：

1. 视图状态属于 UI 状态，和应用数据边界不同。工作流应该记录的是“有哪些节点、节点怎么连接”，而不是“上一次用户眼睛看到了哪里”。
2. 不同用户使用同一个工作流时，关注区域不同。位置恢复如果做成工作流级别的自动行为，反而会让多人协作时互相干扰。
3. 浏览器 localStorage 容量和存储策略有限，频繁写入视图会产生额外开销，官方默认选择不保存更稳妥。

所以“画布位置恢复”这类能力天然适合第三方插件补齐。它不是 ComfyUI 缺失的 bug，而是官方把体验层改造空间留给社区。作为插件作者，要理解这一层边界，不能直接修改 ComfyUI 的app.js，因为升级版本后改动会丢失，而是应该通过 ComfyUI 提供的前端扩展机制注册自己的逻辑。

1.3 实现前需要回答三个问题，否则代码很容易跑偏

可以先把这个插件的任务拆成三个问题，代码围绕它们展开：

• 什么时候保存：拖动空白画布、滚轮缩放是连续高频事件，不能每次触发都立刻写 localStorage，必须做节流或防抖。
• 按什么维度保存：同一个浏览器可能打开多张工作流，不同工作流之间不能互相覆盖位置状态，所以要找到当前工作流的稳定标识，而不是统一存一个全局 key。
• 什么时候恢复：前端脚本刚加载时，ComfyUI 的 graph 可能还是空对象或尚未完成工作流装载。直接恢复会失败，或者把位置套在不正确的图上。

三个问题决定了插件的核心复杂度。下面先搭建能运行的最小工程，再逐段解释实现思路。

2. 插件工程搭建：前端扩展并不一定要有 Python 节点

2.1 自定义节点与前端扩展的分工需要分清

ComfyUI 里的“插件”入口通常在custom_nodes目录下，但插件内部可以有完全不同两种能力：

画布位置与缩放的记录恢复属于前端扩展，因为它处理的不是推理模型，而是编辑器交互。前端扩展最常见的存在形式，是在某个 custom_nodes 目录下放一个 JavaScript 文件，然后向app.registerExtension注册自己的生命周期回调。ComfyUI 加载时会把对应目录下的脚本注入前端页面。

有些集成包把这类能力做成“菜单装饰”，原理一样。为了避免依赖具体版本，下面给出的工程结构采用社区常见做法，并在代码里做了一定兼容处理。如果你的 ComfyUI 版本对前端扩展目录的加载方式有变化，优先阅读当前版本的官方示例，再同步调整目录名和加载入口。

2.2 最小目录结构

在custom_nodes下新建一个目录，名称建议带 ComfyUI 前缀，例如ComfyUI-ViewStateRestore。目录结构为：

custom_nodes/ └── ComfyUI-ViewStateRestore/ ├── __init__.py ├── web/ │ └── view_restore.js └── README.md

__init__.py负责让 ComfyUI 把它识别为自定义节点模块；web/view_restore.js是真正前端扩展逻辑。不需要写模型节点，因此__init__.py里的节点映射可以留空。

2.3__init__.py声明 Web 目录

如果使用的 ComfyUI 版本支持WEB_DIRECTORY方式加载前端资源，可以这样写：

# -*- coding: utf-8 -*- WEB_DIRECTORY = "./web" NODE_CLASS_MAPPINGS = {} NODE_DISPLAY_NAME_MAPPINGS = {} __all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]

这段代码的作用是把web目录暴露给 ComfyUI 前端。NODE_CLASS_MAPPINGS为空是因为这个扩展没有自定义节点；只要目录被加载，view_restore.js就会自动出现在前端页面里。不同版本如果仍使用旧的js目录加载方式，直接把 JavaScript 放到对应目录并确认入口路径即可。

2.4 前端扩展的注册入口

view_restore.js的骨架如下，然后在 setup 函数里完成采集、保存和恢复：

import { app } from "../../../scripts/app.js"; function initViewRestore() { // 真正的逻辑 } app.registerExtension({ name: "ComfyUI.ViewStateRestore", setup() { initViewRestore(); }, });

registerExtension是 ComfyUI 给前端扩展提供的注册 API。脚本被加载后，ComfyUI 调用 setup，此时插件拿到的是运行时的 app 实例。之所以不直接在最外层写一堆逻辑，是因为 app 在脚本加载时可能还没有完全初始化，放进 setup 可以在合适时机访问画布。

这里有一个版本细节要提醒：ComfyUI 前端经历过目录结构调整，../../../scripts/app.js这种相对路径在不同版本中不一定固定。如果控制台一直报 import 路径错误，需要查看当前版本的模块入口改成正确路径。更多时候，入口脚本的加载方式已经由 ComfyUI 开发者文档规定，先确认版本再填路径。

3. 实现记录与恢复主逻辑：先完成一次读写闭环

3.1 定义存储状态结构与常量

采集状态不需要很复杂，有几项字段就够用：

function createState(canvas) { const ds = canvas.ds; if (!ds || typeof ds.scale !== "number") return null; const offset = Array.isArray(ds.offset) ? ds.offset : null; const offsetX = offset ? offset[0] : ds.offsetX; const offsetY = offset ? offset[1] : ds.offsetY; if (typeof offsetX !== "number" || typeof offsetY !== "number") return null; return { version: 1, scale: ds.scale, offsetX, offsetY, savedAt: Date.now(), }; }

其中offset兼容处理比较重要。LiteGraph 在不同版本里，有的把偏移量放在ds.offset数组，有的放在ds.offsetX、ds.offsetY。写插件时不要假设所有版本都一样，建议读取时做一次兼容判断，这样升级 ComfyUI 后不至于直接崩溃。

定义的常量如下：

const STORAGE_PREFIX = "ComfyUI.ViewRestore"; const SAVE_DEBOUNCE_MS = 500; const MIN_SCALE = 0.02; const MAX_SCALE = 8; const MAX_RESTORE_RETRY = 60;

MIN_SCALE和MAX_SCALE是对恢复值的边界限制。用户在极端情况下可能把画布缩得很小或放得很大，这些极端值不一定适合所有屏幕。如果恢复的 scale 小于 0.02，通常说明视图已经无法有效操作，可以忽略这次恢复，让用户手动调整。

3.2 工作流维度的状态 key

为了避免多个工作流之间互相覆盖视图状态，保存 key 时必须区分当前是哪个工作流。简单可靠的方案是利用 graph 的节点结构生成一个特征字符串：

function getGraphKey(graph) { if (!graph) return "empty"; const nodes = graph._nodes || graph.nodes || []; if (!nodes.length) return "empty"; const typeSignature = nodes .slice(0, 30) .map((node) => node.type || node.id) .join(","); return `${nodes.length}_${typeSignature}`; }

这个 key 不是百分百唯一，但它能覆盖大多数场景。同一张工作流加载后，节点数量和前几十个节点类型一致，key 也就一致；新建空白工作流会落到empty，不容易污染正常工作流。

如果你使用的 ComfyUI 前端已经能稳定拿到当前工作流的名称或 id，请优先把workflowName考虑进 key，例如default-${name}。这里不强制绑定某个版本字段，是为了避免插件刚写完就因为 API 变化而失效。

最终存储 key 可以拼成：

function getStorageKey() { const graphKey = getGraphKey(app.graph); return `${STORAGE_PREFIX}.${graphKey}`; }

3.3 保存：监听滚轮与拖拽，用防抖节流落盘

视图变化是高频事件，不能直接在事件回调里写 localStorage。实现方式是在事件里标记“视图可能变了”，然后延迟 500 毫秒保存；如果 500 毫秒内又发生了下一次变化，就取消上一次定时器，重新计时。

const state = { timer: null, saving: false, }; function scheduleSave() { if (state.timer) { clearTimeout(state.timer); } state.timer = setTimeout(() => { doSave(); }, SAVE_DEBOUNCE_MS); } function doSave() { try { const canvas = app.canvas; if (!canvas || !canvas.ds) return; const viewState = createState(canvas); if (!viewState) return; const key = getStorageKey(); localStorage.setItem(key, JSON.stringify(viewState)); } catch (error) { console.warn("[ViewRestore] save failed", error); } }

在 setup 里绑定事件：

function setup() { if (!app.canvas) { console.warn("[ViewRestore] canvas not found"); return; } const canvasEl = app.canvas.canvas; if (canvasEl && canvasEl.addEventListener) { canvasEl.addEventListener("wheel", scheduleSave, { passive: true }); } window.addEventListener("mouseup", scheduleSave); window.addEventListener("touchend", scheduleSave); window.addEventListener("beforeunload", doSave); }

wheel事件覆盖滚轮缩放和平移，mouseup与touchend覆盖鼠标拖拽和触摸板拖动结束。为什么不用mousemove？因为拖动过程中 mousemove 触发的次数太多，节流后仍然会造成无效保存，等 mouseup 结束后保存一次。监听整个 window 的 mouseup 是因为有些拖拽可能发生在画布外，只要浏览器窗口内松开鼠标，就需要重新检查当前视图。

beforeunload里执行一次同步doSave也很关键。它能保证用户在刷新页面之前，最后一次视图变化已经被保存。虽然 localStorage 写入很快，也不要在里面放重量计算。

3.4 恢复：不能简单地在 setup 里读 localStorage

画布恢复最难的往往不是读写，而是时机。插件脚本在 ComfyUI 前端加载时，应用可能还没有打开工作流，此时app.graph可能是空图。如果立刻把 localStorage 的旧 state 写回，写的是空图的位置；用户切换工作流后，真正的工作流又不会被恢复。

折中做法是启动后轮询等待 graph 加载，最多重试若干次，每次间隔 200 毫秒：

function restoreViewState() { const key = getStorageKey(); const raw = localStorage.getItem(key); if (!raw) return; let saved; try { saved = JSON.parse(raw); } catch (error) { localStorage.removeItem(key); return; } const canvas = app.canvas; if (!canvas || !canvas.ds || !canvas.ds.scale) return; const scale = Number(saved.scale); if (!Number.isFinite(scale) || scale < MIN_SCALE || scale > MAX_SCALE) return; applyViewState(canvas, saved); }

轮询入口：

function waitAndRestore(retry) { if (retry && retry > MAX_RESTORE_RETRY) return; const canvas = app.canvas; const graph = app.graph; const hasCanvas = canvas && canvas.ds; const graphReady = graph && ((graph._nodes && graph._nodes.length > 0) || getGraphKey(graph) !== "empty"); if (hasCanvas && graphReady) { restoreViewState(); } else { setTimeout(() => waitAndRestore((retry || 0) + 1), 200); } }

这种方式虽然不够优雅，却有很强的兼容性。如果你使用的 ComfyUI 版本已经提供了“工作流加载完成”通知事件，把waitAndRestore替换成监听对应事件即可。不要在一次渲染前恢复和再次渲染后恢复之间搞错：最稳妥的是在首次有节点进入 graph 之后再恢复，因为此时坐标体系已经可用。

3.5 恢复时的偏移量写入与中心点处理

直接赋值的版本可以这样写：

function applyViewState(canvas, state) { const ds = canvas.ds; if (!ds) return; const oldScale = typeof ds.scale === "number" ? ds.scale : 1; const oldOffset = Array.isArray(ds.offset) ? ds.offset : [ds.offsetX, ds.offsetY]; const newScale = Number(state.scale); const newOffsetX = Number(state.offsetX); const newOffsetY = Number(state.offsetY); if (!Number.isFinite(newScale) || newScale <= 0) return; if (!Number.isFinite(newOffsetX) || !Number.isFinite(newOffsetY)) return; // 如果希望保留当前视野中心对应的图坐标，则需要计算中心点 const cx = (canvas.canvas ? canvas.canvas.width : 1280) / 2; const cy = (canvas.canvas ? canvas.canvas.height : 720) / 2; if (Number.isFinite(cx) && Number.isFinite(cy) && oldScale > 0) { const centerGraphX = (cx - (oldOffset[0] || 0)) / oldScale; const centerGraphY = (cy - (oldOffset[1] || 0)) / oldScale; if (Array.isArray(ds.offset)) { ds.offset[0] = cx - centerGraphX * newScale; ds.offset[1] = cy - centerGraphY * newScale; } else { ds.offsetX = cx - centerGraphX * newScale; ds.offsetY = cy - centerGraphY * newScale; } } else { if (Array.isArray(ds.offset)) { ds.offset[0] = newOffsetX; ds.offset[1] = newOffsetY; } else { ds.offsetX = newOffsetX; ds.offsetY = newOffsetY; } } ds.scale = newScale; if (typeof canvas.setDirty === "function") { canvas.setDirty(true); } if (typeof canvas.redraw === "function") { canvas.redraw(true); } }

这段代码的意图是：不盲写旧 offset，而是先算出当前可视区域中心的 graph 坐标，再根据新的 scale 反算偏移量，从而让恢复后视野中心不跳太远。如果你就是希望回到上次视图的原始起点，可以不使用中心点换算，直接写入旧的 offsetX / offsetY。

注意，LiteGraph 不同版本里canvas.ds.offset的语义可能存在细微差别。实际项目调试时，可以在控制台打印app.canvas.ds，观察拖动画布后哪些字段发生了变化。以你正在使用的版本为准，把写入代码调整成实际生效字段。

4. 参数细节与状态隔离：让插件更适合真实项目

4.1 几个重要参数的影响

不建议把所有 localStorage 写入都做成同步。虽然 localStorage API 是同步的，但写入几百字节的状态不会造成明显卡顿；真正需要避免的是 mousemove 每次回调都写入。防抖能兼顾体验和可靠性。

4.2 不同工作流的状态隔离

如果不区分工作流，只用一个固定 key 存视图状态，会出现这样的问题：用户先在 A 工作流把视图放大到某块区域，切到 B 工作流后，B 工作流也恢复到 A 的位置。由于 B 工作流节点图和 A 不同，视觉体验是明显错乱。

因此插件需要为不同工作流分别维护状态。前面代码里的getGraphKey就是一种轻量方案。两个工作流如果节点数量、前面几十个节点类型完全一致，会产生 key 碰撞，但这种碰撞在工作区实践中并不常见。更精确的方案是结合当前工作流的保存名称，在 localStorage key 中加入 workflowname 对应字段。比如：

const workflowName = app.workflowName || "default"; const storageKey = `${STORAGE_PREFIX}.${workflowName}.${graphKey}`;

只要你的 ComfyUI 版本提供入口，建议优先做“graph 特征 + 工作流名称”双保险，这样即使两张工作流节点构成恰好相同，也不会串状态。

4.3 手动保存、复位与默认值

自动恢复虽然方便，但在一些场景会“帮倒忙”，例如用户不想让画布回到上次位置，只希望从默认视野开始。这时建议再提供一个手动清除状态的方法：

function resetViewState() { const key = getStorageKey(); localStorage.removeItem(key); console.log("[ViewRestore] reset view state", key); }

把resetViewState挂载到 window 上，仅供调试时在控制台调用。生产环境如果要集成到菜单栏，需要结合 ComfyUI 当前版本的菜单 API。这里不展开菜单改造，避免不同版本菜单 API 差异让代码复杂化。

错误处理也要做好。localStorage.setItem在隐私模式或存储满时可能抛异常。所有 localStorage 调用建议都放进 try/catch，不要让插件因为一次写入失败导致 ComfyUI 前端整个停摆。

5. 验证与回归：如何确认恢复生效而不是碰巧没报错

5.1 最小验证场景

开发完先不要急着写复杂函数，按下面这些场景验证一次：

1. 启动 ComfyUI，打开任意一张包含多个节点的工作流。
2. 把画布放大到某一组节点附近，拖动到目标区域。
3. 等待 1 秒，让防抖保存生效；打开浏览器控制台看localStorage里是否出现ComfyUI.ViewRestore开头的 key。
4. 刷新页面，等待工作流加载完成，观察画布是否回到刚才的缩放和位置。
5. 切换到另一张工作流，调整视图，再刷新，观察状态是否按工作流隔离。

如果刷新后没有恢复，先检查浏览器控制台是否报错；如果没有报错，再检查 localStorage 是否真的写入了新数据。不要只验证“能不报错启动”，因为很多恢复失败是静默发生的。

5.2 控制台调试命令

为了方便定位，可以临时在 console 中执行：

// 打印所有与视图恢复相关的存储项 Object.keys(localStorage) .filter((key) => key.startsWith("ComfyUI.ViewRestore")) .forEach((key) => { console.log(key, localStorage.getItem(key)); });

如果执行后能看到完整的 JSON 对象，说明保存逻辑已经生效。对象里应包含scale、offsetX、offsetY。三个值都应该是不为 NaN 的数字。出现字符串"undefined"或NaN，说明createState读取字段时取错了值。

5.3 正常与异常时的预期结果

5.4 灰度数据验证

写插件时也要为“用户已经打开过旧版本插件”考虑。如果之前保存过数据结构，后来字段结构变了，解析时可能拿到不兼容的数据。最简单的策略是在restoreViewState里校验版本号：

if (saved.version !== 1) { console.warn("[ViewRestore] ignore incompatible data", saved); return; }

结构变化时把版本号升到 2，然后用迁移逻辑或直接丢弃旧数据。这样比每次都在 JSON 里补字段更可靠。

6. 常见问题与排查链路

6.1 JavaScript 脚本加载了，但没有保存任何状态

如果控制台没有任何输出，也没有 localStorage 数据，优先按这个顺序排查：

1. 确认 custom_nodes 目录启动时是否被 ComfyUI 扫描到。查看启动日志，有没有出现节点库名称。
2. 确认__init__.py里的WEB_DIRECTORY是否指向了正确目录。目录名写错会导致静态资源加载失败。
3. 打开浏览器开发者工具的 Network 面板，搜索view_restore.js，看脚本请求是否返回 200。
4. 看浏览器 Console 里有没有 import 失败或 registerExtension 不存在报错。如果报Cannot find module '../../../scripts/app.js'，说明前端模块路径在当前版本已经变化。
5. 手动在 Console 执行app.canvas.ds，确认画布对象已经可用。

表格归纳如下：

6.2 刷新后能恢复，但恢复到的位置不在上次看的区域

这种问题大多不是因为没读写，而是因为写入偏移量的字段和画布实际读取的字段不一致。例如代码里写入了ds.offsetX，但当前版本的 LiteGraph 实际使用的是ds.offset[0]。排查方法是：

1. 打开一张复杂工作流；
2. 在控制台执行app.canvas.ds = app.canvas.ds; console.log(app.canvas.ds);；
3. 手动拖动一点画布，观察是哪个字段变化；
4. 把保存和恢复逻辑改成真正变化的字段。

如果字段没问题，浏览器会把视野恢复到同一坐标。如果略偏，通常是恢复时机太早，画布尺寸还没有计算完成。把恢复放到工作流渲染后执行一次，通常能解决。

6.3 恢复时缩放正确，但是画面瞬间跳到了奇怪的空白区域

“缩放正确但位置不对”通常是因为直接写入了旧 offset，而没有考虑缩放比例变化对可视区域的影响。比如上次的 scale 是 1，这次要恢复成 0.5；如果直接沿用旧 offset，相当于原本在 scale=1 下看到的可视范围被强行放到了新缩放比例下，视野自然偏移。使用 3.5 节里的中心点换算逻辑，能减少跳帧感。但要注意不同 LiteGraph 版本的 offset 语义，需要先确定“偏移量是画布内容的左上角还是当前视野中心”。

6.4 多开标签页时，旧标签会覆盖新标签的保存结果

这是 localStorage 的典型问题：同一浏览器下多个标签页共享存储。用户在一个标签页调整视图，另一个标签页也在不断保存，最后写回的值可能来自较早的页签。解决方案有两种：

1. 保存时附带savedAt时间戳，读取时如果发现已有更新的数据，就不覆盖，改成提示用户；
2. 使用BroadcastChannel在标签页之间同步视图状态，但实现复杂度明显上升。

对本地插件而言，方案 1 就够用。写入前先读取同一个 key 的旧值，比较savedAt：如果本地待写入时间小于旧保存时间，说明有其他页签刚保存了较新的状态，这次可以跳过。

6.5 升级 ComfyUI 后插件失效，最容易出在这几处

不要小看升级适配。ComfyUI 前端迭代速度不算慢，依赖内部结构的插件都需要在升级后回归。建议在 README 里记录一个“已适配 ComfyUI 版本”字段，便于用户判断。

7. 从可用到更好的生产化方向

7.1 当前实现能做什么，不能做什么

当前实现能解决的：单机、单浏览器、同工作流下，刷新页面后自动恢复画布缩放与位置。它能明显减少大工作流重新定位的成本，适合个人频繁开发调试。

当前实现不能解决的：跨设备同步、多用户协作时的视图状态同步。视图状态如果只想存在本机，localStorage 是成本最低的做法。如果希望换电脑后依然恢复同样位置，需要在后端增加用户维度或工作流维度的 settings 存储接口，把scale、offsetX、offsetY通过 HTTP 提交到服务端。涉及后端的部分需要结合你的 ComfyUI 版本提供 API 方式，不要照抄早期版本代码。

7.2 三条最佳实践

一是保存的数据尽量精简。只保存version、scale、offsetX、offsetY、savedAt，不要复制整张 graph。这五个字段已经足够完成恢复，再塞其他数据只会拖慢写盘。

二是不要把自动保存和手动复位分离得太远。建议加一个明显的主菜单按钮或右键菜单项，命名为“重置视图记忆”，用户恢复错乱时能一键清除当前工作流的状态。

三是所有与 DOM、事件、localStorage 相关的代码都要做空值保护。ComfyUI 前端升级过程中，app.canvas可能暂时为空，canvas.ds也可能不存在。一条简洁的判空语句能避免插件成为整个页面崩溃的来源。

7.3 扩展方向与后续可以做深的地方

画布位置及缩放记录只是前端体验层的其中一个功能。同样思路可以继续扩展：

• 记录当前画布中选中的节点 id，刷新后重新选中并让该节点居中；
• 快捷键记录多个“书签”视角，快速跳转到不同节点区域；
• 与工作流版本管理结合，让每个分支保留自己的视图状态；
• 在菜单上提供“返回上次位置”和“定位到某节点”的快捷工具。

从工程角度看，视图状态恢复非常适合作成前端独立插件。它不需要 Python 节点，失败后也不会影响推理流程，适合新手通过它学习 ComfyUI 的扩展机制。写插件过程中最有价值的启发是：不要总想着修改 ComfyUI 源码，尽量使用公开的注册 API；遇到前端版本变化，优先观察运行时对象结构，再写兼容逻辑。这样无论以后 ComfyUI 社区的热词是“工作流编排”还是“画布管理”，这套处理 UI 状态的方法都不会过时。