king-design-analyzer 1.0.0

package/components/card.json

@@ -0,0 +1,334 @@
+{
+    "id": "card",
+    "name": "Card",
+    "displayName": "卡片",
+    "category": "data",
+    "description": "卡片容器组件，用于展示内容和操作。支持多种类型（阴影、边框、无边框）、尺寸，以及自定义头部和多列布局。配合 CardColumn 子组件使用可实现多列布局。",
+    "importStatement": "import { Card, CardColumn } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "title",
+            "description": "卡片标题",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Card title=\"卡片标题\">内容</Card>"
+        },
+        {
+            "name": "type",
+            "description": "卡片类型，决定卡片的视觉样式",
+            "type": {
+                "raw": "\"shadow\" | \"border\" | \"none\"",
+                "kind": "union",
+                "unionTypes": [
+                    "shadow",
+                    "border",
+                    "none"
+                ]
+            },
+            "required": false,
+            "default": "\"shadow\"",
+            "allowedValues": [
+                {
+                    "value": "shadow",
+                    "label": "阴影样式",
+                    "isDefault": true
+                },
+                {
+                    "value": "border",
+                    "label": "边框样式"
+                },
+                {
+                    "value": "none",
+                    "label": "无边框样式"
+                }
+            ],
+            "usageExample": "<Card type=\"border\" title=\"边框卡片\">内容</Card>"
+        },
+        {
+            "name": "size",
+            "description": "卡片尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Card size=\"small\" title=\"小卡片\">内容</Card>"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "header",
+            "description": "扩展整个头部内容"
+        },
+        {
+            "name": "title",
+            "description": "扩展头部标题内容"
+        },
+        {
+            "name": "extra",
+            "description": "扩展头部附加内容"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "CardColumn",
+            "description": "卡片列组件，用于实现卡片内的多列布局",
+            "props": [
+                {
+                    "name": "width",
+                    "description": "列宽，必须带单位",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<CardColumn width=\"100px\">内容</CardColumn>"
+                },
+                {
+                    "name": "center",
+                    "description": "该列内容是否居中",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<CardColumn center>居中内容</CardColumn>"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "card_basic",
+            "title": "基础用法",
+            "description": "基本的卡片",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"卡片标题\">\n    <p>卡片内容</p>\n    <p>这是一段详细的描述文字</p>\n  </Card>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的卡片"
+        },
+        {
+            "id": "card_types",
+            "title": "不同类型",
+            "description": "阴影、边框、无边框三种类型",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"阴影卡片\" type=\"shadow\">\n    阴影样式\n  </Card>\n  <Card title=\"边框卡片\" type=\"border\">\n    边框样式\n  </Card>\n  <Card title=\"无边框卡片\" type=\"none\">\n    无边框样式\n  </Card>\n</template>",
+            "tags": [
+                "type",
+                "shadow",
+                "border"
+            ],
+            "usedProps": [
+                "title",
+                "type"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同类型的卡片样式"
+        },
+        {
+            "id": "card_sizes",
+            "title": "不同尺寸",
+            "description": "不同尺寸的卡片",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"默认尺寸\" size=\"default\">默认尺寸卡片</Card>\n  <Card title=\"小尺寸\" size=\"small\">小尺寸卡片</Card>\n  <Card title=\"迷你尺寸\" size=\"mini\">迷你尺寸卡片</Card>\n</template>",
+            "tags": [
+                "size",
+                "small",
+                "mini"
+            ],
+            "usedProps": [
+                "title",
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同尺寸的卡片"
+        },
+        {
+            "id": "card_extra",
+            "title": "头部额外操作",
+            "description": "在卡片头部添加操作按钮",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card, Button } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"操作卡片\">\n    <template #extra>\n      <Button type=\"link\">更多</Button>\n    </template>\n    <p>卡片内容</p>\n  </Card>\n</template>",
+            "tags": [
+                "extra",
+                "slot",
+                "action"
+            ],
+            "usedProps": [
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "extra"
+            ],
+            "usedMethods": [],
+            "scenario": "在卡片头部添加操作按钮"
+        },
+        {
+            "id": "card_custom_title",
+            "title": "自定义标题",
+            "description": "使用插槽自定义标题内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card, Icon } from '@king-design/vue';\n</script>\n<template>\n  <Card>\n    <template #title>\n      <Icon class=\"k-icon-heart\" color=\"danger\" /> 自定义标题\n    </template>\n    <p>卡片内容</p>\n  </Card>\n</template>",
+            "tags": [
+                "title",
+                "slot",
+                "icon"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [
+                "title"
+            ],
+            "usedMethods": [],
+            "scenario": "使用图标自定义卡片标题"
+        },
+        {
+            "id": "card_column",
+            "title": "多列布局",
+            "description": "使用 CardColumn 实现多列布局",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Card, CardColumn } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"用户信息\">\n    <CardColumn width=\"100px\" center>\n      <img src=\"avatar.png\" style=\"width: 80px; height: 80px; border-radius: 50%;\" />\n    </CardColumn>\n    <CardColumn>\n      <h4>用户名称</h4>\n      <p>这是用户的详细描述信息</p>\n    </CardColumn>\n  </Card>\n</template>",
+            "tags": [
+                "CardColumn",
+                "column",
+                "layout"
+            ],
+            "usedProps": [
+                "title",
+                "width",
+                "center"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建带有头像和信息的多列卡片"
+        },
+        {
+            "id": "card_no_title",
+            "title": "无标题卡片",
+            "description": "不设置标题的简洁卡片",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card } from '@king-design/vue';\n</script>\n<template>\n  <Card>\n    <p>这是一个没有标题的卡片</p>\n    <p>适用于简单内容展示</p>\n  </Card>\n</template>",
+            "tags": [
+                "simple",
+                "no-title"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建无标题的简洁卡片"
+        },
+        {
+            "id": "card_list",
+            "title": "卡片列表",
+            "description": "展示多个卡片的列表",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Card, Button } from '@king-design/vue';\n\nconst items = ref([\n  { id: 1, title: '项目一', desc: '项目一的描述' },\n  { id: 2, title: '项目二', desc: '项目二的描述' },\n  { id: 3, title: '项目三', desc: '项目三的描述' }\n]);\n</script>\n<template>\n  <div style=\"display: flex; gap: 16px;\">\n    <Card v-for=\"item in items\" :key=\"item.id\" :title=\"item.title\" type=\"border\">\n      <template #extra>\n        <Button type=\"link\" size=\"mini\">详情</Button>\n      </template>\n      <p>{{ item.desc }}</p>\n    </Card>\n  </div>\n</template>",
+            "tags": [
+                "list",
+                "v-for",
+                "grid"
+            ],
+            "usedProps": [
+                "title",
+                "type"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "extra"
+            ],
+            "usedMethods": [],
+            "scenario": "展示多个卡片组成的列表"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "card_type_typo",
+            "description": "使用不存在的 type 值",
+            "wrongCode": "<Card type=\"bordered\">内容</Card>",
+            "correctCode": "<Card type=\"border\">内容</Card>",
+            "explanation": "Card 的 type 只支持 shadow, border, none，注意 border 不是 bordered",
+            "relatedProps": [
+                "type"
+            ]
+        },
+        {
+            "id": "card_column_width_no_unit",
+            "description": "CardColumn width 未带单位",
+            "wrongCode": "<CardColumn width=\"100\">内容</CardColumn>",
+            "correctCode": "<CardColumn width=\"100px\">内容</CardColumn>",
+            "explanation": "CardColumn 的 width 必须带单位，如 px、em、%",
+            "relatedProps": [
+                "width"
+            ]
+        },
+        {
+            "id": "card_size_typo",
+            "description": "使用不存在的 size 值 (Card)",
+            "wrongCode": "<Card size=\"large\">内容</Card>",
+            "correctCode": "<Card size=\"default\">内容</Card>",
+            "explanation": "Card 的 size 只支持 default, small, mini。Card 组件目前不支持 large 尺寸。",
+            "relatedProps": [
+                "size"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "卡片",
+        "card",
+        "容器",
+        "面板",
+        "panel",
+        "内容区"
+    ],
+    "useCases": [
+        "信息展示卡片",
+        "用户信息卡片",
+        "商品卡片",
+        "统计数据卡片",
+        "设置面板",
+        "内容分组展示"
+    ],
+    "relatedComponents": [
+        "CardColumn",
+        "Collapse"
+    ]
+}

package/components/cardcontent.json

@@ -0,0 +1,144 @@
+{
+    "id": "cardcontent",
+    "name": "CardContent",
+    "displayName": "卡片内容容器",
+    "category": "layout",
+    "description": "LayoutContent 内部使用的卡片容器，通常用于包裹具体业务内容。",
+    "importStatement": "import { CardContent } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "title",
+            "description": "卡片标题",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "type",
+            "description": "卡片类型",
+            "type": {
+                "raw": "\"shadow\" | \"border\" | \"none\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"none\"",
+            "allowedValues": [
+                {
+                    "value": "shadow",
+                    "label": "阴影样式"
+                },
+                {
+                    "value": "border",
+                    "label": "边框样式"
+                },
+                {
+                    "value": "none",
+                    "label": "无样式",
+                    "isDefault": true
+                }
+            ]
+        },
+        {
+            "name": "size",
+            "description": "卡片尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\" | \"mini\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ]
+        },
+        {
+            "name": "scroll",
+            "description": "是否支持滚动条",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "halfRadius",
+            "description": "卡片顶部是否支持平角，默认支持圆角样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "loading",
+            "description": "是否为加载中状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "默认内容区域",
+            "vueTemplate": "<CardContent>内容</CardContent>",
+            "usageExample": "<CardContent>...</CardContent>"
+        },
+        {
+            "name": "opLeft",
+            "description": "扩展卡片操作栏左侧内容",
+            "vueTemplate": "<template #opLeft>...</template>",
+            "usageExample": "<CardContent><template #opLeft><Button>操作</Button></template></CardContent>"
+        },
+        {
+            "name": "opRight",
+            "description": "扩展卡片操作栏右侧内容",
+            "vueTemplate": "<template #opRight>...</template>",
+            "usageExample": "<CardContent><template #opRight><Button>更多</Button></template></CardContent>"
+        },
+        {
+            "name": "prepend",
+            "description": "扩展卡片操作栏上面部分内容",
+            "vueTemplate": "<template #prepend>...</template>",
+            "usageExample": "<CardContent><template #prepend><Alert>提示信息</Alert></template></CardContent>"
+        },
+        {
+            "name": "extra",
+            "description": "扩展头部附加内容",
+            "vueTemplate": "<template #extra>...</template>",
+            "usageExample": "<CardContent title=\"标题\"><template #extra><Link>查看更多</Link></template></CardContent>"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "card",
+        "panel",
+        "container",
+        "卡片"
+    ],
+    "useCases": [
+        "页面主体内容包裹"
+    ]
+}