king-design-analyzer 2.1.9 → 2.2.1

package/components/split.json

@@ -0,0 +1,263 @@
+{
+    "id": "split",
+    "name": "Split",
+    "displayName": "分栏拖拽",
+    "category": "layout",
+    "description": "可拖拽调整尺寸的分栏布局组件。支持横向和纵向两种模式，通过 `first`、`last` 命名插槽定义两侧内容。",
+    "importStatement": "import { Split } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "mode",
+            "description": "分栏方向。",
+            "type": {
+                "raw": "\"horizontal\" | \"vertical\"",
+                "kind": "union",
+                "unionTypes": [
+                    "horizontal",
+                    "vertical"
+                ]
+            },
+            "required": false,
+            "default": "\"horizontal\"",
+            "allowedValues": [
+                {
+                    "value": "horizontal",
+                    "label": "左右分栏",
+                    "isDefault": true
+                },
+                {
+                    "value": "vertical",
+                    "label": "上下分栏"
+                }
+            ],
+            "usageExample": "<Split mode=\"vertical\">"
+        },
+        {
+            "name": "firstSize",
+            "description": "第一个面板尺寸，支持具体尺寸值或 auto。",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"auto\"",
+            "usageExample": "<Split firstSize=\"240px\">"
+        },
+        {
+            "name": "lastSize",
+            "description": "第二个面板尺寸，支持具体尺寸值或 auto。",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"auto\"",
+            "usageExample": "<Split lastSize=\"320px\">"
+        },
+        {
+            "name": "min",
+            "description": "拖拽时允许的最小尺寸。",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Split firstSize=\"240px\" :min=\"120\" />"
+        },
+        {
+            "name": "max",
+            "description": "拖拽时允许的最大尺寸。",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"100%-6\"",
+            "usageExample": "<Split firstSize=\"240px\" max=\"60%\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "moveStart",
+            "vueEventName": "@moveStart",
+            "description": "开始拖拽时触发。",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                }
+            ],
+            "usageExample": "<Split @moveStart=\"handleMoveStart\">",
+            "handlerExample": "const handleMoveStart = (e: MouseEvent) => {\n  console.log('开始拖拽');\n};"
+        },
+        {
+            "name": "moving",
+            "vueEventName": "@moving",
+            "description": "拖拽过程中持续触发。",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                }
+            ],
+            "usageExample": "<Split @moving=\"handleMoving\">",
+            "handlerExample": "const handleMoving = (e: MouseEvent) => {\n  console.log('拖拽中');\n};"
+        },
+        {
+            "name": "moveEnd",
+            "vueEventName": "@moveEnd",
+            "description": "拖拽结束时触发。",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent | undefined",
+                    "description": "原生鼠标事件"
+                }
+            ],
+            "usageExample": "<Split @moveEnd=\"handleMoveEnd\">",
+            "handlerExample": "const handleMoveEnd = (e?: MouseEvent) => {\n  console.log('拖拽结束');\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "first",
+            "description": "第一个面板内容。",
+            "bindingType": "none",
+            "vueTemplate": "<template #first>...</template>",
+            "usageExample": "<Split><template #first>左侧内容</template><template #last>右侧内容</template></Split>"
+        },
+        {
+            "name": "last",
+            "description": "第二个面板内容。",
+            "bindingType": "none",
+            "vueTemplate": "<template #last>...</template>",
+            "usageExample": "<Split><template #first>左侧内容</template><template #last>右侧内容</template></Split>"
+        },
+        {
+            "name": "drag",
+            "description": "自定义拖拽分割条内容。",
+            "bindingType": "none",
+            "vueTemplate": "<template #drag>...</template>",
+            "usageExample": "<Split><template #drag><div class=\"custom-handle\" /></template></Split>"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "Mode",
+            "definition": "type Mode = 'horizontal' | 'vertical'",
+            "description": "Split 的布局方向"
+        }
+    ],
+    "examples": [
+        {
+            "id": "split_basic",
+            "title": "左右分栏",
+            "description": "基础的横向可拖拽布局。",
+            "difficulty": "easy",
+            "code": "<template>\n  <Split firstSize=\"240px\" style=\"height: 320px; border: 1px solid #eee;\">\n    <template #first>\n      <div style=\"padding: 16px;\">左侧目录</div>\n    </template>\n    <template #last>\n      <div style=\"padding: 16px;\">右侧内容</div>\n    </template>\n  </Split>\n</template>",
+            "tags": [
+                "basic",
+                "horizontal"
+            ],
+            "usedProps": [
+                "firstSize"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "first",
+                "last"
+            ],
+            "usedMethods": [],
+            "scenario": "后台页面侧边栏和主内容区"
+        },
+        {
+            "id": "split_vertical",
+            "title": "上下分栏",
+            "description": "适合日志面板或上下编辑区。",
+            "difficulty": "easy",
+            "code": "<template>\n  <Split mode=\"vertical\" firstSize=\"120px\" style=\"height: 360px; border: 1px solid #eee;\">\n    <template #first>\n      <div style=\"padding: 16px;\">上方面板</div>\n    </template>\n    <template #last>\n      <div style=\"padding: 16px;\">下方面板</div>\n    </template>\n  </Split>\n</template>",
+            "tags": [
+                "vertical",
+                "layout"
+            ],
+            "usedProps": [
+                "mode",
+                "firstSize"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "first",
+                "last"
+            ],
+            "usedMethods": [],
+            "scenario": "上下布局的编辑器和预览区"
+        },
+        {
+            "id": "split_with_range",
+            "title": "拖拽范围限制",
+            "description": "限制面板最小和最大尺寸。",
+            "difficulty": "medium",
+            "code": "<template>\n  <Split firstSize=\"240px\" :min=\"120\" :max=\"480\" style=\"height: 320px; border: 1px solid #eee;\">\n    <template #first>\n      <div style=\"padding: 16px;\">可拖拽但不小于 120px</div>\n    </template>\n    <template #last>\n      <div style=\"padding: 16px;\">主面板</div>\n    </template>\n  </Split>\n</template>",
+            "tags": [
+                "range",
+                "resize"
+            ],
+            "usedProps": [
+                "firstSize",
+                "min",
+                "max"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "first",
+                "last"
+            ],
+            "usedMethods": [],
+            "scenario": "限制侧栏宽度的后台布局"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "split_missing_named_slots",
+            "description": "未使用 first 和 last 命名插槽",
+            "wrongCode": "<Split>\n  <div>左侧</div>\n  <div>右侧</div>\n</Split>",
+            "correctCode": "<Split>\n  <template #first><div>左侧</div></template>\n  <template #last><div>右侧</div></template>\n</Split>",
+            "explanation": "Split 使用命名插槽组织两个面板，直接写默认子节点不会正确分配到两侧区域。",
+            "relatedProps": []
+        },
+        {
+            "id": "split_both_sizes_fixed",
+            "description": "同时固定 firstSize 和 lastSize，导致拖拽空间不足",
+            "wrongCode": "<Split firstSize=\"300px\" lastSize=\"500px\">...</Split>",
+            "correctCode": "<Split firstSize=\"300px\" lastSize=\"auto\">...</Split>",
+            "explanation": "实际使用中通常固定一侧，另一侧使用 auto，让拖拽有可调整空间。",
+            "relatedProps": [
+                "firstSize",
+                "lastSize"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "split",
+        "分栏",
+        "拖拽布局",
+        "左右布局",
+        "上下布局",
+        "resize"
+    ],
+    "useCases": [
+        "侧边栏加主内容区",
+        "编辑器与预览区",
+        "日志面板",
+        "控制台双栏布局"
+    ],
+    "relatedComponents": [
+        "Layout",
+        "Grid",
+        "Card"
+    ]
+}

package/components/sshkeys.json

@@ -0,0 +1,138 @@
+{
+    "id": "sshkeys",
+    "name": "SSHKeys",
+    "displayName": "SSH 密钥选择",
+    "category": "form",
+    "description": "用于拉取并选择 SSH 密钥的业务组件，适合实例创建、重置登录方式和批量授权等需要登录凭证选择的场景。",
+    "importStatement": "import { SSHKeys } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前选中的密钥 ID",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "href",
+            "description": "跳转到密钥管理页的链接",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "disableOption",
+            "description": "禁用选项的配置或函数",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "所选 SSH 密钥 ID 变化时触发，可直接同步表单主值。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前选中的 SSH 密钥 ID。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:key",
+            "vueEventName": "@update:key",
+            "description": "所选完整密钥对象变化时触发，便于读取密钥名称、指纹等信息。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "SSHKeyItem",
+                    "description": "当前选中的完整 SSH 密钥对象。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "sshkeys_instance_create",
+            "title": "创建实例时选择 SSH 密钥",
+            "description": "把 SSH 密钥选择作为登录方式的一部分。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SSHKeys } from '@ksyun-internal/versatile';\n\nconst keyId = ref('key-001');\n</script>\n\n<template>\n  <SSHKeys v-model=\"keyId\" href=\"/ssh-key/list\" />\n</template>",
+            "tags": [
+                "ssh",
+                "security"
+            ],
+            "usedProps": [
+                "modelValue",
+                "href"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "update:key"
+            ],
+            "usedMethods": [],
+            "scenario": "在创建 Linux 实例时选择已有 SSH 密钥作为登录凭证。"
+        },
+        {
+            "id": "sshkeys_disable_option",
+            "title": "禁用不合规的 SSH 密钥",
+            "description": "根据业务规则禁用部分密钥选项，避免被误选。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SSHKeys } from '@ksyun-internal/versatile';\n\nconst keyId = ref('');\nconst disableOption = (item: { expired?: boolean }) => Boolean(item?.expired);\n</script>\n\n<template>\n  <SSHKeys\n    v-model=\"keyId\"\n    href=\"/ssh-key/list\"\n    :disable-option=\"disableOption\"\n  />\n</template>",
+            "tags": [
+                "ssh",
+                "rules"
+            ],
+            "usedProps": [
+                "modelValue",
+                "href",
+                "disableOption"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "update:key"
+            ],
+            "usedMethods": [],
+            "scenario": "在创建实例时禁用过期或不符合规范的 SSH 密钥。"
+        }
+    ],
+    "searchKeywords": [
+        "ssh keys",
+        "ssh key",
+        "SSH 密钥",
+        "登录凭证",
+        "密钥选择",
+        "ssh credential",
+        "密钥下拉",
+        "linux 登录"
+    ],
+    "useCases": [
+        "实例创建 SSH 登录凭证选择",
+        "批量实例登录方式配置",
+        "禁用不合规密钥选项",
+        "选择后联动密钥实体信息"
+    ],
+    "relatedComponents": [
+        "Projects"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "SSHKeyItem",
+            "definition": "type SSHKeyItem = {\n  id: string\n  name: string\n  fingerprint?: string\n}",
+            "description": "SSH 密钥项配置，通常包含 ID、名称和可选指纹信息。"
+        }
+    ]
+}

