king-design-analyzer 1.0.0

package/components/divider.json

@@ -0,0 +1,287 @@
+{
+    "id": "divider",
+    "name": "Divider",
+    "displayName": "分割线",
+    "category": "layout",
+    "description": "区隔内容的分割线。用于将内容分隔为多个区域。",
+    "importStatement": "import { Divider } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "borderType",
+            "description": "定义线的类型",
+            "type": {
+                "raw": "\"solid\" | \"dashed\" | \"dotted\" | \"double\"",
+                "kind": "union",
+                "unionTypes": [
+                    "solid",
+                    "dashed",
+                    "dotted",
+                    "double"
+                ]
+            },
+            "required": false,
+            "default": "\"solid\"",
+            "allowedValues": [
+                {
+                    "value": "solid",
+                    "label": "实线",
+                    "isDefault": true
+                },
+                {
+                    "value": "dashed",
+                    "label": "虚线"
+                },
+                {
+                    "value": "dotted",
+                    "label": "点线"
+                },
+                {
+                    "value": "double",
+                    "label": "双线"
+                }
+            ],
+            "usageExample": "<Divider borderType=\"dashed\">虚线</Divider>"
+        },
+        {
+            "name": "position",
+            "description": "定义文字位置",
+            "type": {
+                "raw": "\"left\" | \"right\" | \"center\"",
+                "kind": "union",
+                "unionTypes": [
+                    "left",
+                    "right",
+                    "center"
+                ]
+            },
+            "required": false,
+            "default": "\"center\"",
+            "allowedValues": [
+                {
+                    "value": "left",
+                    "label": "左侧"
+                },
+                {
+                    "value": "right",
+                    "label": "右侧"
+                },
+                {
+                    "value": "center",
+                    "label": "居中",
+                    "isDefault": true
+                }
+            ],
+            "usageExample": "<Divider position=\"left\">左侧文字</Divider>"
+        },
+        {
+            "name": "type",
+            "description": "定义排列方式（水平或垂直）。注意：'horizontal' 用于创建垂直分割线（水平排列），'vertical' 用于创建水平分割线（垂直排列）。",
+            "type": {
+                "raw": "\"vertical\" | \"horizontal\"",
+                "kind": "union",
+                "unionTypes": [
+                    "vertical",
+                    "horizontal"
+                ]
+            },
+            "required": false,
+            "default": "\"vertical\"",
+            "allowedValues": [
+                {
+                    "value": "vertical",
+                    "label": "水平分割线（默认）",
+                    "isDefault": true
+                },
+                {
+                    "value": "horizontal",
+                    "label": "垂直分割线"
+                }
+            ],
+            "usageExample": "<Divider type=\"horizontal\" />"
+        },
+        {
+            "name": "theme",
+            "description": "定义主题，适用于深/浅色背景",
+            "type": {
+                "raw": "\"light\" | \"dark\"",
+                "kind": "union",
+                "unionTypes": [
+                    "light",
+                    "dark"
+                ]
+            },
+            "required": false,
+            "default": "\"light\"",
+            "allowedValues": [
+                {
+                    "value": "light",
+                    "label": "浅色主题（默认）",
+                    "isDefault": true
+                },
+                {
+                    "value": "dark",
+                    "label": "深色主题"
+                }
+            ],
+            "usageExample": "<Divider theme=\"dark\" />"
+        },
+        {
+            "name": "margin",
+            "description": "定义Divider上下（或左右）外边距",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"none\" | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大边距"
+                },
+                {
+                    "value": "default",
+                    "label": "默认边距",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小边距"
+                },
+                {
+                    "value": "none",
+                    "label": "无边距"
+                }
+            ],
+            "usageExample": "<Divider margin=\"large\" />"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "分割线中间的文字内容",
+            "vueTemplate": "#default",
+            "usageExample": "<Divider>文字内容</Divider>"
+        }
+    ],
+    "examples": [
+        {
+            "id": "divider_basic",
+            "title": "基础用法",
+            "description": "默认为水平分割线（type=\"vertical\"）",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Divider } from '@king-design/vue';\n</script>\n<template>\n  <p>段落一</p>\n  <Divider />\n  <p>段落二</p>\n</template>",
+            "tags": [
+                "basic",
+                "layout"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "用于分隔两个段落"
+        },
+        {
+            "id": "divider_with_text",
+            "title": "带文字的分割线",
+            "description": "分割线中间带文字，支持位置设置",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Divider } from '@king-design/vue';\n</script>\n<template>\n  <Divider>默认为居中</Divider>\n  <Divider position=\"left\">左侧文字</Divider>\n  <Divider position=\"right\">右侧文字</Divider>\n</template>",
+            "tags": [
+                "text",
+                "position"
+            ],
+            "usedProps": [
+                "position"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "使用带文字的分割线作为小标题"
+        },
+        {
+            "id": "divider_vertical",
+            "title": "垂直分割线",
+            "description": "使用 type=\"horizontal\" 创建垂直分割线",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Divider } from '@king-design/vue';\n</script>\n<template>\n  <div>\n    <span>编辑</span>\n    <Divider type=\"horizontal\" />\n    <span>复制</span>\n    <Divider type=\"horizontal\" />\n    <span>删除</span>\n  </div>\n</template>",
+            "tags": [
+                "vertical",
+                "layout",
+                "action"
+            ],
+            "usedProps": [
+                "type"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "用于分隔行内的操作链接"
+        },
+        {
+            "id": "divider_styles",
+            "title": "不同样式的分割线",
+            "description": "支持虚线、点线、双线等样式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Divider } from '@king-design/vue';\n</script>\n<template>\n  <Divider borderType=\"dashed\">虚线</Divider>\n  <Divider borderType=\"dotted\">点线</Divider>\n  <Divider borderType=\"double\">双线</Divider>\n</template>",
+            "tags": [
+                "style",
+                "borderType"
+            ],
+            "usedProps": [
+                "borderType"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "展示不同线条样式的分割线"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "divider_vertical_meaning",
+            "description": "混淆 vertical 和 horizontal 的含义",
+            "wrongCode": "<Divider type=\"vertical\" /> <!-- 想创建垂直分割线 -->",
+            "correctCode": "<Divider type=\"horizontal\" /> <!-- vertical是默认值(水平线)，horizontal才是垂直线 -->",
+            "explanation": "Divider 的 type 属性指的是排列方式。vertical 表示垂直排列（即上下分隔，产生水平线），horizontal 表示水平排列（即左右分隔，产生垂直线）。",
+            "relatedProps": [
+                "type"
+            ]
+        },
+        {
+            "id": "divider_margin_type",
+            "description": "自定义 margin 时未使用动态绑定",
+            "wrongCode": "<Divider margin=\"20\" />",
+            "correctCode": "<Divider :margin=\"20\" />",
+            "explanation": "如果传入的是数字类型的 margin，需要使用 v-bind 语法 (:margin)。",
+            "relatedProps": [
+                "margin"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "分割线",
+        "divider",
+        "line",
+        "separator",
+        "border",
+        "hr",
+        "vertical",
+        "horizontal"
+    ],
+    "useCases": [
+        "文章段落分隔",
+        "标题与内容分隔",
+        "行内操作按钮分隔",
+        "表单区块分隔"
+    ],
+    "relatedComponents": [
+        "Space"
+    ]
+}