iter(g02): 新增 image 图片组件

packages/skin/ui/src/image.ts

@@ -0,0 +1,37 @@
+import { h } from '@ui-arch/frame';
+import type { ImageProps } from './types.js';
+
+/*** 图片：缩略图展示，点击 / 回车打开遮罩大图预览（Esc 或点击遮罩关闭），样式只消费 --ua-* 令牌 ***/
+export function image(props: ImageProps): HTMLElement {
+  const style = props.width ? `width:${props.width}px` : '';
+  return h('img', {
+    class: 'ua-image',
+    src: props.src,
+    alt: props.alt ?? '',
+    style,
+    tabindex: '0',          // 可聚焦，键盘用户回车预览
+    role: 'button',
+    'aria-label': '预览图片',
+    onclick: () => openViewer(props.src, props.alt),
+    onkeydown: (e: KeyboardEvent) => e.key === 'Enter' && openViewer(props.src, props.alt),
+  });
+}
+
+/*** 打开全屏遮罩预览层；关闭时自清理、解绑键盘并归还焦点 ***/
+function openViewer(src: string, alt?: string): void {
+  const prev = document.activeElement as HTMLElement | null; // 焦点归还目标
+  const mask = h(
+    'div',
+    { class: 'ua-image-mask', role: 'dialog', 'aria-modal': 'true', 'aria-label': '图片预览' },
+    h('img', { class: 'ua-image-full', src, alt: alt ?? '' }),
+  );
+  const close = () => {
+    mask.remove(); // 卫语句式自清理：遮罩移除 + 键盘解绑 + 焦点归还
+    document.removeEventListener('keydown', onKey);
+    prev?.focus?.();
+  };
+  const onKey = (e: KeyboardEvent) => e.key === 'Escape' && close();
+  mask.addEventListener('click', close);
+  document.addEventListener('keydown', onKey);
+  document.body.appendChild(mask);
+}

packages/skin/ui/src/index.ts

@@ -15,6 +15,7 @@ export { card } from './card.js';
 export { badge } from './badge.js';
 export { tag } from './tag.js';
 export { avatar } from './avatar.js';
+export { image } from './image.js';
 export { alert } from './alert.js';
 export { toast, showToast } from './toast.js';
 export { tooltip } from './tooltip.js';

packages/skin/ui/src/types.ts

@@ -233,6 +233,13 @@ export interface TagProps {
   onClose?: () => void; // 关闭回调（调用方自行从数据源移除该项）
 }
 
+/*** 图片入参 ***/
+export interface ImageProps {
+  src: string;    // 图片地址（缩略图与大图共用）
+  alt?: string;   // 替代文本；缺省空串
+  width?: number; // 缩略图宽度像素，高度自适应；缺省走样式默认
+}
+
 /*** 提示条入参 ***/
 export interface AlertProps {
   message: string; // 提示内容