king-design-analyzer 1.0.0

package/components/radio.json

@@ -0,0 +1,246 @@
+{
+    "id": "radio",
+    "name": "Radio",
+    "displayName": "单选框",
+    "category": "form",
+    "description": "单选框组件，用于在多个互斥选项中选择一个。可以通过 v-model 绑定同一个变量，以及指定相同的 name 来组成单选框组。",
+    "importStatement": "import { Radio } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "单选框取值，用于 v-model 进行双向绑定",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Radio v-model=\"selected\" trueValue=\"a\">选项 A</Radio>"
+        },
+        {
+            "name": "trueValue",
+            "description": "单选框选中后的值，用于区分不同选项",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Radio v-model=\"selected\" trueValue=\"apple\">苹果</Radio>"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Radio disabled>禁用选项</Radio>"
+        },
+        {
+            "name": "name",
+            "description": "单选框的名称。指定相同的 name 可以使多个单选框组成一个单选框组，行为与浏览器原生单选框一致。",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Radio name=\"gender\" trueValue=\"male\">男</Radio>\n<Radio name=\"gender\" trueValue=\"female\">女</Radio>"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当点击组件导致值变化时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "any",
+                    "description": "当前选中的值"
+                },
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件对象"
+                }
+            ],
+            "usageExample": "<Radio @change=\"handleChange\" trueValue=\"a\">选项</Radio>",
+            "handlerExample": "const handleChange = (value: any, e: MouseEvent) => {\n  console.log('选中值:', value);\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "radio_basic",
+            "title": "基础用法",
+            "description": "基本的单选框组",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio } from '@king-design/vue';\n\nconst selected = ref('a');\n</script>\n<template>\n  <Radio v-model=\"selected\" trueValue=\"a\">选项 A</Radio>\n  <Radio v-model=\"selected\" trueValue=\"b\">选项 B</Radio>\n  <Radio v-model=\"selected\" trueValue=\"c\">选项 C</Radio>\n</template>",
+            "tags": [
+                "basic",
+                "group"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一组互斥的单选框"
+        },
+        {
+            "id": "radio_disabled",
+            "title": "禁用状态",
+            "description": "禁用特定的单选框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio } from '@king-design/vue';\n\nconst selected = ref('a');\n</script>\n<template>\n  <Radio v-model=\"selected\" trueValue=\"a\">可选</Radio>\n  <Radio v-model=\"selected\" trueValue=\"b\" disabled>禁用</Radio>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用某些单选选项"
+        },
+        {
+            "id": "radio_change_event",
+            "title": "监听变化",
+            "description": "监听单选框变化事件",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio, Message } from '@king-design/vue';\n\nconst selected = ref('');\n\nconst handleChange = (value: string) => {\n  Message.info(`选中了: ${value}`);\n};\n</script>\n<template>\n  <Radio v-model=\"selected\" trueValue=\"yes\" @change=\"handleChange\">是</Radio>\n  <Radio v-model=\"selected\" trueValue=\"no\" @change=\"handleChange\">否</Radio>\n</template>",
+            "tags": [
+                "change",
+                "event"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue"
+            ],
+            "usedEvents": [
+                "change"
+            ],
+            "usedMethods": [],
+            "scenario": "监听单选框选中状态的变化"
+        },
+        {
+            "id": "radio_boolean",
+            "title": "布尔选择",
+            "description": "是/否类型的单选",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio } from '@king-design/vue';\n\nconst agree = ref(false);\n</script>\n<template>\n  <Radio v-model=\"agree\" :trueValue=\"true\">同意协议</Radio>\n  <p>当前状态: {{ agree ? '已同意' : '未同意' }}</p>\n</template>",
+            "tags": [
+                "boolean",
+                "agree"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建同意/拒绝类型的单选框"
+        },
+        {
+            "id": "radio_fruit_selection",
+            "title": "水果选择",
+            "description": "实际场景：选择水果",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio } from '@king-design/vue';\n\nconst fruit = ref('apple');\n</script>\n<template>\n  <div>\n    <Radio v-model=\"fruit\" trueValue=\"apple\">🍎 苹果</Radio>\n    <Radio v-model=\"fruit\" trueValue=\"orange\">🍊 橙子</Radio>\n    <Radio v-model=\"fruit\" trueValue=\"banana\">🍌 香蕉</Radio>\n    <Radio v-model=\"fruit\" trueValue=\"grape\">🍇 葡萄</Radio>\n  </div>\n  <p>您选择了: {{ fruit }}</p>\n</template>",
+            "tags": [
+                "selection",
+                "fruit"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "实际应用场景：商品选择"
+        },
+        {
+            "id": "radio_name_grouping",
+            "title": "原生 Name 分组",
+            "description": "通过指定相同的 name 属性使多个单选框组成一个单选框组（原生行为）",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Radio } from '@king-design/vue';\n\nconst gender = ref('');\n</script>\n<template>\n  <div>\n    <Radio name=\"gender\" trueValue=\"male\" v-model=\"gender\">男</Radio>\n    <Radio name=\"gender\" trueValue=\"female\" v-model=\"gender\">女</Radio>\n  </div>\n  <p>选中性别: {{ gender }}</p>\n</template>",
+            "tags": [
+                "name",
+                "native",
+                "group"
+            ],
+            "usedProps": [
+                "name",
+                "trueValue",
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用原生 name 属性进行单选框分组"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "radio_missing_truevalue",
+            "description": "多个 Radio 未设置 trueValue",
+            "wrongCode": "<Radio v-model=\"selected\">选项 A</Radio>\n<Radio v-model=\"selected\">选项 B</Radio>",
+            "correctCode": "<Radio v-model=\"selected\" trueValue=\"a\">选项 A</Radio>\n<Radio v-model=\"selected\" trueValue=\"b\">选项 B</Radio>",
+            "explanation": "多个 Radio 组成单选组时，必须为每个 Radio 设置不同的 trueValue 来区分选项",
+            "relatedProps": [
+                "trueValue"
+            ]
+        },
+        {
+            "id": "radio_different_vmodel_no_name",
+            "description": "未设置 name 且同组 Radio 绑定了不同的 v-model",
+            "wrongCode": "<Radio v-model=\"value1\" trueValue=\"a\">A</Radio>\n<Radio v-model=\"value2\" trueValue=\"b\">B</Radio>",
+            "correctCode": "<Radio v-model=\"selected\" trueValue=\"a\">A</Radio>\n<Radio v-model=\"selected\" trueValue=\"b\">B</Radio>",
+            "explanation": "如果不使用 name 属性进行原生分组，同一组单选框必须绑定同一个 v-model 变量，否则无法实现互斥选择",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "radio_truevalue_same",
+            "description": "多个 Radio 设置了相同的 trueValue",
+            "wrongCode": "<Radio v-model=\"selected\" trueValue=\"a\">A</Radio>\n<Radio v-model=\"selected\" trueValue=\"a\">B</Radio>",
+            "correctCode": "<Radio v-model=\"selected\" trueValue=\"a\">A</Radio>\n<Radio v-model=\"selected\" trueValue=\"b\">B</Radio>",
+            "explanation": "同组中每个 Radio 的 trueValue 必须唯一，否则无法区分选项",
+            "relatedProps": [
+                "trueValue"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "单选框",
+        "radio",
+        "单选",
+        "选择",
+        "互斥",
+        "选项",
+        "trueValue",
+        "name",
+        "分组"
+    ],
+    "useCases": [
+        "表单中的性别选择",
+        "是/否选择",
+        "支付方式选择",
+        "配送方式选择",
+        "等级/类型选择",
+        "问卷中的单选题"
+    ],
+    "relatedComponents": [
+        "Checkbox",
+        "ButtonGroup",
+        "Select"
+    ]
+}

