king-design-analyzer 2.1.9 → 2.2.0

package/components/formiteminput.json

@@ -0,0 +1,214 @@
+{
+    "id": "formiteminput",
+    "name": "FormItemInput",
+    "displayName": "输入框表单项",
+    "category": "form",
+    "description": "带标题、必填、规则校验和辅助说明的输入框表单项，适合业务表单中承载实例名称、域名、备注等字段。",
+    "importStatement": "import { FormItemInput } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Input",
+            "include": [
+                "props"
+            ],
+            "exclude": [
+                "value",
+                "defaultValue",
+                "placeholder"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前输入值",
+            "type": {
+                "raw": "string | null",
+                "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": "placeholder",
+            "description": "输入框占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "tip",
+            "description": "输入框下方提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "warnTip",
+            "description": "警告提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "helper",
+            "description": "辅助说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "required",
+            "description": "是否必填",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "rules",
+            "description": "表单校验规则",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}"
+        },
+        {
+            "name": "info",
+            "description": "信息提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "输入框值实时变化时触发，适合双向绑定表单字段。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | null",
+                    "description": "当前输入框中的值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "输入值完成一次确认变更时触发，通常用于失焦校验或联动查询。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | null",
+                    "description": "本次确认后的输入值。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "formiteminput_name",
+            "title": "实例名称输入项",
+            "description": "结合 label、placeholder 和 tip 构造标准业务表单项。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemInput } from '@ksyun-internal/versatile';\n\nconst instanceName = ref('web-prod-01');\n</script>\n\n<template>\n  <FormItemInput\n    v-model=\"instanceName\"\n    label=\"实例名称\"\n    placeholder=\"请输入实例名称\"\n    tip=\"长度 2 到 63 个字符，支持字母、数字和中划线\"\n    :required=\"true\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "input"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "placeholder",
+                "tip",
+                "required"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在创建实例表单中录入资源名称。"
+        },
+        {
+            "id": "formiteminput_warning_tip",
+            "title": "带警告提示的输入项",
+            "description": "在输入可能影响线上流量的字段时补充警告说明。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemInput } from '@ksyun-internal/versatile';\n\nconst domain = ref('api.example.com');\n</script>\n\n<template>\n  <FormItemInput\n    v-model=\"domain\"\n    label=\"回源域名\"\n    warn-tip=\"修改后可能影响现网回源路径\"\n    info=\"请确保 DNS 已正确解析\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "warning"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "warnTip",
+                "info"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在高风险配置项旁直接展示风险和补充说明。"
+        }
+    ],
+    "searchKeywords": [
+        "form item input",
+        "business input",
+        "输入框表单项",
+        "表单输入",
+        "名称输入"
+    ],
+    "useCases": [
+        "常规文本输入",
+        "业务表单字段录入",
+        "高风险字段提示输入"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "FormItemInputValue",
+            "definition": "type FormItemInputValue = string | number",
+            "description": "业务输入表单项绑定值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Input",
+        "FormItemSpinner"
+    ]
+}

package/components/formitemspinner.json

@@ -0,0 +1,213 @@
+{
+    "id": "formitemspinner",
+    "name": "FormItemSpinner",
+    "displayName": "数字步进表单项",
+    "category": "form",
+    "description": "把数字步进器和表单项包装在一起的业务组件，适合 CPU 核数、带宽、节点数等带单位和范围限制的数值输入。",
+    "importStatement": "import { FormItemSpinner } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Spinner",
+            "include": [
+                "props"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前数值",
+            "type": {
+                "raw": "number | null",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "step",
+            "description": "步长",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "1"
+        },
+        {
+            "name": "min",
+            "description": "最小值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0"
+        },
+        {
+            "name": "max",
+            "description": "最大值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "Infinity"
+        },
+        {
+            "name": "precision",
+            "description": "保留小数位数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0"
+        },
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "required",
+            "description": "是否必填",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "rules",
+            "description": "表单校验规则",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}"
+        },
+        {
+            "name": "helper",
+            "description": "辅助说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "info",
+            "description": "信息提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "unit",
+            "description": "数值单位",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "数值变化时触发，可用于实时计算价格、配额或资源总量。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "number | null",
+                    "description": "当前数值输入结果。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "formitemspinner_bandwidth",
+            "title": "带宽数值表单项",
+            "description": "通过最小值、最大值和单位控制业务数值输入。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemSpinner } from '@ksyun-internal/versatile';\n\nconst bandwidth = ref(20);\n</script>\n\n<template>\n  <FormItemSpinner\n    v-model=\"bandwidth\"\n    label=\"带宽峰值\"\n    :min=\"1\"\n    :max=\"200\"\n    unit=\"Mbps\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "number"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "min",
+                "max",
+                "unit"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在购买页中配置带宽大小并联动价格。"
+        },
+        {
+            "id": "formitemspinner_precision",
+            "title": "带精度控制的数值输入",
+            "description": "使用 step 和 precision 录入带小数的资源规格。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FormItemSpinner } from '@ksyun-internal/versatile';\n\nconst bandwidth = ref(1.5);\n</script>\n\n<template>\n  <FormItemSpinner\n    v-model=\"bandwidth\"\n    label=\"弹性带宽\"\n    :step=\"0.5\"\n    :precision=\"1\"\n    unit=\"Gbps\"\n  />\n</template>",
+            "tags": [
+                "form",
+                "precision"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "step",
+                "precision",
+                "unit"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在高精度资源配置场景中输入支持小数的指标值。"
+        }
+    ],
+    "searchKeywords": [
+        "form item spinner",
+        "number input",
+        "数字步进",
+        "表单项",
+        "带单位输入"
+    ],
+    "useCases": [
+        "数量输入",
+        "规格和配额设置",
+        "带精度控制的数值输入"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "FormItemSpinnerValue",
+            "definition": "type FormItemSpinnerValue = number",
+            "description": "数字步进表单项绑定值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Spinner",
+        "FormItemInput",
+        "InstanceNum"
+    ]
+}

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