Image 设计文档
图片：加载态机（loading 骨架/自定义占位 → success → error 降级图/自定义/默认破图），success 且 preview 时 hover 蒙层 + 点击进全屏预览。预览浮层（ImagePreview）对齐 Semi：底部工具栏含上一张/页码/下一张、缩放 Slider、放大/缩小、原始尺寸↔适应页面切换、旋转、下载，支持鼠标滚轮以指针为锚缩放、超出容器拖拽平移、无限循环、预加载、无操作自动隐藏工具栏、renderHeader/renderPreviewMenu(menuItems)/renderCloseIcon/renderLeftIcon/renderRightIcon 自定义槽。ImagePreview 既可包裹多个 <Image> 做组预览，也可独立传 src 编程式控制。
← API 文档使用建议
图片：加载态机（loading 骨架/自定义占位 → success → error 降级图/自定义/默认破图），success 且 preview 时 hover 蒙层 + 点击进全屏预览。预览浮层（ImagePreview）对齐 Semi：底部工具栏含上一张/页码/下一张、缩放 Slider、放大/缩小、原始尺寸↔适应页面切换、旋转、下载，支持鼠标滚轮以指针为锚缩放、超出容器拖拽平移、无限循环、预加载、无操作自动隐藏工具栏、renderHeader/renderPreviewMenu(menuItems)/renderCloseIcon/renderLeftIcon/renderRightIcon 自定义槽。ImagePreview 既可包裹多个 <Image> 做组预览，也可独立传 src 编程式控制。
Accessibility
ARIA role：img
- img 必传 alt 语义；默认破图占位用 role=img + aria-label
- 预览遮罩 role=dialog、aria-modal=true，portal 到 getPopupContainer/body；useFocusTrap 锁定焦点、Esc 关闭、useScrollLock 锁背景滚动
- 组/独立预览左右切换：中部 ← → 按钮 + 键盘左右箭头（到边界按钮隐藏，infinite 时循环）
- 翻页经 LiveAnnouncer polite 播报「第 m 张，共 n 张」
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-image-bg | var(--cd-color-fill-0) | 图片占位背景 |
--cd-image-header-close-bg | rgba(0, 0, 0, 0.75) | $color-image_header_close-bg：header 关闭 icon hover 背景（Semi 明暗一致） |
--cd-image-mask-bg | var(--cd-color-overlay-bg) | $color-image_mask-bg：图片 hover 预览蒙层背景 |
--cd-image-mask-color | var(--cd-color-white) | 图片操作遮罩文字颜色 |
--cd-image-mask-hover-bg | rgba(255, 255, 255, 0.15) | 预览工具条/切换按钮 hover 时的浅色高亮叠层（浮在深色遮罩上） |
--cd-image-mask-info-text | var(--cd-color-white) | $color-image_mask_info_text：蒙层「预览」文字颜色 |
--cd-image-placeholder-color | var(--cd-color-text-3) | 图片占位/错误文字颜色 |
--cd-image-preview-bg | var(--cd-color-overlay-bg) | $color-image_preview-bg：预览浮层遮罩背景 |
--cd-image-preview-disabled-color | rgba(249, 249, 249, 0.35) | $color-image_preview_disabled：禁用 icon 颜色（Semi 明暗一致） |
--cd-image-preview-divider-bg | rgba(255, 255, 255, 0.5) | $color-image-preview_divider-bg：footer 分割线颜色（Semi 明暗一致） |