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

apps/demo/main.ts

@@ -1,4 +1,12 @@
 import { computed, h, mount, renderList, signal } from '@ui-arch/frame';
+
+/*** 演示用内联 SVG 图片（data URI，离线可用） ***/
+const IMG_DEMO = 'data:image/svg+xml;utf8,' + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="480" height="320">' +
+  '<rect width="480" height="320" fill="#185fa5"/>' +
+  '<circle cx="240" cy="160" r="90" fill="#ffffff" opacity="0.85"/>' +
+  '<text x="240" y="170" font-size="28" text-anchor="middle" fill="#185fa5">IMAGE DEMO</text></svg>',
+);
 import {
   accordion,
   alert,
@@ -12,6 +20,7 @@ import {
   divider,
   drawer,
   empty,
+  image,
   form,
   formItem,
   inputNumber,
@@ -384,6 +393,17 @@ const content = h(
     ),
     h('div', { class: 'row' }, rate({ value: score, disabled: true })),
   ),
+  section(
+    'sec-image',
+    '图片',
+    'image：缩略图点击 / 回车打开遮罩大图，Esc 或点击遮罩关闭，焦点归还缩略图。',
+    h(
+      'div',
+      { class: 'row' },
+      image({ src: IMG_DEMO, alt: '演示图一', width: 180 }),
+      image({ src: IMG_DEMO, alt: '演示图二', width: 120 }),
+    ),
+  ),
   section(
     'sec-empty',
     '空状态',