king-design-analyzer 2.1.9 → 2.2.1

package/components/formitemswitch.json

@@ -0,0 +1,185 @@
+{
+    "id": "formitemswitch",
+    "name": "FormItemSwitch",
+    "displayName": "开关表单项",
+    "category": "form",
+    "description": "用于业务表单中录入布尔配置的开关表单项组件，补齐了 label、辅助说明和状态切换提示。",
+    "importStatement": "import { FormItemSwitch } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Switch",
+            "include": [
+                "props"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前开关值",
+            "type": {
+                "raw": "boolean | string",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "hideLabel",
+            "description": "是否隐藏 label 区域",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "tip",
+            "description": "辅助提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "helper",
+            "description": "说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "appendTip",
+            "description": "右侧追加提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "开关值变化时触发，适合直接同步布尔型配置。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "boolean | string",
+                    "description": "当前开关值，可为布尔值或业务自定义值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "用户完成一次有效切换后触发，可用于触发联动逻辑。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "boolean | string",
+                    "description": "本次切换后的最终值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "change:op",
+            "vueEventName": "@change:op",
+            "description": "组件内部操作态变化时触发，适合跟踪启停类动作的执行过程。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前操作态标识，例如启用、关闭或处理中等业务态。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "formitemswitch_public_ip",
+            "title": "公网访问开关",
+            "description": "在表单中配置一个带说明文案的布尔开关项。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemSwitch } from '@ksyun-internal/versatile';\n\nconst enablePublicIp = ref(true);\n</script>\n\n<template>\n  <FormItemSwitch\n    v-model=\"enablePublicIp\"\n    label=\"开启公网访问\"\n    helper=\"关闭后实例将无法从公网直接访问\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "switch"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "helper"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在网络配置表单中控制是否开启公网能力。"
+        },
+        {
+            "id": "formitemswitch_hide_label",
+            "title": "隐藏标题的开关项",
+            "description": "在紧凑型表单里隐藏 label，仅保留辅助说明。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemSwitch } from '@ksyun-internal/versatile';\n\nconst autoBackup = ref(false);\n</script>\n\n<template>\n  <FormItemSwitch\n    v-model=\"autoBackup\"\n    :hide-label=\"true\"\n    helper=\"开启后每天凌晨自动执行备份\"\n    append-tip=\"将占用少量存储空间\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "compact"
+            ],
+            "usedProps": [
+                "modelValue",
+                "hideLabel",
+                "helper",
+                "appendTip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在配置卡片中以更紧凑的方式呈现布尔选项。"
+        }
+    ],
+    "searchKeywords": [
+        "form item switch",
+        "switch item",
+        "开关表单项",
+        "状态开关",
+        "布尔配置"
+    ],
+    "useCases": [
+        "启停开关",
+        "布尔配置项录入",
+        "紧凑型开关表单"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "FormItemSwitchValue",
+            "definition": "type FormItemSwitchValue = boolean | string | number",
+            "description": "开关表单项绑定值类型，可兼容布尔值和业务自定义值。"
+        }
+    ],
+    "relatedComponents": [
+        "Switch",
+        "FormItemInput"
+    ]
+}

package/components/formitemtableconfigs.json

