dsh-wisp 1.33.0 → 1.33.1

package/README.md

@@ -448,6 +448,39 @@ node tools/audit-log.mjs --confirm <manifest>     # 生成后：并入代理登
 
 ## 变更
 
+### 1.33.1
+
+**修「子菜单遮住主菜单」。** 上一版的定位是错的，而且错得不显眼 —— 面板确实"在旁边"，
+只是**压进菜单十几个像素**。现在实测两矩形完全不重叠（右缘 1123 / 菜单左缘 1125）。
+
+根因有三层，都是"拿了不该拿的数字"：
+
+1. **混用了两套坐标系**：菜单的 `left/top` 是**图层坐标**，而 `getBoundingClientRect()`
+   给的是**视口坐标**。二者只在图层恰好从 (0,0) 开始时相等。
+2. **量了刚 append、还没布局的面板** ✗：那一刻它的宽度是 **0**，
+   于是所有基于它的校正被守卫挡掉，位置就停在估算值上（实测就是这样一直没生效）。
+3. **宽度算错**：CSS 写 `width:184px` 但没写 `box-sizing` ✗ →
+   默认 content-box 再加 `padding:6px` + `border:1px` → 实际 **198**，
+   而翻转算式里用的常量是 178 —— 差了 20 像素，正好压住菜单。
+
+**现在的做法**（不可能算错的那种）：**只用量层坐标 + 宽度**。
+
+- 面板宽度**固定**（`box-sizing:border-box; width:184px`）→ 常量就是真宽度，不用量；
+- 横向：`x = 菜单left + 菜单宽度 + 2`，越界则 `x = 菜单left − 面板宽度 − 2`；
+- 纵向：用"行矩形相对菜单矩形的**偏移**"→ `rr.top - mr.top` ——
+  相对量与坐标系无关，而且自动带上头部/分隔线的高度（估算少了它，差了 28px）；
+- 入场动画从 `scale` 改成**纯淡入**：带 scale 的动画会让 `getBoundingClientRect()`
+  量到缩放后的矩形，这是第 2 条坑的一部分。
+
+**另外补了一道之前缺的防线**：冒烟里加了**真浏览器**的几何检查 ——
+「面板在菜单**旁边**（不是上面）」「在视口内」「与它所属那一行对齐」。
+假 DOM 没有布局，这三条**测不到**，而这个 bug 恰好只存在于布局里 ——
+所以它才会一路发布出去。
+
+预检 529 项沿用；冒烟 53 → **57 项**。
+
+### 1.33.0
+
 ### 1.33.0
 
 **子菜单改成在**旁边**弹出。** 上一版做成了"在行下面内联展开" —— 那是网页的手风琴，

package/lib/client.js

@@ -51,7 +51,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
 
-    const VERSION = '1.33.0'
+    const VERSION = '1.33.1'
 
 /* 每一版一句话。**必须写当前版本** —— 预检里有一条断言盯着它，
    忘了更新就会红，不会静默过期。 */
@@ -74,6 +74,7 @@ const WHATS_NEW = {
   '1.31.0': '菜单重做：状态一目了然，开关是开关，大小能直接拖。',
   '1.32.0': '分组改成鼠标悬停就展开、移开就收起（点一下则是钉住）。',
   '1.33.0': '子菜单改成在旁边弹出（真正的菜单栏形状），→/← 进出自如。',
+  '1.33.1': '修子菜单位置算错、会压住主菜单的问题。',
 }
 
 /* 更新这件事**这个插件自己做不到**，如实写在代码里，免得以后有人以为能：
@@ -729,7 +730,8 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
 .wisp-menu-caret{opacity:.55;font-size:10px;flex:0 0 auto}
 /* 级联子菜单：浮在行的**右侧**（放不下时翻到左侧），不把下面的内容推下去。
    与父行顶部对齐、允许轻微重叠 —— 指针从行斜着移到面板上时不会穿出"同一区域"。 */
