@dsh-external/dsh-image-zoom

Readme

# 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、样式都在插件卸载时回收。

## 安装

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

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

## 卸载

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

> 🔍 配套推荐：搭配 [`dsh-tool-mermaid`](https://github.com/sijidoubi/dsh-plugin-mermaid) 使用，让模型渲染的架构图 / 流程图也能点击放大。

## License

MIT