king-design-analyzer 2.1.7 → 2.2.0

package/components/dialog.json

@@ -1,460 +1,527 @@
 {
-  "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\"></Dialog>"
-    },
-    {
-      "name": "title",
-      "description": "弹窗标题",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"提示\"",
-      "usageExample": "<Dialog v-model=\"visible\" title=\"确认操作\"></Dialog>"
-    },
-    {
-      "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": "迷你尺寸"
+    "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": "ok",
+            "description": "\"确定\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Dialog v-model=\"visible\" :ok=\"handleOk\">"
+        },
+        {
+            "name": "cancel",
+            "description": "\"取消\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Dialog v-model=\"visible\" :cancel=\"handleCancel\">"
+        },
+        {
+            "name": "container",
+            "description": "指定弹窗插入的位置，默认追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Dialog v-model=\"visible\" :container=\"() => document.body\">"
+        },
+        {
+            "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": "terminate",
+            "description": "用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Dialog v-model=\"visible\" :terminate=\"handleTerminate\">"
+        },
+        {
+            "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": "default",
+            "description": "弹窗主体内容（body区域）",
+            "vueTemplate": "默认插槽",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <p>弹窗内容</p>\n</Dialog>"
+        },
+        {
+            "name": "header",
+            "description": "扩展弹窗头部",
+            "vueTemplate": "#header",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <template #header>\n    <h2>自定义头部</h2>\n  </template>\n</Dialog>"
+        },
+        {
+            "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": "content",
+            "description": "定义整个弹窗体，包括header、body、footer",
+            "vueTemplate": "#content",
+            "usageExample": "<Dialog v-model=\"visible\">\n  <template #content>\n    <!-- 完全自定义弹窗结构 -->\n  </template>\n</Dialog>"
+        }
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "弹出弹窗",
+            "params": [
+                {
+                    "name": "props",
+                    "type": "DialogProps",
+                    "description": "可选的临时弹窗配置，会在本次显示时覆盖标题、按钮文案或宽度等属性。",
+                    "optional": true
+                }
+            ],
+            "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();"
         }
-      ],
-      "usageExample": "<Dialog v-model=\"visible\" size=\"small\"></Dialog>"
-    },
-    {
-      "name": "width",
-      "description": "指定弹窗宽度，number类型时单位为px，string类型需要指定单位",
-      "type": {
-        "raw": "number | string",
-        "kind": "union"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Dialog v-model=\"visible\" :width=\"800\"></Dialog>"
-    },
-    {
-      "name": "loading",
-      "description": "\"确定\"按钮是否为加载状态",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Dialog v-model=\"visible\" :loading=\"isSubmitting\"></Dialog>"
-    },
-    {
-      "name": "disabledOk",
-      "description": "\"确定\"按钮是否为禁用状态",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Dialog v-model=\"visible\" :disabledOk=\"!isValid\"></Dialog>"
-    },
-    {
-      "name": "okText",
-      "description": "\"确定\"按钮文案",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"确定\"",
-      "usageExample": "<Dialog v-model=\"visible\" okText=\"保存\"></Dialog>"
-    },
-    {
-      "name": "cancelText",
-      "description": "\"取消\"按钮文案",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"取消\"",
-      "usageExample": "<Dialog v-model=\"visible\" cancelText=\"放弃\"></Dialog>"
-    },
-    {
-      "name": "overlay",
-      "description": "是否展示遮罩层",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Dialog v-model=\"visible\" :overlay=\"false\"></Dialog>"
-    },
-    {
-      "name": "closable",
-      "description": "点击遮罩层是否可以关闭弹窗",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Dialog v-model=\"visible\" :closable=\"false\"></Dialog>"
-    },
-    {
-      "name": "escClosable",
-      "description": "是否按ESC键关闭弹窗",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Dialog v-model=\"visible\" :escClosable=\"false\"></Dialog>"
-    },
-    {
-      "name": "hideClose",
-      "description": "是否隐藏右上角关闭按钮",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Dialog v-model=\"visible\" hideClose></Dialog>"
-    },
-    {
-      "name": "draggable",
-      "description": "弹窗是否可拖拽",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Dialog v-model=\"visible\" :draggable=\"false\"></Dialog>"
-    },
-    {
-      "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"
+    ],
+    "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": "静态方法调用时的配置选项"
+        },
+        {
+            "name": "DialogProps",
+            "definition": "type DialogProps = {\n  title?: string\n  value?: boolean\n  size?: 'large' | 'default' | 'small' | 'mini'\n  width?: string | number\n  loading?: boolean\n  disabledOk?: boolean\n  okText?: string\n  cancelText?: string\n}",
+            "description": "实例 `show` 方法常用的弹窗属性配置片段，可覆盖标题、尺寸、宽度和按钮状态。"
+        }
+    ],
+    "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": "创建带有多个自定义按钮的弹窗"
         }
