king-design-analyzer 2.1.7 → 2.2.0

package/components/checkbox.json

@@ -70,7 +70,10 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Checkbox name=\"agreement\"></Checkbox>"
+      "usageExample": "<Checkbox name=\"agreement\"></Checkbox>",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "required",
@@ -81,7 +84,10 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Checkbox required></Checkbox>"
+      "usageExample": "<Checkbox required></Checkbox>",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "form",
@@ -92,7 +98,10 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Checkbox form=\"myForm\"></Checkbox>"
+      "usageExample": "<Checkbox form=\"myForm\"></Checkbox>",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "autofocus",
@@ -103,7 +112,38 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Checkbox autofocus></Checkbox>"
+      "usageExample": "<Checkbox autofocus></Checkbox>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "autocomplete",
+      "description": "原生 autocomplete 属性，指定浏览器自动补全行为",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Checkbox autocomplete=\"off\"></Checkbox>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "maxlength",
+      "description": "原生 maxlength 属性，组件透传到内部 input 元素",
+      "type": {
+        "raw": "number | string",
+        "kind": "union"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Checkbox :maxlength=\"1\"></Checkbox>",
+      "tags": [
+        "native"
+      ]
     }
   ],
   "events": [
@@ -291,6 +331,13 @@
     "批量选择",
     "权限勾选"
   ],
+  "typeDefinitions": [
+    {
+      "name": "CheckboxValue",
+      "definition": "type CheckboxValue = boolean | string | number",
+      "description": "复选框绑定值类型，可使用布尔值或自定义 trueValue / falseValue。"
+    }
+  ],
   "relatedComponents": [
     "Radio",
     "Switch"

package/components/cidrinput.json

@@ -0,0 +1,140 @@
+{
+    "id": "cidrinput",
+    "name": "CidrInput",
+    "displayName": "CIDR 输入框",
+    "category": "form",
+    "description": "用于录入网段 CIDR 的业务输入组件，把 IP 地址与掩码选择组合在一起，常用于 VPC、子网和安全策略配置。",
+    "importStatement": "import { CidrInput } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "CIDR 值，如 192.168.0.0/24",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "vpcCidr",
+            "description": "所属 VPC 的 CIDR，用于约束和提示",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "禁用状态或禁用分段配置",
+            "type": {
+                "raw": "boolean | any[]",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "tooltip",
+            "description": "各分段 tooltip 配置",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "maskRange",
+            "description": "可选掩码范围",
+            "type": {
+                "raw": "number[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[0, 32]"
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "CIDR 字符串变化时触发，可直接同步到网络配置表单。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前输入的 CIDR 字符串。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "cidrinput_subnet",
+            "title": "子网网段录入",
+            "description": "限制掩码范围，并结合 VPC 网段给出约束。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { CidrInput } from '@ksyun-internal/versatile';\n\nconst cidr = ref('192.168.1.0/24');\n</script>\n\n<template>\n  <CidrInput\n    v-model=\"cidr\"\n    vpc-cidr=\"192.168.0.0/16\"\n    :mask-range=\"[16, 28]\"\n  />\n</template>",
+            "tags": [
+                "network",
+                "cidr"
+            ],
+            "usedProps": [
+                "modelValue",
+                "vpcCidr",
+                "maskRange"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "创建子网时录入并校验目标网段。"
+        },
+        {
+            "id": "cidrinput_with_tooltips",
+            "title": "为分段输入补充提示",
+            "description": "给 CIDR 各段提供 tooltip，帮助用户理解输入规则。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { CidrInput } from '@ksyun-internal/versatile';\n\nconst cidr = ref('10.0.0.0/24');\nconst tooltip = ['网络段', '子网段', '主机段', '预留', '掩码长度'];\n</script>\n\n<template>\n  <CidrInput v-model=\"cidr\" :tooltip=\"tooltip\" :mask-range=\"[24, 28]\" />\n</template>",
+            "tags": [
+                "network",
+                "tooltip"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tooltip",
+                "maskRange"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在网络配置页中用提示文案降低 CIDR 输入门槛。"
+        }
+    ],
+    "searchKeywords": [
+        "cidr",
+        "cidr input",
+        "网段输入",
+        "子网配置",
+        "network cidr",
+        "掩码选择"
+    ],
+    "useCases": [
+        "网络配置",
+        "子网和路由录入",
+        "CIDR 分段输入与校验"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CidrValue",
+            "definition": "type CidrValue = string",
+            "description": "CIDR 字符串类型，例如 `192.168.0.0/24`。"
+        }
+    ],
+    "relatedComponents": [
+        "IPInput"
+    ]
+}

package/components/code.json

@@ -314,5 +314,12 @@
         "配置文件编辑",
         "JSON 编辑器"
     ],
+    "typeDefinitions": [
+        {
+            "name": "CodeLanguage",
+            "definition": "type CodeLanguage = string",
+            "description": "代码编辑器语言标识，通常使用 javascript、typescript、json 等 Monaco 语言名。"
+        }
+    ],
     "relatedComponents": []
-}
+}

