king-design-analyzer 2.1.9 → 2.2.1

package/components/layouttabs.json

@@ -0,0 +1,168 @@
+{
+    "id": "layouttabs",
+    "name": "LayoutTabs",
+    "displayName": "布局标签页",
+    "category": "layout",
+    "description": "页面级业务标签组件，适合在详情页或配置页切换“概览、监控、日志、告警”等大块内容。",
+    "importStatement": "import { LayoutTabs } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前激活的标签值",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "tabs",
+            "description": "标签数据列表，元素通常包含 value、label、disabled 等字段",
+            "type": {
+                "raw": "TabItem[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]"
+        },
+        {
+            "name": "theme",
+            "description": "标签页视觉主题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "routerName",
+            "description": "结合路由模式时使用的路由名称",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "tabParamKey",
+            "description": "URL 中用于记录当前 tab 的参数名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"tab\""
+        },
+        {
+            "name": "halfRadius",
+            "description": "是否启用半圆角样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "激活标签值变化时触发，适合直接绑定当前 tab 状态。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | number",
+                    "description": "当前激活标签的 value。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:tab",
+            "vueEventName": "@update:tab",
+            "description": "当前完整标签对象变化时触发，便于读取路由名或扩展字段。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "LayoutTabItem",
+                    "description": "当前选中的完整标签项对象。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "layouttabs_monitor",
+            "title": "详情页标签切换",
+            "description": "在页面主区域切换不同业务模块。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LayoutTabs } from '@ksyun-internal/versatile';\n\nconst active = ref('overview');\nconst tabs = [\n  { label: '概览', value: 'overview' },\n  { label: '监控', value: 'monitor' },\n  { label: '日志', value: 'logs' },\n];\n</script>\n\n<template>\n  <LayoutTabs v-model=\"active\" :tabs=\"tabs\" />\n</template>",
+            "tags": [
+                "tabs",
+                "page"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tabs"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在详情页顶部切换不同子页面内容。"
+        },
+        {
+            "id": "layouttabs_router_mode",
+            "title": "结合路由参数记录页签",
+            "description": "通过 tabParamKey 让当前页签状态体现在 URL 上。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LayoutTabs } from '@ksyun-internal/versatile';\n\nconst active = ref('alarm');\nconst tabs = [\n  { label: '概览', value: 'overview' },\n  { label: '告警', value: 'alarm' },\n  { label: '审计日志', value: 'audit' },\n];\n</script>\n\n<template>\n  <LayoutTabs\n    v-model=\"active\"\n    :tabs=\"tabs\"\n    tab-param-key=\"view\"\n    :half-radius=\"true\"\n  />\n</template>",
+            "tags": [
+                "tabs",
+                "router"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tabs",
+                "tabParamKey",
+                "halfRadius"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "update:tab"
+            ],
+            "usedMethods": [],
+            "scenario": "让用户刷新页面后仍能保留当前页签状态。"
+        }
+    ],
+    "searchKeywords": [
+        "layout tabs",
+        "tabs",
+        "tab",
+        "页面标签",
+        "页签"
+    ],
+    "useCases": [
+        "详情页多标签切换",
+        "控制台页面分区导航",
+        "路由参数驱动的页签切换"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "LayoutTabItem",
+            "definition": "interface LayoutTabItem { label: string; value: string | number; disabled?: boolean }",
+            "description": "业务页签项类型，包含展示文案、唯一值和禁用状态。"
+        }
+    ],
+    "relatedComponents": [
+        "LayoutContent",
+        "Header"
+    ]
+}

package/components/lazymount.json

@@ -0,0 +1,87 @@
+{
+    "id": "lazymount",
+    "name": "LazyMount",
+    "displayName": "延迟挂载",
+    "category": "layout",
+    "description": "仅在内容真正可见时再挂载子树的轻量组件，适合优化重量级图表、编辑器或弹层内部内容的首次渲染开销。",
+    "importStatement": "import { LazyMount } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "show",
+            "description": "是否挂载内容",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": true
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "延迟挂载的内容",
+            "bindingType": "none",
+            "vueTemplate": "<LazyMount>...</LazyMount>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "lazymount_chart",
+            "title": "延迟挂载重量级图表",
+            "description": "在用户展开监控面板后再渲染图表区域。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LazyMount } from '@ksyun-internal/versatile';\n\nconst showChart = ref(false);\n</script>\n\n<template>\n  <button @click=\"showChart = !showChart\">切换监控面板</button>\n  <LazyMount :show=\"showChart\">\n    <div>这里放图表组件</div>\n  </LazyMount>\n</template>",
+            "tags": [
+                "lazy",
+                "performance"
+            ],
+            "usedProps": [
+                "show"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "减少图表、代码编辑器等重组件的初始渲染成本。"
+        },
+        {
+            "id": "lazymount_editor_panel",
+            "title": "编辑器面板按需挂载",
+            "description": "只在用户切换到高级编辑模式后再加载编辑器区域。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LazyMount } from '@ksyun-internal/versatile';\n\nconst advanced = ref(false);\n</script>\n\n<template>\n  <button @click=\"advanced = !advanced\">高级编辑</button>\n  <LazyMount :show=\"advanced\">\n    <textarea rows=\"8\" style=\"width: 100%;\">这里放策略编辑器</textarea>\n  </LazyMount>\n</template>",
+            "tags": [
+                "lazy",
+                "editor"
+            ],
+            "usedProps": [
+                "show"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "避免策略编辑器、脚本编辑器在初始渲染时带来额外开销。"
+        }
+    ],
+    "searchKeywords": [
+        "lazy mount",
+        "deferred mount",
+        "延迟挂载",
+        "按需挂载",
+        "性能优化"
+    ],
+    "useCases": [
+        "大型内容按需挂载",
+        "弹层内容懒加载",
+        "编辑器或图表按需渲染"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "LazyMountVisible",
+            "definition": "type LazyMountVisible = boolean",
+            "description": "延迟挂载触发状态类型，`true` 时开始渲染目标内容。"
+        }
+    ],
+    "relatedComponents": [
+        "LazyTeleport"
+    ]
+}

