会话分组 xyzYaeMiko/dsh-session-groups

DSH Session Groups

把 Edge 浏览器的标签页分组体验，搬到 DSH Web 的会话侧栏。

彩色分组、折叠、拖动排序、状态汇总，让一长串会话重新变得可管理。

v0.2.1 · DSH 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 侧栏 Shellslots"]

subgraph PLUGIN["插件 client.js"]
APPLY["apply(ctx)"]
MODE["ViewModeStoregrouped / official"]
TOGGLE["sidebar.footer.action视图切换按钮"]
BROWSER["sidebar.workspaces occupantSessionGroupsBrowser"]
DERIVE["派生视图模型sections / treeLayout / group tree"]
UI["React UIWorkspace / Group / SessionRow / Menu"]
ACT["交互层点击 / 菜单 / HTML5 拖拽"]
end

STORE[("session-groups 本地视图状态localStorage: dsh.session-groups.v1")]
end

APPLY -->|"注册"| TOGGLE
APPLY -->|"监听 slot"| SHELL
TOGGLE --> MODE
MODE -->|"grouped：安装 occupant"| BROWSER
MODE -->|"official：卸载 occupant，恢复原版"| SHELL

HOST -->|"snapshot hooksuseSessions / useWorkspaces / useSessionStatus"| BROWSER
BROWSER --> DERIVE --> UI
UI --> ACT

ACT -->|"视图操作分组 / 嵌套 / 排序 / 折叠 / 换色"| STORE
STORE -->|"loadPrefs / reconcile"| BROWSER
ACT -->|"官方操作打开 / 重命名 / 归档 / 新建工作区"| 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。

从本地目录安装

1. 打开 DSH Web 的插件管理面板。
2. 选择「从本地目录安装」。
3. 选中本项目根目录（包含 package.json、cordis.patch.yml 的目录）。
4. 安装完成后刷新页面。
安装成功后，侧栏底部会出现分组视图切换按钮。

快速上手

1. 点击侧栏底部的分组按钮，进入分组视图。
2. 把一条会话拖到另一条会话的中间：新建或加入分组。
3. 把会话拖到另一条会话的上/下半区：调整位置，不分组。
4. 拖动组头：调整分组在会话列表里的位置。
5. 双击组名：重命名；组头 ...：换色、折叠、解散。
6. 想回到原版侧栏：顶部「视图选项」→「原版视图」。

数据与兼容性

| 项目 | 说明 |
| 存储键 | dsh.session-groups.v1 |
| 存储位置 | 浏览器 localStorage |
| 存储内容 | 分组、颜色、折叠状态、顶层顺序、子工作区顺序、手动排序、隐藏已归档偏好 |
| 同步 | 不跨浏览器 / 不跨 profile / 不跨 origin |
| 写入 Host | 否，只做视图层重组 |
| 平台 | 仅 DSH Web，不支持 Desktop 端 |
| 卸载 | 禁用或卸载插件后，原版侧栏恢复 |

清除浏览器站点数据会丢失分组。分组状态不会上传到任何服务器。

常见问题

Q：刷新后分组会消失吗？ A：0.2.0 已修复启动时工作区数据未就绪导致的误清理。分组保存在 localStorage，正常刷新会保留。

Q：分组会同步到其他浏览器或设备吗？ A：不会。目前是当前 origin / profile 的本地视图状态。

Q：可以不用分组视图吗？ A：可以。顶部「视图选项」切回「原版视图」即可，原来的 DSH 侧栏会恢复。

版本历史

v0.2.1

- 折叠状态汇总扩展到最外层工作区；折叠任意工作区都会显示其内部运行 / 等待 / 完成状态
- 新增组内分组，最多 3 层；组可以拖到另一个组中部嵌套，拖到边缘或跨层位置插入，拖到工作区空白处移出
- 组内会话拖到同组另一条会话中部会合并创建子组，子组可以继续嵌套到第 3 层
- 组内「直接会话 + 子组」支持混合排序，子组默认位于组内列表底部，之后可拖到会话之间调整位置
- 解散子组时，直接会话和子组会留在父组内，不会散到最外层
- 新增分组 RGB 自定义颜色：R/G/B 数值填写、颜色预览、非法值提示，自定义色刷新后保留
- 「移动到分组」列表限制高度并支持内部滚动，组较多时不会把「解散分组」挤出菜单
- 超过 3 层限制时显示提示；正常换位、嵌套等操作不再弹提示
- 组拖拽排序补充蓝线插入、跨层移动和同层重排反馈
- 修复自定义颜色刷新后丢失、失效的组内排序键残留等问题

v0.2.0

- 新增「工作区 / 工作区树 / 单列表」三种工作区划分，合并为图标选择栏，选中项显示 ✓，悬停显示名称
- 新增工作区树：按目录路径嵌套、子工作区缩进、父级折叠收起子树
- 子工作区折叠时汇总内部状态；当前会话位于折叠子工作区时显示选中态
- 新增单列表：跨工作区汇总显示，分组保持完整
- 视图选项和单工作区菜单新增递归排序：按时间、按拼音首字母
- 深色模式专用分组配色，浅色配色保持不变
- 分组选中边框、折叠组状态汇总、子工作区会话对齐、新建分组插入目标位置、刷新后分组持久化等细节完善

v0.1.0

首个公开版本：

- 彩色会话分组、折叠 / 展开、重命名、解散
- 组与未分组会话同级拖动排序
- 工作区级隔离
- 分组视图 / 原版视图切换
- 状态点、归档会话显示、展开水位线
- 与官方一致的目录选择器

License

MIT © 2026 dsh-session-groups contributors