king-design-analyzer 2.1.9 → 2.2.0

package/components/button.json

@@ -184,6 +184,17 @@
       ],
       "usageExample": "<Button htmlType=\"submit\">提交表单</Button>"
     },
+    {
+      "name": "color",
+      "description": "自定义按钮颜色，通常用于细粒度的主题色控制",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button color=\"#1677ff\">自定义颜色按钮</Button>"
+    },
     {
       "name": "tagName",
       "description": "按钮渲染后的实际HTML元素，例如可以传入\"a\"来渲染成超链接",
@@ -195,6 +206,146 @@
       "default": "\"button\"",
       "usageExample": "<Button tagName=\"a\" href=\"https://example.com\" target=\"_blank\">链接按钮</Button>"
     },
+    {
+      "name": "autofocus",
+      "description": "原生 autofocus 属性，页面加载后自动聚焦按钮",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button autofocus>自动聚焦</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "form",
+      "description": "原生 form 属性，指定按钮关联的表单 id",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button form=\"loginForm\" htmlType=\"submit\">提交</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "formaction",
+      "description": "原生 formaction 属性，覆盖表单提交地址",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button formaction=\"/api/submit\" htmlType=\"submit\">提交</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "formenctype",
+      "description": "原生 formenctype 属性，指定表单提交编码类型",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button formenctype=\"multipart/form-data\" htmlType=\"submit\">上传</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "formmethod",
+      "description": "原生 formmethod 属性，指定表单提交方法",
+      "type": {
+        "raw": "\"post\" | \"get\" | \"dialog\" | string",
+        "kind": "union"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button formmethod=\"post\" htmlType=\"submit\">提交</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "formnovalidate",
+      "description": "原生 formnovalidate 属性，提交时跳过原生表单校验",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button formnovalidate htmlType=\"submit\">跳过校验</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "formtarget",
+      "description": "原生 formtarget 属性，指定表单响应的打开位置",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button formtarget=\"_blank\" htmlType=\"submit\">新窗口提交</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "href",
+      "description": "原生 href 属性，当 tagName=\"a\" 时指定跳转链接",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button tagName=\"a\" href=\"https://example.com\">外部链接</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "target",
+      "description": "原生 target 属性，当 tagName=\"a\" 时指定打开方式",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button tagName=\"a\" href=\"https://example.com\" target=\"_blank\">新窗口打开</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "download",
+      "description": "原生 download 属性，当 tagName=\"a\" 时提示浏览器下载资源",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button tagName=\"a\" href=\"/file.pdf\" download=\"demo.pdf\">下载文件</Button>",
+      "tags": [
+        "native"
+      ]
+    },
     {
       "name": "value",
       "description": "对于radio/checkbox类型的按钮组，给按钮指定选中时的值",
@@ -206,6 +357,34 @@
       "default": "undefined",
       "usageExample": "<Button value=\"option1\">选项1</Button>"
     },
+    {
+      "name": "name",
+      "description": "原生 name 属性",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button name=\"submitBtn\">提交</Button>",
+      "tags": [
+        "native"
+      ]
+    },
+    {
+      "name": "tabindex",
+      "description": "原生 tabindex 属性，控制键盘 Tab 导航顺序",
+      "type": {
+        "raw": "string | number",
+        "kind": "union"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button :tabindex=\"-1\">跳过焦点</Button>",
+      "tags": [
+        "native"
+      ]
+    },
     {
       "name": "ghost",
       "description": "展示透明背景的按钮，适用于深色背景",
@@ -504,6 +683,18 @@
     "城市切换单选按钮组",
     "多选标签按钮组"
   ],
+  "typeDefinitions": [
+    {
+      "name": "ButtonType",
+      "definition": "type ButtonType = 'default' | 'primary' | 'danger' | 'warning' | 'success' | 'link'",
+      "description": "按钮语义类型枚举，用于区分主要操作、危险操作和链接样式。"
+    },
+    {
+      "name": "ButtonGroupCheckType",
+      "definition": "type ButtonGroupCheckType = 'radio' | 'checkbox'",
+      "description": "按钮组选择模式枚举，控制单选或多选行为。"
+    }
+  ],
   "relatedComponents": [
     "ButtonGroup",
     "Icon"

package/components/buttonlink.json

@@ -0,0 +1,73 @@
+{
+    "id": "buttonlink",
+    "name": "ButtonLink",
+    "displayName": "链接按钮",
+    "category": "feedback",
+    "description": "外观接近按钮但语义偏链接的操作组件，适合放在详情页头部、说明区或空状态中承载跳转型动作。",
+    "importStatement": "import { ButtonLink } from '@ksyun-internal/versatile';",
+    "props": [],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "按钮内容",
+            "vueTemplate": "<ButtonLink>...</ButtonLink>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "buttonlink_doc",
+            "title": "详情页中的文档跳转入口",
+            "description": "用按钮样式突出跳转动作，同时保持链接语义。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ButtonLink } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <ButtonLink>查看 API 文档</ButtonLink>\n</template>",
+            "tags": [
+                "link",
+                "action"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在操作区提供“查看文档”“前往控制台”等跳转动作。"
+        },
+        {
+            "id": "buttonlink_empty_action",
+            "title": "空状态跳转入口",
+            "description": "在空状态说明区域中用链接按钮承载引导操作。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ButtonLink } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <div>\n    <p>当前没有可用项目。</p>\n    <ButtonLink>前往创建项目</ButtonLink>\n  </div>\n</template>",
+            "tags": [
+                "link",
+                "empty"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在空状态或帮助提示区提供跳转型操作。"
+        }
+    ],
+    "searchKeywords": [
+        "button link",
+        "link button",
+        "链接按钮",
+        "跳转按钮",
+        "文档入口"
+    ],
+    "useCases": [
+        "操作区链接按钮",
+        "详情页跳转入口",
+        "空状态引导操作"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ButtonLinkText",
+            "definition": "type ButtonLinkText = string",
+            "description": "链接按钮展示文案类型。"
+        }
+    ],
+    "relatedComponents": [
+        "IconTooltip",
+        "Actions"
+    ]
+}

package/components/card.json

@@ -327,8 +327,15 @@
         "设置面板",
         "内容分组展示"
     ],
+    "typeDefinitions": [
+        {
+            "name": "CardSize",
+            "definition": "type CardSize = 'default' | 'small' | 'mini'",
+            "description": "卡片尺寸枚举，用于控制内边距和布局密度。"
+        }
+    ],
     "relatedComponents": [
         "CardColumn",
         "Collapse"
     ]
-}
+}

