king-design-analyzer 2.2.0 → 2.2.2

package/components/actions.json

@@ -32,6 +32,14 @@
         {
             "name": "btnText",
             "description": "自定义按钮文案渲染",
+            "bindingType": "object",
+            "slotProps": [
+                {
+                    "name": "action",
+                    "type": "ActionConfig",
+                    "description": "当前操作项配置对象"
+                }
+            ],
             "vueTemplate": "<template #btnText=\"{ action }\">...</template>"
         }
     ],

package/components/advancedset.json

@@ -53,6 +53,7 @@
         {
             "name": "default",
             "description": "高级设置内容区域",
+            "bindingType": "none",
             "vueTemplate": "<AdvancedSet>...</AdvancedSet>"
         }
     ],

package/components/affix.json

@@ -81,6 +81,7 @@
     {
       "name": "default",
       "description": "需要被固定的元素",
+      "bindingType": "none",
       "vueTemplate": "#default",
       "usageExample": "<Affix><Button>Fixed Button</Button></Affix>"
     }

package/components/anchor.json

@@ -0,0 +1,220 @@
+{
+    "id": "anchor",
+    "name": "Anchor",
+    "displayName": "锚点导航",
+    "category": "navigation",
+    "description": "锚点导航组件，用于监听页面滚动位置并高亮当前锚点。支持自定义滚动容器、偏移量、横向或纵向模式，通常与 AnchorLink 配合使用。",
+    "importStatement": "import { Anchor, AnchorLink } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前激活的锚点 href，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Anchor v-model=\"currentLink\"></Anchor>"
+        },
+        {
+            "name": "offset",
+            "description": "滚动定位偏移量，适合页面存在固定头部时使用",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Anchor :offset=\"64\"></Anchor>"
+        },
+        {
+            "name": "container",
+            "description": "监听滚动的容器，可传选择器或 HTMLElement",
+            "type": {
+                "raw": "string | HTMLElement",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "window",
+            "usageExample": "<Anchor container=\"#scroll-container\"></Anchor>"
+        },
+        {
+            "name": "threshold",
+            "description": "激活锚点时的阈值范围",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Anchor :threshold=\"20\"></Anchor>"
+        },
+        {
+            "name": "vertical",
+            "description": "是否使用纵向模式，默认开启；传 false 时为横向模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Anchor :vertical=\"false\"></Anchor>"
+        },
+        {
+            "name": "size",
+            "description": "导航尺寸",
+            "type": {
+                "raw": "Sizes",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "\"default\"",
+            "usageExample": "<Anchor size=\"small\"></Anchor>"
+        },
+        {
+            "name": "duration",
+            "description": "点击锚点后的滚动动画时长，单位 ms",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "300",
+            "usageExample": "<Anchor :duration=\"500\"></Anchor>"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当前激活锚点变化时触发",
+            "payload": [
+                {
+                    "name": "href",
+                    "type": "string",
+                    "description": "当前激活锚点 href"
+                }
+            ],
+            "usageExample": "<Anchor @change=\"handleChange\"></Anchor>",
+            "handlerExample": "const handleChange = (href: string) => {\n  console.log('当前锚点', href);\n};"
+        },
+        {
+            "name": "click",
+            "vueEventName": "@click",
+            "description": "点击锚点链接时触发",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                },
+                {
+                    "name": "link",
+                    "type": "AnchorLinkProps",
+                    "description": "被点击的锚点配置"
+                }
+            ],
+            "usageExample": "<Anchor @click=\"handleClick\"></Anchor>",
+            "handlerExample": "const handleClick = (e: MouseEvent, link: { href?: string }) => {\n  console.log('点击了锚点', link.href);\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "锚点导航内容，通常放置一个或多个 AnchorLink",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<Anchor>\n  <AnchorLink href=\"section1\" title=\"Section 1\" />\n</Anchor>"
+        }
+    ],
+    "methods": [
+        {
+            "name": "getLinks",
+            "description": "获取当前 Anchor 中注册的所有 href",
+            "params": [],
+            "returnType": "string[]",
+            "usageExample": "anchorRef.value?.getLinks();"
+        },
+        {
+            "name": "getTargetElement",
+            "description": "根据 href 查找对应的目标元素",
+            "params": [
+                {
+                    "name": "href",
+                    "type": "string",
+                    "description": "目标锚点 href"
+                }
+            ],
+            "returnType": "HTMLElement | null",
+            "usageExample": "anchorRef.value?.getTargetElement('section2');"
+        }
+    ],
+    "examples": [
+        {
+            "id": "anchor_basic",
+            "title": "基础用法",
+            "description": "在滚动容器旁边展示纵向锚点导航。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Anchor, AnchorLink } from '@king-design/vue';\n\nconst current = ref('section1');\n</script>\n<template>\n  <div style=\"display: flex; gap: 20px; align-items: flex-start;\">\n    <div id=\"scroll-container\" style=\"height: 240px; overflow-y: auto; width: 360px; border: 1px solid #eee; padding: 12px;\">\n      <section id=\"section1\" style=\"height: 180px;\">第一部分</section>\n      <section id=\"section2\" style=\"height: 180px;\">第二部分</section>\n      <section id=\"section3\" style=\"height: 180px;\">第三部分</section>\n    </div>\n    <Anchor v-model=\"current\" container=\"#scroll-container\">\n      <AnchorLink href=\"section1\" title=\"第一部分\" />\n      <AnchorLink href=\"section2\" title=\"第二部分\" />\n      <AnchorLink href=\"section3\" title=\"第三部分\" />\n    </Anchor>\n  </div>\n</template>",
+            "tags": [
+                "basic",
+                "container"
+            ],
+            "usedProps": [
+                "value",
+                "container"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "为详情页长内容区域提供目录导航。"
+        },
+        {
+            "id": "anchor_horizontal",
+            "title": "横向锚点",
+            "description": "将 Anchor 作为横向导航栏使用。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Anchor, AnchorLink } from '@king-design/vue';\n</script>\n<template>\n  <Anchor :vertical=\"false\" :offset=\"64\">\n    <AnchorLink href=\"overview\" title=\"概览\" />\n    <AnchorLink href=\"spec\" title=\"规格\" />\n    <AnchorLink href=\"billing\" title=\"计费\" />\n  </Anchor>\n</template>",
+            "tags": [
+                "horizontal",
+                "offset"
+            ],
+            "usedProps": [
+                "vertical",
+                "offset"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在页面头部展示横向章节切换导航。"
+        }
+    ],
+    "searchKeywords": [
+        "anchor",
+        "锚点",
+        "目录导航",
+        "滚动定位",
+        "AnchorLink"
+    ],
+    "useCases": [
+        "长页面章节导航",
+        "文档目录定位",
+        "详情页内容分区跳转"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "AnchorContainer",
+            "definition": "type AnchorContainer = string | HTMLElement",
+            "description": "锚点导航支持的滚动容器类型。"
+        }
+    ],
+    "relatedComponents": [
+        "AnchorLink",
+        "Affix"
+    ]
+}

