dsh-remote-panel 0.3.8 → 0.4.0

package/lib/client.js

@@ -1174,52 +1174,35 @@ window.__ModuleLoader__.load({
      问候语留在屏幕中间（原生居中），输入条钉到底部 */
   /* 输入条下方那排统计（轮次/步数、token、缓存）：手机上会撑高输入区，
      按「托盘状态」的思路挪到右上角，做成一行半透明小字，不再占输入条的垂直空间 */
-  .uV2eYG_dock {
-    position: fixed !important;
-    /* 托盘放在顶部安全区里（刘海那一条），靠右、避开「+」按钮：
-       有安全区时就在安全区中线上，没有时贴着顶栏右边 */
-    top: max(2px, calc(var(--dsh-safe-top, 0px) - 28px)) !important;
-    /* 有安全区时右移贴近屏幕边（此时不会和「+」同高），没有时让开「+」 */
-    right: calc(58px - min(48px, var(--dsh-safe-top, 0px))) !important;
-    left: auto !important;
-    width: auto !important;
-    max-width: calc(100vw - 72px) !important;
-    display: flex !important;
-    flex-wrap: nowrap !important;
-    align-items: center !important;
-    column-gap: 8px !important;
-    margin: 0 !important;
-    padding: 3px 9px !important;
-    border-radius: 999px !important;
-    background: rgba(18, 18, 20, .92) !important;
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
-    box-sizing: border-box !important;
-    font-size: 10.5px !important;
-    line-height: 15px !important;
-    z-index: 56 !important;
-    overflow: hidden !important;
-    transform: none !important;
-  }
-  /* 前两颗外面那层是 display:contents，Chrome 里不参与 flex 计算，实体化才能并排 */
-  .uV2eYG_dock > div {
-    display: flex !important;
-    align-items: center !important;
-    gap: 8px !important;
-    min-width: 0 !important;
+  /* 原生的统计条藏在输入条下方、文案又长，手机上只能挤；这里整体隐藏，
+     由 installStatsTray() 读它的文本、精简后放到顶部右上角 */
+  .uV2eYG_dock { display: none !important; }
+
+  /* 顶部状态条：左边分支、右边统计，两端对齐（像手机状态栏的左右两组） */
+  .dsh-stats-tray {
+    position: fixed;
+    top: max(2px, calc(var(--dsh-safe-top, 0px) - 24px));
+    left: 14px;
+    right: 14px;
+    z-index: 57;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    font-size: 10px;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+    color: rgba(255, 255, 255, .5);
+    pointer-events: none;
+    letter-spacing: .01em;
   }
-  .uV2eYG_dock [data-composer-stat] { min-width: 0 !important; }
-  /* 胶囊里的 label 自带 max-width，会被截成「2 轮 8 步 · 211 …」；托盘里放开 */
-  .uV2eYG_dock [class*="_label"] {
-    max-width: none !important;
-    overflow: visible !important;
-    text-overflow: clip !important;
-    white-space: nowrap !important;
+  .dsh-stats-tray > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
   }
-  /* 托盘只留两项：轮次/步数 + token/缓存；分支与占比收掉（面板里可见） */
-  [data-composer-stat="git-branch"] { display: none !important; }
-  .uV2eYG_dock > span[class*="_root"] { display: none !important; }
-  /* 没有统计时不渲染空壳（hero 页就是这样） */
-  .uV2eYG_dock:empty { display: none !important; }
+  .dsh-stats-tray > span:last-child { text-align: right; flex: 0 0 auto; }
 
   /* 输入条座位顶部有一段渐隐（DSH 原本渐到 #151517），在纯黑底上会显出一条灰带，
      这里把终点色换成纯黑，观感才对得上；底部那行状态（轮次/token/缓存）同理 */
@@ -1708,6 +1691,60 @@ window.__ModuleLoader__.load({
 		}
 
 
+		/**
+		 * 顶部统计托盘：DSH 的统计条文案太长（「2 轮 8 步 · 211 tok/s」「1.7M tok · 缓存命中 99%」），
+		 * 手机上一行放不下。这里读它的文本、精简成 `2 轮 · 211 tok/s · 缓存 99%` 放到右上角，
+		 * 原条隐藏，既省高度又不挤。
+		 */
+		function installStatsTray() {
+			if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			const tray = document.createElement('div')
+			tray.className = 'dsh-stats-tray'
+			tray.setAttribute('aria-hidden', 'true')
+			const left = document.createElement('span')
+			const right = document.createElement('span')
+			tray.append(left, right)
+			document.body.appendChild(tray)
+
+			let frame = 0
+			let shown = ''
+			const format = (text) => {
+				const rounds = text.match(/(\d+)\s*轮/)
+				const speed = text.match(/([\d.]+)\s*tok\/s/i)
+				const cache = text.match(/(\d+(?:\.\d+)?)\s*%/)
+				const parts = []
+				if (rounds !== null) parts.push(`${rounds[1]} 轮`)
+				if (speed !== null) parts.push(`${speed[1]} tok/s`)
+				if (cache !== null) parts.push(`缓存 ${cache[1]}%`)
+				return parts.join(' · ')
+			}
+			const sync = () => {
+				frame = 0
+				const dock = document.querySelector('.uV2eYG_dock')
+				const raw = dock?.textContent ?? ''
+				const branch = dock?.querySelector('[data-composer-stat="git-branch"]')?.textContent?.trim() ?? ''
+				const stats = raw.trim() === '' ? '' : format(raw)
+				const next = `${branch}|${stats}`
+				if (next === shown) return
+				shown = next
+				left.textContent = branch
+				right.textContent = stats
+				tray.style.display = branch === '' && stats === '' ? 'none' : 'flex'
+			}
+			const schedule = () => {
+				if (frame !== 0) return
+				frame = requestAnimationFrame(sync)
+			}
+			const observer = new MutationObserver(schedule)
+			observer.observe(document.body, { subtree: true, childList: true, characterData: true })
+			sync()
+			return () => {
+				observer.disconnect()
+				if (frame !== 0) cancelAnimationFrame(frame)
+				tray.remove()
+			}
+		}
+
 		/**
 		 * 外壳挂点自检：DSH 升级后这些 hash 类名可能全变，样式就整体失配。
 		 * 启动后检查一遍 DOM，把结果报给宿主，面板里能直接看到「外壳适配」这盏灯。
@@ -2349,6 +2386,7 @@ window.__ModuleLoader__.load({
 			const cleanupFocus = installComposerFocusGuard()
 			const cleanupFps = installFpsMeter()
 			const cleanupContract = installShellContractReport()
+			const cleanupTray = installStatsTray()
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupClear, 'remote-panel: workspace clear')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupBack, 'remote-panel: back gesture')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupAttention, 'remote-panel: attention')
@@ -2357,6 +2395,7 @@ window.__ModuleLoader__.load({
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupFocus, 'remote-panel: composer focus guard')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupFps, 'remote-panel: fps meter')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupContract, 'remote-panel: shell contract report')
+			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupTray, 'remote-panel: stats tray')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanup, 'remote-panel: mobile shell css')
 
 			ctx.slots.inject('shell.overlay', () =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-panel",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "DSH 远程访问控制面：部署向导、状态面板与一键配对（EasyTier + Caddy），数据面保持进程外。",
   "type": "module",
   "main": "./lib/index.js",