-.wisp-submenu{position:absolute;min-width:170px;max-width:230px;padding:6px;border-radius:12px;font-size:12px;line-height:1.25;color:var(--dsw-alias-label-primary,var(--wisp-say-fg));background:var(--dsw-alias-bg-overlay,var(--wisp-say-bg));border:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));box-shadow:0 12px 34px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);pointer-events:auto;animation:wisp-menu .12s ease}
+.wisp-submenu{position:absolute;box-sizing:border-box;width:184px;padding:6px;border-radius:12px;font-size:12px;line-height:1.25;color:var(--dsw-alias-label-primary,var(--wisp-say-fg));background:var(--dsw-alias-bg-overlay,var(--wisp-say-bg));border:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));box-shadow:0 12px 34px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);pointer-events:auto;animation:wisp-fade .12s ease}
+@keyframes wisp-fade{0%{opacity:0}100%{opacity:1}}
 .wisp-menu-sub{padding-left:10px}
 .wisp-menu-sub .wisp-menu-item{padding-left:12px;opacity:.94}
 .wisp-dialog-backdrop{position:absolute;inset:0;background:rgba(6,12,26,.34);pointer-events:auto;animation:wisp-menu .16s ease}
@@ -2187,7 +2189,7 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
          延迟是 hover intent：鼠标只是路过一行，不该弹出东西。 */
       const HOVER_OPEN_MS = 140
       const HOVER_CLOSE_MS = 260
-      const SUBMENU_W = 178
+      const SUBMENU_W = 184
       let flyoutName = ''
       let flyoutEl = null
       let flyoutRow = null
@@ -2273,18 +2275,35 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         }
         flyoutButtons = menuButtons.splice(before)
         layer.appendChild(panel)
-        /* 位置：贴在这一行右侧。真 DOM 用行的矩形；假 DOM 没有布局，退化成按行号估算。 */
-        let x = menuAtX + MENU_W - 6
-        let y = menuAtY + MENU_PAD + Math.max(0, index) * MENU_ITEM_H
+        /* 位置：贴在这一行右侧，越界就翻到左边。
+           **只用量层坐标 + 宽度** —— 宽度与坐标系无关，所以这个式子不可能算错：
+             菜单的 left/top 是图层坐标（我们自己设的），菜单宽度取它自己的矩形宽度；
+             面板宽度是**常量**（CSS 里给了固定 width，菜单面板本来就不该随内容变宽）。
+           前面几版之所以一直偏，是因为去量"刚 append、还没布局"的面板的矩形 ——
+           那时宽度是 0，整套校正被守卫挡掉，位置就停在了估算值上。 */
+        let menuW = MENU_W
         try {
-          const r = rowEl.getBoundingClientRect()
-          if (r && r.width > 0) { x = r.right - 6; y = r.top - 4 }
-        } catch (e) { /* 用估算值 */ }
-        /* 右边放不下就翻到左边 —— 否则子菜单会被屏幕切掉 */
-        flyoutSide = (x + SUBMENU_W > vw() - 8) ? 'left' : 'right'
-        if (flyoutSide === 'left') x = menuAtX - SUBMENU_W + 6
+          const mr = menuEl && menuEl.getBoundingClientRect ? menuEl.getBoundingClientRect() : null
+          if (mr && mr.width > 0) menuW = mr.width
+        } catch (e) { /* 用常量兜底 */ }
+        const menuLeft = menuAtX
+        const menuTop = menuAtY
+        let x = menuLeft + menuW + 2
+        flyoutSide = 'right'
+        if (x + SUBMENU_W > vw() - 8) {
+          x = menuLeft - SUBMENU_W - 2
+          flyoutSide = 'left'
+        }
         panel.style.left = Math.round(Math.max(8, x)) + 'px'
-        panel.style.top = Math.round(Math.max(8, y)) + 'px'
+        /* 纵向：用"行矩形相对菜单矩形的**偏移**" —— 相对量与坐标系无关，
+           所以它既准确又不受图层偏移影响，也不需要知道头部/分隔线有多高。 */
+        let rowOffset = MENU_PAD + Math.max(0, index) * MENU_ITEM_H
+        try {
+          const mr2 = menuEl && menuEl.getBoundingClientRect ? menuEl.getBoundingClientRect() : null
+          const rr2 = rowEl && rowEl.getBoundingClientRect ? rowEl.getBoundingClientRect() : null
+          if (mr2 && rr2 && rr2.height > 0) rowOffset = rr2.top - mr2.top
+        } catch (e) { /* 用估算值 */ }
+        panel.style.top = Math.round(Math.max(8, menuTop + rowOffset)) + 'px'
         flyoutEl = panel
         flyoutName = name
         flyoutRow = rowEl

