king-design-analyzer 2.1.7 → 2.2.0

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": []
 }