企业官网建设流程全解析

Cate面板系统终极指南：画布、Dock停靠、拆分与独立窗口的全场景布局技巧

【免费下载链接】cateAn infinite zoomable canvas for coding. Editor, terminal, and browser panels in a spatial workspace.项目地址: https://gitcode.com/gh_mirrors/cate5/cate

Cate 是一款无限画布 IDE，把编辑器、终端和浏览器面板放进同一个空间工作区。本文带你快速掌握 Cate 面板布局的四大阵地——画布、Dock 停靠区、拆分面板与独立窗口——几分钟就能搭出属于自己的高效多面板工作区。

Cate 的核心设计理念：同一个面板，可以在画布、停靠区或独立窗口之间自由流动，而且布局会按项目自动持久化。下面逐个拆解。

面板去哪放？Cate 的 4 种位置

这四种位置可以互相拖拽转换，官方维护了一张完整的拖放规则矩阵，见 docs/dock-rules.md。

画布布局：把面板卡片摆到无限画布上

画布是 Cate 的主舞台。把任何面板拖到画布空白处，它就会变成一张可自由摆放的面板卡片：

• 缩放：滚轮 / 双指缩放整个画布，随时在"单面板细节"和"全局鸟瞰"之间切换
• 移动：拖拽卡片即可改变位置，卡片内的标签与拆分结构会原样保留
• 组成节点：多个面板可以聚合成一个画布节点，节点内部还能继续拆分
• 浏览器常驻：浏览器面板即使滚出视野也会保持挂载，登录态和表单状态不丢失

面板类型定义在 src/shared/panels.ts，包含终端（绿色品牌色）、Files 编辑器（橙色）、浏览器（蓝色）、T3 Code Agent 聊天（蓝色）、Diff Review 等，每种面板都有默认尺寸与最小尺寸约束。

小技巧：画布支持自定义背景壁纸（见src/renderer/assets/wallpapers/），配合缩放功能，让每个面板卡片像便签一样贴在"桌面"上，多个 Agent 的进度一目了然。

Dock 停靠技巧：标签页移动与一键拆分

主停靠区的行为完全可预测，记住下面这张速查表就够用了：

两个最常用的入口：

1. 标签栏右侧的Split Right按钮，一键在当前标签右侧拆出一个新面板
2. 标签右键菜单，提供拆分、关闭全部、多选、重命名等动作

拆分逻辑集中在 src/renderer/docking/DockSplitContainer.tsx，菜单动作在 src/renderer/docking/DockTabContextMenu.tsx，拆分后的比例可以拖动中间分隔线调整。同方向连续拆分会得到并列窗格，而不是层层嵌套，保持结构清爽。

画布节点拆分：把面板"塞进"另一张卡片

画布内部也有自己的拆分规则：

• 面板拖到空画布→ 新建一张卡片
• 面板拖到某节点的标签栏→ 合并为标签页，源节点清空后自动删除
• 面板拖到某节点的边缘→ 拆分为新窗格

这些行为的端到端覆盖在 e2e/drag-split.spec.ts 与三方拆分测试 e2e/three-way-split.spec.ts 中，规则细节同样见 docs/dock-rules.md。

分离独立窗口：拖出去，就是第二个屏幕

把面板卡片拖出应用窗口边界，或从标签右键菜单选择放入新窗口，它就会分离成独立窗口：

• 独立窗口拥有完整的能力：自己的停靠区、侧边栏和Cmd+K命令面板
• 两个窗口双向同步：把独立窗口里的面板拖回主窗口的 Dock 或画布即可合流，只有在接收方确认后才会提交，失败时自动在源窗口回滚恢复
• 设置对话框只在主窗口打开，保证全局设置入口唯一

这套跨窗口同步逻辑的完整测试见 e2e/detached-panels.spec.ts，多窗口面板管理在主进程中由 src/main/ipc/windowPanels.ts 实现。

最大化与最小化：一键专注 / 一键还原

Cate 里的"最大化"是一种可逆的展示操作，不会破坏你的布局：

• 最大化：把某个拆分区域合并成一个标签栈，适合临时专注单个面板
• 最小化：精确还原之前的拆分树——包括节点位置、大小、标签和激活窗格
• 失效规则：如果还原点两侧的结构性内容发生了变化（面板被增删、移动、重新拆分），恢复按钮会自动移除，不会覆盖你的新布局

多个画布窗格可以同时各自最大化，每个都有独立的还原点，互不干扰。规则细节与自动化覆盖清单都在 docs/dock-rules.md 的规则表中。

布局持久化与快捷键重绑定

• 布局按项目保存：关闭 Cate 再打开同一项目，画布卡片位置、拆分比例、标签顺序都会原样回来，无需手动整理
• 快捷键可重绑定：所有布局相关快捷键都能在 Settings 中自定义（Cmd+K快速呼出命令面板，搜索面板、文件和动作）

下一步建议：打开一个项目，新建两个终端 + 一个编辑器，按本文顺序练习"画布摆放 → 边缘拆分 → 拖出独立窗口"，十分钟就能形成肌肉记忆。更完整的拖放与恢复规则矩阵，欢迎对照 docs/dock-rules.md 逐项体验。

【免费下载链接】cateAn infinite zoomable canvas for coding. Editor, terminal, and browser panels in a spatial workspace.项目地址: https://gitcode.com/gh_mirrors/cate5/cate