king-design-analyzer 2.2.0 → 2.2.1

package/components/configprovider.json

@@ -0,0 +1,96 @@
+{
+    "id": "configprovider",
+    "name": "ConfigProvider",
+    "displayName": "全局配置提供器",
+    "category": "general",
+    "description": "配置上下文提供器，用于向包裹区域内的组件统一注入类名前缀和波纹动画配置。适合在局部区域隔离样式命名空间或关闭交互波纹效果。",
+    "importStatement": "import { ConfigProvider } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "传递给内部组件的配置对象",
+            "type": {
+                "raw": "{ classNamePrefix?: string; disableWave?: boolean }",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}",
+            "usageExample": "<ConfigProvider :value=\"{ classNamePrefix: 'my', disableWave: true }\"></ConfigProvider>"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "需要继承配置的子组件内容",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<ConfigProvider :value=\"config\"><Button>按钮</Button></ConfigProvider>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "configprovider_prefix",
+            "title": "自定义类名前缀",
+            "description": "为局部组件树设置独立类名前缀。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, ButtonGroup, ConfigProvider } from '@king-design/vue';\n\nconst config = ref({ classNamePrefix: 'custom' });\n</script>\n<template>\n  <ConfigProvider :value=\"config\">\n    <ButtonGroup>\n      <Button>默认按钮</Button>\n      <Button type=\"primary\">主要按钮</Button>\n    </ButtonGroup>\n  </ConfigProvider>\n</template>",
+            "tags": [
+                "classNamePrefix",
+                "scope"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在微前端或局部主题隔离场景中定制组件类名前缀。"
+        },
+        {
+            "id": "configprovider_disable_wave",
+            "title": "关闭波纹效果",
+            "description": "统一禁用子组件的波纹动画效果。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, ConfigProvider } from '@king-design/vue';\n</script>\n<template>\n  <ConfigProvider :value=\"{ disableWave: true }\">\n    <div style=\"display: flex; gap: 8px;\">\n      <Button>普通按钮</Button>\n      <Button type=\"primary\">无波纹按钮</Button>\n    </div>\n  </ConfigProvider>\n</template>",
+            "tags": [
+                "disableWave",
+                "interaction"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在需要弱化交互动画或统一交互体验时关闭波纹效果。"
+        }
+    ],
+    "searchKeywords": [
+        "configprovider",
+        "配置提供器",
+        "classNamePrefix",
+        "disableWave"
+    ],
+    "useCases": [
+        "局部样式前缀隔离",
+        "统一关闭波纹动画",
+        "子树级组件配置注入"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ConfigProviderValue",
+            "definition": "type ConfigProviderValue = { classNamePrefix?: string; disableWave?: boolean }",
+            "description": "ConfigProvider 支持的配置项。"
+        }
+    ],
+    "relatedComponents": [
+        "Button",
+        "Notification"
+    ]
+}

package/components/copyrow.json

@@ -57,6 +57,7 @@
         {
             "name": "default",
             "description": "自定义行内容",
+            "bindingType": "none",
             "vueTemplate": "<CopyRow>...</CopyRow>"
         }
     ],

package/components/descriptions.json

@@ -55,7 +55,8 @@
   "slots": [
     {
       "name": "title",
-      "description": "自定义title"
+      "description": "自定义title",
+      "bindingType": "none"
     }
   ],
   "methods": [],
@@ -101,11 +102,17 @@
       "slots": [
         {
           "name": "append",
-          "description": "用于超长省略后的操作区自定义内容"
+          "description": "用于超长省略后的操作区自定义内容",
+          "bindingType": "none",
+          "vueTemplate": "#append",
+          "usageExample": "<DescriptionItem label=\"手机号\">\n  138****8000\n  <template #append>\n    修改\n  </template>\n</DescriptionItem>"
         },
         {
           "name": "label",
-          "description": "自定义label"
+          "description": "自定义label",
+          "bindingType": "none",
+          "vueTemplate": "#label",
+          "usageExample": "<DescriptionItem>\n  <template #label>\n    联系方式\n  </template>\n  138****8000\n</DescriptionItem>"
         }
       ]
     }

package/components/diagram.json

