king-design-analyzer 1.0.0

package/components/steps.json

@@ -0,0 +1,292 @@
+{
+    "id": "steps",
+    "name": "Steps",
+    "displayName": "步骤条",
+    "category": "navigation",
+    "description": "步骤条组件，用于引导用户按照流程完成任务。支持多种样式、垂直布局、可点击切换、错误状态等功能。配合 Step 子组件使用。",
+    "importStatement": "import { Steps, Step } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前第几步，从 0 开始，可用 v-model 双向绑定",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Steps :value=\"current\">"
+        },
+        {
+            "name": "status",
+            "description": "步骤条的状态",
+            "type": {
+                "raw": "\"normal\" | \"error\"",
+                "kind": "union",
+                "unionTypes": [
+                    "normal",
+                    "error"
+                ]
+            },
+            "required": false,
+            "default": "\"normal\"",
+            "allowedValues": [
+                {
+                    "value": "normal",
+                    "label": "正常状态",
+                    "isDefault": true
+                },
+                {
+                    "value": "error",
+                    "label": "错误状态"
+                }
+            ],
+            "usageExample": "<Steps status=\"error\">"
+        },
+        {
+            "name": "type",
+            "description": "步骤条样式",
+            "type": {
+                "raw": "\"default\" | \"line\" | \"simple\" | \"line-compact\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "line",
+                    "simple",
+                    "line-compact"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认样式",
+                    "isDefault": true
+                },
+                {
+                    "value": "line",
+                    "label": "线条样式"
+                },
+                {
+                    "value": "simple",
+                    "label": "简洁样式"
+                },
+                {
+                    "value": "line-compact",
+                    "label": "紧凑线条样式"
+                }
+            ],
+            "usageExample": "<Steps type=\"line\">"
+        },
+        {
+            "name": "clickable",
+            "description": "是否支持快速切换已完成的步骤",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Steps v-model=\"current\" clickable>"
+        },
+        {
+            "name": "vertical",
+            "description": "是否垂直排列",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Steps vertical>"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "Step",
+            "description": "步骤项组件，用于定义每个步骤的标题和内容",
+            "props": [
+                {
+                    "name": "title",
+                    "description": "步骤标题",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<Step title=\"步骤1\" />"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "steps_basic",
+            "title": "基础用法",
+            "description": "基本的步骤条",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step } from '@king-design/vue';\n\nconst current = ref(1);\n</script>\n<template>\n  <Steps :value=\"current\">\n    <Step title=\"步骤1\" />\n    <Step title=\"步骤2\" />\n    <Step title=\"步骤3\" />\n  </Steps>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的步骤条"
+        },
+        {
+            "id": "steps_clickable",
+            "title": "可点击切换",
+            "description": "支持点击切换已完成的步骤",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step } from '@king-design/vue';\n\nconst current = ref(0);\n</script>\n<template>\n  <Steps v-model=\"current\" clickable>\n    <Step title=\"填写信息\" />\n    <Step title=\"确认信息\" />\n    <Step title=\"完成\" />\n  </Steps>\n</template>",
+            "tags": [
+                "clickable",
+                "interactive"
+            ],
+            "usedProps": [
+                "value",
+                "clickable",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "可以点击已完成的步骤进行切换"
+        },
+        {
+            "id": "steps_vertical",
+            "title": "垂直步骤条",
+            "description": "垂直排列的步骤条",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step } from '@king-design/vue';\n\nconst current = ref(1);\n</script>\n<template>\n  <Steps :value=\"current\" vertical>\n    <Step title=\"步骤1\" />\n    <Step title=\"步骤2\" />\n    <Step title=\"步骤3\" />\n  </Steps>\n</template>",
+            "tags": [
+                "vertical"
+            ],
+            "usedProps": [
+                "value",
+                "vertical",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建垂直排列的步骤条"
+        },
+        {
+            "id": "steps_error",
+            "title": "错误状态",
+            "description": "显示当前步骤为错误状态",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step } from '@king-design/vue';\n\nconst current = ref(1);\n</script>\n<template>\n  <Steps :value=\"current\" status=\"error\">\n    <Step title=\"步骤1\" />\n    <Step title=\"步骤2（错误）\" />\n    <Step title=\"步骤3\" />\n  </Steps>\n</template>",
+            "tags": [
+                "error",
+                "status"
+            ],
+            "usedProps": [
+                "value",
+                "status",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "显示当前步骤为错误状态"
+        },
+        {
+            "id": "steps_types",
+            "title": "不同类型",
+            "description": "不同样式的步骤条",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step } from '@king-design/vue';\n\nconst current = ref(1);\n</script>\n<template>\n  <Steps :value=\"current\" type=\"line\">\n    <Step title=\"步骤1\" />\n    <Step title=\"步骤2\" />\n    <Step title=\"步骤3\" />\n  </Steps>\n</template>",
+            "tags": [
+                "type",
+                "line",
+                "simple"
+            ],
+            "usedProps": [
+                "value",
+                "type",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用线条样式的步骤条"
+        },
+        {
+            "id": "steps_wizard",
+            "title": "向导流程",
+            "description": "完整的向导流程示例",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Steps, Step, Button, Card } from '@king-design/vue';\n\nconst current = ref(0);\n\nconst next = () => {\n  if (current.value < 2) current.value++;\n};\n\nconst prev = () => {\n  if (current.value > 0) current.value--;\n};\n</script>\n<template>\n  <Steps :value=\"current\">\n    <Step title=\"填写信息\" />\n    <Step title=\"确认信息\" />\n    <Step title=\"完成\" />\n  </Steps>\n  <Card style=\"margin-top: 16px;\">\n    <div v-if=\"current === 0\">步骤1: 填写信息的内容</div>\n    <div v-if=\"current === 1\">步骤2: 确认信息的内容</div>\n    <div v-if=\"current === 2\">步骤3: 完成!</div>\n    <div style=\"margin-top: 16px;\">\n      <Button v-if=\"current > 0\" @click=\"prev\">上一步</Button>\n      <Button v-if=\"current < 2\" type=\"primary\" @click=\"next\">下一步</Button>\n    </div>\n  </Card>\n</template>",
+            "tags": [
+                "wizard",
+                "flow",
+                "complete"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "完整的向导流程示例"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "steps_value_start",
+            "description": "value 从 1 开始而非 0",
+            "wrongCode": "const current = ref(1); // 期望第一步\n<Steps :value=\"current\">",
+            "correctCode": "const current = ref(0); // 第一步\n<Steps :value=\"current\">",
+            "explanation": "Steps 的 value 从 0 开始，0 表示第一步",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "steps_clickable_vmodel",
+            "description": "使用 clickable 但未用 v-model",
+            "wrongCode": "<Steps :value=\"current\" clickable> <!-- 点击不会改变值 -->",
+            "correctCode": "<Steps v-model=\"current\" clickable>",
+            "explanation": "使用 clickable 时需要用 v-model 进行双向绑定才能响应点击",
+            "relatedProps": [
+                "value",
+                "clickable"
+            ]
+        },
+        {
+            "id": "steps_type_typo",
+            "description": "type 值拼写错误",
+            "wrongCode": "<Steps type=\"compact\">",
+            "correctCode": "<Steps type=\"line-compact\">",
+            "explanation": "type 只支持 default, line, simple, line-compact",
+            "relatedProps": [
+                "type"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "步骤条",
+        "steps",
+        "向导",
+        "wizard",
+        "流程",
+        "进度"
+    ],
+    "useCases": [
+        "注册流程",
+        "订单流程",
+        "表单向导",
+        "任务进度展示",
+        "安装向导"
+    ],
+    "relatedComponents": [
+        "Step",
+        "Progress"
+    ]
+}

package/components/switch.json

@@ -0,0 +1,357 @@
+{
+    "id": "switch",
+    "name": "Switch",
+    "displayName": "开关",
+    "category": "form",
+    "description": "开关组件，用于切换两种状态。支持自定义开关文案、自定义值、切换前拦截、加载状态等功能。在 Vue 中使用时可能需要重命名为 KSwitch。",
+    "importStatement": "import { Switch } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "开关当前值，可用 v-model 双向绑定",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Switch v-model=\"value\" />"
+        },
+        {
+            "name": "trueValue",
+            "description": "开启时的值",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Switch trueValue=\"on\" falseValue=\"off\" />"
+        },
+        {
+            "name": "falseValue",
+            "description": "关闭时的值",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Switch trueValue=\"1\" falseValue=\"0\" />"
+        },
+        {
+            "name": "on",
+            "description": "开启时显示的文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch on=\"开\" off=\"关\" />"
+        },
+        {
+            "name": "off",
+            "description": "关闭时显示的文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch on=\"ON\" off=\"OFF\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Switch disabled />"
+        },
+        {
+            "name": "loading",
+            "description": "是否显示加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Switch :loading=\"isLoading\" />"
+        },
+        {
+            "name": "size",
+            "description": "尺寸",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Switch size=\"small\" />"
+        },
+        {
+            "name": "width",
+            "description": "开关的宽度",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch :width=\"60\" />"
+        },
+        {
+            "name": "height",
+            "description": "开关的高度",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch :height=\"24\" />"
+        },
+        {
+            "name": "name",
+            "description": "开关的名称，用于表单提交",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch name=\"enable\" />"
+        },
+        {
+            "name": "beforeChange",
+            "description": "切换前的拦截函数，返回 false 阻止切换，支持异步",
+            "type": {
+                "raw": "(from: any, to: any) => boolean | Promise<boolean>",
+                "kind": "function",
+                "functionSignature": "(from: any, to: any) => boolean | Promise<boolean>"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Switch :beforeChange=\"handleBeforeChange\" />"
+        }
+    ],
+    "slots": [
+        {
+            "name": "on",
+            "description": "扩展开启时的文案"
+        },
+        {
+            "name": "off",
+            "description": "扩展关闭时的文案"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "switch_basic",
+            "title": "基础用法",
+            "description": "基本的开关",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst value = ref(false);\n</script>\n<template>\n  <Switch v-model=\"value\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的开关"
+        },
+        {
+            "id": "switch_text",
+            "title": "显示文案",
+            "description": "显示开启/关闭文案",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst value = ref(true);\n</script>\n<template>\n  <Switch v-model=\"value\" on=\"开\" off=\"关\" />\n</template>",
+            "tags": [
+                "on",
+                "off",
+                "text"
+            ],
+            "usedProps": [
+                "value",
+                "on",
+                "off"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在开关上显示开启/关闭文案"
+        },
+        {
+            "id": "switch_disabled",
+            "title": "禁用状态",
+            "description": "禁用开关",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst value = ref(true);\n</script>\n<template>\n  <Switch v-model=\"value\" disabled />\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用开关"
+        },
+        {
+            "id": "switch_loading",
+            "title": "加载状态",
+            "description": "显示加载状态的开关",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst value = ref(false);\nconst loading = ref(false);\n</script>\n<template>\n  <Switch v-model=\"value\" :loading=\"loading\" />\n</template>",
+            "tags": [
+                "loading"
+            ],
+            "usedProps": [
+                "value",
+                "loading"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "显示加载状态的开关"
+        },
+        {
+            "id": "switch_before_change",
+            "title": "切换前确认",
+            "description": "切换前弹出确认对话框",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch, Dialog } from '@king-design/vue';\n\nconst value = ref(false);\n\nconst beforeChange = async () => {\n  try {\n    await Dialog.confirm({ content: '确定要切换吗？' });\n    return true;\n  } catch {\n    return false;\n  }\n};\n</script>\n<template>\n  <Switch v-model=\"value\" :beforeChange=\"beforeChange\" />\n</template>",
+            "tags": [
+                "beforeChange",
+                "confirm"
+            ],
+            "usedProps": [
+                "value",
+                "beforeChange"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "切换前弹出确认对话框"
+        },
+        {
+            "id": "switch_custom_value",
+            "title": "自定义值",
+            "description": "使用自定义的开关值",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst status = ref('inactive');\n</script>\n<template>\n  <Switch v-model=\"status\" trueValue=\"active\" falseValue=\"inactive\" />\n  <p>当前状态: {{ status }}</p>\n</template>",
+            "tags": [
+                "trueValue",
+                "falseValue",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue",
+                "falseValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用自定义的字符串值作为开关状态"
+        },
+        {
+            "id": "switch_sizes",
+            "title": "不同尺寸",
+            "description": "不同尺寸的开关",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Switch } from '@king-design/vue';\n\nconst value = ref(true);\n</script>\n<template>\n  <Switch v-model=\"value\" size=\"mini\" />\n  <Switch v-model=\"value\" size=\"small\" />\n  <Switch v-model=\"value\" size=\"default\" />\n  <Switch v-model=\"value\" size=\"large\" />\n</template>",
+            "tags": [
+                "size"
+            ],
+            "usedProps": [
+                "value",
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同尺寸的开关"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "switch_vue_name",
+            "description": "在 Vue 中使用保留字 Switch",
+            "wrongCode": "import { Switch } from '@king-design/vue';\n// 可能在某些情况下与 Vue 保留字冲突",
+            "correctCode": "import { Switch as KSwitch } from '@king-design/vue';\n// 或直接使用 Switch，现代 Vue 3 通常没问题",
+            "explanation": "在某些 Vue 版本中，Switch 可能是保留字，可以重命名为 KSwitch",
+            "relatedProps": []
+        },
+        {
+            "id": "switch_beforechange_return",
+            "description": "beforeChange 函数未正确返回布尔值",
+            "wrongCode": "const beforeChange = async () => {\n  await Dialog.confirm({});\n  // 忘记返回 true\n}",
+            "correctCode": "const beforeChange = async () => {\n  try {\n    await Dialog.confirm({});\n    return true;\n  } catch {\n    return false;\n  }\n}",
+            "explanation": "beforeChange 必须返回布尔值，true 允许切换，false 阻止切换",
+            "relatedProps": [
+                "beforeChange"
+            ]
+        },
+        {
+            "id": "switch_custom_value_type",
+            "description": "自定义值类型与初始值不匹配",
+            "wrongCode": "const value = ref(false);\n<Switch v-model=\"value\" trueValue=\"yes\" falseValue=\"no\" />",
+            "correctCode": "const value = ref('no');\n<Switch v-model=\"value\" trueValue=\"yes\" falseValue=\"no\" />",
+            "explanation": "使用自定义值时，初始值应该与 trueValue 或 falseValue 类型和值匹配",
+            "relatedProps": [
+                "value",
+                "trueValue",
+                "falseValue"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "开关",
+        "switch",
+        "切换",
+        "toggle",
+        "布尔",
+        "状态切换"
+    ],
+    "useCases": [
+        "功能开关",
+        "设置项切换",
+        "状态启用/禁用",
+        "表单布尔输入",
+        "偏好设置"
+    ],
+    "relatedComponents": [
+        "Checkbox"
+    ]
+}