-      ],
-      "usageExample": "<Dialog v-model=\"visible\" mode=\"destroy\"></Dialog>"
-    }
-  ],
-  "events": [
-    {
-      "name": "open",
-      "vueEventName": "@open",
-      "description": "弹窗打开后触发",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @open=\"handleOpen\"></Dialog>",
-      "handlerExample": "const handleOpen = () => {\n  console.log('弹窗已打开');\n};"
-    },
-    {
-      "name": "close",
-      "vueEventName": "@close",
-      "description": "弹窗关闭后触发，不管是什么原因导致的关闭",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @close=\"handleClose\"></Dialog>",
-      "handlerExample": "const handleClose = () => {\n  console.log('弹窗已关闭');\n};"
-    },
-    {
-      "name": "ok",
-      "vueEventName": "@ok",
-      "description": "点击确定按钮时触发",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @ok=\"handleOk\"></Dialog>",
-      "handlerExample": "const handleOk = () => {\n  // 处理确定逻辑\n  visible.value = false;\n};"
-    },
-    {
-      "name": "cancel",
-      "vueEventName": "@cancel",
-      "description": "点击取消按钮时触发",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @cancel=\"handleCancel\"></Dialog>",
-      "handlerExample": "const handleCancel = () => {\n  visible.value = false;\n};"
-    },
-    {
-      "name": "terminate",
-      "vueEventName": "@terminate",
-      "description": "用户强行关闭弹窗时触发：点击关闭按钮、点击遮罩层、按ESC键",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @terminate=\"handleTerminate\"></Dialog>",
-      "handlerExample": "const handleTerminate = () => {\n  console.log('用户强行关闭了弹窗');\n};"
-    },
-    {
-      "name": "afterClose",
-      "vueEventName": "@after-close",
-      "description": "弹窗退出动画执行完成后触发",
-      "payload": [],
-      "usageExample": "<Dialog v-model=\"visible\" @after-close=\"handleAfterClose\"></Dialog>",
-      "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();</InstanceType>"
-    },
-    {
-      "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": [
+    ],
+    "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",
-        "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"
-  ]
+        "确认",
+        "提示",
+        "警告"
+    ],
+    "useCases": [
+        "删除确认对话框",
+        "表单提交弹窗",
+        "详情查看弹窗",
+        "操作成功/失败提示",
+        "自定义内容弹窗"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DialogStaticOptions",
+            "definition": "type DialogStaticOptions = {\\n  title?: string\\n  content?: string\\n  okText?: string\\n  cancelText?: string\\n}",
+            "description": "Dialog.confirm 等静态方法的常见配置结构。"
+        },
+        {
+            "name": "DialogSize",
+            "definition": "type DialogSize = 'small' | 'default' | 'large'",
+            "description": "弹窗尺寸枚举，用于控制对话框宽度和内部留白。"
+        }
+    ],
+    "relatedComponents": [
+        "Button",
+        "Message"
+    ]
 }