king-design-analyzer 1.0.0

package/components/grid.json

@@ -0,0 +1,377 @@
+{
+    "id": "grid",
+    "name": "Row",
+    "displayName": "栅格",
+    "category": "layout",
+    "description": "栅格系统，基于 24 栅格布局，由 Row（行）和 Col（列）组成。支持 Flex 布局和响应式设计。",
+    "importStatement": "import { Row, Col } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "gutter",
+            "description": "栅格间距，单位 px。也可以传入对象设置响应式间距。",
+            "type": {
+                "raw": "string | number | object",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Row :gutter=\"16\">"
+        },
+        {
+            "name": "justify",
+            "description": "flex 布局下的水平排列方式",
+            "type": {
+                "raw": "\"start\" | \"end\" | \"center\" | \"between\" | \"around\" | \"evenly\"",
+                "kind": "union",
+                "unionTypes": [
+                    "start",
+                    "end",
+                    "center",
+                    "between",
+                    "around",
+                    "evenly"
+                ]
+            },
+            "required": false,
+            "default": "undefined",
+            "allowedValues": [
+                {
+                    "value": "start",
+                    "label": "左对齐"
+                },
+                {
+                    "value": "end",
+                    "label": "右对齐"
+                },
+                {
+                    "value": "center",
+                    "label": "居中对齐"
+                },
+                {
+                    "value": "between",
+                    "label": "两端对齐"
+                },
+                {
+                    "value": "around",
+                    "label": "环绕对齐"
+                },
+                {
+                    "value": "evenly",
+                    "label": "均匀分布"
+                }
+            ],
+            "usageExample": "<Row justify=\"center\">"
+        },
+        {
+            "name": "align",
+            "description": "flex 布局下的垂直对齐方式",
+            "type": {
+                "raw": "\"top\" | \"bottom\" | \"middle\" | \"stretch\" | \"baseline\"",
+                "kind": "union",
+                "unionTypes": [
+                    "top",
+                    "bottom",
+                    "middle",
+                    "stretch",
+                    "baseline"
+                ]
+            },
+            "required": false,
+            "default": "undefined",
+            "allowedValues": [
+                {
+                    "value": "top",
+                    "label": "顶部对齐"
+                },
+                {
+                    "value": "bottom",
+                    "label": "底部对齐"
+                },
+                {
+                    "value": "middle",
+                    "label": "垂直居中"
+                },
+                {
+                    "value": "stretch",
+                    "label": "拉伸"
+                },
+                {
+                    "value": "baseline",
+                    "label": "基线对齐"
+                }
+            ],
+            "usageExample": "<Row align=\"middle\">"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "Col",
+            "description": "栅格列组件",
+            "props": [
+                {
+                    "name": "span",
+                    "description": "栅格占位格数，为 0 时相当于 display: none",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "24",
+                    "usageExample": "<Col :span=\"12\">"
+                },
+                {
+                    "name": "offset",
+                    "description": "栅格左侧的间隔格数，间隔内不可以有栅格",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "0",
+                    "usageExample": "<Col :span=\"12\" :offset=\"6\">"
+                },
+                {
+                    "name": "order",
+                    "description": "栅格顺序，会自动启用 flex 布局",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "0",
+                    "usageExample": "<Col :order=\"1\">"
+                },
+                {
+                    "name": "pull",
+                    "description": "栅格向左移动格数",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "0",
+                    "usageExample": "<Col :pull=\"4\">"
+                },
+                {
+                    "name": "push",
+                    "description": "栅格向右移动格数",
+                    "type": {
+                        "raw": "number | string",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "0",
+                    "usageExample": "<Col :push=\"4\">"
+                },
+                {
+                    "name": "xs",
+                    "description": "<576px 响应式栅格，可设为 number 类型表示 span，或 object 类型设置 {span, offset} 等",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "sm",
+                    "description": "≥576px 响应式栅格",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "md",
+                    "description": "≥768px 响应式栅格",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "lg",
+                    "description": "≥992px 响应式栅格",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "xl",
+                    "description": "≥1200px 响应式栅格",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                },
+                {
+                    "name": "xxl",
+                    "description": "≥1600px 响应式栅格",
+                    "type": {
+                        "raw": "number | string | object",
+                        "kind": "union"
+                    },
+                    "required": false,
+                    "default": "undefined"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "grid_basic",
+            "title": "基础栅格",
+            "description": "简单的行列布局",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Row, Col } from '@king-design/vue';\n</script>\n<template>\n  <Row>\n    <Col :span=\"12\"><div>50%</div></Col>\n    <Col :span=\"12\"><div>50%</div></Col>\n  </Row>\n  <Row>\n    <Col :span=\"8\"><div>33.3%</div></Col>\n    <Col :span=\"8\"><div>33.3%</div></Col>\n    <Col :span=\"8\"><div>33.3%</div></Col>\n  </Row>\n</template>",
+            "tags": [
+                "basic",
+                "layout"
+            ],
+            "usedProps": [
+                "span"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "基本的等分列布局"
+        },
+        {
+            "id": "grid_gutter",
+            "title": "区块间隔",
+            "description": "使用 gutter 属性推荐使用 (16+8n)px 作为栅格间隔",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Row, Col } from '@king-design/vue';\n</script>\n<template>\n  <Row :gutter=\"16\">\n    <Col :span=\"6\"><div>col-6</div></Col>\n    <Col :span=\"6\"><div>col-6</div></Col>\n    <Col :span=\"6\"><div>col-6</div></Col>\n    <Col :span=\"6\"><div>col-6</div></Col>\n  </Row>\n</template>",
+            "tags": [
+                "gutter",
+                "layout"
+            ],
+            "usedProps": [
+                "gutter",
+                "span"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "带间隔的栅格布局"
+        },
+        {
+            "id": "grid_offset",
+            "title": "左右偏移",
+            "description": "使用 offset 属性将列向右侧偏移",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Row, Col } from '@king-design/vue';\n</script>\n<template>\n  <Row>\n    <Col :span=\"8\"><div>col-8</div></Col>\n    <Col :span=\"8\" :offset=\"8\"><div>col-8 offset-8</div></Col>\n  </Row>\n</template>",
+            "tags": [
+                "offset",
+                "layout"
+            ],
+            "usedProps": [
+                "span",
+                "offset"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "创建中间有空隙的布局"
+        },
+        {
+            "id": "grid_justify",
+            "title": "flex 布局",
+            "description": "通过 justify 和 align 属性实现灵活对齐",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Row, Col } from '@king-design/vue';\n</script>\n<template>\n  <Row justify=\"center\" align=\"middle\">\n    <Col :span=\"4\"><div>center</div></Col>\n  </Row>\n  <Row justify=\"end\">\n    <Col :span=\"4\"><div>end</div></Col>\n  </Row>\n  <Row justify=\"space-between\">\n    <Col :span=\"4\"><div>left</div></Col>\n    <Col :span=\"4\"><div>right</div></Col>\n  </Row>\n</template>",
+            "tags": [
+                "flex",
+                "justify",
+                "align"
+            ],
+            "usedProps": [
+                "justify",
+                "align",
+                "span"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "需要居中或两侧对齐的布局"
+        },
+        {
+            "id": "grid_responsive",
+            "title": "响应式布局",
+            "description": "预设六个响应尺寸：xs sm md lg xl xxl",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Row, Col } from '@king-design/vue';\n</script>\n<template>\n  <Row :gutter=\"10\">\n    <Col :xs=\"24\" :sm=\"12\" :md=\"8\" :lg=\"6\" :xl=\"4\">\n      <div>Responsive</div>\n    </Col>\n    <Col :xs=\"24\" :sm=\"12\" :md=\"8\" :lg=\"6\" :xl=\"4\">\n      <div>Responsive</div>\n    </Col>\n    <Col :xs=\"24\" :sm=\"12\" :md=\"8\" :lg=\"6\" :xl=\"4\">\n      <div>Responsive</div>\n    </Col>\n  </Row>\n</template>",
+            "tags": [
+                "responsive",
+                "layout"
+            ],
+            "usedProps": [
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "span"
+            ],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "适配不同屏幕尺寸的布局"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "grid_span_sum",
+            "description": "span 总和超过 24",
+            "wrongCode": "<Row>\n  <Col :span=\"12\">col-12</Col>\n  <Col :span=\"13\">col-13</Col>\n</Row>",
+            "correctCode": "<Row>\n  <Col :span=\"12\">col-12</Col>\n  <Col :span=\"12\">col-12</Col>\n</Row>",
+            "explanation": "Grid 系统基于 24 栅格，一行中的 span 总和（加上 offset）不应超过 24，否则会换行。",
+            "relatedProps": [
+                "span"
+            ]
+        },
+        {
+            "id": "grid_gutter_overflow",
+            "description": "gutter 导致的内容溢出",
+            "wrongCode": "<div style=\"width: 100%; overflow: hidden;\">\n  <Row :gutter=\"20\">...</Row>\n</div>",
+            "correctCode": "<div style=\"width: 100%; overflow-x: hidden;\">\n  <Row :gutter=\"20\">...</Row>\n</div>",
+            "explanation": "Row 通过负 margin 来实现 gutter，这可能会导致水平方向出现滚动条。建议在 Row 的父元素上设置 overflow-x: hidden。",
+            "relatedProps": [
+                "gutter"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "栅格",
+        "grid",
+        "row",
+        "col",
+        "layout",
+        "布局",
+        "flex",
+        "column",
+        "列",
+        "行"
+    ],
+    "useCases": [
+        "页面整体布局",
+        "表单排版",
+        "列表网格排列",
+        "响应式内容展示"
+    ],
+    "relatedComponents": [
+        "Space",
+        "Divider"
+    ]
+}