dsh-plugin-image-tools 0.4.1 → 0.6.1

package/README.md

@@ -93,6 +93,15 @@ cordis.patch.yml      bundle 补丁（挂载行）
 docs/                 效果图（README 展示用）
 ```
 
+## 配置
+
+无需任何配置，安装即用：
+
+- 不读取环境变量，不需要 API Key / token，不写配置文件；
+- 图片来源三种形态（本地路径 / http(s) URL / base64 data URI）直接可用，无白名单配置；
+- 图片内联预览走同源字节路由（loopback），无外部服务依赖；
+- 包自带 `cordis.patch.yml` 挂载行，经 `dsh.profile.bundles` 自动应用，无需手动改配置。
+
 ## 安装
 
 ```powershell
@@ -102,6 +111,15 @@ dsh plugin --profile web add dsh-plugin-image-tools
 dsh plugin --profile web add github:Pasumao/dsh-plugin-image-tools
 ```
 
+源码安装（本地开发 / 调试）：
+
+```bash
+git clone https://github.com/Pasumao/dsh-plugin-image-tools.git
+cd dsh-plugin-image-tools
+npm install
+# 以 link: 方式挂载进 profile
+```
+
 装完重启 dsh（launcher），然后刷新浏览器页面。包自带 `cordis.patch.yml` 挂载行，
 经 `dsh.profile.bundles` 自动应用（与 dsh-notify 同机制），无需手动改配置。
 
@@ -163,6 +181,25 @@ dsh plugin --profile web add github:Pasumao/dsh-plugin-image-tools
 - 内嵌图片的 markdown URL 是绝对地址（`http://host:port`，由服务端监听配置推导）；
   若 GUI 经过反向代理/换端口访问，历史消息里的图片地址可能失效（同选择卡的限制）。
 
