# 图片查看器

点开大图，← → 翻，Esc 回到同一张；底部一个深色胶囊放操作。

```html
<div class="xxd-cluster" id="viewer-demo">
  <button class="xxd-btn" data-i="0">打开第 1 张</button><button class="xxd-btn" data-i="2">打开第 3 张</button>
</div>
<script>
  const pics = ["#d65f32", "#3b74b8", "#5a8a3c", "#7b61b0"].map((c, i) => ({ src: `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='800' height='560'><rect width='800' height='560' fill='${c}'/><text x='400' y='300' font-size='64' fill='white' text-anchor='middle' font-family='sans-serif'>${i + 1}</text></svg>`)}`, alt: `第 ${i + 1} 张` }));
  document.getElementById("viewer-demo").addEventListener("click", (e) => {
    const b = e.target.closest("[data-i]");
    if (b) Xxd.openViewer(pics, Number(b.dataset.i), { actions: [{ label: "复制图片", run: () => Xxd.toast("已复制图片", { tone: "success" }) }, { label: "下载", run: () => Xxd.toast("开始下载") }] });
  });
</script>
```
- 关闭后焦点回到打开它的那个缩略图
- 操作胶囊：深色半透明，像 X 自己的图片控件

```js
Xxd.openViewer(items, startIndex, { actions: [{ label, icon, run(item, i) }] })
```