package/lib/client.template.js

@@ -51,7 +51,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
 
-    const VERSION = '1.33.0'
+    const VERSION = '1.33.1'
 
 /* 每一版一句话。**必须写当前版本** —— 预检里有一条断言盯着它，
    忘了更新就会红，不会静默过期。 */
@@ -74,6 +74,7 @@ const WHATS_NEW = {
   '1.31.0': '菜单重做：状态一目了然，开关是开关，大小能直接拖。',
   '1.32.0': '分组改成鼠标悬停就展开、移开就收起（点一下则是钉住）。',
   '1.33.0': '子菜单改成在旁边弹出（真正的菜单栏形状），→/← 进出自如。',
+  '1.33.1': '修子菜单位置算错、会压住主菜单的问题。',
 }
 
 /* 更新这件事**这个插件自己做不到**，如实写在代码里，免得以后有人以为能：
@@ -678,7 +679,8 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
 .wisp-menu-caret{opacity:.55;font-size:10px;flex:0 0 auto}
 /* 级联子菜单：浮在行的**右侧**（放不下时翻到左侧），不把下面的内容推下去。
    与父行顶部对齐、允许轻微重叠 —— 指针从行斜着移到面板上时不会穿出"同一区域"。 */
-.wisp-submenu{position:absolute;min-width:170px;max-width:230px;padding:6px;border-radius:12px;font-size:12px;line-height:1.25;color:var(--dsw-alias-label-primary,var(--wisp-say-fg));background:var(--dsw-alias-bg-overlay,var(--wisp-say-bg));border:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));box-shadow:0 12px 34px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);pointer-events:auto;animation:wisp-menu .12s ease}
+.wisp-submenu{position:absolute;box-sizing:border-box;width:184px;padding:6px;border-radius:12px;font-size:12px;line-height:1.25;color:var(--dsw-alias-label-primary,var(--wisp-say-fg));background:var(--dsw-alias-bg-overlay,var(--wisp-say-bg));border:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));box-shadow:0 12px 34px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);pointer-events:auto;animation:wisp-fade .12s ease}
+@keyframes wisp-fade{0%{opacity:0}100%{opacity:1}}
 .wisp-menu-sub{padding-left:10px}
 .wisp-menu-sub .wisp-menu-item{padding-left:12px;opacity:.94}
 .wisp-dialog-backdrop{position:absolute;inset:0;background:rgba(6,12,26,.34);pointer-events:auto;animation:wisp-menu .16s ease}
@@ -2136,7 +2138,7 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
          延迟是 hover intent：鼠标只是路过一行，不该弹出东西。 */
       const HOVER_OPEN_MS = 140
       const HOVER_CLOSE_MS = 260
-      const SUBMENU_W = 178
+      const SUBMENU_W = 184
       let flyoutName = ''
       let flyoutEl = null
       let flyoutRow = null
@@ -2222,18 +2224,35 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         }
         flyoutButtons = menuButtons.splice(before)
         layer.appendChild(panel)