package/components/lazyteleport.json

@@ -0,0 +1,119 @@
+{
+    "id": "lazyteleport",
+    "name": "LazyTeleport",
+    "displayName": "延迟传送",
+    "category": "layout",
+    "description": "结合 Teleport 与惰性挂载能力的组件，只有在需要显示时才把内容传送到目标容器，适合悬浮工具栏、页面外挂操作区。",
+    "importStatement": "import { LazyTeleport } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "to",
+            "description": "Teleport 目标容器",
+            "type": {
+                "raw": "string | Element",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用 Teleport",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "defer",
+            "description": "是否延迟传送",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "show",
+            "description": "是否展示内容",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": true
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "待传送内容",
+            "bindingType": "none",
+            "vueTemplate": "<LazyTeleport>...</LazyTeleport>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "lazyteleport_toolbar",
+            "title": "延迟传送页面操作区",
+            "description": "仅在页面进入编辑态后把操作按钮挂到目标容器。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LazyTeleport } from '@ksyun-internal/versatile';\n\nconst showActions = ref(true);\n</script>\n\n<template>\n  <div id=\"page-actions\"></div>\n  <LazyTeleport to=\"#page-actions\" :show=\"showActions\">\n    <div>保存 / 取消</div>\n  </LazyTeleport>\n</template>",
+            "tags": [
+                "teleport",
+                "performance"
+            ],
+            "usedProps": [
+                "to",
+                "show"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "把低频出现的页面操作区延迟挂载到指定容器。"
+        },
+        {
+            "id": "lazyteleport_disable_mode",
+            "title": "禁用 Teleport 回退到原地渲染",
+            "description": "在某些嵌入场景下通过 disabled 让内容仍在原位置渲染。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { LazyTeleport } from '@ksyun-internal/versatile';\n\nconst showActions = ref(true);\nconst disableTeleport = ref(true);\n</script>\n\n<template>\n  <LazyTeleport to=\"#toolbar\" :show=\"showActions\" :disabled=\"disableTeleport\">\n    <div>保存当前草稿</div>\n  </LazyTeleport>\n</template>",
+            "tags": [
+                "teleport",
+                "fallback"
+            ],
+            "usedProps": [
+                "to",
+                "show",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在宿主环境不适合 Teleport 时回退到就地渲染。"
+        }
+    ],
+    "searchKeywords": [
+        "lazy teleport",
+        "teleport",
+        "延迟传送",
+        "portal",
+        "按需 teleport"
+    ],
+    "useCases": [
+        "弹层内容延迟挂载",
+        "按需 Teleport 内容",
+        "禁用 Teleport 的回退渲染"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TeleportTarget",
+            "definition": "type TeleportTarget = string | HTMLElement",
+            "description": "Teleport 目标容器类型，可传 CSS 选择器或实际 DOM 节点。"
+        }
+    ],
+    "relatedComponents": [
+        "LazyMount",
+        "VDialog",
+        "VDrawer"
+    ]
+}

package/components/menu.json

@@ -160,7 +160,8 @@
   "slots": [
     {
       "name": "header",
-      "description": "扩展菜单头部"
+      "description": "扩展菜单头部",
+      "bindingType": "none"
     }
   ],
   "methods": [],
@@ -230,8 +231,8 @@
               "description": "原生鼠标事件"
             }
           ],
-          "usageExample": "<MenuItem @select=\"handleSelect\"></MenuItem>",
-          "handlerExample": "const handleSelect = (menuItem, e: MouseEvent) => {\n  console.log('选中了:', menuItem.key);\n};"
+          "usageExample": "<MenuItem @select=\"handleMenuSelect\"></MenuItem>",
+          "handlerExample": "const activeSection = ref('');\n\nconst handleMenuSelect = (menuItem, e: MouseEvent) => {\n  activeSection.value = String(menuItem.key);\n};"
         }
       ]
     }
@@ -475,6 +476,13 @@
     "多级分类导航",
     "设置页面菜单"
   ],
+  "typeDefinitions": [
+    {
+      "name": "MenuType",
+      "definition": "type MenuType = 'vertical' | 'horizontal'",
+      "description": "菜单布局方向枚举，控制菜单按纵向或横向排列。"
+    }
+  ],
   "relatedComponents": [
     "MenuItem",
     "Dropdown"