DSH Session Groups
把 Edge 浏览器的标签页分组体验,搬到 DSH Web 的会话侧栏。
彩色分组、折叠、拖动排序、状态汇总,让一长串会话重新变得可管理。
v0.2.1 · DSH Web Plugin · MIT
界面预览 · 为什么 · 功能 · 架构 · 安装 · 快速上手 · 数据与兼容性 · FAQ
界面预览
在 DSH Web 侧栏中用分组管理会话:支持组内分组、折叠状态汇总和工作区树。
| 分组与选中态 | 折叠组状态汇总 |
|---|---|
![]() |
![]() |
| 选中会话所在的组折叠时,组头会显示组色边框 | 折叠组汇总组内状态:运行中、等待、已完成的会话一目了然 |
浅色 / 深色主题
| 浅色主题 | 深色主题 |
|---|---|
![]() |
![]() |
| 浅色模式保持原来的组色 | 深色模式使用单独提亮的分组配色 |
为什么
DSH 里会话会越来越多。默认列表只有时间和标题,时间一长就变成一条很长的流水账;靠置顶和归档只能缓解,不能组织。
Edge 的标签页分组给了一个很直接的答案:把同类的东西收进一个彩色分组,折叠起来,需要时再展开。这个插件把同一个心智模型搬到了 DSH 的会话侧栏:
- 工作区是外层边界,分组只在当前工作区内生效。
- 分组像 Edge 的标签组一样有颜色、可以折叠、可以拖动。
- 组和未分组会话处于同一级,想放哪里就放哪里。
- 收起分组后,组内会话的状态仍然会汇总在组头上,不会因为折叠而丢失信息。
功能
像 Edge 标签页一样分组
- 拖入分组:把会话拖到另一条会话的中部,即可创建新分组,或加入目标会话所在分组。
- 精确排序:拖到会话的上半区 / 下半区,插入到对应位置。
- 同级混排:分组和未分组会话可以一起拖动排序,不会永远把组压在最上面。
- 组内继续拖动:组内会话可以重新排序,也可以拖出分组。
- 拖动嵌套分组:把组拖到另一个组的中间即可嵌套,最多 3 层(最外层算第 1 层);把组拖到工作区空白、顶层会话或根组边缘可移出并重新排序;把组拖到组内会话的上/下边缘可插入到组内对应位置。同一组内的两条会话拖到彼此中部,会在该组内生成子组,与最外层拖动会话建组一致。子组默认出现在本组列表底部,之后可拖到组内会话之间调整位置;组内元素顺序可自由调整。子组保留颜色、改名、折叠、状态汇总和组内会话拖拽。解散子组时,组内会话和子组会留在父组内,不会散到最外层。超过 3 层时会提示无法继续嵌套。
- 工作区隔离:分组严格属于当前工作区;跨工作区拖拽会被拒绝。
- 按工作区树划分:在视图选项中开启后,子工作区按目录层级嵌套显示,父工作区折叠会收起整棵子树;当前会话所在树的祖先会自动展开。
- 单列表:在视图选项中切换为一条跨工作区的会话列表;分组保持完整,不会被拆散成单个会话。
- 工作区划分:视图选项里用三个图标切换「工作区 / 工作区树 / 单列表」,选中项右侧显示 ✓,悬停可看对应名称。
- 递归排序:视图选项提供「按时间顺序排序」和「按首字母排序」,每层递归排序;组和子工作区按内部最晚时间 / 名称首字母排序。汉字按拼音首字母(如 会话 → hh、游戏 → yx)。
- 折叠工作区状态:最外层工作区和子工作区折叠时,都会像折叠分组一样在标题旁汇总内部会话的运行 / 等待 / 完成状态,相同状态显示数量。
- 折叠子工作区选中态:当前打开的会话位于某个折叠的子工作区中时,该子工作区标题会显示深灰色选中背景。
- 8 种预设颜色 + RGB 自定义 + 改名 + 折叠 + 解散:组头
...菜单里都有;颜色列表最左侧的 RGB 入口可以填写 R/G/B 自定义颜色。
保留原版侧栏习惯
- 顶部「视图选项」可在分组视图和原版视图之间切换,原版视图保留 DSH 自带浏览器。
- 会话行保留原版图标和右键/悬停操作:置顶、重命名、分叉、归档 / 取消归档、复制 Session ID。
- 状态显示与官方一致:运行中转圈、等待审批 / 计划待审 / 等待回答、运行结束未读绿点。
- 分组折叠时,组头会汇总组内状态;相同状态显示数量。
- 会话多时显示「展开其余 N 个会话」,展开后可「收起」。
- 已归档会话默认隐藏;可在「视图选项」中取消隐藏,显示为原版灰色标题。
- 工作区
...菜单提供「按时间顺序排序」「按首字母排序」:组和会话一起重排,子工作区与组内也同步;排序后仍可自由拖动。 - 添加工作区使用与官方一致的目录浏览弹窗。
轻量、可回收
- 所有分组数据都是浏览器本地视图状态,不写入 DSH Session / Host 记录。
- 禁用或卸载插件后,原版侧栏自动恢复。
- 不引入 Harness Client 运行时包,只从模块表加载 React。
架构
插件通过 DSH 的 slot 接入,会话/工作区主数据由 DSH Host 提供;分组、顺序、折叠、颜色等是浏览器本地的视图叠加层。
完整时序图、渲染数据流和 Host/本地冲突处理见 docs/architecture.md。
组件总览
flowchart TB
subgraph HOST["DSH Host / 数据服务"]
H1["会话 Sessions"]
H2["工作区 Workspaces"]
H3["状态 / 归档 / 置顶 / 当前会话"]
end
subgraph WEB["DSH Web 浏览器"]
SHELL["DSH 侧栏 Shell<br/>slots"]
subgraph PLUGIN["插件 client.js"]
APPLY["apply(ctx)"]
MODE["ViewModeStore<br/>grouped / official"]
TOGGLE["sidebar.footer.action<br/>视图切换按钮"]
BROWSER["sidebar.workspaces occupant<br/>SessionGroupsBrowser"]
DERIVE["派生视图模型<br/>sections / treeLayout / group tree"]
UI["React UI<br/>Workspace / Group / SessionRow / Menu"]
ACT["交互层<br/>点击 / 菜单 / HTML5 拖拽"]
end
STORE[("session-groups 本地视图状态<br/>localStorage: dsh.session-groups.v1")]
end
APPLY -->|"注册"| TOGGLE
APPLY -->|"监听 slot"| SHELL
TOGGLE --> MODE
MODE -->|"grouped:安装 occupant"| BROWSER
MODE -->|"official:卸载 occupant,恢复原版"| SHELL
HOST -->|"snapshot hooks<br/>useSessions / useWorkspaces / useSessionStatus"| BROWSER
BROWSER --> DERIVE --> UI
UI --> ACT
ACT -->|"视图操作<br/>分组 / 嵌套 / 排序 / 折叠 / 换色"| STORE
STORE -->|"loadPrefs / reconcile"| BROWSER
ACT -->|"官方操作<br/>打开 / 重命名 / 归档 / 新建工作区"| HOST
HOST -->|"新快照"| BROWSER
数据职责
| 数据 | 权威所有者 | 插件行为 |
|---|---|---|
| 会话是否存在 | DSH Host | 只读快照;用于裁剪分组引用 |
| 会话属于哪个工作区 | DSH Host | 分组严格按工作区隔离 |
| 会话标题 / 状态 / 归档 / 置顶 | DSH Host | 渲染时直接读取,不写入本地 |
| 当前打开的会话 | DSH Host | 用于选中态 / 自动展开祖先 |
| 分组 / 子组 / 父组关系 | 插件本地 | 写入 localStorage |
| 组名 / 颜色 / RGB 自定义色 | 插件本地 | 写入 localStorage |
| 组和子组折叠状态 | 插件本地 | 写入 localStorage |
| 组内顺序 / 顶层顺序 / 子工作区顺序 | 插件本地 | 写入 localStorage |
| 工作区树 / 单列表 / 隐藏归档 | 插件本地 | 写入 localStorage |
本地视图状态
存储键:
dsh.session-groups.v1
结构概要:
{
"groups": {
"workspaceId": [
{
"id": "g1",
"name": "分组",
"color": "#4c7dff",
"collapsed": false,
"parentGroupId": null,
"sessionIds": ["sessionId1", "sessionId2"]
}
]
},
"collapsedWorkspaces": {},
"manualOrders": {},
"topOrders": {},
"childOrders": {},
"groupOrders": {},
"hideArchived": true,
"workspaceTree": false,
"flatList": false
}
注意:
sessionIds是 ID 引用,不是会话内容groups是扁平数组,通过parentGroupId形成最多 3 层的树- 组内“会话 + 子组”的顺序由
groupOrders保存 - 所有 state 都是浏览器本地的,不跨设备同步
文件地图
| 文件 | 作用 |
|---|---|
client.js |
插件全部运行时、派生渲染、拖拽、本地状态、UI、i18n |
index.js |
插件入口声明 |
locale/*.json |
插件元数据本地化 |
docs/ |
预览图、主题图、架构文档 |
README.md |
使用说明与功能预览 |
安装
前置条件
- 已安装并运行 DSH Web
- DSH 版本满足
>=0.2.1-rc.2 <0.3.0 - 当前 Web profile 允许安装本地插件
从 GitHub 克隆安装
git clone https://github.com/xyzYaeMiko/dsh-session-groups.git
dsh plugin install "$PWD/dsh-session-groups"
安装后刷新 DSH Web。
从本地目录安装
- 打开 DSH Web 的插件管理面板。
- 选择「从本地目录安装」。
- 选中本项目根目录(包含
package.json、cordis.patch.yml的目录)。 - 安装完成后刷新页面。
安装成功后,侧栏底部会出现分组视图切换按钮。
快速上手
- 点击侧栏底部的分组按钮,进入分组视图。
- 把一条会话拖到另一条会话的中间:新建或加入分组。
- 把会话拖到另一条会话的上/下半区:调整位置,不分组。
- 拖动组头:调整分组在会话列表里的位置。
- 双击组名:重命名;组头
...:换色、折叠、解散。 - 想回到原版侧栏:顶部「视图选项」→「原版视图」。
数据与兼容性
| 项目 | 说明 |
|---|---|
| 存储键 | dsh.session-groups.v1 |
| 存储位置 | 浏览器 localStorage |
| 存储内容 | 分组、颜色、折叠状态、顶层顺序、子工作区顺序、手动排序、隐藏已归档偏好 |
| 同步 | 不跨浏览器 / 不跨 profile / 不跨 origin |
| 写入 Host | 否,只做视图层重组 |
| 平台 | 仅 DSH Web,不支持 Desktop 端 |
| 卸载 | 禁用或卸载插件后,原版侧栏恢复 |
清除浏览器站点数据会丢失分组。分组状态不会上传到任何服务器。
常见问题
Q:刷新后分组会消失吗?
A:0.2.0 已修复启动时工作区数据未就绪导致的误清理。分组保存在 localStorage,正常刷新会保留。
Q:分组会同步到其他浏览器或设备吗?
A:不会。目前是当前 origin / profile 的本地视图状态。
Q:可以不用分组视图吗?
A:可以。顶部「视图选项」切回「原版视图」即可,原来的 DSH 侧栏会恢复。
Q:支持 DSH Desktop 吗?
A:目前只做了 DSH Web 客户端。
版本历史
v0.2.1
- 折叠状态汇总扩展到最外层工作区;折叠任意工作区都会显示其内部运行 / 等待 / 完成状态
- 新增组内分组,最多 3 层;组可以拖到另一个组中部嵌套,拖到边缘或跨层位置插入,拖到工作区空白处移出
- 组内会话拖到同组另一条会话中部会合并创建子组,子组可以继续嵌套到第 3 层
- 组内「直接会话 + 子组」支持混合排序,子组默认位于组内列表底部,之后可拖到会话之间调整位置
- 解散子组时,直接会话和子组会留在父组内,不会散到最外层
- 新增分组 RGB 自定义颜色:R/G/B 数值填写、颜色预览、非法值提示,自定义色刷新后保留
- 「移动到分组」列表限制高度并支持内部滚动,组较多时不会把「解散分组」挤出菜单
- 超过 3 层限制时显示提示;正常换位、嵌套等操作不再弹提示
- 组拖拽排序补充蓝线插入、跨层移动和同层重排反馈
- 修复自定义颜色刷新后丢失、失效的组内排序键残留等问题
v0.2.0
- 新增「工作区 / 工作区树 / 单列表」三种工作区划分,合并为图标选择栏,选中项显示 ✓,悬停显示名称
- 新增工作区树:按目录路径嵌套、子工作区缩进、父级折叠收起子树
- 子工作区折叠时汇总内部状态;当前会话位于折叠子工作区时显示选中态
- 新增单列表:跨工作区汇总显示,分组保持完整
- 视图选项和单工作区菜单新增递归排序:按时间、按拼音首字母
- 深色模式专用分组配色,浅色配色保持不变
- 分组选中边框、折叠组状态汇总、子工作区会话对齐、新建分组插入目标位置、刷新后分组持久化等细节完善
v0.1.0
首个公开版本:
- 彩色会话分组、折叠 / 展开、重命名、解散
- 组与未分组会话同级拖动排序
- 工作区级隔离
- 分组视图 / 原版视图切换
- 状态点、归档会话显示、展开水位线
- 与官方一致的目录选择器
License
MIT © 2026 dsh-session-groups contributors




No comments yet. Be the first to write one.