king-design-analyzer 1.0.0

package/components/menu.json

@@ -0,0 +1,482 @@
+{
+    "id": "menu",
+    "name": "Menu",
+    "displayName": "菜单",
+    "category": "navigation",
+    "description": "菜单导航组件，用于网站和应用的侧边栏或顶部导航。支持垂直/水平布局、多级嵌套、折叠展开、主题切换、手风琴模式等功能。配合 MenuItem 子组件使用。",
+    "importStatement": "import { Menu, MenuItem } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "selectedKey",
+            "description": "当前选中项的 key，可用 v-model:selectedKey 双向绑定",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Menu v-model:selectedKey=\"selectedKey\">"
+        },
+        {
+            "name": "expandedKeys",
+            "description": "展开的子菜单 key 数组，可用 v-model:expandedKeys 双向绑定",
+            "type": {
+                "raw": "(string | number)[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<Menu v-model:expandedKeys=\"expandedKeys\">"
+        },
+        {
+            "name": "theme",
+            "description": "菜单主题",
+            "type": {
+                "raw": "\"light\" | \"dark\"",
+                "kind": "union",
+                "unionTypes": [
+                    "light",
+                    "dark"
+                ]
+            },
+            "required": false,
+            "default": "\"dark\"",
+            "allowedValues": [
+                {
+                    "value": "dark",
+                    "label": "深色主题",
+                    "isDefault": true
+                },
+                {
+                    "value": "light",
+                    "label": "浅色主题"
+                }
+            ],
+            "usageExample": "<Menu theme=\"light\">"
+        },
+        {
+            "name": "type",
+            "description": "菜单排列方式",
+            "type": {
+                "raw": "\"vertical\" | \"horizontal\"",
+                "kind": "union",
+                "unionTypes": [
+                    "vertical",
+                    "horizontal"
+                ]
+            },
+            "required": false,
+            "default": "\"vertical\"",
+            "allowedValues": [
+                {
+                    "value": "vertical",
+                    "label": "垂直排列",
+                    "isDefault": true
+                },
+                {
+                    "value": "horizontal",
+                    "label": "水平排列"
+                }
+            ],
+            "usageExample": "<Menu type=\"horizontal\">"
+        },
+        {
+            "name": "collapse",
+            "description": "菜单是否折叠（只显示图标）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Menu :collapse=\"isCollapsed\">"
+        },
+        {
+            "name": "size",
+            "description": "菜单尺寸",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                }
+            ],
+            "usageExample": "<Menu size=\"small\">"
+        },
+        {
+            "name": "accordion",
+            "description": "是否每次只能展开一项（手风琴模式）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Menu accordion>"
+        },
+        {
+            "name": "dot",
+            "description": "是否给菜单项前面添加圆点",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Menu dot>"
+        },
+        {
+            "name": "showCollapseArrow",
+            "description": "是否展示折叠按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Menu showCollapseArrow>"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "header",
+            "description": "扩展菜单头部"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "MenuItem",
+            "description": "菜单项组件，可嵌套使用形成子菜单",
+            "props": [
+                {
+                    "name": "key",
+                    "description": "全局唯一的标识，用于标识和控制选中状态",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": true,
+                    "usageExample": "<MenuItem key=\"home\">首页</MenuItem>"
+                },
+                {
+                    "name": "to",
+                    "description": "超链接菜单项，点击直接跳转，支持字符串路径或路由对象",
+                    "type": {
+                        "raw": "string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<MenuItem key=\"home\" to=\"/home\">首页</MenuItem>"
+                },
+                {
+                    "name": "disabled",
+                    "description": "是否禁用当前项",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<MenuItem key=\"disabled\" disabled>禁用项</MenuItem>"
+                },
+                {
+                    "name": "dot",
+                    "description": "是否给当前菜单项前面添加圆点",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<MenuItem key=\"item\" dot>带圆点</MenuItem>"
+                }
+            ],
+            "events": [
+                {
+                    "name": "select",
+                    "vueEventName": "@select",
+                    "description": "选中没有子菜单的菜单项时触发",
+                    "payload": [
+                        {
+                            "name": "menuItem",
+                            "type": "MenuItem",
+                            "description": "被选中的菜单项实例"
+                        },
+                        {
+                            "name": "e",
+                            "type": "MouseEvent",
+                            "description": "原生鼠标事件"
+                        }
+                    ],
+                    "usageExample": "<MenuItem @select=\"handleSelect\">",
+                    "handlerExample": "const handleSelect = (menuItem, e: MouseEvent) => {\n  console.log('选中了:', menuItem.key);\n};"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "menu_basic",
+            "title": "基础用法",
+            "description": "基本的垂直菜单",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('home');\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\">\n    <MenuItem key=\"home\">首页</MenuItem>\n    <MenuItem key=\"products\">产品</MenuItem>\n    <MenuItem key=\"about\">关于我们</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "selectedKey"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的垂直导航菜单"
+        },
+        {
+            "id": "menu_submenu",
+            "title": "多级菜单",
+            "description": "带子菜单的嵌套结构",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('');\nconst expandedKeys = ref<string[]>([]);\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\" v-model:expandedKeys=\"expandedKeys\">\n    <MenuItem key=\"dashboard\">控制台</MenuItem>\n    <MenuItem key=\"products\" title=\"产品管理\">\n      <MenuItem key=\"list\">产品列表</MenuItem>\n      <MenuItem key=\"add\">添加产品</MenuItem>\n    </MenuItem>\n    <MenuItem key=\"settings\">设置</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "submenu",
+                "nested"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "expandedKeys"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建带子菜单的多级导航"
+        },
+        {
+            "id": "menu_horizontal",
+            "title": "水平菜单",
+            "description": "顶部导航水平菜单",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('home');\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\" type=\"horizontal\">\n    <MenuItem key=\"home\">首页</MenuItem>\n    <MenuItem key=\"products\">产品</MenuItem>\n    <MenuItem key=\"docs\">文档</MenuItem>\n    <MenuItem key=\"about\">关于</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "horizontal",
+                "top-nav"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "type"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建顶部水平导航菜单"
+        },
+        {
+            "id": "menu_collapse",
+            "title": "可折叠菜单",
+            "description": "支持折叠展开的侧边菜单",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem, Button, Icon } from '@king-design/vue';\n\nconst collapsed = ref(false);\nconst selectedKey = ref('');\n</script>\n<template>\n  <Button @click=\"collapsed = !collapsed\">\n    <Icon :class=\"collapsed ? 'k-icon-right' : 'k-icon-left'\" />\n  </Button>\n  <Menu v-model:selectedKey=\"selectedKey\" :collapse=\"collapsed\">\n    <MenuItem key=\"home\"><Icon class=\"k-icon-home\" /> 首页</MenuItem>\n    <MenuItem key=\"products\"><Icon class=\"k-icon-folder\" /> 产品</MenuItem>\n    <MenuItem key=\"settings\"><Icon class=\"k-icon-settings\" /> 设置</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "collapse",
+                "sidebar"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "collapse"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建可折叠的侧边栏菜单"
+        },
+        {
+            "id": "menu_theme",
+            "title": "主题切换",
+            "description": "浅色和深色主题",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('');\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\" theme=\"light\">\n    <MenuItem key=\"home\">首页</MenuItem>\n    <MenuItem key=\"products\">产品</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "theme",
+                "light",
+                "dark"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "theme"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用浅色主题的菜单"
+        },
+        {
+            "id": "menu_accordion",
+            "title": "手风琴模式",
+            "description": "每次只展开一个子菜单",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('');\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\" accordion>\n    <MenuItem key=\"group1\" title=\"分组1\">\n      <MenuItem key=\"item1\">子项1</MenuItem>\n      <MenuItem key=\"item2\">子项2</MenuItem>\n    </MenuItem>\n    <MenuItem key=\"group2\" title=\"分组2\">\n      <MenuItem key=\"item3\">子项3</MenuItem>\n      <MenuItem key=\"item4\">子项4</MenuItem>\n    </MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "accordion"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "accordion"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "每次只能展开一个子菜单"
+        },
+        {
+            "id": "menu_router",
+            "title": "路由集成",
+            "description": "配合 Vue Router 使用",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('home');\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\">\n    <MenuItem key=\"home\" to=\"/\">首页</MenuItem>\n    <MenuItem key=\"products\" to=\"/products\">产品</MenuItem>\n    <MenuItem key=\"docs\" :to=\"{name: 'docs'}\">文档</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "router",
+                "navigation"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "配合 Vue Router 进行页面导航"
+        },
+        {
+            "id": "menu_dot_header",
+            "title": "带圆点和头部",
+            "description": "使用 dot 属性和 header 插槽",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem } from '@king-design/vue';\n\nconst selectedKey = ref('1');\nconst expandedKeys = ref<string[]>([]);\n</script>\n<template>\n  <Menu \n    v-model:selectedKey=\"selectedKey\"\n    v-model:expandedKeys=\"expandedKeys\"\n    :dot=\"true\" \n    theme=\"light\"\n  >\n    <template #header>管理面板</template>\n    <MenuItem key=\"1\">菜单项 1</MenuItem>\n    <MenuItem key=\"2\">菜单项 2</MenuItem>\n    <MenuItem key=\"3\" :dot=\"false\">无圆点菜单项</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "dot",
+                "header",
+                "slot"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "expandedKeys",
+                "dot",
+                "theme"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用 dot 属性给菜单项添加圆点，使用 header 插槽自定义头部"
+        },
+        {
+            "id": "menu_icon_nested",
+            "title": "带图标的嵌套菜单",
+            "description": "图标和多级嵌套子菜单",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem, Icon } from '@king-design/vue';\n\nconst selectedKey = ref('');\nconst expandedKeys = ref<string[]>(['3']);\n\nconst onSelect = (menuItem: any) => {\n  console.log('选中:', menuItem.key);\n};\n</script>\n<template>\n  <Menu \n    v-model:selectedKey=\"selectedKey\"\n    v-model:expandedKeys=\"expandedKeys\"\n    theme=\"light\"\n  >\n    <MenuItem key=\"1\" @select=\"onSelect\">菜单 1</MenuItem>\n    <MenuItem key=\"2\" disabled>菜单 2（禁用）</MenuItem>\n    <MenuItem key=\"3\">\n      <Icon class=\"k-icon-heart\" /> 菜单 3\n      <Menu>\n        <MenuItem key=\"3-1\" @select=\"onSelect\">子菜单 1</MenuItem>\n        <MenuItem key=\"3-2\" @select=\"onSelect\">子菜单 2</MenuItem>\n        <MenuItem key=\"3-3\" disabled>子菜单 3（禁用）</MenuItem>\n        <MenuItem key=\"3-4\">子菜单 4</MenuItem>\n      </Menu>\n    </MenuItem>\n    <MenuItem key=\"4\" to=\"/\">菜单 4（路由）</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "icon",
+                "nested",
+                "submenu",
+                "disabled"
+            ],
+            "usedProps": [
+                "selectedKey",
+                "expandedKeys",
+                "theme",
+                "disabled",
+                "to"
+            ],
+            "usedEvents": [
+                "select"
+            ],
+            "usedMethods": [],
+            "scenario": "创建带图标的多级嵌套菜单，包含禁用项和路由跳转"
+        },
+        {
+            "id": "menu_select_event",
+            "title": "选中事件处理",
+            "description": "监听菜单项选中事件",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Menu, MenuItem, Message } from '@king-design/vue';\n\nconst selectedKey = ref('');\n\nconst handleSelect = (menuItem: any, e: MouseEvent) => {\n  Message.success(`选中了: ${menuItem.key}`);\n};\n</script>\n<template>\n  <Menu v-model:selectedKey=\"selectedKey\">\n    <MenuItem key=\"home\" @select=\"handleSelect\">首页</MenuItem>\n    <MenuItem key=\"products\" @select=\"handleSelect\">产品</MenuItem>\n    <MenuItem key=\"about\" @select=\"handleSelect\">关于</MenuItem>\n  </Menu>\n</template>",
+            "tags": [
+                "select",
+                "event"
+            ],
+            "usedProps": [
+                "selectedKey"
+            ],
+            "usedEvents": [
+                "select"
+            ],
+            "usedMethods": [],
+            "scenario": "监听并处理菜单项选中事件"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "menu_missing_key",
+            "description": "MenuItem 未设置 key",
+            "wrongCode": "<Menu v-model:selectedKey=\"selectedKey\">\n  <MenuItem>首页</MenuItem>\n</Menu>",
+            "correctCode": "<Menu v-model:selectedKey=\"selectedKey\">\n  <MenuItem key=\"home\">首页</MenuItem>\n</Menu>",
+            "explanation": "每个 MenuItem 必须设置唯一的 key 用于标识和控制选中状态",
+            "relatedProps": [
+                "key"
+            ]
+        },
+        {
+            "id": "menu_selectedkey_vmodel",
+            "description": "使用错误的 v-model 语法",
+            "wrongCode": "<Menu v-model=\"selectedKey\">",
+            "correctCode": "<Menu v-model:selectedKey=\"selectedKey\">",
+            "explanation": "Menu 使用 v-model:selectedKey 而非 v-model 来绑定选中项",
+            "relatedProps": [
+                "selectedKey"
+            ]
+        },
+        {
+            "id": "menu_type_typo",
+            "description": "type 值拼写错误",
+            "wrongCode": "<Menu type=\"horizonal\">",
+            "correctCode": "<Menu type=\"horizontal\">",
+            "explanation": "type 只支持 vertical 和 horizontal，注意拼写",
+            "relatedProps": [
+                "type"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "菜单",
+        "menu",
+        "导航",
+        "navigation",
+        "侧边栏",
+        "sidebar",
+        "顶部导航"
+    ],
+    "useCases": [
+        "后台管理系统侧边菜单",
+        "顶部导航菜单",
+        "网站导航",
+        "多级分类导航",
+        "设置页面菜单"
+    ],
+    "relatedComponents": [
+        "MenuItem",
+        "Dropdown"
+    ]
+}