@@ -0,0 +1,295 @@
+{
+    "id": "diagram",
+    "name": "Diagram",
+    "displayName": "流程图",
+    "category": "data",
+    "description": "流程图组件，用于在画布中组织图形、连线和布局。支持节点选中、标签编辑以及多种布局方式，适合流程建模、拓扑展示和审批链路可视化场景。",
+    "importStatement": "import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';",
+    "props": [],
+    "events": [
+        {
+            "name": "labelChanged",
+            "vueEventName": "@labelChanged",
+            "description": "节点标签修改后触发",
+            "payload": [
+                {
+                    "name": "cell",
+                    "type": "any",
+                    "description": "发生变化的图元实例"
+                },
+                {
+                    "name": "newLabel",
+                    "type": "string",
+                    "description": "修改后的标签内容"
+                },
+                {
+                    "name": "oldLabel",
+                    "type": "string",
+                    "description": "修改前的标签内容"
+                }
+            ],
+            "usageExample": "<Diagram @labelChanged=\"handleLabelChanged\"></Diagram>",
+            "handlerExample": "const handleLabelChanged = (cell: any, newLabel: string, oldLabel: string) => {\n  console.log('label changed', oldLabel, '=>', newLabel);\n};"
+        },
+        {
+            "name": "selectionChanged",
+            "vueEventName": "@selectionChanged",
+            "description": "画布选中元素变化时触发",
+            "payload": [
+                {
+                    "name": "cells",
+                    "type": "any[]",
+                    "description": "当前选中的图元列表"
+                }
+            ],
+            "usageExample": "<Diagram @selectionChanged=\"handleSelectionChanged\"></Diagram>",
+            "handlerExample": "const handleSelectionChanged = (cells: any[]) => {\n  console.log('selected cells', cells.length);\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "流程图内容，通常放置布局组件、图形组件和连线组件",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<Diagram>\n  <DTreeLayout>\n    <DRectangle key=\"1\" />\n    <DCircle key=\"2\" />\n    <DLine from=\"1\" to=\"2\" />\n  </DTreeLayout>\n</Diagram>"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "DRectangle",
+            "description": "矩形节点，支持圆角、拖拽、选中和自定义内容。",
+            "props": [
+                {
+                    "name": "key",
+                    "description": "节点唯一标识，供连线引用",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": true,
+                    "default": "undefined",
+                    "usageExample": "<DRectangle key=\"1\" />"
+                },
+                {
+                    "name": "label",
+                    "description": "节点标签",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DRectangle key=\"1\" label=\"开始\" />"
+                },
+                {
+                    "name": "rounded",
+                    "description": "圆角大小",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "0",
+                    "usageExample": "<DRectangle key=\"1\" :rounded=\"8\" />"
+                }
+            ]
+        },
+        {
+            "name": "DCircle",
+            "description": "圆形节点，适合展示起止节点或状态节点。",
+            "props": [
+                {
+                    "name": "key",
+                    "description": "节点唯一标识",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": true,
+                    "default": "undefined",
+                    "usageExample": "<DCircle key=\"2\" />"
+                },
+                {
+                    "name": "label",
+                    "description": "节点标签",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DCircle key=\"2\" label=\"结束\" />"
+                }
+            ]
+        },
+        {
+            "name": "DLine",
+            "description": "节点之间的连线。",
+            "props": [
+                {
+                    "name": "from",
+                    "description": "起始节点 key",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": true,
+                    "default": "undefined",
+                    "usageExample": "<DLine from=\"1\" to=\"2\" />"
+                },
+                {
+                    "name": "to",
+                    "description": "目标节点 key",
+                    "type": {
+                        "raw": "string | number",
+                        "kind": "union"
+                    },
+                    "required": true,
+                    "default": "undefined",
+                    "usageExample": "<DLine from=\"1\" to=\"2\" />"
+                },
+                {
+                    "name": "label",
+                    "description": "连线标签",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DLine from=\"1\" to=\"2\" label=\"通过\" />"
+                }
+            ]
+        },
+        {
+            "name": "DTreeLayout",
+            "description": "树形布局，适合组织审批流或层级关系图。",
+            "props": [
+                {
+                    "name": "type",
+                    "description": "布局方向",
+                    "type": {
+                        "raw": "\"horizontal\" | \"vertical\"",
+                        "kind": "union",
+                        "unionTypes": [
+                            "horizontal",
+                            "vertical"
+                        ]
+                    },
+                    "required": false,
+                    "default": "\"vertical\"",
+                    "usageExample": "<DTreeLayout type=\"horizontal\"></DTreeLayout>"
+                },
+                {
+                    "name": "levelDistance",
+                    "description": "层级之间的距离",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DTreeLayout :levelDistance=\"80\"></DTreeLayout>"
+                }
+            ]
+        },
+        {
+            "name": "DFlowLayout",
+            "description": "流式布局，适合横向或纵向流程图编排。",
+            "props": [
+                {
+                    "name": "type",
+                    "description": "布局方向",
+                    "type": {
+                        "raw": "\"horizontal\" | \"vertical\"",
+                        "kind": "union",
+                        "unionTypes": [
+                            "horizontal",
+                            "vertical"
+                        ]
+                    },
+                    "required": false,
+                    "default": "\"vertical\"",
+                    "usageExample": "<DFlowLayout type=\"horizontal\"></DFlowLayout>"
+                },
+                {
+                    "name": "intraCellSpacing",
+                    "description": "同层节点间距",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DFlowLayout :intraCellSpacing=\"40\"></DFlowLayout>"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "diagram_basic",
+            "title": "基础树形流程图",
+            "description": "使用树形布局组织节点和连线。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';\n</script>\n<template>\n  <Diagram>\n    <DTreeLayout>\n      <DRectangle key=\"1\" label=\"开始\" />\n      <DCircle key=\"2\" label=\"审核\" />\n      <DCircle key=\"3\" label=\"结束\" />\n      <DLine from=\"1\" to=\"2\" />\n      <DLine from=\"2\" to=\"3\" />\n    </DTreeLayout>\n  </Diagram>\n</template>",
+            "tags": [
+                "tree",
+                "basic"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "快速搭建审批流或状态流转图。"
+        },
+        {
+            "id": "diagram_selectable",
+            "title": "可选中节点",
+            "description": "监听选中变化，处理画布交互。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Diagram, DRectangle, DLine, DFlowLayout } from '@king-design/vue/components/diagram';\n\nconst handleSelectionChanged = (cells: any[]) => {\n  console.log('当前选中数量', cells.length);\n};\n</script>\n<template>\n  <Diagram @selectionChanged=\"handleSelectionChanged\">\n    <DFlowLayout type=\"horizontal\">\n      <DRectangle key=\"1\" label=\"节点 A\" selectable />\n      <DRectangle key=\"2\" label=\"节点 B\" selectable />\n      <DLine from=\"1\" to=\"2\" label=\"流转\" />\n    </DFlowLayout>\n  </Diagram>\n</template>",
+            "tags": [
+                "selection",
+                "interaction"
+            ],
+            "usedProps": [],
+            "usedEvents": [
+                "selectionChanged"
+            ],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在画布中选中节点并联动侧边配置面板。"
+        }
+    ],
+    "searchKeywords": [
+        "diagram",
+        "流程图",
+        "拓扑图",
+        "graph",
+        "DTreeLayout",
+        "DFlowLayout"
+    ],
+    "useCases": [
+        "审批流建模",
+        "拓扑结构展示",
+        "流程状态可视化"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DiagramImportPath",
+            "definition": "import { Diagram, DRectangle, DLine } from '@king-design/vue/components/diagram'",
+            "description": "Diagram 当前推荐使用的导入方式。"
+        }
+    ],
+    "relatedComponents": [
+        "Anchor",
+        "Card"
+    ]
+}

package/components/dialog.json

@@ -302,24 +302,28 @@
         {
             "name": "default",
             "description": "弹窗主体内容（body区域）",
+            "bindingType": "none",
             "vueTemplate": "默认插槽",
             "usageExample": "<Dialog v-model=\"visible\">\n  <p>弹窗内容</p>\n</Dialog>"
         },
         {
             "name": "header",
             "description": "扩展弹窗头部",
+            "bindingType": "none",
             "vueTemplate": "#header",
             "usageExample": "<Dialog v-model=\"visible\">\n  <template #header>\n    <h2>自定义头部</h2>\n  </template>\n</Dialog>"
         },
         {
             "name": "footer",
             "description": "扩展弹窗底部按钮区域",
+            "bindingType": "none",
             "vueTemplate": "#footer",
             "usageExample": "<Dialog v-model=\"visible\">\n  <template #footer>\n    <Button @click=\"visible = false\">关闭</Button>\n    <Button type=\"primary\" @click=\"handleSubmit\">提交</Button>\n  </template>\n</Dialog>"
         },
         {
             "name": "content",
             "description": "定义整个弹窗体，包括header、body、footer",
+            "bindingType": "none",
             "vueTemplate": "#content",
             "usageExample": "<Dialog v-model=\"visible\">\n  <template #content>\n    <!-- 完全自定义弹窗结构 -->\n  </template>\n</Dialog>"
         }

package/components/divider.json

@@ -162,6 +162,7 @@
         {
             "name": "default",
             "description": "分割线中间的文字内容",
+            "bindingType": "none",
             "vueTemplate": "#default",
             "usageExample": "<Divider>文字内容</Divider>"
         }

package/components/drawer.json

@@ -334,6 +334,38 @@
             "handlerExample": "const handleAfterClose = () => {\n  console.log('动画完成');\n};"
         }
     ],