@@ -0,0 +1,210 @@
+{
+    "id": "formitemtableconfigs",
+    "name": "FormItemTableConfigs",
+    "displayName": "表格配置表单项",
+    "category": "form",
+    "description": "通过表格方式维护一组配置项的表单组件，适合批量录入实例规格、节点列表、挂载配置等多行数据。",
+    "importStatement": "import { FormItemTableConfigs } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前配置项数组",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]"
+        },
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "maxInstanceNum",
+            "description": "允许添加的最大实例数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "minInstanceNum",
+            "description": "允许保留的最小实例数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "1"
+        },
+        {
+            "name": "initInstanceModels",
+            "description": "初始化一条实例配置的工厂函数",
+            "type": {
+                "raw": "() => Record<string, any>",
+                "kind": "function"
+            },
+            "required": true
+        },
+        {
+            "name": "addBtnText",
+            "description": "新增按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "showAddBtnLabel",
+            "description": "是否显示新增按钮标签",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "helper",
+            "description": "辅助说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "info",
+            "description": "信息提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "fixHeader",
+            "description": "固定表头高度阈值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "infinite",
+            "description": "是否启用无限模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "readonly",
+            "description": "是否为只读模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "配置项数组变化时触发，新增、删除或编辑行后都会返回最新列表。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "any[]",
+                    "description": "当前配置项列表数组。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "formitemtableconfigs_nodes",
+            "title": "节点配置列表维护",
+            "description": "在表单中维护多条节点或实例配置。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemTableConfigs } from '@ksyun-internal/versatile';\n\nconst nodes = ref([\n  { name: 'worker-01', spec: '2C4G' },\n]);\n</script>\n\n<template>\n  <FormItemTableConfigs\n    v-model=\"nodes\"\n    label=\"节点配置\"\n    add-btn-text=\"新增节点\"\n    :max-instance-num=\"5\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "table"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "addBtnText",
+                "maxInstanceNum"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在集群创建页面中维护多条节点或实例配置。"
+        },
+        {
+            "id": "formitemtableconfigs_readonly",
+            "title": "只读模式展示配置列表",
+            "description": "在审核或确认步骤中仅展示配置列表，不允许再编辑。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemTableConfigs } from '@ksyun-internal/versatile';\n\nconst instances = ref([\n  { name: 'node-01', spec: '4C8G' },\n  { name: 'node-02', spec: '4C8G' },\n]);\n</script>\n\n<template>\n  <FormItemTableConfigs v-model=\"instances\" label=\"实例配置\" :readonly=\"true\" />\n</template>",
+            "tags": [
+                "form",
+                "readonly"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "readonly"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在提交前确认页只读展示用户已填写的表格配置。"
+        }
+    ],
+    "searchKeywords": [
+        "form item table configs",
+        "config table form",
+        "配置表格",
+        "实例配置",
+        "批量表单行",
+        "节点配置",
+        "多行表单",
+        "表格型表单项"
+    ],
+    "useCases": [
+        "多实例配置表单",
+        "批量节点配置",
+        "确认步骤只读展示配置列表",
+        "通过表格维护一组配置项"
+    ],
+    "relatedComponents": [
+        "InstanceList",
+        "InstanceNum",
+        "FormItemInput",
+        "FormItemSpinner"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "InstanceConfigItem",
+            "definition": "type InstanceConfigItem = Record<string, any>",
+            "description": "单条实例或节点配置对象，具体字段由业务表单自行约定。"
+        }
+    ]
+}

package/components/grid.json

@@ -370,6 +370,13 @@
     "列表网格排列",
     "响应式内容展示"
   ],
