dsh-remote-panel 0.2.2 → 0.3.0

package/lib/client.js

@@ -1075,12 +1075,15 @@ window.__ModuleLoader__.load({
   /* 独立窗口里别再有下拉刷新 / 橡皮筋 */
   body { overscroll-behavior: none; }
 
+  /* 顶部安全区：默认取 env()；WebView 里由壳把真实切角高度写进 --dsh-safe-top */
+  :root { --dsh-safe-top: env(safe-area-inset-top, 0px); }
+
   /* 顶栏：52px；刘海屏/独立窗口把状态栏让出来 */
   .wSkVaW_header {
-    min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
-    padding: calc(11px + env(safe-area-inset-top, 0px)) 60px 0 10px !important;
+    min-height: calc(52px + var(--dsh-safe-top, 0px)) !important;
+    padding: calc(12px + var(--dsh-safe-top, 0px)) 60px 0 10px !important;
   }
-  .wSkVaW_headerSessionless { padding-top: calc(11px + env(safe-area-inset-top, 0px)) !important; }
+  .wSkVaW_headerSessionless { padding-top: calc(12px + var(--dsh-safe-top, 0px)) !important; }
   .wSkVaW_headerCorner { display: none !important; }
   /* 手机的「用文件管理器打开」是桌面动作，收掉 */
   .OMoRSG_split { display: none !important; }
@@ -1167,8 +1170,9 @@ window.__ModuleLoader__.load({
     left: 0;
     right: 0;
     z-index: 60;
-    top: env(safe-area-inset-top, 0px);
-    height: 52px;
+    /* 与顶栏里那颗汉堡同一个纵向基线：顶栏 padding-top = 12 + safe-top，行高 40 */
+    top: calc(12px + var(--dsh-safe-top, 0px));
+    height: 40px;
     margin: 0;
     padding: 0 64px;
     align-items: center;
@@ -1193,7 +1197,12 @@ window.__ModuleLoader__.load({
   .uV2eYG_row { padding: 6px 10px 10px !important; }
 
   /* 抽屉：工作区列表置顶，面板入口退到列表下面，删掉品牌行与「新会话」行 */
-  .hHd-Xa_root { display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px) !important; }
+  /* 顶部按刘海高度留白，但那块就是页面自己的底色，看起来只是「留白」不是「切角」 */
+  .hHd-Xa_root {
+    display: flex;
+    flex-direction: column;
+    padding-top: calc(12px + var(--dsh-safe-top, 0px)) !important;
+  }
   .hHd-Xa_logoRow, .hHd-Xa_newSession { display: none !important; }
   .hHd-Xa_regionArea { order: 1; }
   /* 手机上的 DSH = 对话 + 改动 + 余额：只留「工作区 Git」，其余面板入口全收 */
@@ -1222,14 +1231,44 @@ window.__ModuleLoader__.load({
   html.dsh-search-open .bhn1Oq_searchInput { height: 38px !important; }
 
   /* 点遮罩关抽屉：原生窄屏没有这层，补一个（抽屉之下、正文之上） */
-  html.dsh-drawer-open .dsh-mobile-scrim {
-    display: block;
+  /* 遮罩常驻，用透明度过渡：display 切换会瞬变，看着很硬 */
+  .dsh-mobile-scrim {
     position: fixed;
     inset: 0;
     z-index: 899;
-    background: rgba(0, 0, 0, .35);
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    /* 纯黑底上「压暗」看不出层级，这里反过来提亮：抽屉保持纯黑，其余区域变灰 */
+    background: rgba(255, 255, 255, .16);
+    transition: opacity 160ms cubic-bezier(.2, .8, .2, 1);
+  }
+  html.dsh-drawer-open .dsh-mobile-scrim {
+    opacity: 1;
+    pointer-events: auto;
+    /* 只在真正要动画时才提成合成层，别让它一直挂着 */
+    will-change: opacity;
+  }
+
+  /* 微交互：按压/悬停给 120ms 过渡，别让反馈是瞬变 */
+  .dsh-mobile-hamburger, .dsh-mobile-newchat, .dsh-mobile-clear-workspace,
+  .dsh-code-copy, .dsh-mobile-offline {
+    transition: background-color 120ms ease-out, color 120ms ease-out,
+      opacity 120ms ease-out, transform 120ms ease-out;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .dsh-mobile-hamburger:active, .dsh-mobile-newchat:active,
+  .dsh-mobile-clear-workspace:active, .dsh-code-copy:active {
+    transform: scale(.94);
+  }
+  @keyframes dsh-pill-in {
+    from { opacity: 0; transform: translate(-50%, -4px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
+  }
+  .dsh-mobile-offline { animation: dsh-pill-in 160ms cubic-bezier(.2, .8, .2, 1); }
+  @media (prefers-reduced-motion: reduce) {
+    .dsh-mobile-scrim, .dsh-mobile-offline { transition: none; animation: none; }
   }
-  .dsh-mobile-scrim { display: none; }
 
   /* 会话内容：代码块 / 表格 / 图片 / 附件在手机上不撑破页面 */
   .md-code-block { max-width: 100%; }
@@ -1270,7 +1309,7 @@ window.__ModuleLoader__.load({
   .dsh-code-copy[data-done="true"] { opacity: .6; }
   .dsh-code-copy--float {
     position: absolute;
-    top: 6px;
+    top: calc(6px + var(--dsh-safe-top, 0px));
     right: 6px;
     z-index: 2;
     background: var(--dsw-alias-bg-base, rgba(0, 0, 0, .4));
@@ -1295,22 +1334,31 @@ window.__ModuleLoader__.load({
 
 /* 手机外壳：深色配色（浅色主题保持原生配色，只换骨架） */
 @media (max-width: 1023px) {
-  body[data-ds-dark-theme] { background: #000 !important; }
+  /* 纯黑底：连 DSH 自己的深色面（.wSkVaW_root / emptyTabHost / 抽屉）一起刷，
+     否则空白页黑、会话页 #151517，开关抽屉会看到底色跳变。
+     抽屉保持纯黑，靠遮罩提亮来区分层级。 */
+  body[data-ds-dark-theme],
+  body[data-ds-dark-theme] .wSkVaW_root,
+  body[data-ds-dark-theme] [class*="_emptyTabHost"],
   body[data-ds-dark-theme] [class*="_frame"],
-  body[data-ds-dark-theme] [class*="_centerCol"] { background: #000 !important; }
-  body[data-ds-dark-theme] [class*="_sidebarCol"] {
+  body[data-ds-dark-theme] [class*="_centerCol"],
+  body[data-ds-dark-theme] [class*="_scrollBody"],
+  body[data-ds-dark-theme] [class*="_sidebarCol"],
+  body[data-ds-dark-theme] .hHd-Xa_root,
+  body[data-ds-dark-theme] .hHd-Xa_regionArea,
+  body[data-ds-dark-theme] .hHd-Xa_panelList {
     background: #000 !important;
+  }
+  body[data-ds-dark-theme] [class*="_sidebarCol"] {
     border: 0 !important;
-    box-shadow: 0 0 32px rgba(0, 0, 0, .45);
+    box-shadow: none;
   }
-  body[data-ds-dark-theme] .hHd-Xa_root { background: #000 !important; }
   body[data-ds-dark-theme] .wSkVaW_header { border-bottom: 0 !important; background: transparent !important; }
   body[data-ds-dark-theme] .uV2eYG_card {
-    background: #141416 !important;
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
   }
   body[data-ds-dark-theme] .pXSMma_workspace { background: rgba(255, 255, 255, .07) !important; }
-  /* 列表底部的滚动渐隐原本渐到 #1b1b1c，在纯黑抽屉上会显出一条灰条 */
+  /* 列表底部的滚动渐隐原本渐到 #1b1b1c，跟统一底色对齐 */
   body[data-ds-dark-theme] .bhn1Oq_fade {
     background-image: linear-gradient(rgba(0, 0, 0, 0), #000) !important;
   }
@@ -1322,7 +1370,7 @@ window.__ModuleLoader__.load({
   /* 断线胶囊：连续两次探活失败才出现，恢复即消失（任何宽度都显示） */
   .dsh-mobile-offline {
     position: fixed;
-    top: calc(env(safe-area-inset-top, 0px) + 6px);
+    top: calc(6px + var(--dsh-safe-top, 0px));
     left: 50%;
     transform: translateX(-50%);
     z-index: 80;
@@ -1391,18 +1439,18 @@ window.__ModuleLoader__.load({
     padding-bottom: env(safe-area-inset-bottom, 0px) !important;
   }
 
-  /* 长会话滚动：离屏的 markdown 块不参与布局/绘制。
-     DSH 不虚拟化消息，几百轮之后节点全在文档里；content-visibility 让浏览器跳过离屏块，
-     滚动时只画视口附近的内容。只在窄屏生效，桌面保持原样。 */
+  /* 长会话滚动：只在窄屏做滚动容器层面的优化，桌面保持原样 */
   @media (max-width: 1023px) {
-    [class*="_markdown"] {
-      content-visibility: auto;
-      contain-intrinsic-size: auto 320px;
-    }
+    /* 曾经给 markdown 块加 content-visibility:auto 想省渲染，
+       但 4x CPU 节流实测滚动会卡出 155ms 的长帧（块进入视口时要重新布局），
+       手机上的「卡顿」就是它。这里去掉，只保留滚动容器本身的优化。 */
     [class*="_scrollBody"] {
       overscroll-behavior: contain;
       -webkit-overflow-scrolling: touch;
     }
+    /* 点按不要留系统高亮块（各 ROM 的 WebView 默认会给一层灰/蓝色块） */
+    * { -webkit-tap-highlight-color: transparent; }
+    *:focus:not(:focus-visible) { outline: none; }
   }
 
 `
@@ -1444,11 +1492,22 @@ window.__ModuleLoader__.load({
 				clear.dataset.none = String(isEmpty())
 				row.appendChild(clear)
 			}
-			const observer = new MutationObserver(ensure)
+			// 流式回答时 DOM 每秒要变很多次，ensure 里是一次全量 querySelector，
+			// 必须合并到每帧最多一次，否则主线程全被它占了（手机上就是掉帧）
+			let frame = 0
+			const schedule = () => {
+				if (frame !== 0) return
+				frame = requestAnimationFrame(() => {
+					frame = 0
+					ensure()
+				})
+			}
+			const observer = new MutationObserver(schedule)
 			observer.observe(document.body, { subtree: true, childList: true })
 			ensure()
 			return () => {
 				observer.disconnect()
+				if (frame !== 0) cancelAnimationFrame(frame)
 				document.querySelector('.dsh-mobile-clear-workspace')?.remove()
 			}
 		}
@@ -1465,7 +1524,15 @@ window.__ModuleLoader__.load({
 			const onPop = () => {
 				if (isOpen()) layout?.toggleSidebar?.()
 			}
+			let frame = 0
 			const observer = new MutationObserver(() => {
+				if (frame !== 0) return
+				frame = requestAnimationFrame(() => {
+					frame = 0
+					check()
+				})
+			})
+			const check = () => {
 				if (query && !query.matches) return
 				const open = isOpen()
 				if (open && !pushed) {
@@ -1479,7 +1546,7 @@ window.__ModuleLoader__.load({
 					pushed = false
 					if (history.state !== null && history.state.dshDrawer === true) history.back()
 				}
-			})
+			}
 			observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 			window.addEventListener('popstate', onPop)
 			return () => {
@@ -1488,6 +1555,129 @@ window.__ModuleLoader__.load({
 			}
 		}
 
+		/**
+		 * 真机性能探针：URL 带 `?dsh-fps=1` 时在左下角显示帧率 / 最慢帧 / 长任务数。
+		 *
+		 * 只是为了在手机上定位「哪一步卡」，平时不加载任何逻辑（默认直接 return）。
+		 */
+		function installFpsMeter() {
+			if (typeof window === 'undefined' || typeof document === 'undefined') return () => {}
+			let enabled = /[?&]dsh-fps=1(&|$)/.test(window.location.search)
+			if (!enabled) {
+				try {
+					enabled = window.sessionStorage.getItem('dsh-fps') === '1'
+				} catch {
+					/* 隐私模式禁 storage，忽略 */
+				}
+			}
+			if (!enabled) return () => {}
+
+			const box = document.createElement('div')
+			box.style.cssText =
+				'position:fixed;left:8px;bottom:8px;z-index:99999;padding:4px 8px;border-radius:8px;' +
+				'background:rgba(0,0,0,.72);color:#7ef29b;font:11px/1.5 ui-monospace,monospace;' +
+				'pointer-events:none;white-space:pre;'
+			document.body.appendChild(box)
+
+			let frames = 0
+			let since = performance.now()
+			let worst = 0
+			let longTasks = 0
+			let fps = 0
+			let observer = null
+			try {
+				observer = new PerformanceObserver((list) => {
+					for (const entry of list.getEntries()) if (entry.duration > 50) longTasks += 1
+				})
+				observer.observe({ entryTypes: ['longtask'] })
+			} catch {
+				/* 老内核没有 longtask，忽略 */
+			}
+
+			const paint = () => {
+				box.textContent = `${fps}fps  worst ${Math.round(worst)}ms  long ${longTasks}`
+				worst = 0
+			}
+			let raf = 0
+			const tick = (now) => {
+				frames += 1
+				worst = Math.max(worst, now - since)
+				const elapsed = now - since
+				if (elapsed >= 500) {
+					fps = Math.round((frames * 1000) / elapsed)
+					frames = 0
+					since = now
+					paint()
+				}
+				raf = requestAnimationFrame(tick)
+			}
+			raf = requestAnimationFrame(tick)
+			window.setInterval(paint, 1000)
+			return () => {
+				cancelAnimationFrame(raf)
+				observer?.disconnect()
+				box.remove()
+			}
+		}
+
+		/**
+		 * 切换工作区后别自动聚焦输入框。
+		 *
+		 * DSH 打开工作区选择器时会先把焦点交给搜索框；关掉后焦点会回到输入条，
+		 * 手机上就是键盘自己弹出来。这里在选择器关闭、或 chip 文案变化后，
+		 * 把焦点从输入条上撤走（只撤输入条里的可编辑区，不动选择器自己的搜索框）。
+		 */
+		function installComposerFocusGuard() {
+			if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {}
+			let labelObserver = null
+			let observedLabel = null
+			let lastLabel = ''
+
+			const isComposer = (el) =>
+				el !== null &&
+				el !== document.body &&
+				(el.isContentEditable === true || el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') &&
+				(el.closest('.uV2eYG_root') !== null || el.closest('[class*="_composer"]') !== null)
+
+			const release = () => {
+				const el = document.activeElement
+				if (isComposer(el)) el.blur()
+			}
+			// DSH 可能在我们之后又把焦点塞回去，所以分几拍各撤一次
+			const scheduleRelease = () => {
+				for (const delay of [0, 80, 200, 400]) window.setTimeout(release, delay)
+			}
+
+			const watchLabel = () => {
+				const label = document.querySelector('[class*="_workspaceLabel"]')
+				if (label === null || label === observedLabel) return
+				labelObserver?.disconnect()
+				observedLabel = label
+				lastLabel = label.textContent ?? ''
+				labelObserver = new MutationObserver(() => {
+					const now = label.textContent ?? ''
+					if (now === lastLabel) return
+					lastLabel = now
+					scheduleRelease()
+				})
+				labelObserver.observe(label, { childList: true, characterData: true, subtree: true })
+			}
+
+			// 选择器关闭 = 里面那个搜索框失焦。用事件判断，别在每次 DOM 变动时全量 querySelector。
+			const onFocusOut = (event) => {
+				const target = event.target
+				if (target instanceof Element && target.closest('[class*="wsc-"]') !== null) scheduleRelease()
+			}
+			document.addEventListener('focusout', onFocusOut, true)
+			const ensureLabel = window.setInterval(watchLabel, 800)
+			watchLabel()
+			return () => {
+				document.removeEventListener('focusout', onFocusOut, true)
+				window.clearInterval(ensureLabel)
+				labelObserver?.disconnect()
+			}
+		}
+
 		/**
 		 * 本机反馈：任务跑完 / 等你确认时，如果页面在后台，闪一下标题 + 震动。
 		 * 不依赖推送服务（v1 不做推送），也不需要服务端配合。
@@ -1719,8 +1909,23 @@ window.__ModuleLoader__.load({
 				enhanceJobsBadge()
 				enhanceImages()
 			}
-			const observer = new MutationObserver(() => {
+			const RELEVANT = 'pre, img, table, [class*="job"], [class*="Job"], [class*="attach"]'
+			const isRelevant = (records) => {
+				for (const record of records) {
+					const target = record.target
+					if (target instanceof Element && target.closest(RELEVANT) !== null) return true
+					for (const node of record.addedNodes) {
+						if (node.nodeType !== 1) continue
+						if (node.matches?.(RELEVANT) === true || node.querySelector?.(RELEVANT) !== null) return true
+					}
+				}
+				return false
+			}
+			const observer = new MutationObserver((records) => {
 				if (scheduled !== 0) return
+				// 流式回答每帧都往消息里塞文本节点，全量扫描会把帧吃光；只有出现
+				// 代码块/图片/表格/任务卡/附件这类节点时才真的需要补按钮
+				if (!isRelevant(records)) return
 				scheduled = requestAnimationFrame(() => {
 					scheduled = 0
 					enhance()
@@ -1749,6 +1954,40 @@ window.__ModuleLoader__.load({
 		 * 断线重连提示：DSH 前端没有「连接断开」的可见反馈，网络一抖页面只是不动了。
 		 * 每 10s 打一次面板自己的 /status，连续两次失败才显示，恢复后自动消失。
 		 */
+		/**
+		 * 点输入条上的「+」（添加文件或调用指令）时，别让输入框自动聚焦。
+		 * 手机上一聚焦就弹键盘，把刚打开的面板顶走。
+		 *
+		 * 做法：在 pointerdown 阶段记一个短窗口（900ms），窗口内如果输入框收到 focus 就立刻 blur 回去；
+		 * 点别的地方会立刻清掉窗口，不会影响正常输入。
+		 */
+		function installComposerFocusGuard() {
+			if (typeof document === 'undefined') return () => {}
+			let until = 0
+			const isComposerInput = (el) => el instanceof Element && el.closest?.('.uV2eYG_input') !== null
+			const onPointerDown = (event) => {
+				const target = event.target
+				until = target instanceof Element && target.closest('.uV2eYG_add') !== null ? Date.now() + 900 : 0
+			}
+			const onFocusIn = (event) => {
+				if (Date.now() > until) return
+				const el = event.target
+				if (!isComposerInput(el)) return
+				const drop = () => {
+					if (Date.now() <= until && document.activeElement === el) el.blur?.()
+				}
+				drop()
+				// 有的实现会在下一帧再 focus 一次，补一刀
+				requestAnimationFrame(drop)
+			}
+			document.addEventListener('pointerdown', onPointerDown, true)
+			document.addEventListener('focusin', onFocusIn, true)
+			return () => {
+				document.removeEventListener('pointerdown', onPointerDown, true)
+				document.removeEventListener('focusin', onFocusIn, true)
+			}
+		}
+
 		function installConnectivity() {
 			if (typeof window === 'undefined' || typeof fetch !== 'function') return () => {}
 			let failures = 0
@@ -1984,11 +2223,15 @@ window.__ModuleLoader__.load({
 			const cleanupAttention = installAttention()
 			const cleanupContent = installContentEnhancements()
 			const cleanupNet = installConnectivity()
+			const cleanupFocus = installComposerFocusGuard()
+			const cleanupFps = installFpsMeter()
 			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')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupContent, 'remote-panel: content enhancements')
 			if (typeof ctx.effect === 'function') ctx.effect(() => cleanupNet, 'remote-panel: connectivity')
+			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(() => cleanup, 'remote-panel: mobile shell css')
 
 			ctx.slots.inject('shell.overlay', () =>

package/lib/index.js

@@ -141,7 +141,9 @@ export function writeGoPage(dir, token, accessKey) {
 		`<title>DSH</title><meta http-equiv="refresh" content="0;url=${target}">` +
 		'<style>html,body{height:100%;margin:0;background:#000;color:#888;font:14px system-ui;display:flex;align-items:center;justify-content:center}</style>' +
 		'<p>正在进入 DSH…</p>' +
-		`<script>location.replace(${JSON.stringify(target)})</script>`
+		// ?fps=1 时把开关记进 sessionStorage，跳转后由客户端插件读取（用于真机性能排查）
+		'<script>try{if(/[?&]fps=1/.test(location.search))sessionStorage.setItem("dsh-fps","1")}catch(e){}' +
+		`location.replace(${JSON.stringify(target)})</script>`
 	writeFileSync(join(dir, 'go.html'), html)
 	return target
 }

package/package.json

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