PageFlow 工作原理

PageFlow 把框架专用的路由发现能力与框架无关的可视化客户端组合起来。

1. 发现路由

所选适配器读取框架的路由来源。Vue Router 与 Nuxt 提供路由记录；文件路由框架通过构建集成提供路由；React Router 接收路由对象；Next.js 使用开发 sidecar。

2. 启动开发运行时

插件只在开发服务器运行时注入一个轻量运行时，用于上报路由信息、可见导航目标、页面标题和就绪状态。

3. 渲染真实页面

PageFlow 在受控的同源 iframe 中打开应用页面。选中的页面保持实时，后台页面会捕获到有界缩略图缓存。

4. 检测导航

适配器识别受支持的框架链接、同源锚点、History 变化、字面量程序式目标和显式导航提示。客户端将目标转换成有向连线与预览热点。

5. 布局关系图

LeaferJS 负责渲染画布。页面组压缩大型路径层级，空间索引限制视口计算，大型布局可以在 Worker 中完成。

生产构建

PageFlow 仅用于开发环境。生产输出不会注入其运行时端点与可视化客户端，项目中的生产产物检查会验证这一边界。

安全边界

预览模式会阻止受控 frame 中的链接导航和表单提交，但无法抑制应用初始化副作用。请使用本地或测试数据。