king-design-analyzer 2.1.9 → 2.2.1

package/components/input.json

@@ -79,7 +79,10 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Input name=\"username\" />"
+      "usageExample": "<Input name=\"username\" />",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "placeholder",
@@ -90,7 +93,10 @@
       },
       "required": false,
       "default": "undefined",
-      "usageExample": "<Input placeholder=\"请输入内容\" />"
+      "usageExample": "<Input placeholder=\"请输入内容\" />",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "readonly",
@@ -101,7 +107,94 @@
       },
       "required": false,
       "default": "false",
-      "usageExample": "<Input v-model=\"value\" readonly />"
+      "usageExample": "<Input v-model=\"value\" readonly />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "autocomplete",
+      "description": "原生 autocomplete 属性，指定浏览器自动补全行为",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input autocomplete=\"username\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "autofocus",
+      "description": "原生 autofocus 属性，页面加载后自动聚焦输入框",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input autofocus />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "form",
+      "description": "原生 form 属性，指定输入框关联的表单 id",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input form=\"searchForm\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "maxlength",
+      "description": "原生 maxlength 属性，限制最大输入长度",
+      "type": {
+        "raw": "number | string",
+        "kind": "union"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input :maxlength=\"50\" showCount />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "pattern",
+      "description": "原生 pattern 属性，指定输入值需要匹配的正则模式",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input pattern=\"[0-9]{6}\" placeholder=\"请输入6位数字\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "required",
+      "description": "原生 required 属性，标记为必填输入项",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input required placeholder=\"必填项\" />",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "clearable",
@@ -170,7 +263,70 @@
       },
       "required": false,
       "default": "2",
-      "usageExample": "<Input type=\"textarea\" :rows=\"6\" />"
+      "usageExample": "<Input type=\"textarea\" :rows=\"6\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "cols",
+      "description": "原生 cols 属性，当 type=\"textarea\" 时指定可见宽度",
+      "type": {
+        "raw": "number",
+        "kind": "number"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input type=\"textarea\" :cols=\"40\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "datalist",
+      "description": "原生 datalist 属性，关联 datalist 元素 id",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input datalist=\"city-list\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "dirname",
+      "description": "原生 dirname 属性，提交时附带输入方向信息",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input dirname=\"comment.dir\" />",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "wrap",
+      "description": "原生 wrap 属性，当 type=\"textarea\" 时指定换行提交方式",
+      "type": {
+        "raw": "\"hard\" | \"soft\"",
+        "kind": "union",
+        "unionTypes": [
+          "hard",
+          "soft"
+        ]
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Input type=\"textarea\" wrap=\"hard\" />",
+      "tags": [
+        "native"
+      ]
     },
     {
       "name": "autoWidth",
@@ -238,6 +394,17 @@
       "default": "false",
       "usageExample": "<Input inline />"
     },
+    {
+      "name": "waveDisabled",
+      "description": "是否禁用点击波纹效果",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Input waveDisabled />"
+    },
     {
       "name": "resize",
       "description": "指定 textarea 输入框拖动调整大小的方向，默认只能垂直方向调整",
@@ -312,24 +479,28 @@
     {
       "name": "prepend",
       "description": "输入框前置内容，展示在输入框外部左侧",
+      "bindingType": "none",
       "vueTemplate": "#prepend",
       "usageExample": "<Input v-model=\"url\">\n  <template #prepend>http://</template>\n</Input>"
     },
     {
       "name": "append",
       "description": "输入框后置内容，展示在输入框外部右侧",
+      "bindingType": "none",
       "vueTemplate": "#append",
       "usageExample": "<Input v-model=\"email\">\n  <template #append>.com</template>\n</Input>"
     },
     {
       "name": "prefix",
       "description": "输入框前缀图标或内容，展示在输入框内部左侧",
+      "bindingType": "none",
       "vueTemplate": "#prefix",
       "usageExample": "<Input v-model=\"user\">\n  <template #prefix><Icon class=\"k-icon-user\" /></template>\n</Input>"
     },
     {
       "name": "suffix",
       "description": "输入框后缀图标或内容，展示在输入框内部右侧",
+      "bindingType": "none",
       "vueTemplate": "#suffix",
       "usageExample": "<Input v-model=\"search\">\n  <template #suffix><Icon class=\"k-icon-search\" /></template>\n</Input>"
     }
@@ -578,8 +749,8 @@
               "description": "当前搜索关键字"
             }
           ],
