SepWorkspace 工作区组件 v1.0.0

组合 SplitPanes + SepTabs 的 IDE 风格工作区 · 面板内嵌标签页 · 标签跨面板拖放 · 面板折叠/最大化/关闭 · 布局保存恢复

1. 基础工作区(两面板 + 标签页)

功能说明:panes 配置每个面板的标签页,组件自动创建 SplitPanes 骨架并在每个面板内嵌入 SepTabs。标签栏右侧自动注入面板操作按钮(折叠 / 最大化)。

JS API 初始化
默认两面板,每面板多个标签页

2. 三面板工作区

功能说明:支持任意数量面板,sizes 设置初始比例,拖拽分隔线调整面板宽度。

JS API 初始化
面板数: 3

3. 纵向工作区(上下排列)

功能说明:direction: 'vertical' 面板上下排列,分隔线水平显示。

JS API 初始化
direction: vertical

4. 面板操作(折叠 / 最大化 / 关闭)

功能说明:编程式调用 collapsePane / expandPane / maximizePane / removePane。标签栏右侧的按钮也可触发相同操作。

JS API 初始化

5. 标签跨面板拖放

功能说明:tabDraggable: true 开启后,可拖拽标签页到其他面板。拖拽时显示蓝色指示器,松手后标签移动到目标面板。也可通过 moveTab API 编程式移动。

JS API 初始化
拖拽标签到其他面板试试

6. 布局保存与恢复

功能说明:saveLayout() 返回布局快照(方向、尺寸、面板标签、激活标签),loadLayout(layout) 恢复布局。可结合 localStorage 实现持久化。

JS API 初始化
未保存

7. 面板可关闭(closable)

功能说明:closable: true 后,标签栏右侧出现关闭按钮,点击移除该面板。

JS API 初始化
面板数: 3

8. 标签右键菜单 + 固定标签 + 改名 + 全局搜索

功能说明:右键标签弹出菜单(固定/关闭/关闭其他/关闭右侧/关闭全部/复制/刷新/重命名);tabEditableTitle: true 双击标签改名;固定标签不随"关闭全部"移除,且跨面板拖放保留固定状态;tabSearchable: true 启用 Ctrl+P 全局标签搜索,跨所有面板快速定位标签。

JS API 初始化
提示:右键标签试试

9. 关闭面板时标签迁移策略

功能说明:closePaneStrategy 控制关闭面板时标签去向:'destroy'(默认销毁)、'moveLeft'(迁入左侧面板)、'moveRight'(迁入右侧面板)、'moveActive'(仅迁活动标签)。也可通过 onPaneClose 回调动态返回策略或返回 false 阻止关闭。

JS API 初始化
面板数: 3

10. 面板焦点高亮

功能说明:点击面板内容或切换标签时,该面板自动获得焦点并显示蓝色高亮边框。通过 onPaneFocus 回调可监听焦点变化,getActivePane() 获取当前活动面板索引,focusPane(idx) 编程式聚焦。

JS API 初始化
当前活动面板: 0

11. 嵌套布局(面板二次分割)

功能说明:通过 splitPane(path, direction, sizes) 将指定面板二次分割,支持任意层级的水平/垂直嵌套。面板用点号路径寻址,如 "0"、"1.0"、"1.1"。原面板的标签会自动迁移到分割后的首个子面板。

JS API 初始化
叶子面板路径: ["0","1"]

12. 布局预设管理

功能说明:通过 savePreset(name) 将当前布局保存为命名预设,loadPreset(name) 一键恢复,getPresetNames() 列出所有预设,deletePreset(name) 删除。预设存储在 localStorage 中,支持跨会话持久化。

JS API 初始化
预设: 无

14. 面板标题栏 + 尺寸锁定

功能说明:setPaneTitle(path, title) 设置面板标题栏,lockPane(path) / unlockPane(path) 锁定面板尺寸(锁定后无法拖拽分隔线调整大小)。标题和锁定状态均支持运行时动态切换。

JS API 初始化
就绪

15. Tab 状态动态更新

功能说明:updateTab(path, key, patch) 通用更新标签属性,setTabTitle 重命名、setTabBadge 设置徽章(数字 / 'dot')、setTabLoading 加载状态。运行时动态切换,无需重建面板。

JS API 初始化
就绪

16. 面板浮动到窗口

功能说明:配置 floatable: true 后面板标签栏多出「浮动」按钮,可将面板内容拖出到独立可拖拽/缩放的窗口;关闭窗口自动停靠回原位置。也可通过 floatPane(path) API 编程触发。

JS API 初始化
就绪

17. 面板尺寸辅助

功能说明:distributeEvenly() 均分所有面板、expandAllPanes() 展开全部折叠面板、undoResize() / redoResize() 撤销重做尺寸调整(canUndoResize / canRedoResize 查询可用性)。

JS API 初始化
就绪

18. 拖拽分屏(拖标签到面板边缘自动分割)

功能说明:拖动标签到目标面板的左/右/上/下边缘,释放后自动在该方向分割出新面板。配置项 splitOnDrop(默认 true)。

尝试将左侧标签拖到右侧面板的边缘
拖拽标签到面板边缘可触发分屏

19. 键盘快捷键

功能说明:Ctrl+1~9 切换面板、Ctrl+W 关闭当前标签、Ctrl+Shift+T 恢复最近关闭的标签、F11 最大化/还原当前面板。配置项 shortcuts(默认 true)。

点击工作区后尝试 Ctrl+1 / Ctrl+2 / Ctrl+W

20. 布局自动持久化(localStorage)

功能说明:开启 persistLayout 后,布局变更(增删面板、调整尺寸、标签变化)自动保存到 localStorage,刷新页面后自动恢复。配置项 persistLayout / layoutStorageKey。

已启用自动持久化

21. 面板拖拽重排(拖 TabBar 空白处移动面板)

功能说明:拖动面板 TabBar 空白区域(非标签项)可重排面板顺序。配置项 reorderable(默认 true)。

拖拽 TabBar 空白处移动面板

22. 标签智能折叠(MRU 最近使用优先)

功能说明:当标签数量超出面板宽度时,启用 tabCollapseMode: 'mru' 会自动隐藏最久未使用的标签(活动标签与固定标签始终可见),隐藏项收进右侧「更多」菜单。配合 tabMinWidth 可让标签先收缩再折叠,类似 VS Code 体验。

JS API 初始化
折叠模式: mru

23. 面板分组彩色标识

功能说明:通过 setPaneGroup(panePath, color) 为面板设置左侧彩色边栏,支持 red / orange / yellow / green / cyan / blue / purple / pink 八种预设颜色,用于视觉区分不同业务分组。

JS API 初始化
当前分组: 无

断言测试