king-design-analyzer 1.0.0

package/components/collapse.json

@@ -0,0 +1,358 @@
+{
+    "id": "collapse",
+    "name": "Collapse",
+    "displayName": "折叠面板",
+    "category": "data",
+    "description": "折叠面板组件，用于将内容区域折叠/展开。支持手风琴模式（同时只展开一个）、箭头位置自定义、无边框样式等。配合 CollapseItem 子组件使用。",
+    "importStatement": "import { Collapse, CollapseItem } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前展开的 CollapseItem 取值，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Collapse v-model=\"activeKeys\">"
+        },
+        {
+            "name": "accordion",
+            "description": "是否展示手风琴风格，同时只能展开一个面板",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Collapse v-model=\"activeKeys\" accordion>"
+        },
+        {
+            "name": "arrow",
+            "description": "指定箭头位置",
+            "type": {
+                "raw": "\"right\" | \"left\"",
+                "kind": "union",
+                "unionTypes": [
+                    "right",
+                    "left"
+                ]
+            },
+            "required": false,
+            "default": "\"right\"",
+            "allowedValues": [
+                {
+                    "value": "right",
+                    "label": "箭头在右侧",
+                    "isDefault": true
+                },
+                {
+                    "value": "left",
+                    "label": "箭头在左侧"
+                }
+            ],
+            "usageExample": "<Collapse arrow=\"left\">"
+        },
+        {
+            "name": "noBorder",
+            "description": "是否展示无边框的简洁样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Collapse noBorder>"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "title",
+            "description": "扩展标题"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "CollapseItem",
+            "description": "折叠面板项组件，用于定义每个可折叠的内容区域",
+            "props": [
+                {
+                    "name": "value",
+                    "description": "当前 CollapseItem 的取值，默认会使用 $ + 索引的组合",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "$${index}",
+                    "usageExample": "<CollapseItem value=\"1\" title=\"面板标题\">内容</CollapseItem>"
+                },
+                {
+                    "name": "title",
+                    "description": "标题内容",
+                    "type": {
+                        "raw": "string | VNode",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<CollapseItem title=\"面板标题\">内容</CollapseItem>"
+                },
+                {
+                    "name": "disabled",
+                    "description": "是否禁用",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<CollapseItem disabled title=\"禁用面板\">内容</CollapseItem>"
+                }
+            ],
+            "events": [
+                {
+                    "name": "show",
+                    "vueEventName": "@show",
+                    "description": "展开时触发",
+                    "payload": [
+                        {
+                            "name": "collapseItem",
+                            "type": "CollapseItem",
+                            "description": "当前折叠项实例"
+                        }
+                    ],
+                    "usageExample": "<CollapseItem @show=\"handleShow\">",
+                    "handlerExample": "const handleShow = () => {\n  console.log('面板已展开');\n};"
+                },
+                {
+                    "name": "hide",
+                    "vueEventName": "@hide",
+                    "description": "收起时触发",
+                    "payload": [
+                        {
+                            "name": "collapseItem",
+                            "type": "CollapseItem",
+                            "description": "当前折叠项实例"
+                        }
+                    ],
+                    "usageExample": "<CollapseItem @hide=\"handleHide\">",
+                    "handlerExample": "const handleHide = () => {\n  console.log('面板已收起');\n};"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "collapse_basic",
+            "title": "基础用法",
+            "description": "基本的折叠面板",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKeys = ref(['1']);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\">\n    <CollapseItem value=\"1\" title=\"面板一\">\n      这是面板一的内容\n    </CollapseItem>\n    <CollapseItem value=\"2\" title=\"面板二\">\n      这是面板二的内容\n    </CollapseItem>\n    <CollapseItem value=\"3\" title=\"面板三\">\n      这是面板三的内容\n    </CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建基本的折叠面板"
+        },
+        {
+            "id": "collapse_accordion",
+            "title": "手风琴模式",
+            "description": "同时只能展开一个面板",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKey = ref(['1']);\n</script>\n<template>\n  <Collapse v-model=\"activeKey\" accordion>\n    <CollapseItem value=\"1\" title=\"面板一\">内容一</CollapseItem>\n    <CollapseItem value=\"2\" title=\"面板二\">内容二</CollapseItem>\n    <CollapseItem value=\"3\" title=\"面板三\">内容三</CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "accordion",
+                "single"
+            ],
+            "usedProps": [
+                "value",
+                "accordion",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建手风琴效果的折叠面板"
+        },
+        {
+            "id": "collapse_arrow_left",
+            "title": "箭头在左侧",
+            "description": "将展开箭头放在左侧",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKeys = ref([]);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\" arrow=\"left\">\n    <CollapseItem value=\"1\" title=\"面板一\">内容一</CollapseItem>\n    <CollapseItem value=\"2\" title=\"面板二\">内容二</CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "arrow",
+                "left"
+            ],
+            "usedProps": [
+                "value",
+                "arrow",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "将折叠箭头放在左侧"
+        },
+        {
+            "id": "collapse_no_border",
+            "title": "无边框样式",
+            "description": "简洁的无边框样式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKeys = ref(['1']);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\" noBorder>\n    <CollapseItem value=\"1\" title=\"面板一\">内容一</CollapseItem>\n    <CollapseItem value=\"2\" title=\"面板二\">内容二</CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "noBorder",
+                "simple"
+            ],
+            "usedProps": [
+                "value",
+                "noBorder",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建无边框的简洁折叠面板"
+        },
+        {
+            "id": "collapse_disabled",
+            "title": "禁用面板",
+            "description": "禁用某个折叠项",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKeys = ref([]);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\">\n    <CollapseItem value=\"1\" title=\"可用面板\">内容一</CollapseItem>\n    <CollapseItem value=\"2\" title=\"禁用面板\" disabled>内容二</CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用某个折叠面板项"
+        },
+        {
+            "id": "collapse_custom_title",
+            "title": "自定义标题",
+            "description": "使用插槽自定义标题内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem, Icon } from '@king-design/vue';\n\nconst activeKeys = ref([]);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\">\n    <CollapseItem value=\"1\">\n      <template #title>\n        <Icon class=\"k-icon-star\" color=\"warning\" /> 自定义标题\n      </template>\n      内容一\n    </CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "title",
+                "slot",
+                "custom"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "title"
+            ],
+            "usedMethods": [],
+            "scenario": "使用图标自定义折叠面板标题"
+        },
+        {
+            "id": "collapse_events",
+            "title": "监听展开收起",
+            "description": "监听面板的展开和收起事件",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem, Message } from '@king-design/vue';\n\nconst activeKeys = ref([]);\n\nconst handleShow = () => {\n  Message.success('面板已展开');\n};\n\nconst handleHide = () => {\n  Message.info('面板已收起');\n};\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\">\n    <CollapseItem value=\"1\" title=\"面板一\" @show=\"handleShow\" @hide=\"handleHide\">\n      内容一\n    </CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "show",
+                "hide",
+                "event"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [
+                "show",
+                "hide"
+            ],
+            "usedMethods": [],
+            "scenario": "监听折叠面板的展开和收起事件"
+        },
+        {
+            "id": "collapse_faq",
+            "title": "FAQ 常见问题",
+            "description": "常见问题解答场景",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Collapse, CollapseItem } from '@king-design/vue';\n\nconst activeKeys = ref([]);\n\nconst faqs = ref([\n  { id: '1', q: '如何注册账号？', a: '点击首页右上角的注册按钮...' },\n  { id: '2', q: '忘记密码怎么办？', a: '在登录页面点击\\\"忘记密码\\\"链接...' },\n  { id: '3', q: '如何联系客服？', a: '您可以通过在线客服或拨打客服电话...' }\n]);\n</script>\n<template>\n  <Collapse v-model=\"activeKeys\" accordion>\n    <CollapseItem v-for=\"faq in faqs\" :key=\"faq.id\" :value=\"faq.id\" :title=\"faq.q\">\n      {{ faq.a }}\n    </CollapseItem>\n  </Collapse>\n</template>",
+            "tags": [
+                "faq",
+                "dynamic",
+                "v-for"
+            ],
+            "usedProps": [
+                "value",
+                "accordion",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建 FAQ 常见问题解答页面"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "collapse_value_type",
+            "description": "value 类型错误，使用字符串而非数组",
+            "wrongCode": "const activeKey = ref('1');\n<Collapse v-model=\"activeKey\">",
+            "correctCode": "const activeKeys = ref(['1']);\n<Collapse v-model=\"activeKeys\">",
+            "explanation": "Collapse 的 value 必须是字符串数组类型，即使使用 accordion 模式",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "collapse_missing_value",
+            "description": "CollapseItem 未设置 value 导致无法正确控制",
+            "wrongCode": "<Collapse v-model=\"activeKeys\">\n  <CollapseItem title=\"面板\">内容</CollapseItem>\n</Collapse>",
+            "correctCode": "<Collapse v-model=\"activeKeys\">\n  <CollapseItem value=\"1\" title=\"面板\">内容</CollapseItem>\n</Collapse>",
+            "explanation": "建议为 CollapseItem 显式设置 value，便于控制展开状态",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "collapse_arrow_typo",
+            "description": "arrow 值拼写错误",
+            "wrongCode": "<Collapse arrow=\"start\">",
+            "correctCode": "<Collapse arrow=\"left\">",
+            "explanation": "arrow 只支持 right 和 left 两个值",
+            "relatedProps": [
+                "arrow"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "折叠面板",
+        "collapse",
+        "手风琴",
+        "accordion",
+        "展开",
+        "收起",
+        "FAQ"
+    ],
+    "useCases": [
+        "FAQ 常见问题",
+        "设置选项分组",
+        "内容分区展示",
+        "侧边栏菜单",
+        "配置项分类"
+    ],
+    "relatedComponents": [
+        "CollapseItem",
+        "Card",
+        "Tabs"
+    ]
+}

package/components/copy.json

@@ -0,0 +1,220 @@
+{
+    "id": "copy",
+    "name": "Copy",
+    "displayName": "复制",
+    "category": "other",
+    "description": "复制到剪贴板组件，用于将文本内容复制到系统剪贴板。支持成功/失败回调和消息提示。",
+    "importStatement": "import { Copy } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "text",
+            "description": "复制文案值，要复制到剪贴板的内容",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Copy text=\"要复制的内容\"><Button>复制</Button></Copy>"
+        },
+        {
+            "name": "showMessage",
+            "description": "复制成功/失败时，是否展示 Message 提示",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Copy text=\"内容\" :showMessage=\"false\"><Button>静默复制</Button></Copy>"
+        }
+    ],
+    "events": [
+        {
+            "name": "success",
+            "vueEventName": "@success",
+            "description": "复制成功时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "复制的内容"
+                }
+            ],
+            "usageExample": "<Copy text=\"内容\" @success=\"handleSuccess\">",
+            "handlerExample": "const handleSuccess = (value: string) => {\n  console.log('复制成功:', value);\n};"
+        },
+        {
+            "name": "error",
+            "vueEventName": "@error",
+            "description": "复制失败时触发",
+            "payload": [],
+            "usageExample": "<Copy text=\"内容\" @error=\"handleError\">",
+            "handlerExample": "const handleError = () => {\n  console.log('复制失败');\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "copy_basic",
+            "title": "基础用法",
+            "description": "基本的复制功能",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Copy, Button } from '@king-design/vue';\n</script>\n<template>\n  <Copy text=\"这是要复制的内容\">\n    <Button type=\"primary\">点击复制</Button>\n  </Copy>\n</template>",
+            "tags": [
+                "basic",
+                "clipboard"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个点击即可复制文本的按钮"
+        },
+        {
+            "id": "copy_dynamic",
+            "title": "复制动态内容",
+            "description": "复制响应式变量的内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Copy, Button, Input } from '@king-design/vue';\n\nconst content = ref('默认内容');\n</script>\n<template>\n  <Input v-model=\"content\" placeholder=\"输入要复制的内容\" />\n  <Copy :text=\"content\">\n    <Button type=\"primary\">复制输入内容</Button>\n  </Copy>\n</template>",
+            "tags": [
+                "dynamic",
+                "reactive"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "复制用户输入的动态内容"
+        },
+        {
+            "id": "copy_silent",
+            "title": "静默复制",
+            "description": "禁用默认消息提示，自定义处理",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Copy, Button, Message } from '@king-design/vue';\n\nconst handleSuccess = (value: string) => {\n  Message.success('自定义提示：复制成功！');\n};\n</script>\n<template>\n  <Copy text=\"要复制的内容\" :showMessage=\"false\" @success=\"handleSuccess\">\n    <Button>静默复制</Button>\n  </Copy>\n</template>",
+            "tags": [
+                "showMessage",
+                "silent",
+                "custom"
+            ],
+            "usedProps": [
+                "text",
+                "showMessage"
+            ],
+            "usedEvents": [
+                "success"
+            ],
+            "usedMethods": [],
+            "scenario": "禁用默认提示，使用自定义消息"
+        },
+        {
+            "id": "copy_events",
+            "title": "监听复制事件",
+            "description": "监听复制成功和失败事件",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Copy, Button, Message } from '@king-design/vue';\n\nconst handleSuccess = (value: string) => {\n  console.log('复制成功:', value);\n};\n\nconst handleError = () => {\n  Message.error('复制失败，请手动复制');\n};\n</script>\n<template>\n  <Copy text=\"复制内容\" @success=\"handleSuccess\" @error=\"handleError\">\n    <Button>点击复制</Button>\n  </Copy>\n</template>",
+            "tags": [
+                "success",
+                "error",
+                "event"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [
+                "success",
+                "error"
+            ],
+            "usedMethods": [],
+            "scenario": "监听复制操作的成功和失败"
+        },
+        {
+            "id": "copy_link",
+            "title": "复制链接",
+            "description": "复制分享链接场景",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Copy, Icon } from '@king-design/vue';\n\nconst link = 'https://example.com/share/12345';\n</script>\n<template>\n  <span>{{ link }}</span>\n  <Copy :text=\"link\">\n    <Icon class=\"k-icon-clone\" hoverable style=\"cursor: pointer; margin-left: 8px;\" />\n  </Copy>\n</template>",
+            "tags": [
+                "link",
+                "share",
+                "icon"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "复制分享链接的常见场景"
+        },
+        {
+            "id": "copy_code",
+            "title": "复制代码块",
+            "description": "复制代码内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Copy, Button } from '@king-design/vue';\n\nconst code = `npm install @king-design/vue`;\n</script>\n<template>\n  <div style=\"display: flex; align-items: center; background: #f5f5f5; padding: 8px 12px; border-radius: 4px;\">\n    <code style=\"flex: 1;\">{{ code }}</code>\n    <Copy :text=\"code\">\n      <Button size=\"mini\" type=\"link\">复制</Button>\n    </Copy>\n  </div>\n</template>",
+            "tags": [
+                "code",
+                "snippet"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "复制代码片段或命令"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "copy_empty_text",
+            "description": "未设置 text 属性",
+            "wrongCode": "<Copy><Button>复制</Button></Copy>",
+            "correctCode": "<Copy text=\"要复制的内容\"><Button>复制</Button></Copy>",
+            "explanation": "必须通过 text 属性指定要复制的内容",
+            "relatedProps": [
+                "text"
+            ]
+        },
+        {
+            "id": "copy_missing_child",
+            "description": "未提供触发元素",
+            "wrongCode": "<Copy text=\"内容\" />",
+            "correctCode": "<Copy text=\"内容\"><Button>复制</Button></Copy>",
+            "explanation": "Copy 组件需要包裹一个子元素作为触发器",
+            "relatedProps": []
+        },
+        {
+            "id": "copy_success_param",
+            "description": "success 事件处理函数参数错误",
+            "wrongCode": "const handleSuccess = () => {\n  console.log('复制成功');\n}",
+            "correctCode": "const handleSuccess = (value: string) => {\n  console.log('复制成功:', value);\n}",
+            "explanation": "success 事件会传入复制的内容作为参数",
+            "relatedProps": []
+        }
+    ],
+    "searchKeywords": [
+        "复制",
+        "copy",
+        "剪贴板",
+        "clipboard",
+        "粘贴",
+        "分享",
+        "链接"
+    ],
+    "useCases": [
+        "复制分享链接",
+        "复制邀请码",
+        "复制代码片段",
+        "复制订单号",
+        "复制收货地址",
+        "一键复制命令"
+    ],
+    "relatedComponents": [
+        "Button",
+        "Icon",
+        "Message"
+    ]
+}