@feiyang666/dsh-mobile-remote 1.7.0 → 1.7.1-1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 更新日志 / Changelog
 
+## v1.7.1-1 (2026-08-29) — 预发布（beta，供前端测试）
+
+### 新增 / New
+- **外网访问面板显示数据通道状态**（`lib/index.js` + `lib/client.js`）：`/status` 新增 `external.ws` 字段（`available` = ws 依赖是否可用 / `connected` = WS 长连接是否建立 / `source` = 当前数据来源 `ws` | `http` | `none` / `lastPushAt` = 最后推送时刻），设置页「外网访问」卡片新增「数据通道」行徽标，让用户一眼看清当前是 **WS 实时推送**（绿色）、**HTTP 兜底（退让模式）**（未安装 ws 依赖）、**WS 已连接等待推送**、**WS 已断开 / 重连中**（含最后推送时间）中的哪一种。
+- **运行时长本地每秒刷新**（`lib/client.js`）：`runtimeInfo()` 增加采集时刻 `at`，前端新增 `LiveDuration` 组件——基于「采样秒数 + 采集时刻」在浏览器本地每秒累加，让「运行时长 / 开机时长 / 隧道已运行」等秒级数字每秒跳动（秒表效果），不再依赖 5s 的 `/status` 轮询刷新（此前数字每 5s 才跳一次且跳幅不连续）。
+
+### 变更 / Changed
+- 无 API 破坏；旧版 host / 新版 client 混用时，缺少 `at` / `ws` 字段会自动降级为原行为（数字按轮询刷新、不显示数据通道行）。
+
 ## v1.7.0 (2026-08-28)
 
 ### 新增 / New

package/lib/client.js

