接管浏览器端 edit/write 工具卡片,用近线性行级 diff 只显示真正变化行,并对替换对做行内字符下划线高亮,消除内置 diff 对未变化相同行的重复渲染。
安装
# npm 包(预构建)
dsh plugin --profile web add dsh-edit-diff
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:better-er/dsh-edit-diff
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
接管 DSH 浏览器的 edit / write 工具卡片,用近线性行级 diff 做真正的差异展示,消除内置 DiffBlock 把「未变化的相同行」在删除区红 - 行和新增区绿 + 行各渲染一遍的重复。
渲染全在浏览器端,主机端半身只负责把配置转成 settings 命名空间。单击即换新渲染,不碰 DSH 源码。
引言
原版 diff 的显示相当离谱:一次只修改一行,它却把这行连同上下各三行一起带进 diff,共十四行,其中七行被折叠,正好红区和绿区完全不重叠。不点开二级展开根本看不出到底改了什么——点开了也照样看花眼。
这个插件把无关的相同行全部去除。只修改一行时,就只显示一行红一行绿,真正的修改加粗划线,一眼就能看清改在哪里。
另外,PTC 模式下默认只显示调用成功与否,本插件也做了适配,能正常显示修改内容。
与另外三件的关系
它是这四件里的头一件。写入这件事第一次看得清之后,才显出另外三处漏:覆写不可逆、内容不合法、远程够不着。对应的分别是 dsh-write-create-only、dsh-write-rule-guard 与 dsh-remote-file-system,四件的首次提交时间也与这层先后一致。
本插件默认已接管最后那件的 edit_remote 与 write_remote,见下面的 extraTools。
功能
- 仅差异行:完全相同行直接不渲染,只显示真实变化的删除行红
-与新增行绿+,消除重复。 - 行内字符高亮:删/增行数相等的替换对,再做字符级 diff,用下划线在行内标出真正改动的字符,而不是整行糊在一起。
- 近线性算法:先做公共前缀/后缀收缩线性,仅对中间小差异带运行 Myers diff,复杂度与差异量成正比而非平方,超大文件也流畅。
- 默认收起:卡片默认一行摘要,点开才显示 diff 体,不刷屏。
- 长 diff 二次折叠:展开后若差异行超 14 行,折成头 +「⋯ 展开其余 N 行差异」+ 尾,点开才全量。
- 对齐原生观感:字号、圆角、配色复用内置 DiffBlock/ToolRow 同一批
--dsw-*主题变量,视觉上就是原生卡片。 - 复制与统计:复制只含差异行,
-/+前缀;底部└ +A -R · N file(s)变更统计。 - 单文件与多文件:
edit/write双双接管,覆盖新建只显示绿色新增,纯删、多 hunk 等场景。 - PTC 模式兼容:
run_code子调用中的edit/write同样显示优化后的修改 diff,通过callId中的:code:标记识别子调用。注意write是全文件覆写,无旧内容,只能显示全新增;想看精确 diff 应使用edit。 - 接管其他工具:
extraTools让 dsh-remote-file-system 的edit_remote、write_remote一并使用优化显示,插件已默认开启这两个,参数名不同的工具可逐项覆盖。
它长什么样
| 效果图 | |
|---|---|
| 原版 diff | ![]() |
| 本插件 | ![]() |
演示视频
光看静态截图不过瘾?看看这个插件的实际演示效果。
| dsh-edit-diff 插件演示 · 66 秒 |
|---|
四件一起讲的宣传片,中文与日语配音两版同在一个投稿里:
| 文件四件套宣传片 · 一个核心,三个辅助 |
|---|
安装
从 GitHub 安装:源码在 src/,lib/ 不入仓库,安装时 npm 会触发 prepare 脚本现场构建。
dsh plugin --profile web add github:better-er/dsh-edit-diff
从 npm 安装:包内已含构建产物 lib/index.js 与 lib/client.js,安装时不再构建。
dsh plugin --profile web add dsh-edit-diff
两种方式装完都会自动挂载,重启 DSH web 后启用,无需手工编辑任何文件。
卸载
dsh plugin --profile web remove dsh-edit-diff
彻底移除,重启 DSH web 后不再加载。
配置
extraTools 列出 edit 与 write 之外要接管的工具。每条写工具名和读取参数用的参数名,参数名省略时按 file_path、old_string、new_string、content 取值。
插件自带的 cordis.patch.yml 已经默认接管 dsh-remote-file-system 的这两个远程工具:
- insert:
- id: dsh-edit-diff
name: dsh-edit-diff
config:
extraTools:
- name: edit_remote
- name: write_remote
它们的参数名和原生一致,只写名字即可。参数名不同的工具再补:
extraTools:
- name: some_tool
pathKey: target
oldKey: before
newKey: after
contentKey: body
要改这份默认,在 profile 的 cordis.patch.yml 里按 id 覆盖:
- id: dsh-edit-diff
config:
extraTools:
- name: some_tool
判断规则:参数里同时有旧文本与新文本就按 edit 型渲染,否则有整文件内容就按 write 型渲染。
配置经 settings 命名空间 dsh-edit-diff 送到浏览器端,settings 变化会让浏览器端重建这批 key 的注册。
要求与开发
- 是标准形态的 dsh client 插件,声明
dsh.client,导出./client。 - 同时声明了
dsh.bundle,因此也是一个自挂载的 bundle 层插件:用dsh plugin --profile <name> add从 GitHub 安装后,会被自动识别为 profile layer 并挂载,无需手工写组合 entry。 - 主机端半身在
ctx.inject(['settings'], ...)子级里以 effect 注册settings.configure({ auto: false }, ctx.fiber),声明本插件自带配置页面;配置字段用.volatile()声明后才会出现在设置表单中。浏览器端拿不到 cordis 配置,改用ctx.configForms.get('dsh-edit-diff')读解析后的值,这是双半插件传配置的唯一通道。 - UI 挂载点:接管 keyed 槽位
tool.call.toolview的edit与write两个 key,以及extraTools里声明的每个工具名。 - 遮蔽而非冲突:注册时显式传
priority: -1低于内置file-mutation-toolview的默认 0,用更低优先级遮蔽默认渲染,而不是在同一优先级上 clash。 - PTC 模式:通过
callId包含:code:判断是否为run_code子调用,从argsRaw中提取old_string/new_string即edit或content即write动态构建 diff。 - 构建型:TypeScript 源码位于
src/,pnpm build通过 tsdown 生成lib/index.js、lib/index.d.ts、lib/client.js与 sourcemap,运行时只加载lib/发布产物。 - diff 算法就地内联,浏览器端只向宿主模块表请求 react;主机端向宿主解析
@deepseek-ai/schemastery。
本地开发:
pnpm install
pnpm typecheck
pnpm build
改完源码需重新 pnpm build,DSH web 的 HMR 观察到 lib/client.js 变化后自动重载。
License
链接
同类插件
zhu1090093659/dsh-web#packages/dsh-task-board★ 8978
侧边栏多列任务看板:卡片交给真实 DSH 智能体会话执行,支持 cron 定时(Host 侧到点执行,关浏览器也生效)。
zhu1090093659/dsh-web#packages/dsh-web-all★ 8978
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 5292
右下角常驻的小鲸鱼挂件:余额、今日已用与每轮对话消耗(含峰谷价),余额预警与今日预算的泡泡内容都可编辑;泡泡点击序列模块化自定义,支持并列加权 A/B、随机台词与随机图片;内置 30+ 厂商模板(OpenAI / OpenRouter / Kimi / 硅基流动 / 方舟 / 智谱 / MiniMax 等),按模型查余额与订阅额度;另有任务结束音效、导入音频、自定义角色与资源管理。数据全在本机,无遥测。
ccch1mneyyy/dsh-TUI★ 4819
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
omdsh-dev/DSH-better-sidebar★ 4290
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
Devin-AXIS/deepseek-design#deepseek-idesign★ 1478
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。


社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。