188 lines
26 KiB
JSON
188 lines
26 KiB
JSON
{
|
||
"slug": "resultvariants",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "resultvariants-ex-1",
|
||
"title": "提交成功",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-result is-success\" role=\"status\" data-i=\"0\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-result is-success\" role=\"status\"></div>",
|
||
"jsx": "import { KoleResultVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n const onAction = () => console.log('查看详情');\n const onSecondary = () => console.log('返回列表');\n return (\n <KoleResultVariants\n type=\"success\"\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n actionText=\"查看详情\"\n secondaryText=\"返回列表\"\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={onAction}\n onSecondary={onSecondary}\n />\n );\n}",
|
||
"vue3": "<script setup>\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\nfunction onAction() { console.log('查看详情'); }\nfunction onSecondary() { console.log('返回列表'); }\n</script>\n\n<template>\n <KoleResultVariants\n type=\"success\"\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>",
|
||
"vue2": "<template>\n <KoleResultVariants\n type=\"success\"\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script>\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleResultVariants },\n methods: {\n onAction() { console.log('查看详情'); },\n onSecondary() { console.log('返回列表'); }\n }\n};\n</script>",
|
||
"tsx": "import { KoleResultVariants } from 'kole-ui/react';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultAction {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst success: ResultType = 'success';\nconst handlers: ResultAction = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n\nexport default function ResultSuccessDemo(): JSX.Element {\n return (\n <KoleResultVariants\n type={success}\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n actionText={handlers.actionText}\n secondaryText={handlers.secondaryText}\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={handlers.onAction}\n onSecondary={handlers.onSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleResultVariants\n :type=\"success\"\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst success: ResultType = 'success';\nconst handlers: ResultHandlers = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleResultVariants\n :type=\"success\"\n title=\"提交成功\"\n desc=\"您的申请已提交，我们将在 1 个工作日内处理。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nexport default Vue.extend({\n components: { KoleResultVariants },\n data(): { success: ResultType; handlers: ResultHandlers } {\n return {\n success: 'success',\n handlers: {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ResultVariants.html 第 19-24 行 DATA[0]：icon \"✓\"、title「提交成功」、desc「您的申请已提交，我们将在 1 个工作日内处理。」；第 13-16 行四个 .kole-result 的类分别是 is-success / is-error / is-warning / is-info，对应 type 取值。",
|
||
"第 25-33 行四个结果块共用同一组动作与补充区：primary 按钮「查看详情」、次按钮「返回列表」、.kole-result-extra 文案「补充说明：结果页可承载额外操作区与帮助链接。」——分别对应 actionText / secondaryText / extra。prop 名见 frameworks/ResultVariants.jsx 第 6 行参数表与 frameworks/ResultVariants.vue3.vue 第 15-21 行 defineProps，事件为 action / secondary（第 22 行），Vue 端补充区走 extra 具名插槽（第 10 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "resultvariants-ex-2",
|
||
"title": "提交失败",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-result is-error\" role=\"status\" data-i=\"1\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-result is-error\" role=\"status\"></div>",
|
||
"jsx": "import { KoleResultVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n const onAction = () => console.log('查看详情');\n const onSecondary = () => console.log('返回列表');\n return (\n <KoleResultVariants\n type=\"error\"\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n actionText=\"查看详情\"\n secondaryText=\"返回列表\"\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={onAction}\n onSecondary={onSecondary}\n />\n );\n}",
|
||
"vue3": "<script setup>\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\nfunction onAction() { console.log('查看详情'); }\nfunction onSecondary() { console.log('返回列表'); }\n</script>\n\n<template>\n <KoleResultVariants\n type=\"error\"\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>",
|
||
"vue2": "<template>\n <KoleResultVariants\n type=\"error\"\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script>\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleResultVariants },\n methods: {\n onAction() { console.log('查看详情'); },\n onSecondary() { console.log('返回列表'); }\n }\n};\n</script>",
|
||
"tsx": "import { KoleResultVariants } from 'kole-ui/react';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultAction {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst failed: ResultType = 'error';\nconst handlers: ResultAction = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n\nexport default function ResultErrorDemo(): JSX.Element {\n return (\n <KoleResultVariants\n type={failed}\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n actionText={handlers.actionText}\n secondaryText={handlers.secondaryText}\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={handlers.onAction}\n onSecondary={handlers.onSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleResultVariants\n :type=\"failed\"\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst failed: ResultType = 'error';\nconst handlers: ResultHandlers = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleResultVariants\n :type=\"failed\"\n title=\"提交失败\"\n desc=\"表单校验未通过，请检查后重新提交。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nexport default Vue.extend({\n components: { KoleResultVariants },\n data(): { failed: ResultType; handlers: ResultHandlers } {\n return {\n failed: 'error',\n handlers: {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ResultVariants.html 第 19-24 行 DATA[1]：icon \"✕\"、title「提交失败」、desc「表单校验未通过，请检查后重新提交。」；第 13-16 行四个 .kole-result 的类分别是 is-success / is-error / is-warning / is-info，对应 type 取值。",
|
||
"第 25-33 行四个结果块共用同一组动作与补充区：primary 按钮「查看详情」、次按钮「返回列表」、.kole-result-extra 文案「补充说明：结果页可承载额外操作区与帮助链接。」——分别对应 actionText / secondaryText / extra。prop 名见 frameworks/ResultVariants.jsx 第 6 行参数表与 frameworks/ResultVariants.vue3.vue 第 15-21 行 defineProps，事件为 action / secondary（第 22 行），Vue 端补充区走 extra 具名插槽（第 10 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "resultvariants-ex-3",
|
||
"title": "请注意",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-result is-warning\" role=\"status\" data-i=\"2\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-result is-warning\" role=\"status\"></div>",
|
||
"jsx": "import { KoleResultVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n const onAction = () => console.log('查看详情');\n const onSecondary = () => console.log('返回列表');\n return (\n <KoleResultVariants\n type=\"warning\"\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n actionText=\"查看详情\"\n secondaryText=\"返回列表\"\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={onAction}\n onSecondary={onSecondary}\n />\n );\n}",
|
||
"vue3": "<script setup>\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\nfunction onAction() { console.log('查看详情'); }\nfunction onSecondary() { console.log('返回列表'); }\n</script>\n\n<template>\n <KoleResultVariants\n type=\"warning\"\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>",
|
||
"vue2": "<template>\n <KoleResultVariants\n type=\"warning\"\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script>\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleResultVariants },\n methods: {\n onAction() { console.log('查看详情'); },\n onSecondary() { console.log('返回列表'); }\n }\n};\n</script>",
|
||
"tsx": "import { KoleResultVariants } from 'kole-ui/react';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultAction {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst warning: ResultType = 'warning';\nconst handlers: ResultAction = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n\nexport default function ResultWarningDemo(): JSX.Element {\n return (\n <KoleResultVariants\n type={warning}\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n actionText={handlers.actionText}\n secondaryText={handlers.secondaryText}\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={handlers.onAction}\n onSecondary={handlers.onSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleResultVariants\n :type=\"warning\"\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst warning: ResultType = 'warning';\nconst handlers: ResultHandlers = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleResultVariants\n :type=\"warning\"\n title=\"请注意\"\n desc=\"部分商品库存不足，已自动移除。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nexport default Vue.extend({\n components: { KoleResultVariants },\n data(): { warning: ResultType; handlers: ResultHandlers } {\n return {\n warning: 'warning',\n handlers: {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ResultVariants.html 第 19-24 行 DATA[2]：icon \"!\"、title「请注意」、desc「部分商品库存不足，已自动移除。」；第 13-16 行四个 .kole-result 的类分别是 is-success / is-error / is-warning / is-info，对应 type 取值。",
|
||
"第 25-33 行四个结果块共用同一组动作与补充区：primary 按钮「查看详情」、次按钮「返回列表」、.kole-result-extra 文案「补充说明：结果页可承载额外操作区与帮助链接。」——分别对应 actionText / secondaryText / extra。prop 名见 frameworks/ResultVariants.jsx 第 6 行参数表与 frameworks/ResultVariants.vue3.vue 第 15-21 行 defineProps，事件为 action / secondary（第 22 行），Vue 端补充区走 extra 具名插槽（第 10 行）。"
|
||
]
|
||
},
|
||
{
|
||
"id": "resultvariants-ex-4",
|
||
"title": "已保存草稿",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-result is-info\" role=\"status\" data-i=\"3\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-result is-info\" role=\"status\"></div>",
|
||
"jsx": "import { KoleResultVariants } from 'kole-ui/react';\n\nexport default function Demo() {\n const onAction = () => console.log('查看详情');\n const onSecondary = () => console.log('返回列表');\n return (\n <KoleResultVariants\n type=\"info\"\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n actionText=\"查看详情\"\n secondaryText=\"返回列表\"\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={onAction}\n onSecondary={onSecondary}\n />\n );\n}",
|
||
"vue3": "<script setup>\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\nfunction onAction() { console.log('查看详情'); }\nfunction onSecondary() { console.log('返回列表'); }\n</script>\n\n<template>\n <KoleResultVariants\n type=\"info\"\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>",
|
||
"vue2": "<template>\n <KoleResultVariants\n type=\"info\"\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n action-text=\"查看详情\"\n secondary-text=\"返回列表\"\n @action=\"onAction\"\n @secondary=\"onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script>\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleResultVariants },\n methods: {\n onAction() { console.log('查看详情'); },\n onSecondary() { console.log('返回列表'); }\n }\n};\n</script>",
|
||
"tsx": "import { KoleResultVariants } from 'kole-ui/react';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultAction {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst info: ResultType = 'info';\nconst handlers: ResultAction = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n\nexport default function ResultInfoDemo(): JSX.Element {\n return (\n <KoleResultVariants\n type={info}\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n actionText={handlers.actionText}\n secondaryText={handlers.secondaryText}\n extra=\"补充说明：结果页可承载额外操作区与帮助链接。\"\n onAction={handlers.onAction}\n onSecondary={handlers.onSecondary}\n />\n );\n}",
|
||
"vue3ts": "<template>\n <KoleResultVariants\n :type=\"info\"\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template #extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleResultVariants } from 'kole-ui/vue3';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nconst info: ResultType = 'info';\nconst handlers: ResultHandlers = {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n};\n</script>",
|
||
"vue2ts": "<template>\n <div>\n <KoleResultVariants\n :type=\"info\"\n title=\"已保存草稿\"\n desc=\"内容已存为草稿，可稍后继续编辑。\"\n :action-text=\"handlers.actionText\"\n :secondary-text=\"handlers.secondaryText\"\n @action=\"handlers.onAction\"\n @secondary=\"handlers.onSecondary\"\n >\n <template v-slot:extra>补充说明：结果页可承载额外操作区与帮助链接。</template>\n </KoleResultVariants>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleResultVariants } from 'kole-ui/vue2';\n\ntype ResultType = 'success' | 'error' | 'warning' | 'info';\ninterface ResultHandlers {\n actionText: string;\n secondaryText: string;\n onAction: () => void;\n onSecondary: () => void;\n}\n\nexport default Vue.extend({\n components: { KoleResultVariants },\n data(): { info: ResultType; handlers: ResultHandlers } {\n return {\n info: 'info',\n handlers: {\n actionText: '查看详情',\n secondaryText: '返回列表',\n onAction: (): void => console.log('查看详情'),\n onSecondary: (): void => console.log('返回列表'),\n },\n };\n },\n});\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ResultVariants.html 第 19-24 行 DATA[3]：icon \"i\"、title「已保存草稿」、desc「内容已存为草稿，可稍后继续编辑。」；第 13-16 行四个 .kole-result 的类分别是 is-success / is-error / is-warning / is-info，对应 type 取值。",
|
||
"第 25-33 行四个结果块共用同一组动作与补充区：primary 按钮「查看详情」、次按钮「返回列表」、.kole-result-extra 文案「补充说明：结果页可承载额外操作区与帮助链接。」——分别对应 actionText / secondaryText / extra。prop 名见 frameworks/ResultVariants.jsx 第 6 行参数表与 frameworks/ResultVariants.vue3.vue 第 15-21 行 defineProps，事件为 action / secondary（第 22 行），Vue 端补充区走 extra 具名插槽（第 10 行）。"
|
||
]
|
||
}
|
||
]
|
||
}
|