@vobs/cli 1.7.4 → 1.7.7

package/src/templates/dsh-plugin/README.md.hbs

@@ -0,0 +1,54 @@
+# {{displayName}}
+
+用 [vobs](https://github.com/vobsjs/vobs) 渲染的 DeepSeek Harness 插件。
+
+## 开发
+
+```bash
+pnpm install
+pnpm dev      # 本地预览：不用装进 DSH，浏览器里就能看到面板
+pnpm build    # 产出 lib/{index,client}.js
+pnpm check    # 装前一致性校验
+```
+
+## 安装进 DSH
+
+产物**必须提交进 Git** —— DSH 安装时不会构建你的包。
+
+```bash
+git add -A && git commit -m "feat: {{displayName}}" && git tag v0.1.0 && git push --tags
+```
+
+然后在 DSH 侧边栏「插件」页填：
+
+```text
+github:<owner>/<repo>#v0.1.0&path:/<本包在仓库中的路径>
+```
+
+`&path:` 是 pnpm 的 Git 仓库子目录语法。**Windows 上用命令行时要注意**：
+`dsh.cmd` 是 batch 包装，`&` 会被 `cmd.exe` 吃掉而静默装错包，PowerShell 里要写
+`dsh --% plugin --profile desktop add "…"`。
+
+装完完全退出 DSH 再打开。
+
+## 结构
+
+```
+src/
+├── host/index.ts        Host 侧 cordis 插件（只负责「被挂载」）
+└── client/
+    ├── index.tsx        defineDshOverlay：挂到哪个 slot、渲染什么
+    ├── panel.tsx        面板主体（vobs 组件，只执行一次）
+    └── styles.ts        注入 shadow root 的样式
+cordis.patch.yml         把自己的行插进 profile 的 cordis 树
+lib/                     构建产物（提交进 Git）
+```
+
+## 换一种挂法
+
+`src/client/index.tsx` 里的 `defineDshOverlay` 可以换成：
+
+- `defineDshPanel({ key, label, sidebarEntry })` —— 占满主区域的整页 + 左侧栏入口
+- `defineDshPlugin({ setup(ctx) { … } })` —— 自己写 apply，挂到适配层还没封装的 slot
+
+可用的 slot 与字段见 [`@vobs/dsh` 的 README](https://github.com/vobsjs/vobs/tree/main/packages/dsh)。

package/src/templates/dsh-plugin/cordis.patch.yml.hbs

@@ -0,0 +1,7 @@
+# DSH 组合包补丁层：只追加自己的插件行，不覆盖任何官方条目。
+#
+# 条目 id 是你在 DSH「插件」页里做开关时用的名字；
+# name 必须等于 package.json 的 name（去掉 scope 的裸包名亦可）。
+- insert:
+    - id: {{rowId}}
+      name: {{packageName}}

package/src/templates/dsh-plugin/package.json.hbs

@@ -0,0 +1,40 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "private": true,
+  "description": "{{displayName}} —— 用 vobs 渲染的 DSH 插件",
+  "type": "module",
+  "main": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vobs dsh dev",
+    "build": "vobs dsh build",
+    "check": "vobs dsh check"
+  },
+  "dsh": {
+    "manifestVersion": 1,
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web"
+    }
+  },
+  "devDependencies": {
+    "@vobs/cli": "^{{vobsVersion}}",
+    "@vobs/dsh": "^{{vobsVersion}}",
+    "@vobs/vite-plugin": "^{{vobsVersion}}",
+    "@vobs/vobs": "^{{vobsVersion}}",
+    "vite": "^7.3.6"
+  }
+}

package/src/templates/dsh-plugin/src/client/index.tsx.hbs

@@ -0,0 +1,24 @@
+/**
+ * Client 半侧入口。会被 dshBundle() 构建成 lib/client.js：
+ *
+ *   window.__ModuleLoader__.load({ id: '{{packageName}}', factory: function (require) { … } })
+ *
+ * 适配层（@vobs/dsh）负责 React 绑定、shadow root 宿主、slot 注册、配色跟随与清理，
+ * 这里只剩「挂到哪个 slot」和「渲染什么」两件事。
+ */
+import { defineDshOverlay } from '@vobs/dsh'
+import { Panel } from './panel'
+import { PANEL_CSS } from './styles'
+
+/**
+ * shell.overlay 是 @deepseek-ai/dsh-client-ui-layout 声明的 list slot（scope: root），
+ * DSH 自家的配额提示、插件管理器 toast 都挂在这里。
+ */
+export default defineDshOverlay(
+  {
+    id: '{{rowId}}',
+    order: 120,
+    styles: PANEL_CSS
+  },
+  () => <Panel />
+)

package/src/templates/dsh-plugin/src/client/panel.tsx.hbs