package/components/anchorlink.json

@@ -0,0 +1,111 @@
+{
+    "id": "anchorlink",
+    "name": "AnchorLink",
+    "displayName": "锚点链接",
+    "category": "navigation",
+    "description": "Anchor 的子链接组件，用于声明单个锚点项。支持标题、禁用态以及嵌套层级，通常作为 Anchor 的默认插槽子节点出现。",
+    "importStatement": "import { AnchorLink } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "href",
+            "description": "目标元素的 id 或锚点标识",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<AnchorLink href=\"section1\" title=\"第一部分\" />"
+        },
+        {
+            "name": "title",
+            "description": "链接标题内容",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<AnchorLink href=\"billing\" title=\"计费说明\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用当前锚点链接",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<AnchorLink href=\"advanced\" title=\"高级设置\" disabled />"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "自定义链接内容；未设置 title 时可直接通过默认插槽传入文字或节点",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<AnchorLink href=\"section2\">第二部分</AnchorLink>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "anchorlink_basic",
+            "title": "基础链接",
+            "description": "在 Anchor 中声明单个锚点链接。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Anchor, AnchorLink } from '@king-design/vue';\n</script>\n<template>\n  <Anchor>\n    <AnchorLink href=\"section1\" title=\"第一部分\" />\n    <AnchorLink href=\"section2\">第二部分</AnchorLink>\n  </Anchor>\n</template>",
+            "tags": [
+                "basic",
+                "default-slot"
+            ],
+            "usedProps": [
+                "href",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "为章节导航添加单个可点击锚点项。"
+        },
+        {
+            "id": "anchorlink_nested",
+            "title": "嵌套链接",
+            "description": "在纵向 Anchor 中构建层级导航。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Anchor, AnchorLink } from '@king-design/vue';\n</script>\n<template>\n  <Anchor>\n    <AnchorLink href=\"overview\" title=\"概览\">\n      <AnchorLink href=\"overview-base\" title=\"基础信息\" />\n      <AnchorLink href=\"overview-network\" title=\"网络配置\" />\n    </AnchorLink>\n    <AnchorLink href=\"billing\" title=\"计费\" />\n  </Anchor>\n</template>",
+            "tags": [
+                "nested",
+                "hierarchy"
+            ],
+            "usedProps": [
+                "href",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "构建多级目录结构的页面导航。"
+        }
+    ],
+    "searchKeywords": [
+        "anchorlink",
+        "锚点链接",
+        "目录项",
+        "Anchor"
+    ],
+    "useCases": [
+        "Anchor 子导航项",
+        "目录树层级导航"
+    ],
+    "relatedComponents": [
+        "Anchor"
+    ]
+}

package/components/badge.json

@@ -46,6 +46,7 @@
     {
       "name": "default",
       "description": "徽标包裹的元素",
+      "bindingType": "none",
       "vueTemplate": "#default",
       "usageExample": "<Badge><Button>Button</Button></Badge>"
     }

package/components/breadcrumb.json