package/components/status.json

@@ -49,6 +49,15 @@
             },
             "required": false
         },
+        {
+            "name": "rotationDuration",
+            "description": "旋转动画时长，支持字符串或数字",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        },
         {
             "name": "refresh",
             "description": "刷新函数，传递此属性时会显示刷新按钮",
@@ -57,6 +66,42 @@
                 "kind": "function"
             },
             "required": false
+        },
+        {
+            "name": "tip",
+            "description": "状态说明提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "progress",
+            "description": "进度值，传入后可展示带进度语义的状态",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "refreshTip",
+            "description": "刷新按钮的 tooltip 文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "position",
+            "description": "状态提示或刷新按钮的弹出位置",
+            "type": {
+                "raw": "\"left\" | \"right\" | \"top\" | \"bottom\" | Options",
+                "kind": "union"
+            },
+            "required": false
         }
     ],
     "events": [],
@@ -66,10 +111,22 @@
         "status",
         "indicator",
         "loading",
-        "状态"
+        "状态",
+        "状态指示器",
+        "加载状态",
+        "进度状态"
     ],
     "useCases": [
         "表格行状态展示",
-        "详情页资源状态"
+        "详情页资源状态",
+        "带进度的任务状态展示",
+        "支持刷新动作的状态提示"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "StatusType",
+            "definition": "type StatusType = 'success' | 'warning' | 'error' | 'info' | 'loading'",
+            "description": "状态指示器的内置语义类型枚举。"
+        }
     ]
