dsh-plugin-table-zoom 0.1.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [0.3.1] - 2026-08-22
+
+- **每次打开自适应，不再继承任何布局**：移除尺寸/位置/缩放的跨次记忆
+  （不再读写 localStorage），浮窗每次打开都按表格自然宽度定宽
+  （下限 320；窄表收缩不撑满、**超级大表铺满视口可用宽度**）、居中、
+  缩放 100%；手动拖拽（改大小/移动/缩放）只影响当次打开，关掉再开即回到自适应。
+- **修复：自适应此前从未生效**——旧实现返回值错误（无记忆时返回估算宽 960
+  而非 0）导致自适应分支不执行，小表仍撑满大窗口。
+- **缩放不再跨次继承**：Ctrl+滚轮缩放比例不写入 localStorage，
+  每次打开浮窗都从 100% 开始（标题栏百分比同步复位）。
+- 测试：冒烟调整/新增 3 项（自适应宽度：窄表收缩/宽表封顶/空表兜底；
+  每次打开不继承上次尺寸；openPopup 走自适应下限），
+  共 selfcheck 12 项 + 冒烟 12 项。
+
+## [0.3.0] - 2026-08-22
+
+- **浮窗可拖动**：不再强制居中——按住标题栏（按钮除外）拖动浮窗位置，
+  自动限制在视口内不越出页面；位置与尺寸一并记忆到 localStorage，下次打开沿用。
+- **Ctrl+滚轮缩放**：浮窗内按住 Ctrl 滚动滚轮，表格字体 60%–250% 缩放
+  （步进 10%），标题栏实时显示百分比；缩放比例随布局记忆。
+- **滚动条更清晰**：正文滚动条加深加粗（WebKit 伪元素 + Firefox
+  `scrollbar-color`），浅色主题下也可见。
+- 布局记录统一为 `{w,h,x,y,zoom}`（兼容旧 `{w,h}` 记录）。
+- 测试：冒烟新增 2 项（标题栏拖拽移动 / Ctrl+滚轮缩放），
+  共 selfcheck 12 项 + 冒烟 11 项。
+
+## [0.2.0] - 2026-08-22
+
+- **浮窗可拖拽改尺寸**：右下角手柄调整大小（最小 320×200，上限视口减留白），
+  尺寸记忆到 localStorage，下次打开自动复用；视口变化时自动收窄防溢出。
+- **溢出可拖拽平移**：表格超出浮窗时，按住正文左右/上下拖动即滚动
+  （grab/grabbing 光标，越过 4px 阈值才视为拖动以免干扰文本选择；
+  触屏保留原生滚动；拖完松手不会误关浮窗）。
+- **列宽与聊天内一致**：`th/td` 增加 `max-width:min(30vw,320px);min-width:100px`，
+  超宽列在浮窗内收缩换行，表格整体不再超出浮窗大小。
+- 关闭浮窗时统一清理挂载的 window 监听器。
+- 测试：冒烟新增 3 项（改尺寸手柄拖拽/尺寸记忆复用/溢出拖拽平移），
+  共 selfcheck 12 项 + 冒烟 9 项。
+
 ## [0.1.0] - 2026-08-21
 
 - 新功能：**聊天表格浮窗**——聊天里 markdown 表格太长（≥9 行含表头）或

package/README.md

@@ -1,5 +1,9 @@
 # dsh-plugin-table-zoom
 
