@mrrisega/dsh-remote 0.4.9 → 0.6.0-beta.0

package/packages/dsh-remote-web/test/remote-access-ui.test.mjs

@@ -0,0 +1,253 @@
+// 📱 远程访问 UI 回归（浏览器半）：一次性访问密钥卡、状态行、已授权设备管理与取消配对二次确认、
+// 升级/续费带登录态打开。复用 settings-entry 的 vm 沙箱 + mock react 风格，只驱动真实点击/请求路径。
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+import vm from "node:vm";
+
+const SOURCE = readFileSync(new URL("../lib/client.js", import.meta.url), "utf8");
+
+/** 深度遍历：兼容任意层级的数组子节点（card()/多级数组渲染会形成多层嵌套）。 */
+function walk(node, visit) {
+  if (node == null) return;
+  if (Array.isArray(node)) { for (const item of node) walk(item, visit); return; }
+  if (typeof node !== "object") return;
+  visit(node);
+  for (const child of node.children || []) walk(child, visit);
+}
+
+function find(tree, predicate) {
+  let match;
+  walk(tree, (node) => { if (!match && predicate(node)) match = node; });
+  return match;
+}
+
+/** 文本子节点包含子串（用于动态拼接文案断言）。 */
+function textHas(tree, substr) {
+  return !!find(tree, (node) => (node.children || []).some((c) => typeof c === "string" && c.includes(substr)));
+}
+
+const NOW = Date.now();
+const KEY_URL = "https://app.test/a/K1";
+const SESSIONS_1 = [
+  { id: "ms_1", label: "iPhone 15", os: "iOS", browser: "Safari", created_at: NOW - 86400000, last_seen_at: NOW - 60000, revoked_at: null },
+  { id: "ms_2", label: "Pixel 8", os: "Android", browser: "Chrome", created_at: NOW - 3600000, last_seen_at: null, revoked_at: NOW - 1800000 },
+];
+
+/** vm 加载 client.js 并 apply；fetch 可注入企业端同源代理响应。 */
+function loadPlugin(opts = {}) {
+  let moduleFactory;
+  const registered = new Map();
+  const injects = new Map();
+  const requests = [];
+  const opened = [];
+  const states = [];
+  let hook = 0;
+  let sessionsCalls = 0;
+
+  const react = {
+    createElement(type, props, ...children) { return { type, props: props || {}, children }; },
+    useState(initial) {
+      const index = hook++;
+      if (!(index in states)) states[index] = initial;
+      return [states[index], (value) => { states[index] = typeof value === "function" ? value(states[index]) : value; }];
+    },
+    useEffect() {},
+    useCallback(fn) { return fn; },
+    useSyncExternalStore(_subscribe, getSnapshot) { return getSnapshot(); },
+  };
+
+  const response = (status, body) => Promise.resolve({
+    ok: status >= 200 && status < 300,
+    status,
+    text: async () => JSON.stringify(body),
+  });
+
+  const allCreated = [];
+  const makeEl = (tag) => ({
+    tag,
+    children: [],
+    style: {},
+    className: "",
+    attributes: {},
+    setAttribute(k, v) { this.attributes[k] = v; },
+    appendChild(c) { this.children.push(c); },
+  });
+  const doc = {
+    createElement(tag) { const el = makeEl(tag); allCreated.push(el); return el; },
+    head: makeEl("head"),
+    body: makeEl("body"),
+    querySelector() { return null; },
+    querySelectorAll() { return []; },
+  };
+  class MutationObserverMock { constructor() {} observe() {} disconnect() {} }
+
+  const localStorage = {
+    _store: new Map(),
+    getItem(k) { return this._store.has(k) ? this._store.get(k) : null; },
+    setItem(k, v) { this._store.set(k, String(v)); },
+    removeItem(k) { this._store.delete(k); },
+  };
+
+  const sandbox = {
+    window: {
+      __ModuleLoader__: { load(spec) { moduleFactory = spec.factory; } },
+      open(url) { opened.push(url); return null; },
+    },
+    document: doc,
+    localStorage,
+    MutationObserver: MutationObserverMock,
+    navigator: { clipboard: { writeText: async () => {} } },
+    fetch(path, options = {}) {
+      requests.push({ path, method: options.method || "GET", body: options.body ? JSON.parse(options.body) : null });
+      if (path === "/dsh-remote/status") {
+        return response(200, { ok: true, config: { phone: "13800000000", deviceId: "dev-x", mode: "saas" }, service: { running: true }, remoteUrl: "https://app.test/" });
+      }
+      if (path === "/dsh-remote/access-key") {
+        return response(200, { ok: true, url: KEY_URL, key: "K1", expires_at: NOW + 30 * 60 * 1000, ttl_ms: 1800000, qr_data_url: "data:image/png;base64,AAAA" });
+      }
+      if (path === "/dsh-remote/mobile-sessions") {
+        sessionsCalls++;
+        return response(200, { ok: true, sessions: sessionsCalls === 1 ? SESSIONS_1 : [] }); // 取消配对后的刷新 → 空列表
+      }
+      if (path === "/dsh-remote/mobile-sessions/revoke") {
+        return response(200, { ok: true });
+      }
+      if (path === "/dsh-remote/account") return response(200, { ok: true, account: { phone: "13800000000", plan: "free", plan_source: "plan", invite_code: "ABC12345" } });
+      return response(200, { ok: true });
+    },
+    setInterval() { return 1; },
+    clearInterval() {},
+    setTimeout() { return 1; },
+    Set,
+    Symbol,
+  };
+
+  vm.runInNewContext(SOURCE, sandbox);
+  const plugin = moduleFactory((name) => {
+    assert.equal(name, "react");
+    return react;
+  });
+  plugin.apply({ slots: {
+    inject(name, cb) { injects.set(name, cb); cb(); },
+    register(meta, component) { registered.set(meta.id, component); return () => {}; },
+  } });
+
+  return {
+    registered,
+    requests,
+    opened,
+    states,
+    render() { hook = 0; return registered.get("dsh-remote")({ close() {} }); },
+  };
+}
+
+const flush = () => new Promise((resolve) => setImmediate(resolve));
+
+test("📱 远程访问卡：bridge 在线 → 绿点文案；登录态点「生成访问链接」→ url/复制/直接打开/二维码/倒计时齐备", async () => {
+  const plugin = loadPlugin();
+  plugin.states[0] = { config: { phone: "13800000000", deviceId: "dev-x" }, service: { running: true } };
+  let tree = plugin.render();
+
+  // 状态行：bridge 运行 → “已连接（可远程访问）”
+  assert.ok(textHas(tree, "已连接（可远程访问）"), "bridge 在线状态文案应显示");
+  assert.ok(find(tree, (n) => n.children?.includes("📱 远程访问")), "应渲染「📱 远程访问」卡标题");
+
+  // 未生成 key 的空态按钮 → 点击触发 /dsh-remote/access-key
+  const genBtn = find(tree, (n) => (n.children || []).some((c) => typeof c === "string" && c.includes("生成访问链接")));
+  assert.ok(genBtn, "应提供「生成访问链接」按钮");
+  genBtn.props.onClick();
+  await flush();
+  await flush();
+
+  tree = plugin.render();
+  assert.ok(plugin.requests.some((r) => r.path === "/dsh-remote/access-key" && r.method === "GET"), "应 GET /dsh-remote/access-key");
+  // 大字地址 + 复制 + 直接打开 + 刷新按钮
+  assert.ok(find(tree, (n) => n.children?.includes(KEY_URL)), "应展示一次性访问地址");
+  assert.ok(find(tree, (n) => n.children?.includes("复制")), "应提供「复制」按钮");
+  assert.ok(find(tree, (n) => n.children?.includes("直接打开")), "应提供「直接打开」按钮");
+  assert.ok(find(tree, (n) => n.children?.includes("刷新二维码/访问链接")), "应提供手动刷新按钮");
+  // 二维码 img 直取服务端 qr_data_url（客户端不自绘）
+  const qr = find(tree, (n) => n.props?.src === "data:image/png;base64,AAAA");
+  assert.ok(qr && qr.props?.alt === "远程访问二维码", "应渲染服务端返回的二维码 <img>");
+  // 到期倒计时/有效至文案
+  assert.ok(textHas(tree, "有效至") && textHas(tree, "剩余"), "应显示「有效至 HH:MM:SS / 剩余 xx:xx」倒计时");
+  assert.ok(textHas(tree, "访问一次后失效"), "应说明一次性/30 分钟语义");
+});
+
+test("已授权设备：展开列表（label/os/browser/时间）→ 取消配对二次确认 → 成功提示并刷新", async () => {
+  const plugin = loadPlugin();
+  plugin.states[0] = { config: { phone: "13800000000", deviceId: "dev-x" }, service: { running: true } };
+  let tree = plugin.render();
+
+  // 展开：按钮「已授权设备 …」→ GET /dsh-remote/mobile-sessions
+  const openBtn = find(tree, (n) => typeof n.props?.onClick === "function" && (n.children || []).some((c) => typeof c === "string" && c.includes("已授权设备")));
+  assert.ok(openBtn, "应提供「已授权设备 N」按钮");
+  openBtn.props.onClick();
+  await flush();
+  await flush();
+
+  tree = plugin.render();
+  assert.ok(plugin.requests.some((r) => r.path === "/dsh-remote/mobile-sessions"), "展开应拉取已授权设备列表");
+  assert.ok(textHas(tree, "iPhone 15"), "列表应显示设备 label");
+  assert.ok(textHas(tree, "iOS · Safari"), "列表应显示 os/browser");
+  assert.ok(textHas(tree, "已取消配对"), "revoked 设备应带「已取消配对」标记");
+  assert.ok(textHas(tree, "首次配对"), "应显示配对时间");
+
+  // 取消配对：第一次点击进入确认态（不请求）
+  const revokeBtn = find(tree, (n) => typeof n.props?.onClick === "function" && (n.children || []).some((c) => typeof c === "string" && c.includes("取消配对")));
+  assert.ok(revokeBtn, "行尾应有「取消配对」按钮");
+  revokeBtn.props.onClick();
+  tree = plugin.render();
+  assert.ok(textHas(tree, "再点一次确认取消配对"), "二次确认文案应出现");
+  assert.ok(!plugin.requests.some((r) => r.path === "/dsh-remote/mobile-sessions/revoke"), "首次点击不应发请求");
+
+  // 第二次点击 → POST revoke {id} → 提示 + 刷新列表（空）
+  find(tree, (n) => typeof n.props?.onClick === "function" && (n.children || []).some((c) => typeof c === "string" && c.includes("再点一次确认取消配对"))).props.onClick();
+  await flush();
+  await flush();
+  await flush();
+
+  const rev = plugin.requests.find((r) => r.path === "/dsh-remote/mobile-sessions/revoke");
+  assert.ok(rev, "确认后应 POST /dsh-remote/mobile-sessions/revoke");
+  assert.deepEqual(rev.body, { id: "ms_1" });
+  tree = plugin.render();
+  assert.ok(textHas(tree, "已取消，对方需重新扫码/登录"), "应提示已取消，对方需重新扫码/登录");
+  assert.ok(textHas(tree, "暂无已授权设备（手机扫码后出现）"), "刷新后空态文案应出现");
+});
+
+test("升级/续费按钮：点击 → GET /dsh-remote/access-key → window.open(url)（带登录态打开）", async () => {
+  const plugin = loadPlugin();
+  plugin.states[0] = { config: { phone: "13800000000", deviceId: "dev-x" }, service: { running: true } };
+  let tree = plugin.render();
+
+  const upgrade = find(tree, (n) => (n.children || []).some((c) => typeof c === "string" && c.includes("升级 PRO")));
+  assert.ok(upgrade, "免费用户应显示「🚀 升级 PRO」按钮");
+  upgrade.props.onClick();
+  await flush();
+  await flush();
+
+  assert.ok(plugin.requests.some((r) => r.path === "/dsh-remote/access-key"), "升级/续费应先取一次性访问 url");
+  assert.ok(plugin.opened.includes(KEY_URL), "应以 window.open 打开一次性访问地址（带登录态）");
+  assert.ok(textHas(plugin.render(), "带登录态"), "应出现「带登录态」说明文案");
+});
+
+test("二维码缺失容错 + 未登录引导文案（源码级约束）", () => {
+  // 契约容错：qr_data_url 缺省 → 展示链接/复制/打开并说明“二维码暂不可用”，不报错
+  assert.match(SOURCE, /二维码生成中 \/ 暂不可用/);
+  assert.match(SOURCE, /qr_data_url/);
+  assert.match(SOURCE, /window\.open/);
+  // 自动刷新/状态轮询定时器与清理
+  assert.match(SOURCE, /KEY_AUTO_REFRESH_MS = 25000/);
+  assert.match(SOURCE, /STATUS_POLL_MS = 5000/);
+  assert.match(SOURCE, /clearInterval\(rotateIv\)/);
+  assert.match(SOURCE, /clearInterval\(pollIv\)/);
+  // 文案与行为关键词
+  assert.match(SOURCE, /已取消，对方需重新扫码\/登录/);
+  assert.match(SOURCE, /再点一次确认取消配对/);
+  assert.match(SOURCE, /暂无已授权设备（手机扫码后出现）/);
+  assert.match(SOURCE, /等待设备连接/);
+  assert.match(SOURCE, /已连接（可远程访问）/);
+  assert.match(SOURCE, /带登录态/);
+  assert.match(SOURCE, /通过手机或另一台电脑远程使用同一份 dsh web/);
+});