-}
+}

package/components/steps.json

@@ -285,6 +285,13 @@
     "任务进度展示",
     "安装向导"
   ],
+  "typeDefinitions": [
+    {
+      "name": "StepsType",
+      "definition": "type StepsType = 'default' | 'line' | 'simple' | 'line-compact'",
+      "description": "步骤条样式类型枚举。"
+    }
+  ],
   "relatedComponents": [
     "Step",
     "Progress"

package/components/switch.json

@@ -168,11 +168,13 @@
     "slots": [
         {
             "name": "on",
-            "description": "扩展开启时的文案"
+            "description": "扩展开启时的文案",
+            "bindingType": "none"
         },
         {
             "name": "off",
-            "description": "扩展关闭时的文案"
+            "description": "扩展关闭时的文案",
+            "bindingType": "none"
         }
     ],
     "events": [],
@@ -351,7 +353,14 @@
         "表单布尔输入",
         "偏好设置"
     ],
+    "typeDefinitions": [
+        {
+            "name": "SwitchValue",
+            "definition": "type SwitchValue = boolean | string | number",
+            "description": "开关绑定值类型，可使用布尔值或自定义 trueValue / falseValue。"
+        }
+    ],
     "relatedComponents": [
         "Checkbox"
     ]
-}
+}

package/components/table.json

