king-design-analyzer 2.1.9 → 2.2.0

package/components/drawer.json

@@ -1,563 +1,576 @@
 {
-  "id": "drawer",
-  "name": "Drawer",
-  "displayName": "抽屉",
-  "category": "feedback",
-  "description": "抽屉组件，从屏幕边缘滑出的浮层面板。支持从四个方向弹出，常用于承载详情信息、表单编辑等场景。与 Dialog 类似但更适合承载较多内容。",
-  "importStatement": "import { Drawer } from '@king-design/vue';",
-  "props": [
-    {
-      "name": "value",
-      "description": "抽屉是否展示，可用 v-model 双向绑定",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Drawer v-model=\"visible\"></Drawer>"
-    },
-    {
-      "name": "title",
-      "description": "抽屉标题",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"提示\"",
-      "usageExample": "<Drawer title=\"抽屉标题\"></Drawer>"
-    },
-    {
-      "name": "placement",
-      "description": "抽屉弹出的位置",
-      "type": {
-        "raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
-        "kind": "union",
-        "unionTypes": [
-          "top",
-          "bottom",
-          "left",
-          "right"
-        ]
-      },
-      "required": false,
-      "default": "\"right\"",
-      "allowedValues": [
-        {
-          "value": "right",
-          "label": "从右侧弹出",
-          "isDefault": true
-        },
-        {
-          "value": "left",
-          "label": "从左侧弹出"
-        },
-        {
-          "value": "top",
-          "label": "从顶部弹出"
-        },
-        {
-          "value": "bottom",
-          "label": "从底部弹出"
+    "id": "drawer",
+    "name": "Drawer",
+    "displayName": "抽屉",
+    "category": "feedback",
+    "description": "抽屉组件，从屏幕边缘滑出的浮层面板。支持从四个方向弹出，常用于承载详情信息、表单编辑等场景。与 Dialog 类似但更适合承载较多内容。",
+    "importStatement": "import { Drawer } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "抽屉是否展示，可用 v-model 双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer v-model=\"visible\">"
+        },
+        {
+            "name": "title",
+            "description": "抽屉标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"提示\"",
+            "usageExample": "<Drawer title=\"抽屉标题\">"
+        },
+        {
+            "name": "placement",
+            "description": "抽屉弹出的位置",
+            "type": {
+                "raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+                "kind": "union",
+                "unionTypes": [
+                    "top",
+                    "bottom",
+                    "left",
+                    "right"
+                ]
+            },
+            "required": false,
+            "default": "\"right\"",
+            "allowedValues": [
+                {
+                    "value": "right",
+                    "label": "从右侧弹出",
+                    "isDefault": true
+                },
+                {
+                    "value": "left",
+                    "label": "从左侧弹出"
+                },
+                {
+                    "value": "top",
+                    "label": "从顶部弹出"
+                },
+                {
+                    "value": "bottom",
+                    "label": "从底部弹出"
+                }
+            ],
+            "usageExample": "<Drawer placement=\"left\">"
+        },
+        {
+            "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": "<Drawer size=\"large\">"
+        },
+        {
+            "name": "width",
+            "description": "指定抽屉宽度，number 类型时单位为 px，string 类型需指定单位",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :width=\"500\">"
+        },
+        {
+            "name": "loading",
+            "description": "\"确定\"按钮是否为加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer :loading=\"isSubmitting\">"
+        },
+        {
+            "name": "disabledOk",
+            "description": "\"确定\"按钮是否为禁用状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer :disabledOk=\"!isFormValid\">"
+        },
+        {
+            "name": "okText",
+            "description": "\"确定\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确定\"",
+            "usageExample": "<Drawer okText=\"保存\">"
+        },
+        {
+            "name": "cancelText",
+            "description": "\"取消\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\"",
+            "usageExample": "<Drawer cancelText=\"关闭\">"
+        },
+        {
+            "name": "ok",
+            "description": "\"确定\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :ok=\"handleOk\">"
+        },
+        {
+            "name": "cancel",
+            "description": "\"取消\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :cancel=\"handleCancel\">"
+        },
+        {
+            "name": "hideClose",
+            "description": "是否隐藏右上角关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer hideClose>"
+        },
+        {
+            "name": "overlay",
+            "description": "是否展示遮罩层",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :overlay=\"false\">"
+        },
+        {
+            "name": "closable",
+            "description": "点击遮罩层是否可以关闭抽屉",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :closable=\"false\">"
+        },
+        {
+            "name": "escClosable",
+            "description": "是否按 ESC 键时关闭抽屉",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :escClosable=\"false\">"
+        },
+        {
+            "name": "draggable",
+            "description": "抽屉是否可拖拽",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :draggable=\"false\">"
+        },
+        {
+            "name": "terminate",
+            "description": "用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :terminate=\"handleTerminate\">"
+        },
+        {
+            "name": "container",
+            "description": "指定抽屉插入的位置，默认追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :container=\"() => document.body\">"
+        },
+        {
+            "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": "<Drawer mode=\"destroy\">"
         }
-      ],
-      "usageExample": "<Drawer placement=\"left\"></Drawer>"
-    },
-    {
-      "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": "迷你尺寸"
+    ],
+    "events": [
+        {
+            "name": "open",
+            "vueEventName": "@open",
+            "description": "抽屉打开后触发",
+            "payload": [],
+            "usageExample": "<Drawer @open=\"handleOpen\">",
+            "handlerExample": "const handleOpen = () => {\n  console.log('抽屉已打开');\n};"
+        },
+        {
+            "name": "close",
+            "vueEventName": "@close",
+            "description": "抽屉关闭后触发，不管是什么原因导致的关闭",
+            "payload": [],
+            "usageExample": "<Drawer @close=\"handleClose\">",
+            "handlerExample": "const handleClose = () => {\n  console.log('抽屉已关闭');\n};"
+        },
+        {
+            "name": "ok",
+            "vueEventName": "@ok",
+            "description": "点击确定按钮时触发",
+            "payload": [],
+            "usageExample": "<Drawer @ok=\"handleOk\">",
+            "handlerExample": "const handleOk = () => {\n  console.log('点击了确定');\n};"
+        },
+        {
+            "name": "cancel",
+            "vueEventName": "@cancel",
+            "description": "点击取消按钮时触发",
+            "payload": [],
+            "usageExample": "<Drawer @cancel=\"handleCancel\">",
+            "handlerExample": "const handleCancel = () => {\n  console.log('点击了取消');\n};"
+        },
+        {
+            "name": "terminate",
+            "vueEventName": "@terminate",
+            "description": "用户强行关闭抽屉时触发（点击关闭按钮、遮罩层或按 ESC）",
+            "payload": [],
+            "usageExample": "<Drawer @terminate=\"handleTerminate\">",
+            "handlerExample": "const handleTerminate = () => {\n  console.log('用户强行关闭');\n};"
+        },
+        {
+            "name": "afterClose",
+            "vueEventName": "@afterClose",
+            "description": "抽屉退出动画执行完成后触发",
+            "payload": [],
+            "usageExample": "<Drawer @afterClose=\"handleAfterClose\">",
+            "handlerExample": "const handleAfterClose = () => {\n  console.log('动画完成');\n};"
         }
-      ],
-      "usageExample": "<Drawer size=\"large\"></Drawer>"
-    },
-    {
-      "name": "width",
-      "description": "指定抽屉宽度，number 类型时单位为 px，string 类型需指定单位",
-      "type": {
-        "raw": "number | string",
-        "kind": "union"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Drawer :width=\"500\"></Drawer>"
-    },
-    {
-      "name": "loading",
-      "description": "\"确定\"按钮是否为加载状态",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Drawer :loading=\"isSubmitting\"></Drawer>"
-    },
-    {
-      "name": "disabledOk",
-      "description": "\"确定\"按钮是否为禁用状态",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Drawer :disabledOk=\"!isFormValid\"></Drawer>"
-    },
-    {
-      "name": "okText",
-      "description": "\"确定\"按钮文案",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"确定\"",
-      "usageExample": "<Drawer okText=\"保存\"></Drawer>"
-    },
-    {
-      "name": "cancelText",
-      "description": "\"取消\"按钮文案",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"取消\"",
-      "usageExample": "<Drawer cancelText=\"关闭\"></Drawer>"
-    },
-    {
-      "name": "ok",
-      "description": "\"确定\"按钮点击后自定义回调函数",
-      "type": {
-        "raw": "() => void",
-        "kind": "function",
-        "functionSignature": "() => void"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Drawer :ok=\"handleOk\"></Drawer>"
-    },
-    {
-      "name": "cancel",
-      "description": "\"取消\"按钮点击后自定义回调函数",
-      "type": {
-        "raw": "() => void",
-        "kind": "function",
-        "functionSignature": "() => void"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Drawer :cancel=\"handleCancel\"></Drawer>"
-    },
-    {
-      "name": "hideClose",
-      "description": "是否隐藏右上角关闭按钮",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Drawer hideClose></Drawer>"
-    },
-    {
-      "name": "overlay",
-      "description": "是否展示遮罩层",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Drawer :overlay=\"false\"></Drawer>"
-    },
-    {
-      "name": "closable",
-      "description": "点击遮罩层是否可以关闭抽屉",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Drawer :closable=\"false\"></Drawer>"
-    },
-    {
-      "name": "escClosable",
-      "description": "是否按 ESC 键时关闭抽屉",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "true",
-      "usageExample": "<Drawer :escClosable=\"false\"></Drawer>"
-    },
-    {
-      "name": "terminate",
-      "description": "用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数",
-      "type": {
-        "raw": "() => void",
-        "kind": "function",
-        "functionSignature": "() => void"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Drawer :terminate=\"handleTerminate\"></Drawer>"
-    },
-    {
-      "name": "container",
-      "description": "指定抽屉插入的位置，默认追加到 body",
-      "type": {
-        "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
-        "kind": "union"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Drawer :container=\"() => document.body\"></Drawer>"
-    },
-    {
-      "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"
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "弹出抽屉",
+            "params": [
+                {
+                    "name": "props",
+                    "type": "DrawerProps",
+                    "description": "可选的临时抽屉配置，会在本次显示时覆盖标题、方向、宽度或按钮状态。",
+                    "optional": true
+                }
+            ],
+            "returnType": "Promise",
+            "usageExample": "drawerRef.value?.show();"
+        },
+        {
+            "name": "close",
+            "description": "关闭抽屉",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.close();"
+        },
+        {
+            "name": "showLoading",
+            "description": "\"确定\"按钮变为加载状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.showLoading();"
+        },
+        {
+            "name": "hideLoading",
+            "description": "\"确定\"按钮变为正常状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.hideLoading();"
+        },
+        {
+            "name": "disableOk",
+            "description": "\"确定\"按钮变为禁用状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.disableOk();"
+        },
+        {
+            "name": "enableOk",
+            "description": "\"确定\"按钮变为正常状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.enableOk();"
+        }
+    ],
+    "examples": [
+        {
+            "id": "drawer_basic",
+            "title": "基础用法",
+            "description": "基本的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"抽屉标题\">\n    <p>抽屉内容</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的抽屉"
+        },
+        {
+            "id": "drawer_placement",
+            "title": "不同方向",
+            "description": "从四个方向弹出的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\nconst placement = ref<'left' | 'right' | 'top' | 'bottom'>('right');\n\nconst openDrawer = (pos: typeof placement.value) => {\n  placement.value = pos;\n  visible.value = true;\n};\n</script>\n<template>\n  <Button @click=\"openDrawer('left')\">左侧</Button>\n  <Button @click=\"openDrawer('right')\">右侧</Button>\n  <Button @click=\"openDrawer('top')\">顶部</Button>\n  <Button @click=\"openDrawer('bottom')\">底部</Button>\n  <Drawer v-model=\"visible\" :placement=\"placement\" title=\"抽屉\">\n    <p>从 {{ placement }} 方向弹出</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "placement",
+                "direction"
+            ],
+            "usedProps": [
+                "value",
+                "placement",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "从不同方向弹出抽屉"
+        },
+        {
+            "id": "drawer_width",
+            "title": "自定义宽度",
+            "description": "指定抽屉宽度",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开宽抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"宽抽屉\" :width=\"500\">\n    <p>这是一个 500px 宽的抽屉</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "width",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "width"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义抽屉宽度"
+        },
+        {
+            "id": "drawer_footer",
+            "title": "自定义底部",
+            "description": "自定义抽屉底部按钮",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer 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    </template>\n  </Drawer>\n</template>",
+            "tags": [
+                "footer",
+                "slot",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "footer"
+            ],
+            "usedMethods": [],
+            "scenario": "自定义抽屉底部按钮区域"
+        },
+        {
+            "id": "drawer_no_overlay",
+            "title": "无遮罩层",
+            "description": "隐藏遮罩层的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开无遮罩抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"无遮罩\" :overlay=\"false\">\n    <p>没有遮罩层的抽屉</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "overlay",
+                "no-mask"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "overlay"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建无遮罩层的抽屉"
+        },
+        {
+            "id": "drawer_form",
+            "title": "抽屉表单",
+            "description": "在抽屉中放置表单",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Drawer, Button, Form, FormItem, Input } from '@king-design/vue';\n\nconst visible = ref(false);\nconst loading = ref(false);\nconst form = reactive({\n  name: '',\n  email: ''\n});\n\nconst handleOk = async () => {\n  loading.value = true;\n  // 模拟提交\n  await new Promise(r => setTimeout(r, 1000));\n  loading.value = false;\n  visible.value = false;\n};\n</script>\n<template>\n  <Button @click=\"visible = true\">打开表单</Button>\n  <Drawer v-model=\"visible\" title=\"编辑信息\" :loading=\"loading\" @ok=\"handleOk\">\n    <Form>\n      <FormItem label=\"姓名\">\n        <Input v-model=\"form.name\" />\n      </FormItem>\n      <FormItem label=\"邮箱\">\n        <Input v-model=\"form.email\" />\n      </FormItem>\n    </Form>\n  </Drawer>\n</template>",
+            "tags": [
+                "form",
+                "submit",
+                "loading"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "loading"
+            ],
+            "usedEvents": [
+                "ok"
+            ],
+            "usedMethods": [],
+            "scenario": "在抽屉中放置编辑表单"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "drawer_placement_typo",
+            "description": "placement 值拼写错误",
+            "wrongCode": "<Drawer placement=\"center\">",
+            "correctCode": "<Drawer placement=\"right\">",
+            "explanation": "placement 只支持 top, bottom, left, right，不存在 center 值",
+            "relatedProps": [
+                "placement"
+            ]
+        },
+        {
+            "id": "drawer_vmodel_name",
+            "description": "使用错误的 v-model 属性名",
+            "wrongCode": "<Drawer v-model:visible=\"visible\">",
+            "correctCode": "<Drawer v-model=\"visible\">",
+            "explanation": "Drawer 使用 v-model 控制显示状态，不是 v-model:visible",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "drawer_closable_vs_hideclose",
+            "description": "混淆 closable 和 hideClose",
+            "wrongCode": "<Drawer :closable=\"true\"> <!-- 想隐藏关闭按钮 -->",
+            "correctCode": "<Drawer hideClose> <!-- 隐藏关闭按钮 -->\n<Drawer :closable=\"false\"> <!-- 禁止点击遮罩关闭 -->",
+            "explanation": "closable 控制点击遮罩是否关闭，hideClose 控制是否显示关闭按钮",
+            "relatedProps": [
+                "closable",
+                "hideClose"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "抽屉",
+        "drawer",
+        "侧边栏",
+        "滑出",
+        "面板",
+        "详情"
+    ],
+    "useCases": [
+        "详情信息展示",
+        "表单编辑面板",
+        "配置设置面板",
+        "多级菜单操作",
+        "预览查看面板"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DrawerPlacement",
+            "definition": "type DrawerPlacement = 'top' | 'bottom' | 'left' | 'right'",
+            "description": "抽屉弹出方向枚举，决定抽屉从哪个边缘进入页面。"
+        },
+        {
+            "name": "DrawerSize",
+            "definition": "type DrawerSize = string | number",
+            "description": "抽屉尺寸类型，可传具体像素值、百分比字符串或预设尺寸。"
+        },
+        {
+            "name": "DrawerProps",
+            "definition": "type DrawerProps = {\n  title?: string\n  value?: boolean\n  placement?: 'top' | 'bottom' | 'left' | 'right'\n  width?: string | number\n  loading?: boolean\n  disabledOk?: boolean\n}",
+            "description": "实例 `show` 方法常用的抽屉属性配置片段，可覆盖标题、方向、宽度和按钮状态。"
         }
-      ],
-      "usageExample": "<Drawer mode=\"destroy\"></Drawer>"
-    }
-  ],
-  "events": [
-    {
-      "name": "open",
-      "vueEventName": "@open",
-      "description": "抽屉打开后触发",
-      "payload": [],
-      "usageExample": "<Drawer @open=\"handleOpen\"></Drawer>",
-      "handlerExample": "const handleOpen = () => {\n  console.log('抽屉已打开');\n};"
-    },
-    {
-      "name": "close",
-      "vueEventName": "@close",
-      "description": "抽屉关闭后触发，不管是什么原因导致的关闭",
-      "payload": [],
-      "usageExample": "<Drawer @close=\"handleClose\"></Drawer>",
-      "handlerExample": "const handleClose = () => {\n  console.log('抽屉已关闭');\n};"
-    },
-    {
-      "name": "ok",
-      "vueEventName": "@ok",
-      "description": "点击确定按钮时触发",
-      "payload": [],
-      "usageExample": "<Drawer @ok=\"handleOk\"></Drawer>",
-      "handlerExample": "const handleOk = () => {\n  console.log('点击了确定');\n};"
-    },
-    {
-      "name": "cancel",
-      "vueEventName": "@cancel",
-      "description": "点击取消按钮时触发",
-      "payload": [],
-      "usageExample": "<Drawer @cancel=\"handleCancel\"></Drawer>",
-      "handlerExample": "const handleCancel = () => {\n  console.log('点击了取消');\n};"
-    },
-    {
-      "name": "terminate",
-      "vueEventName": "@terminate",
-      "description": "用户强行关闭抽屉时触发（点击关闭按钮、遮罩层或按 ESC）",
-      "payload": [],
-      "usageExample": "<Drawer @terminate=\"handleTerminate\"></Drawer>",
-      "handlerExample": "const handleTerminate = () => {\n  console.log('用户强行关闭');\n};"
-    },
-    {
-      "name": "afterClose",
-      "vueEventName": "@afterClose",
-      "description": "抽屉退出动画执行完成后触发",
-      "payload": [],
-      "usageExample": "<Drawer @afterClose=\"handleAfterClose\"></Drawer>",
-      "handlerExample": "const handleAfterClose = () => {\n  console.log('动画完成');\n};"
-    }
-  ],
-  "methods": [
-    {
-      "name": "show",
-      "description": "弹出抽屉",
-      "params": [],
-      "returnType": "Promise",
-      "usageExample": "drawerRef.value?.show();"
-    },
-    {
-      "name": "close",
-      "description": "关闭抽屉",
-      "params": [],
-      "returnType": "void",
-      "usageExample": "drawerRef.value?.close();"
-    },
-    {
-      "name": "showLoading",
-      "description": "\"确定\"按钮变为加载状态",
-      "params": [],
-      "returnType": "void",
-      "usageExample": "drawerRef.value?.showLoading();"
-    },
-    {
-      "name": "hideLoading",
-      "description": "\"确定\"按钮变为正常状态",
-      "params": [],
-      "returnType": "void",
-      "usageExample": "drawerRef.value?.hideLoading();"
-    },
-    {
-      "name": "disableOk",
-      "description": "\"确定\"按钮变为禁用状态",
-      "params": [],
-      "returnType": "void",
-      "usageExample": "drawerRef.value?.disableOk();"
-    },
-    {
-      "name": "enableOk",
-      "description": "\"确定\"按钮变为正常状态",
-      "params": [],
-      "returnType": "void",
-      "usageExample": "drawerRef.value?.enableOk();"
-    }
-  ],
-  "slots": [
-    {
-      "name": "content",
-      "description": "定义整个弹窗体，包括header，body，footer"
-    },
-    {
-      "name": "header",
-      "description": "扩展弹窗头部"
-    },
-    {
-      "name": "body",
-      "description": "扩展弹窗主体部分"
-    },
-    {
-      "name": "footer",
-      "description": "扩展弹窗底部"
-    },
-    {
-      "name": "footer-wrapper",
-      "description": "扩展弹窗整个底部，上述footer是它下面一个子扩展点"
-    }
-  ],
-  "examples": [
-    {
-      "id": "drawer_basic",
-      "title": "基础用法",
-      "description": "基本的抽屉",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"抽屉标题\">\n    <p>抽屉内容</p>\n  </Drawer>\n</template>",
-      "tags": [
-        "basic"
-      ],
-      "usedProps": [
-        "value",
-        "title"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "创建一个基本的抽屉"
-    },
-    {
-      "id": "drawer_placement",
-      "title": "不同方向",
-      "description": "从四个方向弹出的抽屉",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\nconst placement = ref<'left' | 'right' | 'top' | 'bottom'>('right');\n\nconst openDrawer = (pos: typeof placement.value) => {\n  placement.value = pos;\n  visible.value = true;\n};\n</script>\n<template>\n  <Button @click=\"openDrawer('left')\">左侧</Button>\n  <Button @click=\"openDrawer('right')\">右侧</Button>\n  <Button @click=\"openDrawer('top')\">顶部</Button>\n  <Button @click=\"openDrawer('bottom')\">底部</Button>\n  <Drawer v-model=\"visible\" :placement=\"placement\" title=\"抽屉\">\n    <p>从 {{ placement }} 方向弹出</p>\n  </Drawer>\n</template>",
-      "tags": [
-        "placement",
-        "direction"
-      ],
-      "usedProps": [
-        "value",
-        "placement",
-        "title"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "从不同方向弹出抽屉"
-    },
-    {
-      "id": "drawer_width",
-      "title": "自定义宽度",
-      "description": "指定抽屉宽度",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开宽抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"宽抽屉\" :width=\"500\">\n    <p>这是一个 500px 宽的抽屉</p>\n  </Drawer>\n</template>",
-      "tags": [
-        "width",
-        "custom"
-      ],
-      "usedProps": [
-        "value",
-        "title",
-        "width"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "自定义抽屉宽度"
-    },
-    {
-      "id": "drawer_footer",
-      "title": "自定义底部",
-      "description": "自定义抽屉底部按钮",
-      "difficulty": "medium",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer 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    </template>\n  </Drawer>\n</template>",
-      "tags": [
-        "footer",
-        "slot",
-        "custom"
-      ],
-      "usedProps": [
-        "value",
-        "title"
-      ],
-      "usedEvents": [],
-      "usedSlots": [
-        "footer"
-      ],
-      "usedMethods": [],
-      "scenario": "自定义抽屉底部按钮区域"
-    },
-    {
-      "id": "drawer_no_overlay",
-      "title": "无遮罩层",
-      "description": "隐藏遮罩层的抽屉",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开无遮罩抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"无遮罩\" :overlay=\"false\">\n    <p>没有遮罩层的抽屉</p>\n  </Drawer>\n</template>",
-      "tags": [
-        "overlay",
-        "no-mask"
-      ],
-      "usedProps": [
-        "value",
-        "title",
-        "overlay"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "创建无遮罩层的抽屉"
-    },
-    {
-      "id": "drawer_form",
-      "title": "抽屉表单",
-      "description": "在抽屉中放置表单",
-      "difficulty": "medium",
-      "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Drawer, Button, Form, FormItem, Input } from '@king-design/vue';\n\nconst visible = ref(false);\nconst loading = ref(false);\nconst form = reactive({\n  name: '',\n  email: ''\n});\n\nconst handleOk = async () => {\n  loading.value = true;\n  // 模拟提交\n  await new Promise(r => setTimeout(r, 1000));\n  loading.value = false;\n  visible.value = false;\n};\n</script>\n<template>\n  <Button @click=\"visible = true\">打开表单</Button>\n  <Drawer v-model=\"visible\" title=\"编辑信息\" :loading=\"loading\" @ok=\"handleOk\">\n    <Form>\n      <FormItem label=\"姓名\">\n        <Input v-model=\"form.name\" />\n      </FormItem>\n      <FormItem label=\"邮箱\">\n        <Input v-model=\"form.email\" />\n      </FormItem>\n    </Form>\n  </Drawer>\n</template>",
-      "tags": [
-        "form",
-        "submit",
-        "loading"
-      ],
-      "usedProps": [
-        "value",
-        "title",
-        "loading"
-      ],
-      "usedEvents": [
-        "ok"
-      ],
-      "usedMethods": [],
-      "scenario": "在抽屉中放置编辑表单"
-    }
-  ],
-  "commonMistakes": [
-    {
-      "id": "drawer_placement_typo",
-      "description": "placement 值拼写错误",
-      "wrongCode": "<Drawer placement=\"center\">",
-      "correctCode": "<Drawer placement=\"right\">",
-      "explanation": "placement 只支持 top, bottom, left, right，不存在 center 值",
-      "relatedProps": [
-        "placement"
-      ]
-    },
-    {
-      "id": "drawer_vmodel_name",
-      "description": "使用错误的 v-model 属性名",
-      "wrongCode": "<Drawer v-model:visible=\"visible\">",
-      "correctCode": "<Drawer v-model=\"visible\">",
-      "explanation": "Drawer 使用 v-model 控制显示状态，不是 v-model:visible",
-      "relatedProps": [
-        "value"
-      ]
-    },
-    {
-      "id": "drawer_closable_vs_hideclose",
-      "description": "混淆 closable 和 hideClose",
-      "wrongCode": "<Drawer :closable=\"true\"> <!-- 想隐藏关闭按钮 -->",
-      "correctCode": "<Drawer hideClose> <!-- 隐藏关闭按钮 -->\n<Drawer :closable=\"false\"> <!-- 禁止点击遮罩关闭 -->",
-      "explanation": "closable 控制点击遮罩是否关闭，hideClose 控制是否显示关闭按钮",
-      "relatedProps": [
-        "closable",
-        "hideClose"
-      ]
-    }
-  ],
-  "searchKeywords": [
-    "抽屉",
-    "drawer",
-    "侧边栏",
-    "滑出",
-    "面板",
-    "详情"
-  ],
-  "useCases": [
-    "详情信息展示",
-    "表单编辑面板",
-    "配置设置面板",
-    "多级菜单操作",
-    "预览查看面板"
-  ],
-  "relatedComponents": [
-    "Dialog"
-  ]
+    ],
+    "relatedComponents": [
+        "Dialog"
+    ]
 }