@ponydev/dsh-phone 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.0 — 2026-10-24
+
+### 新增
+- 打开手机面板自动进入预览：优先本会话上次使用的设备（localStorage 按 sessionId 记忆），否则第一台在线设备
+- 顶部清晰度右侧显示实时 **FPS** 和 **adb 往返延迟**（每 5s 探测一次）
+- 没有可用设备时，居中空态 + 「+ 连接设备」按钮
+
+### 变更
+- 「设备列表」仍可从左上角设备下拉进入；自动进入只发生在面板首次挂载
+
+## 0.2.2 — 2026-10-24
+
+### 修复
+- 客户端 bundle 的 `__ModuleLoader__` id 从 `dsh-phone` 改为 `@ponydev/dsh-phone`，修复迁移后 client-modules 报 “loaded without registering” 导致插件加载失败
+
 ## 0.2.1 — 2026-10-24
 
 ### 变更

package/README.md

@@ -15,7 +15,7 @@ DSH Web 插件：在右侧栏预览已连接的 Android 设备，点画面就是
 
 - **会话头部手机图标**：点一下展开右侧栏，角标显示在线设备数。
 - **设备列表**：平铺一列，不按手机类型分组；图标按设备系统显示（Android / HarmonyOS / iOS），旁边两个小标签分别标连接方式（USB / Wi-Fi / Tailscale / emulator）和系统（Android / HarmonyOS / iOS），状态点区分 `device` / `unauthorized` / `offline` / `已保存`。
-- **预览**：H.264 流（`screenrecord` → WebCodecs → canvas），约 20–30fps；不支持 WebCodecs 时自动回退截图轮询。设备画面按右侧栏高度等比缩放，带机身 bezel。
+- **预览**：H.264 流（`screenrecord` → WebCodecs → canvas），约 20–30fps；不支持 WebCodecs 时自动回退截图轮询。打开面板会自动进入预览（本会话上次设备 → 第一台在线设备）。
 - **点按**：点击 = `tap`，拖拽 = `swipe`（坐标按 `wm size` 的设备像素换算，和流分辨率无关）。
 - **操作栏**：底部是「返回 / 主页 / 多任务 | 截图」，顶部只有设备下拉、旋转、更多。
 - **连接**：`adb connect <ip>:<port>`（无线调试、Tailscale 云手机）；连接过的目标自动记到 `$DSH_HOME/phone/targets.json`，未连接时也显示在列表里，点一下就直接连。

package/lib/adb.js

@@ -285,6 +285,15 @@ export class Adb {
     }
   }
 
