king-design-analyzer 1.0.0

package/components/slider.json

@@ -0,0 +1,422 @@
+{
+    "id": "slider",
+    "name": "Slider",
+    "displayName": "滑块",
+    "category": "form",
+    "description": "滑块组件，用于在一个范围内选择数值。支持单值选择和范围选择、自定义步长、刻度标注、提示气泡等功能。",
+    "importStatement": "import { Slider } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前值，可用 v-model 双向绑定。范围选择时为 [number, number] 数组",
+            "type": {
+                "raw": "number | [number, number]",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Slider v-model=\"value\" />"
+        },
+        {
+            "name": "min",
+            "description": "最小值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Slider :min=\"0\" />"
+        },
+        {
+            "name": "max",
+            "description": "最大值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "100",
+            "usageExample": "<Slider :max=\"200\" />"
+        },
+        {
+            "name": "range",
+            "description": "是否是范围选择（双滑块）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Slider v-model=\"rangeValue\" range />"
+        },
+        {
+            "name": "step",
+            "description": "步长，支持数字、对象配置或函数",
+            "type": {
+                "raw": "number | StepObject | StepFunction",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "1",
+            "usageExample": "<Slider :step=\"10\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Slider disabled />"
+        },
+        {
+            "name": "unit",
+            "description": "单位，用于刻度展示",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\"",
+            "usageExample": "<Slider unit=\"%\" />"
+        },
+        {
+            "name": "showEnd",
+            "description": "是否展示最小值和最大值刻度",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Slider :showEnd=\"false\" />"
+        },
+        {
+            "name": "showInput",
+            "description": "是否展示输入框",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Slider :showInput=\"false\" />"
+        },
+        {
+            "name": "showTooltip",
+            "description": "是否展示提示气泡",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Slider showTooltip />"
+        },
+        {
+            "name": "always",
+            "description": "当展示气泡时，是否一直展示",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Slider showTooltip always />"
+        },
+        {
+            "name": "points",
+            "description": "是否展示间隔点，或指定哪些值展示间隔点",
+            "type": {
+                "raw": "boolean | number[]",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Slider :points=\"[25, 50, 75]\" />"
+        },
+        {
+            "name": "marks",
+            "description": "标注刻度，对象形式指定位置和标签",
+            "type": {
+                "raw": "Marks",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Slider :marks=\"{0: '低', 50: '中', 100: '高'}\" />"
+        },
+        {
+            "name": "animate",
+            "description": "滑块移动是否使用缓动动画",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Slider :animate=\"false\" />"
+        },
+        {
+            "name": "forceStep",
+            "description": "是否限制 value（除边界外）满足 min + step * n",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Slider :forceStep=\"false\" />"
+        },
+        {
+            "name": "tooltipProps",
+            "description": "设置内置 Tooltip 的所有属性",
+            "type": {
+                "raw": "TooltipProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Slider showTooltip :tooltipProps=\"{position: 'bottom'}\" />"
+        },
+        {
+            "name": "spinnerProps",
+            "description": "设置内置 Spinner 输入框的所有属性",
+            "type": {
+                "raw": "SpinnerProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Slider :spinnerProps=\"{precision: 2}\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当值变化时触发，拖动过程中不会触发，拖动结束时触发",
+            "payload": [
+                {
+                    "name": "newValue",
+                    "type": "number | [number, number]",
+                    "description": "新的值"
+                },
+                {
+                    "name": "oldValue",
+                    "type": "number | [number, number]",
+                    "description": "旧的值"
+                }
+            ],
+            "usageExample": "<Slider @change=\"handleChange\" />",
+            "handlerExample": "const handleChange = (newVal: number, oldVal: number) => {\n  console.log(`值从 ${oldVal} 变为 ${newVal}`);\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "tooltip",
+            "description": "当展示提示气泡，定义气泡的内容，和Tooltip组件行为一样，如果你传入空的内容，则不会展示气泡"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "StepObject",
+            "definition": "type StepObject = {\n  [key in number]: number\n} & {\n  $?: number\n}",
+            "description": "动态步长对象，key 为阈值，value 为该阈值后的步长"
+        },
+        {
+            "name": "StepFunction",
+            "definition": "type StepFunction = (value: number) => number",
+            "description": "动态步长函数"
+        },
+        {
+            "name": "Marks",
+            "definition": "type MarkKey = string | number\ntype MarkValue = MarkKey | [MarkKey] | [MarkKey, MarkKey]\ntype Marks = Record<MarkKey, MarkValue>",
+            "description": "刻度标注配置"
+        }
+    ],
+    "examples": [
+        {
+            "id": "slider_basic",
+            "title": "基础用法",
+            "description": "基本的滑块",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(30);\n</script>\n<template>\n  <Slider v-model=\"value\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的滑块"
+        },
+        {
+            "id": "slider_range",
+            "title": "范围选择",
+            "description": "双滑块范围选择",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref<[number, number]>([20, 80]);\n</script>\n<template>\n  <Slider v-model=\"value\" range />\n</template>",
+            "tags": [
+                "range",
+                "dual"
+            ],
+            "usedProps": [
+                "value",
+                "range"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建范围选择的双滑块"
+        },
+        {
+            "id": "slider_min_max_step",
+            "title": "范围和步长",
+            "description": "设置最小值、最大值和步长",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(50);\n</script>\n<template>\n  <Slider v-model=\"value\" :min=\"0\" :max=\"200\" :step=\"10\" />\n</template>",
+            "tags": [
+                "min",
+                "max",
+                "step"
+            ],
+            "usedProps": [
+                "value",
+                "min",
+                "max",
+                "step"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置滑块的范围和步长"
+        },
+        {
+            "id": "slider_marks",
+            "title": "刻度标注",
+            "description": "添加刻度标注",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(30);\nconst marks = {\n  0: '0°C',\n  25: '25°C',\n  50: '50°C',\n  100: '100°C'\n};\n</script>\n<template>\n  <Slider v-model=\"value\" :marks=\"marks\" />\n</template>",
+            "tags": [
+                "marks",
+                "label"
+            ],
+            "usedProps": [
+                "value",
+                "marks"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "添加刻度标注显示"
+        },
+        {
+            "id": "slider_tooltip",
+            "title": "显示气泡",
+            "description": "拖动时显示提示气泡",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(50);\n</script>\n<template>\n  <Slider v-model=\"value\" showTooltip />\n</template>",
+            "tags": [
+                "tooltip",
+                "tip"
+            ],
+            "usedProps": [
+                "value",
+                "showTooltip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "拖动时显示当前值气泡"
+        },
+        {
+            "id": "slider_disabled",
+            "title": "禁用状态",
+            "description": "禁用滑块",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(30);\n</script>\n<template>\n  <Slider v-model=\"value\" disabled />\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用滑块"
+        },
+        {
+            "id": "slider_no_input",
+            "title": "隐藏输入框",
+            "description": "不显示输入框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Slider } from '@king-design/vue';\n\nconst value = ref(50);\n</script>\n<template>\n  <Slider v-model=\"value\" :showInput=\"false\" showTooltip />\n</template>",
+            "tags": [
+                "noInput",
+                "simple"
+            ],
+            "usedProps": [
+                "value",
+                "showInput",
+                "showTooltip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "只显示滑块不显示输入框"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "slider_range_value_type",
+            "description": "范围选择时 value 类型错误",
+            "wrongCode": "const value = ref(50);\n<Slider v-model=\"value\" range />",
+            "correctCode": "const value = ref<[number, number]>([20, 80]);\n<Slider v-model=\"value\" range />",
+            "explanation": "当 range 为 true 时，value 必须是 [number, number] 数组",
+            "relatedProps": [
+                "value",
+                "range"
+            ]
+        },
+        {
+            "id": "slider_step_type",
+            "description": "step 使用字符串而非数字",
+            "wrongCode": "<Slider step=\"10\" />",
+            "correctCode": "<Slider :step=\"10\" />",
+            "explanation": "step 是数字类型，需要使用 v-bind 语法",
+            "relatedProps": [
+                "step"
+            ]
+        },
+        {
+            "id": "slider_marks_format",
+            "description": "marks 格式错误",
+            "wrongCode": "const marks = ['低', '中', '高'];",
+            "correctCode": "const marks = {\n  0: '低',\n  50: '中',\n  100: '高'\n};",
+            "explanation": "marks 必须是对象格式，key 为位置值，value 为显示文本",
+            "relatedProps": [
+                "marks"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "滑块",
+        "slider",
+        "范围选择",
+        "数值选择",
+        "拖动",
+        "刻度"
+    ],
+    "useCases": [
+        "音量调节",
+        "价格范围筛选",
+        "亮度调节",
+        "进度控制",
+        "数值范围选择"
+    ],
+    "relatedComponents": [
+        "Spinner"
+    ]
+}

package/components/spin.json

@@ -0,0 +1,232 @@
+{
+    "id": "spin",
+    "name": "Spin",
+    "displayName": "加载中",
+    "category": "feedback",
+    "description": "加载中组件，用于展示加载状态的旋转动画。支持多种尺寸、居中显示、带遮罩层覆盖内容等功能。常用于数据加载、页面切换等场景。",
+    "importStatement": "import { Spin } from '@king-design/vue';",
+    "props": [
+        {
+            "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": "<Spin size=\"small\" />"
+        },
+        {
+            "name": "center",
+            "description": "是否居中展示，需要父元素为定位元素（position: relative/absolute）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Spin center />"
+        },
+        {
+            "name": "overlay",
+            "description": "是否展示带遮罩层的加载动画，需要父元素为定位元素",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Spin overlay center />"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "canvas",
+            "description": "自定义旋转的元素内容"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "spin_basic",
+            "title": "基础用法",
+            "description": "基本的加载动画",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Spin } from '@king-design/vue';\n</script>\n<template>\n  <Spin />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示基本的加载动画"
+        },
+        {
+            "id": "spin_sizes",
+            "title": "不同尺寸",
+            "description": "四种尺寸的加载动画",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Spin } from '@king-design/vue';\n</script>\n<template>\n  <Spin size=\"mini\" />\n  <Spin size=\"small\" />\n  <Spin size=\"default\" />\n  <Spin size=\"large\" />\n</template>",
+            "tags": [
+                "size",
+                "mini",
+                "small",
+                "large"
+            ],
+            "usedProps": [
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同尺寸的加载动画"
+        },
+        {
+            "id": "spin_center",
+            "title": "居中展示",
+            "description": "在容器中居中显示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Spin } from '@king-design/vue';\n</script>\n<template>\n  <div style=\"position: relative; height: 100px; border: 1px solid #eee;\">\n    <Spin center />\n  </div>\n</template>",
+            "tags": [
+                "center"
+            ],
+            "usedProps": [
+                "center"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在容器中居中显示加载动画"
+        },
+        {
+            "id": "spin_overlay",
+            "title": "带遮罩层",
+            "description": "带遮罩层覆盖内容的加载状态",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spin, Button } from '@king-design/vue';\n\nconst loading = ref(true);\n</script>\n<template>\n  <div style=\"position: relative; height: 200px;\">\n    <Spin v-if=\"loading\" overlay center />\n    <div>\n      <p>内容区域</p>\n      <p>加载时会被遮罩覆盖</p>\n    </div>\n  </div>\n  <Button @click=\"loading = !loading\">切换加载状态</Button>\n</template>",
+            "tags": [
+                "overlay",
+                "mask"
+            ],
+            "usedProps": [
+                "overlay",
+                "center"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "带遮罩层的加载状态"
+        },
+        {
+            "id": "spin_card",
+            "title": "卡片加载",
+            "description": "卡片内容加载状态",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spin, Card } from '@king-design/vue';\n\nconst loading = ref(true);\n</script>\n<template>\n  <Card title=\"数据列表\" style=\"position: relative;\">\n    <Spin v-if=\"loading\" overlay center />\n    <p>这是卡片内容</p>\n    <p>加载时会显示遮罩层</p>\n  </Card>\n</template>",
+            "tags": [
+                "card",
+                "content"
+            ],
+            "usedProps": [
+                "overlay",
+                "center"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "卡片内容的加载状态展示"
+        },
+        {
+            "id": "spin_button",
+            "title": "按钮加载",
+            "description": "配合按钮使用的加载状态",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spin, Button } from '@king-design/vue';\n\nconst loading = ref(false);\n\nconst handleClick = async () => {\n  loading.value = true;\n  await new Promise(r => setTimeout(r, 2000));\n  loading.value = false;\n};\n</script>\n<template>\n  <Button @click=\"handleClick\" :disabled=\"loading\">\n    <Spin v-if=\"loading\" size=\"mini\" /> 提交\n  </Button>\n</template>",
+            "tags": [
+                "button",
+                "inline"
+            ],
+            "usedProps": [
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "按钮内嵌加载动画"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "spin_center_no_position",
+            "description": "使用 center 但父元素无定位",
+            "wrongCode": "<div>\n  <Spin center />\n</div>",
+            "correctCode": "<div style=\"position: relative; height: 100px;\">\n  <Spin center />\n</div>",
+            "explanation": "使用 center 属性时，父元素必须设置 position: relative 或 absolute",
+            "relatedProps": [
+                "center"
+            ]
+        },
+        {
+            "id": "spin_overlay_no_position",
+            "description": "使用 overlay 但父元素无定位",
+            "wrongCode": "<div>\n  <Spin overlay />\n  <p>内容</p>\n</div>",
+            "correctCode": "<div style=\"position: relative;\">\n  <Spin overlay center />\n  <p>内容</p>\n</div>",
+            "explanation": "使用 overlay 时，父元素必须设置定位，且通常配合 center 使用",
+            "relatedProps": [
+                "overlay",
+                "center"
+            ]
+        },
+        {
+            "id": "spin_size_typo",
+            "description": "size 值拼写错误",
+            "wrongCode": "<Spin size=\"xs\" />",
+            "correctCode": "<Spin size=\"mini\" />",
+            "explanation": "size 只支持 large, default, small, mini，不存在 xs 值",
+            "relatedProps": [
+                "size"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "加载",
+        "spin",
+        "loading",
+        "旋转",
+        "等待",
+        "遮罩"
+    ],
+    "useCases": [
+        "数据加载中",
+        "页面加载状态",
+        "表格数据刷新",
+        "表单提交等待",
+        "卡片内容加载"
+    ],
+    "relatedComponents": [
+        "Skeleton",
+        "Progress"
+    ]
+}