king-design-analyzer 2.2.0 → 2.2.2

package/components/collapse.json

@@ -1,365 +1,352 @@
 {
-  "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\"></Collapse>"
-    },
-    {
-      "name": "accordion",
-      "description": "是否展示手风琴风格，同时只能展开一个面板",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Collapse v-model=\"activeKeys\" accordion></Collapse>"
-    },
-    {
-      "name": "arrow",
-      "description": "指定箭头位置",
-      "type": {
-        "raw": "\"right\" | \"left\"",
-        "kind": "union",
-        "unionTypes": [
-          "right",
-          "left"
-        ]
-      },
-      "required": false,
-      "default": "\"right\"",
-      "allowedValues": [
+    "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\"></Collapse>"
+        },
+        {
+            "name": "accordion",
+            "description": "是否展示手风琴风格，同时只能展开一个面板",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Collapse v-model=\"activeKeys\" accordion></Collapse>"
+        },
         {
-          "value": "right",
-          "label": "箭头在右侧",
-          "isDefault": true
+            "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\"></Collapse>"
         },
         {
-          "value": "left",
-          "label": "箭头在左侧"
+            "name": "noBorder",
+            "description": "是否展示无边框的简洁样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Collapse noBorder></Collapse>"
         }
-      ],
-      "usageExample": "<Collapse arrow=\"left\"></Collapse>"
-    },
-    {
-      "name": "noBorder",
-      "description": "是否展示无边框的简洁样式",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Collapse noBorder></Collapse>"
-    }
-  ],
-  "events": [],
-  "slots": [
-    {
-      "name": "title",
-      "description": "扩展标题"
-    }
-  ],
-  "methods": [],
-  "subComponents": [
-    {
-      "name": "CollapseItem",
-      "description": "折叠面板项组件，用于定义每个可折叠的内容区域",
-      "props": [
+    ],
+    "events": [],
+    "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=\"handlePanelShow\"></CollapseItem>",
+                "handlerExample": "const expandedPanels = ref<string[]>([]);\n\nconst handlePanelShow = (collapseItem) => {\n  const panelValue = String(collapseItem.value);\n  if (!expandedPanels.value.includes(panelValue)) {\n    expandedPanels.value.push(panelValue);\n  }\n};"
+            },
+            {
+                "name": "hide",
+                "vueEventName": "@hide",
+                "description": "收起时触发",
+                "payload": [{
+                    "name": "collapseItem",
+                    "type": "CollapseItem",
+                    "description": "当前折叠项实例"
+                }],
+                "usageExample": "<CollapseItem @hide=\"handlePanelHide\"></CollapseItem>",
+                "handlerExample": "const expandedPanels = ref<string[]>([]);\n\nconst handlePanelHide = (collapseItem) => {\n  expandedPanels.value = expandedPanels.value.filter((item) => item !== String(collapseItem.value));\n};"
+            }
+        ],
+        "slots": [{
+            "name": "title",
+            "description": "扩展标题",
+            "bindingType": "none",
+            "vueTemplate": "#title",
+            "usageExample": "<CollapseItem value=\"custom\">\n  <template #title>\n    自定义标题\n  </template>\n  自定义内容\n</CollapseItem>"
+        }]
+    }],
+    "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": "创建无边框的简洁折叠面板"
+        },
         {
-          "name": "value",
-          "description": "当前 CollapseItem 的取值，默认会使用 $ + 索引的组合",
-          "type": {
-            "raw": "string",
-            "kind": "string"
-          },
-          "required": false,
-          "default": "$${index}",
-          "usageExample": "<CollapseItem value=\"1\" title=\"面板标题\">内容</CollapseItem>"
+            "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": "禁用某个折叠面板项"
         },
         {
-          "name": "title",
-          "description": "标题内容",
-          "type": {
-            "raw": "string | VNode",
-            "kind": "union"
-          },
-          "required": false,
-          "default": "undefined",
-          "usageExample": "<CollapseItem title=\"面板标题\">内容</CollapseItem>"
+            "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": "使用图标自定义折叠面板标题"
         },
         {
-          "name": "disabled",
-          "description": "是否禁用",
-          "type": {
-            "raw": "boolean",
-            "kind": "boolean"
-          },
-          "required": false,
-          "default": "false",
-          "usageExample": "<CollapseItem disabled title=\"禁用面板\">内容</CollapseItem>"
+            "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 常见问题解答页面"
         }
-      ],
-      "events": [
+    ],
+    "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"
+            ]
+        },
         {
-          "name": "show",
-          "vueEventName": "@show",
-          "description": "展开时触发",
-          "payload": [
-            {
-              "name": "collapseItem",
-              "type": "CollapseItem",
-              "description": "当前折叠项实例"
-            }
-          ],
-          "usageExample": "<CollapseItem @show=\"handleShow\"></CollapseItem>",
-          "handlerExample": "const handleShow = () => {\n  console.log('面板已展开');\n};"
+            "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"
+            ]
         },
         {
-          "name": "hide",
-          "vueEventName": "@hide",
-          "description": "收起时触发",
-          "payload": [
-            {
-              "name": "collapseItem",
-              "type": "CollapseItem",
-              "description": "当前折叠项实例"
-            }
-          ],
-          "usageExample": "<CollapseItem @hide=\"handleHide\"></CollapseItem>",
-          "handlerExample": "const handleHide = () => {\n  console.log('面板已收起');\n};"
+            "id": "collapse_arrow_typo",
+            "description": "arrow 值拼写错误",
+            "wrongCode": "<Collapse arrow=\"start\">",
+            "correctCode": "<Collapse arrow=\"left\">",
+            "explanation": "arrow 只支持 right 和 left 两个值",
+            "relatedProps": [
+                "arrow"
+            ]
         }
-      ]
-    }
-  ],
-  "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",
+    ],
+    "searchKeywords": [
+        "折叠面板",
+        "collapse",
+        "手风琴",
         "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 常见问题",
-    "设置选项分组",
-    "内容分区展示",
-    "侧边栏菜单",
-    "配置项分类"
-  ],
-  "typeDefinitions": [
-    {
-      "name": "CollapseArrow",
-      "definition": "type CollapseArrow = 'left' | 'right'",
-      "description": "折叠面板箭头方向枚举，控制箭头在标题左侧还是右侧。"
-    }
-  ],
-  "relatedComponents": [
-    "CollapseItem",
-    "Card",
-    "Tabs"
-  ]
+        "展开",
+        "收起",
+        "FAQ"
+    ],
+    "useCases": [
+        "FAQ 常见问题",
+        "设置选项分组",
+        "内容分区展示",
+        "侧边栏菜单",
+        "配置项分类"
+    ],
+    "typeDefinitions": [{
+        "name": "CollapseArrow",
+        "definition": "type CollapseArrow = 'left' | 'right'",
+        "description": "折叠面板箭头方向枚举，控制箭头在标题左侧还是右侧。"
+    }],
+    "relatedComponents": [
+        "CollapseItem",
+        "Card",
+        "Tabs"
+    ]
 }