dsh-sidecard-ask 1.8.3 → 1.8.4

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 1.8.4
+
+**主题：选区旁的动作条从「六枚等价胶囊排成一排」改成一块面板加一个主操作——并顺手堵掉右侧被窗口裁掉的那条路。**
+
+起因是用户截图（574×42）：「💬 追问选中内容」后面紧接 `解释 / 翻译 / 总结 / 润色 / 纠错` 五枚带边框胶囊，
+全部挤在一行，右端被窗口边缘切断；用户的意见是「全部排成一排不好看」。
+
+- **诊断（不是「一行」的问题，是层级与预算两个问题）**：
+  1. 六枚胶囊同色同粗、各自带边框与阴影，读起来像六个并列功能，没有主操作；
+  2. 定位宽度是**估算**出来的（`estimateLabelWidth(label) + 24` 相加），它只用于夹取 `left`，
+     一旦估小或选区靠右，整条就会顶出右边缘——`max-width:min(620px,92vw)` 也挡不住，
+     因为它是相对视口的，不是相对面板左边剩下的空间。
+- **单一面板**：`.dsa-quickbar` 从「无底色的 flex 行」改成一块控件——`padding:3px`、`border-radius:12px`、
+  中灰描边 `rgba(127,127,127,.5)`、`0 6px 20px rgba(0,0,0,.16)` 投影、`background:bg-overlay`。
+- **一个主操作**：`.dsa-quickbar .dsa-trigger-embedded` 改成品牌实底 + 白字 + 600 字重；
+  深色主题改深墨字 `#0a1428`（本机 uiskin 深色品牌 `#5b9cf5` 上白字实测 **2.79:1**，低于 4.5:1 正文下限；
+  深墨 **6.57:1**），与 1.8.2 的分段芯片同一处理。
+- **一条细分隔线**：`.dsa-quickbar-sep`（1px × 15px，`border-l1`）分开「做那一件事」与「或从现成问题里挑一个」，
+  只在有快捷动作时渲染。
+- **五个动作降级为幽灵胶囊**：`.dsa-quickbar .dsa-chip` 去掉边框/底色/阴影，字色 `label-secondary`，
+  hover 才浮出 `bg-layer-2` 底与 `label-primary` 字色。弹层里的 chip 与右键菜单不受影响。
+- **宽度改成算出来的**：`TriggerBar` 读 `window.innerWidth`，给面板加
+  `max-width: min(620, 视口宽 − 面板左边 − 8)`，并用 `${Math.min(620, room)}px` 落到内联样式；
+  放不下就换行（`flex-wrap:wrap`），不再被窗口切掉。`window` 不存在时（测试/SSR）取 620。
+- **行为零变化**：键盘漫游（←/→/Home/End）、`Alt+1…5`、右键菜单、点芯片直接发问都照旧；
+  不新增配置项——这是版式修正，不需要开关。
+- 测试：`contract` 新增 **9** 项（渲染侧 3 条：恰好一个 `.dsa-quickbar-sep`、chips 自成一组、
+  主按钮是 `dsa-trigger-embedded` 变体；样式侧 6 条：单一面板、品牌实底主按钮、chips 去边框、
+  `.dsa-quickbar-sep` 规则存在、深色墨字覆盖、面板自带 `maxWidth` 上限）。总项数 1350 → **1359**。
+- **如实标注**：交付时给的四张图（`design-preview/10-quickbar-*.png`）是**离屏渲染**——
+  真 CSS 从 `client.js` 抽、主题值取自本机 uiskin 皮肤、无头 Edge 截图，不是运行中页面的截图；
+  hover / focus 态与真实选区定位没有截图证明，需要在页面上手测（刷新即生效，`link:` 安装）。
+- 顺手把 README §4.3 补成这一条的外观说明（含深色原因、换行行为与「不写配置项」的结论）。
+
 ## 1.8.3
 
 **主题：右侧栏打开时，答案卡直接铺满它、读成栏内的一页——而不是 340px 的浮层压在右栏正文上。**

package/README.md

