king-design-analyzer 1.0.0

package/components/carousel.json

@@ -0,0 +1,207 @@
+{
+    "id": "carousel",
+    "name": "Carousel",
+    "displayName": "走马灯",
+    "category": "data",
+    "description": "走马灯/轮播图组件，循环播放一组图片、文字或自定义内容。支持自动播放、切换效果、自定义箭头等功能。",
+    "importStatement": "import { Carousel, CarouselItem } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前展示的内容块对应的值。默认为索引字符串 \"$0\", \"$1\" 等",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"$0\"",
+            "usageExample": "<Carousel v-model=\"currentValue\">"
+        },
+        {
+            "name": "autoplay",
+            "description": "是否自动切换。如果传入数字，则表示自动切换的时间间隔（毫秒）。为 0 或 false 则不自动切换。",
+            "type": {
+                "raw": "boolean | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Carousel :autoplay=\"3000\">"
+        },
+        {
+            "name": "arrow",
+            "description": "左右切换箭头的展示方式",
+            "type": {
+                "raw": "\"hover\" | \"always\" | \"never\"",
+                "kind": "union",
+                "unionTypes": [
+                    "hover",
+                    "always",
+                    "never"
+                ]
+            },
+            "required": false,
+            "default": "\"hover\"",
+            "allowedValues": [
+                {
+                    "value": "hover",
+                    "label": "鼠标悬停时显示",
+                    "isDefault": true
+                },
+                {
+                    "value": "always",
+                    "label": "始终显示"
+                },
+                {
+                    "value": "never",
+                    "label": "不显示"
+                }
+            ],
+            "usageExample": "<Carousel arrow=\"always\">"
+        },
+        {
+            "name": "effect",
+            "description": "切换动画效果",
+            "type": {
+                "raw": "\"slide\" | \"fade\"",
+                "kind": "union",
+                "unionTypes": [
+                    "slide",
+                    "fade"
+                ]
+            },
+            "required": false,
+            "default": "\"slide\"",
+            "allowedValues": [
+                {
+                    "value": "slide",
+                    "label": "滑动切换",
+                    "isDefault": true
+                },
+                {
+                    "value": "fade",
+                    "label": "淡入淡出"
+                }
+            ],
+            "usageExample": "<Carousel effect=\"fade\">"
+        },
+        {
+            "name": "clonedAmount",
+            "description": "slide 模式下，指定前后克隆的内容块数量，用于无缝循环轮播",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "1",
+            "usageExample": "<Carousel :clonedAmount=\"2\">"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "CarouselItem",
+            "description": "走马灯的内容项",
+            "props": [
+                {
+                    "name": "value",
+                    "description": "定义该项的唯一值，若不设置默认为索引 \"$0\", \"$1\"...",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<CarouselItem value=\"item1\">"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "carousel_basic",
+            "title": "基础用法",
+            "description": "基本的走马灯效果",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Carousel, CarouselItem } from '@king-design/vue';\n</script>\n<template>\n  <Carousel style=\"height: 200px;\">\n    <CarouselItem>\n      <div class=\"demo-item\">1</div>\n    </CarouselItem>\n    <CarouselItem>\n      <div class=\"demo-item\">2</div>\n    </CarouselItem>\n    <CarouselItem>\n      <div class=\"demo-item\">3</div>\n    </CarouselItem>\n  </Carousel>\n</template>\n<style>\n.demo-item {\n  height: 100%;\n  background: #36cfc9;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  font-size: 20px;\n}\n</style>",
+            "tags": [
+                "basic",
+                "slide"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "基本的轮播展示"
+        },
+        {
+            "id": "carousel_autoplay",
+            "title": "自动轮播",
+            "description": "设置 autoplay 属性自动播放",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Carousel, CarouselItem } from '@king-design/vue';\n</script>\n<template>\n  <Carousel :autoplay=\"3000\" style=\"height: 200px;\">\n    <CarouselItem>Page 1</CarouselItem>\n    <CarouselItem>Page 2</CarouselItem>\n  </Carousel>\n</template>",
+            "tags": [
+                "autoplay",
+                "timer"
+            ],
+            "usedProps": [
+                "autoplay"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "首页 Banner 自动轮播"
+        },
+        {
+            "id": "carousel_fade",
+            "title": "淡入淡出",
+            "description": "使用 effect=\"fade\" 切换效果",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Carousel, CarouselItem } from '@king-design/vue';\n</script>\n<template>\n  <Carousel effect=\"fade\" style=\"height: 200px;\">\n    <CarouselItem>Page 1</CarouselItem>\n    <CarouselItem>Page 2</CarouselItem>\n  </Carousel>\n</template>",
+            "tags": [
+                "fade",
+                "effect"
+            ],
+            "usedProps": [
+                "effect"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "使用淡入淡出效果的轮播"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "carousel_height",
+            "description": "未设置 Carousel 高度",
+            "wrongCode": "<Carousel>...</Carousel>",
+            "correctCode": "<Carousel style=\"height: 300px;\">...</Carousel>",
+            "explanation": "Carousel 默认可能没有高度或者高度为 0，需要显式设置高度。",
+            "relatedProps": []
+        }
+    ],
+    "searchKeywords": [
+        "走马灯",
+        "carousel",
+        "slider",
+        "轮播",
+        "banner",
+        "swiper",
+        "slide"
+    ],
+    "useCases": [
+        "首页 Banner 展示",
+        "图片画廊",
+        "产品特性轮播介绍",
+        "公告通知轮播"
+    ],
+    "relatedComponents": []
+}

package/components/cascader.json

@@ -0,0 +1,373 @@
+{
+    "id": "cascader",
+    "name": "Cascader",
+    "displayName": "级联选择",
+    "category": "form",
+    "description": "级联选择框。用于多层级数据的选择，如省市区选择、公司层级选择等。",
+    "importStatement": "import { Cascader } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前选中的值。多选模式下为数组。",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "\"\"",
+            "usageExample": "<Cascader v-model=\"selectedCity\">"
+        },
+        {
+            "name": "data",
+            "description": "级联数据源。结构为 {value, label, children}[]",
+            "type": {
+                "raw": "CascaderData[]",
+                "kind": "array"
+            },
+            "required": true,
+            "default": "[]",
+            "usageExample": "<Cascader :data=\"options\">"
+        },
+        {
+            "name": "multiple",
+            "description": "是否开启多选模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader multiple>"
+        },
+        {
+            "name": "filterable",
+            "description": "是否可搜索",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader filterable>"
+        },
+        {
+            "name": "clearable",
+            "description": "是否显示清空按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader clearable>"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader disabled>"
+        },
+        {
+            "name": "size",
+            "description": "尺寸",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Cascader size=\"small\">"
+        },
+        {
+            "name": "trigger",
+            "description": "子菜单触发方式",
+            "type": {
+                "raw": "\"click\" | \"hover\"",
+                "kind": "union",
+                "unionTypes": [
+                    "click",
+                    "hover"
+                ]
+            },
+            "required": false,
+            "default": "\"click\"",
+            "allowedValues": [
+                {
+                    "value": "click",
+                    "label": "点击触发",
+                    "isDefault": true
+                },
+                {
+                    "value": "hover",
+                    "label": "悬停触发"
+                }
+            ],
+            "usageExample": "<Cascader trigger=\"hover\">"
+        },
+        {
+            "name": "changeOnSelect",
+            "description": "是否选中父级即改变 value（允许选择任意一级）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader changeOnSelect>"
+        },
+        {
+            "name": "format",
+            "description": "自定义选中项的显示格式，参数为选中的数据项数组，返回显示的字符串。",
+            "type": {
+                "raw": "(values: any[]) => string",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Cascader :format=\"(v) => v.map(i => i.label).join(' > ')\">"
+        },
+        {
+            "name": "loadData",
+            "description": "动态加载数据函数。当子节点为空时调用。",
+            "type": {
+                "raw": "(item: any) => Promise<void> | void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Cascader :loadData=\"loadMore\">"
+        },
+        {
+            "name": "loading",
+            "description": "是否显示加载中状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Cascader loading>"
+        },
+        {
+            "name": "placeholder",
+            "description": "占位文本",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"请选择\"",
+            "usageExample": "<Cascader placeholder=\"请选择城市\">"
+        },
+        {
+            "name": "fields",
+            "description": "自定义字段名映射，默认 {value:'value', label:'label', children:'children', disabled:'disabled'}",
+            "type": {
+                "raw": "object",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Cascader :fields=\"{value: 'code', label: 'name'}\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "description": "值发生变化时触发",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "any",
+                    "description": "当前选中的值"
+                }
+            ],
+            "usageExample": "<Cascader @change=\"handleChange\">"
+        },
+        {
+            "name": "show",
+            "description": "菜单显示时触发",
+            "params": [],
+            "usageExample": "<Cascader @show=\"onShow\">"
+        },
+        {
+            "name": "hide",
+            "description": "菜单隐藏时触发",
+            "params": [],
+            "usageExample": "<Cascader @hide=\"onHide\">"
+        }
+    ],
+    "slots": [
+        {
+            "name": "value",
+            "description": "自定义选择结果的展示",
+            "params": "([value: any, label: Children]) => Children"
+        },
+        {
+            "name": "values",
+            "description": "自定义多选的选择结果的展示",
+            "params": "([values: any[], labels: Children[]]) => Children"
+        },
+        {
+            "name": "prefix",
+            "description": "自定义输入框前面展示的内容"
+        },
+        {
+            "name": "suffix",
+            "description": "自定义输入框后面展示的内容"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "CascaderData",
+            "definition": "interface CascaderData {\n  value: string | number;\n  label: string;\n  children?: CascaderData[];\n  disabled?: boolean;\n  loaded?: boolean;\n  [key: string]: any;\n}",
+            "description": "级联选择器数据项结构"
+        }
+    ],
+    "examples": [
+        {
+            "id": "cascader_basic",
+            "title": "基础用法",
+            "description": "省市区级联选择",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Cascader } from '@king-design/vue';\n\nconst value = ref([]);\nconst options = [\n  {\n    value: 'zhejiang',\n    label: 'Zhejiang',\n    children: [\n      {\n        value: 'hangzhou',\n        label: 'Hangzhou',\n        children: [\n          {\n            value: 'xihu',\n            label: 'West Lake',\n          },\n        ],\n      },\n    ],\n  },\n  {\n    value: 'jiangsu',\n    label: 'Jiangsu',\n    children: [\n      {\n        value: 'nanjing',\n        label: 'Nanjing',\n        children: [\n          {\n            value: 'zhonghuamen',\n            label: 'Zhong Hua Men',\n          },\n        ],\n      },\n    ],\n  },\n];\n</script>\n<template>\n  <Cascader v-model=\"value\" :data=\"options\" />\n</template>",
+            "tags": [
+                "basic",
+                "select"
+            ],
+            "usedProps": [
+                "data",
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "选择地理位置"
+        },
+        {
+            "id": "cascader_display_input",
+            "title": "显示在输入框",
+            "description": "显示完整的选择路径",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Cascader } from '@king-design/vue';\n\nconst value = ref([]);\nconst options = [{ value: 'bj', label: 'Beijing', children: [{ value: 'hd', label: 'Haidian' }] }];\n</script>\n<template>\n  <Cascader v-model=\"value\" :data=\"options\" placeholder=\"请选择\" />\n</template>",
+            "tags": [
+                "input",
+                "placeholder"
+            ],
+            "usedProps": [
+                "placeholder"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "表单中的级联选择"
+        },
+        {
+            "id": "cascader_change_on_select",
+            "title": "选择即改变",
+            "description": "允许选择任意一级菜单",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Cascader } from '@king-design/vue';\n\nconst value = ref([]);\nconst options = [{ value: 'bj', label: 'Beijing', children: [{ value: 'hd', label: 'Haidian' }] }];\n</script>\n<template>\n  <Cascader v-model=\"value\" :data=\"options\" changeOnSelect />\n</template>",
+            "tags": [
+                "flexible",
+                "changeOnSelect"
+            ],
+            "usedProps": [
+                "changeOnSelect"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "可以只选择省份，也可以选择到城市"
+        },
+        {
+            "id": "cascader_multiple",
+            "title": "多选模式",
+            "description": "支持多选",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Cascader } from '@king-design/vue';\n\nconst value = ref([]);\nconst options = [\n  { value: '1', label: 'Option 1', children: [{ value: '1-1', label: 'Option 1-1' }] },\n  { value: '2', label: 'Option 2', children: [{ value: '2-1', label: 'Option 2-1' }] }\n];\n</script>\n<template>\n  <Cascader v-model=\"value\" :data=\"options\" multiple />\n</template>",
+            "tags": [
+                "multiple",
+                "select"
+            ],
+            "usedProps": [
+                "multiple"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "多选分类标签"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "cascader_data_empty",
+            "description": "数据未加载时显示空白",
+            "wrongCode": "<Cascader :data=\"[]\" />",
+            "correctCode": "<Cascader :data=\"options\" :loading=\"isLoading\" />",
+            "explanation": "如果数据为空，建议设置 loading 状态或者提供数据源。",
+            "relatedProps": [
+                "data",
+                "loading"
+            ]
+        },
+        {
+            "id": "cascader_value_array",
+            "description": "value 格式错误",
+            "wrongCode": "const value = ref('beijing')",
+            "correctCode": "const value = ref(['beijing', 'chaoyang'])",
+            "explanation": "Cascader 的 value 通常是一个数组（表示路径），如果是多选则为二维数组。",
+            "relatedProps": [
+                "value"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "级联选择",
+        "cascader",
+        "select",
+        "tree",
+        "多级联动",
+        "省市区"
+    ],
+    "useCases": [
+        "省市区地址选择",
+        "公司组织架构选择",
+        "多级商品分类选择"
+    ],
+    "relatedComponents": [
+        "Select",
+        "TreeSelect"
+    ]
+}