package/packages/{dsh-remote-ui → dsh-remote-web}/test/settings-entry.test.mjs

@@ -1,4 +1,4 @@
-// dsh-remote-ui 浏览器半回归：面板入口迁移进「设置」页 settings.section 官方扩展点。
+// dsh-remote-web 浏览器半回归（2026-09 前名 dsh-remote-ui）：面板入口迁移进「设置」页 settings.section 官方扩展点。
 // 覆盖：栏目注册（id/order/label）、侧边栏入口与浮动面板移除、账号区无「切换账号」、
 // 「关于 dsh-remote」说明卡片、退出登录/切换连接账号清理反馈线程凭据、首次安装红点引导。
 import assert from "node:assert/strict";
@@ -23,6 +23,11 @@ function find(tree, predicate) {
   return match;
 }
 
+/** 任意文本子节点包含子串（用于动态拼接文案，如「已授权设备 N」）。 */
+function textHas(tree, substr) {
+  return !!find(tree, (node) => (node.children || []).some((c) => typeof c === "string" && c.includes(substr)));
+}
+
 /** 极简 DOM 元素假件（够 client.js 的红点注入用）。 */
 function makeEl(tag) {
   return {
@@ -158,7 +163,7 @@ test("入口迁移：注册 settings.section 栏目（id/order/label），移除
   // 不再注入侧边栏入口槽
   assert.equal(plugin.injects.has("sidebar.footer.action"), false, "侧边栏入口槽不应再注入");
 
-  // settings.section 官方扩展点：id=dsh-remote、order=30（> Agent 预设 20，位于其下方）、label=🖥 远程控制
+  // settings.section 官方扩展点：id=dsh-remote、order=30（> Agent 预设 20，位于其下方）、label=📱 远程访问
   assert.ok(plugin.injects.has("settings.section"), "应注入 settings.section 扩展点");
   const disposeSection = plugin.injects.get("settings.section")();
   assert.equal(typeof disposeSection, "function", "register 应返回 disposer");
@@ -168,8 +173,9 @@ test("入口迁移：注册 settings.section 栏目（id/order/label），移除
   assert.equal(meta.order, 30);
   assert.equal(typeof meta.label, "function");
   const label = meta.label();
-  assert.ok(String(label).includes("远程控制"), `栏目名应含「远程控制」，实际: ${label}`);
-  assert.ok(String(label).includes("🖥"), "栏目名应带 🖥 通用远程控制图标");
+  assert.ok(String(label).includes("远程访问"), `栏目名应含「远程访问」，实际: ${label}`);
+  assert.ok(String(label).includes("📱"), "栏目名应带 📱 远程访问图标（手机访问语义）");
+  assert.ok(!String(label).includes("远程控制"), "栏目名不应再残留旧称「远程控制」");
 
   // shell.overlay 仅保留满意度弹窗，浮动面板已移除
   assert.ok(plugin.injects.has("shell.overlay"));
@@ -178,22 +184,26 @@ test("入口迁移：注册 settings.section 栏目（id/order/label），移除
   assert.equal(plugin.registered.has("dsh-remote-panel"), false, "浮动配置面板不应再注册");
 });
 
-test("登录态账号区：无「切换账号」，有「退出登录」，关于卡片文案完整", () => {
+test("登录态账号区：无「切换账号」，有「退出登录」，头部/关于卡文案为「远程访问」", () => {
   const plugin = loadPlugin();
   plugin.states[0] = { config: { phone: "13800000000", deviceId: "dev-test" }, service: { running: false } };
   let tree = plugin.renderSection();
 
+  // 栏目头部：标题「远程访问」+ 副文案（人在哪都能用，免公网 IP）
+  assert.ok(find(tree, (n) => n.children?.includes("远程访问")), "头部标题应为「远程访问」");
+  assert.ok(find(tree, (n) => n.children?.includes("通过手机或另一台电脑远程使用同一份 dsh web，人在哪都能用（免公网 IP）")), "应渲染新副文案（人在哪都能用，免公网 IP）");
+
   // 账号区按钮
   assert.ok(find(tree, (n) => n.children?.includes("退出登录")), "应保留「退出登录」");
   assert.ok(!find(tree, (n) => n.children?.includes("切换账号")), "「切换账号」按钮应移除");
 
-  // 关于 dsh-remote 说明卡片（面板底部，4 条要点）
+  // 关于 dsh-remote 说明卡片（面板底部，v0.5+ 价值要点）
   assert.ok(find(tree, (n) => n.children?.includes("📖 关于 dsh-remote")), "应渲染「关于 dsh-remote」卡片标题");
   const points = [
-    "① 为什么推荐用 SaaS：不用自己买服务器、不用折腾部署，装好客户端就能用，最省心。",
-    "② 会员费去向：付的是网络带宽/服务器成本，也是给开发者的合理支持，让项目持续维护。",
-    "③ 也可以自建：项目完全开源，有服务器可自行部署，流量走自己的服务器，闭环自控。",
-    "④ 一句话总结：简单省心用 SaaS，技术玩家可自建。",
+    "📱 远程访问：用手机或另一台电脑的浏览器，随时随地使用同一份 dsh web——人在哪都能用（免公网 IP、免内网穿透）；官方托管中继，4G/5G 即用，也可自建服务。",
+    "🛠 电脑端一键安装：bridge 与「远程访问」面板一次到位——云端/自建切换、账号登录、bridge 启停、一次性扫码访问、已授权设备管理、意见反馈都在这里。",
+    "🔒 安全与通道：HTTP / WebSocket 全量透传，一次性访问密钥认证，面板实时显示设备与已授权设备列表；服务端可配置流量配额。",
+    "🛡 端到端流量保护：可选对通道做端到端加密保护，传输全程不暴露本机公网 IP（详见项目 README「安全」说明）。",
   ];
   for (const p of points) {
     assert.ok(find(tree, (n) => n.children?.includes(p)), `说明卡片应含要点: ${p.slice(0, 12)}…`);
@@ -202,6 +212,10 @@ test("登录态账号区：无「切换账号」，有「退出登录」，关
   // 面板主体仍在（连接模式 tab 不受影响）
   assert.ok(find(tree, (n) => n.children?.includes("☁️ 云端服务")), "云端服务 tab 应保留");
   assert.ok(find(tree, (n) => n.children?.includes("🖥 自建服务")), "自建服务 tab 应保留");
+
+  // 📱 远程访问卡 / 📲 已授权设备卡在云端视图中渲染（bridge 未运行 → “等待设备连接”）
+  assert.ok(find(tree, (n) => n.children?.includes("等待设备连接")), "无 bridge 时应显示「等待设备连接」状态行");
+  assert.ok(textHas(tree, "已授权设备"), "应渲染「已授权设备」管理按钮");
 });
 
 test("退出登录清除用户反馈线程凭据（localStorage dsh-feedback-threads）", async () => {
@@ -223,7 +237,7 @@ test("首次安装红点：设置页导航栏目出现后注入，点击后写 k
   const navCells = [];
   const navCell = makeEl("button");
   navCell.className = "VOzbGW_navCell"; // shell hashed 类名（含 navCell 子串）
-  navCell.textContent = "🖥 远程控制";
+  navCell.textContent = "📱 远程访问";
   const plugin = loadPlugin({ navCells });
 
   // apply 时设置页未打开：观察器就位、无红点
@@ -255,7 +269,7 @@ test("红点已看过（localStorage 有 key）时不注入，重启 DSH Web 不
   const navCells = [];
   const navCell = makeEl("button");
   navCell.className = "VOzbGW_navCell";
-  navCell.textContent = "🖥 远程控制";
+  navCell.textContent = "📱 远程访问";
   navCells.push(navCell);
   // 预置 seen key（模拟“首次点击后重启”）
   const plugin = loadPlugin({ navCells, localStorageSeed: { "dsh-remote-seen-dot": "1" } });
@@ -263,17 +277,22 @@ test("红点已看过（localStorage 有 key）时不注入，重启 DSH Web 不
   assert.equal(navCell.children.length, 0, "已看过时不应再注入红点");
 });
 
-test("源码约束：无侧边栏入口/浮动面板/切换账号；登录与自建切换也清理线程凭据", () => {
+test("源码约束：无侧边栏入口/浮动面板/切换账号；命名统一为「远程访问」；新增访问密钥/设备路由", () => {
   // 只断言“代码形态”不存在（注释里允许出现说明文字）
   assert.doesNotMatch(SOURCE, /slots\.inject\("sidebar\.footer\.action"/);
   assert.doesNotMatch(SOURCE, /dru-backdrop\{/);
   assert.doesNotMatch(SOURCE, /切换账号/);
   assert.doesNotMatch(SOURCE, /dsh-remote-panel/);
+  assert.doesNotMatch(SOURCE, /远程控制/);   // 旧称呼「远程控制」不再出现（含 label/头部/说明）
   assert.match(SOURCE, /settings\.section/);
   assert.match(SOURCE, /dsh-remote-seen-dot/);
   assert.match(SOURCE, /fbClearThreads/);
   assert.match(SOURCE, /关于 dsh-remote/);
-  assert.match(SOURCE, /简单省心用 SaaS/);
+  assert.match(SOURCE, /免公网 IP/);           // 关于卡 v0.5+ 价值要点
+  assert.match(SOURCE, /端到端/);
+  assert.match(SOURCE, /已授权设备/);
+  assert.match(SOURCE, /dsh-remote\/access-key/);
+  assert.match(SOURCE, /dsh-remote\/mobile-sessions/);
   assert.match(SOURCE, /order: 30/);
   // 清理时机：退出登录成功回调内、登录账号变化时、切换自建服务时
   assert.match(SOURCE, /post\("\/dsh-remote\/logout"\)\.then\(function \(body\) \{[\s\S]*?fbClearThreads\(\);/);