在受保护的全屏阅读层中检查图像细节，并提供缩放、旋转、复位和明确关闭路径。
npm install @a3s-lab/ui@0.4.1<dialog class="image-viewer" open data-state="open" style="position:relative;inline-size:100%;block-size:20rem;margin:0">
<div data-image-viewer-toolbar><strong>图像预览</strong><div><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-out">缩小</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-in">放大</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="close">关闭</button></div></div><figure><img src="/logo.png" alt="A3S OS 官方标志" /></figure><p data-image-viewer-caption>检查图像而不修改源文件。</p>
</dialog>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";<dialog class="image-viewer" open data-state="open" style="position:relative;inline-size:100%;block-size:20rem;margin:0">
<div data-image-viewer-toolbar><strong>图像预览</strong><div><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-out">缩小</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="zoom-in">放大</button><button type="button" class="btn" data-size="sm" data-variant="ghost" data-image-viewer-action="close">关闭</button></div></div><figure><img src="/logo.png" alt="A3S OS 官方标志" /></figure><p data-image-viewer-caption>检查图像而不修改源文件。</p>
</dialog>import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/image-viewer";
const component = document.querySelector("dialog.image-viewer");
component.getState();控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。
| 接口 | 值 |
|---|---|
| 根选择器 | dialog.image-viewer |
| 原生根元素 | <dialog> |
| 状态 | open, closed, loading, error |
| 事件 | a3s:image-viewer-before-open, a3s:image-viewer-change, a3s:image-viewer-open, cancel, close |
| 方法 | close, getState, open, reset, rotate, zoom |
查看器不编辑原文件、不保存变换，也不替代图库导航。资源授权、下载与可信来源由宿主负责。
组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。
打开后焦点进入工具栏，Escape 关闭并返回开启者。缩放可由按钮完成，不依赖滚轮或多点触控。