@ponydev/dsh-phone 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.3.1 — 2026-10-25
+
+### 修复
+- 云手机在平台侧切换分辨率后画面比例不跟随：预览每 3s 用 `screen-info?fresh` 检测 `wm size`，变化时自动重连流并按新尺寸重启 screenrecord
+- 顶部新增当前流分辨率显示（如 `540×960 · 58fps · 20ms`）
+
+## 0.3.0 — 2026-10-24
+
+### 新增
+- 打开手机面板自动进入预览：优先本会话上次使用的设备（localStorage 按 sessionId 记忆），否则第一台在线设备
+- 顶部清晰度右侧显示实时 **FPS** 和 **adb 往返延迟**（每 5s 探测一次）
+- 没有可用设备时，居中空态 + 「+ 连接设备」按钮
+
+### 变更
+- 「设备列表」仍可从左上角设备下拉进入；自动进入只发生在面板首次挂载
+
 ## 0.2.2 — 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)
@@ -300,11 +309,11 @@ export class Adb {
   }
 
   /** 设备物理分辨率（wm size），客户端用它把画面坐标换算成输入坐标；缓存 60s。 */
-  async screenInfo(serial) {
+  async screenInfo(serial, options = {}) {
     await this.assertReady(serial)
     const cached = this._screens.get(serial)
     const now = Date.now()
-    if (cached && now - cached.at < 60_000) return cached.info
+    if (!options.fresh && cached && now - cached.at < 60_000) return cached.info
     const { stdout } = await this._run(['-s', serial, 'shell', 'wm', 'size'], { timeout: 5000 })
     const info = parseWmSize(stdout.toString('utf8'))
     if (!info) throw fail('bad-screen-info', '无法读取设备分辨率')

package/lib/client.js

@@ -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}
 
@@ -388,7 +392,8 @@ window.__ModuleLoader__.load({
         connect: (address) => unwrap('connect', { address }),
         disconnect: (serial) => unwrap('disconnect', { serial }),
         input: (serial, event) => unwrap('input', { serial, event }),
-        screenInfo: (serial) => unwrap('screen-info', { serial }),
+        screenInfo: (serial, options) => unwrap('screen-info', { serial, fresh: Boolean(options && options.fresh) }),
+        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) {
@@ -658,7 +663,8 @@ window.__ModuleLoader__.load({
         let pps = null
         let frames = 0
         let waitingKey = true
-        let reportedSize = false
+        let lastWidth = 0
+        let lastHeight = 0
 
         const resetDecoder = () => {
           if (decoder) {
@@ -688,9 +694,11 @@ window.__ModuleLoader__.load({
                 }
                 frames += 1
                 waitingKey = false
-                if (!reportedSize) {
-                  reportedSize = true
-                  if (onSize) onSize(frame.displayWidth, frame.displayHeight)
+                if (onFrame) onFrame()
+                if (frame.displayWidth !== lastWidth || frame.displayHeight !== lastHeight) {
+                  lastWidth = frame.displayWidth
+                  lastHeight = frame.displayHeight
+                  if (onSize) onSize(lastWidth, lastHeight)
                 }
               } finally {
                 frame.close()
@@ -804,27 +812,84 @@ 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 [streamSize, setStreamSize] = useState(null)
+      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)
+            setStreamSize({ width: w, height: h })
+          }
+        },
+        () => {
+          frameCounter.current.count += 1
+        },
+      )
 
       useEffect(() => {
         if (!serial) return undefined
         let alive = true
-        api
-          .screenInfo(serial)
-          .then((info) => {
-            if (alive && info && info.width && info.height && info.width > 0 && info.height > 0) {
-              setDeviceSize({ width: info.width, height: info.height })
-              setRatio(info.width / info.height)
-            }
-          })
-          .catch(() => {})
+        let last = null
+        const apply = (info) => {
+          if (!info || !info.width || !info.height || info.width < 2 || info.height < 2) return
+          const changed = last && (last.width !== info.width || last.height !== info.height)
+          last = { width: info.width, height: info.height }
+          setDeviceSize(last)
+          setRatio(info.width / info.height)
+          // 设备分辨率变了（云手机平台切换）：重连流，让 Host 按新尺寸重启 screenrecord
+          if (changed) setAttempt((value) => value + 1)
+        }
+        const check = async () => {
+          try {
+            const info = await api.screenInfo(serial, { fresh: true })
+            if (alive) apply(info)
+          } catch {}
+        }
+        check()
+        const timer = setInterval(check, 3000)
         return () => {
           alive = false
+          clearInterval(timer)
         }
       }, [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 +938,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')
@@ -988,10 +1054,13 @@ window.__ModuleLoader__.load({
         ratio,
         immersive,
         deviceSize,
+        streamSize,
         frameUrl,
         error: errorNow,
         loading: loadingNow,
         toast,
+        fps,
+        rtt,
         setToast,
         send,
         screenshot,
@@ -1003,7 +1072,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 +1104,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 +1179,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 +1585,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 +1674,16 @@ window.__ModuleLoader__.load({
                 qualityLabel(quality, t),
               )
             : null,
+          selected
+            ? h(
+                'span',
+                { className: 'dph-perf', title: t('quality') },
+                (preview.streamSize ? preview.streamSize.width + '×' + preview.streamSize.height + ' · ' : '') +
+                  preview.fps +
+                  'fps · ' +
+                  (preview.rtt == null ? '—' : preview.rtt + 'ms'),
+              )
+            : null,
           h('div', { className: 'dph-grow' }),
           rightButtons,
         ),
@@ -1639,7 +1752,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,8 +92,10 @@ 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 || '')))
+        return ok(await adb.screenInfo(String(payload.serial || ''), { fresh: payload.fresh === true }))
       case 'disconnect':
         return ok(await adb.disconnect(String(payload.serial || '')))
       case 'input':
@@ -149,7 +151,7 @@ export function apply(ctx, rawConfig) {
               if (preset) {
                 openOptions = { bitRate: preset.bitRate }
                 try {
-                  const info = await adb.screenInfo(serial)
+                  const info = await adb.screenInfo(serial, { fresh: true })
                   const dims = streamSizeFor(info, preset.shortSide)
                   if (dims) openOptions.size = dims.width + 'x' + dims.height
                 } catch {}

package/package.json

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