king-design-analyzer 1.0.0

package/components/editable.json

@@ -0,0 +1,331 @@
+{
+    "id": "editable",
+    "name": "Editable",
+    "displayName": "可编辑文本",
+    "category": "data",
+    "description": "可编辑文本组件，用于行内编辑文本内容。支持点击切换到编辑模式、验证规则、多行编辑等功能。常用于表格行内编辑、标题编辑等场景。",
+    "importStatement": "import { Editable } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "编辑的内容，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Editable v-model=\"text\" />"
+        },
+        {
+            "name": "editing",
+            "description": "是否为编辑状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Editable :editing=\"isEditing\" />"
+        },
+        {
+            "name": "required",
+            "description": "是否规定不能为空",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Editable :required=\"false\" />"
+        },
+        {
+            "name": "validate",
+            "description": "验证规则，支持函数、正则表达式或正则字符串。函数返回 true 表示验证通过",
+            "type": {
+                "raw": "((v: string) => boolean) | RegExp | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Editable :validate=\"(v) => v.length >= 3\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用编辑",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Editable disabled />"
+        },
+        {
+            "name": "tip",
+            "description": "编辑按钮提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"编辑\"",
+            "usageExample": "<Editable tip=\"点击修改\" />"
+        },
+        {
+            "name": "trim",
+            "description": "是否去掉前后空白字符",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Editable :trim=\"false\" />"
+        },
+        {
+            "name": "invalid",
+            "description": "是否为验证失败状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Editable :invalid=\"hasError\" />"
+        },
+        {
+            "name": "rows",
+            "description": "是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象",
+            "type": {
+                "raw": "string | number | 'auto' | AutoRows",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "1",
+            "usageExample": "<Editable :rows=\"3\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当值改变时触发",
+            "payload": [
+                {
+                    "name": "newValue",
+                    "type": "string",
+                    "description": "新的值"
+                },
+                {
+                    "name": "oldValue",
+                    "type": "string",
+                    "description": "旧的值"
+                }
+            ],
+            "usageExample": "<Editable @change=\"handleChange\" />",
+            "handlerExample": "const handleChange = (newValue: string, oldValue: string) => {\n  console.log(`值从 ${oldValue} 变为 ${newValue}`);\n};"
+        },
+        {
+            "name": "error",
+            "vueEventName": "@error",
+            "description": "验证失败时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "验证失败的值"
+                }
+            ],
+            "usageExample": "<Editable @error=\"handleError\" />",
+            "handlerExample": "const handleError = (value: string) => {\n  Message.error(`验证失败: ${value}`);\n};"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "AutoRows",
+            "definition": "type AutoRows = {\n  min?: number\n  max?: number\n}",
+            "description": "自动行数配置"
+        }
+    ],
+    "examples": [
+        {
+            "id": "editable_basic",
+            "title": "基础用法",
+            "description": "基本的可编辑文本",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable } from '@king-design/vue';\n\nconst text = ref('点击编辑此文本');\n</script>\n<template>\n  <Editable v-model=\"text\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的可编辑文本"
+        },
+        {
+            "id": "editable_validate_function",
+            "title": "函数验证",
+            "description": "使用函数验证输入",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable } from '@king-design/vue';\n\nconst phone = ref('13800138000');\n\nconst validatePhone = (value: string) => {\n  return /^1[3-9]\\d{9}$/.test(value);\n};\n</script>\n<template>\n  <Editable v-model=\"phone\" :validate=\"validatePhone\" />\n</template>",
+            "tags": [
+                "validate",
+                "function"
+            ],
+            "usedProps": [
+                "value",
+                "validate"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用函数验证手机号格式"
+        },
+        {
+            "id": "editable_validate_regex",
+            "title": "正则验证",
+            "description": "使用正则表达式验证",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable } from '@king-design/vue';\n\nconst email = ref('user@example.com');\n</script>\n<template>\n  <Editable v-model=\"email\" validate=\"^[\\w-]+@[\\w-]+\\.\\w+$\" />\n</template>",
+            "tags": [
+                "validate",
+                "regex"
+            ],
+            "usedProps": [
+                "value",
+                "validate"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用正则验证邮箱格式"
+        },
+        {
+            "id": "editable_disabled",
+            "title": "禁用编辑",
+            "description": "禁用编辑功能",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable } from '@king-design/vue';\n\nconst text = ref('禁用编辑的文本');\n</script>\n<template>\n  <Editable v-model=\"text\" disabled />\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁止用户编辑"
+        },
+        {
+            "id": "editable_error_event",
+            "title": "验证失败处理",
+            "description": "监听验证失败事件",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable, Message } from '@king-design/vue';\n\nconst text = ref('test');\n\nconst handleError = (value: string) => {\n  Message.error(`验证失败: ${value}`);\n};\n</script>\n<template>\n  <Editable v-model=\"text\" validate=\"^[a-z]+$\" @error=\"handleError\" />\n</template>",
+            "tags": [
+                "error",
+                "event"
+            ],
+            "usedProps": [
+                "value",
+                "validate"
+            ],
+            "usedEvents": [
+                "error"
+            ],
+            "usedMethods": [],
+            "scenario": "验证失败时显示错误提示"
+        },
+        {
+            "id": "editable_multiline",
+            "title": "多行编辑",
+            "description": "支持多行文本编辑",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable } from '@king-design/vue';\n\nconst content = ref('这是一段较长的文本内容...');\n</script>\n<template>\n  <!-- 固定行数 -->\n  <Editable v-model=\"content\" :rows=\"3\" />\n  \n  <!-- 自动行数 -->\n  <Editable v-model=\"content\" rows=\"auto\" />\n  \n  <!-- 限制行数范围 -->\n  <Editable v-model=\"content\" :rows=\"{min: 2, max: 5}\" />\n</template>",
+            "tags": [
+                "rows",
+                "multiline",
+                "textarea"
+            ],
+            "usedProps": [
+                "value",
+                "rows"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建多行可编辑文本"
+        },
+        {
+            "id": "editable_change_event",
+            "title": "监听值变化",
+            "description": "监听编辑值变化",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Editable, Message } from '@king-design/vue';\n\nconst title = ref('标题');\n\nconst handleChange = (newVal: string, oldVal: string) => {\n  Message.success(`标题从 \"${oldVal}\" 改为 \"${newVal}\"`);\n};\n</script>\n<template>\n  <Editable v-model=\"title\" @change=\"handleChange\" />\n</template>",
+            "tags": [
+                "change",
+                "event"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [
+                "change"
+            ],
+            "usedMethods": [],
+            "scenario": "监听文本变化并做出响应"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "editable_validate_return",
+            "description": "验证函数返回值错误",
+            "wrongCode": "const validate = (v: string) => {\n  if (v.length < 3) {\n    return '长度不能小于3';\n  }\n}",
+            "correctCode": "const validate = (v: string) => {\n  return v.length >= 3;\n}",
+            "explanation": "validate 函数应返回布尔值，true 表示验证通过，false 表示失败",
+            "relatedProps": [
+                "validate"
+            ]
+        },
+        {
+            "id": "editable_rows_type",
+            "description": "rows 值类型错误",
+            "wrongCode": "<Editable rows=\"3\" />",
+            "correctCode": "<Editable :rows=\"3\" />",
+            "explanation": "当 rows 为数字时需要使用 v-bind (:rows)，字符串 '3' 会被当作字符串处理",
+            "relatedProps": [
+                "rows"
+            ]
+        },
+        {
+            "id": "editable_required_allow_empty",
+            "description": "不了解 required 默认为 true",
+            "wrongCode": "<Editable v-model=\"text\" /> <!-- 用户无法保存空值 -->",
+            "correctCode": "<Editable v-model=\"text\" :required=\"false\" /> <!-- 允许空值 -->",
+            "explanation": "Editable 默认 required 为 true，如果允许空值需要显式设置 :required=\"false\"",
+            "relatedProps": [
+                "required"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "可编辑",
+        "editable",
+        "行内编辑",
+        "编辑文本",
+        "inline edit",
+        "标题编辑"
+    ],
+    "useCases": [
+        "表格行内编辑",
+        "标题编辑",
+        "姓名修改",
+        "备注编辑",
+        "配置项快速修改"
+    ],
+    "relatedComponents": [
+        "Input"
+    ]
+}

