king-design-analyzer 2.1.9 → 2.2.1

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

@@ -101,30 +101,35 @@
         {
             "name": "default",
             "description": "默认内容区域",
+            "bindingType": "none",
             "vueTemplate": "<CardContent>内容</CardContent>",
             "usageExample": "<CardContent>...</CardContent>"
         },
         {
             "name": "opLeft",
             "description": "扩展卡片操作栏左侧内容",
+            "bindingType": "none",
             "vueTemplate": "<template #opLeft>...</template>",
             "usageExample": "<CardContent><template #opLeft><Button>操作</Button></template></CardContent>"
         },
         {
             "name": "opRight",
             "description": "扩展卡片操作栏右侧内容",
+            "bindingType": "none",
             "vueTemplate": "<template #opRight>...</template>",
             "usageExample": "<CardContent><template #opRight><Button>更多</Button></template></CardContent>"
         },
         {
             "name": "prepend",
             "description": "扩展卡片操作栏上面部分内容",
+            "bindingType": "none",
             "vueTemplate": "<template #prepend>...</template>",
             "usageExample": "<CardContent><template #prepend><Alert>提示信息</Alert></template></CardContent>"
         },
         {
             "name": "extra",
             "description": "扩展头部附加内容",
+            "bindingType": "none",
             "vueTemplate": "<template #extra>...</template>",
             "usageExample": "<CardContent title=\"标题\"><template #extra><Link>查看更多</Link></template></CardContent>"
         }
@@ -136,9 +141,21 @@
         "card",
         "panel",
         "container",
-        "卡片"
+        "卡片",
+        "内容卡片",
+        "详情卡片",
+        "卡片容器"
     ],
     "useCases": [
-        "页面主体内容包裹"
+        "页面主体内容包裹",
+        "详情页分块信息卡片",
+        "带头部操作区的业务内容容器"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CardContentType",
+            "definition": "type CardContentType = 'shadow' | 'border' | 'none'",
+            "description": "卡片容器样式枚举，控制边框和阴影表现。"
+        }
     ]
-}
+}

package/components/cardtabs.json

@@ -0,0 +1,172 @@
+{
+    "id": "cardtabs",
+    "name": "CardTabs",
+    "displayName": "卡片标签页",
+    "category": "layout",
+    "description": "带卡片视觉风格的标签切换组件，适合详情页顶部在“概览、监控、操作日志”等信息块之间切换。",
+    "importStatement": "import { CardTabs } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前选中的标签值",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "tabs",
+            "description": "标签数据列表",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "tabLabelName",
+            "description": "标签文案字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"label\""
+        },
+        {
+            "name": "tabValueName",
+            "description": "标签值字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"value\""
+        },
+        {
+            "name": "data",
+            "description": "每个标签对应的卡片内容数据",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "当前激活标签值变化时触发，可直接驱动外层 `v-model`。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | number",
+                    "description": "当前激活标签的 value。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "标签切换并得到新的 value 时触发，通常用于请求对应数据。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | number",
+                    "description": "当前切换后的标签值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:tab",
+            "vueEventName": "@update:tab",
+            "description": "当前选中的完整 tab 对象变化时触发，便于读取 tab 上的额外配置。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "CardTabItem",
+                    "description": "当前激活的完整标签项对象。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "cardtabs_detail_tabs",
+            "title": "详情页中的卡片标签切换",
+            "description": "用 CardTabs 在卡片区域切换不同信息块。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { CardTabs } from '@ksyun-internal/versatile';\n\nconst activeTab = ref('base');\nconst tabs = [\n  { label: '基本信息', value: 'base' },\n  { label: '监控图表', value: 'monitor' },\n  { label: '变更记录', value: 'logs' },\n];\n</script>\n\n<template>\n  <CardTabs v-model=\"activeTab\" :tabs=\"tabs\" />\n</template>",
+            "tags": [
+                "tabs",
+                "detail"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tabs"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在详情卡片头部切换不同业务分区。"
+        },
+        {
+            "id": "cardtabs_custom_fields",
+            "title": "自定义标签字段名",
+            "description": "当后端返回的字段名不是 label/value 时，可通过映射字段使用。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { CardTabs } from '@ksyun-internal/versatile';\n\nconst activeTab = ref('network');\nconst tabs = [\n  { name: '基础信息', id: 'base' },\n  { name: '网络配置', id: 'network' },\n];\n</script>\n\n<template>\n  <CardTabs\n    v-model=\"activeTab\"\n    :tabs=\"tabs\"\n    tab-label-name=\"name\"\n    tab-value-name=\"id\"\n  />\n</template>",
+            "tags": [
+                "tabs",
+                "mapping"
+            ],
+            "usedProps": [
+                "modelValue",
+                "tabs",
+                "tabLabelName",
+                "tabValueName"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "直接复用后端返回的 tab 数据结构而不做额外转换。"
+        }
+    ],
+    "searchKeywords": [
+        "card tabs",
+        "detail tabs",
+        "卡片标签",
+        "卡片页签",
+        "详情页签",
+        "信息块切换",
+        "tabs",
+        "tab switch"
+    ],
+    "useCases": [
+        "详情页卡片切换",
+        "多块信息切换",
+        "基于后端字段映射的标签切换",
+        "概览与监控等内容分区"
+    ],
+    "relatedComponents": [
+        "LayoutTabs",
+        "CardCols",
+        "CardCol"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CardTabItem",
+            "definition": "type CardTabItem = {\n  label?: string\n  value?: string | number\n  [key: string]: any\n}",
+            "description": "卡片标签项配置，可根据 tabLabelName 和 tabValueName 映射实际字段。"
+        }
+    ]
+}

package/components/carousel.json

@@ -203,5 +203,12 @@
     "产品特性轮播介绍",
     "公告通知轮播"
   ],
+  "typeDefinitions": [
+    {
+      "name": "CarouselEffect",
+      "definition": "type CarouselEffect = 'slide' | 'fade'",
+      "description": "轮播切换效果枚举，控制使用滑动或淡入淡出动画。"
+    }
+  ],
   "relatedComponents": []
 }