用AI实现分支查看DSH插件

5,067 字 · 预计阅读 14 分钟

上一篇用古法手写了第一个插件,知道了一个插件由哪些文件组成。这一篇换成现在真实的做法:代码交给 AI 写,你负责四件事:给它资料、讲清需求、检查它写得对不对、在 DSH 里验收。

要做的东西叫分支查看:待在输入框下方,显示当前项目在哪个 Git 分支上,点一下就刷新。

做好之后的样子:输入框下方显示当前分支 feat/hello,前面还有一个分支图标

先说说什么是分支。Git 会记下代码的每一次改动,分支就像几本平行的草稿本:同时做几件事时,每件事写在自己的本子上,互不干扰。

在 DSH 里,AI 会直接改你项目里的文件。它改在哪个分支上,你得心里有数。分支查看就是让你随时瞄一眼就知道。

写这一篇之前,我们真按下面的流程让 AI 做了一遍:给资料、讲需求、审方案、审代码,最后在 DSH 里验收。文中出现的错,都是这一遍里真实犯的。

学完你能做到:给 AI 准备一份项目说明和一个范本;把需求讲清楚,先让 AI 出方案;照着检查清单审方案、审代码;在 DSH 里验收,出了问题知道怎么告诉 AI。


一、准备:选工具,给 AI 一份说明书和一个范本


1. 选一个 AI 编程工具

我们直接用 DSH 自己:在 DSH 里新建一个会话,点输入框上方的「默认工作区」,选「添加工作区…」,选中上一篇做好的 dsh-branch-chip 文件夹,再选一个模型。这样 AI 干活的地方,就是你的插件项目。

用 DSH 给 DSH 做插件,听上去有点绕,其实互不干扰:你在 DSH 里让 AI 改的,只是 dsh-branch-chip 文件夹里的代码;装插件、看效果,还是用上一篇那个试验用的 DSH。

用 Claude Code、Codex 这些工具也完全可以,下面的提示词照样用。我们写这一篇时,实测用的是 Claude Code。


2. 给 AI 一个范本

DSH 很新,很多接口在文档里写得不全。对 AI 来说,最可靠的老师是一个真能跑的插件,照着它的写法来,比猜强得多。

我们用 dsh-ccgui 当范本。它是一个已经发布的 DSH 插件,MIT 协议,代码公开,后面几篇还会专门拆解它。在终端里进到 dsh-branch-chip 文件夹,运行:

bash
git clone --depth 1 https://github.com/zhukunpenglinyutong/dsh-ccgui.git .reference/dsh-ccgui
echo ".reference/" >> .gitignore

第一行把范本下载到项目里的 .reference/dsh-ccgui 文件夹,--depth 1 表示只下载最新版本,不要历史记录。第二行把这个文件夹写进 .gitignore,它只是参考资料,不算你项目的一部分。

为什么放在项目里面,不放在旁边?有的 AI 工具默认只能读工作区里的文件,DSH 的访问模式"工作区内修改"就是这样。放在里面,哪个工具都读得到。


3. 写一份给 AI 的说明书

AI 编程工具开工前,会先找项目里有没有一份叫 AGENTS.md 的文件,有的话先读它。DSH 和 Codex 都认这个文件名;Claude Code 认的是 CLAUDE.md,在里面写一行 @AGENTS.md,就能引用同一份内容。

在 dsh-branch-chip 文件夹里新建 AGENTS.md,把下面的内容复制进去:

markdown
# AGENTS.md

这是一个 DeepSeek Harness(DSH)插件,名字叫 dsh-branch-chip(分支查看)。

## DSH 插件的规矩

- 插件分两半:后台那一半在 `src/index.ts`,编译到 `lib/index.js`,跑在 DSH 的服务进程里;
  界面那一半在 `src/client/`,打包成 `lib/client.js`,跑在 DSH 的网页里。
  两半之间用 HTTP 请求传话,界面的代码不能导入后台的文件。
- `package.json` 的 `dsh.bundle` 指向 `cordis.patch.yml`;
  有界面时要有 `dsh.client` 和 `exports["./client"]`。
- 界面代码由 `scripts/build-client.mjs` 打包,
  外面那层 `window.__ModuleLoader__.load` 包装由它加,`id` 必须等于包名。不要改这层包装。
- React 和 `@deepseek-ai/dsh-client-ui-primitives` 由 DSH 在运行时提供,打包时排除,
  不要加进 dependencies。
- 用到 DSH 自己的包(`@deepseek-ai/*`),同时写进 `peerDependencies` 和 `devDependencies`;
  `dsh-` 开头的包,版本范围和 `engines.dsh` 一致,
  写成 `>=0.2.2-rc.1 <0.3.0` 这种带预发布后缀的形式。
- 往别的积木的插槽里放组件,先 `ctx.slots.inject(插槽名, ...)`,再在回调里 `register`。
- DSH 提供了服务的事,用 DSH 的服务做,不要自己用 Node 自带的模块另起炉灶。
- 插件装上时做的事(注册、加样式等),都交给 `ctx.effect`,并返回撤销的函数。
- 界面颜色只用 `--dsw-alias-` 开头的 CSS 变量,类名用插件名开头。
- 界面上的文字用中文;报错要告诉用户下一步该做什么。

## 不熟的 DSH 接口去哪里查

- 同类写法的范本:`.reference/dsh-ccgui`,一个已经发布的 DSH 插件(MIT 协议)。
  先在里面找同类的写法再动手;只参考写法,不要照搬和需求无关的代码。
- 插槽清单:https://github.com/deepseek-ai/deepseek-harness/blob/master/packages/extensions/cordis-client-runner/src/client/slot-catalog.ts
- 范本和文档里都找不到依据的接口,不要编。说出来,等我确认。

## 做完的标准

- `pnpm typecheck` 和 `pnpm build` 都通过。
- 告诉我改了哪些文件,以及怎么在 DSH 里验收。

再新建一个 CLAUDE.md,里面只写一行:

@AGENTS.md

这份说明书分三块,每一块都有讲究:

  • 规矩:几乎全是前两篇学过的东西:两半怎么分、package.json 要写什么、包装怎么加、React 向 DSH 借、往插槽放东西先 inject。古法那一遍没有白写,你得先懂这些,才写得出这份说明书。
  • 去哪里查:告诉 AI 范本在哪、插槽清单在哪。最后一句最要紧:"找不到依据的接口,不要编"。AI 有个毛病,不知道的东西也会编一个看起来很合理的出来,这句话就是专门防它的。
  • 做完的标准:说清楚什么才算做完,省得它写一半就说好了。

小黑先摊开 AGENTS.md 和能运行的范本,再按依据制作分支插件

最后,把现在的样子存一份。 在终端里运行:

bash
git add -A
git commit -m "古法版:你好,DSH"

本文是会员内容

全文 5,067 字,已试读约 30%。开通专业版可阅读全文,并解锁全部官方课程与后续更新。

开通专业版

支持 7 天无理由退款 · 早鸟价 99 元/年(售完恢复365/年)

课程中涉及的第三方项目,其著作权与商标归各自权利人所有;引用处的署名与许可见《开源与来源说明》。