把大型项目拆分成专注空间：Ideon子画布（Sub-Canvas）使用指南

Ideon 是一款自托管的无限画布（Infinite Canvas）工作区，用来把笔记、文件、任务、代码仓库等散落各处的内容汇聚到一张"项目地图"上。当项目越做越大、画布上块（Block）越堆越多时，Ideon 的子画布（Sub-Canvas）功能可以把大项目拆分成一个个专注空间：每个工作领域拥有独立画布，相关块和想法各归其位，导航清晰不迷路。🗺️

为什么大型项目需要"画中画"

在无限画布上工作一段时间后，你大概率会遇到这样的场景：

• 画布上笔记、Kanban 任务、代码仓库、链接混在一起，找东西靠回忆位置；
• 团队协同时，别人很难快速理解"这块区域是干嘛的"；
• 放大缩小之间反复切换，视线被无关内容干扰。

子画布的思路借鉴了"文件系统中的目录"：把相关块收进一个可进入的独立空间，入口只在外层画布上占一个小块。该功能在 Ideon 0.9.7 版本引入（见 CHANGELOG.md 的说明），并在 1.0 版本中新增了画布中心锚点标记，方便流程连线穿过画布中心。

创建并进入第一个子画布：三步上手

🧩 操作路径非常直接：

1. 添加块：在画布空白处唤起添加块菜单，选择Sub-Canvas类型的块（类型标识为subcanvas，块类型注册见 blockTypeMeta.tsx）；
2. 命名：为子画布输入标题。空标题会被自动拒绝，系统会保留原有标题（逻辑见 subCanvasUtils.ts）；
3. 双击进入：进入后你就拥有一个全新的独立画布，可以放置笔记、文件、Mermaid 图表、Kanban 等任意块类型。

子画布块本身支持自由拖拽和调整大小，尺寸被限制在160×120 到 1920×1080之间（约束定义于 subCanvasUtils.ts），既能当"文件夹入口"的小标签，也能当大屏展示区。

子画布层级导航：面包屑与视口恢复

进入子画布后，画面上方会出现一条面包屑导航（SubCanvasBreadcrumb.tsx），形如项目 > 模块A > 模块A-1，点击任意上级即可跳回对应层级。

两个容易被忽略但很实用的细节：

• 视口记忆：你离开某个画布时的位置和缩放会被自动保存（viewports映射），再次进入时精确恢复到原来的视角；如果没有保存过，则自动适配（fitView）全部块。相关状态管理在 SubCanvasProvider.tsx 中实现；
• 中心锚点：子画布中央有一个可连线锚点（CanvasCenterAnchor.tsx），适合把多条流程"汇总"到画布中心，避免连线乱飞。

缩略图预览：一眼看清子画布内容

从子画布退出时，Ideon 会自动给外层入口块拍一张"照片"：同时生成浅色和深色两套 PNG 缩略图，之后你只在外层画布上就能看到里面的布局全貌。缩略图捕获逻辑位于 thumbnailCapture.ts。

这意味着外层画布天然成为一张"目录总览图"——每块子画布封面就是它的缩略预览，配合标题即可快速定位。💡 若缩略图生成失败，块上会显示"Preview unavailable"提示，但不影响正常进入使用。

使用边界：深度、权限与删除警告

⚠️ 三个需要知道的规则：

删除前如果不确定，可以先用项目的版本历史功能保存一个状态，再动手清理。

实战建议：大型项目的拆分模式

结合上述机制，推荐这样组织一个大项目：

• 第 1 层（主画布）：只放子画布入口 + 全局索引（如项目说明笔记、总路线图），让它保持"目录页"式的清爽；
• 第 2 层（模块子画布）：按职能划分，例如产品设计、开发任务、文档中心、上线检查清单，每个模块内部自由布局；
• 第 3 层及更深：只给真正庞大且需要细分的模块使用，比如开发任务下再拆前端/后端/测试。

深度控制在 3 层以内体验最佳：层级越浅，面包屑越短，团队协作时新人也更容易理解项目结构。

相关源码位置速查

• 子画布核心工具函数与深度/尺寸限制：subCanvasUtils.ts
• 导航栈与视口恢复状态：SubCanvasProvider.tsx
• 子画布块 UI（缩略图、标题、反应）：SubCanvasBlock.tsx
• 缩略图捕获：thumbnailCapture.ts
• 面包屑导航：SubCanvasBreadcrumb.tsx
• 数据库迁移（子画布块类型落库）：43AddSubCanvasBlockType.ts

掌握子画布后，你的 Ideon 项目会像一棵结构清晰的目录树：主画布是首页，点进去才是专注空间——规模再大，也不慌。