package/components/collapse.json

@@ -350,6 +350,13 @@
     "侧边栏菜单",
     "配置项分类"
   ],
+  "typeDefinitions": [
+    {
+      "name": "CollapseArrow",
+      "definition": "type CollapseArrow = 'left' | 'right'",
+      "description": "折叠面板箭头方向枚举，控制箭头在标题左侧还是右侧。"
+    }
+  ],
   "relatedComponents": [
     "CollapseItem",
     "Card",

package/components/colorpicker.json

@@ -0,0 +1,217 @@
+{
+    "id": "colorpicker",
+    "name": "Colorpicker",
+    "displayName": "颜色选择器",
+    "category": "form",
+    "description": "颜色选择器组件，用于选择纯色或带透明度的颜色值。点击触发器后会弹出调色面板，支持预设颜色、自定义弹出容器和弹层定位。",
+    "importStatement": "import { Colorpicker } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前颜色值，必填。支持十六进制颜色或 rgba 字符串，可用 v-model 双向绑定。",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": true,
+            "usageExample": "<Colorpicker v-model=\"color\" />"
+        },
+        {
+            "name": "presets",
+            "description": "预设颜色列表，展示在面板底部，便于快速选择常用颜色。",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[\"#D0021B\", \"#F5A623\", \"#F8E71C\", \"#8B572A\", \"#7ED321\", \"#417505\", \"#BD10E0\", \"#9013FE\", \"#4A90E2\", \"#50E3C2\", \"#B8E986\", \"#000000\", \"#4A4A4A\", \"#9B9B9B\", \"#FFFFFF\"]",
+            "usageExample": "<Colorpicker v-model=\"color\" :presets=\"['#1677ff', '#52c41a', '#faad14']\" />"
+        },
+        {
+            "name": "size",
+            "description": "尺寸。",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Colorpicker v-model=\"color\" size=\"small\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用，禁用后无法打开面板和修改颜色。",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Colorpicker v-model=\"color\" disabled />"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出层挂载位置。通常在 Dialog、Drawer 等容器中需要显式指定，避免层级或定位异常。",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Colorpicker v-model=\"color\" :container=\"() => document.body\" />"
+        },
+        {
+            "name": "show",
+            "description": "是否展示颜色面板，可用于受控显示。",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Colorpicker v-model=\"color\" :show=\"visible\" />"
+        },
+        {
+            "name": "position",
+            "description": "下拉面板定位配置，继承 Dropdown 的 position 能力。",
+            "type": {
+                "raw": "DropdownProps['position']",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{ collision: 'fit' }",
+            "usageExample": "<Colorpicker v-model=\"color\" :position=\"{ placement: 'bottom-start', collision: 'fit' }\" />"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "colorpicker_basic",
+            "title": "基础用法",
+            "description": "选择主题色并实时预览。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Colorpicker } from '@king-design/vue';\n\nconst color = ref('#1677ff');\n</script>\n<template>\n  <div style=\"display: flex; align-items: center; gap: 12px;\">\n    <Colorpicker v-model=\"color\" />\n    <span>当前颜色：{{ color }}</span>\n  </div>\n</template>",
+            "tags": [
+                "basic",
+                "v-model"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择品牌主色或主题色"
+        },
+        {
+            "id": "colorpicker_presets",
+            "title": "预设颜色",
+            "description": "通过 presets 提供常用颜色快捷选择。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Colorpicker } from '@king-design/vue';\n\nconst color = ref('#52c41a');\nconst presets = ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'];\n</script>\n<template>\n  <Colorpicker v-model=\"color\" :presets=\"presets\" />\n</template>",
+            "tags": [
+                "preset",
+                "theme"
+            ],
+            "usedProps": [
+                "value",
+                "presets"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "为运营后台提供固定品牌色"
+        },
+        {
+            "id": "colorpicker_in_dialog",
+            "title": "弹窗内使用",
+            "description": "在弹窗中显式指定挂载容器，避免弹层错位。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, Colorpicker, Dialog } from '@king-design/vue';\n\nconst visible = ref(false);\nconst color = ref('rgba(22, 119, 255, 0.8)');\n</script>\n<template>\n  <Button @click=\"visible = true\">编辑颜色</Button>\n  <Dialog v-model=\"visible\" title=\"颜色设置\">\n    <Colorpicker v-model=\"color\" :container=\"() => document.body\" />\n  </Dialog>\n</template>",
+            "tags": [
+                "dialog",
+                "container"
+            ],
+            "usedProps": [
+                "value",
+                "container"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在弹窗中配置颜色字段"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "colorpicker_missing_value",
+            "description": "未传入有效颜色字符串",
+            "wrongCode": "<Colorpicker :value=\"undefined\" />",
+            "correctCode": "<Colorpicker v-model=\"color\" />",
+            "explanation": "Colorpicker 的 value 是必填项，应提供合法的颜色字符串并通过 v-model 维护状态。",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "colorpicker_no_container_in_popup",
+            "description": "在弹层容器内使用时未指定 container",
+            "wrongCode": "<Dialog v-model=\"visible\"><Colorpicker v-model=\"color\" /></Dialog>",
+            "correctCode": "<Dialog v-model=\"visible\"><Colorpicker v-model=\"color\" :container=\"() => document.body\" /></Dialog>",
+            "explanation": "Colorpicker 内部会渲染下拉面板，在 Dialog、Drawer 等场景中建议显式设置挂载容器，避免遮挡和定位问题。",
+            "relatedProps": [
+                "container"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "colorpicker",
+        "颜色选择器",
+        "颜色",
+        "主题色",
+        "rgba",
+        "hex",
+        "预设颜色"
+    ],
+    "useCases": [
+        "主题颜色配置",
+        "图表颜色设置",
+        "标签颜色自定义",
+        "运营后台品牌色选择"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ColorValue",
+            "definition": "type ColorValue = string",
+            "description": "颜色值类型，通常支持 hex、rgb(a) 等字符串格式。"
+        }
+    ],
+    "relatedComponents": [
+        "Input",
+        "Dropdown",
+        "Dialog"
+    ]
+}

package/components/copy.json

@@ -212,6 +212,13 @@
     "复制收货地址",
     "一键复制命令"
   ],
+  "typeDefinitions": [
+    {
+      "name": "CopyText",
+      "definition": "type CopyText = string",
+      "description": "待复制内容的文本类型。"
+    }
+  ],
   "relatedComponents": [
     "Button",
     "Icon",

package/components/copyhover.json

@@ -0,0 +1,111 @@
+{
+    "id": "copyhover",
+    "name": "CopyHover",
+    "displayName": "悬浮复制",
+    "category": "feedback",
+    "description": "在文本悬停时才露出复制图标的轻量组件，适合详情字段、表格单元格等需要降低视觉噪音的复制场景。",
+    "importStatement": "import { CopyHover } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Copy",
+            "include": [
+                "props"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "text",
+            "description": "待复制文本",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "tooltipText",
+            "description": "复制按钮提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用复制",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "copyhover_instance_id",
+            "title": "详情字段悬浮复制",
+            "description": "只在悬停时显示复制图标，适合长 ID、Token 等字段。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { CopyHover } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyHover text=\"i-2ze7x5a4a92b\" tooltip-text=\"复制实例 ID\" />\n</template>",
+            "tags": [
+                "copy",
+                "hover"
+            ],
+            "usedProps": [
+                "text",
+                "tooltipText"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页展示实例 ID，同时保持界面简洁。"
+        },
+        {
+            "id": "copyhover_disabled_secret",
+            "title": "敏感字段禁止复制",
+            "description": "对脱敏后的内容保留展示但关闭复制。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { CopyHover } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyHover text=\"sk-******\" tooltip-text=\"敏感信息不可复制\" :disabled=\"true\" />\n</template>",
+            "tags": [
+                "copy",
+                "security"
+            ],
+            "usedProps": [
+                "text",
+                "tooltipText",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在脱敏展示 SecretKey 等敏感内容时显式禁用复制。"
+        }
+    ],
+    "searchKeywords": [
+        "copy hover",
+        "hover copy",
+        "复制悬浮",
+        "悬停复制",
+        "轻量复制按钮"
+    ],
+    "useCases": [
+        "详情字段快速复制",
+        "列表项悬浮复制",
+        "敏感信息禁用复制"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CopyHoverText",
+            "definition": "type CopyHoverText = string",
+            "description": "悬浮复制组件展示和复制的文本内容类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Copy",
+        "CopyRow"
+    ]
+}