dsh-draggable-panels · 0.7.6
公开服务 draggablePanels、组件 ID 和原有持久化键保持兼容。
纯 Client 面板插件,不修改宿主源码。内置工作区、文件、终端组件与外部组件使用同一个注册协议。
使用
- 拖动组件标题或六点手柄,在左右侧栏之间移动;标签支持排序。
- 在组件标题/标签上右键,选择“隐藏组件”;标题旁菜单按钮也提供该操作。
- 左侧底部“组件管理”可以显示/隐藏已注册组件。全部隐藏后入口仍可使用。
- 隐藏只卸载该组件视图,不删除工作区/会话、不停止运行中的任务;业务状态由组件持有。
↺ 重置当前已注册组件布局;⇄ 恢复完整原生界面。右下角提示条可点 × 关闭;侧栏底部 ⇄ 始终能返回拖拽布局,关闭提示不会失去入口。
- 系统目录选择器添加工作区;取消不创建。新会话按钮使用含工作区名称的可访问标签,避免桌面壳捕获通用标签后创建到“未分组”。
文件组件
安装并启用 dsh-better-sidebar 时,直接复用它的文件树、文件预览/编辑器及原生右侧标签栏,不再把文件放到中间的“对话 / 轨迹”区域。搜索、Git 状态、压缩目录、上传、新建/重命名、图标、预览/编辑切换和保存均由原组件处理,不另写一套近似实现。
- 右侧保留宿主标签栏与分栏、浮窗、关闭等操作。工作区、终端等组件各有自己的原生标签,不再嵌套“拖拽组件”容器。
- 右侧拖动标签文字或图标使用原生排序,并由宿主持久化顺序;跨侧栏移动请拖动六点手柄。
- 原生“文件”和其他组件标题带六点拖动手柄,可直接拖到左侧;向右拖动时,松开在高亮的“停靠到右侧”区域。该落点不依赖右侧当前显示哪个标签,右栏折叠时也可使用。
- 左下工具栏的文件按钮也可拖动到两侧,支持
Alt+← / →;原生组件标签右键菜单也提供移到左/右侧与组件管理入口。文件内容标签继续使用宿主自身的排序/浮窗拖动,不把它们当作整个文件树移动。
- 文件树移到左侧后,真正关闭当前会话右侧的文件树页;不创建“左侧文件”承载标签,也不通过 CSS 隐藏标签。旧版本遗留的两个承载标签在会话挂载后清理,已经打开的文件资源标签保留。
- 左侧直接组合固定版本
dsh-better-sidebar@0.25.0 显式导出的受控 TreePanel 源码,无额外 store 或伪造 tab。展开状态按会话独立保存;点击文件经真实服务在右侧打开,不改变全局文件打开偏好。右侧文件页仍遵循原生合并/独立设置。
- 左树的打开方式菜单保留可用目标,但不写入上游固定项偏好;重命名/删除不会强制关闭已打开的原生编辑器,以避免丢失草稿。原生标签上的旧路径可能需要手动关闭后重开。
- 未安装增强侧栏的 profile 保留旧的轻量只读文件组件作为兼容回退;该回退不承诺完整原生编辑能力。
终端组件
在组件管理中勾选“终端”,切换到终端标签,点击已开启终端标签后面的“+”,再选择 Shell 创建。可选择宿主发现的 Shell;新终端属于当前会话工作区。组件使用宿主 webTerminals 服务与独立打包的 xterm,不读取原生内部组件,也不是原生 UI 的直接搬运。
- 打开组件、拖动或恢复隐藏不会新建 Shell;只有显式“新建终端”分配进程。
- 隐藏、移动、切换会话只是断开视图,保留独立的窗口持有;不会调用结束进程。
- 点击终端标签的关闭按钮直接结束对应进程,不再弹出确认;隐藏组件不会结束终端。
- 终端标签与合并 Shell 选项的新建“+”保持同一行;每个终端标签旁的关闭按钮只结束对应终端,支持关闭非当前标签。没有“恢复已有终端”入口。
- 记录跨页面刷新保存,但进程只存在于宿主当前生命周期;宿主重启后失效的记录不会自动新建替代 Shell。可结束/移除失效项后显式创建。
- 终端使用系统用户权限,不受 Agent 沙箱限制。
- 没有
webTerminals 或终端 Remote 的 profile 不注册终端组件,工作区和文件功能不受影响。
开发
npm ci --ignore-scripts
npm test
npm run format:check
Node.js >= 18,使用锁定版本的 esbuild 和 Prettier。React 由宿主提供,不重复打包。主要构建产物在 dist/,只修改 src/。根目录 client.js 是构建自动生成的旧入口兼容副本,用于无需重启宿主的升级,不是第二份源码。
本仓库只提交源码:dist/ 与 client.js 未纳入版本控制,克隆后请先执行 npm run build(npm test 已包含构建)。
目录
src/host/ 最小 Host 入口
src/client/plugin.js 生命周期与依赖组装
src/client/registry/ 组件协议、注册表、公开服务
src/client/dock/ 通用容器、布局、拖拽、组件管理
src/client/components/ workspace / files / terminal 内置组件
src/client/integration/ 宿主服务调用与 Slot 注册
src/client/shared/ 状态、持久化、图标、菜单、错误边界
src/client/locales/ 单一中英文词典
scripts/ 标准构建脚本
tests/unit/ 纯逻辑和服务行为测试
tests/integration/ 实际构建产物与组件交互测试
examples/counter-panel/ 独立可安装扩展组件示例
docs/ 架构、接口、兼容边界
扩展组件
通过 ctx.draggablePanels.register(ctx, descriptor) 注册,返回只属于该注册的 { dispose }。也可使用 ctx.draggablePanels.forContext(ctx) 获取绑定当前插件生命周期的接口。
完整接入步骤见 组件接口;可安装例子见 计数器示例。
持久化与兼容
- 新布局键:
local.draggable-panels.layout.v4,首次读取兼容旧 .v3;不删除旧键。
- 原有
workspaces、files ID 保持不变。
- 右栏显隐与工作区视图偏好沿用原键。
- 暂时卸载的组件保留位置、顺序和隐藏偏好,不显示空壳。恢复注册时使用原偏好,不抢占当前活动组件。
- 隐藏不同于注销;禁用/卸载扩展插件会自动注销其组件。
更多见 架构、兼容注意事项、原生功能边界。
测试覆盖模型、服务入参、取消与重复操作、原生样式结构、外部注册/卸载和隐藏恢复。构建产物测试使用模拟 React/服务,不替代真实浏览器的视觉及拖拽验收。