+![npm version](https://img.shields.io/npm/v/dsh-plugin-table-zoom)
+![License](https://img.shields.io/github/license/Pasumao/dsh-plugin-table-zoom)
+![AI Assisted](https://img.shields.io/badge/AI-Assisted-8A2BE2)
+
 DeepSeek Harness (dsh) Web GUI 聊天表格浮窗插件。
 
 聊天里模型输出的 markdown 表格经常**很长（行数多）或很宽（横向溢出）**，
@@ -9,14 +13,35 @@ DeepSeek Harness (dsh) Web GUI 聊天表格浮窗插件。
 
 纯前端 DOM 增强：不改核心包、不注册工具、无服务端逻辑、零运行时依赖。
 
-## 效果
+## 功能
 
 - 长表（≥ 9 行含表头，或横向溢出超过 2px）表格下方出现右对齐的「⛶ 浮窗查看」按钮；
 - 短表不打扰；
 - 点击按钮弹出浮窗：标题显示「表格 · N 行 × M 列」，正文可独立滚动（横竖都行），
   关闭按钮 / Esc / 点击遮罩均可关闭，打开期间锁定聊天页滚动；
 - 浮窗头部「复制为 Markdown」按钮一键复制整表（单元格内联换行折叠、管道符转义）；
-- 浮窗里展示的是**原表格的克隆**，聊天里的表格保持不变，也不会被重复增强。
+- 浮窗里展示的是**原表格的克隆**，聊天里的表格保持不变，也不会被重复增强；
+- **拖拽改尺寸**：浮窗右下角手柄可自由调整大小（最小 320×200，最大到视口留白），
+  只影响当次打开；
+- **每次打开自适应**：浮窗不记忆任何布局——宽度按表格内容自适应（窄表不撑满、
+  超级大表直接铺满视口可用宽度，下限 320）、位置居中、缩放 100%；关掉再开即回到自适应；
+- **拖拽移动**：按住标题栏可把浮窗拖到任意位置（自动限制在页面内，不会拖出屏幕），
+  位置只影响当次打开；
+- **Ctrl+滚轮缩放**：浮窗内按住 Ctrl 滚动滚轮，表格字体 60%–250% 缩放
+  （步进 10%），标题栏实时显示百分比；**缩放不记忆，每次打开回到 100%**；
+- **拖拽平移**：表格超宽/超高时，按住正文任意位置即可左右/上下拖动滚动
+  （grab 光标提示；越过 4px 阈值才视为拖动，不干扰文本选择；触屏走原生滚动）；
+- **滚动条清晰**：正文滚动条加深加粗，浅色主题下也能看清；
+- **列宽适配**：列宽上限与聊天内一致（`min(30vw, 320px)`），超宽列自动换行收缩，
+  表格整体不再撑破浮窗。
+
+## 配置
+
+无需任何配置，安装即用：
+
+- 不读取环境变量，不需要 API Key / token，不写配置文件；
+- 长表判定阈值（≥ 9 行 / 横向溢出 2px）为内置默认值，无需调整；
+- 样式跟随 DSH 主题 CSS 变量自适应，不引入独立主题配置。
 
 ## 安装
 
@@ -47,6 +72,15 @@ DeepSeek Harness (dsh) Web GUI 聊天表格浮窗插件。
 3. 在 profile 目录执行 `pnpm install`（或 `npm install`）；
 4. **重启 `dsh web`**（launcher 重新拉起），新插件才会进入浏览器 bundle。
 
+源码安装（本地开发 / 调试）：
+
+```bash
+git clone https://github.com/Pasumao/dsh-plugin-table-zoom.git
+cd dsh-plugin-table-zoom
+npm install
+# 以 link: 依赖挂载进 profile，见下方说明
+```
+
 > 若以本地目录开发调试，可用 `link:` 依赖替换第 1 步：
 > `"dsh-plugin-table-zoom": "link:D:/path/to/dsh-plugin-table-zoom"`。
 
@@ -76,6 +110,11 @@ npm run pack         # 打包
 - 不影响其他插件：只认 `tableScroll` 容器内的表格，跳过浮窗与 image-tools
   lightbox 内的表格。
 
+## AI 生成声明
+
+代码与文档由 AI 辅助生成（DeepSeek Harness），均经人工审查与实机验证
+（`npm run smoke`：selfcheck + 假 DOM 端到端冒烟）。
+
 ## License
 
 MIT

package/lib/client.js

@@ -13,17 +13,28 @@ window.__ModuleLoader__.load({
       '.dstz-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary);border-radius:999px;font-size:12px;line-height:18px;padding:3px 10px;font-family:inherit;white-space:nowrap}',
       '.dstz-btn:hover{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-interactive-bg-active);background:var(--dsw-alias-interactive-bg-hover)}',
       '.dstz-btn:focus-visible{outline:2px solid var(--dsw-alias-interactive-bg-active);outline-offset:1px}',
-      '.dstz-popup{position:fixed;inset:0;z-index:9999;background:rgba(8,10,18,.55);display:flex;align-items:center;justify-content:center;padding:24px}',
-      '.dstz-panel{box-sizing:border-box;background:var(--dsw-specific-input-major);border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:16px;box-shadow:var(--dsw-shadow-lv2);color:var(--dsw-alias-label-primary);width:min(92vw,960px);max-height:min(84vh,720px);flex-direction:column;display:flex;overflow:hidden;--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2)}',
+      '.dstz-popup{position:fixed;inset:0;z-index:9999;background:rgba(8,10,18,.55)}',
+      '.dstz-panel{box-sizing:border-box;background:var(--dsw-specific-input-major);border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:16px;box-shadow:var(--dsw-shadow-lv2);color:var(--dsw-alias-label-primary);width:min(92vw,960px);max-height:min(84vh,720px);flex-direction:column;display:flex;overflow:hidden;position:fixed}',
       '.dstz-panel,.dstz-panel *{box-sizing:border-box}',
-      '.dstz-header{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--dsw-alias-border-l2);padding:10px 12px 10px 18px;display:flex}',
+      '.dstz-panel.dstz-resizing,.dstz-panel.dstz-resizing *{user-select:none;-webkit-user-select:none}',
+      '.dstz-header{flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--dsw-alias-border-l2);padding:10px 12px 10px 18px;display:flex;cursor:move;touch-action:none}',
+      '.dstz-header.dstz-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}',
+      '.dstz-header button{cursor:pointer}',
       '.dstz-title{margin:0;font-size:14px;font-weight:500;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
       '.dstz-title small{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;margin-left:8px}',
       '.dstz-headerActions{flex-shrink:0;align-items:center;gap:8px;display:flex}',
-      '.dstz-body{overscroll-behavior:contain;flex:auto;min-height:0;padding:14px 18px 18px;overflow:auto}',
+      '.dstz-body{overscroll-behavior:contain;flex:auto;min-height:0;padding:14px 18px 18px;overflow-x:auto;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--dsw-alias-scrollbar-hover-l2, rgba(148,163,184,.65)) transparent}',
+      '.dstz-body::-webkit-scrollbar{width:9px;height:9px}',
+      '.dstz-body::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-hover-l2, rgba(148,163,184,.65));border-radius:7px;border:2px solid var(--dsw-specific-input-major);background-clip:padding-box}',
+      '.dstz-body::-webkit-scrollbar-thumb:hover{background:var(--dsw-alias-label-secondary, rgba(148,163,184,.95))}',
+      '.dstz-body::-webkit-scrollbar-track{background:transparent}',
+      '.dstz-body::-webkit-scrollbar-corner{background:transparent}',
+      '.dstz-body.dstz-grabbable{cursor:grab}',
+      '.dstz-body.dstz-panning{cursor:grabbing;user-select:none;-webkit-user-select:none}',
       '.dstz-table{border-collapse:collapse;width:max-content;max-width:max-content;color:var(--dsw-alias-label-primary)}',
-      '.dstz-table th{text-align:start;padding:8px 14px;border-bottom:1px solid var(--dsw-alias-border-l3);font:var(--dsw-font-markdown-table-head);white-space:nowrap}',
-      '.dstz-table td{padding:8px 14px;border-bottom:1px solid var(--dsw-alias-border-l2);font:var(--dsw-font-markdown-table)}',
+      // 列宽上限与核心渲染器（tableScroll）一致：超宽列在浮窗内收缩换行，整体不溢出
+      '.dstz-table th{text-align:start;padding:8px 14px;border-bottom:1px solid var(--dsw-alias-border-l3);font:var(--dsw-font-markdown-table-head);max-width:min(30vw,320px);min-width:100px}',
+      '.dstz-table td{padding:8px 14px;border-bottom:1px solid var(--dsw-alias-border-l2);font:var(--dsw-font-markdown-table);max-width:min(30vw,320px);min-width:100px}',
       '.dstz-table tr:last-child td{border-bottom:none}',
       '.dstz-iconButton{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:999px;place-items:center;display:grid;font-size:15px;line-height:1;padding:0}',
       '.dstz-iconButton:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}',
@@ -31,7 +42,11 @@ window.__ModuleLoader__.load({
       '.dstz-copyBtn{appearance:none;cursor:pointer;border-radius:999px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);background:0 0;color:var(--dsw-alias-label-primary);font-size:12px;line-height:18px;padding:3px 10px;font-family:inherit;white-space:nowrap}',
       '.dstz-copyBtn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}',
       '.dstz-copyBtn:disabled{cursor:default;opacity:.55}',
-      '@media (width<=720px){.dstz-popup{padding:12px}.dstz-panel{width:min(96vw,960px);max-height:88vh}.dstz-body{padding:10px 12px 12px}}'
+      // 拖拽改尺寸：右下角手柄（悬停显示，不占滚动条位置）
+      '.dstz-resizeSE{position:absolute;right:2px;bottom:2px;width:22px;height:22px;cursor:nwse-resize;z-index:4;touch-action:none}',
+      '.dstz-resizeSE::after{content:"";position:absolute;right:5px;bottom:5px;width:9px;height:9px;border-right:2px solid var(--dsw-alias-label-tertiary);border-bottom:2px solid var(--dsw-alias-label-tertiary);border-bottom-right-radius:2px;pointer-events:none}',
+      '.dstz-resizeSE:hover::after,.dstz-panel.dstz-resizing .dstz-resizeSE::after{border-color:var(--dsw-alias-label-primary)}',
+      '@media (width<=720px){.dstz-panel{width:min(96vw,960px);max-height:88vh}.dstz-body{padding:10px 12px 12px}}'
     ].join('');
     var tagId = 'dsh-plugin-table-zoom/zoom.module.css';
     if (typeof document !== 'undefined' && document.querySelector('style[data-plugin-css=' + JSON.stringify(tagId) + ']') === null) {
@@ -150,6 +165,11 @@ window.__ModuleLoader__.load({
       var popup = activePopup;
       activePopup = null;
       if (typeof popup._onKey === 'function') document.removeEventListener('keydown', popup._onKey);
+      if (Array.isArray(popup._cleanups)) {
+        for (var i = 0; i < popup._cleanups.length; i++) {
+          try { popup._cleanups[i](); } catch (e) { /* ignore */ }
+        }
+      }
       popup.remove();
       document.body.style.overflow = lastTrigger !== null && lastTrigger.bodyOverflow !== void 0 ? lastTrigger.bodyOverflow : '';
       lastTrigger = null;
@@ -182,6 +202,241 @@ window.__ModuleLoader__.load({
       }
     }
 
+    // ------------------------------------------------------------------
+    // 浮窗布局：拖拽改大小 + 拖标题栏移动 + Ctrl+滚轮缩放
+    // 不记忆任何布局：每次打开都按表格内容自适应宽度并居中，手动拖拽只影响当次。
+    // ------------------------------------------------------------------
+
+    var MIN_POPUP_W = 320;
+    var MIN_POPUP_H = 200;
+    /** 浮窗距视口边缘的最小留白。 */
+    var POPUP_MARGIN = 48;
+    /** Ctrl+滚轮缩放范围与步进。 */
+    var ZOOM_MIN = 0.6;
+    var ZOOM_MAX = 2.5;
+    var ZOOM_STEP = 0.1;
+
+    /** 把 v 限制在 [lo, hi]。 */
+    function clamp(v, lo, hi) {
+      return Math.min(Math.max(v, lo), hi);
+    }
+
+    /** 当前视口宽（无 DOM 环境兜底 1280）。 */
+    function viewportW() {
+      if (typeof window !== 'undefined' && typeof window.innerWidth === 'number' && window.innerWidth > 0) return window.innerWidth;
+      if (typeof document !== 'undefined' && document.documentElement !== null && typeof document.documentElement.clientWidth === 'number' && document.documentElement.clientWidth > 0) return document.documentElement.clientWidth;
+      return 1280;
+    }
+
+    /** 当前视口高（无 DOM 环境兜底 800）。 */
+    function viewportH() {
+      if (typeof window !== 'undefined' && typeof window.innerHeight === 'number' && window.innerHeight > 0) return window.innerHeight;
+      if (typeof document !== 'undefined' && document.documentElement !== null && typeof document.documentElement.clientHeight === 'number' && document.documentElement.clientHeight > 0) return document.documentElement.clientHeight;
+      return 800;
+    }
+
+    /**
+     * 每次打开都按表格自然宽度自适应面板宽度
+     * （正文左右 padding 36 + 面板边框 2；下限 320，上限为视口减去留白——
+     * 超级大表直接铺满最大可用宽度）。
+     */
+    function applyAdaptiveWidth(panel, clone) {
+      var tableW = typeof clone.offsetWidth === 'number' && clone.offsetWidth > 0 ? clone.offsetWidth : 0;
+      var maxW = viewportW() - POPUP_MARGIN;
+      var w = clamp(tableW + 38, MIN_POPUP_W, Math.max(MIN_POPUP_W, maxW));
+      panel.style.width = w + 'px';
+    }
+
+    /** 把面板按实际尺寸重新居中（自适应改宽后调用；测不到尺寸时跳过）。 */
+    function centerPanel(panel) {
+      var w = panel.offsetWidth;
+      var h = panel.offsetHeight;
+      if (typeof w !== 'number' || w <= 0 || typeof h !== 'number' || h <= 0) return;
+      panel.style.left = Math.round((viewportW() - w) / 2) + 'px';
+      panel.style.top = Math.round((viewportH() - h) / 2) + 'px';
+    }
+
+    /** 把面板位置限制在视口内（完全可见，不越出页面）。 */
+    function clampPanelPosition(panel) {
+      var rect = null;
+      try { rect = panel.getBoundingClientRect(); } catch (err) { rect = null; }
+      if (rect === null || typeof rect !== 'object') return;
+      if (typeof rect.left !== 'number' || typeof rect.top !== 'number') return;
+      var x = clamp(rect.left, 0, Math.max(0, viewportW() - rect.width));
+      var y = clamp(rect.top, 0, Math.max(0, viewportH() - rect.height));
+      panel.style.left = x + 'px';
+      panel.style.top = y + 'px';
+    }
+
+    /** 把面板移到 (x, y) 并限制在视口内。 */
+    function setPanelPosition(panel, x, y) {
+      var rect = null;
+      try { rect = panel.getBoundingClientRect(); } catch (err) { rect = null; }
+      if (rect === null || typeof rect !== 'object') return;
+      x = clamp(x, 0, Math.max(0, viewportW() - rect.width));
+      y = clamp(y, 0, Math.max(0, viewportH() - rect.height));
+      panel.style.left = x + 'px';
+      panel.style.top = y + 'px';
+    }
+
+    /** 内容溢出时给正文加 grab 光标提示（可拖拽平移）。 */
+    function refreshGrabbable(body) {
+      var overX = body.scrollWidth > body.clientWidth + 1;
+      var overY = body.scrollHeight > body.clientHeight + 1;
+      if (overX || overY) body.classList.add('dstz-grabbable');
+      else body.classList.remove('dstz-grabbable');
+    }
+
+    /** 命中可交互元素（链接/按钮/输入框等）时让给默认行为，不启动拖拽。 */
+    function isInteractive(el) {
+      if (el === null || typeof el !== 'object' || typeof el.closest !== 'function') return false;
+      return el.closest('a,button,input,textarea,select,[contenteditable="true"],[role="button"]') !== null;
+    }
+
+    /**
+     * 给面板挂载「拖右下角改尺寸」：指针捕获 + _suppressClick 防止拖完
+     * 松手落在遮罩上误触发关闭。尺寸只影响当次打开，不持久化。
+     * @param {object} panel - .dstz-panel 元素。
+     * @param {object} overlay - .dstz-popup 元素（承载 _suppressClick）。
+     */
+    function attachResize(panel, overlay) {
+      var handle = document.createElement('div');
+      handle.className = 'dstz-resizeSE';
+      handle.setAttribute('aria-hidden', 'true');
+      var state = null;
+      var begin = function (e) {
+        if (e.button !== 0) return;
+        if (typeof e.preventDefault === 'function') e.preventDefault();
+        if (typeof e.stopPropagation === 'function') e.stopPropagation();
+        var rect = null;
+        try { rect = panel.getBoundingClientRect(); } catch (err) { rect = null; }
+        if (rect === null || typeof rect !== 'object') return;
+        state = { x: e.clientX, y: e.clientY, w: rect.width, h: rect.height };
+        panel.style.maxHeight = 'none';
+        panel.classList.add('dstz-resizing');
+        overlay._suppressClick = true;
+        if (e.currentTarget !== null && e.currentTarget !== void 0 && typeof e.currentTarget.setPointerCapture === 'function') {
+          try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+        }
+      };
+      var move = function (e) {
+        if (state === null) return;
+        var dx = e.clientX - state.x;
+        var dy = e.clientY - state.y;
+        var w = Math.min(Math.max(state.w + dx, MIN_POPUP_W), Math.max(MIN_POPUP_W, viewportW() - POPUP_MARGIN));
+        var h = Math.min(Math.max(state.h + dy, MIN_POPUP_H), Math.max(MIN_POPUP_H, viewportH() - POPUP_MARGIN));
+        panel.style.width = w + 'px';
+        panel.style.height = h + 'px';
+        if (typeof e.preventDefault === 'function') e.preventDefault();
+      };
+      var end = function () {
+        if (state === null) return;
+        state = null;
+        panel.classList.remove('dstz-resizing');
+        clampPanelPosition(panel);
+        window.setTimeout(function () { overlay._suppressClick = false; }, 0);
+      };
+      handle.addEventListener('pointerdown', begin);
+      handle.addEventListener('pointermove', move);
+      handle.addEventListener('pointerup', end);
+      handle.addEventListener('pointercancel', end);
+      panel.appendChild(handle);
+    }
+
+    /**
+     * 给标题栏挂载「拖拽移动」：按住标题栏（按钮除外）拖动面板位置，
+     * 位置限制在视口内（不越出页面）；位置不记忆，下次打开重新居中。
+     * @param {object} panel - .dstz-panel 元素（children[0] 为标题栏）。
+     * @param {object} overlay - .dstz-popup 元素（承载 _suppressClick）。
+     */
+    function attachMove(panel, overlay) {
+      var header = panel.children[0];
+      if (header === null || header === void 0) return;
+      var state = null;
+      header.addEventListener('pointerdown', function (e) {
+        if (e.button !== 0) return;
+        if (isInteractive(e.target)) return;
+        var rect = null;
+        try { rect = panel.getBoundingClientRect(); } catch (err) { rect = null; }
+        if (rect === null || typeof rect !== 'object') return;
+        state = { x: e.clientX, y: e.clientY, lx: rect.left, ty: rect.top, moved: false };
+        if (typeof header.setPointerCapture === 'function') {
+          try { header.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+        }
+      });
+      header.addEventListener('pointermove', function (e) {
+        if (state === null) return;
+        var dx = e.clientX - state.x;
+        var dy = e.clientY - state.y;
+        if (!state.moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+        if (!state.moved) {
+          state.moved = true;
+          header.classList.add('dstz-dragging');
+          overlay._suppressClick = true;
+        }
+        setPanelPosition(panel, state.lx + dx, state.ty + dy);
+        if (typeof e.preventDefault === 'function') e.preventDefault();
+      });
+      var end = function () {
+        if (state === null) return;
+        var wasMoved = state.moved;
+        state = null;
+        header.classList.remove('dstz-dragging');
+        if (wasMoved) window.setTimeout(function () { overlay._suppressClick = false; }, 0);
+      };
+      header.addEventListener('pointerup', end);
+      header.addEventListener('pointercancel', end);
+    }
+
+    /**
+     * 给正文挂载「拖拽平移」：内容溢出时按住表格左右/上下拖动即可滚动
+     * （鼠标/触控笔；触屏保留原生滚动）。越过 4px 阈值才视为拖动，
+     * 避免干扰文本选择；拖动结束松手落在遮罩上不会误关浮窗。
+     * @param {object} body - .dstz-body 元素。
+     * @param {object} overlay - .dstz-popup 元素（承载 _suppressClick）。
+     */
+    function attachPan(body, overlay) {
+      var state = null;
+      body.addEventListener('pointerdown', function (e) {
+        if (e.button !== 0) return;
+        if (e.pointerType !== undefined && e.pointerType !== 'mouse' && e.pointerType !== 'pen') return;
+        if (isInteractive(e.target)) return;
+        var overX = body.scrollWidth > body.clientWidth + 1;
+        var overY = body.scrollHeight > body.clientHeight + 1;
+        if (!overX && !overY) return;
+        state = { x: e.clientX, y: e.clientY, sl: body.scrollLeft, st: body.scrollTop, moved: false };
+        if (typeof body.setPointerCapture === 'function') {
+          try { body.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+        }
+      });
+      body.addEventListener('pointermove', function (e) {
+        if (state === null) return;
+        var dx = e.clientX - state.x;
+        var dy = e.clientY - state.y;
+        if (!state.moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+        if (!state.moved) {
+          state.moved = true;
+          body.classList.add('dstz-panning');
+          overlay._suppressClick = true;
+          if (typeof document !== 'undefined' && typeof document.getSelection === 'function') {
+            try { document.getSelection().removeAllRanges(); } catch (err) { /* ignore */ }
+          }
+        }
+        body.scrollLeft = state.sl - dx;
+        body.scrollTop = state.st - dy;
+        if (typeof e.preventDefault === 'function') e.preventDefault();
+      });
+      var end = function () {
+        if (state === null) return;
+        var wasMoved = state.moved;
+        state = null;
+        body.classList.remove('dstz-panning');
+        if (wasMoved) window.setTimeout(function () { overlay._suppressClick = false; }, 0);
+      };
+      body.addEventListener('pointerup', end);
+      body.addEventListener('pointercancel', end);
+    }
+
     /**
      * 打开表格浮窗：可滚动容器 + 表格克隆 + 头部（标题/行列数/复制/关闭）。
      * 克隆而不是移动原表格，聊天里的表格保持不变。
@@ -252,6 +507,49 @@ window.__ModuleLoader__.load({
       panel.appendChild(body);
       overlay.appendChild(panel);
 
+      // 拖拽改尺寸 + 拖标题栏移动 + 内容溢出拖拽平移 + Ctrl+滚轮缩放
+      attachResize(panel, overlay);
+      attachMove(panel, overlay);
+      attachPan(body, overlay);
+
+      var zoom = 1;
+      var applyZoom = function (z) {
+        zoom = clamp(z, ZOOM_MIN, ZOOM_MAX);
+        clone.style.zoom = String(zoom);
+        small.textContent = rowCount + ' ' + LABELS.rowsCols + ' ' + colCount
+          + (Math.abs(zoom - 1) > 0.001 ? ' \u00b7 ' + Math.round(zoom * 100) + '%' : '');
+      };
+      applyZoom(1); // 不继承上次的缩放，每次都从 100% 开始
+      refreshGrabbable(body);
+
+      // Ctrl+滚轮：缩放表格字体（阻止浏览器整页缩放；缩放不写入 localStorage）
+      var onWheel = function (e) {
+        if (!e.ctrlKey) return;
+        if (typeof e.preventDefault === 'function') e.preventDefault();
+        applyZoom(e.deltaY < 0 ? zoom + ZOOM_STEP : zoom - ZOOM_STEP);
+      };
+      panel.addEventListener('wheel', onWheel, { passive: false });
+
+      var onWindowResize = function () {
+        var maxW = viewportW() - POPUP_MARGIN;
+        var maxH = viewportH() - POPUP_MARGIN;
+        var w = panel.offsetWidth;
+        var h = panel.offsetHeight;
+        if (w > maxW || h > maxH) {
+          panel.style.width = Math.min(w, maxW) + 'px';
+          panel.style.height = Math.min(h, maxH) + 'px';
+        }
+        clampPanelPosition(panel);
+        refreshGrabbable(body);
+      };
+      overlay._cleanups = [];
+      if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+        window.addEventListener('resize', onWindowResize);
+        overlay._cleanups.push(function () {
+          window.removeEventListener('resize', onWindowResize);
+        });
+      }
+
       lastTrigger = { bodyOverflow: document.body.style.overflow };
       document.body.style.overflow = 'hidden';
 
@@ -259,6 +557,11 @@ window.__ModuleLoader__.load({
         if (event.key === 'Escape') closePopup();
       };
       overlay.addEventListener('click', function (event) {
+        // 拖拽（改尺寸/平移）后松手落在遮罩上会产生一次 click，需吞掉避免误关
+        if (overlay._suppressClick) {
+          overlay._suppressClick = false;
+          return;
+        }
         if (event.target === overlay) closePopup();
       });
       document.addEventListener('keydown', onKey);
@@ -266,6 +569,10 @@ window.__ModuleLoader__.load({
 
       activePopup = overlay;
       document.body.appendChild(overlay);
+      // 每次打开都按表格自然宽度自适应，并按实际尺寸重新居中（不继承上次的尺寸/位置）
+      applyAdaptiveWidth(panel, clone);
+      centerPanel(panel);
+      refreshGrabbable(body);
       closeBtn.focus();
     }
 
@@ -374,6 +681,12 @@ window.__ModuleLoader__.load({
     exports.upgradeTable = upgradeTable;
     exports.upgradeTables = upgradeTables;
     exports.startEnhancer = startEnhancer;
+    exports.attachResize = attachResize;
+    exports.attachMove = attachMove;
+    exports.attachPan = attachPan;
+    exports.applyAdaptiveWidth = applyAdaptiveWidth;
+    exports.clampPanelPosition = clampPanelPosition;
+    exports.refreshGrabbable = refreshGrabbable;
     return module.exports;
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-plugin-table-zoom",
   "description": "DSH 聊天表格浮窗插件：聊天里 markdown 表格太长（行多/超宽）看不完时，表格上方自动出现「浮窗查看」按钮，点击弹出可滚动的小浮窗完整显示表格，并支持一键复制为 Markdown。纯前端 DOM 增强，不改核心包、不注册工具、无服务端逻辑。",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/scripts/smoke-client.mjs

@@ -6,7 +6,10 @@
  *   2. upgradeTable 在长表容器后注入「浮窗查看」按钮行，短表不注入；
  *   3. openPopup 创建浮窗（标题含行列数、表格克隆、关闭按钮），
  *      closePopup 关闭并还原 body 滚动；
- *   4. 表格克隆在浮窗内不会被再次增强（跳过 .dstz-popup）。
+ *   4. 表格克隆在浮窗内不会被再次增强（跳过 .dstz-popup）；
+ *   5. 右下角改尺寸手柄可拖拽改面板大小；内容溢出时正文可拖拽平移；
+ *      标题栏可拖拽移动浮窗（不越出视口）；Ctrl+滚轮缩放表格字体；
+ *      每次打开都按内容自适应宽度并居中（不继承上次的尺寸/位置/缩放）。
  *
  * 运行：node scripts/smoke-client.mjs
  */
@@ -251,4 +254,148 @@ ok('copyText 写入剪贴板', async () => {
   assert.equal(globalThis.__copied, '| a |\n| --- |')
 })
 
+// 5) 浮窗改尺寸 + 自适应 + 拖拽平移（无布局记忆：每次打开都自适应并居中）
+
+ok('openPopup 挂载右下角改尺寸手柄并可拖拽', () => {
+  mod.closePopup()
+  const table = makeEl('table')
+  table.rows = []
+  mod.openPopup(table)
+  const popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  const panel = popup.children[0]
+  const handle = panel.children.find((c) => c.className === 'dstz-resizeSE')
+  assert.ok(handle !== undefined, 'resize handle not mounted')
+  // 假 DOM 无真实布局：显式给一个起始尺寸，验证拖拽按 delta 改大小
+  panel.style.width = '800px'
+  panel.style.height = '400px'
+  panel.getBoundingClientRect = () => ({
+    width: parseInt(panel.style.width, 10) || 800,
+    height: parseInt(panel.style.height, 10) || 400,
+  })
+  handle.dispatch('pointerdown', { button: 0, clientX: 100, clientY: 100, pointerId: 1 })
+  handle.dispatch('pointermove', { clientX: 260, clientY: 160 })
+  assert.equal(panel.style.width, '960px')
+  assert.equal(panel.style.height, '460px')
+  assert.equal(panel.style.maxHeight, 'none')
+  assert.ok(popup._suppressClick === true, 'drag should suppress overlay close')
+  handle.dispatch('pointerup', {})
+  assert.ok(popup._suppressClick === false, 'suppress flag reset after drag')
+  mod.closePopup()
+})
+
+ok('每次打开不继承上次尺寸，始终按内容自适应', () => {
+  mod.closePopup()
+  const table = makeEl('table')
+  table.rows = []
+  mod.openPopup(table)
+  let popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  let panel = popup.children[0]
+  assert.equal(panel.style.width, '320px', '首次打开走自适应（假 DOM 无布局 → 下限 320）')
+  // 模拟当次手动改大
+  panel.style.width = '800px'
+  panel.style.height = '500px'
+  mod.closePopup()
+  // 重新打开：应回到自适应宽度，而不是继承 800px
+  mod.openPopup(table)
+  popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  panel = popup.children[0]
+  assert.equal(panel.style.width, '320px', '再次打开仍自适应，不继承上次尺寸')
+  assert.notEqual(panel.style.height, '500px')
+  mod.closePopup()
+})
+
+ok('溢出时正文可拖拽平移', () => {
+  mod.closePopup()
+  const table = makeEl('table')
+  table.rows = []
+  mod.openPopup(table)
+  const popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  const body = popup.children[0].children[1]
+  body.scrollWidth = 1200
+  body.clientWidth = 600
+  body.scrollHeight = 400
+  body.clientHeight = 300
+  body.scrollLeft = 300
+  body.scrollTop = 100
+  mod.refreshGrabbable(body)
+  assert.ok(body.classList.contains('dstz-grabbable'), 'overflow should show grab cursor')
+  body.dispatch('pointerdown', { button: 0, clientX: 10, clientY: 10, pointerId: 1 })
+  body.dispatch('pointermove', { clientX: 110, clientY: 60 })
+  assert.ok(body.classList.contains('dstz-panning'), 'panning class while dragging')
+  assert.equal(body.scrollLeft, 200)
+  assert.equal(body.scrollTop, 50)
+  assert.ok(popup._suppressClick === true, 'pan should suppress overlay close')
+  body.dispatch('pointerup', {})
+  assert.ok(!body.classList.contains('dstz-panning'), 'panning class cleared on release')
+  assert.ok(popup._suppressClick === false, 'suppress flag reset after pan')
+  mod.closePopup()
+})
+
+ok('标题栏可拖拽移动浮窗（不越出视口）', () => {
+  mod.closePopup()
+  const table = makeEl('table')
+  table.rows = []
+  mod.openPopup(table)
+  const popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  const panel = popup.children[0]
+  const header = panel.children[0]
+  assert.equal(panel.style.width, '320px', '打开即自适应（假 DOM 无布局 → 下限 320）')
+  // 假 DOM 无真实布局：显式给起始位置，验证拖拽按 delta 移动
+  panel.style.left = '160px'
+  panel.style.top = '40px'
+  panel.getBoundingClientRect = () => ({
+    width: parseInt(panel.style.width, 10) || 800,
+    height: parseInt(panel.style.height, 10) || 400,
+    left: parseInt(panel.style.left, 10) || 300,
+    top: parseInt(panel.style.top, 10) || 200,
+  })
+  const startLeft = parseInt(panel.style.left, 10)
+  const startTop = parseInt(panel.style.top, 10)
+  header.dispatch('pointerdown', { button: 0, clientX: 10, clientY: 10, pointerId: 1 })
+  header.dispatch('pointermove', { clientX: 50, clientY: 30 })
+  assert.ok(header.classList.contains('dstz-dragging'), 'dragging class while moving')
+  assert.equal(parseInt(panel.style.left, 10), startLeft + 40, 'left follows drag delta')
+  assert.equal(parseInt(panel.style.top, 10), startTop + 20, 'top follows drag delta')
+  assert.ok(popup._suppressClick === true, 'move should suppress overlay close')
+  header.dispatch('pointerup', {})
+  assert.ok(!header.classList.contains('dstz-dragging'), 'dragging class cleared on release')
+  assert.ok(popup._suppressClick === false, 'suppress flag reset after move')
+  mod.closePopup()
+})
+
+ok('Ctrl+滚轮缩放表格字体', () => {
+  mod.closePopup()
+  const table = makeEl('table')
+  table.rows = [{ cells: [] }, { cells: [] }]
+  mod.openPopup(table)
+  const popup = documentEl.body.children.find((c) => c.className === 'dstz-popup')
+  const panel = popup.children[0]
+  const clone = panel.children[1].children[0]
+  const small = panel.children[0].children[0].children[0]
+  assert.equal(clone.style.zoom, '1')
+  assert.ok(!small.textContent.includes('%'), 'zoom 1 时不显示百分比')
+  panel.dispatch('wheel', { ctrlKey: true, deltaY: -100 })
+  assert.equal(clone.style.zoom, '1.1')
+  assert.ok(small.textContent.includes('110%'), '标题显示缩放百分比')
+  panel.dispatch('wheel', { ctrlKey: true, deltaY: 100 })
+  assert.equal(clone.style.zoom, '1')
+  assert.ok(!small.textContent.includes('%'), '回到 100% 后百分比消失')
+  mod.closePopup()
+})
+
+ok('applyAdaptiveWidth 按表格自然宽度自适应（窄表收缩、宽表铺满视口）', () => {
+  const panel = makeEl('div')
+  const clone = makeEl('table')
+  clone.offsetWidth = 500
+  mod.applyAdaptiveWidth(panel, clone)
+  assert.equal(panel.style.width, '538px')
+  // 超级大表：铺满视口可用宽度（假 DOM 视口 1280 - 留白 48 = 1232）
+  clone.offsetWidth = 3000
+  mod.applyAdaptiveWidth(panel, clone)
+  assert.equal(panel.style.width, '1232px')
+  clone.offsetWidth = 0
+  mod.applyAdaptiveWidth(panel, clone)
+  assert.equal(panel.style.width, '320px')
+})
+
 console.log(`[dsh-plugin-table-zoom] smoke-client: ${passed} passed`)

package//350/256/276/350/256/241/350/257/264/346/230/216.md

@@ -44,10 +44,28 @@ cordis.patch.yml         挂载一行，交 profile 的 dsh.profile.bundles 自
 
 - 打开：锁定 body 滚动；Esc / 关闭按钮 / 点击遮罩关闭并还原滚动；
 - 头部：标题「表格 · N 行 × M 列」+「复制为 Markdown」+ 关闭按钮；
-- 正文：独立滚动（横竖），表格克隆带 `dstz-table` 类，样式全部走主题 CSS 变量。
+- 正文：独立滚动（横竖），表格克隆带 `dstz-table` 类，样式全部走主题 CSS 变量；
+- **改尺寸**：右下角有拖拽手柄，按住可自由调整浮窗大小（最小 320×200，
+  上限为视口减去遮罩留白）；
+- **每次打开自适应**：浮窗**不记忆任何布局**——尺寸按表格自然宽度自适应
+  （下限 320，窄表不撑满、超级大表铺满视口可用宽度）、位置居中、缩放 100%；
+  手动拖拽（改大小/移动/缩放）只影响当次打开，关掉再开即回到自适应；
+- **拖拽移动**：按住标题栏（按钮除外）可拖动浮窗位置，位置限制在视口内、
+  不越出页面；
+- **Ctrl+滚轮缩放**：浮窗内按住 Ctrl 滚动滚轮可放大/缩小表格字体
+  （60%–250%，步进 10%），标题栏实时显示百分比；缩放不记忆，
+  每次打开都从 100% 开始；
+- **滚动条**：正文滚动条加深加粗（WebKit 伪元素 + Firefox `scrollbar-color`），
+  浅色主题下也清晰可见；
+- **拖拽平移**：表格内容溢出正文时，鼠标/触控笔按住表格即可左右/上下拖动
+  滚动（grab/grabbing 光标提示）；越过 4px 阈值才视为拖动，避免干扰文本
+  选择；触屏保留浏览器原生滚动；拖完松手落在遮罩上不会误关浮窗；
+- **列宽上限**：与核心渲染器 `tableScroll` 一致（`max-width:min(30vw,320px)`、
+  `min-width:100px`），超宽列在浮窗内收缩换行，表整体不再超出浮窗。
 
 ## 边界与不做的事
 
 - 只认 `tableScroll` 容器内的表格；浮窗内克隆表与 image-tools lightbox 内的表格跳过；
 - 不提供服务端工具/路由/配置；无 React 依赖（零运行时依赖）；
-- 复制为 Markdown 优先 clipboard API，失败时 execCommand 兜底。
+- 复制为 Markdown 优先 clipboard API，失败时 execCommand 兜底；
+- 不写 localStorage：浮窗布局（尺寸/位置/缩放）不跨次记忆，每次打开都自适应。