dsh-connectome:在 DSH Web UI 里用画布查看工作区文件与引用关系

前言

在 DeepSeek Harness(DSH)里开发或维护一个工作区时,文件数量一多,单靠目录树很难一眼看清「谁 import 谁、文档链到哪些资源」。常见做法是切 IDE 的依赖图或自己写脚本扫 import,但那些工具往往只覆盖部分语言,也不会和 DSH 侧栏预览连在一起。

Connectome 是社区维护者 elalamiimed 发布的 DSH bundle 插件(npm 包名 dsh-connectome,GitHub 仓库 elalamiimed/dsh-connectome)。它在 Web UI 里扫描当前工作区,把文件当成节点、引用当成边,用单块 <canvas> 和 d3-force 力导向布局画成可交互地图;点击节点可在 Harness 右侧栏打开对应资源预览。分类上属于客户端插件;数据仅在本地处理,README 明确不写遥测、不发网络请求。

这是什么

Connectome 的定位是:DeepSeek Harness Web UI 里「活」的工作区地图——代码、文档、PDF、图片、数据与未分类二进制等 regular 文件都会成为节点;文件夹以嵌套轮廓叠在布局后方,不参与力模拟,避免挤乱引用关系。

插件由 Host 半(工作区扫描 + HTTP 路由)和懒加载的浏览器模块(画布 UI)组成,通过 Cordis patch 挂进 DSH。

核心功能

下面介绍 README 中已写明、且与实现描述一致的能力。

画布与性能

节点与边画在同一块 canvas 上,不为每个文件创建 DOM 节点。d3-force 负责布局,插件用 requestAnimationFrame 驱动模拟,空闲后停止,目标是在大量节点下仍保持约 60 fps 的交互体验。

文件类型与图例

扫描结果按粗粒度家族区分形状:code(圆)、docs(圆角方)、data(菱形)、assets(环,含图片/媒体/字体/压缩包等)、other(小点)。左上角图例统计各家族数量;节点 tooltip 显示类型、扩展名与字节大小。

文件夹区域

目录以嵌套轮廓绘制在图后方并标注文件夹名;顶栏可切换显示/隐藏。文件夹映射物理位置,不是力节点,不会推开依赖布局。

可读的引用边

依赖边在被引用端带箭头:实线表示 JS/TS 的 import / export … from / 动态 import() / require(),以及 CSS @import 等;虚线表示 HTML 属性、Markdown 链接/图片、CSS url(...) 等资源引用。悬停边可看到两端路径与关系类型。

Host 侧用小型、无额外依赖的正则提取链接;不会把裸包名展开到 node_modules。仅相对路径、根相对路径以及 @/、~/ 等形式会解析到工作区内文件。node_modules、.git、构建产物、缓存与点目录等会被跳过;lockfile、source map、压缩 bundle 等也在排除列表中。

邻域与打开文件

悬停节点会高亮其邻域,并列出直接关联(→ 其 import、← 被谁 import),条目可点;超出部分有 +N 摘要。单击节点通过 ctx.sidebarRight.openResource 以 dsh-resource://file/session/… 在右侧栏预览(代码带行号、Markdown、PDF、图片、Office 等,取决于 Harness 预览能力)。页脚会对缺失预览或未选 session 等情况给出说明。

主题与操作

画布颜色读取运行时 --dsw-alias-* 主题 token,明暗切换会同步改色。支持多工作区切换、重新扫描、fit、缩放、平移、拖拽节点;Esc 或关闭按钮退出对话框。

扫描上限(Host)

README 说明扫描带有硬上限(例如 2,000 个文件节点、12,000 个目录项、1,500 个被解析文件等,具体以仓库文档为准)。超大仓库可能无法完整上图,需要心里有数。

安装与启用

环境要求:DeepSeek Harness 0.2.1-rc.2 或更新(Desktop 或带标准 Web bundle 的 dsh web 部署)。从源码构建需要 Node.js 18+;发行版已附带预构建的 client.js。

在 Web UI 中安装(推荐)

打开侧栏 Plugins → Install,输入下列之一:

dsh-connectome
github:elalamiimed/dsh-connectome

安装成功后,在侧栏面板列表的 More 菜单中选择 Connectome(README 中带 🧠 前缀的同一项)。

若 npm 仍停在 0.0.0-stage 占位包,可能出现 dsh-connectome declares no dsh.bundle。README 建议:安装对话框选用 Official npm registry,或等镜像同步后重试,或改用 github: 规格;也可用 npm view dsh-connectome dist-tags --registry https://registry.npmmirror.com 查看镜像当前版本。

在终端中安装

CLI 将包操作转发到 profile;装完后仍需在 Plugins 里启用 bundle(Web UI 安装会一并完成启用步骤):

dsh plugin --profile desktop add dsh-connectome
# 或直接从 GitHub:
dsh plugin --profile desktop add github:elalamiimed/dsh-connectome

将 --profile desktop 换成你实际使用的 profile 名称即可。

许可证:MIT(package.json 与 README badge 一致)。当前 npm 版本为 1.1.0(以 package.json 为准)。

典型用法

经过上面的安装与启用,可按 README 中的步骤操作:

  1. 侧栏 More → Connectome,对话框会扫描当前工作区并将图 fit 到视口;左上角图例显示各文件家族数量。
  2. 用顶栏切换工作区(若注册了多个)、开关文件夹轮廓、重新扫描、fit 或缩放;拖背景平移,滚轮在指针处缩放,拖节点调整局部布局。
  3. 悬停节点或边查看关系 tooltip;悬停节点还会强调其文件夹链。单击节点在右侧栏打开文件;Esc 或 ✕ 关闭对话框。

支持的依赖语法摘要见 README 表格:JS/TS/JSX/TSX/Vue/Svelte、CSS 系列、HTML、Markdown 相对链接、Python import / from . import 等。

适用场景与注意

适合:需要在 DSH 内快速浏览整个工作区结构、追踪模块或「引擎文件」之间如何相连、并从图上直接跳进预览的开发者。

注意:

  • 插件以当前 DSH 进程权限读取工作区;安装前应自行审阅 源码 与 MIT 许可证。
  • 社区目录页 skillhub.cn/plugins/elalamiimed/dsh-connectome 与 GitHub 为独立信息源,与 DeepSeek / 幻方无官方从属关系;DSH 生态强调「一切皆插件」,本文描述的是社区插件行为,以 README 与发布包为准。
  • npm 上另有无关插件 dsh-project-brain;本插件发布名为 dsh-connectome,勿混淆。

结尾

Connectome 把「每个文件是神经元、每条引用是突触、每个文件夹是区域」这一比喻落实为可操作的 canvas 地图,并和 DSH 右侧资源预览衔接。若要安装说明与 API 细节,以 GitHub README 为准:

  • 目录页:https://www.skillhub.cn/plugins/elalamiimed/dsh-connectome
  • 仓库:https://github.com/elalamiimed/dsh-connectome
  • npm:https://www.npmjs.com/package/dsh-connectome
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