@@ -225,6 +225,23 @@ window.__ModuleLoader__.load({
       return ss + ' 秒';
     }
 
+    // 实时时长组件：基于「一次采样的秒数 + 采集时刻」在浏览器本地每秒累加刷新，
+    // 让"运行时长 / 开机时长 / 隧道已运行"等秒级数字每秒跳动（秒表效果），
+    // 不再依赖 5s 的 /status HTTP 轮询（那会导致数字每 5s 才跳一次，且跳幅不连续）。
+    // 只要 host 在采集时带上 at 时间戳，两次 /status 之间也能精确走到下一秒。
+    function LiveDuration(props) {
+      var _n = useState(Date.now());
+      var now = _n[0];
+      var setNow = _n[1];
+      useEffect(function () {
+        var t = setInterval(function () { setNow(Date.now()); }, 1000);
+        return function () { clearInterval(t); };
+      }, []);
+      var at = props.at || now;
+      var sec = props.baseSec + Math.max(0, Math.floor((now - at) / 1000));
+      return fmtDuration(sec);
+    }
+
     function fmtBytes(b) {
       if (b === null || b === undefined) return '—';
       var n = Number(b);
@@ -405,6 +422,32 @@ window.__ModuleLoader__.load({
       // 后端探测到的错误（如鉴权失败 / token 不匹配），优先于请求时的临时错误
       var extErrText = extErr || (extError && status && status.external && status.external.error ? status.external.error : null);
 
+      // ---- WS 状态推送通道（host 连接中转服务器的数据通道）----
+      // 让用户明确看到当前外网状态数据是经 WS 长连接实时推送，还是退让为 HTTP 低频轮询。
+      var wsInfo = status && status.external && status.external.ws ? status.external.ws : null;
+      var wsBadge = null;
+      var wsHint = null;
+      if (extStarted && wsInfo) {
+        if (wsInfo.connected && wsInfo.source === 'ws') {
+          wsBadge = el('span', { style: Object.assign({}, st.badge, st.badgeOn) }, 'WS 实时推送');
+          wsHint = '隧道状态经 WebSocket 长连接实时更新（零 HTTP 轮询）';
+        } else if (wsInfo.available === false) {
+          // 退让版本：ws 依赖缺失（如离线安装），WS 客户端 no-op，走 HTTP 低频兜底
+          wsBadge = el('span', { style: Object.assign({}, st.badge, st.badgeBusy) }, 'HTTP 兜底（退让模式）');
+          wsHint = '未安装 ws 依赖，已自动退让为 HTTP 低频查询（60s 节流），功能不受影响';
+        } else if (wsInfo.connected) {
+          wsBadge = el('span', { style: Object.assign({}, st.badge, st.badgeBusy) }, 'WS 已连接，等待推送');
+          wsHint = 'WS 长连接已建立，收到首条推送后自动切换为实时模式';
+        } else if (wsInfo.source === 'ws') {
+          wsBadge = el('span', { style: Object.assign({}, st.badge, st.badgeBusy) }, 'WS 已断开');
+          wsHint = 'WS 长连接已断开，正在自动重连；当前显示最近一次推送的缓存数据' +
+            (wsInfo.lastPushAt ? '（最后推送 ' + fmtAgo(wsInfo.lastPushAt) + '）' : '');
+        } else {
+          wsBadge = el('span', { style: Object.assign({}, st.badge, st.badgeBusy) }, 'WS 未连接');
+          wsHint = 'WS 长连接尚未建立（连接中 / 自动重连），期间数据走 HTTP 兜底';
+        }
+      }
+
       function externalStart() {
         if (extBusy || extConnecting) return;
         if (!bindCode || !bindCode.trim()) {
@@ -730,8 +773,8 @@ window.__ModuleLoader__.load({
                 el('span', { style: Object.assign({}, st.badge, st.badgeOff) },
                   'PID ' + status.runtime.pid)),
               el('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } }, kvList([
-                ['运行时长', fmtDuration(status.runtime.uptime)],
-                ['开机时长', fmtDuration(status.runtime.sysUptime)],
+                ['运行时长', el(LiveDuration, { baseSec: status.runtime.uptime || 0, at: status.runtime.at })],
+                ['开机时长', el(LiveDuration, { baseSec: status.runtime.sysUptime || 0, at: status.runtime.at })],
                 ['Node.js', status.runtime.nodeVersion],
                 ['主机名', status.runtime.hostname],
                 ['系统', (status.runtime.platform || '—') + ' ' + (status.runtime.release || '') + ' (' + (status.runtime.arch || '—') + ')'],
@@ -857,8 +900,16 @@ window.__ModuleLoader__.load({
                   el('span', { style: st.meta },
                     'frpc 进程：' + (status.external.pid ? 'PID ' + status.external.pid : '—')),
                   status.external.startedAt
-                    ? el('span', { style: st.meta }, '已运行 ' + fmtDuration(Math.floor((Date.now() - status.external.startedAt) / 1000)))
+                    ? el('span', { style: st.meta }, '已运行 ',
+                        el(LiveDuration, { baseSec: 0, at: status.external.startedAt }))
                     : null),
+                wsBadge
+                  ? el('div', { style: st.row },
+                      el('span', { style: st.meta }, '数据通道'),
+                      el('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 } },
+                        wsBadge,
+                        wsHint ? el('span', { style: st.hint }, wsHint) : null))
+                  : null,
                 el('div', { style: st.row },
                   el('span', { style: st.meta },
                     '绑定码：' + (status.external.bindCodeShort || '—')),

package/lib/index.js

@@ -43,6 +43,7 @@ import {
   hasPassword, verifyPassword, setPassword,
   isEnabled, login, verifyToken, revokeToken, clearSessions,
 } from './password.js'
+import { wsAvailable } from './ws-client.js'
 
 /** 插件名（loader 诊断用）。 */
 export const name = 'dsh-mobile-remote'
@@ -214,11 +215,14 @@ function getLanInterfaces() {
 
 /** 当前进程运行时信息（诊断用，设置页展示）。 */
 function runtimeInfo() {
+  // 采集时刻：前端可据此在两次 /status 轮询之间本地累加，让"运行时长"每秒跳动。
+  const at = Date.now()
   const mem = process.memoryUsage()
   const cpu = cpus()
   const load = loadavg()
   const total = totalmem()
   return {
+    at,
     pid: process.pid,
     hostname: hostname(),
     platform: platform(),
@@ -741,9 +745,18 @@ function handleStatus(ctx, devices, external, tracker, dshCache) {
     // 外网隧道在线时，优先读 WS 推送缓存（经长连接实时更新，零中转服务器请求）；
     // 仅当从未收到推送（ws 依赖缺失 / WS 未建立）时才回退 HTTP 低频查询（60s 节流）。
     let server = null
+    let serverSource = 'none'
     if (extRunning && persisted) {
-      server = external.serverStatus || await queryServerStatus(persisted.serverBase || undefined, persisted.bindCode)
+      if (external.serverStatus) {
+        server = external.serverStatus
+        serverSource = 'ws'
+      } else {
+        server = await queryServerStatus(persisted.serverBase || undefined, persisted.bindCode)
+        serverSource = 'http'
+      }
     }
+    // WS 长连接是否已建立（供前端判断当前处于"实时推送"还是"退让/重连"）
+    const wsConnected = !!(external.wsClient && external.wsClient.isOpen())
     json(res, 200, {
       host: ctx.webServer.host,
       port: ctx.webServer.port,
@@ -785,6 +798,19 @@ function handleStatus(ctx, devices, external, tracker, dshCache) {
           : null,
         // 中转服务器返回的成员状态（外网在线时才有）
         server,
+        // WS 状态推送通道信息：让前端明确当前数据是 WS 实时推送还是 HTTP 兜底退让
+        ws: {
+          // ws 依赖是否可用（离线安装未带依赖时为 false，自动退让 HTTP）
+          available: wsAvailable(),
+          // WS 长连接是否已建立
+          connected: wsConnected,
+          // 当前 server 数据来源：'ws'（实时推送缓存）/ 'http'（兜底查询）/ 'none'
+          source: serverSource,
+          // 最近一次收到 WS 推送的时刻（未收到过为 null）
+          lastPushAt: external.serverStatus && external.serverStatus._at
+            ? external.serverStatus._at
+            : null,
+        },
       },
       // 远程访问密码门禁状态（供设置面板展示）
       auth: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feiyang666/dsh-mobile-remote",
-  "version": "1.7.0",
+  "version": "1.7.1-1",
   "description": "DeepSeek Harness mobile remote-control plugin: LAN/external remote control (QR / on-off toggle / remote-access password gate), rich telemetry (expandable device details, system CPU/memory/load, DSH app state: version/sessions/workspaces/plugins/models), real external-tunnel status detection (frpc token / reconnect diagnostics), mobile-first UI polish (composer image upload entry via system picker, settings single-column layout) and faster remote loading.",
   "keywords": [
     "deepseek",