king-design-analyzer 1.0.0

package/components/spinner.json

@@ -0,0 +1,441 @@
+{
+    "id": "spinner",
+    "name": "Spinner",
+    "displayName": "数字输入框",
+    "category": "form",
+    "description": "用于输入数字的组件，支持设置范围、步长、精度，以及格式化展示。可通过加减按钮或直接输入来调整数值。",
+    "importStatement": "import { Spinner } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "组件的值，可用 v-model 进行双向绑定",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Spinner v-model=\"count\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Spinner disabled />"
+        },
+        {
+            "name": "max",
+            "description": "最大值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "Number.POSITIVE_INFINITY",
+            "usageExample": "<Spinner :max=\"100\" />"
+        },
+        {
+            "name": "min",
+            "description": "最小值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "Number.NEGATIVE_INFINITY",
+            "usageExample": "<Spinner :min=\"0\" />"
+        },
+        {
+            "name": "step",
+            "description": "步长，支持数字、对象或函数形式的动态步长",
+            "type": {
+                "raw": "number | StepObject | StepFunction",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "1",
+            "usageExample": "<Spinner :step=\"5\" />"
+        },
+        {
+            "name": "size",
+            "description": "尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Spinner size=\"small\" />"
+        },
+        {
+            "name": "vertical",
+            "description": "控制按钮是否竖直排列",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Spinner vertical />"
+        },
+        {
+            "name": "precision",
+            "description": "控制展示精度，该值必须为正整数或 0",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "undefined",
+            "valueConstraints": [
+                {
+                    "type": "min",
+                    "value": 0,
+                    "message": "precision 必须为正整数或 0"
+                }
+            ],
+            "usageExample": "<Spinner :precision=\"2\" :step=\"0.1\" />"
+        },
+        {
+            "name": "formatter",
+            "description": "定义格式化展示值的函数",
+            "type": {
+                "raw": "(value: number) => string",
+                "kind": "function",
+                "functionSignature": "(value: number) => string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Spinner :formatter=\"(val) => `${val}%`\" :parser=\"(val) => parseFloat(val)\" />"
+        },
+        {
+            "name": "parser",
+            "description": "与 formatter 结合使用，定义解析格式化的值的函数",
+            "type": {
+                "raw": "(value: string) => number",
+                "kind": "function",
+                "functionSignature": "(value: string) => number"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Spinner :formatter=\"(val) => `${val}%`\" :parser=\"(val) => parseFloat(val)\" />"
+        },
+        {
+            "name": "prefix",
+            "description": "定义展示的值的前缀，优先级低于 formatter",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Spinner prefix=\"¥\" />"
+        },
+        {
+            "name": "suffix",
+            "description": "定义展示的值的后缀，优先级低于 formatter",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Spinner suffix=\"元\" />"
+        },
+        {
+            "name": "width",
+            "description": "指定 Input 输入框的宽度",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Spinner :width=\"150\" />"
+        },
+        {
+            "name": "forceStep",
+            "description": "value 值除了边界值，都必须满足 min + step * n（n 为整数）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Spinner :min=\"0\" :step=\"5\" forceStep />"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "value 值变化时触发，仅在输入框 change 事件触发或点击加减按钮改变 value 时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "number",
+                    "description": "当前的数值"
+                }
+            ],
+            "usageExample": "<Spinner @change=\"handleChange\" />",
+            "handlerExample": "const handleChange = (value: number) => {\n  console.log('当前值:', value);\n};"
+        }
+    ],
+    "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": "动态步长函数，根据当前值返回步长"
+        }
+    ],
+    "examples": [
+        {
+            "id": "spinner_basic",
+            "title": "基础用法",
+            "description": "基本的数字输入框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(0);\n</script>\n<template>\n  <Spinner v-model=\"value\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的数字输入框"
+        },
+        {
+            "id": "spinner_range",
+            "title": "设置范围",
+            "description": "限制数值的最小值和最大值",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(5);\n</script>\n<template>\n  <Spinner v-model=\"value\" :min=\"0\" :max=\"10\" />\n</template>",
+            "tags": [
+                "min",
+                "max",
+                "range"
+            ],
+            "usedProps": [
+                "value",
+                "min",
+                "max"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建有范围限制的数字输入框"
+        },
+        {
+            "id": "spinner_step",
+            "title": "设置步长",
+            "description": "每次增减的数值大小",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(0);\n</script>\n<template>\n  <Spinner v-model=\"value\" :step=\"5\" />\n</template>",
+            "tags": [
+                "step"
+            ],
+            "usedProps": [
+                "value",
+                "step"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置每次点击加减按钮增减的步长"
+        },
+        {
+            "id": "spinner_precision",
+            "title": "小数精度",
+            "description": "控制小数位数",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(0);\n</script>\n<template>\n  <Spinner v-model=\"value\" :precision=\"2\" :step=\"0.1\" />\n</template>",
+            "tags": [
+                "precision",
+                "decimal"
+            ],
+            "usedProps": [
+                "value",
+                "precision",
+                "step"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建支持小数输入的数字输入框"
+        },
+        {
+            "id": "spinner_prefix_suffix",
+            "title": "前后缀",
+            "description": "添加前缀或后缀显示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst price = ref(100);\nconst percent = ref(50);\n</script>\n<template>\n  <Spinner v-model=\"price\" prefix=\"¥\" />\n  <Spinner v-model=\"percent\" suffix=\"%\" />\n</template>",
+            "tags": [
+                "prefix",
+                "suffix",
+                "currency"
+            ],
+            "usedProps": [
+                "value",
+                "prefix",
+                "suffix"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建带货币符号或百分比符号的数字输入框"
+        },
+        {
+            "id": "spinner_vertical",
+            "title": "竖直排列",
+            "description": "加减按钮竖直排列",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(0);\n</script>\n<template>\n  <Spinner v-model=\"value\" vertical />\n</template>",
+            "tags": [
+                "vertical",
+                "layout"
+            ],
+            "usedProps": [
+                "value",
+                "vertical"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建加减按钮竖直排列的数字输入框"
+        },
+        {
+            "id": "spinner_formatter",
+            "title": "格式化显示",
+            "description": "自定义数值的显示格式",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(1000);\n\nconst formatter = (val: number) => {\n  return val.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n};\n\nconst parser = (val: string) => {\n  return Number(val.replace(/,/g, ''));\n};\n</script>\n<template>\n  <Spinner v-model=\"value\" :formatter=\"formatter\" :parser=\"parser\" />\n</template>",
+            "tags": [
+                "formatter",
+                "parser",
+                "format"
+            ],
+            "usedProps": [
+                "value",
+                "formatter",
+                "parser"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建带千分位分隔符格式化的数字输入框"
+        },
+        {
+            "id": "spinner_dynamic_step",
+            "title": "动态步长",
+            "description": "根据当前值动态调整步长",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Spinner } from '@king-design/vue';\n\nconst value = ref(0);\n\n// 值 < 10 时步长为 1，>= 10 时步长为 10\nconst dynamicStep = (val: number) => {\n  return val < 10 ? 1 : 10;\n};\n</script>\n<template>\n  <Spinner v-model=\"value\" :step=\"dynamicStep\" />\n</template>",
+            "tags": [
+                "step",
+                "dynamic",
+                "function"
+            ],
+            "usedProps": [
+                "value",
+                "step"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建步长随当前值变化的数字输入框"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "spinner_precision_negative",
+            "description": "precision 设置为负数",
+            "wrongCode": "<Spinner :precision=\"-1\" />",
+            "correctCode": "<Spinner :precision=\"2\" />",
+            "explanation": "precision 必须为正整数或 0，负数无效",
+            "relatedProps": [
+                "precision"
+            ]
+        },
+        {
+            "id": "spinner_size_typo",
+            "description": "使用不存在的 size 值 (Spinner)",
+            "wrongCode": "<Spinner size=\"large\" />",
+            "correctCode": "<Spinner size=\"default\" />",
+            "explanation": "Spinner 的 size 只支持 default, small, mini。Spinner 组件目前不支持 large 尺寸。",
+            "relatedProps": [
+                "size"
+            ]
+        },
+        {
+            "id": "spinner_formatter_without_parser",
+            "description": "使用 formatter 但未提供 parser",
+            "wrongCode": "<Spinner :formatter=\"(val) => `${val}%`\" />",
+            "correctCode": "<Spinner :formatter=\"(val) => `${val}%`\" :parser=\"(val) => parseFloat(val)\" />",
+            "explanation": "使用 formatter 格式化显示时，必须同时提供 parser 来解析用户输入",
+            "relatedProps": [
+                "formatter",
+                "parser"
+            ]
+        },
+        {
+            "id": "spinner_min_greater_than_max",
+            "description": "min 大于 max",
+            "wrongCode": "<Spinner :min=\"100\" :max=\"0\" />",
+            "correctCode": "<Spinner :min=\"0\" :max=\"100\" />",
+            "explanation": "min 值必须小于或等于 max 值",
+            "relatedProps": [
+                "min",
+                "max"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "数字输入框",
+        "spinner",
+        "数字",
+        "number",
+        "步长",
+        "step",
+        "精度",
+        "precision",
+        "计数器",
+        "counter"
+    ],
+    "useCases": [
+        "数量选择器",
+        "价格/金额输入",
+        "百分比调节",
+        "页码跳转输入",
+        "年龄/年份输入",
+        "配置参数设置"
+    ],
+    "relatedComponents": [
+        "Input",
+        "Slider"
+    ]
+}

package/components/status.json

@@ -0,0 +1,75 @@
+{
+    "id": "status",
+    "name": "Status",
+    "displayName": "状态指示器",
+    "category": "data",
+    "description": "显示状态图标和文本，支持旋转动画。",
+    "importStatement": "import { Status } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "type",
+            "description": "状态类型",
+            "type": {
+                "raw": "StatusType",
+                "kind": "union",
+                "unionTypes": [
+                    "success",
+                    "warning",
+                    "error",
+                    "info",
+                    "loading"
+                ]
+            },
+            "required": false
+        },
+        {
+            "name": "color",
+            "description": "自定义颜色",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "text",
+            "description": "状态文本",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "rotate",
+            "description": "是否旋转图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "refresh",
+            "description": "刷新函数，传递此属性时会显示刷新按钮",
+            "type": {
+                "raw": "() => Promise<void>",
+                "kind": "function"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "status",
+        "indicator",
+        "loading",
+        "状态"
+    ],
+    "useCases": [
+        "表格行状态展示",
+        "详情页资源状态"
+    ]
+}