-          "usageExample": "<Search @submit=\"handleSearch\" />",
-          "handlerExample": "const handleSearch = (keywords: string) => {\n  console.log('搜索关键字:', keywords);\n};"
+          "usageExample": "<Search @submit=\"handleKeywordSearch\" />",
+          "handlerExample": "const searchHistory = ref<string[]>([]);\n\nconst handleKeywordSearch = (keywords: string) => {\n  const normalized = keywords.trim();\n  if (!normalized) return;\n  searchHistory.value = [normalized, ...searchHistory.value.filter((item) => item !== normalized)].slice(0, 5);\n};"
         }
       ],
       "methods": [
@@ -588,14 +759,14 @@
           "description": "使搜索框获得焦点",
           "params": [],
           "returnType": "void",
-          "usageExample": "const searchRef = ref<InstanceType<typeof Search>>();\nsearchRef.value?.focus();"
+          "usageExample": "const searchRef = ref<InstanceType<typeof Search>>();\n\nconst openSearchBar = () => {\n  searchRef.value?.focus();\n};"
         },
         {
           "name": "blur",
           "description": "使搜索框失去焦点",
           "params": [],
           "returnType": "void",
-          "usageExample": "searchRef.value?.blur();"
+          "usageExample": "const closeSearchBar = () => {\n  searchRef.value?.blur();\n};"
         }
       ]
     }
@@ -813,6 +984,23 @@
     "数字/金额输入",
     "带前后缀的复合输入框"
   ],
+  "typeDefinitions": [
+    {
+      "name": "InputType",
+      "definition": "type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'textarea'",
+      "description": "输入框类型定义，除原生 input 类型外还扩展了 textarea。"
+    },
+    {
+      "name": "InputSize",
+      "definition": "type InputSize = 'large' | 'default' | 'small' | 'mini'",
+      "description": "输入框尺寸枚举，用于控制组件高度和内边距。"
+    },
+    {
+      "name": "TextareaResize",
+      "definition": "type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical'",
+      "description": "文本域 resize 方向配置，仅在 type=\"textarea\" 时生效。"
+    }
+  ],
   "relatedComponents": [
     "Search",
     "Form",

package/components/instancelist.json

@@ -0,0 +1,194 @@
+{
+    "id": "instancelist",
+    "name": "InstanceList",
+    "displayName": "实例列表选择",
+    "category": "form",
+    "description": "用于从实例候选列表中选择目标实例的表单组件，可同步返回实例值和实例实体，适合迁移、备份、挂载等场景。",
+    "importStatement": "import { InstanceList } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前选中的实例 ID",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "list",
+            "description": "可选实例列表",
+            "type": {
+                "raw": "Record<string, any>[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "listKeyName",
+            "description": "列表项中作为 value 的字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"key\""
+        },
+        {
+            "name": "listLabelName",
+            "description": "列表项中作为 label 的字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"label\""
+        },
+        {
+            "name": "fluid",
+            "description": "是否启用流式宽度",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "existedList",
+            "description": "已存在实例列表，用于唯一性校验",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "checkInstanceUniqueTip",
+            "description": "实例重复时的提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"实例不可重复\""
+        },
+        {
+            "name": "container",
+            "description": "下拉面板挂载容器",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "width",
+            "description": "控件宽度",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "选中的实例标识变化时触发，通常用于同步实例 ID 或名称。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前选中的实例标识。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:instance",
+            "vueEventName": "@update:instance",
+            "description": "当前选中的完整实例对象变化时触发，便于读取规格、状态等附加字段。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "InstanceOption",
+                    "description": "当前选中的完整实例对象。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "instancelist_target",
+            "title": "选择目标实例",
+            "description": "从候选实例列表中选取一个实例并同步实例实体。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { InstanceList } from '@ksyun-internal/versatile';\n\nconst selected = ref('i-001');\nconst list = [\n  { id: 'i-001', name: 'web-prod-01' },\n  { id: 'i-002', name: 'web-prod-02' },\n];\n</script>\n\n<template>\n  <InstanceList\n    v-model=\"selected\"\n    :list=\"list\"\n    list-key-name=\"id\"\n    list-label-name=\"name\"\n  />\n</template>",
+            "tags": [
+                "instance",
+                "select"
+            ],
+            "usedProps": [
+                "modelValue",
+                "list",
+                "listKeyName",
+                "listLabelName"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "update:instance"
+            ],
+            "usedMethods": [],
+            "scenario": "在克隆、挂载或迁移流程中选择目标实例。"
+        },
+        {
+            "id": "instancelist_update_entity",
+            "title": "联动实例实体信息",
+            "description": "监听 update:instance 获取当前实例的完整信息。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { InstanceList } from '@ksyun-internal/versatile';\n\nconst selected = ref('i-001');\nconst currentZone = ref('');\nconst list = [\n  { id: 'i-001', name: 'web-prod-01', zone: 'cn-beijing-6a' },\n  { id: 'i-002', name: 'web-prod-02', zone: 'cn-beijing-6b' },\n];\nconst handleInstance = (instance: { zone?: string }) => {\n  currentZone.value = instance?.zone || '';\n};\n</script>\n\n<template>\n  <InstanceList\n    v-model=\"selected\"\n    :list=\"list\"\n    list-key-name=\"id\"\n    list-label-name=\"name\"\n    @update:instance=\"handleInstance\"\n  />\n  <div>所在可用区：{{ currentZone }}</div>\n</template>",
+            "tags": [
+                "instance",
+                "entity"
+            ],
+            "usedProps": [
+                "modelValue",
+                "list",
+                "listKeyName",
+                "listLabelName"
+            ],
+            "usedEvents": [
+                "update:instance"
+            ],
+            "usedMethods": [],
+            "scenario": "在选择实例后同步展示其可用区、规格等附加信息。"
+        }
+    ],
+    "searchKeywords": [
+        "instance list",
+        "instance selector",
+        "实例选择",
+        "目标实例",
+        "资源实例下拉"
+    ],
+    "useCases": [
+        "从候选实例中选择目标实例",
+        "迁移或挂载时选择实例",
+        "选择后联动实例实体信息"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "InstanceOption",
+            "definition": "interface InstanceOption { id?: string | number; name?: string; [key: string]: unknown }",
+            "description": "实例候选项类型，至少包含实例标识或实例名称，并允许扩展规格、地域等附加字段。"
+        }
+    ],
+    "relatedComponents": [
+        "FormItemTableConfigs",
+        "Select"
+    ]
+}