@@ -8,6 +8,11 @@
 
 聊天记录、任务详情、右侧栏内容……只要是能选中的文本都能用；**没装侧边卡片插件也能跑**（自动回退到内置浮层卡片）。
 
+> **1.8.4 增强一览**（详见 CHANGELOG）：选区旁的动作条不再「六枚等价胶囊排成一排」——改成**一块面板 + 一个主操作**：
+> 品牌实底按钮「追问选中内容」、一条细分隔线、五个无边框文字胶囊（hover 才浮出底色），深色主题把主按钮
+> 的字改成深墨色（白字在深色品牌上只有 2.79:1）；宽度也改成按「视口宽 − 面板左边 − 8」算，
+> 放不下就换行，不再被窗口右边缘切掉。见 §4.3。
+
 > **1.8.0 增强一览**（P2，详见 CHANGELOG）：**回答风格档位**（`answerStyle` 精简/标准/详细）
 > 与 ≤500 字的自定义指令；改写类答案可**写回主对话输入框**（先做了真实页面探针，走官方
 > `inputActions.insertText`，DOM 路径退化为 `beforeinput` 追加）；卡片与历史条目可**查看原文**
@@ -232,6 +237,24 @@ bleeds = 对话区右边界 - left > 1          // 只有带宽 < 240px 时才
 | `off` | 设置里的 `dockRail` 被关掉了 |
 | `mode` | 当前不是完整卡片形态（胶囊 / 隐藏），本来就不该铺满 |
 
+### 4.3 选区旁的动作条（外观）
+
+选中文本后浮出的那条东西以前是**六枚等价的胶囊排成一排**（`追问选中内容` 与 `解释/翻译/总结/润色/纠错`），
+彼此同色同粗、各带边框和阴影：既没有主次，也没有分组，窗口窄一点或选区靠右时整条还会顶出右边缘被裁掉。
+现在它是**一块面板 + 一个主操作**：
+
+- 面板 `.dsa-quickbar`：`padding:3px`、`border-radius:12px`、中灰描边、`0 6px 20px` 投影，整条读作一个控件；
+- 主按钮（`.dsa-trigger-embedded`）：品牌实底 + 白字 + 600 字重（深色主题改为深墨字，原因同 §九 A 的分段芯片：
+  uiskin 深色品牌 `#5b9cf5` 上白字只有 2.79:1）；
+- 细分隔线 `.dsa-quickbar-sep`（1px × 15px，`border-l1`）把「做那一件事」和「或从这些现成问题里挑一个」分开；
+- 五个快捷动作降级为**无边框文字胶囊**（`.dsa-quickbar .dsa-chip`）：透明底 + `label-secondary` 字色，
+  hover 才浮出 `bg-layer-2` 底与 `label-primary` 字色——层级低于主按钮，但仍然一眼可点；
+- **宽度不再靠估算**：组件给面板加 `max-width: min(620, 视口宽 - 面板左边 - 8)`，放不下就换行，
+  不会被窗口边缘切掉；分隔线随主按钮留在第一行，换行的胶囊继续从左边排。
+
+外观之外没有行为变化：键盘漫游、`Alt+1…5`、右键菜单、点击后直接发问都照旧。这条也不写配置项——
+它是版式修正，不需要开关。
+
 ---
 
 ## 五、侧边承载面与"侧边卡片插件"适配
