king-design-analyzer 2.1.9 → 2.2.1

package/components/form.json

@@ -89,6 +89,137 @@
         }
       ],
       "usageExample": "<Form size=\"small\"></Form>"
+    },
+    {
+      "name": "acceptcharset",
+      "description": "原生 acceptcharset 属性，指定服务器可处理的字符编码",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form acceptcharset=\"UTF-8\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "autocomplete",
+      "description": "原生 autocomplete 属性，指定表单自动补全行为",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form autocomplete=\"off\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "name",
+      "description": "原生 name 属性",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form name=\"loginForm\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "rel",
+      "description": "原生 rel 属性，指定表单与目标资源的关系",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form rel=\"external\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "action",
+      "description": "原生 action 属性，指定表单提交地址",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form action=\"/api/submit\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "enctype",
+      "description": "原生 enctype 属性，指定表单提交编码类型",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form enctype=\"multipart/form-data\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "method",
+      "description": "原生 method 属性，指定表单提交方法",
+      "type": {
+        "raw": "\"post\" | \"get\" | \"dialog\"",
+        "kind": "union",
+        "unionTypes": [
+          "post",
+          "get",
+          "dialog"
+        ]
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form method=\"post\"></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "novalidate",
+      "description": "原生 novalidate 属性，提交时跳过原生表单校验",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form novalidate></Form>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "target",
+      "description": "原生 target 属性，指定表单响应的打开位置",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Form target=\"_blank\"></Form>",
+      "tags": [
+        "native"
+      ]
     }
   ],
   "events": [
@@ -365,15 +496,24 @@
       "slots": [
         {
           "name": "label",
-          "description": "扩展前面的标题label"
+          "description": "扩展前面的标题label",
+          "bindingType": "none",
+          "vueTemplate": "#label",
+          "usageExample": "<FormItem>\n  <template #label>\n    用户名\n  </template>\n  <Input />\n</FormItem>"
         },
         {
           "name": "content",
-          "description": "扩展后面的内容，也可以使用children代替"
+          "description": "扩展后面的内容，也可以使用children代替",
+          "bindingType": "none",
+          "vueTemplate": "#content",
+          "usageExample": "<FormItem label=\"用户名\">\n  <template #content>\n    <Input />\n  </template>\n</FormItem>"
         },
         {
           "name": "append",
-          "description": "往后面追加的内容"
+          "description": "往后面追加的内容",
+          "bindingType": "none",
+          "vueTemplate": "#append",
+          "usageExample": "<FormItem label=\"验证码\">\n  <Input />\n  <template #append>\n    <Button type=\"primary\">发送验证码</Button>\n  </template>\n</FormItem>"
         }
       ]
     }

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