package/components/region.json

@@ -0,0 +1,115 @@
+{
+    "id": "region",
+    "name": "Region",
+    "displayName": "地域选择",
+    "category": "form",
+    "description": "地域（Region）选择组件，支持多区域和多地域的展示与切换。",
+    "importStatement": "import { Region } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "选中的地域编码（RegionCode）",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "usageExample": "<Region v-model=\"regionCode\" />"
+        },
+        {
+            "name": "areaCode",
+            "description": "当前选中的大区编码",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "usageExample": "<Region v-model:areaCode=\"areaCode\" />"
+        },
+        {
+            "name": "packages",
+            "description": "地域配置列表",
+            "type": {
+                "raw": "Region[]",
+                "kind": "array"
+            },
+            "required": false,
+            "usageExample": "<Region :packages=\"packages\" />"
+        },
+        {
+            "name": "supportEmptyAz",
+            "description": "是否支持空可用区",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Region supportEmptyAz />"
+        },
+        {
+            "name": "showLearnMore",
+            "description": "是否显示了解更多",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Region showLearnMore />"
+        },
+        {
+            "name": "learnMoreUrl",
+            "description": "了解更多链接ID",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "usageExample": "<Region :learnMoreUrl=\"123\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "update:modelValue",
+            "description": "地域改变时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "新的RegionCode"
+                }
+            ],
+            "usageExample": "<Region @update:modelValue=\"v => console.log(v)\" />",
+            "handlerExample": "(val) => { console.log(val); }"
+        },
+        {
+            "name": "areaChange",
+            "vueEventName": "update:areaCode",
+            "description": "大区改变时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "新的AreaCode"
+                }
+            ],
+            "usageExample": "<Region @update:areaCode=\"v => console.log(v)\" />",
+            "handlerExample": "(val) => { console.log(val); }"
+        }
+    ],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "region",
+        "area",
+        "location",
+        "地域",
+        "区域"
+    ],
+    "useCases": [
+        "购买页选择地域",
+        "列表页筛选地域"
+    ]
+}