-        /* 位置：贴在这一行右侧。真 DOM 用行的矩形；假 DOM 没有布局，退化成按行号估算。 */
-        let x = menuAtX + MENU_W - 6
-        let y = menuAtY + MENU_PAD + Math.max(0, index) * MENU_ITEM_H
+        /* 位置：贴在这一行右侧，越界就翻到左边。
+           **只用量层坐标 + 宽度** —— 宽度与坐标系无关，所以这个式子不可能算错：
+             菜单的 left/top 是图层坐标（我们自己设的），菜单宽度取它自己的矩形宽度；
+             面板宽度是**常量**（CSS 里给了固定 width，菜单面板本来就不该随内容变宽）。
+           前面几版之所以一直偏，是因为去量"刚 append、还没布局"的面板的矩形 ——
+           那时宽度是 0，整套校正被守卫挡掉，位置就停在了估算值上。 */
+        let menuW = MENU_W
         try {
-          const r = rowEl.getBoundingClientRect()
-          if (r && r.width > 0) { x = r.right - 6; y = r.top - 4 }
-        } catch (e) { /* 用估算值 */ }
-        /* 右边放不下就翻到左边 —— 否则子菜单会被屏幕切掉 */
-        flyoutSide = (x + SUBMENU_W > vw() - 8) ? 'left' : 'right'
-        if (flyoutSide === 'left') x = menuAtX - SUBMENU_W + 6
+          const mr = menuEl && menuEl.getBoundingClientRect ? menuEl.getBoundingClientRect() : null
+          if (mr && mr.width > 0) menuW = mr.width
+        } catch (e) { /* 用常量兜底 */ }
+        const menuLeft = menuAtX
+        const menuTop = menuAtY
+        let x = menuLeft + menuW + 2
+        flyoutSide = 'right'
+        if (x + SUBMENU_W > vw() - 8) {
+          x = menuLeft - SUBMENU_W - 2
+          flyoutSide = 'left'
+        }
         panel.style.left = Math.round(Math.max(8, x)) + 'px'
-        panel.style.top = Math.round(Math.max(8, y)) + 'px'
+        /* 纵向：用"行矩形相对菜单矩形的**偏移**" —— 相对量与坐标系无关，
+           所以它既准确又不受图层偏移影响，也不需要知道头部/分隔线有多高。 */
+        let rowOffset = MENU_PAD + Math.max(0, index) * MENU_ITEM_H
+        try {
+          const mr2 = menuEl && menuEl.getBoundingClientRect ? menuEl.getBoundingClientRect() : null
+          const rr2 = rowEl && rowEl.getBoundingClientRect ? rowEl.getBoundingClientRect() : null
+          if (mr2 && rr2 && rr2.height > 0) rowOffset = rr2.top - mr2.top
+        } catch (e) { /* 用估算值 */ }
+        panel.style.top = Math.round(Math.max(8, menuTop + rowOffset)) + 'px'
         flyoutEl = panel
         flyoutName = name
         flyoutRow = rowEl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-wisp",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "description": "DeepSeek娘 — an unofficial floating desktop companion for the DeepSeek Harness UI. Zero dependencies; sprites inlined as data URIs; schedules on the Client timer service instead of the trapped browser timer globals.",
   "type": "module",
   "main": "lib/index.js",

package/tools/smoke.mjs

@@ -258,6 +258,7 @@ const skinCount = await page.evaluate(() => {
   const s = window.__wisp.skins
   return Array.isArray(s) ? s.length : Object.keys(s ?? {}).length
 })
+
 check(menu !== null && menu.items.length === 8, 'the menu lists every entry',
   `${menu?.items.length} items at the top level`)
 
