king-design-analyzer 2.1.7 → 2.2.0

package/components/layoutstandardlist.json

@@ -0,0 +1,275 @@
+{
+    "id": "layoutstandardlist",
+    "name": "LayoutStandardList",
+    "displayName": "标准列表布局",
+    "category": "layout",
+    "description": "标准化列表页业务容器，内置搜索、批量操作、轮询和列管理等能力，适合快速搭建成熟的资源管理列表页。",
+    "importStatement": "import { LayoutStandardList } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "canCreate",
+            "description": "控制“创建”按钮可用性的配置对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "canDelete",
+            "description": "控制批量删除按钮可用性的配置对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "handleClickCreateBtn",
+            "description": "点击创建按钮时的处理函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "handleClickBatchDeleteBtn",
+            "description": "点击批量删除按钮时的处理函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "placeholder",
+            "description": "搜索框占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "hasSearch",
+            "description": "是否显示搜索区域",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "hasSearchItems",
+            "description": "是否显示检索项区域",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "searches",
+            "description": "搜索配置集合",
+            "type": {
+                "raw": "SearchType[] | Record<string, SearchType>",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "searchGroups",
+            "description": "搜索类型分组配置",
+            "type": {
+                "raw": "SearchGroupItem[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "labelMaps",
+            "description": "筛选标签文案映射",
+            "type": {
+                "raw": "Record<string, string>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "rowKey",
+            "description": "表格行唯一键字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "notCheckTip",
+            "description": "未选中任何行时的提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "tableFields",
+            "description": "可配置的表格字段定义",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        },
+        {
+            "name": "checkType",
+            "description": "表格勾选模式",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "\"checkbox\""
+        },
+        {
+            "name": "sortType",
+            "description": "排序模式",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "pollInterval",
+            "description": "轮询刷新间隔，单位毫秒",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0"
+        },
+        {
+            "name": "useList",
+            "description": "拉取列表数据的 hook 或函数，必填",
+            "type": {
+                "raw": "Function",
+                "kind": "function"
+            },
+            "required": true
+        },
+        {
+            "name": "useListDepParams",
+            "description": "触发 useList 刷新的依赖参数列表",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "useListOptionParams",
+            "description": "传给 useList 的可选参数对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "自定义列表主体内容",
+            "vueTemplate": "<LayoutStandardList>...</LayoutStandardList>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "layoutstandardlist_instances",
+            "title": "资源管理列表页",
+            "description": "通过内置搜索和创建按钮快速搭建标准资源列表。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';\n\nconst searches = [\n  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },\n  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }] },\n];\nconst tableFields = [\n  { key: 'name', label: '实例名称', checked: true },\n  { key: 'status', label: '状态', checked: true },\n];\n</script>\n\n<template>\n  <LayoutStandardList\n    :can-create=\"true\"\n    :has-search=\"true\"\n    :searches=\"searches\"\n    :table-fields=\"tableFields\"\n    placeholder=\"搜索实例名称\"\n  >\n    <ProTable :columns=\"[]\" :data-source=\"[]\" row-key=\"id\" />\n  </LayoutStandardList>\n</template>",
+            "tags": [
+                "layout",
+                "standard-list"
+            ],
+            "usedProps": [
+                "canCreate",
+                "hasSearch",
+                "searches",
+                "tableFields",
+                "placeholder"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "快速拼出带搜索、列配置和新建入口的资源列表页。"
+        },
+        {
+            "id": "layoutstandardlist_batch_ops",
+            "title": "带批量操作和轮询的标准列表",
+            "description": "使用批量删除、检索项回显和轮询能力构建更完整的资源管理页。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';\n\nconst searches = [\n  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },\n  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }, { key: 'stopped', label: '已停止' }] },\n];\nconst tableFields = [\n  { key: 'name', label: '实例名称', checked: true },\n  { key: 'status', label: '状态', checked: true },\n  { key: 'privateIp', label: '内网 IP', checked: false },\n];\nconst useList = () => ({ loading: false, dataSource: [], total: 0 });\nconst handleClickBatchDeleteBtn = () => console.log('batch delete');\n</script>\n\n<template>\n  <LayoutStandardList\n    :has-search=\"true\"\n    :has-search-items=\"true\"\n    :searches=\"searches\"\n    :table-fields=\"tableFields\"\n    :poll-interval=\"10000\"\n    :can-delete=\"{ value: true }\"\n    :handle-click-batch-delete-btn=\"handleClickBatchDeleteBtn\"\n    :use-list=\"useList\"\n    row-key=\"id\"\n  >\n    <ProTable :columns=\"[]\" :data-source=\"[]\" row-key=\"id\" />\n  </LayoutStandardList>\n</template>",
+            "tags": [
+                "layout",
+                "batch"
+            ],
+            "usedProps": [
+                "hasSearch",
+                "hasSearchItems",
+                "searches",
+                "tableFields",
+                "pollInterval",
+                "canDelete",
+                "handleClickBatchDeleteBtn",
+                "useList",
+                "rowKey"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在资源列表页中同时开启筛选条件回显、批量操作和定时刷新。"
+        }
+    ],
+    "searchKeywords": [
+        "standard list",
+        "resource list layout",
+        "列表布局",
+        "标准列表",
+        "批量操作列表",
+        "带搜索列表",
+        "列管理",
+        "轮询列表"
+    ],
+    "useCases": [
+        "标准资源列表页",
+        "带搜索和批量操作的列表页",
+        "带轮询和列设置的控制台列表",
+        "快速搭建资源管理页"
+    ],
+    "relatedComponents": [
+        "LayoutListContent",
+        "ProTable",
+        "Search",
+        "SearchItems"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "SearchType",
+            "definition": "type SearchType = {\n  key: string\n  label: string\n  type?: 'input' | 'select'\n  placeholder?: string\n}",
+            "description": "标准列表搜索区域中的单个搜索项配置。"
+        },
+        {
+            "name": "TableFieldItem",
+            "definition": "type TableFieldItem = {\n  key: string\n  label: string\n  checked?: boolean\n}",
+            "description": "列表字段配置项，用于控制列展示、隐藏和字段名称。"
+        }
+    ]
+}

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,86 @@
+{
+    "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": "延迟挂载的内容",
+            "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,118 @@
+{
+    "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": "待传送内容",
+            "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

@@ -475,6 +475,13 @@
     "多级分类导航",
     "设置页面菜单"
   ],
+  "typeDefinitions": [
+    {
+      "name": "MenuType",
+      "definition": "type MenuType = 'vertical' | 'horizontal'",
+      "description": "菜单布局方向枚举，控制菜单按纵向或横向排列。"
+    }
+  ],
   "relatedComponents": [
     "MenuItem",
     "Dropdown"