king-design-analyzer 1.0.0

package/components/checkbox.json

@@ -0,0 +1,298 @@
+{
+    "id": "checkbox",
+    "name": "Checkbox",
+    "displayName": "复选框",
+    "category": "form",
+    "description": "复选框组件，用于多选场景。支持单独使用或作为复选框组使用，支持半选中状态（全选/部分选中）、自定义值等功能。",
+    "importStatement": "import { Checkbox } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "复选框的取值，可用 v-model 双向绑定。单独使用时为布尔值，组合使用时为数组",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Checkbox v-model=\"checked\">选项</Checkbox>"
+        },
+        {
+            "name": "trueValue",
+            "description": "选中时的值",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Checkbox trueValue=\"yes\" falseValue=\"no\">"
+        },
+        {
+            "name": "falseValue",
+            "description": "未选中时的值",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Checkbox trueValue=\"active\" falseValue=\"inactive\">"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Checkbox disabled>禁用</Checkbox>"
+        },
+        {
+            "name": "indeterminate",
+            "description": "是否半选中状态，用于实现全选功能时表示部分选中",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Checkbox :indeterminate=\"isPartialChecked\">"
+        },
+        {
+            "name": "name",
+            "description": "原生 name 属性",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Checkbox name=\"agreement\">"
+        },
+        {
+            "name": "required",
+            "description": "原生 required 属性",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Checkbox required>"
+        },
+        {
+            "name": "form",
+            "description": "原生 form 属性",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Checkbox form=\"myForm\">"
+        },
+        {
+            "name": "autofocus",
+            "description": "原生 autofocus 属性",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Checkbox autofocus>"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当点击组件导致值变化时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "any",
+                    "description": "变化后的值"
+                },
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                }
+            ],
+            "usageExample": "<Checkbox @change=\"handleChange\">",
+            "handlerExample": "const handleChange = (value: boolean, e: MouseEvent) => {\n  console.log('选中状态:', value);\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "checkbox_basic",
+            "title": "基础用法",
+            "description": "基本的复选框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Checkbox } from '@king-design/vue';\n\nconst checked = ref(false);\n</script>\n<template>\n  <Checkbox v-model=\"checked\">同意用户协议</Checkbox>\n  <p>当前状态: {{ checked }}</p>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的复选框"
+        },
+        {
+            "id": "checkbox_group",
+            "title": "复选框组",
+            "description": "多个复选框组合使用",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Checkbox } from '@king-design/vue';\n\nconst checkedList = ref<string[]>([]);\n</script>\n<template>\n  <Checkbox v-model=\"checkedList\" trueValue=\"apple\">苹果</Checkbox>\n  <Checkbox v-model=\"checkedList\" trueValue=\"banana\">香蕉</Checkbox>\n  <Checkbox v-model=\"checkedList\" trueValue=\"orange\">橙子</Checkbox>\n  <p>已选择: {{ checkedList.join(', ') }}</p>\n</template>",
+            "tags": [
+                "group",
+                "multiple"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建复选框组实现多选"
+        },
+        {
+            "id": "checkbox_disabled",
+            "title": "禁用状态",
+            "description": "禁用的复选框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Checkbox } from '@king-design/vue';\n\nconst checked = ref(true);\n</script>\n<template>\n  <Checkbox disabled>未选中禁用</Checkbox>\n  <Checkbox v-model=\"checked\" disabled>选中禁用</Checkbox>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用复选框"
+        },
+        {
+            "id": "checkbox_indeterminate",
+            "title": "全选/半选",
+            "description": "实现全选功能",
+            "difficulty": "hard",
+            "code": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { Checkbox } from '@king-design/vue';\n\nconst options = ['选项1', '选项2', '选项3'];\nconst checkedList = ref<string[]>([]);\n\nconst checkAll = computed({\n  get: () => checkedList.value.length === options.length,\n  set: (val) => {\n    checkedList.value = val ? [...options] : [];\n  }\n});\n\nconst indeterminate = computed(() => \n  checkedList.value.length > 0 && checkedList.value.length < options.length\n);\n</script>\n<template>\n  <Checkbox v-model=\"checkAll\" :indeterminate=\"indeterminate\">全选</Checkbox>\n  <hr />\n  <Checkbox v-for=\"opt in options\" :key=\"opt\" v-model=\"checkedList\" :trueValue=\"opt\">\n    {{ opt }}\n  </Checkbox>\n</template>",
+            "tags": [
+                "indeterminate",
+                "checkAll",
+                "selectAll"
+            ],
+            "usedProps": [
+                "value",
+                "indeterminate",
+                "trueValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "实现全选/部分选中功能"
+        },
+        {
+            "id": "checkbox_custom_value",
+            "title": "自定义值",
+            "description": "使用自定义的选中/未选中值",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Checkbox } from '@king-design/vue';\n\nconst status = ref('inactive');\n</script>\n<template>\n  <Checkbox v-model=\"status\" trueValue=\"active\" falseValue=\"inactive\">\n    激活状态\n  </Checkbox>\n  <p>当前状态: {{ status }}</p>\n</template>",
+            "tags": [
+                "trueValue",
+                "falseValue",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "trueValue",
+                "falseValue"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用自定义的字符串值作为选中状态"
+        },
+        {
+            "id": "checkbox_change_event",
+            "title": "监听变化",
+            "description": "监听复选框状态变化",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Checkbox, Message } from '@king-design/vue';\n\nconst checked = ref(false);\n\nconst handleChange = (value: boolean) => {\n  Message.info(`状态变更为: ${value}`);\n};\n</script>\n<template>\n  <Checkbox v-model=\"checked\" @change=\"handleChange\">\n    点击我\n  </Checkbox>\n</template>",
+            "tags": [
+                "change",
+                "event"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [
+                "change"
+            ],
+            "usedMethods": [],
+            "scenario": "监听复选框的状态变化"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "checkbox_group_value_type",
+            "description": "复选框组使用错误的 value 类型",
+            "wrongCode": "const checked = ref(false);\n<Checkbox v-model=\"checked\" trueValue=\"apple\">苹果</Checkbox>\n<Checkbox v-model=\"checked\" trueValue=\"banana\">香蕉</Checkbox>",
+            "correctCode": "const checkedList = ref<string[]>([]);\n<Checkbox v-model=\"checkedList\" trueValue=\"apple\">苹果</Checkbox>\n<Checkbox v-model=\"checkedList\" trueValue=\"banana\">香蕉</Checkbox>",
+            "explanation": "复选框组需要使用数组类型的 value",
+            "relatedProps": [
+                "value",
+                "trueValue"
+            ]
+        },
+        {
+            "id": "checkbox_indeterminate_without_handler",
+            "description": "使用 indeterminate 但未正确处理全选逻辑",
+            "wrongCode": "<Checkbox :indeterminate=\"true\">全选</Checkbox>",
+            "correctCode": "<Checkbox v-model=\"checkAll\" :indeterminate=\"indeterminate\">全选</Checkbox>",
+            "explanation": "indeterminate 只控制视觉样式，需要配合 v-model 和计算属性实现全选逻辑",
+            "relatedProps": [
+                "indeterminate",
+                "value"
+            ]
+        },
+        {
+            "id": "checkbox_custom_value_mismatch",
+            "description": "自定义值类型与初始值不匹配",
+            "wrongCode": "const value = ref(false);\n<Checkbox v-model=\"value\" trueValue=\"yes\" falseValue=\"no\">",
+            "correctCode": "const value = ref('no');\n<Checkbox v-model=\"value\" trueValue=\"yes\" falseValue=\"no\">",
+            "explanation": "使用自定义值时，初始值应与 trueValue 或 falseValue 类型匹配",
+            "relatedProps": [
+                "value",
+                "trueValue",
+                "falseValue"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "复选框",
+        "checkbox",
+        "多选",
+        "勾选",
+        "全选",
+        "半选"
+    ],
+    "useCases": [
+        "多选列表",
+        "协议同意",
+        "表单多选项",
+        "批量选择",
+        "权限勾选"
+    ],
+    "relatedComponents": [
+        "Radio",
+        "Switch"
+    ]
+}

package/components/code.json

@@ -0,0 +1,318 @@
+{
+    "id": "code",
+    "name": "Code",
+    "displayName": "代码编辑器",
+    "category": "data-display",
+    "description": "代码编辑器组件，基于 Monaco Editor 实现。支持多种编程语言、多种主题、只读模式等功能。注意：由于 Monaco Editor 较大，该组件不会默认加入 index.js。",
+    "importStatement": "import { Code } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "编辑器的代码内容，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\"",
+            "usageExample": "<Code v-model=\"code\" />"
+        },
+        {
+            "name": "language",
+            "description": "指定编程语言",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"javascript\"",
+            "usageExample": "<Code language=\"typescript\" />"
+        },
+        {
+            "name": "theme",
+            "description": "指定主题",
+            "type": {
+                "raw": "\"vs\" | \"vs-dark\" | \"hc-black\"",
+                "kind": "union",
+                "unionTypes": [
+                    "vs",
+                    "vs-dark",
+                    "hc-black"
+                ]
+            },
+            "required": false,
+            "default": "\"vs\"",
+            "allowedValues": [
+                {
+                    "value": "vs",
+                    "label": "亮色主题",
+                    "isDefault": true
+                },
+                {
+                    "value": "vs-dark",
+                    "label": "暗色主题"
+                },
+                {
+                    "value": "hc-black",
+                    "label": "高对比度黑色主题"
+                }
+            ],
+            "usageExample": "<Code theme=\"vs-dark\" />"
+        },
+        {
+            "name": "readOnly",
+            "description": "是否只读",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Code readOnly />"
+        },
+        {
+            "name": "width",
+            "description": "指定宽度，需要带单位",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"100%\"",
+            "usageExample": "<Code width=\"800px\" />"
+        },
+        {
+            "name": "height",
+            "description": "指定高度，需要带单位",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"100%\"",
+            "usageExample": "<Code height=\"400px\" />"
+        },
+        {
+            "name": "options",
+            "description": "其它 Monaco Editor 配置，会传给 monaco.editor.create() 方法",
+            "type": {
+                "raw": "editor.IStandaloneEditorConstructionOptions",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}",
+            "usageExample": "<Code :options=\"{minimap: {enabled: false}}\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "ready",
+            "vueEventName": "@ready",
+            "description": "编辑器加载并实例化完成时触发",
+            "payload": [
+                {
+                    "name": "editor",
+                    "type": "editor.IStandaloneCodeEditor",
+                    "description": "编辑器实例"
+                },
+                {
+                    "name": "Editor",
+                    "type": "typeof editor",
+                    "description": "Editor 模块"
+                },
+                {
+                    "name": "Monaco",
+                    "type": "typeof monaco",
+                    "description": "Monaco 模块"
+                }
+            ],
+            "usageExample": "<Code @ready=\"handleReady\" />",
+            "handlerExample": "const handleReady = (editor, Editor, Monaco) => {\n  console.log('编辑器已加载', editor);\n  // 可以通过 editor 实例进行更多操作\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "code_basic",
+            "title": "基础用法",
+            "description": "基本的代码编辑器",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref(`function hello() {\n  console.log('Hello World');\n}`);\n</script>\n<template>\n  <Code v-model=\"code\" language=\"javascript\" height=\"200px\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的 JavaScript 代码编辑器"
+        },
+        {
+            "id": "code_dark_theme",
+            "title": "暗色主题",
+            "description": "使用暗色主题的编辑器",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref('const name = \"World\";');\n</script>\n<template>\n  <Code v-model=\"code\" language=\"javascript\" theme=\"vs-dark\" height=\"200px\" />\n</template>",
+            "tags": [
+                "theme",
+                "dark"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "theme",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用暗色主题的代码编辑器"
+        },
+        {
+            "id": "code_readonly",
+            "title": "只读模式",
+            "description": "只读的代码展示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref('// 这是只读代码\\nconst x = 1;');\n</script>\n<template>\n  <Code v-model=\"code\" language=\"javascript\" readOnly height=\"200px\" />\n</template>",
+            "tags": [
+                "readOnly",
+                "display"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "readOnly",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "只读模式的代码展示"
+        },
+        {
+            "id": "code_no_minimap",
+            "title": "隐藏缩略图",
+            "description": "隐藏右侧的代码缩略图",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref('const a = 1;');\nconst options = {\n  minimap: { enabled: false }\n};\n</script>\n<template>\n  <Code v-model=\"code\" language=\"javascript\" :options=\"options\" height=\"200px\" />\n</template>",
+            "tags": [
+                "options",
+                "minimap"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "options",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "隐藏代码编辑器的缩略图"
+        },
+        {
+            "id": "code_typescript",
+            "title": "TypeScript 编辑器",
+            "description": "TypeScript 代码编辑",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref(`interface User {\n  name: string;\n  age: number;\n}\n\nconst user: User = { name: 'Alice', age: 20 };`);\n</script>\n<template>\n  <Code v-model=\"code\" language=\"typescript\" height=\"200px\" />\n</template>",
+            "tags": [
+                "typescript"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "TypeScript 代码编辑"
+        },
+        {
+            "id": "code_json",
+            "title": "JSON 编辑器",
+            "description": "JSON 数据编辑",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst json = ref(JSON.stringify({ name: 'test', value: 123 }, null, 2));\n</script>\n<template>\n  <Code v-model=\"json\" language=\"json\" height=\"200px\" />\n</template>",
+            "tags": [
+                "json"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "height"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "JSON 数据编辑器"
+        },
+        {
+            "id": "code_ready_event",
+            "title": "监听加载完成",
+            "description": "监听编辑器加载完成事件",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Code } from '@king-design/vue';\n\nconst code = ref('');\n\nconst handleReady = (editor: any, Editor: any, Monaco: any) => {\n  console.log('编辑器已加载', editor);\n  // 可以通过 editor 实例进行更多操作\n};\n</script>\n<template>\n  <Code v-model=\"code\" language=\"javascript\" @ready=\"handleReady\" height=\"200px\" />\n</template>",
+            "tags": [
+                "ready",
+                "event"
+            ],
+            "usedProps": [
+                "value",
+                "language",
+                "height"
+            ],
+            "usedEvents": [
+                "ready"
+            ],
+            "usedMethods": [],
+            "scenario": "监听编辑器加载完成，获取编辑器实例"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "code_height_no_unit",
+            "description": "height/width 未带单位",
+            "wrongCode": "<Code height=\"200\" /> <!-- 无单位 -->",
+            "correctCode": "<Code height=\"200px\" />",
+            "explanation": "height 和 width 需要带单位，如 px、%、vh 等",
+            "relatedProps": [
+                "height",
+                "width"
+            ]
+        },
+        {
+            "id": "code_language_typo",
+            "description": "language 拼写错误",
+            "wrongCode": "<Code language=\"Javascript\" /> <!-- 大写错误 -->",
+            "correctCode": "<Code language=\"javascript\" />",
+            "explanation": "language 应使用小写，如 javascript、typescript",
+            "relatedProps": [
+                "language"
+            ]
+        },
+        {
+            "id": "code_import_bundle",
+            "description": "未正确导入 Code 组件",
+            "wrongCode": "import { Code } from '@king-design/vue'; // 可能未包含在默认 bundle 中",
+            "correctCode": "// 确保项目配置了 Monaco Editor\nimport { Code } from '@king-design/vue';",
+            "explanation": "Code 组件由于依赖 Monaco Editor，不会默认加入 index.js，需要确保正确配置",
+            "relatedProps": []
+        }
+    ],
+    "searchKeywords": [
+        "代码",
+        "code",
+        "编辑器",
+        "monaco",
+        "语法高亮",
+        "IDE"
+    ],
+    "useCases": [
+        "代码编辑器",
+        "在线 IDE",
+        "代码展示",
+        "配置文件编辑",
+        "JSON 编辑器"
+    ],
+    "relatedComponents": []
+}