Canvas 工作区

Canvas 工作区是 Sink 用于管理和可视化多个任务的特性。它让你可以在一个画板上自由布局多个任务窗口、便签和外部内容，支持自由排列布局和沉浸式工作模式。

什么是 Canvas？

Canvas 是一个类似白板的多窗口工作区。你可以：

• 同时显示多个任务详情
• 添加文本便签快速记录笔记
• 嵌入外部网页和工具
• 自由拖拽和调整窗口大小
• 使用沉浸模式隐藏侧边栏，专注于工作
• 所有布局变更会自动保存

访问 Canvas

点击主菜单中的 Canvas，或直接访问：http://localhost:5000/canvas（根据你的 Gateway 配置调整地址和端口）。

Canvas 界面

顶部工具栏

Canvas 在顶部提供以下工具：

• 添加任务窗口 — 选择已有任务并将其添加为窗口
• 添加便签 — 创建文本便签节点
• 背景选择器 — 选择画布背景（网格、点阵或无背景）
• 沉浸模式开关 — 隐藏侧边栏，专注于 Canvas 工作
• 小地图 — 右下角显示整个画布的鸟瞰视图

画布区域

画布中央是你的工作区。窗口节点可以：

• 拖拽 — 按住标题栏拖动以移动位置
• 调整大小 — 从右下角的调整手柄拖动来改变尺寸
• 缩放和平移 — 鼠标滚轮缩放，按住空格键拖动平移
• 分层显示 — 窗口可以重叠；点击窗口可将其置于最前

常用操作

添加任务窗口

1. 点击顶部工具栏的 添加任务窗口
2. 从下拉菜单中选择要添加的任务
3. 任务详情窗口会出现在画布中央

你可以添加多个相同或不同任务的窗口，每个窗口独立运行。

创建便签

1. 点击顶部工具栏的 添加便签
2. 画布上会出现一个空白的便签节点
3. 点击便签进入编辑模式，输入文本
4. 便签支持 Markdown 语法

便签适用于记录临时笔记、保存重要信息或快速批注。

排列和组织窗口

Canvas 窗口的布局完全由你控制：

• 拖动移动 — 点击窗口标题栏并拖动到新位置
• 调整大小 — 拖动右下角的调整手柄来扩展或缩小窗口
• 自由排列 — 根据你的工作流程放置窗口

例如，你可以：

• 左边放置一个任务，右边放置另一个任务，方便对比
• 将最重要的任务放在中央，参考材料放在周围
• 按项目或优先级分组

在沉浸模式下工作

沉浸模式会隐藏侧边栏，为你提供最大的画布空间。

启用沉浸模式：

1. 点击顶部工具栏的 沉浸模式 开关
2. 侧边栏收起，仅显示浮动的控制面板

在沉浸模式下，浮动面板提供：

• Workspace 切换
• YOLO 模式开关
• 其他必要的操作快捷方式

退出方式：

• 再次点击浮动面板上的沉浸模式开关，或按 Esc 键

使用小地图

右下角的小地图以鸟瞰视图显示整个画布：

• 显示所有窗口节点的位置
• 在大型画布上辅助导航
• 点击小地图上的任意位置可快速跳转到对应位置

更换背景样式

点击顶部工具栏的 背景选择器 可更换画布背景：

• 网格 — 标准网格背景，便于对齐
• 点阵 — 点状背景，干扰更少
• 无 — 纯色背景，最简洁

选择立即生效并自动保存。

窗口类型

Canvas 支持多种类型的窗口节点：

任务详情窗口

显示完整的任务信息，包括：

• 任务标题和阶段
• 聊天消息和 Agent 输出
• 团队成员信息（如果是团队任务）
• 工具调用详情
• 事件日志

任务详情窗口是完全交互式的——你可以在窗口中直接发送消息给 Agent、审批权限请求等。

文本便签窗口

简单的文本编辑窗口，支持 Markdown。用于：

• 记录想法和笔记
• 保存临时信息
• 标记重要信息

外部内容窗口

Canvas 可以嵌入外部网页和工具（在 Canvas 中输入 URL 即可启用）。

保存和恢复

Canvas 的所有状态自动保存：

• 窗口位置 — 移动或调整大小时自动保存
• 窗口大小 — 自动保存
• 背景选择 — 自动保存
• 便签内容 — 自动保存

下次打开 Canvas 时，所有布局、便签内容和背景设置都会恢复。

存储位置：布局数据存储在浏览器的 localStorage 中，按 workspace 隔离。

键盘快捷键

Canvas 支持以下快捷键：

常见场景

场景 1：对比多个任务

1. 添加两个任务窗口，并排放置
2. 在左侧窗口查看任务 A 的输出
3. 在右侧窗口查看任务 B 的输出
4. 实时对比两个 Agent 的工作

场景 2：主任务 + 参考资料

1. 在中央添加主任务窗口，将其放大
2. 在周围添加子任务或相关参考资料
3. 使用便签记录关键信息
4. 在沉浸模式下工作时保持主任务可见

场景 3：团队协作

1. 为每个团队成员添加任务窗口
2. 按角色或优先级排列
3. 添加便签追踪整体进度
4. 快速浏览所有成员的工作状态

故障排除

窗口无法显示任务内容

症状：窗口显示为空白或加载状态持续

解决方案：

1. 刷新页面重新加载 Canvas
2. 确认任务存在（在任务列表中检查）
3. 检查浏览器控制台的错误信息

布局未保存

症状：页面刷新后窗口布局丢失

可能原因：

1. localStorage 被清除（某些浏览器会自动清除）
2. 浏览器处于隐私浏览模式（某些浏览器不允许存储数据）

解决方案：

• 在正常浏览模式下使用 Canvas
• 确保网站可以存储本地数据

无法退出沉浸模式

症状：沉浸模式开关无响应

解决方案：

• 按 Esc 键强制退出
• 刷新页面（恢复到普通模式）

任务详情页 vs Canvas 窗口对比

最佳实践

1. 定期保存重要笔记 — 便签虽然会自动保存，但应定期备份重要信息
2. 为不同项目使用不同的 workspace — 每个 workspace 有独立的 Canvas 布局，实现项目隔离
3. 按需使用沉浸模式 — 需要专注工作时开启，减少干扰
4. 合理组织窗口 — 将相关任务靠近放置，重要任务放在中央
5. 使用便签标记区域 — 为不同的任务区域添加标题便签，方便快速导航

后续步骤

1. 管理任务 — 学习如何创建和管理任务
2. 快速入门教程 — 创建第一个任务并在 Canvas 中管理