dsh-md-plus 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 # 更新日志
 
-## 0.4.1 —— 未发布
+## 0.4.2 —— 未发布
+
+- 修复鼠标悬浮表格或折叠内容时吞掉页面滚轮：移除表格容器的 `overscroll-behavior` containment，折叠态改为保留横向滚动、纵向 `overflow-y: clip`，并覆盖 DSH 宿主 `.tableScroll` 自带的横向 containment。
+- 修复宽表横向滚动条出现 / 消失时鼠标移入移出表格造成的上下跳动：取消 hover 阶段的 padding 切换，固定底部留白。
+- 修复宽表横向滚动时「展开 / 收起」按钮跟着表格内容移动：按钮中心固定跟随表格可视区域。
+- 修复宽表横向滚动时右上角 CSV / Markdown 操作按钮跟表格内容移动：操作组固定在表格可视区域右上角。
+- 新增 `docs/table-wheel-demo.html`：可直接检查短表、默认折叠长表（含横向滚动）和展开长表三种滚轮行为。
+- 测试补到 73 条，新增表格和折叠内容不建立吞滚轮滚动容器的回归用例。
+
+## 0.4.1 —— 2026-10-30
 
 - 修复 DSH 代码块头部只显示占位文案时读不到真实围栏语言、补高亮失效的问题：现在会从宿主的 React fiber 读取真实 `lang`，读不到再退回正文嗅探，并把头部语言名显示成真实语言。
 - 修复 `graph = nx.Graph()`、`pie = 3.14`、`timeline = []` 等普通代码被误判成 mermaid 图的问题：只嗅探第一行有效内容，并排除赋值和调用形态。

package/README.md

@@ -9,7 +9,7 @@
 - **代码块**：统一成完整卡片，头部显示 `</>` 图标和语言名（无语言显示 `Plain text`），保留宿主原生的换行与复制按钮，顶栏与卡片同色。
 - **Mermaid**：围栏渲染成 SVG，可在「图形 / 代码」间切换；支持全屏查看（滚轮缩放、拖拽、双击适应、Esc 关闭）、四套配色，以及下载 SVG / PNG。
 - **长内容折叠**：代码块、表格、图表超过阈值自动折叠，底部出现「展开 / 收起」，长日志和长表格不会撑满聊天。
-- **表格**：浅色 / 深色两套样式，表头吸顶；每张表上方右侧有「CSV / Markdown」复制按钮。
+- **表格**：浅色 / 深色两套样式，表头吸顶，宽表支持表内横向滚动；每张表上方右侧有「CSV / Markdown」复制按钮。
 - **图片放大**：只在旧宿主没有原生预览按钮时兜底，点击图片打开暗色预览，Esc 或点遮罩关闭；新版 DSH 的原生预览、头像、图标、代码块和链接里的图片都不接管。
 - **设置面板**：右下角齿轮可调 Mermaid 配色、代码字号、图表默认视图和三类折叠阈值，阈值下方会注明按高度判断。设置存在 `localStorage`，界面文案跟随页面 `<html lang>` 切换中英文。
 
@@ -27,7 +27,7 @@ dsh plugin --profile desktop remove dsh-md-plus
 ```powershell
 npm install       # 顺带跑 prepare → build
 npm run build     # 产出 lib/ 下四个文件
-npm run check     # 语法检查 + 72 条测试（先 build 再跑，check 不含 build）
+npm run check     # 语法检查 + 73 条测试（先 build 再跑，check 不含 build）
 npm run preview   # 生成 preview.html（含真渲出来的 mermaid 图）
 npm run shot      # 用 headless Chrome 把 preview.html 截成 docs/preview.png
 ```

package/lib/client.js