package/components/instancenum.json

@@ -0,0 +1,196 @@
+{
+    "id": "instancenum",
+    "name": "InstanceNum",
+    "displayName": "实例数量",
+    "category": "form",
+    "description": "围绕实例数量录入封装的业务组件，补充了范围控制、禁用提示和补丁数联动，适合节点数量、实例副本数等场景。",
+    "importStatement": "import { InstanceNum } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "实例数量",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "max",
+            "description": "允许的最大数量",
+            "type": {
+                "raw": "number | null",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "min",
+            "description": "允许的最小数量",
+            "type": {
+                "raw": "number | null",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "required",
+            "description": "是否必填",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "rules",
+            "description": "表单校验规则",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}"
+        },
+        {
+            "name": "width",
+            "description": "输入控件宽度",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用输入",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "disabledTooltip",
+            "description": "禁用时是否显示 tooltip",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "tooltipContent",
+            "description": "禁用提示内容",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "patchcount",
+            "description": "补丁数量或步进修正值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "实例数量变化时触发，可用于联动库存、价格和配额校验。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "number",
+                    "description": "当前实例数量或副本数。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "instancenum_cluster",
+            "title": "集群节点数量选择",
+            "description": "限制节点数量范围，并在禁用时给出原因说明。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { InstanceNum } from '@ksyun-internal/versatile';\n\nconst count = ref(3);\n</script>\n\n<template>\n  <InstanceNum\n    v-model=\"count\"\n    label=\"节点数量\"\n    :min=\"1\"\n    :max=\"10\"\n    tooltip-content=\"超出规格上限时需要升级套餐\"\n  />\n</template>",
+            "tags": [
+                "instance",
+                "number"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "min",
+                "max",
+                "tooltipContent"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在集群或弹性扩缩容场景中控制实例数量。"
+        },
+        {
+            "id": "instancenum_disabled_reason",
+            "title": "禁用状态下展示原因",
+            "description": "当规格不满足条件时暂时禁用数量调整，并给出解释。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { InstanceNum } from '@ksyun-internal/versatile';\n\nconst count = ref(1);\n</script>\n\n<template>\n  <InstanceNum\n    v-model=\"count\"\n    label=\"实例数量\"\n    :disabled=\"true\"\n    disabled-tooltip=\"当前套餐仅支持单实例部署\"\n  />\n</template>",
+            "tags": [
+                "instance",
+                "disabled"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "disabled",
+                "disabledTooltip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在受限套餐下明确告知用户为什么不能修改数量。"
+        }
+    ],
+    "searchKeywords": [
+        "instance num",
+        "instance count",
+        "实例数量",
+        "节点数量",
+        "副本数输入"
+    ],
+    "useCases": [
+        "启停开关",
+        "集群节点数量配置",
+        "受限规格下展示禁用原因"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "InstanceNumValue",
+            "definition": "type InstanceNumValue = number",
+            "description": "实例数量或节点副本数的数值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "FormItemSpinner",
+        "FormItemTableConfigs"
+    ]
+}