@@ -646,8 +669,11 @@ node test/smoke-test.mjs        # 端到端：流式/截断/取消/持久化/失
 ```
 
 四个脚本都以 `process.exitCode` 反映结果，失败会列出具体条目；测试会把 `DSH_HOME` 指向临时目录，不会污染真实配置。
-当前规模（1.8.3 本机实测，四项均 exit 0）：verify **57** 项 + contract **989** 项 + float-placement **78** 项 +
-smoke **226** 项 = **1350 项全部通过**（1.8.2 为 1293 项：contract 972 → 989，新增 8 项钉住设置页的「占满
+当前规模（本机实测，四项均 exit 0）：verify **57** 项 + contract **998** 项 + float-placement **78** 项 +
+smoke **226** 项 = **1359 项全部通过**（较 1.8.3 的 1350 多 9 项：选区动作条改成单一面板后新增的
+3 条渲染断言——恰好一个 `.dsa-quickbar-sep`、chips 自成一组、主按钮是 embedded 变体——与 6 条样式断言：
+单一面板、品牌实底主按钮、chips 去边框、分隔线规则、深色墨字覆盖、以及面板自带 `maxWidth` 上限。
+1.8.3 为 1350 项：contract 972 → 989，新增 8 项钉住设置页的「占满
 右侧栏」复选框、3 个新 i18n 键，以及承载面 `auto` 的新顺序；float-placement 38 → 78，新增 40 项覆盖 `railDock` 的夹取/最小尺寸/
 `clipped` 语义、真机上 dock 没生效那次发现的三个缺陷（残留的 `rail` 变量、右栏开合不触发重算、
 右栏锚点必须优先用插件自己的 `[data-dsa-rail-host]` 节点），以及「自动链里不出现原生右侧栏」这条顺序断言）。更早的 1.8.1 为 1277 项，其中 contract

package/client.js

@@ -47,7 +47,7 @@ window.__ModuleLoader__.load({
      * the Host and the module's `api.version` both read it, so a report can
      * never claim a generation the browser is not actually running.
      */
-    const CLIENT_VERSION = '1.8.3'
+    const CLIENT_VERSION = '1.8.4'
 
     /**
      * Tab kind served by the DSH native right rail (also its implementation id).
@@ -2052,12 +2052,28 @@ window.__ModuleLoader__.load({
   font-family:inherit;white-space:nowrap}
 .dsa-trigger:hover{border-color:var(--dsw-alias-brand-primary, #4c8dff)}
 .dsa-trigger:focus-visible{outline:2px solid var(--dsw-alias-brand-primary, #4c8dff);outline-offset:1px}
-/* The one-click action bar: the trigger button plus compact chips, laid out
-   in one wrapping row under the selection. The container is positioned by the
-   component; chips keep their own pointer-events because .dsa-layer is a
-   click-through layer. */
-.dsa-quickbar{pointer-events:auto;position:fixed;display:flex;align-items:center;gap:6px;
-  max-width:min(620px, 92vw);flex-wrap:wrap;z-index:60}
+/* The one-click action bar: the main ask button plus the quick chips, inside ONE
+   rounded surface. Six bordered pills in a row read as six competing actions —
+   no primary, no grouping — so the bar is a single control: a filled brand
+   button for "ask", a hairline separator, then quiet ghost chips. It wraps
+   instead of clipping (the component also caps its width to the viewport). */
+.dsa-quickbar{pointer-events:auto;position:fixed;display:inline-flex;align-items:center;
+  gap:2px;row-gap:2px;padding:3px;border-radius:12px;flex-wrap:wrap;z-index:60;
+  border:1px solid rgba(127,127,127,.5);
+  background:var(--dsw-alias-bg-overlay, #fff);
+  box-shadow:0 6px 20px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10)}
+.dsa-quickbar .dsa-trigger-embedded{position:static;border:0;border-radius:9px;
+  padding:4px 10px;font-weight:600;box-shadow:none;
+  background:var(--dsw-alias-brand-primary, #4c8dff);color:#fff}
+.dsa-quickbar .dsa-trigger-embedded:hover{border-color:transparent;filter:brightness(1.06)}
+/* Dark brand (#5b9cf5 on the bundled skin) puts white at 2.79:1 — below the 4.5:1
+   body-text floor. Dark ink measures 6.57:1, same remedy as the carrier switch. */
+html[data-ds-dark-theme] .dsa-quickbar .dsa-trigger-embedded,
+body[data-ds-dark-theme] .dsa-quickbar .dsa-trigger-embedded{color:#0a1428}
+/* A hairline between "do the main thing" and "or pick a canned question". */
+.dsa-quickbar-sep{flex:none;align-self:center;width:1px;height:15px;margin:0 2px;
+  background:var(--dsw-alias-border-l1, rgba(127,127,127,.28))}
+.dsa-quickbar-chips{display:contents}
 .dsa-chip{pointer-events:auto;padding:3px 10px;border-radius:999px;
   border:1px solid var(--dsw-alias-border-l2, rgba(127,127,127,.35));
   background:var(--dsw-alias-bg-overlay, #fff);color:var(--dsw-alias-label-primary, #111);
@@ -2065,6 +2081,14 @@ window.__ModuleLoader__.load({
   box-shadow:0 2px 8px rgba(0,0,0,.14)}
 .dsa-chip:hover{border-color:var(--dsw-alias-brand-primary, #4c8dff)}
 .dsa-chip:focus-visible{outline:2px solid var(--dsw-alias-brand-primary, #4c8dff);outline-offset:1px}
+/* Inside the action bar the chips lose their own frame: the bar is the frame.
+   Secondary text colour keeps them quieter than the filled ask button while
+   still clearing 6:1 on the bundled skin (label-secondary 9.36:1 in dark). */
+.dsa-quickbar .dsa-chip{border:0;background:transparent;box-shadow:none;
+  padding:3px 8px;border-radius:7px;color:var(--dsw-alias-label-secondary, #666)}
+.dsa-quickbar .dsa-chip:hover{background:var(--dsw-alias-bg-layer-2, rgba(127,127,127,.14));
+  color:var(--dsw-alias-label-primary, #111)}
+.dsa-quickbar .dsa-chip:focus-visible{outline-offset:0}
 /* Chips rendered INSIDE the popover need no floating shadow. */
 .dsa-pop-chips{display:flex;gap:6px;flex-wrap:wrap}
 .dsa-pop-chips .dsa-chip{box-shadow:none}
@@ -3440,12 +3464,23 @@ body[data-ds-dark-theme] .dsa-seg button[data-on="true"]:hover{
         (sum, action) => sum + Math.ceil(estimateLabelWidth(action.label) + 24), 0)
       const rowWidth = Math.min(620, mainWidth + (actions.length > 0 ? 6 + chipsWidth : 0))
       const box = clampBox(candidate.rect, rowWidth, 34, 'below')
+      // The estimate above is a clamp input, not a promise: if it is wrong the
+      // bar must wrap, never spill past the frame edge. Cap its width to the
+      // space actually left of it (and still to 620px, which is about as wide
+      // as an action bar stays readable).
+      const viewportWidth = (typeof window !== 'undefined' && Number.isFinite(window.innerWidth))
+        ? window.innerWidth
+        : 0
+      const room = viewportWidth > 0 ? Math.max(220, viewportWidth - box.left - 8) : 620
       return h('div', {
         className: 'dsa-quickbar',
-        style: { left: `${box.left}px`, top: `${box.top}px` },
+        style: { left: `${box.left}px`, top: `${box.top}px`, maxWidth: `${Math.min(620, room)}px` },
         onMouseDown: event => event.stopPropagation(),
       },
         h(TriggerButton, { candidate, onOpen, embedded: true }),
+        actions.length > 0
+          ? h('span', { key: 'sep', className: 'dsa-quickbar-sep', 'aria-hidden': true })
+          : null,
         h(QuickChips, { actions, onPick: onQuick, inline: true }))
     }
 

package/index.js

@@ -42,7 +42,7 @@ export const name = 'dsh-sidecard-ask'
 export const inject = ['webServer']
 
 /** Version of this plugin (kept in step with package.json by test/verify.mjs). */
-export const PLUGIN_VERSION = '1.8.3'
+export const PLUGIN_VERSION = '1.8.4'
 
 /** Route prefix of the plugin's own API. */
 export const ROUTE_PREFIX = '/sidecard-ask/api'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-sidecard-ask",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "DSH 划词追问（侧边卡片作答）：在聊天区与任务区选中文本就地追问，答案由独立子代理在侧边卡片里流式呈现，也可选择落回主对话。",
   "type": "module",
   "main": "index.js",