+  "typeDefinitions": [
+    {
+      "name": "GridSpan",
+      "definition": "type GridSpan = number",
+      "description": "栅格列宽度类型，基于 24 栅格系统取值。"
+    }
+  ],
   "relatedComponents": [
     "Space",
     "Divider"

package/components/header.json

@@ -0,0 +1,165 @@
+{
+    "id": "header",
+    "name": "Header",
+    "displayName": "顶部栏",
+    "category": "layout",
+    "description": "页面级顶部栏组件，整合标题、返回、面包屑和文档入口，常用于列表页、详情页以及购买链路页的统一页头。",
+    "importStatement": "import { Header } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "title",
+            "description": "左侧标题文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "back",
+            "description": "返回配置，支持函数或路由跳转参数",
+            "type": {
+                "raw": "() => any | RouteLocationRaw",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "doc",
+            "description": "相关文档配置，通常包含中英文文档地址",
+            "type": {
+                "raw": "DocParams",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "docText",
+            "description": "文档入口文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"相关文档\""
+        },
+        {
+            "name": "newable",
+            "description": "是否启用购买链路顶部栏样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "breadcrumb",
+            "description": "面包屑导航配置，元素格式为 { to, label }",
+            "type": {
+                "raw": "Array<{ to: string, label: string }>",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "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>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "header_detail_page",
+            "title": "详情页头部信息",
+            "description": "同时展示标题、面包屑和文档入口，形成统一的页面头部。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Header } from '@ksyun-internal/versatile';\n\nconst breadcrumb = [\n  { to: '/instance', label: '云服务器' },\n  { to: '/instance/list', label: '实例列表' },\n  { to: '/instance/detail', label: '实例详情' },\n];\nconst doc = {\n  zh: 'https://docs.ksyun.com/documents/instance',\n};\n</script>\n\n<template>\n  <Header title=\"实例详情\" :breadcrumb=\"breadcrumb\" :doc=\"doc\" />\n</template>",
+            "tags": [
+                "header",
+                "breadcrumb"
+            ],
+            "usedProps": [
+                "title",
+                "breadcrumb",
+                "doc"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页统一展示返回路径和文档入口。"
+        },
+        {
+            "id": "header_slot_append",
+            "title": "通过插槽扩展头部操作",
+            "description": "使用 titleAppend 和 docPrepend 插槽扩展状态展示和快捷入口。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Header } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <Header title=\"实例详情\" doc-text=\"帮助文档\">\n    <template #titleAppend>\n      <span style=\"margin-left: 8px; color: #18a058;\">运行中</span>\n    </template>\n    <template #docPrepend>\n      <a href=\"/monitor\">监控图表</a>\n    </template>\n  </Header>\n</template>",
+            "tags": [
+                "header",
+                "slots"
+            ],
+            "usedProps": [
+                "title",
+                "docText"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在页面头部追加状态标识和右侧快捷入口。"
+        }
+    ],
+    "searchKeywords": [
+        "header",
+        "page header",
+        "顶部栏",
+        "面包屑",
+        "文档入口"
+    ],
+    "useCases": [
+        "详情页顶部栏",
+        "列表页顶部栏",
+        "购买链路页面头部"
+    ],
+    "relatedComponents": [
+        "LayoutContent",
+        "LayoutListContent"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "BreadcrumbItem",
+            "definition": "type BreadcrumbItem = {\n  to: string\n  label: string\n}",
+            "description": "面包屑节点配置，包含跳转地址和展示文案。"
+        },
+        {
+            "name": "DocParams",
+            "definition": "type DocParams = {\n  zh?: string\n  en?: string\n}",
+            "description": "文档入口配置，可分别提供中文和英文文档链接。"
+        }
+    ]
+}

package/components/icon.json

@@ -436,7 +436,19 @@
         "加载旋转动画",
         "表格操作列图标"
     ],
+    "typeDefinitions": [
+        {
+            "name": "IconSize",
+            "definition": "type IconSize = number | string",
+            "description": "图标尺寸类型，可传预设值或自定义数字。"
+        },
+        {
+            "name": "IconColorPreset",
+            "definition": "type IconColorPreset = 'default' | 'primary' | 'danger' | 'warning' | 'success'",
+            "description": "图标预设颜色枚举。"
+        }
+    ],
     "relatedComponents": [
         "Button"
     ]
-}
+}

package/components/icontooltip.json

@@ -101,6 +101,17 @@
             "required": false,
             "default": "\"\"",
             "usageExample": "<IconTooltip icon=\"k-icon-refresh\" tooltipText=\"刷新\" />"
+        },
+        {
+            "name": "color",
+            "description": "自定义图标颜色，适用于普通图标和按钮图标",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<IconTooltip icon=\"k-icon-information\" color=\"#1890ff\" tooltipText=\"信息\" />"
         }
     ],
     "events": [],
@@ -222,9 +233,16 @@
         "信息提示图标",
         "设置入口"
     ],
+    "typeDefinitions": [
+        {
+            "name": "IconTooltipType",
+            "definition": "type IconTooltipType = 'default' | 'button'",
+            "description": "图标提示组件展示模式枚举，控制普通图标或按钮态样式。"
+        }
+    ],
     "relatedComponents": [
         "Icon",
         "Tooltip",
         "ButtonLink"
     ]
-}
+}