chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
@@ -1 +1,41 @@
|
||||
{"slug":"imagepreview","mode":"single","examples":[{"id":"imagepreview-ex-1","title":"基础用法","titleSrc":"","desc":"","html":"<div id=\"thumbs\"></div>\n<div class=\"kole-imgprev-mask\" id=\"mask\" style=\"display:none\" aria-modal=\"true\">\n <button class=\"kole-imgprev-close\" id=\"close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n <button class=\"kole-imgprev-arrow prev\" id=\"prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n <img class=\"kole-imgprev-img\" id=\"big\" aria-modal=\"true\" />\n <button class=\"kole-imgprev-arrow next\" id=\"next\" role=\"dialog\" aria-modal=\"true\">›</button>\n <div class=\"kole-imgprev-count\" id=\"count\" role=\"dialog\" aria-modal=\"true\"></div>\n <div class=\"kole-imgprev-thumbs\" id=\"strip\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>","preview":{"show":[[0],[1]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div></div>\n<div class=\"kole-imgprev-mask\" style=\"display:none\" aria-modal=\"true\">\n <button class=\"kole-imgprev-close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n <button class=\"kole-imgprev-arrow prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n <img class=\"kole-imgprev-img\" aria-modal=\"true\" />\n <button class=\"kole-imgprev-arrow next\" role=\"dialog\" aria-modal=\"true\">›</button>\n <div class=\"kole-imgprev-count\" role=\"dialog\" aria-modal=\"true\"></div>\n <div class=\"kole-imgprev-thumbs\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>","jsx":"import { KoleImagePreview } from 'kole-ui/react';\n\n<KoleImagePreview />","vue3":"<template>\n <KoleImagePreview />\n</template>\n\n<script setup>\nimport { KoleImagePreview } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KoleImagePreview />\n</template>\n\n<script>\nimport { KoleImagePreview } from 'kole-ui/vue2';\nexport default { components: { KoleImagePreview } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}
|
||||
{
|
||||
"slug": "imagepreview",
|
||||
"curated": true,
|
||||
"mode": "single",
|
||||
"examples": [
|
||||
{
|
||||
"id": "imagepreview-ex-1",
|
||||
"title": "基础用法",
|
||||
"titleSrc": "",
|
||||
"desc": "",
|
||||
"html": "<div id=\"thumbs\"></div>\n<div class=\"kole-imgprev-mask\" id=\"mask\" style=\"display:none\" aria-modal=\"true\">\n <button class=\"kole-imgprev-close\" id=\"close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n <button class=\"kole-imgprev-arrow prev\" id=\"prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n <img class=\"kole-imgprev-img\" id=\"big\" aria-modal=\"true\" />\n <button class=\"kole-imgprev-arrow next\" id=\"next\" role=\"dialog\" aria-modal=\"true\">›</button>\n <div class=\"kole-imgprev-count\" id=\"count\" role=\"dialog\" aria-modal=\"true\"></div>\n <div class=\"kole-imgprev-thumbs\" id=\"strip\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0
|
||||
],
|
||||
[
|
||||
1
|
||||
]
|
||||
],
|
||||
"hide": [],
|
||||
"mode": "single"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<div></div>\n<div class=\"kole-imgprev-mask\" style=\"display:none\" aria-modal=\"true\">\n <button class=\"kole-imgprev-close\" role=\"button\" tabindex=\"0\" aria-modal=\"true\">✕</button>\n <button class=\"kole-imgprev-arrow prev\" role=\"dialog\" aria-modal=\"true\">‹</button>\n <img class=\"kole-imgprev-img\" aria-modal=\"true\" />\n <button class=\"kole-imgprev-arrow next\" role=\"dialog\" aria-modal=\"true\">›</button>\n <div class=\"kole-imgprev-count\" role=\"dialog\" aria-modal=\"true\"></div>\n <div class=\"kole-imgprev-thumbs\" role=\"dialog\" aria-modal=\"true\"></div>\n</div>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KoleImagePreview } from 'kole-ui/react';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n );\n\nconst IMAGES = [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n];\n\nfunction Demo() {\n const [visible, setVisible] = useState(false);\n const [index, setIndex] = useState(0);\n return (\n <>\n {IMAGES.map((src, i) => (\n <img\n key={i}\n src={src}\n width=\"80\"\n alt={'图 ' + (i + 1)}\n onClick={() => {\n setIndex(i);\n setVisible(true);\n }}\n />\n ))}\n <KoleImagePreview\n images={IMAGES}\n visible={visible}\n index={index}\n onClose={() => setVisible(false)}\n onChange={setIndex}\n />\n </>\n );\n}",
|
||||
"vue3": "<template>\n <img\n v-for=\"(src, i) in images\"\n :key=\"i\"\n :src=\"src\"\n width=\"80\"\n :alt=\"'图 ' + (i + 1)\"\n @click=\"open(i)\"\n />\n <KoleImagePreview\n :images=\"images\"\n :visible=\"visible\"\n :index=\"index\"\n @close=\"visible = false\"\n @change=\"index = $event\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleImagePreview } from 'kole-ui/vue3';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n );\n\nconst images = [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n];\nconst visible = ref(false);\nconst index = ref(0);\nfunction open(i) {\n index.value = i;\n visible.value = true;\n}\n</script>",
|
||||
"vue2": "<template>\n <div>\n <img\n v-for=\"(src, i) in images\"\n :key=\"i\"\n :src=\"src\"\n width=\"80\"\n :alt=\"'图 ' + (i + 1)\"\n @click=\"open(i)\"\n />\n <KoleImagePreview\n :images=\"images\"\n :visible=\"visible\"\n :index=\"index\"\n @close=\"visible = false\"\n @change=\"index = $event\"\n />\n </div>\n</template>\n\n<script>\nimport { KoleImagePreview } from 'kole-ui/vue2';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nvar svg = function (c1, c2, label) {\n return (\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n )\n );\n};\n\nexport default {\n components: { KoleImagePreview },\n data() {\n return {\n images: [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n ],\n visible: false,\n index: 0,\n };\n },\n methods: {\n open(i) {\n this.index = i;\n this.visible = true;\n },\n },\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KoleImagePreview } from 'kole-ui/react';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n );\n\nconst IMAGES = [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n];\n\nfunction Demo(): JSX.Element {\n const [visible, setVisible] = useState<boolean>(false);\n const [index, setIndex] = useState<number>(0);\n return (\n <>\n {IMAGES.map((src, i) => (\n <img\n key={i}\n src={src}\n width=\"80\"\n alt={'图 ' + (i + 1)}\n onClick={() => {\n setIndex(i);\n setVisible(true);\n }}\n />\n ))}\n <KoleImagePreview\n images={IMAGES}\n visible={visible}\n index={index}\n onClose={() => setVisible(false)}\n onChange={setIndex}\n />\n </>\n );\n}\n\nexport default svg;",
|
||||
"vue3ts": "<template>\n\n <img\n v-for=\"(src, i) in images\"\n :key=\"i\"\n :src=\"src\"\n width=\"80\"\n :alt=\"'图 ' + (i + 1)\"\n @click=\"open(i)\"\n />\n <KoleImagePreview\n :images=\"images\"\n :visible=\"visible\"\n :index=\"index\"\n @close=\"visible = false\"\n @change=\"index = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleImagePreview } from 'kole-ui/vue3';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nconst svg = (c1, c2, label) =>\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n );\n\nconst images = [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n];\nconst visible = ref<boolean>(false);\nconst index = ref<number>(0);\nfunction open(i) {\n index.value = i;\n visible.value = true;\n}\n</script>",
|
||||
"vue2ts": "<template>\n\n <div>\n <img\n v-for=\"(src, i) in images\"\n :key=\"i\"\n :src=\"src\"\n width=\"80\"\n :alt=\"'图 ' + (i + 1)\"\n @click=\"open(i)\"\n />\n <KoleImagePreview\n :images=\"images\"\n :visible=\"visible\"\n :index=\"index\"\n @close=\"visible = false\"\n @change=\"index = $event\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleImagePreview } from 'kole-ui/vue2';\n\n/* 演示页用 4 张内联 SVG 数据 URI 造图，避免外部资源依赖 */\nvar svg = function (c1, c2, label) {\n return (\n 'data:image/svg+xml;utf8,' +\n encodeURIComponent(\n '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"300\">' +\n '<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n '<stop offset=\"0\" stop-color=\"' + c1 + '\"/>' +\n '<stop offset=\"1\" stop-color=\"' + c2 + '\"/>' +\n '</linearGradient></defs>' +\n '<rect width=\"400\" height=\"300\" fill=\"url(#g)\"/>' +\n '<text x=\"200\" y=\"160\" font-size=\"40\" fill=\"#fff\" text-anchor=\"middle\" font-family=\"sans-serif\">' +\n label +\n '</text></svg>'\n )\n );\n};\n\nexport default {\n components: { KoleImagePreview },\n data(): Record<string, unknown> {\n return {\n images: [\n svg('#2F54EB', '#1D39C4', '图 1'),\n svg('#13C2C2', '#08979C', '图 2'),\n svg('#722ED1', '#531DAB', '图 3'),\n svg('#8C5A00', '#D46B08', '图 4'),\n ],\n visible: false,\n index: 0,\n };\n },\n methods: {\n open(i) {\n this.index = i;\n this.visible = true;\n },\n },\n};\n</script>"
|
||||
},
|
||||
"notes": [
|
||||
"依据 frameworks/ImagePreview.html:24-30 的 svg() 造图函数与 4 张图 IMGS（#2F54EB/#13C2C2/#722ED1/#8C5A00）；:41-56 的 cur/prev/next/hide 对应 props index + onClose/onChange"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user