@@ -443,8 +443,9 @@ window.__ModuleLoader__.load({
       "." + MODAL_CLASS + " svg{display:block}",
       // ── 长内容折叠：代码块、表格、图表卡共用一套按钮 ───────────────
       "." + FOLD_CLASS + "{position:relative}",
-      "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{max-height:var(--md-plus-fold-max-height);overflow:hidden}',
-      "." + FOLD_BTN_CLASS + "{display:block;margin:8px auto 0;padding:4px 12px;border:1px solid var(--dsw-alias-border-secondary,rgb(127 127 127 / 22%));border-radius:999px;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary);font:12px/18px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer;box-shadow:0 2px 8px rgb(0 0 0 / 12%);z-index:2}",
+      // 用 clip 而不是 hidden：hidden 会建立隐形滚动容器，鼠标在折叠内容上滚轮会被它吞掉。
+      "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{max-height:var(--md-plus-fold-max-height);overflow:clip}',
+      "." + FOLD_BTN_CLASS + "{display:block;white-space:nowrap;margin:8px auto 0;padding:4px 12px;border:1px solid var(--dsw-alias-border-secondary,rgb(127 127 127 / 22%));border-radius:999px;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary);font:12px/18px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer;box-shadow:0 2px 8px rgb(0 0 0 / 12%);z-index:2}",
       "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"] .' + FOLD_BTN_CLASS + "{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0}",
       // ── 图片点击放大 ────────────────────────────────────────────────
       '[class*="_markdown_"] img{cursor:zoom-in}',
@@ -480,7 +481,10 @@ window.__ModuleLoader__.load({
       // 抓手用结构选择器而不是 DSH 的哈希类名：外层是「唯一子元素是 table 的 div」。
       // 前面挂 [class*="_markdown_"] 有两个作用——只认 markdown 渲染出来的表格，
       // 同时把特异性顶到 (0,1,4)，压过 DSH 自己的 .tableScroll th (0,1,1)。
-      TABLE + "{position:relative;margin-block:16px;max-height:min(70vh,720px);overflow-y:auto;overscroll-behavior-y:contain;" + TABLE_VARS + "}",
+      // 不要加 overscroll-behavior-y:contain：宿主给表格的外层是 overflow-x:auto，
+      // 两轴滚动容器上加 contain 会让没有纵向滚动的短表也吞掉页面滚轮；宿主的
+      // overscroll-behavior-x:contain 同样要清掉，Chrome 下它也会连带吞掉纵向滚轮。
+      TABLE + "{position:relative;margin-block:16px;max-height:min(70vh,720px);overflow-y:auto;overscroll-behavior:auto;" + TABLE_VARS + "}",
       "body[data-ds-dark-theme] " + TABLE + "{" + TABLE_VARS_DARK + "}",
       // 整张表一个 1px 边框 + 小圆角。
       // 注意必须是 separate：collapse 模式下 Chrome 会忽略单元格的圆角，
@@ -507,23 +511,24 @@ window.__ModuleLoader__.load({
       // 长表往下滚时表头留在视口顶部；底色不透明才不会透出下面的行
       TABLE + " > table thead th{position:sticky;top:0;z-index:1}",
       // 复制按钮放在表尾右侧：不压住表头文字，表格折叠时也能随展开一起出现
-      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + "{caption-side:top;text-align:right;padding:0 0 6px}",
+      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + "{caption-side:top;position:sticky;right:0;width:0;height:30px;margin-left:auto;padding:0;text-align:right;z-index:2}",
+      TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " > span{position:absolute;right:0;top:0;display:flex;gap:0;white-space:nowrap}",
       TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " button{appearance:none;border:1px solid var(--md-plus-tbl-line);border-radius:5px;padding:2px 8px;margin-left:4px;background:transparent;color:var(--dsw-alias-label-secondary);font:11px/16px var(--dsw-font-family-sans,system-ui,sans-serif);cursor:pointer}",
       TABLE + " > table > caption." + TABLE_TOOLS_CLASS + " button:hover{color:var(--dsw-alias-label-primary);background:var(--md-plus-tbl-hover)}",
       // 宽表（≥4 列）不收着不行。宿主给这类表加了 .md-table-wide，并让它「出血」：
       // 包裹层撑到面板宽，再用 padding-left 把表推到正文栏左侧。那个 padding 会吃掉
-      // 可用宽度，结果是表格比正文宽出一截、右边还被裁掉，而滚动条只在鼠标悬停时
-      // 才出现——文字表落进这个区间就很难读。这里按回正文栏宽，超出改为表内横滚。
+      // 可用宽度，结果是表格比正文宽出一截、右边还被裁掉；这里按回正文栏宽，超出改为表内横滚。
       // 特异性 (0,2,2)，压得住宿主的 .Pg4CGa_body .md-table-wide (0,2,0)。
-      TABLE + ".md-table-wide{width:100%;max-width:100%;margin-inline:0;padding-inline:0;overflow-x:auto}",
+      TABLE + ".md-table-wide{width:100%;max-width:100%;margin-inline:0;padding-inline:0;padding-bottom:0;overflow-x:auto}",
       // 塞得下就撑满正文栏，塞不下保持自然宽度让外面滚，不把列挤成一列一个字
       TABLE + ".md-table-wide > table{width:100%;max-width:none;min-width:max-content}",
-      // 宿主原本是「悬停才出滚动条」，所以悬停时会把预留的滚动条高度收掉；
-      // 现在滚动条常驻，再收掉就会跳 5px，固定住。
-      TABLE + ".md-table-wide:hover{padding-bottom:var(--dsh-scrollbar-width,5px)}"
+      // 折叠态保留横向滚动，但纵向必须 clip；横向滚动容器只有在
+      // overscroll-behavior:auto 时才会把纵向滚轮交还给页面。
+      TABLE + "." + FOLD_CLASS + "[" + FOLD_ATTR + '="on"]{overflow-x:auto;overflow-y:clip}'
     ].join("\n");
     var scripts = /* @__PURE__ */ new Map();
     var pending = /* @__PURE__ */ new Set();
+    var foldSyncs = /* @__PURE__ */ new WeakMap();
     var timer = null;
     var rescanQueued = false;
     var injected = /* @__PURE__ */ new Set();
@@ -1045,6 +1050,12 @@ window.__ModuleLoader__.load({
     }
     function resetFold(target) {
       if (target === null) return;
+      var sync = foldSyncs.get(target);
+      if (sync !== void 0) {
+        target.removeEventListener("scroll", sync);
+        window.removeEventListener("resize", sync);
+        foldSyncs.delete(target);
+      }
       target.removeAttribute(FOLD_ATTR);
       target.classList.remove(FOLD_CLASS);
       target.style.removeProperty("--md-plus-fold-max-height");
@@ -1077,13 +1088,23 @@ window.__ModuleLoader__.load({
         button.className = FOLD_BTN_CLASS;
         button.textContent = t("foldOpen");
         button.setAttribute("aria-expanded", "false");
+        var sync = target.hasAttribute(TABLE_DONE_ATTR) ? () => {
+          button.style.left = target.scrollLeft + target.clientWidth / 2 + "px";
+        } : null;
+        if (sync !== null) {
+          foldSyncs.set(target, sync);
+          target.addEventListener("scroll", sync, { passive: true });
+          window.addEventListener("resize", sync);
+        }
         button.addEventListener("click", () => {
           var folded = target.getAttribute(FOLD_ATTR) === "on";
           target.setAttribute(FOLD_ATTR, folded ? "off" : "on");
           button.textContent = folded ? t("foldClose") : t("foldOpen");
           button.setAttribute("aria-expanded", folded ? "true" : "false");
+          sync?.();
         });
         target.appendChild(button);
+        sync?.();
       });
     }
     function scanFolds() {
@@ -1153,6 +1174,8 @@ window.__ModuleLoader__.load({
       table.setAttribute(TABLE_DONE_ATTR, "1");
       var tools = document.createElement("caption");
       tools.className = TABLE_TOOLS_CLASS;
+      var group = document.createElement("span");
+      group.className = TABLE_TOOLS_CLASS + "-group";
       for (const [kind, label, titleKey, convert] of [
         ["csv", t("tableCsv"), "copyCsvTitle", tableToCsv],
         ["md", t("tableMd"), "copyMdTitle", tableToMarkdown]
@@ -1171,8 +1194,9 @@ window.__ModuleLoader__.load({
           }
           flashButton(button, ok ? t("copied") : t("copyFailed"));
         });
-        tools.appendChild(button);
+        group.appendChild(button);
       }
+      tools.appendChild(group);
       dataTable.insertBefore(tools, dataTable.firstChild);
     }
     function openImage(source, alt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-md-plus",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Markdown display enhancements for DeepSeek Harness Web: code block restyle, syntax highlighting for languages DSH does not ship, and built-in mermaid diagrams.",
   "type": "module",
   "main": "lib/index.js",