@@ -0,0 +1,45 @@
+import { state } from '@vobs/vobs'
+
+/**
+ * 面板主体。整个函数**只执行一次** —— 下面每个 `{…}` 都会被编译成独立的
+ * DOM binding effect，更新只触碰变化的那个文本节点，不会有组件重渲染。
+ */
+export function Panel() {
+  const count = state(0)
+
+  return (
+    <div class="panel">
+      <header class="panel__head">
+        <span class="panel__brand">{{displayName}}</span>
+        <span class="panel__tag">vobs 渲染</span>
+      </header>
+
+      <div class="panel__body">
+        <p class="panel__hint">
+          改 <code>src/client/panel.tsx</code> 就能看到界面变化；
+          <code>vobs dsh dev</code> 可以在不装进 DSH 的情况下预览。
+        </p>
+
+        <div class="panel__row">
+          <button
+            class="panel__btn"
+            onClick={() => {
+              count.value -= 1
+            }}
+          >
+            −1
+          </button>
+          <span class="panel__count">{count.value}</span>
+          <button
+            class="panel__btn panel__btn--primary"
+            onClick={() => {
+              count.value += 1
+            }}
+          >
+            +1
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/dsh-plugin/src/client/styles.ts.hbs

@@ -0,0 +1,65 @@
+/**
+ * 面板样式。由 @vobs/dsh 注入 shadow root：DSH 的全局 CSS 进不来，这里也漏不出去。
+ *
+ * 配色优先读 DSH 的 design token（会继承进 shadow root），读不到就按
+ * `data-scheme` 回退 —— 所以脱离 DSH 预览时同样好看。
+ */
+export const PANEL_CSS = `
+:where(*, *::before, *::after) { box-sizing: border-box; }
+
+.vobs-dsh-root {
+  --p-bg: rgba(26, 27, 33, 0.94);
+  --p-fg: #e9eaf0;
+  --p-fg-muted: #9aa1ae;
+  --p-line: rgba(255, 255, 255, 0.14);
+  --p-accent: #8f80ff;
+  --p-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
+}
+.vobs-dsh-root[data-scheme='light'] {
+  --p-bg: rgba(255, 255, 255, 0.96);
+  --p-fg: #1b1c22;
+  --p-fg-muted: #6b7280;
+  --p-line: rgba(15, 18, 32, 0.12);
+  --p-accent: #5b47e0;
+  --p-shadow: 0 18px 48px rgba(15, 18, 32, 0.22);
+}
+
+.panel {
+  width: 300px;
+  border: 1px solid var(--p-line);
+  border-radius: 14px;
+  background: var(--p-bg);
+  box-shadow: var(--p-shadow);
+  backdrop-filter: blur(14px);
+  color: var(--p-fg);
+  font: 13px/1.55 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
+}
+
+.panel__head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; border-bottom: 1px solid var(--p-line);
+}
+.panel__brand { font-weight: 650; }
+.panel__tag {
+  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
+  background: color-mix(in srgb, var(--p-accent) 18%, transparent);
+  color: var(--p-accent);
+}
+.panel__body { padding: 12px; display: grid; gap: 12px; }
+.panel__hint { margin: 0; color: var(--p-fg-muted); font-size: 12px; }
+.panel__hint code {
+  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
+  padding: 1px 5px; border-radius: 5px;
+  background: color-mix(in srgb, var(--p-fg) 8%, transparent);
+}
+.panel__row { display: flex; align-items: center; gap: 10px; }
+.panel__count { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; }
+.panel__btn {
+  padding: 5px 12px; border: 1px solid var(--p-line); border-radius: 8px;
+  background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer;
+}
+.panel__btn:hover { background: color-mix(in srgb, var(--p-fg) 8%, transparent); }
+.panel__btn--primary {
+  border-color: transparent; background: var(--p-accent); color: #fff; font-weight: 600;
+}
+`

package/src/templates/dsh-plugin/src/host/index.ts.hbs

@@ -0,0 +1,20 @@
+/**
+ * Host 半侧。
+ *
+ * DSH 的组合包在该 profile 的 cordis 树里插入一行，这一行指向本模块。
+ * 客户端模块系统扫描**已启用的 Loader 条目**，读取本包的 `dsh.client` 声明，
+ * 把 `exports['./client']`（lib/client.js）作为浏览器 bundle 提供给页面。
+ *
+ * 也就是说：Host 侧只负责「被挂载」，从而让客户端 bundle 进入启动图。
+ * 要给 Agent 加工具、订阅 session/event、注册服务，才需要在这里写。
+ */
+
+/** cordis 插件名，用于调试命名空间；与 npm 包名无关。 */
+export const name = '{{rowId}}'
+
+/** 需要先就绪的 Host 服务名。 */
+export const inject: readonly string[] = []
+
+export function apply(_ctx: unknown): void {
+  // 有意留空：默认插件的可观察行为全部发生在浏览器半侧。
+}

package/src/templates/dsh-plugin/tsconfig.json.hbs

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "jsx": "preserve",
+    "jsxImportSource": "@vobs/vobs",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "types": []
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/src/templates/dsh-plugin/vite.config.ts.hbs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { vobsPlugin } from '@vobs/vite-plugin'
+import { dshBundle } from '@vobs/dsh/vite'
+
+export default defineConfig({
+  plugins: [
+    // 把 TSX 编译成细粒度 DOM 绑定
+    vobsPlugin(),
+    // 把产物包成 DSH 的 window.__ModuleLoader__ factory，
+    // 并在这里挡住「拆了 chunk / 出了独立 asset / 格式不是 cjs」三类错误。
+    dshBundle({ entry: 'src/client/index.tsx' })
+  ]
+})

package/src/utils/file.ts

@@ -66,12 +66,16 @@ async function copyDirRecursive(srcDir: string, destDir: string, context: Record
   }
 }
 
-/** Scaffold a project from the basic template */
+/** Scaffold a project from a named template under `src/templates`. */
 export async function scaffoldProject(
   targetDir: string,
-  context: Record<string, unknown>
+  context: Record<string, unknown>,
+  template = 'basic'
 ): Promise<void> {
-  const templateDir = resolve(TEMPLATES_ROOT, 'basic')
+  const templateDir = resolve(TEMPLATES_ROOT, template)
+  if (!existsSync(templateDir)) {
+    throw new Error(`模板不存在: ${template}（可用模板见 ${TEMPLATES_ROOT}）`)
+  }
   ensureDir(targetDir)
   await copyDirRecursive(templateDir, targetDir, context)
 }