+    "slots": [
+        {
+            "name": "content",
+            "description": "定义整个弹窗体，包括header，body，footer",
+            "bindingType": "none",
+            "vueTemplate": "#content"
+        },
+        {
+            "name": "header",
+            "description": "扩展弹窗头部",
+            "bindingType": "none",
+            "vueTemplate": "#header"
+        },
+        {
+            "name": "body",
+            "description": "扩展弹窗主体部分",
+            "bindingType": "none",
+            "vueTemplate": "#body"
+        },
+        {
+            "name": "footer",
+            "description": "扩展弹窗底部",
+            "bindingType": "none",
+            "vueTemplate": "#footer"
+        },
+        {
+            "name": "footer-wrapper",
+            "description": "扩展弹窗整个底部，上述footer是它下面一个子扩展点",
+            "bindingType": "none",
+            "vueTemplate": "#footer-wrapper"
+        }
+    ],
     "methods": [
         {
             "name": "show",

package/components/dropdown.json

@@ -269,8 +269,8 @@
                             "description": "被选中的菜单项实例"
                         }
                     ],
-                    "usageExample": "<DropdownItem @select=\"handleSelect\">",
-                    "handlerExample": "const handleSelect = (item) => {\n  console.log('选中了:', item);\n};"
+                    "usageExample": "<DropdownItem @select=\"handleActionSelect\">查看详情</DropdownItem>",
+                    "handlerExample": "const selectedAction = ref('');\nconst selectedItem = ref(null);\n\nconst handleActionSelect = (item) => {\n  selectedAction.value = 'detail';\n  selectedItem.value = item;\n};"
                 },
                 {
                     "name": "click",
@@ -283,8 +283,8 @@
                             "description": "原生鼠标事件"
                         }
                     ],