package/components/cardcol.json

@@ -0,0 +1,142 @@
+{
+    "id": "cardcol",
+    "name": "CardCol",
+    "displayName": "卡片列项",
+    "category": "layout",
+    "description": "详情卡片中的单个字段展示组件，适合渲染基础文本、状态、可复制内容或带确认操作的字段项。",
+    "importStatement": "import { CardCol } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "label",
+            "description": "列标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "col",
+            "description": "列配置对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}"
+        },
+        {
+            "name": "loading",
+            "description": "是否处于加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "gap",
+            "description": "列内容与标题间距",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "字段内部值发生变更时触发，常用于可编辑字段回写。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "CardColValue",
+                    "description": "当前字段最新值，具体类型取决于该列使用的编辑控件。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "confirmPopover",
+            "vueEventName": "@confirmPopover",
+            "description": "用户确认 Popover 内的二次操作时触发，适合承接危险操作确认。"
+        },
+        {
+            "name": "hidePopover",
+            "vueEventName": "@hidePopover",
+            "description": "字段上的确认弹层关闭时触发，可用于清理临时状态。"
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "cardcol_detail_field",
+            "title": "详情页中的单字段展示",
+            "description": "用 CardCol 渲染一条实例属性，保持与详情卡片布局一致。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { CardCol } from '@ksyun-internal/versatile';\n\nconst instanceCol = {\n  value: 'i-2ze7x5a4',\n  copyable: true,\n};\n</script>\n\n<template>\n  <CardCol label=\"实例 ID\" :col=\"instanceCol\" :gap=\"12\" />\n</template>",
+            "tags": [
+                "detail",
+                "card"
+            ],
+            "usedProps": [
+                "label",
+                "col",
+                "gap"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在实例详情卡片中展示单条字段并开启复制能力。"
+        },
+        {
+            "id": "cardcol_loading_state",
+            "title": "字段加载占位",
+            "description": "在详情数据尚未返回时先渲染字段级 loading 状态。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { CardCol } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CardCol label=\"公网 IP\" :loading=\"true\" />\n</template>",
+            "tags": [
+                "detail",
+                "loading"
+            ],
+            "usedProps": [
+                "label",
+                "loading"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页分段加载数据时先渲染单字段占位。"
+        }
+    ],
+    "searchKeywords": [
+        "card col",
+        "detail field",
+        "卡片列",
+        "详情字段",
+        "详情项",
+        "卡片字段",
+        "单字段展示",
+        "详情单元"
+    ],
+    "useCases": [
+        "详情页字段展示",
+        "卡片型信息布局",
+        "单字段 loading 占位",
+        "支持复制和状态展示的详情项"
+    ],
+    "relatedComponents": [
+        "CardCols",
+        "CardTabs",
+        "CopyHover",
+        "Editable"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CardColValue",
+            "definition": "type CardColValue = {\n  value?: string | number\n  copyable?: boolean\n  status?: string\n}",
+            "description": "单个详情字段的值配置，可描述文本、复制能力和状态展示。"
+        }
+    ]
+}