@@ -22,7 +22,8 @@
   "slots": [
     {
       "name": "separator",
-      "description": "指定分隔符"
+      "description": "指定分隔符",
+      "bindingType": "none"
     }
   ],
   "methods": [],

package/components/button.json

@@ -413,6 +413,7 @@
     {
       "name": "default",
       "description": "按钮内容",
+      "bindingType": "none",
       "vueTemplate": "#default",
       "usageExample": "<Button>按钮文字</Button>"
     }

package/components/buttonlink.json

@@ -11,6 +11,7 @@
         {
             "name": "default",
             "description": "按钮内容",
+            "bindingType": "none",
             "vueTemplate": "<ButtonLink>...</ButtonLink>"
         }
     ],

package/components/card.json

@@ -84,15 +84,18 @@
     "slots": [
         {
             "name": "header",
-            "description": "扩展整个头部内容"
+            "description": "扩展整个头部内容",
+            "bindingType": "none"
         },
         {
             "name": "title",
-            "description": "扩展头部标题内容"
+            "description": "扩展头部标题内容",
+            "bindingType": "none"
         },
         {
             "name": "extra",
-            "description": "扩展头部附加内容"
+            "description": "扩展头部附加内容",
+            "bindingType": "none"
         }
     ],
     "methods": [],

package/components/cardcontent.json

@@ -101,30 +101,35 @@
         {
             "name": "default",
             "description": "默认内容区域",
+            "bindingType": "none",
             "vueTemplate": "<CardContent>内容</CardContent>",
             "usageExample": "<CardContent>...</CardContent>"
         },
         {
             "name": "opLeft",
             "description": "扩展卡片操作栏左侧内容",
+            "bindingType": "none",
             "vueTemplate": "<template #opLeft>...</template>",
             "usageExample": "<CardContent><template #opLeft><Button>操作</Button></template></CardContent>"
         },
         {
             "name": "opRight",
             "description": "扩展卡片操作栏右侧内容",
+            "bindingType": "none",
             "vueTemplate": "<template #opRight>...</template>",
             "usageExample": "<CardContent><template #opRight><Button>更多</Button></template></CardContent>"
         },
         {
             "name": "prepend",
             "description": "扩展卡片操作栏上面部分内容",
+            "bindingType": "none",
             "vueTemplate": "<template #prepend>...</template>",
             "usageExample": "<CardContent><template #prepend><Alert>提示信息</Alert></template></CardContent>"
         },
         {
             "name": "extra",
             "description": "扩展头部附加内容",
+            "bindingType": "none",
             "vueTemplate": "<template #extra>...</template>",
             "usageExample": "<CardContent title=\"标题\"><template #extra><Link>查看更多</Link></template></CardContent>"
         }

package/components/cascader.json

@@ -377,6 +377,62 @@
             "usageExample": "<Cascader @hide=\"onHide\">"
         }
     ],
+    "slots": [
+        {
+            "name": "value",
+            "description": "自定义单选模式下的已选路径展示内容",
+            "bindingType": "array",
+            "slotProps": [
+                {
+                    "name": "value",
+                    "type": "V[]",
+                    "description": "当前选中的值路径",
+                    "destructuringExample": "[value]"
+                },
+                {
+                    "name": "label",
+                    "type": "string",
+                    "description": "当前选中路径对应的展示文案"
+                }
+            ],
+            "vueTemplate": "#value=\"[value, label]\"",
+            "usageExample": "<Cascader v-model=\"selectedCity\" :data=\"options\">\n  <template #value=\"[value, label]\">\n    <span>{{ label }} ({{ value.join(' / ') }})</span>\n  </template>\n</Cascader>"
+        },
+        {
+            "name": "values",
+            "description": "自定义多选模式下的已选路径展示内容",
+            "bindingType": "array",
+            "slotProps": [
+                {
+                    "name": "values",
+                    "type": "V[][]",
+                    "description": "当前选中的值路径数组",
+                    "destructuringExample": "[values]"
+                },
+                {
+                    "name": "labels",
+                    "type": "string[]",
+                    "description": "当前选中路径对应的展示文案数组"
+                }
+            ],
+            "vueTemplate": "#values=\"[values, labels]\"",
+            "usageExample": "<Cascader v-model=\"selectedCities\" :data=\"options\" multiple>\n  <template #values=\"[values, labels]\">\n    <span>已选 {{ labels.length }} 条路径</span>\n  </template>\n</Cascader>"
+        },
+        {
+            "name": "prefix",
+            "description": "扩展选择框前缀内容",
+            "bindingType": "none",
+            "vueTemplate": "#prefix",
+            "usageExample": "<Cascader :data=\"options\">\n  <template #prefix>\n    <span class=\"k-icon-location\"></span>\n  </template>\n</Cascader>"
+        },
+        {
+            "name": "suffix",
+            "description": "扩展选择框后缀内容",
+            "bindingType": "none",
+            "vueTemplate": "#suffix",
+            "usageExample": "<Cascader :data=\"options\">\n  <template #suffix>\n    <span>路径</span>\n  </template>\n</Cascader>"
+        }
+    ],
     "methods": [
         {
             "name": "show",