-                    "usageExample": "<DropdownItem @click=\"handleClick\">",
-                    "handlerExample": "const handleClick = (e: MouseEvent) => {\n  console.log('点击了菜单项');\n};"
+                    "usageExample": "<DropdownItem @click=\"recordMenuClick\">下载日志</DropdownItem>",
+                    "handlerExample": "const lastPointer = ref({ x: 0, y: 0 });\n\nconst recordMenuClick = (e: MouseEvent) => {\n  lastPointer.value = { x: e.clientX, y: e.clientY };\n};"
                 }
             ]
         }

package/components/flex.json

@@ -82,6 +82,7 @@
         {
             "name": "default",
             "description": "Flex 容器内容",
+            "bindingType": "none",
             "vueTemplate": "<Flex>...</Flex>"
         }
     ],

package/components/form.json

@@ -496,15 +496,24 @@
       "slots": [
         {
           "name": "label",
-          "description": "扩展前面的标题label"
+          "description": "扩展前面的标题label",
+          "bindingType": "none",
+          "vueTemplate": "#label",
+          "usageExample": "<FormItem>\n  <template #label>\n    用户名\n  </template>\n  <Input />\n</FormItem>"
         },
         {
           "name": "content",
-          "description": "扩展后面的内容，也可以使用children代替"
+          "description": "扩展后面的内容，也可以使用children代替",
+          "bindingType": "none",
+          "vueTemplate": "#content",
+          "usageExample": "<FormItem label=\"用户名\">\n  <template #content>\n    <Input />\n  </template>\n</FormItem>"
         },
         {
           "name": "append",
-          "description": "往后面追加的内容"
+          "description": "往后面追加的内容",
+          "bindingType": "none",
+          "vueTemplate": "#append",
+          "usageExample": "<FormItem label=\"验证码\">\n  <Input />\n  <template #append>\n    <Button type=\"primary\">发送验证码</Button>\n  </template>\n</FormItem>"
         }
       ]
     }