+  /** 一次最小 adb round-trip，用来估算设备/网络延迟（ms）。 */
+  async ping(serial) {
+    await this.assertReady(serial)
+    const started = process.hrtime.bigint()
+    await this._run(['-s', serial, 'shell', 'echo', 'ok'], { timeout: 5000 })
+    const ms = Number(process.hrtime.bigint() - started) / 1e6
+    return { ms: Math.round(ms), at: Date.now() }
+  }
+
   /** 系统平台（android / harmony），getprop 读一次缓存 5 分钟。 */
   async platform(serial) {
     const cached = this._platforms.get(serial)

package/lib/client.js

@@ -4,7 +4,7 @@
 // - 画面：轮询 /phone/shot（PNG），点击 = tap，拖拽 = swipe
 // - 没有分辨率/网速元数据栏，没有文字输入框
 window.__ModuleLoader__.load({
-  id: 'dsh-phone',
+  id: '@ponydev/dsh-phone',
   factory(require) {
     const React = require('react')
     const h = React.createElement
@@ -127,6 +127,10 @@ window.__ModuleLoader__.load({
 .dph-select .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .dph-quality{height:28px;padding:0 10px;border:1px solid var(--dsw-alias-border-l1,#e9e9ec);border-radius:999px;background:transparent;color:var(--dsw-alias-label-secondary,#6f6f76);font-size:11.5px;cursor:pointer;flex:none}
 .dph-quality:hover{background:var(--dsw-alias-bg-layer-2,#f4f4f5);color:var(--dsw-alias-label-primary,#17171a)}
+.dph-perf{font-size:11px;color:var(--dsw-alias-label-tertiary,#9a9aa1);white-space:nowrap;margin-left:2px;font-variant-numeric:tabular-nums}
+.dph-empty{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;color:var(--dsw-alias-label-tertiary,#9a9aa1)}
+.dph-empty-icon{color:var(--dsw-alias-label-tertiary,#9a9aa1);opacity:.7}
+.dph-empty-title{font-size:13px;color:var(--dsw-alias-label-secondary,#6f6f76)}
 .dph-select .chev{color:var(--dsw-alias-label-tertiary,#9a9aa1);flex:none}
 .dph-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
 
@@ -389,6 +393,7 @@ window.__ModuleLoader__.load({
         disconnect: (serial) => unwrap('disconnect', { serial }),
         input: (serial, event) => unwrap('input', { serial, event }),
         screenInfo: (serial) => unwrap('screen-info', { serial }),
+        ping: (serial) => unwrap('ping', { serial }),
         targets: () => unwrap('targets'),
         removeTarget: (address) => unwrap('targets/remove', { address }),
         shot: async (serial) => {
@@ -644,7 +649,7 @@ window.__ModuleLoader__.load({
       return { codec, description }
     }
 
-    function useStream(serial, visible, canvasRef, onToast, attempt, quality, onSize) {
+    function useStream(serial, visible, canvasRef, onToast, attempt, quality, onSize, onFrame) {
       const [status, setStatus] = useState('idle')
       useEffect(() => {
         if (!serial || !visible || !CAN_STREAM) {
@@ -688,6 +693,7 @@ window.__ModuleLoader__.load({
                 }
                 frames += 1
                 waitingKey = false
+                if (onFrame) onFrame()
                 if (!reportedSize) {
                   reportedSize = true
                   if (onSize) onSize(frame.displayWidth, frame.displayHeight)
@@ -804,9 +810,23 @@ window.__ModuleLoader__.load({
       const [loading, setLoading] = useState(true)
       const [attempt, setAttempt] = useState(0)
       const [toast, setToast] = useState(null)
-      const streamStatus = useStream(CAN_STREAM ? serial : null, visible, canvasRef, setToast, attempt, quality, (w, h) => {
-        if (w > 0 && h > 0) setRatio(w / h)
-      })
+      const [fps, setFps] = useState(0)
+      const [rtt, setRtt] = useState(null)
+      const frameCounter = useRef({ count: 0, at: typeof performance !== 'undefined' ? performance.now() : Date.now() })
+      const streamStatus = useStream(
+        CAN_STREAM ? serial : null,
+        visible,
+        canvasRef,
+        setToast,
+        attempt,
+        quality,
+        (w, h) => {
+          if (w > 0 && h > 0) setRatio(w / h)
+        },
+        () => {
+          frameCounter.current.count += 1
+        },
+      )
 
       useEffect(() => {
         if (!serial) return undefined
@@ -825,6 +845,35 @@ window.__ModuleLoader__.load({
         }
       }, [serial])
 
+      useEffect(() => {
+        const timer = setInterval(() => {
+          const now = typeof performance !== 'undefined' ? performance.now() : Date.now()
+          const state = frameCounter.current
+          const seconds = Math.max(0.2, (now - state.at) / 1000)
+          setFps(Math.round(state.count / seconds))
+          state.count = 0
+          state.at = now
+        }, 1000)
+        return () => clearInterval(timer)
+      }, [])
+
+      useEffect(() => {
+        if (!serial || !visible) return undefined
+        let alive = true
+        const tick = async () => {
+          try {
+            const value = await api.ping(serial)
+            if (alive && value && typeof value.ms === 'number') setRtt(value.ms)
+          } catch {}
+        }
+        tick()
+        const timer = setInterval(tick, 5000)
+        return () => {
+          alive = false
+          clearInterval(timer)
+        }
+      }, [serial, visible])
+
       useEffect(() => {
         const el = stageRef.current
         if (!el) return undefined
@@ -873,6 +922,7 @@ window.__ModuleLoader__.load({
             setFrameUrl(url)
             setError(null)
             setLoading(false)
+            frameCounter.current.count += 1
           } catch (err) {
             if (!alive) return
             setError(err && err.message ? err.message : 'shot failed')
@@ -992,6 +1042,8 @@ window.__ModuleLoader__.load({
         error: errorNow,
         loading: loadingNow,
         toast,
+        fps,
+        rtt,
         setToast,
         send,
         screenshot,
@@ -1003,7 +1055,7 @@ window.__ModuleLoader__.load({
     }
 
     function PhoneTabBody(props) {
-      const { t, useTabInfo, floatTab } = props
+      const { t, useTabInfo, floatTab, sessionId } = props
       const info = typeof useTabInfo === 'function' ? useTabInfo() : null
       const tab = info && info.tab ? info.tab : null
       const visible = tab ? tab.visible !== false : true
@@ -1035,6 +1087,7 @@ window.__ModuleLoader__.load({
         }
       })
       const [disconnectArmed, setDisconnectArmed] = useState(false)
+      const autoSelected = useRef(false)
       const { devices, error, reload } = useDeviceList(visible, nonce)
       const quality = selected && QUALITY_ORDER.includes(qualityMap[selected]) ? qualityMap[selected] : 'medium'
       const setQualityForSelected = (next) => {
@@ -1109,14 +1162,46 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const rememberDevice = (serial) => {
+        try {
+          const raw = JSON.parse(localStorage.getItem('dsh-phone-last-device') || '{}')
+          const map = raw && typeof raw === 'object' ? raw : {}
+          if (sessionId) map[sessionId] = serial
+          map['*'] = serial
+          localStorage.setItem('dsh-phone-last-device', JSON.stringify(map))
+        } catch {}
+      }
+
+      useEffect(() => {
+        if (autoSelected.current) return undefined
+        const list = rows
+        if (!list || list.length === 0) return undefined
+        let remembered = null
+        try {
+          const map = JSON.parse(localStorage.getItem('dsh-phone-last-device') || '{}')
+          remembered = (sessionId && map[sessionId]) || map['*'] || null
+        } catch {}
+        const ready = list.filter((item) => item.state === 'device')
+        const pick = list.find((item) => item.serial === remembered) || ready[0] || list[0]
+        if (pick) {
+          autoSelected.current = true
+          setSelected(pick.serial)
+        }
+        return undefined
+      }, [devices, targets, selected, sessionId])
+
       const onSelect = (picked) => {
         setMenuOpen(false)
         if (picked && picked.saved) {
           connectTo(picked.serial).then((ok) => {
-            if (ok) setSelected(picked.serial)
+            if (ok) {
+              rememberDevice(picked.serial)
+              setSelected(picked.serial)
+            }
           })
           return
         }
+        rememberDevice(picked.serial)
         setSelected(picked.serial)
       }
 
@@ -1483,9 +1568,10 @@ window.__ModuleLoader__.load({
             : rows.length === 0
               ? h(
                   'div',
-                  { className: 'dph-emptypadding' },
-                  h('div', null, t('empty')),
-                  h('button', { type: 'button', className: 'dph-link', style: { marginTop: 8 }, onClick: () => setConnectOpen(true) }, '+ ' + t('add')),
+                  { className: 'dph-empty' },
+                  h('div', { className: 'dph-empty-icon' }, h(Icon, { name: 'phone', size: 30 })),
+                  h('div', { className: 'dph-empty-title' }, t('empty')),
+                  h('button', { type: 'button', className: 'dph-primary', onClick: () => setConnectOpen(true) }, '+ ' + t('add')),
                 )
               : h(DeviceRows, { t, devices: rows, selected, onSelect })
 
@@ -1571,6 +1657,7 @@ window.__ModuleLoader__.load({
                 qualityLabel(quality, t),
               )
             : null,
+          selected ? h('span', { className: 'dph-perf', title: t('quality') }, preview.fps + 'fps · ' + (preview.rtt == null ? '—' : preview.rtt + 'ms')) : null,
           h('div', { className: 'dph-grow' }),
           rightButtons,
         ),
@@ -1639,7 +1726,8 @@ window.__ModuleLoader__.load({
               name: 'sidebar.right.pane.tab',
               key: 'dsh-phone',
               locale: NS,
-              inject: () => ({
+              inject: (sessionId) => ({
+                sessionId,
                 floatTab: (tabId, rect) => ctx.sidebarRight.float(tabId, rect),
               }),
             },

package/lib/index.js

@@ -92,6 +92,8 @@ export function apply(ctx, rawConfig) {
         return ok({ targets: await targets.list() })
       case 'targets/remove':
         return ok({ removed: await targets.remove(String(payload.address || '')) })
+      case 'ping':
+        return ok(await adb.ping(String(payload.serial || '')))
       case 'screen-info':
         return ok(await adb.screenInfo(String(payload.serial || '')))
       case 'disconnect':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponydev/dsh-phone",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "DSH Web 插件：右侧栏预览并点按控制已连接的 Android 设备（adb）",
   "keywords": [
     "dsh",