@wenbin_wb/dsh-bridge 1.0.2 → 1.0.4

package/README.md

@@ -1,11 +1,21 @@
 # dsh-bridge
 
+![dsh-bridge banner](docs/banner.jpg)
+
 > DeepSeek Harness 多通道远程访问插件
 
-在 DSH 设置页新增「远程访问」面板，支持局域网二维码、Cloudflare 隧道、自建 WebSocket 隧道三种方式从任意设备访问你的 DSH 实例。
+把你本地的 DeepSeek Harness 无缝延伸到手机、平板、公网、甚至 IM 聊天软件。无论你在哪，都能通过扫码、网页或未来的微信/QQ/飞书，随时调用你的 AI 助手。
+
+在 DSH 设置页新增「远程访问」面板，开箱即用地获得：
+
+- **局域网访问**：手机扫码，同一 Wi-Fi 直接访问
+- **Cloudflare 隧道**：一键暴露公网地址，随时随地连接
+- **自建隧道**：连接自己的隧道服务器，获得固定域名
+- **IM 集成（规划中）**：微信 / QQ / 飞书 / OpenClaw，直接在聊天软件里呼唤你的 Agent
 
-![DSH Plugin](https://img.shields.io/badge/dsh--plugin-0.1.0--rc.6-blue)
-![License](https://img.shields.io/badge/license-MIT-green)
+![npm](https://img.shields.io/npm/v/@wenbin_wb/dsh-bridge?label=npm)
+![npm downloads](https://img.shields.io/npm/dt/@wenbin_wb/dsh-bridge?label=downloads)
+![npm license](https://img.shields.io/npm/l/@wenbin_wb/dsh-bridge?label=license)
 ![Node](https://img.shields.io/badge/node-%3E%3D22-brightgreen)
 
 ## 功能
@@ -16,10 +26,17 @@
 - **安全提示**：URL 和二维码带访问警告，防止误分享
 - **版本检查**：进入面板自动检测是否有新版本
 
-## 兼容性
+## Roadmap
 
-> 本插件基于 **DeepSeek Harness v0.1.0-rc.6** 开发测试。  
-> DSH 是开发者预览版，插件契约可能随版本变化，请关注 [CHANGELOG](./CHANGELOG.md)。
+除了现有的三种访问方式，正在规划：
+
+| 目标 | 说明 | 状态 |
+|------|------|------|
+| **微信** | 在微信里直接与你的 Agent 对话 | 规划中 |
+| **QQ Bot** | 接入 QQ 机器人，群聊/私聊唤起 Agent | 规划中 |
+| **飞书** | 飞书消息/机器人集成，办公场景直接调用 | 规划中 |
+| **OpenClaw** | 与 OpenClaw 生态打通 | 规划中 |
+| **Telegram** | 适合自托管的 IM 渠道 | 规划中 |
 
 ## 环境要求
 
@@ -39,10 +56,9 @@ dsh --version
 如果 `dsh` 命令提示"无法识别/找不到"，说明它没有全局安装，先安装 DSH：
 
 ```bash
-npm install -g @deepseek-ai/dsh@0.1.0-rc.6
+npm install -g @deepseek-ai/dsh
 ```
 
-> ⚠️ 与 DSH 版本保持一致：本插件基于 `0.1.0-rc.6` 测试，建议安装相同版本以免契约不匹配。  
 > 若没有全局安装的权限，也可以用 `npx` 方式（无需全局安装）：
 > ```bash
 > npx --yes @deepseek-ai/dsh plugin --profile web add @wenbin_wb/dsh-bridge
@@ -80,8 +96,10 @@ dsh plugin --profile web add ./dsh-bridge
 
 ### 自建隧道
 
-1. 展开「如何搭建自建隧道服务器？」查看搭建步骤
-2. 填写 WebSocket 服务器地址（`wss://...`）和访问令牌
+需要一台有公网 IP 的服务器。详细搭建步骤见 [自建隧道教程](docs/custom-tunnel.md)。
+
+1. 按教程在服务器上部署隧道服务端
+2. 在「自建隧道」卡片中填写 WebSocket 地址（`wss://...`）和访问令牌
 3. 点「保存配置」后点「开启」
 
 配置自动持久化到 `~/.dsh/dsh-bridge/config.json`，重启后无需重新填写。

package/client/build.mjs

@@ -1,5 +1,6 @@
 // dsh-bridge 客户端打包：client/index.js → client/client.js
 import { mkdir, writeFile } from 'node:fs/promises';
+import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { build } from 'esbuild';
@@ -7,7 +8,8 @@ import { build } from 'esbuild';
 const sourceDir = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(sourceDir, '..');
 const outputPath = resolve(packageRoot, 'client/client.js');
-const loaderId = 'dsh-bridge';
+// loaderId 必须与 package.json 的 name 一致（DSH 用它来验证 bundle 注册）
+const loaderId = JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf8')).name;
 
 const result = await build({
   entryPoints: [resolve(sourceDir, 'index.js')],

package/client/client.js

@@ -1,5 +1,5 @@
 window.__ModuleLoader__.load({
-  id: "dsh-bridge",
+  id: "@wenbin_wb/dsh-bridge",
   factory: (require) => {
     var module = { exports: {} };
     var exports = module.exports;
@@ -47,6 +47,7 @@ var BRIDGE_ENDPOINTS = {
 // client/index.js
 var GITHUB_URL = "https://github.com/wenbin-wb/dsh-bridge";
 var ISSUES_URL = "https://github.com/wenbin-wb/dsh-bridge/issues/new";
+var TUNNEL_DOCS_URL = "https://github.com/wenbin-wb/dsh-bridge/blob/main/docs/custom-tunnel.md";
 var name = "dsh-bridge";
 var inject = ["slots", "connection"];
 function semverGt(a, b) {
@@ -64,17 +65,17 @@ function semverGt(a, b) {
   return av.pre > bv.pre;
 }
 var s = {
-  card: { background: "var(--dsw-alias-bg-layer-1,#fff)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "16px 20px", marginBottom: 16 },
+  card: { background: "var(--dsw-alias-bg-layer-1,transparent)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "16px 20px", marginBottom: 16 },
   block: { borderTop: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", marginTop: 12, paddingTop: 12 },
   muted: { color: "var(--dsw-alias-label-tertiary,#8b93a1)", fontSize: 12, lineHeight: 1.5 },
-  label: { color: "var(--dsw-alias-label-primary,inherit)", fontSize: 13, fontWeight: 500 },
-  code: { fontFamily: "ui-monospace,Menlo,monospace", fontSize: 12, wordBreak: "break-all", color: "var(--dsw-alias-label-primary,inherit)" },
+  label: { color: "var(--dsw-alias-label-primary,currentColor)", fontSize: 13, fontWeight: 500 },
+  code: { fontFamily: "ui-monospace,Menlo,monospace", fontSize: 12, wordBreak: "break-all", color: "var(--dsw-alias-label-primary,currentColor)" },
   btnPri: { font: "inherit", cursor: "pointer", border: "none", background: "var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary,#4f6ef7))", color: "#fff", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 4 },
-  btnGhost: { font: "inherit", cursor: "pointer", border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,#fff)", color: "var(--dsw-alias-label-primary,inherit)", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4 },
+  btnGhost: { font: "inherit", cursor: "pointer", border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,transparent)", color: "var(--dsw-alias-label-primary,currentColor)", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4, textDecoration: "none" },
   btnLink: { font: "inherit", cursor: "pointer", border: "none", background: "none", color: "var(--dsw-alias-brand-primary,#4f6ef7)", fontSize: 12, padding: 0, display: "inline-flex", alignItems: "center", gap: 3, textDecoration: "none" },
   qr: { width: 200, height: 200, borderRadius: 10, border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", margin: "8px 0", display: "block" },
   tag: { display: "inline-flex", alignItems: "center", padding: "2px 8px", borderRadius: 999, fontSize: 12, fontWeight: 500 },
-  input: { width: "100%", font: "inherit", fontSize: 13, padding: "7px 10px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,#fff)", color: "var(--dsw-alias-label-primary,inherit)", outline: "none", boxSizing: "border-box" },
+  input: { width: "100%", font: "inherit", fontSize: 13, padding: "7px 10px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,transparent)", color: "var(--dsw-alias-label-primary,currentColor)", outline: "none", boxSizing: "border-box" },
   warn: { background: "var(--dsw-alias-state-warn-bg,#fffbeb)", border: "1px solid var(--dsw-alias-state-warn-border,#fde68a)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-state-warn-primary,#92400e)", lineHeight: 1.6 },
   tip: { background: "var(--dsw-alias-bg-layer-2,#f9fafb)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-label-secondary,#6b7280)", lineHeight: 1.6 }
 };
@@ -137,38 +138,15 @@ function QrBlock({ url, qr, onReset }) {
   );
 }
 var CustomTunnelGuide = React.memo(function CustomTunnelGuide2() {
-  const [open, setOpen] = React.useState(false);
-  const toggle = React.useCallback(() => setOpen((v) => !v), []);
   return React.createElement(
     "div",
     { style: s.block },
-    React.createElement("button", {
-      style: { ...s.btnGhost, fontSize: 12, height: 28, marginBottom: open ? 10 : 0 },
-      onClick: toggle
-    }, open ? "\u25B2 \u6536\u8D77\u642D\u5EFA\u6559\u7A0B" : "\u25B6 \u5982\u4F55\u642D\u5EFA\u81EA\u5EFA\u96A7\u9053\u670D\u52A1\u5668\uFF1F"),
-    open && React.createElement(
-      "div",
-      { style: s.tip },
-      React.createElement("div", { style: { fontWeight: 500, marginBottom: 6, color: "var(--dsw-alias-label-primary,inherit)" } }, "\u642D\u5EFA\u6B65\u9AA4"),
-      React.createElement(
-        "ol",
-        { style: { margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 4 } },
-        React.createElement("li", null, "\u5728\u516C\u7F51\u670D\u52A1\u5668\u4E0A\u5B89\u88C5 Node.js 18+"),
-        React.createElement("li", null, "\u90E8\u7F72\u96A7\u9053\u670D\u52A1\u7AEF\uFF0C\u63A8\u8350\u4F7F\u7528 frp \u6216\u517C\u5BB9 WebSocket \u7684\u53CD\u5411\u4EE3\u7406"),
-        React.createElement("li", null, "\u8BB0\u5F55\u670D\u52A1\u5668\u7684\u516C\u7F51\u57DF\u540D\uFF08\u5982 tunnel.example.com\uFF09\u548C\u8BBF\u95EE\u4EE4\u724C"),
-        React.createElement("li", null, "\u5728\u4E0B\u65B9\u586B\u5199 WebSocket \u5730\u5740\uFF08wss://...\uFF09\u548C\u4EE4\u724C\uFF0C\u4FDD\u5B58\u540E\u70B9\u5F00\u542F")
-      ),
-      React.createElement(
-        "div",
-        { style: { marginTop: 8, paddingTop: 8, borderTop: "1px solid var(--dsw-alias-border-l2,#e5e7eb)" } },
-        React.createElement("div", { style: { fontWeight: 500, marginBottom: 4, color: "var(--dsw-alias-label-primary,inherit)" } }, "\u5730\u5740\u683C\u5F0F"),
-        React.createElement(
-          "code",
-          { style: { ...s.code, display: "block", padding: "6px 8px", background: "var(--dsw-alias-bg-layer-2,#f3f4f6)", borderRadius: 6 } },
-          "wss://tunnel.example.com/connect"
-        )
-      )
-    )
+    React.createElement("a", {
+      href: TUNNEL_DOCS_URL,
+      target: "_blank",
+      rel: "noreferrer",
+      style: { ...s.btnGhost, fontSize: 12, height: 28, display: "inline-flex" }
+    }, "\u67E5\u770B\u81EA\u5EFA\u96A7\u9053\u670D\u52A1\u5668\u642D\u5EFA\u6559\u7A0B")
   );
 });
 var CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm2({ serverUrl: initUrl, accessToken: initToken, onSave }) {

package/client/index.js

@@ -4,6 +4,7 @@ import { BRIDGE_RPC_CHANNEL, BRIDGE_ENDPOINTS } from '../lib/bridge-rpc.js';
 
 const GITHUB_URL = 'https://github.com/wenbin-wb/dsh-bridge';
 const ISSUES_URL = 'https://github.com/wenbin-wb/dsh-bridge/issues/new';
+const TUNNEL_DOCS_URL = 'https://github.com/wenbin-wb/dsh-bridge/blob/main/docs/custom-tunnel.md';
 
 const name = 'dsh-bridge';
 const inject = ['slots', 'connection'];
@@ -25,17 +26,17 @@ function semverGt(a, b) {
 }
 
 const s = {
-  card:     { background: 'var(--dsw-alias-bg-layer-1,#fff)', border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', borderRadius: 12, padding: '16px 20px', marginBottom: 16 },
+  card:     { background: 'var(--dsw-alias-bg-layer-1,transparent)', border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', borderRadius: 12, padding: '16px 20px', marginBottom: 16 },
   block:    { borderTop: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', marginTop: 12, paddingTop: 12 },
   muted:    { color: 'var(--dsw-alias-label-tertiary,#8b93a1)', fontSize: 12, lineHeight: 1.5 },
-  label:    { color: 'var(--dsw-alias-label-primary,inherit)', fontSize: 13, fontWeight: 500 },
-  code:     { fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 12, wordBreak: 'break-all', color: 'var(--dsw-alias-label-primary,inherit)' },
+  label:    { color: 'var(--dsw-alias-label-primary,currentColor)', fontSize: 13, fontWeight: 500 },
+  code:     { fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 12, wordBreak: 'break-all', color: 'var(--dsw-alias-label-primary,currentColor)' },
   btnPri:   { font: 'inherit', cursor: 'pointer', border: 'none', background: 'var(--dsw-alias-button-primary-fill,var(--dsw-alias-brand-primary,#4f6ef7))', color: '#fff', height: 32, padding: '0 14px', borderRadius: 999, fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 4 },
-  btnGhost: { font: 'inherit', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2,#d1d5db)', background: 'var(--dsw-alias-bg-layer-1,#fff)', color: 'var(--dsw-alias-label-primary,inherit)', height: 32, padding: '0 14px', borderRadius: 999, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 4 },
+  btnGhost: { font: 'inherit', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2,#d1d5db)', background: 'var(--dsw-alias-bg-layer-1,transparent)', color: 'var(--dsw-alias-label-primary,currentColor)', height: 32, padding: '0 14px', borderRadius: 999, fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 4, textDecoration: 'none' },
   btnLink:  { font: 'inherit', cursor: 'pointer', border: 'none', background: 'none', color: 'var(--dsw-alias-brand-primary,#4f6ef7)', fontSize: 12, padding: 0, display: 'inline-flex', alignItems: 'center', gap: 3, textDecoration: 'none' },
   qr:       { width: 200, height: 200, borderRadius: 10, border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', margin: '8px 0', display: 'block' },
   tag:      { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: 999, fontSize: 12, fontWeight: 500 },
-  input:    { width: '100%', font: 'inherit', fontSize: 13, padding: '7px 10px', borderRadius: 8, border: '1px solid var(--dsw-alias-border-l2,#d1d5db)', background: 'var(--dsw-alias-bg-layer-1,#fff)', color: 'var(--dsw-alias-label-primary,inherit)', outline: 'none', boxSizing: 'border-box' },
+  input:    { width: '100%', font: 'inherit', fontSize: 13, padding: '7px 10px', borderRadius: 8, border: '1px solid var(--dsw-alias-border-l2,#d1d5db)', background: 'var(--dsw-alias-bg-layer-1,transparent)', color: 'var(--dsw-alias-label-primary,currentColor)', outline: 'none', boxSizing: 'border-box' },
   warn:     { background: 'var(--dsw-alias-state-warn-bg,#fffbeb)', border: '1px solid var(--dsw-alias-state-warn-border,#fde68a)', borderRadius: 8, padding: '10px 14px', fontSize: 12, color: 'var(--dsw-alias-state-warn-primary,#92400e)', lineHeight: 1.6 },
   tip:      { background: 'var(--dsw-alias-bg-layer-2,#f9fafb)', borderRadius: 8, padding: '10px 14px', fontSize: 12, color: 'var(--dsw-alias-label-secondary,#6b7280)', lineHeight: 1.6 },
 };
@@ -95,28 +96,13 @@ function QrBlock({ url, qr, onReset }) {
 }
 
 const CustomTunnelGuide = React.memo(function CustomTunnelGuide() {
-  const [open, setOpen] = React.useState(false);
-  const toggle = React.useCallback(() => setOpen(v => !v), []);
   return React.createElement('div', { style: s.block },
-    React.createElement('button', {
-      style: { ...s.btnGhost, fontSize: 12, height: 28, marginBottom: open ? 10 : 0 },
-      onClick: toggle,
-    }, open ? '▲ 收起搭建教程' : '▶ 如何搭建自建隧道服务器？'),
-    open && React.createElement('div', { style: s.tip },
-      React.createElement('div', { style: { fontWeight: 500, marginBottom: 6, color: 'var(--dsw-alias-label-primary,inherit)' } }, '搭建步骤'),
-      React.createElement('ol', { style: { margin: 0, paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 4 } },
-        React.createElement('li', null, '在公网服务器上安装 Node.js 18+'),
-        React.createElement('li', null, '部署隧道服务端，推荐使用 frp 或兼容 WebSocket 的反向代理'),
-        React.createElement('li', null, '记录服务器的公网域名（如 tunnel.example.com）和访问令牌'),
-        React.createElement('li', null, '在下方填写 WebSocket 地址（wss://...）和令牌，保存后点开启'),
-      ),
-      React.createElement('div', { style: { marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--dsw-alias-border-l2,#e5e7eb)' } },
-        React.createElement('div', { style: { fontWeight: 500, marginBottom: 4, color: 'var(--dsw-alias-label-primary,inherit)' } }, '地址格式'),
-        React.createElement('code', { style: { ...s.code, display: 'block', padding: '6px 8px', background: 'var(--dsw-alias-bg-layer-2,#f3f4f6)', borderRadius: 6 } },
-          'wss://tunnel.example.com/connect'
-        ),
-      ),
-    ),
+    React.createElement('a', {
+      href: TUNNEL_DOCS_URL,
+      target: '_blank',
+      rel: 'noreferrer',
+      style: { ...s.btnGhost, fontSize: 12, height: 28, display: 'inline-flex' },
+    }, '查看自建隧道服务器搭建教程'),
   );
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wenbin_wb/dsh-bridge",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "DSH 多渠道接入桥：局域网二维码、自建隧道、机器人集成",
   "type": "module",
   "main": "lib/index.js",