king-design-analyzer 2.1.7 → 2.2.0

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"
+    ]
+}

package/components/ipinput.json

@@ -0,0 +1,117 @@
+{
+    "id": "ipinput",
+    "name": "IPInput",
+    "displayName": "IP 输入框",
+    "category": "form",
+    "description": "面向 IPv4 地址录入的分段输入组件，适合网卡、白名单、后端服务地址等需要明确格式校验的网络场景。",
+    "importStatement": "import { IPInput } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "IP 地址值",
+            "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
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "完整 IP 地址变化时触发，可直接同步网络配置表单。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前输入的 IPv4 地址字符串。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "ipinput_backend",
+            "title": "后端服务 IP 地址录入",
+            "description": "用分段输入方式降低手写 IP 地址的出错概率。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { IPInput } from '@ksyun-internal/versatile';\n\nconst ip = ref('10.0.0.12');\n</script>\n\n<template>\n  <IPInput v-model=\"ip\" />\n</template>",
+            "tags": [
+                "network",
+                "ip"
+            ],
+            "usedProps": [
+                "modelValue"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在网络或服务发现配置中录入单个 IPv4 地址。"
+        },
+        {
+            "id": "ipinput_segment_tooltip",
+            "title": "为 IP 分段添加提示",
+            "description": "给分段输入框补充提示信息，帮助用户理解每段含义。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { IPInput } from '@ksyun-internal/versatile';\n\nconst ip = ref('172.16.0.10');\nconst tooltip = ['第一段', '第二段', '第三段', '第四段'];\n</script>\n\n<template>\n  <IPInput v-model=\"ip\" :tooltip=\"tooltip\" />\n</template>",
+            "tags": [
+                "network",
+                "tooltip"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tooltip"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在网络配置页中为 IP 输入提供更明确的填写提示。"
+        }
+    ],
+    "searchKeywords": [
+        "ip input",
+        "ipv4 input",
+        "IP 输入",
+        "ip 地址录入",
+        "网络地址输入"
+    ],
+    "useCases": [
+        "IPv4 地址录入",
+        "网络配置表单",
+        "分段 IP 输入提示"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "IPv4Value",
+            "definition": "type IPv4Value = string",
+            "description": "IPv4 地址字符串类型，例如 `192.168.1.10`。"
+        }
+    ],
+    "relatedComponents": [
+        "CidrInput"
+    ]
+}