可拖拽面板 weishuai-GitHub/dsh-draggable-panels

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/服务，不替代真实浏览器的视觉及拖拽验收。