@yfwu2020/dsh-selection-explain 0.10.2 → 0.10.3

package/README.md

@@ -8,7 +8,7 @@ DSH 中的翻译、上下文解读与语音追问。
 
 [快速安装](#install) · [语音输入](#voice) · [功能一览](#read) · [使用与设置](#settings)
 
-`DSH 插件` · `v0.10.2` · `MIT`
+`DSH 插件` · `v0.10.3` · `MIT`
 
 </div>
 
@@ -103,11 +103,11 @@ dsh plugin --profile web add @yfwu2020/dsh-selection-explain
 <details>
 <summary>安装 Release 构建包</summary>
 
-将下载的 `.tgz` 放到当前目录，以 v0.10.2 为例：
+将下载的 `.tgz` 放到当前目录，以 v0.10.3 为例：
 
 ```bash
 mkdir -p ~/.dsh/plugins/dsh-selection-explain
-tar -xzf yfwu2020-dsh-selection-explain-0.10.2.tgz -C ~/.dsh/plugins/dsh-selection-explain --strip-components=1
+tar -xzf yfwu2020-dsh-selection-explain-0.10.3.tgz -C ~/.dsh/plugins/dsh-selection-explain --strip-components=1
 dsh plugin --profile web add ~/.dsh/plugins/dsh-selection-explain
 ```
 
@@ -159,6 +159,10 @@ dsh plugin --profile web remove @yfwu2020/dsh-selection-explain
 
 聊天与解读可以同时打开。与 `dsh-full-view` **0.1.6**、`dsh-recent-sessions` **0.2.3** 配合时，`Esc` 先退出最后操作的小窗；点击两窗之外后先退解读，再按一次收起聊天。此次调整需一起更新两个插件，未改变 Harness 的公共浮层或设置。
 
+### 快捷键与 Esc 层级（0.10.3）
+
+模型菜单收起后不再被 DSH 识别为弹层，避免设置等快捷键失效。官方设置等模态浮层打开时，`Esc` 优先交给官方浮层处理，保留解读小窗、插件设置抽屉、模型菜单和语音卡；官方浮层关闭后，再按 `Esc` 继续退出插件层级。
+
 ## 数据与使用范围
 
 选中文字、必要的前后文，以及开启的会话背景会交给你配置的模型。可在设置中关闭会话背景或工具调用。

package/lib/client.js

@@ -2648,7 +2648,7 @@ window.__ModuleLoader__.load({
       modelPill.appendChild(modelPillTier)
       modelPill.appendChild(el('span', 'dsh-sel-picker-caret', '▼'))
       var modelMenu = el('div', 'dsh-sel-pickermenu')
-      modelMenu.setAttribute('role', 'menu')
+      // role 随开合同步：DSH 按 [role="menu"] 判定弹层，不检查 CSS 可见性。
 
       // ── 录音行（与主会话 ui-voice-input 同一套结构）──
       //   [✕ 取消] [实时波形 / 状态文案] [■ 停止 或 行内动作] …… [↑ 发送（原位不动）]
@@ -9484,6 +9484,7 @@ window.__ModuleLoader__.load({
        */
       var offVoiceEscape = listen(document, 'keydown', function (event) {
         if (event.key !== 'Escape' || !vcardState.open || event.defaultPrevented) return
+        if (document.querySelector('[role="dialog"][aria-modal="true"]')) return
         event.preventDefault()
         event.stopPropagation()
         vcardState.suppress = true
@@ -9936,11 +9937,13 @@ window.__ModuleLoader__.load({
 
       function closeModelMenu() {
         modelMenu.setAttribute('data-open', '0')
+        modelMenu.removeAttribute('role')
         modelPill.setAttribute('aria-expanded', 'false')
       }
 
       function openModelMenu() {
         modelMenu.setAttribute('data-open', '1')
+        modelMenu.setAttribute('role', 'menu')
         modelPill.setAttribute('aria-expanded', 'true')
         renderModelMenu()
         loadModelCatalog(false).then(function () {
@@ -9962,7 +9965,7 @@ window.__ModuleLoader__.load({
         event.stopPropagation() // 菜单内部点击不要触发"点到外面"
       })
       var offModelKeys = listen(modelMenu, 'keydown', function (event) {
-        if (event.key === 'Escape') closeModelMenu()
+        if (event.key === 'Escape' && !document.querySelector('[role="dialog"][aria-modal="true"]')) closeModelMenu()
       })
 
       // —— 网页模式开关 ——
@@ -10140,6 +10143,9 @@ window.__ModuleLoader__.load({
 
       var offKeyDown = listen(document, 'keydown', function (event) {
         if (event.key !== 'Escape' || !panelOpen || event.defaultPrevented || event.isComposing || event.keyCode === 229) return
+        // 官方模态浮层的 Esc 在冒泡阶段处理；capture 不消费，先让官方设置等浮层退出。
+        // 插件面板和设置抽屉是非模态 dialog，不带 aria-modal，不会命中这里。
+        if (document.querySelector('[role="dialog"][aria-modal="true"]')) return
         // 完整视图记录最后点击/操作的小窗；不能只看可能停在另一窗的键盘焦点。
         var fullViewFrame = document.querySelector('[data-dsh-full-view]')
         if (fullViewFrame) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yfwu2020/dsh-selection-explain",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "DSH 划词解读：选中文字浮出按钮，点击弹窗流式显示专业中英翻译 + 该文字在当前上下文中的含义详解",
   "type": "module",
   "main": "./lib/index.js",

package/scripts/smoke-panel.mjs

@@ -1504,8 +1504,57 @@ async function main() {
     hook.open('模型菜单勾选', '', '菜单冒烟')
     await waitFor(function () { return hook.state().phase === 'done' }, 8000)
     await hook.loadModels(true)
+    var modelNodes = hook.modelNodes()
+    // DSH 按属性判定弹层，不检查 CSS 可见性（Issue #1）。
+    var modalSelector = '[role="dialog"][aria-modal="true"], [role="menu"]'
+    function modelMenuOwnsShortcuts() {
+      return Array.from(document.querySelectorAll(modalSelector)).includes(modelNodes.menu)
+    }
+    function checkModelMenuClosed(reason) {
+      check(reason + '：模型菜单不再占用 DSH 快捷键',
+        !modelMenuOwnsShortcuts() && modelNodes.menu.getAttribute('data-open') !== '1' &&
+          modelNodes.pill.getAttribute('aria-expanded') === 'false')
+    }
+    checkModelMenuClosed('初始收起')
+    // 官方 useModalLayer 在 document 冒泡阶段处理 Esc；插件 capture 必须让行。
+    function checkHostEscapeFirst(target, label) {
+      var hostSettings = document.createElement('div')
+      hostSettings.setAttribute('role', 'dialog')
+      hostSettings.setAttribute('aria-modal', 'true')
+      hostSettings.setAttribute('data-shortcut-modal', 'settings')
+      var hostInput = document.createElement('input')
+      hostSettings.appendChild(hostInput)
+      document.body.appendChild(hostSettings)
+      function dismissHost(event) {
+        if (event.key !== 'Escape' || event.defaultPrevented) return
+        event.preventDefault()
+        hostSettings.remove()
+      }
+      document.addEventListener('keydown', dismissHost)
+      try {
+        var event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+        ;(target || hostInput).dispatchEvent(event)
+        check(label + '：Esc 到达官方浮层并只关闭官方设置',
+          event.defaultPrevented && !hostSettings.isConnected && panel.style.display === 'flex')
+      } finally {
+        document.removeEventListener('keydown', dismissHost)
+        hostSettings.remove()
+      }
+    }
+    var escapeModeFrame = document.createElement('div')
+    escapeModeFrame.setAttribute('data-dsh-full-view', '')
+    escapeModeFrame.setAttribute('data-dsh-active-floating-window', 'explanation')
+    for (var fullViewMode of [false, true]) {
+      if (fullViewMode) document.body.appendChild(escapeModeFrame)
+      var modeLabel = fullViewMode ? '完整视图' : '普通分栏'
+      checkHostEscapeFirst(null, modeLabel + '／焦点在官方设置')
+      checkHostEscapeFirst(document.querySelector('.dsh-sel-askbox'), modeLabel + '／焦点仍在解读输入框')
+    }
+    escapeModeFrame.remove()
     hook.openModel()
     await sleep(120)
+    check('模型菜单展开时占用 DSH 快捷键',
+      modelMenuOwnsShortcuts() && modelNodes.pill.getAttribute('aria-expanded') === 'true')
     var menu = hook.modelNodes().menu
     var rows = Array.prototype.slice.call(menu.querySelectorAll('.dsh-sel-pickerrow'))
     check('模型菜单列出 3 个模型（含同名 id 的另一 provider）', rows.length === 3, String(rows.length))
@@ -1529,7 +1578,24 @@ async function main() {
     var rowBox = onRows[0] ? onRows[0].getBoundingClientRect() : null
     check('打勾那一行仍是单行（高度不超过 30px，没折成两行）',
       !!rowBox && rowBox.height <= 30, rowBox ? Math.round(rowBox.height) + 'px' : '没找到那一行')
+
+    checkHostEscapeFirst(modelNodes.menu, '模型菜单仍展开')
+    check('官方设置关闭时保留插件模型菜单', modelNodes.menu.getAttribute('data-open') === '1')
+
+    clickOn(modelNodes.pill)
+    checkModelMenuClosed('再次点击胶囊')
+    hook.openModel()
+    modelNodes.menu.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    checkModelMenuClosed('按 Esc')
+    hook.openModel()
+    document.getElementById('docp').dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    checkModelMenuClosed('点击菜单外部')
+    hook.openModel()
+    clickOn(modelNodes.menu.querySelector('.dsh-sel-pickerrow'))
+    checkModelMenuClosed('选择模型')
+    hook.openModel()
     hook.close() // 关窗会顺手收起模型菜单
+    checkModelMenuClosed('关闭解读面板')
     await sleep(30)
   }
 

package/scripts/test-escape-focus.mjs

@@ -7,12 +7,14 @@ const start = source.indexOf('      var offKeyDown = listen(document,')
 const end = source.indexOf('\n\n      var offSettingsOpen', start)
 assert.ok(start >= 0 && end > start)
 const ask = {}, historyInput = {}, outside = {}, expandedChat = { closest: selector => selector.startsWith('[data-dsh-floating-chat]') ? {} : null }, compactChat = { closest: () => null }, nativeMenu = { closest: selector => selector.startsWith('[role=') ? {} : null }
-let handler, fullView = true, calls = [], activeWindow = null, chatExpanded = true
+let handler, fullView = true, calls = [], activeWindow = null, chatExpanded = true, hostModalOpen = false
 const context = vm.createContext({
   panelOpen: true, settingsOpen: false,
   panel: { contains: node => node === ask },
   historyList: { contains: node => node === historyInput },
-  document: { querySelector: selector => selector === '[data-dsh-full-view]' && fullView
+  document: { querySelector: selector => selector === '[role="dialog"][aria-modal="true"]'
+    ? hostModalOpen ? {} : null
+    : selector === '[data-dsh-full-view]' && fullView
     ? { getAttribute: () => activeWindow }
     : selector.startsWith('[data-dsh-floating-chat]') && chatExpanded ? {} : null },
   listen(target, type, callback, capture) { assert.equal(type, 'keydown'); assert.equal(capture, true); handler = callback },
@@ -27,7 +29,22 @@ function escape(target, extra = {}) {
   const event = { key: 'Escape', target, ...extra, preventDefault() { calls.push('prevent') }, stopPropagation() { calls.push('stop') } }
   handler(event)
 }
-function reset() { calls = []; activeWindow = null; chatExpanded = true; context.panelOpen = true; context.settingsOpen = false; context.settingsByKey = {}; context.captureRow.getAttribute = () => '0' }
+function reset() { calls = []; activeWindow = null; chatExpanded = true; hostModalOpen = false; context.panelOpen = true; context.settingsOpen = false; context.settingsByKey = {}; context.captureRow.getAttribute = () => '0' }
+for (const mode of [true, false]) {
+  for (const target of [ask, historyInput, outside, expandedChat]) {
+    reset(); fullView = mode; hostModalOpen = true; activeWindow = 'explanation'
+    escape(target)
+    assert.deepEqual(calls, [], '官方模态设置浮层优先消费 Esc，不受视图模式、焦点或最后操作窗口影响')
+    assert.equal(context.panelOpen, true)
+  }
+}
+reset(); fullView = true; hostModalOpen = true; context.settingsOpen = true; escape(ask)
+assert.deepEqual(calls, [], '官方设置打开时不关闭插件设置抽屉')
+assert.equal(context.settingsOpen, true)
+reset(); hostModalOpen = true; context.captureRow.getAttribute = () => '1'; escape(ask)
+assert.deepEqual(calls, [], '官方设置打开时不取消插件录音')
+hostModalOpen = false; escape(ask)
+assert.deepEqual(calls, ['prevent', 'stop', 'voice'], '官方设置退出后，下一次 Esc 恢复插件的内层退出顺序')
 reset(); activeWindow = 'chat'; escape(ask)
 assert.deepEqual(calls, [], '最后点击聊天后，即使键盘仍在解读输入框，也让聊天先退出')
 reset(); activeWindow = 'explanation'; escape(expandedChat)
@@ -63,4 +80,22 @@ for (const target of [ask, historyInput]) {
 }
 reset(); fullView = false; escape(outside)
 assert.equal(context.panelOpen, false, '普通分栏保留解读原来的全局 Esc 行为')
-console.log('PASS focused Esc: independent windows, IME, nested settings, voice, history and split-mode behavior')
+
+// 语音卡另有一个更早注册的 capture 监听，也必须给官方浮层让出 Esc。
+const panelHandler = handler
+const voiceStart = source.indexOf('      var offVoiceEscape = listen(document,')
+const voiceEnd = source.indexOf('\n      }, true)', voiceStart) + '\n      }, true)'.length
+assert.ok(voiceStart >= 0 && voiceEnd > voiceStart)
+context.vcardState = { open: true, suppress: false }
+context.closeVCard = () => { calls.push('vcard'); context.vcardState.open = false }
+new vm.Script(source.slice(voiceStart, voiceEnd)).runInContext(context)
+const voiceHandler = handler
+handler = panelHandler
+reset(); hostModalOpen = true
+voiceHandler({ key: 'Escape', preventDefault() { calls.push('prevent') }, stopPropagation() { calls.push('stop') } })
+assert.deepEqual(calls, [], '官方设置打开时，语音卡不抢先消费 Esc')
+assert.equal(context.vcardState.open, true)
+hostModalOpen = false
+voiceHandler({ key: 'Escape', preventDefault() { calls.push('prevent') }, stopPropagation() { calls.push('stop') } })
+assert.deepEqual(calls, ['prevent', 'stop', 'vcard'], '官方设置退出后，Esc 可以关闭语音卡')
+console.log('PASS focused Esc: host modals, independent windows, IME, nested settings, voice, history and split-mode behavior')

package/src/client/index.js

@@ -2648,7 +2648,7 @@ window.__ModuleLoader__.load({
       modelPill.appendChild(modelPillTier)
       modelPill.appendChild(el('span', 'dsh-sel-picker-caret', '▼'))
       var modelMenu = el('div', 'dsh-sel-pickermenu')
-      modelMenu.setAttribute('role', 'menu')
+      // role 随开合同步：DSH 按 [role="menu"] 判定弹层，不检查 CSS 可见性。
 
       // ── 录音行（与主会话 ui-voice-input 同一套结构）──
       //   [✕ 取消] [实时波形 / 状态文案] [■ 停止 或 行内动作] …… [↑ 发送（原位不动）]
@@ -9484,6 +9484,7 @@ window.__ModuleLoader__.load({
        */
       var offVoiceEscape = listen(document, 'keydown', function (event) {
         if (event.key !== 'Escape' || !vcardState.open || event.defaultPrevented) return
+        if (document.querySelector('[role="dialog"][aria-modal="true"]')) return
         event.preventDefault()
         event.stopPropagation()
         vcardState.suppress = true
@@ -9936,11 +9937,13 @@ window.__ModuleLoader__.load({
 
       function closeModelMenu() {
         modelMenu.setAttribute('data-open', '0')
+        modelMenu.removeAttribute('role')
         modelPill.setAttribute('aria-expanded', 'false')
       }
 
       function openModelMenu() {
         modelMenu.setAttribute('data-open', '1')
+        modelMenu.setAttribute('role', 'menu')
         modelPill.setAttribute('aria-expanded', 'true')
         renderModelMenu()
         loadModelCatalog(false).then(function () {
@@ -9962,7 +9965,7 @@ window.__ModuleLoader__.load({
         event.stopPropagation() // 菜单内部点击不要触发"点到外面"
       })
       var offModelKeys = listen(modelMenu, 'keydown', function (event) {
-        if (event.key === 'Escape') closeModelMenu()
+        if (event.key === 'Escape' && !document.querySelector('[role="dialog"][aria-modal="true"]')) closeModelMenu()
       })
 
       // —— 网页模式开关 ——
@@ -10140,6 +10143,9 @@ window.__ModuleLoader__.load({
 
       var offKeyDown = listen(document, 'keydown', function (event) {
         if (event.key !== 'Escape' || !panelOpen || event.defaultPrevented || event.isComposing || event.keyCode === 229) return
+        // 官方模态浮层的 Esc 在冒泡阶段处理；capture 不消费，先让官方设置等浮层退出。
+        // 插件面板和设置抽屉是非模态 dialog，不带 aria-modal，不会命中这里。
+        if (document.querySelector('[role="dialog"][aria-modal="true"]')) return
         // 完整视图记录最后点击/操作的小窗；不能只看可能停在另一窗的键盘焦点。
         var fullViewFrame = document.querySelector('[data-dsh-full-view]')
         if (fullViewFrame) {