king-design-analyzer 1.0.0

package/components/breadcrumb.json

@@ -0,0 +1,220 @@
+{
+    "id": "breadcrumb",
+    "name": "Breadcrumb",
+    "displayName": "面包屑",
+    "category": "navigation",
+    "description": "面包屑导航组件，用于显示当前页面在系统层级的位置，支持链接跳转和自定义分隔符。配合 BreadcrumbItem 子组件使用。",
+    "importStatement": "import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "separator",
+            "description": "指定分隔符",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Breadcrumb separator=\">\">"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "separator",
+            "description": "指定分隔符"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "BreadcrumbItem",
+            "description": "面包屑项组件，用于定义导航路径中的每一项",
+            "props": [
+                {
+                    "name": "to",
+                    "description": "指定超链接地址，支持字符串路径或 Vue Router 路由对象",
+                    "type": {
+                        "raw": "string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<BreadcrumbItem to=\"/products\">产品中心</BreadcrumbItem>"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "breadcrumb_basic",
+            "title": "基础用法",
+            "description": "基本的面包屑导航",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb>\n    <BreadcrumbItem>首页</BreadcrumbItem>\n    <BreadcrumbItem>产品中心</BreadcrumbItem>\n    <BreadcrumbItem>产品详情</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示基本的面包屑导航"
+        },
+        {
+            "id": "breadcrumb_link",
+            "title": "带链接的面包屑",
+            "description": "点击可跳转的面包屑项",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb>\n    <BreadcrumbItem to=\"/\">首页</BreadcrumbItem>\n    <BreadcrumbItem to=\"/products\">产品中心</BreadcrumbItem>\n    <BreadcrumbItem>当前页面</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "link",
+                "navigation"
+            ],
+            "usedProps": [
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建可点击跳转的面包屑导航"
+        },
+        {
+            "id": "breadcrumb_separator",
+            "title": "自定义分隔符",
+            "description": "使用自定义字符作为分隔符",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb separator=\">\">\n    <BreadcrumbItem>首页</BreadcrumbItem>\n    <BreadcrumbItem>产品中心</BreadcrumbItem>\n    <BreadcrumbItem>产品详情</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "separator",
+                "custom"
+            ],
+            "usedProps": [
+                "separator"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义面包屑的分隔符字符"
+        },
+        {
+            "id": "breadcrumb_icon_separator",
+            "title": "图标分隔符",
+            "description": "使用图标作为分隔符",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem, Icon } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb>\n    <template #separator>\n      <Icon class=\"k-icon-right\" />\n    </template>\n    <BreadcrumbItem>首页</BreadcrumbItem>\n    <BreadcrumbItem>产品中心</BreadcrumbItem>\n    <BreadcrumbItem>产品详情</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "separator",
+                "icon",
+                "slot"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [
+                "separator"
+            ],
+            "usedMethods": [],
+            "scenario": "使用图标作为分隔符"
+        },
+        {
+            "id": "breadcrumb_router",
+            "title": "配合 Vue Router",
+            "description": "使用路由对象进行导航",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb>\n    <BreadcrumbItem :to=\"{name: 'home'}\">首页</BreadcrumbItem>\n    <BreadcrumbItem :to=\"{path: '/products'}\">产品中心</BreadcrumbItem>\n    <BreadcrumbItem :to=\"{path: '/products/1', query: {id: 1}}\">产品详情</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "router",
+                "vue-router",
+                "navigation"
+            ],
+            "usedProps": [
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "配合 Vue Router 使用路由对象导航"
+        },
+        {
+            "id": "breadcrumb_dynamic",
+            "title": "动态生成面包屑",
+            "description": "根据路由数据动态生成面包屑",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Breadcrumb, BreadcrumbItem } from '@king-design/vue';\n\nconst routes = ref([\n  { name: '首页', path: '/' },\n  { name: '产品中心', path: '/products' },\n  { name: '产品详情', path: '' }\n]);\n</script>\n<template>\n  <Breadcrumb>\n    <BreadcrumbItem \n      v-for=\"(item, index) in routes\" \n      :key=\"index\"\n      :to=\"item.path || undefined\">\n      {{ item.name }}\n    </BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "dynamic",
+                "v-for",
+                "reactive"
+            ],
+            "usedProps": [
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "根据数据动态生成面包屑导航"
+        },
+        {
+            "id": "breadcrumb_with_icon",
+            "title": "带图标的首页",
+            "description": "首页项使用图标代替文字",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Breadcrumb, BreadcrumbItem, Icon } from '@king-design/vue';\n</script>\n<template>\n  <Breadcrumb>\n    <BreadcrumbItem to=\"/\">\n      <Icon class=\"k-icon-home\" />\n    </BreadcrumbItem>\n    <BreadcrumbItem to=\"/products\">产品中心</BreadcrumbItem>\n    <BreadcrumbItem>产品详情</BreadcrumbItem>\n  </Breadcrumb>\n</template>",
+            "tags": [
+                "icon",
+                "home"
+            ],
+            "usedProps": [
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用图标表示首页"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "breadcrumb_last_item_link",
+            "description": "最后一项不应该有链接",
+            "wrongCode": "<Breadcrumb>\n  <BreadcrumbItem to=\"/\">首页</BreadcrumbItem>\n  <BreadcrumbItem to=\"/current\">当前页面</BreadcrumbItem>\n</Breadcrumb>",
+            "correctCode": "<Breadcrumb>\n  <BreadcrumbItem to=\"/\">首页</BreadcrumbItem>\n  <BreadcrumbItem>当前页面</BreadcrumbItem>\n</Breadcrumb>",
+            "explanation": "面包屑最后一项表示当前页面，不应该设置链接",
+            "relatedProps": [
+                "to"
+            ]
+        },
+        {
+            "id": "breadcrumb_missing_items",
+            "description": "直接使用 Breadcrumb 未包含 BreadcrumbItem",
+            "wrongCode": "<Breadcrumb>\n  <span>首页</span>\n  <span>产品</span>\n</Breadcrumb>",
+            "correctCode": "<Breadcrumb>\n  <BreadcrumbItem>首页</BreadcrumbItem>\n  <BreadcrumbItem>产品</BreadcrumbItem>\n</Breadcrumb>",
+            "explanation": "Breadcrumb 组件必须配合 BreadcrumbItem 子组件使用",
+            "relatedProps": []
+        },
+        {
+            "id": "breadcrumb_router_object",
+            "description": "路由对象未使用绑定语法",
+            "wrongCode": "<BreadcrumbItem to=\"{path: '/home'}\">首页</BreadcrumbItem>",
+            "correctCode": "<BreadcrumbItem :to=\"{path: '/home'}\">首页</BreadcrumbItem>",
+            "explanation": "传入对象类型时需要使用 v-bind (:to) 语法",
+            "relatedProps": [
+                "to"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "面包屑",
+        "breadcrumb",
+        "导航",
+        "navigation",
+        "路径",
+        "path",
+        "层级"
+    ],
+    "useCases": [
+        "页面层级导航",
+        "返回上级页面",
+        "展示当前页面位置",
+        "多级分类导航",
+        "后台管理系统导航"
+    ],
+    "relatedComponents": [
+        "BreadcrumbItem",
+        "Menu"
+    ]
+}