+## 相关插件
+
+本插件属于 **Pasumao 的 dsh 插件生态**，同系列已发布插件可搭配使用：
+
+| 插件（npm） | GitHub | 说明 |
+|---|---|---|
+| [dsh-notify](https://www.npmjs.com/package/dsh-notify) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-notify) | Windows 原生通知 + 系统托盘 |
+| [dsh-plugin-choice-refresh](https://www.npmjs.com/package/dsh-plugin-choice-refresh) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-choice-refresh) | 选择增强：重新生成选项 / 更多选项 |
+| [dsh-plugin-dev-kb](https://www.npmjs.com/package/dsh-plugin-dev-kb) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-dev-kb) | 插件开发知识库（官方文档完整镜像 + 技能） |
+| [dsh-plugin-table-zoom](https://www.npmjs.com/package/dsh-plugin-table-zoom) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-table-zoom) | 聊天长表格浮窗查看 + 一键复制 Markdown |
+| [dsh-plugin-workbench](https://www.npmjs.com/package/dsh-plugin-workbench) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-workbench) | VS Code 风格文件浏览器 + 可编辑预览 |
+
+> 本系列其余插件见 [Pasumao · dsh 插件](https://github.com/Pasumao)；觉得好用欢迎到 GitHub 点 ⭐。
+
+## AI 生成声明
+
+代码与文档由 AI 辅助生成（DeepSeek Harness），均经人工审查与实机验证
+（`npm run smoke`：selfcheck + 假 ctx 服务端全链路 + 假客户端渲染）。
+
 ## 许可证
 
 [MIT](./LICENSE)

package/lib/client.js

@@ -70,15 +70,21 @@ window.__ModuleLoader__.load({
       '.dshpick-btn-outline:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}',
       '.dshpick-btn-primary{background:var(--dsw-alias-interactive-bg-active);color:var(--dsw-alias-label-primary-inverted)}',
       '.dshpick-btn-primary:hover:not(:disabled){filter:brightness(1.08)}',
-      '.dshpick-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,10,18,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:52px 24px 28px;cursor:zoom-out}',
-      '.dshpick-lightboxClose{position:absolute;top:16px;right:18px;width:34px;height:34px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;place-items:center;display:grid;font-size:16px;line-height:1;padding:0}',
+      '.dshpick-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(8,10,18,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:52px 24px 28px;cursor:zoom-out;overflow:hidden}',
+      '.dshpick-lightboxClose{position:absolute;top:16px;right:18px;width:34px;height:34px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;place-items:center;display:grid;font-size:16px;line-height:1;padding:0;z-index:2}',
       '.dshpick-lightboxClose:hover{background:rgba(255,255,255,.18)}',
-      '.dshpick-lightboxFigure{margin:0;max-width:min(92vw,1100px);display:flex;flex-direction:column;align-items:center;gap:10px}',
-      '.dshpick-lightboxFigure img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.5)}',
+      '.dshpick-lightboxFigure{margin:0;max-width:min(92vw,1100px);display:flex;flex-direction:column;align-items:center;gap:10px;transform-origin:0 0;will-change:transform;cursor:zoom-in}',
+      '.dshpick-lightboxFigure.dshpick-grabbing{cursor:grabbing;user-select:none}',
+      '.dshpick-lightboxFigure img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:inherit}',
+      '.dshpick-zoomBar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:2px;padding:4px 6px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);border-radius:999px;background:rgba(8,10,18,.72);box-shadow:0 4px 16px rgba(0,0,0,.35)}',
+      '.dshpick-zoomBtn{width:28px;height:28px;border:none;border-radius:999px;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;font-size:15px;line-height:1}',
+      '.dshpick-zoomBtn:hover{background:rgba(255,255,255,.16)}',
+      '.dshpick-zoomPct{min-width:46px;text-align:center;color:#fff;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}',
       '.dshpick-lightboxCap{color:var(--dsw-alias-label-primary);font-size:13px;line-height:18px;text-align:center;overflow-wrap:anywhere}',
       '.dshpick-lightboxCap small{display:block;color:var(--dsw-alias-label-secondary);font-size:11px;line-height:15px;margin-top:2px}',
       '.dshimg-inline{max-width:min(100%,560px);max-height:420px;width:auto;height:auto;border-radius:14px;border:1px solid var(--dsw-alias-border-l2-darkmode-thin);background:var(--dsw-alias-interactive-bg-hover);margin:8px 0;display:block;cursor:zoom-in;object-fit:contain}',
       '.dshimg-inline[data-failed]{opacity:.45;cursor:default;filter:grayscale(1)}',
+      '.dshimg-zoom{cursor:zoom-in}',
       '@media (width<=720px){.dshpick-card{border-radius:16px}.dshpick-cards{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.dshpick-lightbox{padding:44px 12px 20px}}'
     ].join('');
     var tagId = 'dsh-plugin-image-tools/pick.module.css';
@@ -287,6 +293,8 @@ window.__ModuleLoader__.load({
      * 图片放大查看层。zoom 为 null 时渲染 null。
      * 打开期间：锁定 body 滚动、焦点移到关闭按钮、Esc 关闭；
      * 关闭时恢复滚动并把焦点还给触发按钮（触发按钮 ref 由父级持有，这里不处理）。
+     * 支持滚轮/按钮缩放、双击切换 1x/2.5x、放大后拖拽平移（与命令式
+     * openImageZoom 同一套缩放参数与样式）。
      * @param {object} props - { zoom: { src, label, description? }|null, onClose, t }。
      */
     function Lightbox(props) {
@@ -294,23 +302,146 @@ window.__ModuleLoader__.load({
       var onClose = props.onClose;
       var t = props.t;
       var closeRef = react.useRef(null);
+      var overlayRef = react.useRef(null);
+      var figureRef = react.useRef(null);
+      var imgRef = react.useRef(null);
+      var stateRef = react.useRef({ scale: 1, tx: 0, ty: 0 });
+      var pctState = react.useState('100%');
+      var pct = pctState[0];
+      var setPct = pctState[1];
+      var labels = react.useMemo(zoomLabels, []);
+      var apiRef = react.useRef({ zoomBy: function () {}, zoomTo: function () {} });
+
+      function viewSize() {
+        return { viewW: window.innerWidth, viewH: window.innerHeight };
+      }
+      function currentBase() {
+        var img = imgRef.current;
+        var nw = img === null ? 0 : img.naturalWidth;
+        var nh = img === null ? 0 : img.naturalHeight;
+        if (!nw || !nh) return null;
+        var view = viewSize();
+        return fitBaseSize(nw, nh, view.viewW, view.viewH);
+      }
+      function applyZoom() {
+        var state = stateRef.current;
+        var figure = figureRef.current;
+        if (figure === null) return;
+        var base = currentBase();
+        if (base === null) {
+          figure.style.transform = '';
+          return;
+        }
+        var pan = clampPan(state.tx, state.ty, state.scale, base, viewSize());
+        state.tx = pan.tx;
+        state.ty = pan.ty;
+        figure.style.transform = (state.scale === 1 && state.tx === 0 && state.ty === 0)
+          ? ''
+          : 'translate(' + state.tx + 'px,' + state.ty + 'px) scale(' + state.scale + ')';
+        setPct(Math.round(state.scale * 100) + '%');
+      }
+      function zoomBy(factor, clientX, clientY) {
+        var state = stateRef.current;
+        var base = currentBase();
+        if (base === null) return;
+        var view = viewSize();
+        var nextScale = clampZoom(state.scale * factor);
+        if (nextScale === state.scale) return;
+        var bx = (view.viewW - base.w0) / 2;
+        var by = (view.viewH - base.h0) / 2;
+        var cx, cy;
+        if (clientX === void 0) {
+          cx = state.tx + (base.w0 * state.scale) / 2;
+          cy = state.ty + (base.h0 * state.scale) / 2;
+        } else {
+          cx = clientX - bx;
+          cy = clientY - by;
+        }
+        var next = zoomTranslate(state.tx, state.ty, state.scale, nextScale, cx, cy);
+        state.tx = next.tx;
+        state.ty = next.ty;
+        state.scale = nextScale;
+        applyZoom();
+      }
+      function zoomTo(target) {
+        zoomBy(target / stateRef.current.scale);
+      }
+      apiRef.current = { zoomBy: zoomBy, zoomTo: zoomTo };
+
       react.useEffect(function () {
         if (zoom === null) return;
         var previous = document.body.style.overflow;
         document.body.style.overflow = 'hidden';
         var focusTarget = closeRef.current;
         if (focusTarget !== null && typeof focusTarget.focus === 'function') focusTarget.focus();
+        var overlay = overlayRef.current;
+        var figure = figureRef.current;
+        function onWheel(event) {
+          if (event.cancelable) event.preventDefault();
+          apiRef.current.zoomBy(wheelZoomFactor(event.deltaY), event.clientX, event.clientY);
+        }
+        var drag = null;
+        function onPointerDown(event) {
+          var state = stateRef.current;
+          if (state.scale <= 1.01) return;
+          drag = { x: event.clientX, y: event.clientY, tx: state.tx, ty: state.ty };
+          if (figure !== null) figure.classList.add('dshpick-grabbing');
+          if (figure !== null && typeof figure.setPointerCapture === 'function') figure.setPointerCapture(event.pointerId);
+          event.preventDefault();
+        }
+        function onPointerMove(event) {
+          var state = stateRef.current;
+          if (drag === null || figure === null) return;
+          state.tx = drag.tx + (event.clientX - drag.x);
+          state.ty = drag.ty + (event.clientY - drag.y);
+          applyZoom();
+        }
+        function onPointerUp() {
+          if (drag === null) return;
+          drag = null;
+          if (figure !== null) figure.classList.remove('dshpick-grabbing');
+        }
+        function onDoubleClick(event) {
+          var state = stateRef.current;
+          event.preventDefault();
+          if (state.scale > 1.01) apiRef.current.zoomTo(1);
+          else apiRef.current.zoomBy(2.5, event.clientX, event.clientY);
+        }
         function onKeyDown(event) {
           if (event.key === 'Escape') onClose();
+          else if (event.key === '+' || event.key === '=') { event.preventDefault(); apiRef.current.zoomBy(1.25); }
+          else if (event.key === '-' || event.key === '_') { event.preventDefault(); apiRef.current.zoomBy(1 / 1.25); }
+          else if (event.key === '0') { event.preventDefault(); apiRef.current.zoomTo(1); }
         }
         document.addEventListener('keydown', onKeyDown);
+        if (overlay !== null) overlay.addEventListener('wheel', onWheel, { passive: false });
+        if (figure !== null) {
+          figure.addEventListener('pointerdown', onPointerDown);
+          figure.addEventListener('pointermove', onPointerMove);
+          figure.addEventListener('pointerup', onPointerUp);
+          figure.addEventListener('pointercancel', onPointerUp);
+          figure.addEventListener('dblclick', onDoubleClick);
+        }
+        // 视口变化（含 Ctrl+滚轮引起的浏览器页面缩放）时重新推导基准并重新钳制平移
+        window.addEventListener('resize', applyZoom);
         return function () {
           document.body.style.overflow = previous;
           document.removeEventListener('keydown', onKeyDown);
+          window.removeEventListener('resize', applyZoom);
+          if (overlay !== null) overlay.removeEventListener('wheel', onWheel);
+          if (figure !== null) {
+            figure.removeEventListener('pointerdown', onPointerDown);
+            figure.removeEventListener('pointermove', onPointerMove);
+            figure.removeEventListener('pointerup', onPointerUp);
+            figure.removeEventListener('pointercancel', onPointerUp);
+            figure.removeEventListener('dblclick', onDoubleClick);
+          }
         };
-      }, [zoom, onClose]);
+      }, [zoom, onClose, setPct]);
+
       if (zoom === null) return null;
       return jsxs('div', {
+        ref: overlayRef,
         className: 'dshpick-lightbox',
         role: 'dialog',
         'aria-modal': 'true',
@@ -327,10 +458,11 @@ window.__ModuleLoader__.load({
             children: '\u2715'
           }),
           jsxs('figure', {
+            ref: figureRef,
             className: 'dshpick-lightboxFigure',
             onClick: function (event) { event.stopPropagation(); },
             children: [
-              jsx('img', { src: zoom.src, alt: zoom.label }),
+              jsx('img', { ref: imgRef, src: zoom.src, alt: zoom.label }),
               jsxs('figcaption', {
                 className: 'dshpick-lightboxCap',
                 children: [
@@ -339,20 +471,56 @@ window.__ModuleLoader__.load({
                 ]
               })
             ]
+          }),
+          jsxs('div', {
+            className: 'dshpick-zoomBar',
+            onClick: function (event) { event.stopPropagation(); },
+            children: [
+              jsx('button', {
+                type: 'button',
+                className: 'dshpick-zoomBtn',
+                'aria-label': labels.out,
+                title: labels.out,
+                onClick: function () { apiRef.current.zoomBy(1 / 1.25); },
+                children: '\u2212'
+              }),
+              jsx('span', { className: 'dshpick-zoomPct', children: pct }),
+              jsx('button', {
+                type: 'button',
+                className: 'dshpick-zoomBtn',
+                'aria-label': labels.in,
+                title: labels.in,
+                onClick: function () { apiRef.current.zoomBy(1.25); },
+                children: '+'
+              }),
+              jsx('button', {
+                type: 'button',
+                className: 'dshpick-zoomBtn',
+                'aria-label': labels.reset,
+                title: labels.reset,
+                onClick: function () { apiRef.current.zoomTo(1); },
+                children: '\u21BA'
+              })
+            ]
           })
         ]
       });
     }
 
     // ------------------------------------------------------------------
-    // 回复内嵌图片增强：show_images 返回的 markdown 图片行由核心渲染器
-    // 原生显示为 <img src="/dsh-plugin-image-tools/show/<id>/<i>">；这里通过
-    // MutationObserver 发现这类图片并做渐进增强：加样式类、悬停提示、
-    // 点击放大（复用 .dshpick-lightbox 样式，命令式 DOM，不依赖 React）。
+    // 聊天栏图片放大增强：聊天栏里显示的图片都支持点击放大——包括插件自己的
+    // show/attachment 图片（markdown 里是绝对 URL，注意不能用 src^= 前缀匹配），
+    // 以及模型回复 markdown 渲染出的任意 http(s) 图片。核心渲染器原生显示
+    // <img>，这里通过 MutationObserver 发现图片做渐进增强（加样式类/悬停提示），
+    // 点击统一走 document 级事件委托（isZoomableChatImage 判定），放大复用
+    // .dshpick-lightbox 样式（命令式 DOM，不依赖 React）。
     // 纯 DOM 单节点变更：不插入/移除 React 管理的结构，重渲染时安全。
     // ------------------------------------------------------------------
     var IMAGE_SHOW_PREFIX = '/dsh-plugin-image-tools/show/';
     var IMAGE_TOKEN_PREFIX = 'dshimg:';
+    var ATTACHMENT_PREFIX = '/dsh-plugin-image-tools/attachment/';
+    /** 聊天消息列容器（dsh-client-ui-conversation ChatView 的稳定语义属性）。 */
+    var CHAT_FLOW_SELECTOR = '[data-chat-flow]';
     var ZOOM_CLOSE_LABEL = (typeof document !== 'undefined' && (document.documentElement.lang || '').toLowerCase().indexOf('zh') === 0)
       ? '\u5173\u95ed'
       : 'Close';
@@ -362,6 +530,11 @@ window.__ModuleLoader__.load({
       return typeof src === 'string' && src.indexOf(IMAGE_SHOW_PREFIX) >= 0;
     }
 
+    /** 是否插件图片服务路由的 src（show 内嵌或 attachment 回显，含绝对 URL）。 */
+    function isPluginImageSrc(src) {
+      return typeof src === 'string' && (src.indexOf(IMAGE_SHOW_PREFIX) >= 0 || src.indexOf(ATTACHMENT_PREFIX) >= 0);
+    }
+
     /** 从文本里提取 dshimg: 占位符的 attachmentId（纯函数，供冒烟测试）。 */
     function extractImageTokenIds(text) {
       if (typeof text !== 'string') return [];
@@ -382,7 +555,8 @@ window.__ModuleLoader__.load({
     var scannedTexts = typeof WeakMap === 'undefined' ? null : new WeakMap();
 
     /**
-     * 把文本节点里的 dshimg:<id> 占位符替换为可放大的图片元素（盲模型收图回显）。
+     * 把文本节点里的 dshimg:<id> 占位符替换为图片元素（盲模型收图回显）。
+     * 点击放大交给 document 级委托处理，这里只建图并做加载失败降级。
      * 只做文本节点级替换，不触碰 React 管理的元素结构。
      */
     function upgradeBubbleTexts() {
@@ -408,14 +582,11 @@ window.__ModuleLoader__.load({
           if (m.index > cursor) frag.appendChild(document.createTextNode(value.slice(cursor, m.index)));
           var img = document.createElement('img');
           img.className = 'dshimg-inline dshimg-received';
-          img.src = '/dsh-plugin-image-tools/attachment/' + m[1];
+          img.dataset.dshimg = '1';
+          img.src = ATTACHMENT_PREFIX + m[1];
           img.alt = '\u7528\u6237\u53d1\u6765\u7684\u56fe\u7247';
+          img.title = '\u7528\u6237\u53d1\u6765\u7684\u56fe\u7247\uff08\u70b9\u51fb\u653e\u5927\uff09';
           img.loading = 'lazy';
-          img.addEventListener('click', function (event) {
-            event.preventDefault();
-            event.stopPropagation();
-            openImageZoom(img.src, '\u7528\u6237\u53d1\u6765\u7684\u56fe\u7247\uff08\u70b9\u51fb\u653e\u5927\uff09');
-          });
           img.addEventListener('error', function () { img.dataset.failed = '1'; });
           frag.appendChild(img);
           cursor = m.index + m[0].length;
@@ -425,11 +596,109 @@ window.__ModuleLoader__.load({
       }
     }
 
-    /** 打开命令式 Lightbox 放大查看（复用选择卡的 .dshpick-lightbox 样式）。 */
+    // ------------------------------------------------------------------
+    // 放大层内的图片缩放：滚轮/按钮/双击缩放 + 拖拽平移（纯函数，供冒烟测试）。
+    // 模型：图像由 flex 居中，transform-origin 0 0，屏幕位置 = 布局左上角 + 平移
+    // + 局部坐标 × 缩放；基准 base 在 scale=1 且无 transform 时测量一次。
+    // ------------------------------------------------------------------
+    /** 缩放范围 [0.25x, 12x]（相对适配视口的基准尺寸）。 */
+    function clampZoom(scale) {
+      return Math.min(12, Math.max(0.25, scale));
+    }
+
+    /** 滚轮缩放因子：deltaY<0 放大；指数平滑，每格约 1.2 倍。 */
+    function wheelZoomFactor(deltaY) {
+      return Math.exp(-deltaY * 0.0018);
+    }
+
+    /**
+     * 光标中心缩放：缩放后仍让光标下的图像点保持不动。
+     * @param {number} tx - 当前平移 x（相对图像布局左上角）。
+     * @param {number} ty - 当前平移 y。
+     * @param {number} scale - 当前缩放。
+     * @param {number} nextScale - 目标缩放。
+     * @param {number} cx - 光标相对图像左上角的 x。
+     * @param {number} cy - 光标相对图像左上角的 y。
+     * @returns {{tx:number,ty:number}} 新平移。
+     */
+    function zoomTranslate(tx, ty, scale, nextScale, cx, cy) {
+      var px = (cx - tx) / scale;
+      var py = (cy - ty) / scale;
+      return { tx: cx - px * nextScale, ty: cy - py * nextScale };
+    }
+
+    /**
+     * 平移钳制（图像由 flex 居中、transform-origin 0 0；基准尺寸由 fitBaseSize
+     * 从图片自然尺寸 + 视口推导，不依赖一次性 DOM 实测——实测会在图片未加载或
+     * 视口变化后失效，导致平移被钳死、拖不到图片右侧）：
+     * 图像小于视口时保持居中（t=0）；放大到超出视口后限制平移，保证图像始终
+     * 覆盖视口（左右/上下边缘都能拖到，不会整张拖出屏幕）。
+     * @param {number} tx - 当前平移 x。
+     * @param {number} ty - 当前平移 y。
+     * @param {number} scale - 当前缩放。
+     * @param {object} base - 基准尺寸 { w0, h0 }（scale=1 时图像适配视口的尺寸）。
+     * @param {object} view - 视口 { viewW, viewH }。
+     * @returns {{tx:number,ty:number}} 钳制后的平移。
+     */
+    function clampPan(tx, ty, scale, base, view) {
+      var w = base.w0 * scale;
+      var h = base.h0 * scale;
+      var bx = (view.viewW - base.w0) / 2;
+      var by = (view.viewH - base.h0) / 2;
+      var minTx = Math.min(0, view.viewW - bx - w);
+      var maxTx = Math.max(0, -bx);
+      var minTy = Math.min(0, view.viewH - by - h);
+      var maxTy = Math.max(0, -by);
+      return {
+        tx: Math.min(maxTx, Math.max(minTx, tx)),
+        ty: Math.min(maxTy, Math.max(minTy, ty))
+      };
+    }
+
+    /**
+     * 图片适配视口的基准尺寸（与 .dshpick-lightboxFigure img 的 CSS 约束一致：
+     * 最大宽 min(92vw, 1100px)、最大高 82vh，等比缩放）。
+     * @param {number} naturalW - 图片自然宽。
+     * @param {number} naturalH - 图片自然高。
+     * @param {number} viewW - 视口宽。
+     * @param {number} viewH - 视口高。
+     * @returns {{w0:number,h0:number}} scale=1 时的基准尺寸。
+     */
+    function fitBaseSize(naturalW, naturalH, viewW, viewH) {
+      var maxW = Math.min(0.92 * viewW, 1100);
+      var maxH = 0.82 * viewH;
+      var w = naturalW;
+      var h = naturalH;
+      if (w > maxW) {
+        h = h * maxW / w;
+        w = maxW;
+      }
+      if (h > maxH) {
+        w = w * maxH / h;
+        h = maxH;
+      }
+      return { w0: w, h0: h };
+    }
+
+    /** 放大层缩放控制按钮文案（按页面语言）。 */
+    function zoomLabels() {
+      var zh = typeof document !== 'undefined' && (document.documentElement.lang || '').toLowerCase().indexOf('zh') === 0;
+      return zh
+        ? { in: '放大', out: '缩小', reset: '重置为 100%' }
+        : { in: 'Zoom in', out: 'Zoom out', reset: 'Reset to 100%' };
+    }
+
+    /**
+     * 打开命令式 Lightbox 放大查看（复用选择卡的 .dshpick-lightbox 样式）。
+     * 支持：滚轮缩放（普通滚轮即可，光标中心）、−/+/重置按钮、双击切换 1x/2.5x、
+     * 放大后拖拽平移、快捷键 +/-/0/Esc。Ctrl+滚轮是浏览器级页面缩放，网页无法
+     * 拦截；事件到达页面时这里也会同步缩放图片并尽力 preventDefault。
+     */
     function openImageZoom(src, caption) {
       if (typeof document === 'undefined') return;
       var existing = document.querySelector('.dshpick-lightbox[data-dshimg-zoom]');
       if (existing !== null) existing.remove();
+      var labels = zoomLabels();
       var overlay = document.createElement('div');
       overlay.className = 'dshpick-lightbox';
       overlay.dataset.dshimgZoom = '1';
@@ -453,46 +722,230 @@ window.__ModuleLoader__.load({
       }
       overlay.appendChild(close);
       overlay.appendChild(figure);
+      // 缩放控制条：− / 百分比 / + / 重置
+      var pctEl = document.createElement('span');
+      pctEl.className = 'dshpick-zoomPct';
+      pctEl.textContent = '100%';
+      function zoomBtn(text, label, onClick) {
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'dshpick-zoomBtn';
+        button.textContent = text;
+        button.setAttribute('aria-label', label);
+        button.title = label;
+        button.addEventListener('click', function (event) {
+          event.stopPropagation();
+          onClick();
+        });
+        return button;
+      }
+      var bar = document.createElement('div');
+      bar.className = 'dshpick-zoomBar';
+      bar.appendChild(zoomBtn('\u2212', labels.out, function () { zoomBy(1 / 1.25); }));
+      bar.appendChild(pctEl);
+      bar.appendChild(zoomBtn('+', labels.in, function () { zoomBy(1.25); }));
+      bar.appendChild(zoomBtn('\u21BA', labels.reset, function () { zoomTo(1); }));
+      bar.addEventListener('click', function (event) { event.stopPropagation(); });
+      overlay.appendChild(bar);
+
+      // 缩放状态：基准尺寸每次从图片自然尺寸 + 当前视口实时推导（fitBaseSize），
+      // 不做一次性 DOM 实测——实测在图片未加载/视口变化后会失效，导致平移被
+      // 钳死、拖不到图片右侧。
+      var scale = 1;
+      var tx = 0;
+      var ty = 0;
+      function viewSize() {
+        return { viewW: window.innerWidth, viewH: window.innerHeight };
+      }
+      function currentBase() {
+        var nw = img.naturalWidth;
+        var nh = img.naturalHeight;
+        if (!nw || !nh) return null;
+        var view = viewSize();
+        return fitBaseSize(nw, nh, view.viewW, view.viewH);
+      }
+      function applyZoom() {
+        var base = currentBase();
+        if (base === null) {
+          figure.style.transform = '';
+          return;
+        }
+        var pan = clampPan(tx, ty, scale, base, viewSize());
+        tx = pan.tx;
+        ty = pan.ty;
+        figure.style.transform = (scale === 1 && tx === 0 && ty === 0)
+          ? ''
+          : 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
+        pctEl.textContent = Math.round(scale * 100) + '%';
+      }
+      function zoomBy(factor, clientX, clientY) {
+        var base = currentBase();
+        if (base === null) return;
+        var view = viewSize();
+        var nextScale = clampZoom(scale * factor);
+        if (nextScale === scale) return;
+        var bx = (view.viewW - base.w0) / 2;
+        var by = (view.viewH - base.h0) / 2;
+        var cx, cy;
+        if (clientX === void 0) {
+          cx = tx + (base.w0 * scale) / 2;
+          cy = ty + (base.h0 * scale) / 2;
+        } else {
+          cx = clientX - bx;
+          cy = clientY - by;
+        }
+        var next = zoomTranslate(tx, ty, scale, nextScale, cx, cy);
+        tx = next.tx;
+        ty = next.ty;
+        scale = nextScale;
+        applyZoom();
+      }
+      function zoomTo(target) {
+        zoomBy(target / scale);
+      }
+
+      // 滚轮缩放（普通滚轮；Ctrl+滚轮事件到达页面时也缩放图片）
+      function onWheel(event) {
+        if (event.cancelable) event.preventDefault();
+        zoomBy(wheelZoomFactor(event.deltaY), event.clientX, event.clientY);
+      }
+      // 放大后拖拽平移
+      var drag = null;
+      function onPointerDown(event) {
+        if (scale <= 1.01) return;
+        drag = { x: event.clientX, y: event.clientY, tx: tx, ty: ty };
+        figure.classList.add('dshpick-grabbing');
+        if (typeof figure.setPointerCapture === 'function') figure.setPointerCapture(event.pointerId);
+        event.preventDefault();
+      }
+      function onPointerMove(event) {
+        if (drag === null) return;
+        tx = drag.tx + (event.clientX - drag.x);
+        ty = drag.ty + (event.clientY - drag.y);
+        applyZoom();
+      }
+      function onPointerUp() {
+        if (drag === null) return;
+        drag = null;
+        figure.classList.remove('dshpick-grabbing');
+      }
+      function onDoubleClick(event) {
+        event.preventDefault();
+        if (scale > 1.01) zoomTo(1);
+        else zoomBy(2.5, event.clientX, event.clientY);
+      }
+
       var previous = document.body.style.overflow;
       document.body.style.overflow = 'hidden';
       var closeZoom = function () {
         overlay.remove();
         document.body.style.overflow = previous;
         document.removeEventListener('keydown', onKey);
+        window.removeEventListener('resize', applyZoom);
       };
       var onKey = function (event) {
         if (event.key === 'Escape') closeZoom();
+        else if (event.key === '+' || event.key === '=') { event.preventDefault(); zoomBy(1.25); }
+        else if (event.key === '-' || event.key === '_') { event.preventDefault(); zoomBy(1 / 1.25); }
+        else if (event.key === '0') { event.preventDefault(); zoomTo(1); }
       };
       overlay.addEventListener('click', closeZoom);
       figure.addEventListener('click', function (event) { event.stopPropagation(); });
       close.addEventListener('click', function (event) { event.stopPropagation(); closeZoom(); });
+      overlay.addEventListener('wheel', onWheel, { passive: false });
+      figure.addEventListener('pointerdown', onPointerDown);
+      figure.addEventListener('pointermove', onPointerMove);
+      figure.addEventListener('pointerup', onPointerUp);
+      figure.addEventListener('pointercancel', onPointerUp);
+      figure.addEventListener('dblclick', onDoubleClick);
       document.addEventListener('keydown', onKey);
+      // 视口变化（含 Ctrl+滚轮引起的浏览器页面缩放）时重新推导基准并重新钳制平移
+      window.addEventListener('resize', applyZoom);
       document.body.appendChild(overlay);
       close.focus();
     }
 
-    /** 升级单个内嵌图片：样式 + 悬停说明 + 点击放大 + 加载失败降级。 */
+    /** 是否位于插件自己的放大/选择 UI 内（这些图有各自的查看方式）。 */
+    function inZoomExcludedZone(img) {
+      if (typeof img.closest !== 'function') return false;
+      return img.closest('.dshpick-lightbox, .dshpick-card, .dshpick-cards, .dshpick-thumb') !== null;
+    }
+
+    /** 是否位于交互控件内（按钮/链接等已有自己的点击语义，如附件缩略图自带 lightbox）。 */
+    function isInteractiveContext(img) {
+      if (typeof img.closest !== 'function') return false;
+      return img.closest('button, a, [role="button"], [role="link"], [role="menuitem"]') !== null;
+    }
+
+    /** 内容图尺寸启发：渲染宽 ≥ 40px 或自然宽 ≥ 160px（跳过图标/头像等小图）。 */
+    function isContentSized(img) {
+      var rect = typeof img.getBoundingClientRect === 'function' ? img.getBoundingClientRect() : null;
+      var rendered = rect !== null && rect.width > 0 ? rect.width : (img.clientWidth || 0);
+      return rendered >= 40 || (img.naturalWidth || 0) >= 160;
+    }
+
+    /**
+     * 判定一张图片是否应触发放大：
+     *   插件图片（show/attachment 路由）无条件放大；
+     *   其他图片要求位于聊天栏 [data-chat-flow] 内、不在交互控件/放大 UI 里、
+     *   且达到内容图尺寸阈值。
+     */
+    function isZoomableChatImage(img) {
+      if (img === null || typeof img !== 'object') return false;
+      var src = img.getAttribute('src') || img.currentSrc || '';
+      if (isPluginImageSrc(src)) return !inZoomExcludedZone(img);
+      if (typeof img.closest !== 'function' || img.closest(CHAT_FLOW_SELECTOR) === null) return false;
+      if (inZoomExcludedZone(img) || isInteractiveContext(img)) return false;
+      if (img.dataset !== void 0 && img.dataset.failed !== void 0) return false;
+      return isContentSized(img);
+    }
+
+    /**
+     * document 级点击委托：聊天栏内点击内容图片 → 放大查看。
+     * React 17+ 事件挂在 root 容器上、先于本委托执行，因此交互控件内的
+     * 图片（按钮/链接）保持各自语义（如附件缩略图的原生 lightbox），
+     * 这里只兜底纯图片。
+     * @returns {Function|null} 停止函数；无 DOM 环境返回 null。
+     */
+    function startClickDelegation() {
+      if (typeof document === 'undefined') return null;
+      function onDocumentClick(event) {
+        var target = event.target;
+        if (target === null || target === undefined || typeof target.tagName !== 'string' || target.tagName.toLowerCase() !== 'img') return;
+        if (typeof target.closest === 'function' && target.closest('.dshpick-lightbox') !== null) return;
+        if (!isZoomableChatImage(target)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        var src = target.currentSrc || target.getAttribute('src') || '';
+        var caption = (target.getAttribute('alt') || '').trim();
+        openImageZoom(src, caption);
+      }
+      document.addEventListener('click', onDocumentClick);
+      return function () { document.removeEventListener('click', onDocumentClick); };
+    }
+
+    /** 升级单个图片的视觉提示：插件图片套用内嵌样式，聊天内容图加放大光标。 */
     function upgradeInlineImage(img) {
       if (img === null || typeof img !== 'object' || img.dataset === void 0) return;
       if (img.dataset.dshimg === '1') return;
-      if (typeof img.closest === 'function' && img.closest('.dshpick-lightbox') !== null) return;
-      img.dataset.dshimg = '1';
-      img.classList.add('dshimg-inline');
+      var src = img.getAttribute('src') || '';
       var caption = (img.getAttribute('alt') || '').trim();
+      if (isPluginImageSrc(src)) {
+        img.dataset.dshimg = '1';
+        img.classList.add('dshimg-inline');
+        if (caption !== '') img.title = caption;
+        img.addEventListener('error', function () { img.dataset.failed = '1'; });
+        return;
+      }
+      if (!isZoomableChatImage(img)) return;
+      img.dataset.dshimg = '1';
+      img.classList.add('dshimg-zoom');
       if (caption !== '') img.title = caption;
-      var src = img.getAttribute('src') || '';
-      if (!(isShowImageSrc(src) || src.indexOf('/dsh-plugin-image-tools/attachment/') >= 0)) return;
-      img.addEventListener('click', function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        openImageZoom(src, caption);
-      });
-      img.addEventListener('error', function () { img.dataset.failed = '1'; });
     }
 
     /**
-     * 启动内联图片增强观察器。对 document.body 做 childList+subtree 监听，
-     * 用 requestAnimationFrame 合帧扫描（避免高频回调），只处理匹配前缀的 img。
+     * 启动聊天栏图片放大增强：MutationObserver 扫描（rAF 合帧）加样式提示
+     * （聊天栏内所有 img + 插件图片路由），并挂上 document 级点击委托。
      * @returns {Function|null} 停止函数；无 DOM 环境返回 null。
      */
     function startInlineEnhancer() {
@@ -500,7 +953,9 @@ window.__ModuleLoader__.load({
       var pending = false;
       var scan = function () {
         pending = false;
-        var images = document.querySelectorAll('img[src^="' + IMAGE_SHOW_PREFIX + '"], img[src^="/dsh-plugin-image-tools/attachment/"]');
+        var images = document.querySelectorAll(
+          CHAT_FLOW_SELECTOR + ' img, img[src*="' + IMAGE_SHOW_PREFIX + '"], img[src*="' + ATTACHMENT_PREFIX + '"]'
+        );
         for (var i = 0; i < images.length; i++) upgradeInlineImage(images[i]);
         upgradeBubbleTexts();
       };
@@ -511,7 +966,11 @@ window.__ModuleLoader__.load({
       });
       observer.observe(document.body, { childList: true, subtree: true });
       scan();
-      return function () { observer.disconnect(); };
+      var stopDelegation = startClickDelegation();
+      return function () {
+        observer.disconnect();
+        if (stopDelegation !== null) stopDelegation();
+      };
     }
 
     // ------------------------------------------------------------------
@@ -921,9 +1380,17 @@ window.__ModuleLoader__.load({
     exports.Lightbox = Lightbox;
     exports.IMAGE_SHOW_PREFIX = IMAGE_SHOW_PREFIX;
     exports.isShowImageSrc = isShowImageSrc;
+    exports.isPluginImageSrc = isPluginImageSrc;
+    exports.isZoomableChatImage = isZoomableChatImage;
     exports.extractImageTokenIds = extractImageTokenIds;
     exports.upgradeInlineImage = upgradeInlineImage;
     exports.startInlineEnhancer = startInlineEnhancer;
+    exports.startClickDelegation = startClickDelegation;
+    exports.clampZoom = clampZoom;
+    exports.wheelZoomFactor = wheelZoomFactor;
+    exports.zoomTranslate = zoomTranslate;
+    exports.clampPan = clampPan;
+    exports.fitBaseSize = fitBaseSize;
     return module.exports;
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-plugin-image-tools",
-  "description": "DSH 图片插件：ask_user_choice 图片/图文混合选项（Web GUI 渲染图片选择卡，可放大查看）+ show_images 在回复中内嵌图片（图片与文字混排）。图片来源支持本地路径 / http(s) URL / base64 data URI。纯插件实现，不改核心包。",
-  "version": "0.4.1",
+  "description": "DSH 图片插件：ask_user_choice 图片/图文混合选项（Web GUI 渲染图片选择卡，可放大查看）+ show_images 在回复中内嵌图片（图片与文字混排）+ 聊天栏所有图片点击放大，放大层支持滚轮/按钮缩放与拖拽平移。图片来源支持本地路径 / http(s) URL / base64 data URI。纯插件实现，不改核心包。",
+  "version": "0.6.1",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/scripts/smoke-client.mjs

@@ -59,6 +59,61 @@ assert.ok(mod.isShowImageSrc('http://127.0.0.1:3080/dsh-plugin-image-tools/show/
 assert.ok(!mod.isShowImageSrc('/dsh-plugin-image-tools/abc/0'), '选择卡路由不应被识别为内嵌图')
 assert.ok(!mod.isShowImageSrc('https://example.com/a.png'), '外部图片不应被识别')
 assert.equal(mod.startInlineEnhancer(), null, '无 DOM 环境下不应启动观察器')
+assert.equal(mod.startClickDelegation(), null, '无 DOM 环境下不应挂点击委托')
+
+// 5a) 聊天栏图片放大判定（纯逻辑，fake DOM 对象）
+const fakeClosest = (insideFlow, inButton, inPick) => (sel) => {
+  if (sel === '[data-chat-flow]') return insideFlow ? {} : null
+  if (sel === 'button, a, [role="button"], [role="link"], [role="menuitem"]') return inButton ? {} : null
+  if (sel === '.dshpick-lightbox, .dshpick-card, .dshpick-cards, .dshpick-thumb') return inPick ? {} : null
+  return null
+}
+const fakeImg = (opts) => ({
+  getAttribute: (k) => (k === 'src' ? (opts.src ?? '') : null),
+  currentSrc: opts.currentSrc ?? '',
+  closest: fakeClosest(opts.insideFlow ?? false, opts.inButton ?? false, opts.inPick ?? false),
+  getBoundingClientRect: () => ({ width: opts.w ?? 320, height: opts.h ?? 240 }),
+  naturalWidth: opts.nw ?? 640,
+  dataset: opts.dataset ?? {},
+})
+assert.equal(mod.isPluginImageSrc('/dsh-plugin-image-tools/show/a/0'), true, 'show 路由应判定为插件图')
+assert.equal(mod.isPluginImageSrc('http://127.0.0.1:3080/dsh-plugin-image-tools/attachment/att-123'), true, 'attachment 绝对 URL 应判定为插件图')
+assert.equal(mod.isPluginImageSrc('/dsh-plugin-image-tools/pick-1/0'), false, '选择卡路由不是内嵌插件图')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: true })), true, '聊天栏内内容图应可放大')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: true, w: 16, h: 16, nw: 16 })), false, '聊天栏内小图标不应放大')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: true, inButton: true })), false, '按钮内图片应放行给原生语义')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: true, inPick: true })), false, '选择卡内图片应由卡片自己的放大处理')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: false, src: 'https://example.com/a.png' })), false, '聊天栏外的图片不放大')
+assert.equal(mod.isZoomableChatImage(fakeImg({ insideFlow: true, src: '/dsh-plugin-image-tools/show/x/0' })), true, '插件图无条件放大')
+assert.equal(mod.isZoomableChatImage(null), false, 'null 不应放大')
+
+// 5c) 放大层缩放纯函数
+assert.equal(mod.clampZoom(0.1), 0.25, '缩放下限 0.25x')
+assert.equal(mod.clampZoom(20), 12, '缩放上限 12x')
+assert.equal(mod.clampZoom(2), 2, '范围内原样')
+assert.ok(mod.wheelZoomFactor(-100) > 1, '向上滚应放大')
+assert.ok(mod.wheelZoomFactor(100) < 1, '向下滚应缩小')
+// 光标中心缩放：缩放前后光标下的图像点屏幕位置不变
+const zt = mod.zoomTranslate(0, 0, 1, 2, 100, 50)
+assert.ok(Math.abs((100 * 2 + zt.tx) - 100) < 1e-9, '光标中心缩放后 x 不动')
+assert.ok(Math.abs((50 * 2 + zt.ty) - 50) < 1e-9, '光标中心缩放后 y 不动')
+// 平移钳制：scale=1 保持 flex 居中（t=0）；超出视口后限位、图像始终覆盖视口
+// （左右/上下边缘都能拖到——这是修复"放大后拖不到右边"的关键约束）
+const zoomBase = { w0: 200, h0: 100 }
+const zoomView = { viewW: 1000, viewH: 800 }
+assert.deepEqual(mod.clampPan(50, 50, 1, zoomBase, zoomView), { tx: 0, ty: 0 }, 'scale=1 保持居中')
+assert.deepEqual(mod.clampPan(50, 50, 4, zoomBase, zoomView), { tx: 0, ty: 0 }, '4x 仍小于视口 → 居中')
+assert.deepEqual(mod.clampPan(-10000, 0, 8, zoomBase, zoomView), { tx: -1000, ty: 0 }, '8x 超出视口 → 限位到左边缘')
+assert.deepEqual(mod.clampPan(99999, -99999, 8, zoomBase, zoomView), { tx: 0, ty: -350 }, '8x 超出视口 → 限位到右/上边缘')
+// 基准尺寸推导：与 .dshpick-lightboxFigure img 的 CSS 约束一致（max-width min(92vw,1100) / max-height 82vh）
+const fit = mod.fitBaseSize(2000, 1000, 1000, 800)
+assert.ok(Math.abs(fit.w0 - 920) < 1e-9 && Math.abs(fit.h0 - 460) < 1e-9, '宽图按 92vw 等比缩放')
+const fit2 = mod.fitBaseSize(800, 2000, 1000, 800)
+assert.ok(Math.abs(fit2.h0 - 656) < 1e-9 && Math.abs(fit2.w0 - 262.4) < 1e-9, '高图按 82vh 等比缩放')
+const fit3 = mod.fitBaseSize(500, 300, 1000, 800)
+assert.deepEqual(fit3, { w0: 500, h0: 300 }, '小于约束时保持自然尺寸')
+const fit4 = mod.fitBaseSize(3000, 3000, 400, 300)
+assert.ok(fit4.w0 <= 368 + 1e-9 && fit4.h0 <= 246 + 1e-9, '小视口下同时受宽高约束')
 
 // 5b) 盲模型收图占位符 token 提取
 assert.deepEqual(mod.extractImageTokenIds('📷 图片 dshimg:att-aaa111bbb222 和 dshimg:att-ccc333ddd444'), ['att-aaa111bbb222', 'att-ccc333ddd444'])