package/components/header.json

@@ -72,21 +72,25 @@
         {
             "name": "title",
             "description": "扩展顶部栏左侧标题处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #title>...</template>"
         },
         {
             "name": "titleAppend",
             "description": "扩展顶部栏左侧标题后的追加内容",
+            "bindingType": "none",
             "vueTemplate": "<template #titleAppend>...</template>"
         },
         {
             "name": "docPrepend",
             "description": "扩展右侧文档入口前的内容",
+            "bindingType": "none",
             "vueTemplate": "<template #docPrepend>...</template>"
         },
         {
             "name": "doc",
             "description": "自定义右侧文档区域",
+            "bindingType": "none",
             "vueTemplate": "<template #doc>...</template>"
         }
     ],

package/components/input.json

@@ -479,24 +479,28 @@
     {
       "name": "prepend",
       "description": "输入框前置内容，展示在输入框外部左侧",
+      "bindingType": "none",
       "vueTemplate": "#prepend",
       "usageExample": "<Input v-model=\"url\">\n  <template #prepend>http://</template>\n</Input>"
     },
     {
       "name": "append",
       "description": "输入框后置内容，展示在输入框外部右侧",
+      "bindingType": "none",
       "vueTemplate": "#append",
       "usageExample": "<Input v-model=\"email\">\n  <template #append>.com</template>\n</Input>"
     },
     {
       "name": "prefix",
       "description": "输入框前缀图标或内容，展示在输入框内部左侧",
+      "bindingType": "none",
       "vueTemplate": "#prefix",
       "usageExample": "<Input v-model=\"user\">\n  <template #prefix><Icon class=\"k-icon-user\" /></template>\n</Input>"
     },
     {
       "name": "suffix",
       "description": "输入框后缀图标或内容，展示在输入框内部右侧",
+      "bindingType": "none",
       "vueTemplate": "#suffix",
       "usageExample": "<Input v-model=\"search\">\n  <template #suffix><Icon class=\"k-icon-search\" /></template>\n</Input>"
     }
@@ -745,8 +749,8 @@
               "description": "当前搜索关键字"
             }
           ],
-          "usageExample": "<Search @submit=\"handleSearch\" />",
-          "handlerExample": "const handleSearch = (keywords: string) => {\n  console.log('搜索关键字:', keywords);\n};"
+          "usageExample": "<Search @submit=\"handleKeywordSearch\" />",
+          "handlerExample": "const searchHistory = ref<string[]>([]);\n\nconst handleKeywordSearch = (keywords: string) => {\n  const normalized = keywords.trim();\n  if (!normalized) return;\n  searchHistory.value = [normalized, ...searchHistory.value.filter((item) => item !== normalized)].slice(0, 5);\n};"
         }
       ],
       "methods": [
@@ -755,14 +759,14 @@
           "description": "使搜索框获得焦点",
           "params": [],
           "returnType": "void",
-          "usageExample": "const searchRef = ref<InstanceType<typeof Search>>();\nsearchRef.value?.focus();"
+          "usageExample": "const searchRef = ref<InstanceType<typeof Search>>();\n\nconst openSearchBar = () => {\n  searchRef.value?.focus();\n};"
         },
         {
           "name": "blur",
           "description": "使搜索框失去焦点",
           "params": [],
           "returnType": "void",
-          "usageExample": "searchRef.value?.blur();"
+          "usageExample": "const closeSearchBar = () => {\n  searchRef.value?.blur();\n};"
         }
       ]
     }