{
 "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 行）。"
   ]
  }
 ]
}