ep-craft 0.1.41 → 0.2.0

package/dist-ai/components/image-viewer.json

@@ -0,0 +1,235 @@
+{
+  "entry": {
+    "category": "data",
+    "events": [
+      {
+        "description": "关闭预览时触发",
+        "name": "close",
+        "params": "—"
+      },
+      {
+        "description": "图片加载失败时触发",
+        "name": "error",
+        "params": "(event: Event)"
+      },
+      {
+        "description": "切换图片时触发",
+        "name": "switch",
+        "params": "(index: number)"
+      },
+      {
+        "description": "旋转图片时触发",
+        "name": "rotate",
+        "params": "(deg: number)"
+      }
+    ],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpButton, EpImageViewer } from 'ep-craft'\n\nconst visible = ref(false)\nconst urlList = [\n  \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='360'%3E%3Crect fill='%2367c23a' width='600' height='360'/%3E%3C/svg%3E\",\n]\n</script>\n\n<template>\n  <ep-button @click=\"visible = true\">查看图片</ep-button>\n  <ep-image-viewer v-if=\"visible\" :url-list=\"urlList\" @close=\"visible = false\" />\n</template>",
+        "id": "image-viewer-1",
+        "language": "vue",
+        "title": "图片查看器"
+      }
+    ],
+    "exposes": [
+      {
+        "description": "手动切换图片",
+        "name": "setActiveItem",
+        "type": "(index: number) => void"
+      }
+    ],
+    "hot": false,
+    "id": "component:image-viewer",
+    "keywords": {
+      "en": [
+        "image-viewer",
+        "image",
+        "viewer",
+        "preview",
+        "data"
+      ],
+      "zh": [
+        "图片查看器",
+        "数据"
+      ]
+    },
+    "kind": "component",
+    "name": "EpImageViewer",
+    "nonUseCases": [
+      "数据量极小且无需结构化展示时"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "[]",
+        "description": "预览图片地址列表",
+        "hasDefault": true,
+        "name": "urlList",
+        "required": false,
+        "type": "string[]"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "预览层 z-index",
+        "hasDefault": false,
+        "name": "zIndex",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "0",
+        "description": "初始预览图片索引",
+        "hasDefault": true,
+        "name": "initialIndex",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "预览是否循环",
+        "hasDefault": true,
+        "name": "infinite",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "点击遮罩层是否关闭预览",
+        "hasDefault": false,
+        "name": "hideOnClickModal",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否将预览层挂载到 body",
+        "hasDefault": false,
+        "name": "teleported",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "按 ESC 是否关闭预览",
+        "hasDefault": true,
+        "name": "closeOnPressEscape",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "1.2",
+        "description": "缩放事件的缩放倍率",
+        "hasDefault": true,
+        "name": "zoomRate",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "1",
+        "description": "初始缩放比例",
+        "hasDefault": true,
+        "name": "scale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "0.2",
+        "description": "最小缩放比例",
+        "hasDefault": true,
+        "name": "minScale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "7",
+        "description": "最大缩放比例",
+        "hasDefault": true,
+        "name": "maxScale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否显示预览进度",
+        "hasDefault": false,
+        "name": "showProgress",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "原生 crossorigin 属性",
+        "hasDefault": false,
+        "name": "crossorigin",
+        "required": false,
+        "type": "'anonymous' | 'use-credentials' | ''"
+      }
+    ],
+    "related": [
+      "EpImage"
+    ],
+    "relations": {
+      "children": [],
+      "combos": [],
+      "parents": [],
+      "requiredChildren": []
+    },
+    "slots": [
+      {
+        "description": "预览层默认内容",
+        "name": "default"
+      },
+      {
+        "description": "自定义预览进度内容",
+        "name": "progress"
+      },
+      {
+        "description": "自定义预览工具栏",
+        "name": "toolbar"
+      },
+      {
+        "description": "预览图片加载失败时的内容",
+        "name": "viewer-error"
+      }
+    ],
+    "slug": "image-viewer",
+    "summary": "图片查看器，结构化数据展示",
+    "tag": "ep-image-viewer",
+    "useCases": [
+      "展示图片查看器类结构化数据",
+      "需要浏览、比较或定位数据时"
+    ],
+    "variants": [],
+    "visual": {
+      "cssVars": [
+        "--el-border-color-lighter",
+        "--el-bg-color",
+        "--el-text-color-regular",
+        "--el-font-size-base"
+      ],
+      "density": "紧凑",
+      "shape": "块级数据区域",
+      "slotContent": [
+        "default：预览层默认内容",
+        "progress：自定义预览进度内容",
+        "toolbar：自定义预览工具栏"
+      ]
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/image-viewer.md

@@ -0,0 +1,88 @@
+# EpImageViewer
+
+`ep-image-viewer` · data（数据展示） · `component:image-viewer`
+
+## 摘要
+
+图片查看器，结构化数据展示
+
+## 适用场景
+
+- 适用：展示图片查看器类结构化数据
+- 适用：需要浏览、比较或定位数据时
+- 不适用：数据量极小且无需结构化展示时
+
+## 关键词
+
+- 中文：图片查看器、数据
+- English: image-viewer, image, viewer, preview, data
+
+## Props
+
+- urlList (string[]，默认 [])：预览图片地址列表
+- zIndex (number)：预览层 z-index
+- initialIndex (number，默认 0)：初始预览图片索引
+- infinite (boolean，默认 true)：预览是否循环
+- hideOnClickModal (boolean)：点击遮罩层是否关闭预览
+- teleported (boolean)：是否将预览层挂载到 body
+- closeOnPressEscape (boolean，默认 true)：按 ESC 是否关闭预览
+- zoomRate (number，默认 1.2)：缩放事件的缩放倍率
+- scale (number，默认 1)：初始缩放比例
+- minScale (number，默认 0.2)：最小缩放比例
+- maxScale (number，默认 7)：最大缩放比例
+- showProgress (boolean)：是否显示预览进度
+- crossorigin ('anonymous' | 'use-credentials' | '')：原生 crossorigin 属性
+
+## Events
+
+- close(—)：关闭预览时触发
+- error((event: Event))：图片加载失败时触发
+- switch((index: number))：切换图片时触发
+- rotate((deg: number))：旋转图片时触发
+
+## Slots
+
+- default：预览层默认内容
+- progress：自定义预览进度内容
+- toolbar：自定义预览工具栏
+- viewer-error：预览图片加载失败时的内容
+
+## Exposes
+
+- setActiveItem((index: number) => void)：手动切换图片
+
+## 视觉提示
+
+- 形状：块级数据区域
+- 密度：紧凑
+- 插槽内容：default：预览层默认内容；progress：自定义预览进度内容；toolbar：自定义预览工具栏
+- CSS 变量：--el-border-color-lighter、--el-bg-color、--el-text-color-regular、--el-font-size-base
+
+## 示例
+
+### 图片查看器
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpButton, EpImageViewer } from 'ep-craft'
+
+const visible = ref(false)
+const urlList = [
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='360'%3E%3Crect fill='%2367c23a' width='600' height='360'/%3E%3C/svg%3E",
+]
+</script>
+
+<template>
+  <ep-button @click="visible = true">查看图片</ep-button>
+  <ep-image-viewer v-if="visible" :url-list="urlList" @close="visible = false" />
+</template>
+```
+
+## 相关条目
+
+- EpImage
+
+---
+
+ep-craft 0.2.0

package/dist-ai/components/image.json

@@ -0,0 +1,299 @@
+{
+  "entry": {
+    "category": "data",
+    "events": [
+      {
+        "description": "图片加载成功时触发",
+        "name": "load",
+        "params": "(event: Event)"
+      },
+      {
+        "description": "图片加载失败时触发",
+        "name": "error",
+        "params": "(event: Event)"
+      },
+      {
+        "description": "预览切换图片时触发",
+        "name": "switch",
+        "params": "(index: number)"
+      },
+      {
+        "description": "关闭预览时触发",
+        "name": "close",
+        "params": "—"
+      },
+      {
+        "description": "打开预览时触发",
+        "name": "show",
+        "params": "—"
+      }
+    ],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { EpImage } from 'ep-craft'\n\nconst src =\n  \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Crect fill='%23409eff' width='400' height='200'/%3E%3Ctext x='50%25' y='50%25' fill='white' font-size='20' text-anchor='middle'%3E示例图片%3C/text%3E%3C/svg%3E\"\n</script>\n\n<template>\n  <ep-image :src=\"src\" :preview-src-list=\"[src]\" fit=\"cover\" style=\"width: 400px\" />\n</template>",
+        "id": "image-1",
+        "language": "vue",
+        "title": "图片与预览"
+      }
+    ],
+    "exposes": [
+      {
+        "description": "手动打开预览",
+        "name": "showPreview",
+        "type": "() => void"
+      }
+    ],
+    "hot": false,
+    "id": "component:image",
+    "keywords": {
+      "en": [
+        "image",
+        "picture",
+        "data"
+      ],
+      "zh": [
+        "图片",
+        "数据"
+      ]
+    },
+    "kind": "component",
+    "name": "EpImage",
+    "nonUseCases": [
+      "数据量极小且无需结构化展示时"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "点击遮罩层是否关闭预览",
+        "hasDefault": false,
+        "name": "hideOnClickModal",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "''",
+        "description": "图片地址，同原生 img 的 src",
+        "hasDefault": true,
+        "name": "src",
+        "required": false,
+        "type": "string"
+      },
+      {
+        "alias": null,
+        "defaultText": "''",
+        "description": "图片填充方式，同 object-fit",
+        "hasDefault": true,
+        "name": "fit",
+        "required": false,
+        "type": "'' | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "浏览器加载方式，同原生 img 的 loading",
+        "hasDefault": false,
+        "name": "loading",
+        "required": false,
+        "type": "'eager' | 'lazy'"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否懒加载",
+        "hasDefault": false,
+        "name": "lazy",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "懒加载时监听滚动的容器",
+        "hasDefault": false,
+        "name": "scrollContainer",
+        "required": false,
+        "type": "string | HTMLElement"
+      },
+      {
+        "alias": null,
+        "defaultText": "[]",
+        "description": "开启预览时的大图列表",
+        "hasDefault": true,
+        "name": "previewSrcList",
+        "required": false,
+        "type": "string[]"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否将预览层挂载到 body",
+        "hasDefault": false,
+        "name": "previewTeleported",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "预览层 z-index",
+        "hasDefault": false,
+        "name": "zIndex",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "0",
+        "description": "初始预览图片索引",
+        "hasDefault": true,
+        "name": "initialIndex",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "预览是否循环",
+        "hasDefault": true,
+        "name": "infinite",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "按 ESC 是否关闭预览",
+        "hasDefault": true,
+        "name": "closeOnPressEscape",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "1.2",
+        "description": "缩放事件的缩放倍率",
+        "hasDefault": true,
+        "name": "zoomRate",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "1",
+        "description": "初始缩放比例",
+        "hasDefault": true,
+        "name": "scale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "0.2",
+        "description": "最小缩放比例",
+        "hasDefault": true,
+        "name": "minScale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "7",
+        "description": "最大缩放比例",
+        "hasDefault": true,
+        "name": "maxScale",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否显示预览进度",
+        "hasDefault": false,
+        "name": "showProgress",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "原生 crossorigin 属性",
+        "hasDefault": false,
+        "name": "crossorigin",
+        "required": false,
+        "type": "'anonymous' | 'use-credentials' | ''"
+      }
+    ],
+    "related": [
+      "EpImageViewer"
+    ],
+    "relations": {
+      "children": [],
+      "combos": [],
+      "parents": [],
+      "requiredChildren": []
+    },
+    "slots": [
+      {
+        "description": "图片加载完成前的占位内容",
+        "name": "placeholder"
+      },
+      {
+        "description": "图片加载失败时的内容",
+        "name": "error"
+      },
+      {
+        "description": "自定义预览层内容",
+        "name": "viewer"
+      },
+      {
+        "description": "自定义预览进度内容",
+        "name": "progress"
+      },
+      {
+        "description": "自定义预览工具栏",
+        "name": "toolbar"
+      },
+      {
+        "description": "预览图片加载失败时的内容",
+        "name": "viewer-error"
+      }
+    ],
+    "slug": "image",
+    "summary": "图片，结构化数据展示",
+    "tag": "ep-image",
+    "useCases": [
+      "展示图片类结构化数据",
+      "需要浏览、比较或定位数据时"
+    ],
+    "variants": [
+      {
+        "dimension": "state",
+        "values": [
+          "loading"
+        ],
+        "when": "通过布尔属性切换禁用、加载或选中状态"
+      }
+    ],
+    "visual": {
+      "cssVars": [
+        "--el-border-color-lighter",
+        "--el-bg-color",
+        "--el-text-color-regular",
+        "--el-font-size-base"
+      ],
+      "density": "紧凑",
+      "shape": "块级数据区域",
+      "slotContent": [
+        "placeholder：图片加载完成前的占位内容",
+        "error：图片加载失败时的内容",
+        "viewer：自定义预览层内容"
+      ]
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}