king-design-analyzer 2.1.9 → 2.2.1

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

package/components/kspstatus.json

@@ -0,0 +1,205 @@
+{
+    "id": "kspstatus",
+    "name": "KspStatus",
+    "displayName": "业务状态标识",
+    "category": "feedback",
+    "description": "根据业务状态值自动映射文案、颜色和加载态的状态展示组件，适合实例生命周期、任务状态和工单状态等复杂业务场景。",
+    "importStatement": "import { KspStatus } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "status",
+            "description": "业务状态值，可为字符串或数字",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "progress",
+            "description": "进度值，用于进度型状态展示",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "success",
+            "description": "会被视为成功态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "danger",
+            "description": "会被视为失败态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "会被视为禁用态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "warning",
+            "description": "会被视为警告态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "loading",
+            "description": "会被视为加载态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "progressbar",
+            "description": "会被视为进度条态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "maps",
+            "description": "自定义状态映射表",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "tip",
+            "description": "状态说明 tooltip 文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "position",
+            "description": "tooltip 或刷新按钮的弹出位置",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        },
+        {
+            "name": "refreshTip",
+            "description": "刷新按钮提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "refresh",
+            "description": "点击刷新时执行的异步函数",
+            "type": {
+                "raw": "() => Promise<void>",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "text",
+            "description": "自定义展示文案，优先级高于状态映射",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "kspstatus_instance_status",
+            "title": "实例生命周期状态展示",
+            "description": "通过 maps 配置把业务状态码映射成统一的状态展示。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { KspStatus } from '@ksyun-internal/versatile';\n\nconst maps = {\n  creating: { text: '创建中', loading: true },\n  running: { text: '运行中', success: true },\n  stopped: { text: '已停止', disabled: true },\n};\n</script>\n\n<template>\n  <KspStatus status=\"creating\" :maps=\"maps\" refresh-tip=\"状态每 10 秒刷新一次\" />\n</template>",
+            "tags": [
+                "status",
+                "business"
+            ],
+            "usedProps": [
+                "status",
+                "maps",
+                "refreshTip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在列表或详情页中按统一规则展示业务状态。"
+        },
+        {
+            "id": "kspstatus_progress_mode",
+            "title": "展示带进度的业务状态",
+            "description": "通过 progress 和 refresh 提示渲染任务执行中的状态。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { KspStatus } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <KspStatus\n    status=\"migrating\"\n    text=\"迁移中\"\n    :progress=\"68\"\n    :refresh=\"true\"\n    refresh-tip=\"状态会自动刷新\"\n    tip=\"预计 2 分钟后完成\"\n  />\n</template>",
+            "tags": [
+                "status",
+                "progress"
+            ],
+            "usedProps": [
+                "status",
+                "text",
+                "progress",
+                "refresh",
+                "refreshTip",
+                "tip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在迁移、备份等长任务场景中展示进度化状态。"
+        }
+    ],
+    "searchKeywords": [
+        "ksp status",
+        "business status",
+        "业务状态",
+        "状态码映射",
+        "progress status",
+        "任务状态"
+    ],
+    "useCases": [
+        "资源状态展示",
+        "任务进度与异常态展示",
+        "带进度的迁移或备份状态"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "KspStatusValue",
+            "definition": "type KspStatusValue = string | number",
+            "description": "业务状态标识类型，可使用状态码或状态字符串驱动展示。"
+        }
+    ],
+    "relatedComponents": [
+        "Status"
+    ]
+}

package/components/kvcode.json

