king-design-analyzer 1.0.0

package/components/button.json

@@ -0,0 +1,511 @@
+{
+  "id": "button",
+  "name": "Button",
+  "displayName": "按钮",
+  "category": "general",
+  "description": "用于触发操作，支持多种类型、尺寸和状态。可组合 ButtonGroup 实现按钮组、单选组、复选组等功能。",
+  "importStatement": "import { Button, ButtonGroup } from '@king-design/vue';",
+  "props": [
+    {
+      "name": "type",
+      "description": "按钮类型，决定按钮的视觉样式",
+      "type": {
+        "raw": "\"default\" | \"primary\" | \"warning\" | \"danger\" | \"success\" | \"secondary\" | \"link\" | \"flat\" | \"none\"",
+        "kind": "union",
+        "unionTypes": [
+          "default",
+          "primary",
+          "warning",
+          "danger",
+          "success",
+          "secondary",
+          "link",
+          "flat",
+          "none"
+        ]
+      },
+      "required": false,
+      "default": "\"default\"",
+      "allowedValues": [
+        {
+          "value": "default",
+          "label": "默认按钮",
+          "isDefault": true
+        },
+        {
+          "value": "primary",
+          "label": "主要按钮（蓝色高亮）"
+        },
+        {
+          "value": "warning",
+          "label": "警告按钮（橙色）"
+        },
+        {
+          "value": "danger",
+          "label": "危险按钮（红色）"
+        },
+        {
+          "value": "success",
+          "label": "成功按钮（绿色）"
+        },
+        {
+          "value": "secondary",
+          "label": "次要按钮"
+        },
+        {
+          "value": "link",
+          "label": "链接样式按钮"
+        },
+        {
+          "value": "flat",
+          "label": "扁平按钮"
+        },
+        {
+          "value": "none",
+          "label": "无样式按钮"
+        }
+      ],
+      "usageExample": "<Button type=\"primary\">主要按钮</Button>"
+    },
+    {
+      "name": "size",
+      "description": "按钮尺寸",
+      "type": {
+        "raw": "\"default\" | \"small\" | \"mini\" | \"large\"",
+        "kind": "union",
+        "unionTypes": [
+          "default",
+          "small",
+          "mini",
+          "large"
+        ]
+      },
+      "required": false,
+      "default": "\"default\"",
+      "allowedValues": [
+        {
+          "value": "large",
+          "label": "大尺寸"
+        },
+        {
+          "value": "default",
+          "label": "默认尺寸",
+          "isDefault": true
+        },
+        {
+          "value": "small",
+          "label": "小尺寸"
+        },
+        {
+          "value": "mini",
+          "label": "迷你尺寸"
+        }
+      ],
+      "usageExample": "<Button size=\"small\">小按钮</Button>"
+    },
+    {
+      "name": "icon",
+      "description": "是否为图标按钮（宽高相等）",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Button icon><Icon class=\"k-icon-search\" /></Button>"
+    },
+    {
+      "name": "circle",
+      "description": "是否为圆角按钮",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Button icon circle><Icon class=\"k-icon-plus\" /></Button>"
+    },
+    {
+      "name": "loading",
+      "description": "是否为正在加载中的按钮，加载时按钮会禁用点击",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Button type=\"primary\" :loading=\"isLoading\">提交中...</Button>"
+    },
+    {
+      "name": "disabled",
+      "description": "是否禁用状态",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Button disabled>禁用按钮</Button>"
+    },
+    {
+      "name": "fluid",
+      "description": "是否宽度100%",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<Button fluid>块级按钮</Button>"
+    },
+    {
+      "name": "htmlType",
+      "description": "按钮<button>元素的type属性",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"button\"",
+      "allowedValues": [
+        {
+          "value": "button",
+          "label": "普通按钮",
+          "isDefault": true
+        },
+        {
+          "value": "submit",
+          "label": "提交按钮"
+        },
+        {
+          "value": "reset",
+          "label": "重置按钮"
+        }
+      ],
+      "usageExample": "<Button htmlType=\"submit\">提交表单</Button>"
+    },
+    {
+      "name": "tagName",
+      "description": "按钮渲染后的实际HTML元素，例如可以传入\"a\"来渲染成超链接",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"button\"",
+      "usageExample": "<Button tagName=\"a\" href=\"https://example.com\" target=\"_blank\">链接按钮</Button>"
+    },
+    {
+      "name": "value",
+      "description": "对于radio/checkbox类型的按钮组，给按钮指定选中时的值",
+      "type": {
+        "raw": "*",
+        "kind": "custom"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button value=\"option1\">选项1</Button>"
+    },
+    {
+      "name": "ghost",
+      "description": "展示透明背景的按钮，适用于深色背景",
+      "type": {
+        "raw": "boolean",
+        "kind": "boolean"
+      },
+      "required": false,
+      "default": "false",
+      "usageExample": "<div style=\"background: #001529; padding: 16px;\">\n  <Button ghost>幽灵按钮</Button>\n</div>"
+    },
+    {
+      "name": "class",
+      "description": "给按钮添加自定义类名，通常用于通过 CSS 类名来定义按钮的具体视觉样式",
+      "type": {
+        "raw": "string | Record<string, boolean>",
+        "kind": "union"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Button class=\"my-custom-btn\">自定义类名按钮</Button>"
+    }
+  ],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "按钮内容",
+      "vueTemplate": "#default",
+      "usageExample": "<Button>按钮文字</Button>"
+    }
+  ],
+  "methods": [
+    {
+      "name": "showLoading",
+      "description": "展示 loading 状态",
+      "params": [],
+      "returnType": "void",
+      "usageExample": "const buttonRef = ref<InstanceType<typeof Button>>();\nbuttonRef.value?.showLoading();"
+    },
+    {
+      "name": "hideLoading",
+      "description": "取消 loading 状态",
+      "params": [],
+      "returnType": "void",
+      "usageExample": "buttonRef.value?.hideLoading();"
+    },
+    {
+      "name": "disable",
+      "description": "禁用按钮",
+      "params": [],
+      "returnType": "void",
+      "usageExample": "buttonRef.value?.disable();"
+    },
+    {
+      "name": "enable",
+      "description": "启用按钮",
+      "params": [],
+      "returnType": "void",
+      "usageExample": "buttonRef.value?.enable();"
+    }
+  ],
+  "subComponents": [
+    {
+      "name": "ButtonGroup",
+      "description": "按钮组容器，可实现按钮组合、单选组、复选组等功能",
+      "props": [
+        {
+          "name": "vertical",
+          "description": "是否垂直排列按钮组",
+          "type": {
+            "raw": "boolean",
+            "kind": "boolean"
+          },
+          "required": false,
+          "default": "false",
+          "usageExample": "<ButtonGroup vertical>\n  <Button>上</Button>\n  <Button>中</Button>\n  <Button>下</Button>\n</ButtonGroup>"
+        },
+        {
+          "name": "checkType",
+          "description": "指定按钮组为单选或复选类型",
+          "type": {
+            "raw": "\"radio\" | \"checkbox\" | \"none\"",
+            "kind": "union",
+            "unionTypes": [
+              "radio",
+              "checkbox",
+              "none"
+            ]
+          },
+          "required": false,
+          "default": "\"none\"",
+          "allowedValues": [
+            {
+              "value": "none",
+              "label": "普通按钮组",
+              "isDefault": true
+            },
+            {
+              "value": "radio",
+              "label": "单选按钮组"
+            },
+            {
+              "value": "checkbox",
+              "label": "复选按钮组"
+            }
+          ],
+          "usageExample": "<ButtonGroup checkType=\"radio\" v-model=\"selected\">\n  <Button value=\"a\">选项A</Button>\n  <Button value=\"b\">选项B</Button>\n</ButtonGroup>"
+        },
+        {
+          "name": "value",
+          "description": "对于radio和checkbox类型按钮组，表示选中的按钮值，可用v-model双向绑定",
+          "type": {
+            "raw": "*",
+            "kind": "custom"
+          },
+          "required": false,
+          "default": "undefined",
+          "usageExample": "<ButtonGroup checkType=\"radio\" v-model=\"selectedValue\">"
+        },
+        {
+          "name": "fluid",
+          "description": "是否宽度100%",
+          "type": {
+            "raw": "boolean",
+            "kind": "boolean"
+          },
+          "required": false,
+          "default": "false",
+          "usageExample": "<ButtonGroup fluid>"
+        },
+        {
+          "name": "separate",
+          "description": "是否展示间隔",
+          "type": {
+            "raw": "boolean",
+            "kind": "boolean"
+          },
+          "required": false,
+          "default": "false",
+          "usageExample": "<ButtonGroup separate>\n  <Button>按钮1</Button>\n  <Button>按钮2</Button>\n</ButtonGroup>"
+        },
+        {
+          "name": "btnWidth",
+          "description": "指定按钮组每个按钮的固定宽度",
+          "type": {
+            "raw": "number | string",
+            "kind": "union"
+          },
+          "required": false,
+          "default": "undefined",
+          "usageExample": "<ButtonGroup btnWidth=\"100px\">"
+        }
+      ]
+    }
+  ],
+  "examples": [
+    {
+      "id": "button_types",
+      "title": "按钮类型",
+      "description": "展示不同类型的按钮",
+      "difficulty": "easy",
+      "code": "<script setup lang=\"ts\">\nimport { Button } from '@king-design/vue';\n</script>\n<template>\n  <Button>默认按钮</Button>\n  <Button type=\"primary\">主要按钮</Button>\n  <Button type=\"warning\">警告按钮</Button>\n  <Button type=\"danger\">危险按钮</Button>\n  <Button type=\"success\">成功按钮</Button>\n</template>",
+      "tags": [
+        "type",
+        "basic"
+      ],
+      "usedProps": [
+        "type"
+      ],
+      "usedEvents": [],
+      "usedSlots": [
+        "default"
+      ],
+      "usedMethods": [],
+      "scenario": "展示不同颜色类型的按钮，包括主要、警告、危险、成功等类型"
+    },
+    {
+      "id": "button_loading",
+      "title": "加载状态按钮",
+      "description": "点击按钮后显示加载状态",
+      "difficulty": "medium",
+      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button } from '@king-design/vue';\n\nconst loading = ref(false);\n\nconst handleClick = () => {\n  loading.value = true;\n  setTimeout(() => {\n    loading.value = false;\n  }, 2000);\n};\n</script>\n<template>\n  <Button type=\"primary\" :loading=\"loading\" @click=\"handleClick\">\n    {{ loading ? '提交中...' : '点击提交' }}\n  </Button>\n</template>",
+      "tags": [
+        "loading",
+        "async",
+        "click"
+      ],
+      "usedProps": [
+        "type",
+        "loading"
+      ],
+      "usedEvents": [],
+      "usedSlots": [
+        "default"
+      ],
+      "usedMethods": [],
+      "scenario": "创建一个点击后进入加载状态的按钮，模拟异步提交操作"
+    },
+    {
+      "id": "button_group_radio",
+      "title": "单选按钮组",
+      "description": "使用ButtonGroup实现单选功能",
+      "difficulty": "medium",
+      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, ButtonGroup } from '@king-design/vue';\n\nconst selected = ref('beijing');\n</script>\n<template>\n  <ButtonGroup checkType=\"radio\" v-model=\"selected\">\n    <Button value=\"beijing\">北京</Button>\n    <Button value=\"shanghai\">上海</Button>\n    <Button value=\"guangzhou\">广州</Button>\n  </ButtonGroup>\n  <p>当前选中: {{ selected }}</p>\n</template>",
+      "tags": [
+        "buttongroup",
+        "radio",
+        "v-model"
+      ],
+      "usedProps": [
+        "checkType",
+        "value"
+      ],
+      "usedEvents": [],
+      "usedSlots": [
+        "default"
+      ],
+      "usedMethods": [],
+      "scenario": "创建一个城市选择的单选按钮组，支持双向绑定"
+    },
+    {
+      "id": "button_icon",
+      "title": "图标按钮",
+      "description": "创建带图标的按钮",
+      "difficulty": "easy",
+      "code": "<script setup lang=\"ts\">\nimport { Button, Icon } from '@king-design/vue';\n</script>\n<template>\n  <Button icon><Icon class=\"k-icon-search\" /></Button>\n  <Button icon circle type=\"primary\"><Icon class=\"k-icon-plus\" /></Button>\n  <Button type=\"primary\"><Icon class=\"k-icon-search\" /> 搜索</Button>\n</template>",
+      "tags": [
+        "icon",
+        "circle"
+      ],
+      "usedProps": [
+        "icon",
+        "circle",
+        "type"
+      ],
+      "usedEvents": [],
+      "usedSlots": [
+        "default"
+      ],
+      "usedMethods": [],
+      "scenario": "创建图标按钮，包括方形图标按钮、圆形图标按钮、带图标文字的按钮"
+    }
+  ],
+  "commonMistakes": [
+    {
+      "id": "button_type_typo",
+      "description": "type 属性值拼写错误",
+      "wrongCode": "<Button type=\"primay\">",
+      "correctCode": "<Button type=\"primary\">",
+      "explanation": "type 必须使用预定义的值：default, primary, warning, danger, success, secondary, link, flat, none。常见错误是 primary 拼写为 primay",
+      "relatedProps": [
+        "type"
+      ]
+    },
+    {
+      "id": "button_size_invalid",
+      "description": "使用不存在的 size 值 (Button)",
+      "wrongCode": "<Button size=\"medium\">",
+      "correctCode": "<Button size=\"default\">",
+      "explanation": "Button 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。",
+      "relatedProps": [
+        "size"
+      ]
+    },
+    {
+      "id": "buttongroup_no_value",
+      "description": "单选/复选按钮组未给 Button 设置 value",
+      "wrongCode": "<ButtonGroup checkType=\"radio\" v-model=\"selected\">\n  <Button>选项A</Button>\n  <Button>选项B</Button>\n</ButtonGroup>",
+      "correctCode": "<ButtonGroup checkType=\"radio\" v-model=\"selected\">\n  <Button value=\"a\">选项A</Button>\n  <Button value=\"b\">选项B</Button>\n</ButtonGroup>",
+      "explanation": "使用 checkType=\"radio\" 或 checkType=\"checkbox\" 时，每个 Button 必须设置 value 属性，否则无法正确绑定选中值",
+      "relatedProps": [
+        "checkType",
+        "value"
+      ]
+    }
+  ],
+  "searchKeywords": [
+    "按钮",
+    "button",
+    "提交",
+    "点击",
+    "操作",
+    "ButtonGroup",
+    "按钮组",
+    "单选",
+    "复选",
+    "loading",
+    "加载"
+  ],
+  "useCases": [
+    "表单提交按钮",
+    "操作确认按钮",
+    "导航链接按钮",
+    "带 loading 的异步操作按钮",
+    "城市切换单选按钮组",
+    "多选标签按钮组"
+  ],
+  "relatedComponents": [
+    "ButtonGroup",
+    "Icon"
+  ]
+}