king-design-analyzer 1.0.0

package/components/dialog.json

@@ -0,0 +1,460 @@
+{
+    "id": "dialog",
+    "name": "Dialog",
+    "displayName": "弹窗",
+    "category": "feedback",
+    "description": "模态对话框，用于需要用户处理事务又不希望跳转页面的场景，支持拖拽、自定义内容和底部按钮",
+    "importStatement": "import { Dialog, Button } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "弹窗是否展示，可用v-model双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Dialog v-model=\"visible\">"
+        },
+        {
+            "name": "title",
+            "description": "弹窗标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"提示\"",
+            "usageExample": "<Dialog v-model=\"visible\" title=\"确认操作\">"
+        },
+        {
+            "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": "<Dialog v-model=\"visible\" size=\"small\">"
+        },
+        {
+            "name": "width",
+            "description": "指定弹窗宽度，number类型时单位为px，string类型需要指定单位",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Dialog v-model=\"visible\" :width=\"800\">"
+        },
+        {
+            "name": "loading",
+            "description": "\"确定\"按钮是否为加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Dialog v-model=\"visible\" :loading=\"isSubmitting\">"
+        },
+        {
+            "name": "disabledOk",
+            "description": "\"确定\"按钮是否为禁用状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Dialog v-model=\"visible\" :disabledOk=\"!isValid\">"
+        },
+        {
+            "name": "okText",
+            "description": "\"确定\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确定\"",
+            "usageExample": "<Dialog v-model=\"visible\" okText=\"保存\">"
+        },
+        {
+            "name": "cancelText",
+            "description": "\"取消\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\"",
+            "usageExample": "<Dialog v-model=\"visible\" cancelText=\"放弃\">"
+        },
+        {
+            "name": "overlay",
+            "description": "是否展示遮罩层",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Dialog v-model=\"visible\" :overlay=\"false\">"
+        },
+        {
+            "name": "closable",
+            "description": "点击遮罩层是否可以关闭弹窗",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Dialog v-model=\"visible\" :closable=\"false\">"
+        },
+        {
+            "name": "escClosable",
+            "description": "是否按ESC键关闭弹窗",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Dialog v-model=\"visible\" :escClosable=\"false\">"
+        },
+        {
+            "name": "hideClose",
+            "description": "是否隐藏右上角关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Dialog v-model=\"visible\" hideClose>"
+        },
+        {
+            "name": "draggable",
+            "description": "弹窗是否可拖拽",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Dialog v-model=\"visible\" :draggable=\"false\">"
+        },
+        {
+            "name": "mode",
+            "description": "指定主体元素在关闭状态下的渲染方式",
+            "type": {
+                "raw": "\"destroy\" | \"hide\"",
+                "kind": "union",
+                "unionTypes": [
+                    "destroy",
+                    "hide"
+                ]
+            },
+            "required": false,
+            "default": "\"hide\"",
+            "allowedValues": [
+                {
+                    "value": "hide",
+                    "label": "只是隐藏，保留DOM",
+                    "isDefault": true
+                },
+                {
+                    "value": "destroy",
+                    "label": "直接销毁DOM"
+                }
+            ],
+            "usageExample": "<Dialog v-model=\"visible\" mode=\"destroy\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "open",
+            "vueEventName": "@open",
+            "description": "弹窗打开后触发",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @open=\"handleOpen\">",
+            "handlerExample": "const handleOpen = () => {\n  console.log('弹窗已打开');\n};"
+        },
+        {
+            "name": "close",
+            "vueEventName": "@close",
+            "description": "弹窗关闭后触发，不管是什么原因导致的关闭",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @close=\"handleClose\">",
+            "handlerExample": "const handleClose = () => {\n  console.log('弹窗已关闭');\n};"
+        },
+        {
+            "name": "ok",
+            "vueEventName": "@ok",
+            "description": "点击确定按钮时触发",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @ok=\"handleOk\">",
+            "handlerExample": "const handleOk = () => {\n  // 处理确定逻辑\n  visible.value = false;\n};"
+        },
+        {
+            "name": "cancel",
+            "vueEventName": "@cancel",
+            "description": "点击取消按钮时触发",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @cancel=\"handleCancel\">",
+            "handlerExample": "const handleCancel = () => {\n  visible.value = false;\n};"
+        },
+        {
+            "name": "terminate",
+            "vueEventName": "@terminate",
+            "description": "用户强行关闭弹窗时触发：点击关闭按钮、点击遮罩层、按ESC键",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @terminate=\"handleTerminate\">",
+            "handlerExample": "const handleTerminate = () => {\n  console.log('用户强行关闭了弹窗');\n};"
+        },
+        {
+            "name": "afterClose",
+            "vueEventName": "@after-close",
+            "description": "弹窗退出动画执行完成后触发",
+            "payload": [],
+            "usageExample": "<Dialog v-model=\"visible\" @after-close=\"handleAfterClose\">",
+            "handlerExample": "const handleAfterClose = () => {\n  // 动画完成后清理\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "content",
+            "description": "定义整个弹窗体，包括header，body，footer",
+            "vueTemplate": "#content",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <template #content>\n    <!-- 完全自定义弹窗结构 -->\n  </template>\n</Dialog>"
+        },
+        {
+            "name": "header",
+            "description": "扩展弹窗头部",
+            "vueTemplate": "#header",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <template #header>\n    <h2>自定义头部</h2>\n  </template>\n</Dialog>"
+        },
+        {
+            "name": "body",
+            "description": "扩展弹窗主体部分",
+            "vueTemplate": "#body"
+        },
+        {
+            "name": "footer",
+            "description": "扩展弹窗底部",
+            "vueTemplate": "#footer",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <template #footer>\n    <Button @click=\"visible = false\">关闭</Button>\n    <Button type=\"primary\" @click=\"handleSubmit\">提交</Button>\n  </template>\n</Dialog>"
+        },
+        {
+            "name": "footerWrapper",
+            "description": "扩展弹窗整个底部，上述footer是它下面一个子扩展点",
+            "vueTemplate": "#footerWrapper"
+        }
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "弹出弹窗",
+            "params": [],
+            "returnType": "Promise",
+            "usageExample": "const dialogRef = ref<InstanceType<typeof Dialog>>();\nawait dialogRef.value?.show();"
+        },
+        {
+            "name": "close",
+            "description": "关闭弹窗",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "dialogRef.value?.close();"
+        },
+        {
+            "name": "showLoading",
+            "description": "\"确定\"按钮变为加载状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "dialogRef.value?.showLoading();"
+        },
+        {
+            "name": "hideLoading",
+            "description": "\"确定\"按钮变为正常状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "dialogRef.value?.hideLoading();"
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DialogOptions",
+            "definition": "interface DialogOptions {\n  title?: string;\n  content?: string | VNode;\n  size?: 'large' | 'default' | 'small' | 'mini';\n  hideIcon?: boolean;\n  hideFooter?: boolean;\n  okText?: string;\n  cancelText?: string;\n}",
+            "description": "静态方法调用时的配置选项"
+        }
+    ],
+    "examples": [
+        {
+            "id": "dialog_basic",
+            "title": "基础弹窗",
+            "description": "通过v-model控制弹窗显隐",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Dialog, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开弹窗</Button>\n  <Dialog v-model=\"visible\" title=\"提示\">\n    <p>这是弹窗内容</p>\n  </Dialog>\n</template>",
+            "tags": [
+                "basic",
+                "v-model"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "创建一个基本的确认弹窗"
+        },
+        {
+            "id": "dialog_confirm",
+            "title": "确认对话框",
+            "description": "使用静态方法创建确认对话框",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Dialog, Button } from '@king-design/vue';\n\nconst handleDelete = async () => {\n  try {\n    await Dialog.confirm({\n      title: '确认删除',\n      content: '确定要删除这条数据吗？此操作不可恢复。'\n    });\n    console.log('用户点击了确定');\n  } catch (e) {\n    console.log('用户点击了取消');\n  }\n};\n</script>\n<template>\n  <Button type=\"danger\" @click=\"handleDelete\">删除</Button>\n</template>",
+            "tags": [
+                "confirm",
+                "static",
+                "async"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedSlots": [],
+            "usedMethods": [],
+            "scenario": "使用Dialog.confirm静态方法创建删除确认对话框"
+        },
+        {
+            "id": "dialog_async_submit",
+            "title": "异步提交弹窗",
+            "description": "点击确定后显示loading状态",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Dialog, Button } from '@king-design/vue';\n\nconst visible = ref(false);\nconst loading = ref(false);\n\nconst handleOk = async () => {\n  loading.value = true;\n  await new Promise(resolve => setTimeout(resolve, 2000));\n  loading.value = false;\n  visible.value = false;\n};\n</script>\n<template>\n  <Button @click=\"visible = true\">打开弹窗</Button>\n  <Dialog v-model=\"visible\" title=\"提交数据\" :loading=\"loading\" @ok=\"handleOk\">\n    <p>点击确定提交数据...</p>\n  </Dialog>\n</template>",
+            "tags": [
+                "loading",
+                "async",
+                "submit"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "loading"
+            ],
+            "usedEvents": [
+                "ok"
+            ],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "创建带异步提交功能的弹窗，确定按钮显示loading状态"
+        },
+        {
+            "id": "dialog_custom_footer",
+            "title": "自定义底部按钮",
+            "description": "使用footer插槽自定义底部按钮",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Dialog, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开弹窗</Button>\n  <Dialog v-model=\"visible\" title=\"自定义底部\">\n    <p>弹窗内容</p>\n    <template #footer>\n      <Button @click=\"visible = false\">稍后再说</Button>\n      <Button type=\"primary\" @click=\"visible = false\">立即处理</Button>\n      <Button type=\"danger\" @click=\"visible = false\">删除</Button>\n    </template>\n  </Dialog>\n</template>",
+            "tags": [
+                "slot",
+                "footer",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default",
+                "footer"
+            ],
+            "usedMethods": [],
+            "scenario": "创建带有多个自定义按钮的弹窗"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "dialog_static_import",
+            "description": "静态方法调用时未正确导入Dialog",
+            "wrongCode": "import { confirm } from '@king-design/vue';\nconfirm({ title: '确认' });",
+            "correctCode": "import { Dialog } from '@king-design/vue';\nDialog.confirm({ title: '确认' });",
+            "explanation": "confirm、success、warning、error是Dialog的静态方法，需要通过Dialog.xxx()调用",
+            "relatedProps": []
+        },
+        {
+            "id": "dialog_ok_event_close",
+            "description": "@ok事件中未关闭弹窗",
+            "wrongCode": "const handleOk = () => {\n  // 只处理业务逻辑，忘记关闭弹窗\n  submitData();\n};",
+            "correctCode": "const handleOk = () => {\n  submitData();\n  visible.value = false; // 需要手动关闭\n};",
+            "explanation": "使用@ok事件时，弹窗不会自动关闭，需要在处理函数中手动设置visible为false",
+            "relatedEvents": [
+                "ok"
+            ]
+        },
+        {
+            "id": "dialog_vmodel_syntax",
+            "description": "v-model语法错误",
+            "wrongCode": "<Dialog :value=\"visible\" @update:value=\"visible = $event\">",
+            "correctCode": "<Dialog v-model=\"visible\">",
+            "explanation": "Vue 3中应使用v-model语法糖，不需要手动拆分:value和@update:value",
+            "relatedProps": [
+                "value"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "弹窗",
+        "对话框",
+        "dialog",
+        "modal",
+        "confirm",
+        "确认",
+        "提示",
+        "警告"
+    ],
+    "useCases": [
+        "删除确认对话框",
+        "表单提交弹窗",
+        "详情查看弹窗",
+        "操作成功/失败提示",
+        "自定义内容弹窗"
+    ],
+    "relatedComponents": [
+        "Button",
+        "Message"
+    ]
+}