king-design-analyzer 2.1.9 → 2.2.1

package/components/description.json

@@ -0,0 +1,98 @@
+{
+    "id": "description",
+    "name": "Description",
+    "displayName": "描述输入",
+    "category": "form",
+    "description": "面向资源描述、备注和说明信息的简化输入组件，适合需要统一长度和校验规则的描述类字段。",
+    "importStatement": "import { Description } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "描述内容",
+            "type": {
+                "raw": "string | null",
+                "kind": "union"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "描述内容变化时触发，可直接同步备注或说明字段。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | null",
+                    "description": "当前备注或描述文本。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "description_instance_remark",
+            "title": "实例备注录入",
+            "description": "使用 Description 统一承载资源备注或用途说明。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Description } from '@ksyun-internal/versatile';\n\nconst remark = ref('用于支付链路的核心应用实例');\n</script>\n\n<template>\n  <Description v-model=\"remark\" />\n</template>",
+            "tags": [
+                "description",
+                "remark"
+            ],
+            "usedProps": [
+                "modelValue"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在创建或编辑资源时填写用途说明和备注信息。"
+        },
+        {
+            "id": "description_edit_remark",
+            "title": "编辑资源备注",
+            "description": "在编辑表单中回填已有备注并持续同步到父级状态。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Description } from '@ksyun-internal/versatile';\n\nconst remark = ref('部署于金融业务生产环境');\n</script>\n\n<template>\n  <Description v-model=\"remark\" />\n  <div>预览：{{ remark }}</div>\n</template>",
+            "tags": [
+                "description",
+                "edit"
+            ],
+            "usedProps": [
+                "modelValue"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在编辑资源信息时实时预览备注字段内容。"
+        }
+    ],
+    "searchKeywords": [
+        "description",
+        "remark input",
+        "描述输入",
+        "备注填写",
+        "说明文本"
+    ],
+    "useCases": [
+        "资源描述录入",
+        "备注信息填写",
+        "编辑页备注预览"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DescriptionValue",
+            "definition": "type DescriptionValue = string",
+            "description": "描述或备注字段的文本值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "FormItemInput"
+    ]
+}

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"
+    ]
+}