package/components/cardcols.json

@@ -0,0 +1,121 @@
+{
+    "id": "cardcols",
+    "name": "CardCols",
+    "displayName": "卡片列容器",
+    "category": "layout",
+    "description": "用于批量组织多个详情字段的卡片列容器，适合把实例、网络、计费等信息按栅格方式排布。",
+    "importStatement": "import { CardCols } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "cols",
+            "description": "列配置列表",
+            "type": {
+                "raw": "CardColItem[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "colLength",
+            "description": "每行列数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "3"
+        }
+    ],
+    "events": [
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "任一字段值变化时统一向外抛出，便于父级集中处理。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "CardColItem[]",
+                    "description": "当前卡片字段配置数组，包含每一列的最新值和展示配置。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "confirmPopover",
+            "vueEventName": "@confirmPopover",
+            "description": "列项中的确认弹层完成确认时触发。"
+        },
+        {
+            "name": "hidePopover",
+            "vueEventName": "@hidePopover",
+            "description": "列项中的确认弹层关闭时触发。"
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "cardcols_instance_detail",
+            "title": "实例详情字段栅格布局",
+            "description": "通过 cols 配置一次性渲染多条详情字段。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { CardCols } from '@ksyun-internal/versatile';\n\nconst cols = [\n  { label: '实例 ID', value: 'i-2ze7x5a4', copyable: true },\n  { label: '可用区', value: 'cn-beijing-6a' },\n  { label: '运行状态', value: '运行中' },\n];\n</script>\n\n<template>\n  <CardCols :cols=\"cols\" :col-length=\"3\" />\n</template>",
+            "tags": [
+                "detail",
+                "grid"
+            ],
+            "usedProps": [
+                "cols",
+                "colLength"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在资源详情页中以三列布局展示基础信息。"
+        },
+        {
+            "id": "cardcols_two_columns",
+            "title": "两列详情布局",
+            "description": "通过 colLength 控制更宽松的两列详情排版。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { CardCols } from '@ksyun-internal/versatile';\n\nconst cols = [\n  { label: '项目名称', value: '核心项目' },\n  { label: '计费方式', value: '包年包月' },\n  { label: '到期时间', value: '2026-12-31 23:59:59' },\n  { label: '可用区', value: 'cn-beijing-6a' },\n];\n</script>\n\n<template>\n  <CardCols :cols=\"cols\" :col-length=\"2\" />\n</template>",
+            "tags": [
+                "detail",
+                "columns"
+            ],
+            "usedProps": [
+                "cols",
+                "colLength"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在字段较长的详情页中改用两列布局提升可读性。"
+        }
+    ],
+    "searchKeywords": [
+        "card cols",
+        "detail grid",
+        "卡片列容器",
+        "详情布局",
+        "字段栅格",
+        "卡片详情区",
+        "多字段展示",
+        "详情栅格"
+    ],
+    "useCases": [
+        "详情页字段排版",
+        "卡片信息栅格布局",
+        "两列或三列详情分布",
+        "批量渲染多条详情字段"
+    ],
+    "relatedComponents": [
+        "CardCol",
+        "CardTabs"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CardColItem",
+            "definition": "type CardColItem = {\n  label: string\n  value?: string | number\n  copyable?: boolean\n}",
+            "description": "CardCols 中的单个列项配置，至少包含展示标签。"
+        }
+    ]
+}

package/components/cardcontent.json

@@ -136,9 +136,21 @@
         "card",
         "panel",
         "container",
-        "卡片"
+        "卡片",
+        "内容卡片",
+        "详情卡片",
+        "卡片容器"
     ],
     "useCases": [
-        "页面主体内容包裹"
+        "页面主体内容包裹",
+        "详情页分块信息卡片",
+        "带头部操作区的业务内容容器"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CardContentType",
+            "definition": "type CardContentType = 'shadow' | 'border' | 'none'",
+            "description": "卡片容器样式枚举，控制边框和阴影表现。"
+        }
     ]
-}
+}