package/components/ellipsis.json

@@ -0,0 +1,218 @@
+{
+    "id": "ellipsis",
+    "name": "Ellipsis",
+    "displayName": "超长忽略",
+    "category": "data",
+    "description": "文本超长省略组件，用于在有限空间内显示超长文本。支持单行和多行省略，超出部分显示省略号，鼠标悬停时以 Tooltip 形式显示完整内容。",
+    "importStatement": "import { Ellipsis } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "maxLines",
+            "description": "定义多行省略最大行数，不设置时为单行省略",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Ellipsis :maxLines=\"2\">长文本内容</Ellipsis>"
+        },
+        {
+            "name": "position",
+            "description": "Tooltip 弹出的位置，默认在触发器正上方向上偏移 10px",
+            "type": {
+                "raw": "Position | \"left\" | \"bottom\" | \"right\" | \"top\"",
+                "kind": "union",
+                "unionTypes": [
+                    "left",
+                    "bottom",
+                    "right",
+                    "top"
+                ]
+            },
+            "required": false,
+            "default": "{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}",
+            "allowedValues": [
+                {
+                    "value": "top",
+                    "label": "上方显示",
+                    "isDefault": true
+                },
+                {
+                    "value": "bottom",
+                    "label": "下方显示"
+                },
+                {
+                    "value": "left",
+                    "label": "左侧显示"
+                },
+                {
+                    "value": "right",
+                    "label": "右侧显示"
+                }
+            ],
+            "usageExample": "<Ellipsis position=\"bottom\">长文本</Ellipsis>"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Ellipsis disabled>长文本</Ellipsis>"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "ellipsis_basic",
+            "title": "基础用法（单行省略）",
+            "description": "单行文本超出省略",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Ellipsis } from '@king-design/vue';\n</script>\n<template>\n  <div style=\"width: 200px;\">\n    <Ellipsis>这是一段很长很长的文本，超出容器宽度后会自动省略并显示省略号</Ellipsis>\n  </div>\n</template>",
+            "tags": [
+                "basic",
+                "single-line"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "单行文本超出时显示省略号"
+        },
+        {
+            "id": "ellipsis_multiline",
+            "title": "多行省略",
+            "description": "设置最大行数进行多行省略",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Ellipsis } from '@king-design/vue';\n</script>\n<template>\n  <div style=\"width: 200px;\">\n    <Ellipsis :maxLines=\"2\">\n      这是一段很长很长的文本，超出两行后会自动省略并显示省略号。\n      继续添加更多内容来测试多行省略效果。\n    </Ellipsis>\n  </div>\n</template>",
+            "tags": [
+                "maxLines",
+                "multiline"
+            ],
+            "usedProps": [
+                "maxLines"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "限制多行文本的显示行数"
+        },
+        {
+            "id": "ellipsis_disabled",
+            "title": "禁用 Tooltip",
+            "description": "禁用悬停时的完整内容提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Ellipsis } from '@king-design/vue';\n</script>\n<template>\n  <div style=\"width: 200px;\">\n    <Ellipsis disabled>\n      这段文本省略后不会显示 tooltip\n    </Ellipsis>\n  </div>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "省略文本但不需要悬停提示"
+        },
+        {
+            "id": "ellipsis_position",
+            "title": "自定义 Tooltip 位置",
+            "description": "设置 Tooltip 在下方显示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Ellipsis } from '@king-design/vue';\n</script>\n<template>\n  <div style=\"width: 200px;\">\n    <Ellipsis position=\"bottom\">\n      这段文本的 tooltip 会在下方显示\n    </Ellipsis>\n  </div>\n</template>",
+            "tags": [
+                "position",
+                "tooltip"
+            ],
+            "usedProps": [
+                "position"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义 Tooltip 显示位置"
+        },
+        {
+            "id": "ellipsis_table",
+            "title": "表格中使用",
+            "description": "在表格列中使用省略",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Table, TableColumn, Ellipsis } from '@king-design/vue';\n\nconst data = ref([\n  { name: '张三', desc: '这是一段很长的描述文本，需要在表格中省略显示' },\n  { name: '李四', desc: '另一段很长的描述文本，同样需要省略处理' }\n]);\n</script>\n<template>\n  <Table :data=\"data\">\n    <TableColumn key=\"name\" title=\"姓名\" />\n    <TableColumn key=\"desc\" title=\"描述\" :width=\"200\">\n      <template #default=\"[row]\">\n        <Ellipsis>{{ row.desc }}</Ellipsis>\n      </template>\n    </TableColumn>\n  </Table>\n</template>",
+            "tags": [
+                "table",
+                "column"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在表格中处理超长文本"
+        },
+        {
+            "id": "ellipsis_card",
+            "title": "卡片描述省略",
+            "description": "在卡片中使用多行省略",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Card, Ellipsis } from '@king-design/vue';\n</script>\n<template>\n  <Card title=\"文章标题\" style=\"width: 300px;\">\n    <Ellipsis :maxLines=\"3\">\n      这是一段很长的文章摘要内容，在卡片中只显示三行，\n      超出部分会自动省略。用户可以悬停查看完整内容，\n      或者点击查看详情按钮进入详情页面。更多内容...\n    </Ellipsis>\n  </Card>\n</template>",
+            "tags": [
+                "card",
+                "summary"
+            ],
+            "usedProps": [
+                "maxLines"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在卡片中展示文章摘要"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "ellipsis_no_width",
+            "description": "容器未设置宽度",
+            "wrongCode": "<Ellipsis>长文本内容</Ellipsis>",
+            "correctCode": "<div style=\"width: 200px;\">\n  <Ellipsis>长文本内容</Ellipsis>\n</div>",
+            "explanation": "Ellipsis 需要父容器有明确的宽度限制才能生效",
+            "relatedProps": []
+        },
+        {
+            "id": "ellipsis_maxlines_type",
+            "description": "maxLines 使用字符串而非数字",
+            "wrongCode": "<Ellipsis maxLines=\"2\">文本</Ellipsis>",
+            "correctCode": "<Ellipsis :maxLines=\"2\">文本</Ellipsis>",
+            "explanation": "maxLines 是数字类型，需要使用 v-bind 语法",
+            "relatedProps": [
+                "maxLines"
+            ]
+        },
+        {
+            "id": "ellipsis_disabled_meaning",
+            "description": "误解 disabled 属性的含义",
+            "wrongCode": "<Ellipsis disabled> <!-- 以为会禁用省略效果 -->",
+            "correctCode": "<Ellipsis disabled> <!-- 实际是禁用 Tooltip，省略效果仍然存在 -->",
+            "explanation": "disabled 只是禁用悬停时的 Tooltip 提示，文本省略效果仍然生效",
+            "relatedProps": [
+                "disabled"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "省略",
+        "ellipsis",
+        "超长",
+        "文本截断",
+        "truncate",
+        "多行省略",
+        "tooltip"
+    ],
+    "useCases": [
+        "表格列文本省略",
+        "卡片描述省略",
+        "列表项标题省略",
+        "文章摘要展示",
+        "商品名称省略"
+    ],
+    "relatedComponents": [
+        "Tooltip"
+    ]
+}