chore(build): 同步构建产物（site/** + sitemap 公网基址）——含本任务接线后的 data.json/data.js/逐端页，以及并行会话（S10/S9-P3）在途工作的生成物；其源码文件仍留在工作区未提交
This commit is contained in:
aurora-admin
@@ -1 +1,109 @@
|
||||
{"slug":"pagination","mode":"scenarios","examples":[{"id":"pagination-ex-1","title":"默认与常用变体","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <div class=\"row kole-pagination\">\n <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n <button class=\"kole-pagination-page\" type=\"button\" data-prev>上一页</button>\n <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n <button class=\"kole-pagination-page\" type=\"button\">2</button>\n <button class=\"kole-pagination-page\" type=\"button\" data-next>下一页</button>\n <span class=\"kole-pagination-desc\">共 128 条</span>\n </div>\n </div>\n</div>","preview":{"show":[[0,2]],"hide":[[1],[0,0],[0,1],[0,3],[0,2,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div class=\"kole-pagination\">\n <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n <button class=\"kole-pagination-page\" type=\"button\">上一页</button>\n <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n <button class=\"kole-pagination-page\" type=\"button\">2</button>\n <button class=\"kole-pagination-page\" type=\"button\">下一页</button>\n <span class=\"kole-pagination-desc\">共 128 条</span>\n </div>\n</div>","jsx":"import { KolePagination } from 'kole-ui/react';\n\n<KolePagination />","vue3":"<template>\n <KolePagination />\n</template>\n\n<script setup>\nimport { KolePagination } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KolePagination />\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\nexport default { components: { KolePagination } };\n</script>"},"notes":["演示页未含可映射的调用标记，本片段依据组件 API 表推导"]},{"id":"pagination-ex-2","title":"状态与使用场景","titleSrc":"demo","desc":"","html":"<div class=\"demo-block\">\n <div class=\"row kole-pagination\">\n <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n <span class=\"kole-pagination-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>","preview":{"show":[[0,3]],"hide":[[1],[0,0],[0,1],[0,2],[0,3,0]],"mode":"scenarios"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<div class=\"kole-pagination\">\n <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n <span class=\"kole-pagination-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>","jsx":"import { KolePagination } from 'kole-ui/react';\n\n<KolePagination />","vue3":"<template>\n <KolePagination />\n</template>\n\n<script setup>\nimport { KolePagination } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n <KolePagination />\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\nexport default { components: { KolePagination } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}
|
||||
{
|
||||
"curated": true,
|
||||
"slug": "pagination",
|
||||
"mode": "scenarios",
|
||||
"examples": [
|
||||
{
|
||||
"id": "pagination-ex-1",
|
||||
"title": "默认与常用变体",
|
||||
"titleSrc": "demo",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-pagination\">\n <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n <button class=\"kole-pagination-page\" type=\"button\" data-prev>上一页</button>\n <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n <button class=\"kole-pagination-page\" type=\"button\">2</button>\n <button class=\"kole-pagination-page\" type=\"button\" data-next>下一页</button>\n <span class=\"kole-pagination-desc\">共 128 条</span>\n </div>\n </div>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0,
|
||||
2
|
||||
]
|
||||
],
|
||||
"hide": [
|
||||
[
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
3
|
||||
],
|
||||
[
|
||||
0,
|
||||
2,
|
||||
0
|
||||
]
|
||||
],
|
||||
"mode": "scenarios"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<div class=\"kole-pagination\">\n <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n <button class=\"kole-pagination-page\" type=\"button\">上一页</button>\n <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n <button class=\"kole-pagination-page\" type=\"button\">2</button>\n <button class=\"kole-pagination-page\" type=\"button\">下一页</button>\n <span class=\"kole-pagination-desc\">共 128 条</span>\n </div>\n</div>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\nexport default function Demo() {\n const [page, setPage] = useState(1);\n\n return (\n <KolePagination\n total={128}\n page={page}\n pageSize={10}\n size=\"default\"\n onChange={setPage}\n />\n );\n}",
|
||||
"vue3": "<template>\n <KolePagination\n :total=\"128\"\n :page=\"page\"\n :page-size=\"10\"\n size=\"default\"\n @change=\"page = $event\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\nconst page = ref(1);\n</script>",
|
||||
"vue2": "<template>\n <KolePagination\n :total=\"total\"\n :page=\"page\"\n :page-size=\"pageSize\"\n size=\"default\"\n @change=\"onChange\"\n />\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePagination },\n data() {\n return { total: 128, page: 1, pageSize: 10 };\n },\n methods: {\n onChange(value) {\n this.page = value;\n }\n }\n};\n</script>",
|
||||
"tsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nconst config: PaginationState = {\n total: 128,\n pageSize: 10,\n size: 'default',\n};\n\nexport default function PaginationDefaultDemo(): JSX.Element {\n const [page, setPage] = useState<number>(1);\n\n return (\n <KolePagination\n total={config.total}\n page={page}\n pageSize={config.pageSize}\n size={config.size}\n onChange={setPage}\n />\n );\n}",
|
||||
"vue3ts": "<template>\n <KolePagination\n :total=\"config.total\"\n :page=\"page\"\n :page-size=\"config.pageSize\"\n :size=\"config.size\"\n @change=\"page = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nconst config: PaginationState = {\n total: 128,\n pageSize: 10,\n size: 'default',\n};\nconst page = ref<number>(1);\n</script>",
|
||||
"vue2ts": "<template>\n <div>\n <KolePagination\n :total=\"config.total\"\n :page=\"page\"\n :page-size=\"config.pageSize\"\n :size=\"config.size\"\n @change=\"onChange\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePagination } from 'kole-ui/vue2';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nexport default Vue.extend({\n components: { KolePagination },\n data(): { config: PaginationState; page: number } {\n return {\n config: { total: 128, pageSize: 10, size: 'default' },\n page: 1,\n };\n },\n methods: {\n onChange(value: number): void {\n this.page = value;\n },\n },\n});\n</script>"
|
||||
},
|
||||
"notes": "依据 frameworks/Pagination.html:6 的 kole-pagination-pager（上一页 / 1 / 2 / 下一页 + \"共 128 条\"），total=128、pageSize=10、size='default' 取自 frameworks/Pagination.jsx 的参数默认值，size 取值对齐 site/details/pagination.json contract.dims.size"
|
||||
},
|
||||
{
|
||||
"id": "pagination-ex-2",
|
||||
"title": "状态与使用场景",
|
||||
"titleSrc": "demo",
|
||||
"desc": "",
|
||||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-pagination\">\n <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n <span class=\"kole-pagination-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n </div>\n <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
|
||||
"preview": {
|
||||
"show": [
|
||||
[
|
||||
0,
|
||||
3
|
||||
]
|
||||
],
|
||||
"hide": [
|
||||
[
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
0,
|
||||
3,
|
||||
0
|
||||
]
|
||||
],
|
||||
"mode": "scenarios"
|
||||
},
|
||||
"previewSafe": true,
|
||||
"previewUnsafeReasons": [],
|
||||
"source": "curated",
|
||||
"code": {
|
||||
"html": "<div class=\"kole-pagination\">\n <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n <span class=\"kole-pagination-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||||
"jsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\nexport default function Demo() {\n const [page, setPage] = useState(3);\n\n return (\n <>\n <div className=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n <KolePagination\n size=\"small\"\n total={240}\n page={page}\n pageSize={20}\n onChange={setPage}\n onLoadMore={() => setPage(page + 1)}\n />\n </>\n );\n}",
|
||||
"vue3": "<template>\n <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n <KolePagination\n size=\"small\"\n :total=\"240\"\n :page=\"page\"\n :page-size=\"pageSize\"\n @change=\"page = $event\"\n @sizechange=\"pageSize = $event\"\n />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\nconst page = ref(3);\nconst pageSize = ref(20);\n</script>",
|
||||
"vue2": "<template>\n <div class=\"kole-pagination-surface\">\n <KolePagination\n size=\"small\"\n :total=\"240\"\n :page=\"page\"\n :page-size=\"20\"\n @pagechange=\"onPageChange\"\n />\n </div>\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\n\nexport default {\n components: { KolePagination },\n data() {\n return { page: 3 };\n },\n methods: {\n onPageChange(value) { this.page = value; }\n }\n};\n</script>",
|
||||
"tsx": "import { useCallback, useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nconst config: PaginationState = {\n total: 240,\n pageSize: 20,\n size: 'small',\n};\n\nexport default function PaginationOrdersDemo(): JSX.Element {\n const [page, setPage] = useState<number>(3);\n const onLoadMore = useCallback((): void => {\n setPage((current) => current + 1);\n }, []);\n\n return (\n <>\n <div className=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n <KolePagination\n size={config.size}\n total={config.total}\n page={page}\n pageSize={config.pageSize}\n onChange={setPage}\n onLoadMore={onLoadMore}\n />\n </>\n );\n}",
|
||||
"vue3ts": "<template>\n <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n <KolePagination\n :size=\"config.size\"\n :total=\"config.total\"\n :page=\"page\"\n :page-size=\"pageSize\"\n @change=\"page = $event\"\n @sizechange=\"pageSize = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nconst config: PaginationState = {\n total: 240,\n pageSize: 20,\n size: 'small',\n};\nconst page = ref<number>(3);\nconst pageSize = ref<number>(config.pageSize);\n</script>",
|
||||
"vue2ts": "<template>\n <div>\n <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n <KolePagination\n :size=\"config.size\"\n :total=\"config.total\"\n :page=\"page\"\n :page-size=\"config.pageSize\"\n @pagechange=\"onPageChange\"\n />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePagination } from 'kole-ui/vue2';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n total: number;\n pageSize: number;\n size: PaginationSize;\n}\n\nexport default Vue.extend({\n components: { KolePagination },\n data(): { config: PaginationState; page: number } {\n return {\n config: { total: 240, pageSize: 20, size: 'small' },\n page: 3,\n };\n },\n methods: {\n onPageChange(value: number): void {\n this.page = value;\n },\n },\n});\n</script>"
|
||||
},
|
||||
"notes": "依据 frameworks/Pagination.html:6 的 kole-pagination-surface + kole-pagination-desc（\"支持键盘焦点、状态反馈和令牌化样式\"）与 site/details/pagination.json contract.dims.size=small|default|large；Vue3 端 sizechange、pagechange 为 frameworks/Pagination.vue3.vue 的 defineEmits，Vue2 端 frameworks/Pagination.vue2.vue 只 $emit input/change/pagechange，onLoadMore 取自 frameworks/Pagination.jsx 参数表"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user