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

packages/skin/ui/ua.manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "@ui-arch/ui",
   "type": "skin-dom",
-  "description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / tag / avatar / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / drawer / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
+  "description": "DOM 皮肤组件库：button / textField / textarea / slider / checkbox / switch / select / menu / radioGroup / accordion / breadcrumb / card / badge / image / tag / avatar / alert / toast / tooltip / popover / skeleton / spinner / progress / tabs / pagination / modal / drawer / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。",
   "tags": [
     "components",
     "dom",
@@ -46,7 +46,8 @@
       "drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
       "form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
       "formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄",
-      "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core"
+      "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core",
+      "image(props)：图片，缩略图点击 / 回车开遮罩大图预览（Esc 或点击遮罩关闭），width 控制缩略宽"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -103,6 +104,37 @@
       "读写状态：name() 读、name('张三') 写，界面自动同步，无需手动操作 DOM"
     ],
     "components": [
+      {
+        "id": "image",
+        "title": "图片 Image",
+        "demo": "sec-image",
+        "props": [
+          {
+            "n": "src",
+            "t": "string",
+            "r": 1,
+            "d": "图片地址（缩略图与大图共用）"
+          },
+          {
+            "n": "alt",
+            "t": "string",
+            "d": "替代文本；缺省空串",
+            "df": "''"
+          },
+          {
+            "n": "width",
+            "t": "number",
+            "d": "缩略图宽度像素，高度自适应；缺省走样式默认"
+          }
+        ],
+        "example": "image({ src: '/a.png', alt: '架构图', width: 160 })",
+        "steps": [
+          "基础用法只传 src：渲染缩略图，hover 上浮提亮，光标变放大镜",
+          "点击缩略图（或聚焦后回车）打开全屏遮罩大图，Esc 或点击遮罩任意处关闭，焦点归还缩略图",
+          "宽度用 width（像素）控制，高度按比例自适应，容器内不撑破 max-width",
+          "alt 尽量传有意义的描述，读屏与图片加载失败时都依赖它"
+        ]
+      },
       {
         "id": "button",
         "title": "按钮 Button",