188 lines
14 KiB
JSON
188 lines
14 KiB
JSON
{
|
||
"slug": "exceptionvariants",
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "exceptionvariants-ex-1",
|
||
"title": "403 禁止访问",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-exception\" role=\"status\" data-type=\"403\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
0
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-exception\" role=\"status\" data-type=\"403\"></div>",
|
||
"jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 403 禁止访问：抱歉，你没有权限访问此页面。\nconst goHome = () => { location.href = '/'; };\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n onHome={goHome}\n onRetry={retry}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n <KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n <KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception403Demo',\n components: { KoleExceptionVariants },\n methods: {\n goHome() { location.href = '/'; },\n retry() { location.reload(); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n // 403 禁止访问：抱歉，你没有权限访问此页面。\n const goHome = () => { location.href = '/'; };\n const retry = () => location.reload();\n return (\n <KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n onHome={goHome}\n onRetry={retry}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n <KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('403 禁止访问');\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 403 禁止访问：抱歉，你没有权限访问此页面。 -->\n <KoleExceptionVariants\n type=\"403\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception403Demo',\n components: { KoleExceptionVariants },\n methods: {\n goHome(): void { location.href = '/'; },\n retry(): void { location.reload(); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ExceptionVariants.html:19-24 的 DATA['403']（emoji/title/desc）与该行 data-type=\"403\" 的卡片",
|
||
"type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
|
||
]
|
||
},
|
||
{
|
||
"id": "exceptionvariants-ex-2",
|
||
"title": "404 页面不存在",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-exception\" role=\"status\" data-type=\"404\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
1
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-exception\" role=\"status\" data-type=\"404\"></div>",
|
||
"jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 404 页面不存在：你访问的页面已被移除或从未存在。\n// 预设 type=\"404\" 已含 emoji/title/desc；下面显式覆盖为演示页 DATA['404'] 的同一组值\n<KoleExceptionVariants\n type=\"404\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n role=\"status\"\n/>",
|
||
"vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\n</script>\n\n<template>\n <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n <KoleExceptionVariants\n type=\"404\"\n role=\"status\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n <KoleExceptionVariants\n type=\"404\"\n role=\"status\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception404Demo',\n components: { KoleExceptionVariants },\n methods: {\n },\n};\n</script>",
|
||
"tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n // 404 页面不存在：你访问的页面已被移除或从未存在。\n // 预设 type=\"404\" 已含 emoji/title/desc；下面显式覆盖为演示页 DATA['404'] 的同一组值\n return (\n <KoleExceptionVariants\n type=\"404\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n role=\"status\"\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n <KoleExceptionVariants\n type=\"404\"\n role=\"status\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('404 页面不存在');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 404 页面不存在：你访问的页面已被移除或从未存在。 -->\n <KoleExceptionVariants\n type=\"404\"\n role=\"status\"\n emoji=\"🔍\"\n title=\"404 页面不存在\"\n desc=\"你访问的页面已被移除或从未存在。\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception404Demo',\n components: { KoleExceptionVariants },\n methods: {\n },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ExceptionVariants.html:19-24 的 DATA['404']（emoji/title/desc）与该行 data-type=\"404\" 的卡片",
|
||
"emoji/title/desc 为演示页 DATA 的实参（与组件内 PRESET 同值），片段演示显式覆盖写法"
|
||
]
|
||
},
|
||
{
|
||
"id": "exceptionvariants-ex-3",
|
||
"title": "500 服务器错误",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-exception\" role=\"status\" data-type=\"500\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
2
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
3
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-exception\" role=\"status\" data-type=\"500\"></div>",
|
||
"jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 500 服务器错误：服务器开小差了，请稍后再试。\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n onRetry={retry}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n <KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n @retry=\"retry\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n <KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n @retry=\"retry\"\n />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception500Demo',\n components: { KoleExceptionVariants },\n methods: {\n retry() { location.reload(); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n // 500 服务器错误：服务器开小差了，请稍后再试。\n const retry = () => location.reload();\n return (\n <KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n onRetry={retry}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n <KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n @retry=\"retry\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('500 服务器错误');\nfunction retry() { location.reload(); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 500 服务器错误：服务器开小差了，请稍后再试。 -->\n <KoleExceptionVariants\n type=\"500\"\n role=\"status\"\n @retry=\"retry\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception500Demo',\n components: { KoleExceptionVariants },\n methods: {\n retry(): void { location.reload(); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ExceptionVariants.html:19-24 的 DATA['500']（emoji/title/desc）与该行 data-type=\"500\" 的卡片",
|
||
"type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
|
||
]
|
||
},
|
||
{
|
||
"id": "exceptionvariants-ex-4",
|
||
"title": "502 网关错误",
|
||
"titleSrc": "script",
|
||
"desc": "",
|
||
"html": "<div class=\"kole-card\">\n <div class=\"kole-exception\" role=\"status\" data-type=\"502\"></div>\n</div>",
|
||
"preview": {
|
||
"show": [
|
||
[
|
||
3
|
||
]
|
||
],
|
||
"hide": [
|
||
[
|
||
0
|
||
],
|
||
[
|
||
1
|
||
],
|
||
[
|
||
2
|
||
],
|
||
[
|
||
4
|
||
]
|
||
],
|
||
"mode": "scenarios"
|
||
},
|
||
"previewSafe": true,
|
||
"previewUnsafeReasons": [],
|
||
"source": "curated",
|
||
"code": {
|
||
"html": "<div class=\"kole-exception\" role=\"status\" data-type=\"502\"></div>",
|
||
"jsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\n// 502 网关错误：网关无响应，请检查网络后重试。\nconst goHome = () => { location.href = '/'; };\nconst retry = () => location.reload();\n\n<KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n onHome={goHome}\n onRetry={retry}\n/>",
|
||
"vue3": "<script setup>\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>\n\n<template>\n <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n <KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>",
|
||
"vue2": "<template>\n <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n <KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script>\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception502Demo',\n components: { KoleExceptionVariants },\n methods: {\n goHome() { location.href = '/'; },\n retry() { location.reload(); },\n },\n};\n</script>",
|
||
"tsx": "import { KoleExceptionVariants } from 'kole-ui/react';\n\nexport default function KoleExceptionVariantsDemo(): JSX.Element {\n // 502 网关错误：网关无响应，请检查网络后重试。\n const goHome = () => { location.href = '/'; };\n const retry = () => location.reload();\n return (\n <KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n onHome={goHome}\n onRetry={retry}\n />\n );\n}",
|
||
"vue3ts": "<template>\n\n <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n <KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleExceptionVariants } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('502 网关错误');\nfunction goHome() { location.href = '/'; }\nfunction retry() { location.reload(); }\n</script>",
|
||
"vue2ts": "<template>\n\n <!-- 502 网关错误：网关无响应，请检查网络后重试。 -->\n <KoleExceptionVariants\n type=\"502\"\n role=\"status\"\n @home=\"goHome\"\n @retry=\"retry\"\n />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleExceptionVariants } from 'kole-ui/vue2';\n\nexport default {\n name: 'Exception502Demo',\n components: { KoleExceptionVariants },\n methods: {\n goHome(): void { location.href = '/'; },\n retry(): void { location.reload(); },\n },\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/ExceptionVariants.html:19-24 的 DATA['502']（emoji/title/desc）与该行 data-type=\"502\" 的卡片",
|
||
"type 为演示页 data-type 实参；返回首页/重试两个按钮在组件内固定渲染，对应 emits home/retry（site/data.json exceptionvariants.api.emits）"
|
||
]
|
||
}
|
||
],
|
||
"curated": true
|
||
}
|