@@ -553,6 +553,7 @@
     {
       "name": "empty",
       "description": "自定义无数据展示模板",
+      "bindingType": "none",
       "vueTemplate": "#empty",
       "usageExample": "<Table :data=\"[]\">\n  <template #empty>\n    <div>暂无数据</div>\n  </template>\n</Table>"
     },
@@ -578,6 +579,7 @@
     {
       "name": "footer",
       "description": "自定义表格底部",
+      "bindingType": "none",
       "vueTemplate": "#footer",
       "usageExample": "<Table :data=\"data\">\n  <template #footer>\n    <div>总计: {{ total }}</div>\n  </template>\n</Table>"
     },
@@ -862,11 +864,13 @@
           "name": "title",
           "description": "自定义复杂表头内容",
           "vueTemplate": "#title",
-          "usageExample": "<TableColumn key=\"custom\">\n  <template #title>自定义表头</template>\n</TableColumn>"
+          "usageExample": "<TableColumn key=\"custom\">\n  <template #title>自定义表头</template>\n</TableColumn>",
+          "bindingType": "none"
         },
         {
           "name": "template",
           "description": "自定义单元格内容",
+          "bindingType": "array",
           "slotProps": [
             {
               "name": "data",
@@ -886,6 +890,7 @@
         {
           "name": "default",
           "description": "与template扩展点等价，为了方便vue中使用的别名",
+          "bindingType": "array",
           "slotProps": [
             {
               "name": "data",
@@ -1051,8 +1056,25 @@
     "可排序的数据分析表格",
     "带操作列的管理表格"
   ],
+  "typeDefinitions": [
+    {
+      "name": "TableRowKey",
+      "definition": "type TableRowKey = string | number",
+      "description": "表格行唯一标识类型，用于选择、展开和高亮等状态管理。"
+    },
+    {
+      "name": "TableSortValue",
+      "definition": "type TableSortValue = {\\n  key: string\\n  order: 'asc' | 'desc'\\n}",
+      "description": "表格排序状态结构，描述当前排序字段和排序方向。"
+    },
+    {
+      "name": "TableGroupValue",
+      "definition": "type TableGroupValue = {\\n  key: string\\n  title?: string\\n}",
+      "description": "表格分组配置结构，用于按指定字段对数据进行分组展示。"
+    }
+  ],
   "relatedComponents": [
     "TableColumn",
     "Pagination"
   ]
-}
+}

package/components/tablecolumnid.json

@@ -209,9 +209,21 @@
     "id",
     "column",
     "table",
-    "表格列"
+    "表格列",
+    "ID列",
+    "名称ID列",
+    "资源标识列"
   ],
   "useCases": [
-    "资源列表ID列展示"
+    "资源列表ID列展示",
+    "支持复制的名称和 ID 展示",
+    "表格中可点击资源名称列"
+  ],
+  "typeDefinitions": [
+    {
+      "name": "TableColumnIdType",
+      "definition": "type TableColumnIdType = 'link' | 'none'",
+      "description": "ID 列展示模式枚举，控制名称是否以链接形式呈现。"
+    }
   ]
 }

package/components/tabs.json

@@ -197,8 +197,8 @@
               "description": "原生鼠标事件"
             }
           ],
-          "usageExample": "<Tab @click=\"handleClick\"></Tab>",
-          "handlerExample": "const handleClick = (e: MouseEvent) => {\n  console.log('Tab 被点击');\n};"
+          "usageExample": "<Tab @click=\"handleTabClick\"></Tab>",
+          "handlerExample": "const openInNewWindow = ref(false);\n\nconst handleTabClick = (e: MouseEvent) => {\n  openInNewWindow.value = e.metaKey || e.ctrlKey;\n};"
         }
       ]
     }
@@ -356,6 +356,18 @@
     "数据视图切换",
     "详情页多维度展示"
   ],
+  "typeDefinitions": [
+    {
+      "name": "TabValue",
+      "definition": "type TabValue = string | number",
+      "description": "单个页签的值类型，用于标识当前激活 Tab。"
+    },
+    {
+      "name": "TabItem",
+      "definition": "type TabItem = {\\n  value: TabValue\\n  disabled?: boolean\\n  to?: string\\n}",
+      "description": "页签项的基础数据结构，可选携带禁用态和路由跳转信息。"
+    }
+  ],
   "relatedComponents": [
     "Tab",
     "Menu"