king-design-analyzer 1.0.0

package/components/popover.json

@@ -0,0 +1,456 @@
+{
+    "id": "popover",
+    "name": "Popover",
+    "displayName": "确认提示层",
+    "category": "feedback",
+    "description": "确认提示层组件，用于在操作前获取用户确认。点击触发元素后弹出带有确认按钮的气泡卡片，比 Dialog 更轻量，适合简单的二次确认场景。",
+    "importStatement": "import { Popover } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "title",
+            "description": "提示的标题",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Popover title=\"确认操作\">"
+        },
+        {
+            "name": "content",
+            "description": "提示的内容",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Popover content=\"你确定要执行此操作吗？\">"
+        },
+        {
+            "name": "type",
+            "description": "提示的类型，不同类型显示不同的图标",
+            "type": {
+                "raw": "\"info\" | \"success\" | \"error\" | \"warning\"",
+                "kind": "union",
+                "unionTypes": [
+                    "info",
+                    "success",
+                    "error",
+                    "warning"
+                ]
+            },
+            "required": false,
+            "default": "undefined",
+            "allowedValues": [
+                {
+                    "value": "info",
+                    "label": "信息提示"
+                },
+                {
+                    "value": "success",
+                    "label": "成功提示"
+                },
+                {
+                    "value": "warning",
+                    "label": "警告提示"
+                },
+                {
+                    "value": "error",
+                    "label": "错误提示"
+                }
+            ],
+            "usageExample": "<Popover type=\"warning\">"
+        },
+        {
+            "name": "value",
+            "description": "是否展示弹层，可用 v-model 双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Popover v-model=\"visible\">"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用组件",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Popover disabled>"
+        },
+        {
+            "name": "position",
+            "description": "弹层弹出的位置，默认在触发器正上方",
+            "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": "<Popover position=\"right\">"
+        },
+        {
+            "name": "showArrow",
+            "description": "弹层是否展示箭头",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Popover :showArrow=\"false\">"
+        },
+        {
+            "name": "always",
+            "description": "是否一直保持当前展示/隐藏状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Popover always>"
+        },
+        {
+            "name": "size",
+            "description": "弹层尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "small"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                }
+            ],
+            "usageExample": "<Popover size=\"small\">"
+        },
+        {
+            "name": "okText",
+            "description": "\"确认\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确认\"",
+            "usageExample": "<Popover okText=\"是\">"
+        },
+        {
+            "name": "cancelText",
+            "description": "\"取消\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\"",
+            "usageExample": "<Popover cancelText=\"否\">"
+        },
+        {
+            "name": "of",
+            "description": "弹出菜单的位置是相对当前触发元素还是父元素",
+            "type": {
+                "raw": "\"self\" | \"parent\" | Event",
+                "kind": "union",
+                "unionTypes": [
+                    "self",
+                    "parent"
+                ]
+            },
+            "required": false,
+            "default": "\"self\"",
+            "usageExample": "<Popover of=\"parent\">"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出菜单追加的位置，默认追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Popover :container=\"() => document.body\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "show",
+            "vueEventName": "@show",
+            "description": "弹层展示时触发",
+            "payload": [],
+            "usageExample": "<Popover @show=\"handleShow\">",
+            "handlerExample": "const handleShow = () => {\n  console.log('弹层已展示');\n};"
+        },
+        {
+            "name": "hide",
+            "vueEventName": "@hide",
+            "description": "弹层隐藏时触发",
+            "payload": [],
+            "usageExample": "<Popover @hide=\"handleHide\">",
+            "handlerExample": "const handleHide = () => {\n  console.log('弹层已隐藏');\n};"
+        },
+        {
+            "name": "ok",
+            "vueEventName": "@ok",
+            "description": "点击确认按钮时触发",
+            "payload": [],
+            "usageExample": "<Popover @ok=\"handleOk\">",
+            "handlerExample": "const handleOk = () => {\n  Message.success('已确认');\n};"
+        },
+        {
+            "name": "cancel",
+            "vueEventName": "@cancel",
+            "description": "点击取消按钮时触发",
+            "payload": [],
+            "usageExample": "<Popover @cancel=\"handleCancel\">",
+            "handlerExample": "const handleCancel = () => {\n  console.log('已取消');\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "title",
+            "description": "自定义提示标题"
+        },
+        {
+            "name": "content",
+            "description": "自定义提示内容"
+        },
+        {
+            "name": "footer",
+            "description": "自定义底部按钮"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "Position",
+            "definition": "type Position = {\n  my?: string | [string, string]\n  at?: string | [string, string]\n  collision?: Collision | [Collision, Collision]\n  collisionDirection?: ['left'] | ['top'] | ['left', 'top']\n}",
+            "description": "弹层位置配置"
+        },
+        {
+            "name": "Collision",
+            "definition": "type Collision = 'fit' | 'flip' | 'flipfit' | 'none'",
+            "description": "碰撞检测行为"
+        }
+    ],
+    "examples": [
+        {
+            "id": "popover_basic",
+            "title": "基础用法",
+            "description": "基本的确认提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Popover, Button } from '@king-design/vue';\n</script>\n<template>\n  <Popover title=\"确认操作\" content=\"你确定要执行此操作吗？\">\n    <Button>点击确认</Button>\n  </Popover>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "title",
+                "content"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的确认提示"
+        },
+        {
+            "id": "popover_events",
+            "title": "确认和取消事件",
+            "description": "监听确认和取消操作",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Popover, Button, Message } from '@king-design/vue';\n\nconst handleOk = () => {\n  Message.success('已确认');\n};\n\nconst handleCancel = () => {\n  Message.info('已取消');\n};\n</script>\n<template>\n  <Popover title=\"删除确认\" content=\"确定删除吗？\" @ok=\"handleOk\" @cancel=\"handleCancel\">\n    <Button type=\"danger\">删除</Button>\n  </Popover>\n</template>",
+            "tags": [
+                "ok",
+                "cancel",
+                "event"
+            ],
+            "usedProps": [
+                "title",
+                "content"
+            ],
+            "usedEvents": [
+                "ok",
+                "cancel"
+            ],
+            "usedMethods": [],
+            "scenario": "监听确认和取消操作并执行相应逻辑"
+        },
+        {
+            "id": "popover_types",
+            "title": "不同类型",
+            "description": "四种类型的确认提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Popover, Button } from '@king-design/vue';\n</script>\n<template>\n  <Popover type=\"warning\" title=\"警告\" content=\"此操作不可撤销\">\n    <Button type=\"warning\">警告操作</Button>\n  </Popover>\n  <Popover type=\"error\" title=\"危险\" content=\"确定执行此危险操作？\">\n    <Button type=\"danger\">危险操作</Button>\n  </Popover>\n</template>",
+            "tags": [
+                "type",
+                "warning",
+                "error"
+            ],
+            "usedProps": [
+                "type",
+                "title",
+                "content"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同类型的确认提示"
+        },
+        {
+            "id": "popover_position",
+            "title": "不同位置",
+            "description": "在不同方向弹出确认提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Popover, Button } from '@king-design/vue';\n</script>\n<template>\n  <Popover title=\"提示\" content=\"这是右侧提示\" position=\"right\">\n    <Button>右侧提示</Button>\n  </Popover>\n  <Popover title=\"提示\" content=\"这是底部提示\" position=\"bottom\">\n    <Button>底部提示</Button>\n  </Popover>\n</template>",
+            "tags": [
+                "position",
+                "direction"
+            ],
+            "usedProps": [
+                "title",
+                "content",
+                "position"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置确认提示弹出的位置"
+        },
+        {
+            "id": "popover_custom_text",
+            "title": "自定义按钮文案",
+            "description": "自定义确认和取消按钮的文字",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Popover, Button } from '@king-design/vue';\n</script>\n<template>\n  <Popover title=\"确认\" content=\"是否继续？\" okText=\"是\" cancelText=\"否\">\n    <Button>自定义按钮</Button>\n  </Popover>\n</template>",
+            "tags": [
+                "okText",
+                "cancelText",
+                "custom"
+            ],
+            "usedProps": [
+                "title",
+                "content",
+                "okText",
+                "cancelText"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义确认和取消按钮的文字"
+        },
+        {
+            "id": "popover_delete_confirm",
+            "title": "删除确认场景",
+            "description": "常见的删除确认场景",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Popover, Button, Message } from '@king-design/vue';\n\nconst items = ref([{ id: 1, name: '项目一' }, { id: 2, name: '项目二' }]);\n\nconst handleDelete = (id: number) => {\n  items.value = items.value.filter(item => item.id !== id);\n  Message.success('删除成功');\n};\n</script>\n<template>\n  <div v-for=\"item in items\" :key=\"item.id\" style=\"margin-bottom: 8px;\">\n    {{ item.name }}\n    <Popover type=\"warning\" title=\"删除确认\" :content=\"`确定删除 ${item.name} 吗？`\" \n      @ok=\"handleDelete(item.id)\">\n      <Button type=\"danger\" size=\"small\">删除</Button>\n    </Popover>\n  </div>\n</template>",
+            "tags": [
+                "delete",
+                "confirm",
+                "list"
+            ],
+            "usedProps": [
+                "type",
+                "title",
+                "content"
+            ],
+            "usedEvents": [
+                "ok"
+            ],
+            "usedMethods": [],
+            "scenario": "列表中的删除确认操作"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "popover_missing_trigger",
+            "description": "未提供触发元素",
+            "wrongCode": "<Popover title=\"确认\" content=\"内容\" />",
+            "correctCode": "<Popover title=\"确认\" content=\"内容\">\n  <Button>点击</Button>\n</Popover>",
+            "explanation": "Popover 需要包裹一个子元素作为触发器",
+            "relatedProps": []
+        },
+        {
+            "id": "popover_position_typo",
+            "description": "position 值拼写错误",
+            "wrongCode": "<Popover position=\"buttom\">",
+            "correctCode": "<Popover position=\"bottom\">",
+            "explanation": "position 只支持 top, bottom, left, right，注意拼写",
+            "relatedProps": [
+                "position"
+            ]
+        },
+        {
+            "id": "popover_type_not_shown",
+            "description": "设置 type 但未显示图标",
+            "wrongCode": "<Popover type=\"warning\" content=\"警告内容\">",
+            "correctCode": "<Popover type=\"warning\" title=\"警告\" content=\"警告内容\">",
+            "explanation": "建议同时设置 title 和 content，使提示更加清晰",
+            "relatedProps": [
+                "type",
+                "title",
+                "content"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "确认提示",
+        "popover",
+        "气泡确认",
+        "popconfirm",
+        "二次确认",
+        "删除确认"
+    ],
+    "useCases": [
+        "删除前确认",
+        "危险操作确认",
+        "表单提交确认",
+        "状态切换确认",
+        "批量操作确认"
+    ],
+    "relatedComponents": [
+        "Tooltip",
+        "Dialog"
+    ]
+}