@@ -0,0 +1,120 @@
+{
+    "id": "kvcode",
+    "name": "KvCode",
+    "displayName": "键值代码输入",
+    "category": "form",
+    "description": "用于录入脚本、配置片段或键值代码内容的表单组件，适合高级参数、启动脚本和策略文本等输入场景。",
+    "importStatement": "import { KvCode } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "modelValue",
+            "description": "代码内容",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "required",
+            "description": "是否必填",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "代码或文本片段内容变化时触发，适合与父级表单实时同步。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前编辑器中的代码或文本内容。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "kvcode_startup_script",
+            "title": "启动脚本输入",
+            "description": "在创建任务或实例时录入一段配置脚本。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KvCode } from '@ksyun-internal/versatile';\n\nconst script = ref('export NODE_ENV=production');\n</script>\n\n<template>\n  <KvCode v-model=\"script\" label=\"启动脚本\" :required=\"true\" />\n</template>",
+            "tags": [
+                "code",
+                "script"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "required"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "录入任务脚本、环境变量模板或高级参数文本。"
+        },
+        {
+            "id": "kvcode_policy_text",
+            "title": "录入策略 JSON 文本",
+            "description": "在权限或策略场景中填写结构化文本配置。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KvCode } from '@ksyun-internal/versatile';\n\nconst policy = ref('{\"Version\":\"1.0\",\"Statement\":[]}');\n</script>\n\n<template>\n  <KvCode v-model=\"policy\" label=\"访问策略\" />\n</template>",
+            "tags": [
+                "code",
+                "policy"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在策略配置页中录入 JSON 结构化文本。"
+        }
+    ],
+    "searchKeywords": [
+        "kv code",
+        "code input",
+        "代码输入",
+        "脚本录入",
+        "策略文本"
+    ],
+    "useCases": [
+        "脚本配置输入",
+        "高级参数录入",
+        "JSON 策略文本填写"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "KVCodeValue",
+            "definition": "type KVCodeValue = string",
+            "description": "代码或结构化文本输入值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Code",
+        "FormItemInput"
+    ]
+}

package/components/layoutcontent.json

@@ -141,54 +141,63 @@
         {
             "name": "default",
             "description": "扩展主体内容",
+            "bindingType": "none",
             "vueTemplate": "<LayoutContent>Content</LayoutContent>",
             "usageExample": "<LayoutContent>...</LayoutContent>"
         },
         {
             "name": "headerTitle",
             "description": "扩展顶部栏左侧标题处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #headerTitle>...</template>",
             "usageExample": "<LayoutContent><template #headerTitle>自定义标题</template></LayoutContent>"
         },
         {
             "name": "headerTitleAppend",
             "description": "扩展顶部栏左侧标题后面追加内容",
+            "bindingType": "none",
             "vueTemplate": "<template #headerTitleAppend>...</template>",
             "usageExample": "<LayoutContent><template #headerTitleAppend><Tag>标签</Tag></template></LayoutContent>"
         },
         {
             "name": "headerDocPrepend",
             "description": "扩展顶部栏右侧文档前面追加内容",
+            "bindingType": "none",
             "vueTemplate": "<template #headerDocPrepend>...</template>",
             "usageExample": "<LayoutContent><template #headerDocPrepend><Button>操作</Button></template></LayoutContent>"
         },
         {
             "name": "headerDoc",
             "description": "扩展顶部栏右侧文档处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #headerDoc>...</template>",
             "usageExample": "<LayoutContent><template #headerDoc><Link>文档链接</Link></template></LayoutContent>"
         },
         {
             "name": "tab",
             "description": "扩展选项卡处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #tab>...</template>",
             "usageExample": "<LayoutContent><template #tab><Tabs>...</Tabs></template></LayoutContent>"
         },
         {
             "name": "footerLeft",
             "description": "扩展底部栏左侧处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #footerLeft>...</template>",
             "usageExample": "<LayoutContent><template #footerLeft><span>提示信息</span></template></LayoutContent>"
         },
         {
             "name": "footerRight",
             "description": "扩展底部栏右侧处内容",
+            "bindingType": "none",
             "vueTemplate": "<template #footerRight>...</template>",
             "usageExample": "<LayoutContent><template #footerRight><Button>提交</Button></template></LayoutContent>"
         },
         {
             "name": "footer",
             "description": "扩展底部栏处的整体内容，底部栏没有左右之分的时候可使用此扩展",
+            "bindingType": "none",
             "vueTemplate": "<template #footer>...</template>",
             "usageExample": "<LayoutContent><template #footer><Button>保存</Button><Button>取消</Button></template></LayoutContent>"
         }
@@ -200,11 +209,23 @@
         "layout",
         "content",
         "page",
-        "布局"
+        "布局",
+        "详情布局",
+        "页面骨架",
+        "内容页容器"
     ],
     "useCases": [
         "详情页",
         "列表页",
-        "表单页"
+        "表单页",
+        "购买链路页面",
+        "带顶部栏和底部栏的业务内容页"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "BreadcrumbItem",
+            "definition": "type BreadcrumbItem = {\\n  to: string\\n  label: string\\n}",
+            "description": "LayoutContent 与 Header 共用的面包屑节点结构。"
+        }
     ]
-}
+}