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

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-23T10:14:36.972Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-23T10:58:48.833Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -50,6 +50,29 @@
 
 28 个 DOM 组件，统一用法：组件是普通函数，传入 props 返回 DOM 节点；需要状态时先创建 signal 再双向绑定。引入 CSS：import '@ui-arch/ui/ui.css'（内部已消费 tokens）。
 
+### image — 图片 Image
+
+参数：
+
+- src（必填）：string —— 图片地址（缩略图与大图共用）
+- alt（默认 ''）：string —— 替代文本；缺省空串
+- width：number —— 缩略图宽度像素，高度自适应；缺省走样式默认
+
+示例：
+
+```
+image({ src: '/a.png', alt: '架构图', width: 160 })
+```
+
+手把手：
+
+1. 基础用法只传 src：渲染缩略图，hover 上浮提亮，光标变放大镜
+2. 点击缩略图（或聚焦后回车）打开全屏遮罩大图，Esc 或点击遮罩任意处关闭，焦点归还缩略图
+3. 宽度用 width（像素）控制，高度按比例自适应，容器内不撑破 max-width
+4. alt 尽量传有意义的描述，读屏与图片加载失败时都依赖它
+
+现场演示：apps/docs/demo.html#sec-image
+
 ### button — 按钮 Button
 
 参数：
@@ -902,6 +925,7 @@ API 速览：
 - form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
 - formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄
 - dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core
+- image(props)：图片，缩略图点击 / 回车开遮罩大图预览（Esc 或点击遮罩关闭），width 控制缩略宽
 
 一行用法：