Back to home

sijidoubi

dsh-image-zoom

DeepSeek Harness (dsh) client plugin: click-to-zoom lightbox for markdown/chat images

Stars
1
Language
TypeScript
Created
Aug 15, 2026
Updated
Aug 15, 2026

Introduction

dsh-image-zoom

仓库名 dsh-image-zoom,npm 包名 @dsh-external/dsh-image-zoom

DeepSeek Harness (dsh) Web 客户端插件:给聊天里的 markdown 图片加一个点击放大/缩小的 灯箱(lightbox)查看器。

dsh 的 Web 前端把 markdown 图片固定成 max-width: 100% 的缩略图,没有缩放交互—— 大图、架构图、流程图上的小字看不清。装上这个插件后,点击任意一张 markdown 图片, 就会在页面上弹出全屏查看器,支持:

  • 鼠标滚轮 / 按钮连续缩放(100% ~ 1200%)
  • 放大后拖拽平移
  • 适应 一键回到窗口适配
  • 新标签页打开原图
  • Esc / 点击背景 / × 关闭

它和 mermaid 插件的配合

dsh-tool-mermaid 渲染出的图会内嵌成 [![标题](http://…/dsh-mermaid/….svg)](同URL) 的可点击缩略图。装上本插件后,点击这张图不再跳转新标签页,而是就地弹出缩放查看器; 工具栏里的 仍可打开原图。

工作原理

  • 在文档上挂一个捕获阶段的点击委托:命中最近的 <img> 且其 src 是绝对 http(s) 地址时,打开灯箱。
  • 跳过附件缩略图(它们是 <button> 包裹、自带 lightbox)和任何 [role="dialog"] 内的图片,避免和内置的附件预览重复弹窗。
  • 纯 DOM 实现,不依赖 React 或额外服务;所有监听、DOM、样式都在插件卸载时回收。

安装

dsh plugin --profile web add github:sijidoubi/dsh-image-zoom
dsh web

pnpm ≥10 首次 add 会因 prepare 构建脚本被拒;把提示的包 key 加入 profile 的 pnpm-workspace.yamlallowBuilds 后重试。

卸载

dsh plugin --profile web remove @dsh-external/dsh-image-zoom

🔍 配套推荐:搭配 dsh-tool-mermaid 使用,让模型渲染的架构图 / 流程图也能点击放大。

License

MIT