@@ -580,6 +581,62 @@ check(skinSwap.layersDuringFade === 1, 'the cross-fade layer is gone once it set
 // 每个页面都要装下这份包与解码后的精灵图（单张就是 naturalWidth*naturalHeight*4 字节），
 // 多开一个页面 = 多一份；之前正是这样把浏览器推崩的，表现为随机的
 // "Target page, context or browser has been closed"，极难定位。
+/* 级联子菜单的几何检查：必须在**页面还活着**的时候跑（它要量真实布局），
+   也必须在键盘段之后（它会开关菜单、动焦点）。 */
+/* 级联子菜单的几何检查放在**最后**：它会开关菜单、动焦点，放在中间会扰动后面的键盘段。 */
+/* 级联子菜单的**几何**：它在旁边，不在上面。
+   这一条替身测不到（假 DOM 没有布局），而"子菜单遮住主菜单"那个 bug 正好出在这里 ——
+   混用了视口坐标（getBoundingClientRect）与图层坐标（菜单的 left/top）。 */
+const flyoutGeo = await page.evaluate(async () => {
+  const body = document.querySelector('.wisp-body')
+  const box = document.querySelector('.wisp-root')
+  if (!body || !box) return { noBody: true }
+  const r0 = box.getBoundingClientRect()
+  body.dispatchEvent(new MouseEvent('contextmenu', {
+    bubbles: true, cancelable: true, clientX: r0.left + r0.width / 2, clientY: r0.top + r0.height / 2,
+  }))
+  const menu = document.querySelector('.wisp-menu')
+  if (!menu) return { noMenu: true }
+  const row = [...menu.querySelectorAll('.wisp-menu-item')].find((el) => el.dataset && el.dataset.group)
+  if (!row) return { noRow: true }
+  row.dispatchEvent(new PointerEvent('pointerenter', { pointerType: 'mouse' }))
+  await new Promise((resolve) => setTimeout(resolve, 350))
+  const panel = document.querySelector('.wisp-submenu')
+  if (!panel) return { noPanel: true }
+  const mr = menu.getBoundingClientRect()
+  const pr = panel.getBoundingClientRect()
+  const rr = row.getBoundingClientRect()
+  const layer = menu.parentNode
+  const lr = layer.getBoundingClientRect ? layer.getBoundingClientRect() : { left: -999, top: -999, width: 0, height: 0 }
+  return {
+    menu: { l: Math.round(mr.left), r: Math.round(mr.right), w: Math.round(mr.width), styleL: menu.style.left, styleT: menu.style.top },
+    panel: { l: Math.round(pr.left), r: Math.round(pr.right), t: Math.round(pr.top), w: Math.round(pr.width), styleL: panel.style.left, styleT: panel.style.top },
+    row: { t: Math.round(rr.top), h: Math.round(rr.height) },
+    layer: { l: Math.round(lr.left), t: Math.round(lr.top), w: Math.round(lr.width), h: Math.round(lr.height), pos: getComputedStyle(layer).position },
+    view: { w: window.innerWidth, h: window.innerHeight },
+    rows: panel.querySelectorAll('.wisp-menu-item').length,
+  }
+})
+check(flyoutGeo.panel !== undefined && flyoutGeo.rows > 0,
+  'hovering a group row pops a submenu panel', JSON.stringify(flyoutGeo))
+check(flyoutGeo.panel !== undefined
+  && (flyoutGeo.panel.l >= flyoutGeo.menu.r - 6 || flyoutGeo.panel.r <= flyoutGeo.menu.l + 6),
+  'the submenu sits BESIDE the menu, not on top of it — window coords and layer coords must not be mixed',
+  flyoutGeo.panel ? `menu=${flyoutGeo.menu.l}..${flyoutGeo.menu.r} panel=${flyoutGeo.panel.l}..${flyoutGeo.panel.r}` : 'n/a')
+check(flyoutGeo.panel !== undefined
+  && flyoutGeo.panel.l >= 0 && flyoutGeo.panel.r <= flyoutGeo.view.w
+  && flyoutGeo.panel.t >= 0,
+  'and it fits on screen', flyoutGeo.panel ? JSON.stringify(flyoutGeo.panel) : 'n/a')
+check(flyoutGeo.panel !== undefined && Math.abs(flyoutGeo.panel.t - flyoutGeo.row.t) < 40,
+  'and lines up with the row it belongs to',
+  flyoutGeo.panel ? `row.t=${flyoutGeo.row.t} panel.t=${flyoutGeo.panel.t}` : 'n/a')
+await page.evaluate(() => {
+  /* 菜单的键盘监听挂在 **window** 上，不是 document —— 发错目标菜单就不会关，
+     后面的键盘段会在"一个还没关掉的菜单"上重开，焦点状态全乱（就是这么挂掉三条的）。 */
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+  window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+})
+
 await browser.close()
 
 /* ------------------------------------------------------ 8. 自己踱步 ------- */
@@ -645,6 +702,7 @@ await wanderBrowser.close()
 
 
 console.log(`\n${fail === 0 ? '=== SMOKE PASSED ===' : '=== SMOKE FAILED ==='}`)
+
 console.log(`  ${pass} passed, ${fail} failed  (real Chromium, ${headed ? 'headed' : 'headless'})`)
 console.log(`  playwright: ${playwright.from}`)
 if (executablePath) console.log(`  browser:    ${executablePath}`)