king-design-analyzer 1.0.0

package/components/descriptions.json

@@ -0,0 +1,309 @@
+{
+    "id": "descriptions",
+    "name": "Descriptions",
+    "displayName": "描述列表",
+    "category": "data",
+    "description": "描述列表组件，用于成组展示多个只读字段，常见于详情页的信息展示。支持水平/垂直布局、自定义列数、操作区等功能。配合 DescriptionItem 子组件使用。",
+    "importStatement": "import { Descriptions, DescriptionItem } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "title",
+            "description": "描述列表的标题，显示在最顶部",
+            "type": {
+                "raw": "string | number | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Descriptions title=\"用户信息\">"
+        },
+        {
+            "name": "vertical",
+            "description": "是否垂直排列（label 在上，content 在下）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Descriptions vertical>"
+        },
+        {
+            "name": "columns",
+            "description": "一行的 DescriptionItem 数量",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "3",
+            "usageExample": "<Descriptions :columns=\"2\">"
+        },
+        {
+            "name": "items",
+            "description": "描述列表项内容数组，可替代使用 DescriptionItem 子组件",
+            "type": {
+                "raw": "DescriptionItemProps[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<Descriptions :items=\"items\" />"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "title",
+            "description": "自定义title"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "DescriptionItem",
+            "description": "描述列表项组件，用于定义每个字段的标签和内容",
+            "props": [
+                {
+                    "name": "label",
+                    "description": "内容的标题/标签",
+                    "type": {
+                        "raw": "string | number | VNode",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DescriptionItem label=\"姓名\">张三</DescriptionItem>"
+                },
+                {
+                    "name": "content",
+                    "description": "包含内容，也可直接在标签内写内容",
+                    "type": {
+                        "raw": "string | number | VNode",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DescriptionItem label=\"姓名\" content=\"张三\" />"
+                },
+                {
+                    "name": "append",
+                    "description": "自定义内容，常用于操作区",
+                    "type": {
+                        "raw": "string | number | VNode",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<DescriptionItem label=\"手机\" append=\"修改\">138****8000</DescriptionItem>"
+                }
+            ],
+            "slots": [
+                {
+                    "name": "append",
+                    "description": "用于超长省略后的操作区自定义内容"
+                },
+                {
+                    "name": "label",
+                    "description": "自定义label"
+                }
+            ]
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DescriptionItemProps",
+            "definition": "interface DescriptionItemProps {\n  label?: string | number | VNode\n  content?: string | number | VNode\n  option?: string | number | VNode\n}",
+            "description": "描述列表项的数据结构"
+        }
+    ],
+    "examples": [
+        {
+            "id": "descriptions_basic",
+            "title": "基础用法",
+            "description": "基本的描述列表",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem } from '@king-design/vue';\n</script>\n<template>\n  <Descriptions title=\"用户信息\">\n    <DescriptionItem label=\"姓名\">张三</DescriptionItem>\n    <DescriptionItem label=\"年龄\">28</DescriptionItem>\n    <DescriptionItem label=\"性别\">男</DescriptionItem>\n    <DescriptionItem label=\"电话\">13800138000</DescriptionItem>\n    <DescriptionItem label=\"地址\">北京市朝阳区</DescriptionItem>\n    <DescriptionItem label=\"邮箱\">zhangsan@example.com</DescriptionItem>\n  </Descriptions>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "title",
+                "label"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建基本的信息展示描述列表"
+        },
+        {
+            "id": "descriptions_items",
+            "title": "使用 items 属性",
+            "description": "通过数据配置描述列表",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions } from '@king-design/vue';\n\nconst items = [\n  { label: '姓名', content: '张三' },\n  { label: '年龄', content: '28' },\n  { label: '性别', content: '男' },\n  { label: '电话', content: '13800138000' }\n];\n</script>\n<template>\n  <Descriptions title=\"用户信息\" :items=\"items\" />\n</template>",
+            "tags": [
+                "items",
+                "data"
+            ],
+            "usedProps": [
+                "title",
+                "items"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用数据配置方式创建描述列表"
+        },
+        {
+            "id": "descriptions_columns",
+            "title": "自定义列数",
+            "description": "设置每行显示的字段数量",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem } from '@king-design/vue';\n</script>\n<template>\n  <Descriptions title=\"订单信息\" :columns=\"2\">\n    <DescriptionItem label=\"订单编号\">2024123456</DescriptionItem>\n    <DescriptionItem label=\"创建时间\">2024-01-01 12:00:00</DescriptionItem>\n    <DescriptionItem label=\"状态\">已完成</DescriptionItem>\n    <DescriptionItem label=\"金额\">¥1,000.00</DescriptionItem>\n  </Descriptions>\n</template>",
+            "tags": [
+                "columns",
+                "layout"
+            ],
+            "usedProps": [
+                "title",
+                "columns",
+                "label"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置每行显示 2 个字段"
+        },
+        {
+            "id": "descriptions_vertical",
+            "title": "垂直布局",
+            "description": "label 在上，content 在下的垂直布局",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem } from '@king-design/vue';\n</script>\n<template>\n  <Descriptions title=\"产品详情\" vertical>\n    <DescriptionItem label=\"产品名称\">KPC 组件库</DescriptionItem>\n    <DescriptionItem label=\"版本\">3.0.0</DescriptionItem>\n    <DescriptionItem label=\"描述\">企业级 Vue 组件库</DescriptionItem>\n  </Descriptions>\n</template>",
+            "tags": [
+                "vertical",
+                "layout"
+            ],
+            "usedProps": [
+                "title",
+                "vertical",
+                "label"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建垂直布局的描述列表"
+        },
+        {
+            "id": "descriptions_append",
+            "title": "带操作按钮",
+            "description": "在描述项后添加操作按钮",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem, Button } from '@king-design/vue';\n</script>\n<template>\n  <Descriptions title=\"账户信息\" :columns=\"2\">\n    <DescriptionItem label=\"手机号\">\n      138****8000\n      <template #append>\n        <Button type=\"link\" size=\"small\">修改</Button>\n      </template>\n    </DescriptionItem>\n    <DescriptionItem label=\"邮箱\">\n      zhang***@example.com\n      <template #append>\n        <Button type=\"link\" size=\"small\">修改</Button>\n      </template>\n    </DescriptionItem>\n  </Descriptions>\n</template>",
+            "tags": [
+                "append",
+                "slot",
+                "action"
+            ],
+            "usedProps": [
+                "title",
+                "columns",
+                "label"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "append"
+            ],
+            "usedMethods": [],
+            "scenario": "在描述项后添加操作按钮"
+        },
+        {
+            "id": "descriptions_custom_title",
+            "title": "自定义标题",
+            "description": "使用插槽自定义标题内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem, Icon } from '@king-design/vue';\n</script>\n<template>\n  <Descriptions>\n    <template #title>\n      <Icon class=\"k-icon-user\" /> 用户信息\n    </template>\n    <DescriptionItem label=\"姓名\">张三</DescriptionItem>\n    <DescriptionItem label=\"年龄\">28</DescriptionItem>\n  </Descriptions>\n</template>",
+            "tags": [
+                "title",
+                "slot",
+                "custom"
+            ],
+            "usedProps": [
+                "label"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "title"
+            ],
+            "usedMethods": [],
+            "scenario": "使用图标自定义描述列表标题"
+        },
+        {
+            "id": "descriptions_detail_page",
+            "title": "详情页示例",
+            "description": "完整的详情页信息展示",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Descriptions, DescriptionItem, Card, Tag } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"订单详情\">\n    <Descriptions :columns=\"3\">\n      <DescriptionItem label=\"订单编号\">DD2024010100001</DescriptionItem>\n      <DescriptionItem label=\"创建时间\">2024-01-01 10:30:00</DescriptionItem>\n      <DescriptionItem label=\"订单状态\">\n        <Tag type=\"success\">已完成</Tag>\n      </DescriptionItem>\n      <DescriptionItem label=\"收货人\">张三</DescriptionItem>\n      <DescriptionItem label=\"联系电话\">13800138000</DescriptionItem>\n      <DescriptionItem label=\"收货地址\">北京市朝阳区xxx路xxx号</DescriptionItem>\n    </Descriptions>\n  </Card>\n</template>",
+            "tags": [
+                "detail",
+                "complete",
+                "card"
+            ],
+            "usedProps": [
+                "columns",
+                "label"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "详情页的完整信息展示"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "descriptions_missing_label",
+            "description": "DescriptionItem 未设置 label",
+            "wrongCode": "<Descriptions>\n  <DescriptionItem>张三</DescriptionItem>\n</Descriptions>",
+            "correctCode": "<Descriptions>\n  <DescriptionItem label=\"姓名\">张三</DescriptionItem>\n</Descriptions>",
+            "explanation": "DescriptionItem 应该设置 label 属性来标识字段名称",
+            "relatedProps": [
+                "label"
+            ]
+        },
+        {
+            "id": "descriptions_items_structure",
+            "description": "items 数组结构错误",
+            "wrongCode": "const items = ['姓名', '年龄'];",
+            "correctCode": "const items = [\n  { label: '姓名', content: '张三' },\n  { label: '年龄', content: '28' }\n];",
+            "explanation": "items 数组中的每个元素必须是包含 label 和 content 的对象",
+            "relatedProps": [
+                "items"
+            ]
+        },
+        {
+            "id": "descriptions_columns_type",
+            "description": "columns 使用字符串而非数字",
+            "wrongCode": "<Descriptions columns=\"2\">",
+            "correctCode": "<Descriptions :columns=\"2\">",
+            "explanation": "columns 是数字类型，需要使用 v-bind (:columns) 语法传入数字",
+            "relatedProps": [
+                "columns"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "描述列表",
+        "descriptions",
+        "详情",
+        "信息展示",
+        "字段",
+        "只读"
+    ],
+    "useCases": [
+        "订单详情页",
+        "用户信息展示",
+        "商品详情",
+        "配置信息展示",
+        "账户信息查看"
+    ],
+    "relatedComponents": [
+        "DescriptionItem",
+        "Card"
+    ]
+}