king-design-analyzer 2.1.7 → 2.2.0

package/components/datepicker.json

@@ -1,529 +1,661 @@
 {
-  "id": "datepicker",
-  "name": "Datepicker",
-  "displayName": "日期选择",
-  "category": "form",
-  "description": "日期选择组件，用于选择日期、日期时间、年份、月份等。支持单选、多选、范围选择，支持禁用日期、快捷方式、自定义格式等功能。",
-  "importStatement": "import { Datepicker } from '@king-design/vue';",
-  "props": [
-    {
-      "name": "value",
-      "description": "当前选择的值，可用 v-model 双向绑定。范围选择时为 [Value, Value]",
-      "type": {
-        "raw": "Value | Value[] | [Value, Value] | [Value, Value][]",
-        "kind": "union"
-      },
-      "required": false,
-      "default": "\"\"",
-      "usageExample": "<Datepicker v-model=\"date\" />"
-    },
-    {
-      "name": "type",
-      "description": "组件类型",
-      "type": {
-        "raw": "\"date\" | \"datetime\" | \"year\" | \"month\"",
-        "kind": "union",
-        "unionTypes": [
-          "date",
-          "datetime",
-          "year",
-          "month"
-        ]
-      },
-      "required": false,
-      "default": "\"date\"",
-      "allowedValues": [
-        {
-          "value": "date",
-          "label": "只选择日期",
-          "isDefault": true
-        },
-        {
-          "value": "datetime",
-          "label": "选择日期和时间"
-        },
-        {
-          "value": "year",
-          "label": "选择年份"
-        },
-        {
-          "value": "month",
-          "label": "选择月份"
+    "id": "datepicker",
+    "name": "Datepicker",
+    "displayName": "日期选择",
+    "category": "form",
+    "description": "日期选择组件，用于选择日期、日期时间、年份、月份等。支持单选、多选、范围选择，支持禁用日期、快捷方式、自定义格式等功能。",
+    "importStatement": "import { Datepicker } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前选择的值，可用 v-model 双向绑定。范围选择时为 [Value, Value]",
+            "type": {
+                "raw": "Value | Value[] | [Value, Value] | [Value, Value][]",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"\"",
+            "usageExample": "<Datepicker v-model=\"date\" />"
+        },
+        {
+            "name": "type",
+            "description": "组件类型",
+            "type": {
+                "raw": "\"date\" | \"datetime\" | \"year\" | \"month\"",
+                "kind": "union",
+                "unionTypes": [
+                    "date",
+                    "datetime",
+                    "year",
+                    "month"
+                ]
+            },
+            "required": false,
+            "default": "\"date\"",
+            "allowedValues": [
+                {
+                    "value": "date",
+                    "label": "只选择日期",
+                    "isDefault": true
+                },
+                {
+                    "value": "datetime",
+                    "label": "选择日期和时间"
+                },
+                {
+                    "value": "year",
+                    "label": "选择年份"
+                },
+                {
+                    "value": "month",
+                    "label": "选择月份"
+                }
+            ],
+            "usageExample": "<Datepicker type=\"datetime\" />"
+        },
+        {
+            "name": "range",
+            "description": "是否选择日期范围",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker range />"
+        },
+        {
+            "name": "multiple",
+            "description": "是否支持多选",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker multiple />"
+        },
+        {
+            "name": "filterable",
+            "description": "是否支持筛选输入",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker filterable />"
+        },
+        {
+            "name": "loading",
+            "description": "数据加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker :loading=\"loading\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker disabled />"
+        },
+        {
+            "name": "name",
+            "description": "表单元素的 name 属性",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker name=\"startDate\" />"
+        },
+        {
+            "name": "clearable",
+            "description": "是否可清空",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker clearable />"
+        },
+        {
+            "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": "<Datepicker size=\"small\" />"
+        },
+        {
+            "name": "placeholder",
+            "description": "占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"请选择日期\"",
+            "usageExample": "<Datepicker placeholder=\"选择开始日期\" />"
+        },
+        {
+            "name": "format",
+            "description": "日期格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"YYYY-MM-DD HH:mm:ss\"",
+            "usageExample": "<Datepicker format=\"YYYY-MM-DD\" />"
+        },
+        {
+            "name": "valueFormat",
+            "description": "value 值的日期格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker valueFormat=\"YYYY-MM-DD\" />"
+        },
+        {
+            "name": "showFormat",
+            "description": "展示的日期格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker showFormat=\"YYYY年MM月DD日\" />"
+        },
+        {
+            "name": "min",
+            "description": "最小可选日期",
+            "type": {
+                "raw": "Value",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker min=\"2024-01-01\" />"
+        },
+        {
+            "name": "max",
+            "description": "最大可选日期",
+            "type": {
+                "raw": "Value",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker max=\"2024-12-31\" />"
+        },
+        {
+            "name": "disabledDate",
+            "description": "禁用日期的函数，返回 true 表示禁用该日期",
+            "type": {
+                "raw": "(v: Dayjs) => boolean",
+                "kind": "function",
+                "functionSignature": "(v: Dayjs) => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker :disabledDate=\"(d) => d.day() === 0\" />"
+        },
+        {
+            "name": "shortcuts",
+            "description": "快捷方式配置",
+            "type": {
+                "raw": "Shortcut[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker :shortcuts=\"shortcuts\" />"
+        },
+        {
+            "name": "hideIcon",
+            "description": "是否隐藏后面的图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker hideIcon />"
+        },
+        {
+            "name": "fluid",
+            "description": "是否宽度 100%",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker fluid />"
+        },
+        {
+            "name": "inline",
+            "description": "是否展示内联模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker inline />"
+        },
+        {
+            "name": "flat",
+            "description": "是否展示扁平样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker flat />"
+        },
+        {
+            "name": "width",
+            "description": "指定宽度，自动添加单位 px",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker :width=\"200\" />"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出菜单追加的位置，默认 Dialog 组件会追加到 Dialog 中，其他追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Datepicker :container=\"() => document.body\" />"
+        },
+        {
+            "name": "show",
+            "description": "是否展示菜单项（受控模式）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker :show=\"visible\" />"
+        },
+        {
+            "name": "position",
+            "description": "菜单弹出的位置",
+            "type": {
+                "raw": "Position | \"left\" | \"bottom\" | \"right\" | \"top\"",
+                "kind": "union",
+                "unionTypes": [
+                    "left",
+                    "bottom",
+                    "right",
+                    "top"
+                ]
+            },
+            "required": false,
+            "default": "{my: 'left top+8', at: 'left bottom'}",
+            "usageExample": "<Datepicker position=\"top\" />"
+        },
+        {
+            "name": "nowrap",
+            "description": "选中值区域是否不换行展示，适合单行紧凑布局",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker nowrap />"
+        },
+        {
+            "name": "draggable",
+            "description": "多选值是否支持拖动排序",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker multiple draggable />"
+        },
+        {
+            "name": "virtual",
+            "description": "是否开启虚拟列表，用于大数据量场景",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Datepicker virtual />"
+        }
+    ],
+    "events": [
+        {
+            "name": "show",
+            "vueEventName": "@show",
+            "description": "菜单弹出时触发",
+            "payload": [],
+            "usageExample": "<Datepicker @show=\"handleShow\" />",
+            "handlerExample": "const handleShow = () => {\n  console.log('日期选择器已打开');\n};"
+        },
+        {
+            "name": "hide",
+            "vueEventName": "@hide",
+            "description": "菜单隐藏时触发",
+            "payload": [],
+            "usageExample": "<Datepicker @hide=\"handleHide\" />",
+            "handlerExample": "const handleHide = () => {\n  console.log('日期选择器已关闭');\n};"
+        },
+        {
+            "name": "selecting",
+            "vueEventName": "@selecting",
+            "description": "范围选择时，用户正在操作选择时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "[Dayjs, Dayjs?]",
+                    "description": "当前选择的值"
+                },
+                {
+                    "name": "confirmed",
+                    "type": "boolean",
+                    "description": "当前这次 selecting 是否已经进入确认完成态；常见交互过程中通常为 `false`。"
+                }
+            ],
+            "usageExample": "<Datepicker range @selecting=\"handleSelecting\" />",
+            "handlerExample": "const handleSelecting = (value, confirmed) => {\n  console.log('正在选择:', value, confirmed);\n};"
+        }
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "主动展开日期选择面板。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "datepickerRef.value?.show();"
+        },
+        {
+            "name": "hide",
+            "description": "主动关闭日期选择面板。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "datepickerRef.value?.hide();"
+        },
+        {
+            "name": "position",
+            "description": "重新计算日期选择面板的位置。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "datepickerRef.value?.position();"
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "Value",
+            "definition": "type Value = string | Date | number | Dayjs",
+            "description": "日期值类型，支持字符串、Date 对象、时间戳或 Dayjs 对象"
+        },
+        {
+            "name": "Shortcut",
+            "definition": "type Shortcut = {\n  label: (() => string | VNode) | string | VNode\n  value: () => Value | [Value, Value]\n}",
+            "description": "快捷方式配置类型"
         }
-      ],
-      "usageExample": "<Datepicker type=\"datetime\" />"
-    },
-    {
-      "name": "range",
-      "description": "是否选择日期范围",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker range />"
-    },
-    {
-      "name": "multiple",
-      "description": "是否支持多选",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker multiple />"
-    },
-    {
-      "name": "disabled",
-      "description": "是否禁用",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker disabled />"
-    },
-    {
-      "name": "clearable",
-      "description": "是否可清空",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker clearable />"
-    },
-    {
-      "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": "迷你尺寸"
+    ],
+    "examples": [
+        {
+            "id": "datepicker_basic",
+            "title": "基础用法",
+            "description": "基本的日期选择",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"date\" clearable />\n  <p>选择的日期: {{ date }}</p>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "clearable"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的日期选择器"
+        },
+        {
+            "id": "datepicker_datetime",
+            "title": "日期时间选择",
+            "description": "同时选择日期和时间",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst datetime = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"datetime\" type=\"datetime\" clearable />\n</template>",
+            "tags": [
+                "datetime",
+                "time"
+            ],
+            "usedProps": [
+                "value",
+                "type",
+                "clearable"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择日期和时间"
+        },
+        {
+            "id": "datepicker_range",
+            "title": "范围选择",
+            "description": "选择日期范围",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst dateRange = ref<[string, string]>(['', '']);\n</script>\n<template>\n  <Datepicker v-model=\"dateRange\" range clearable />\n</template>",
+            "tags": [
+                "range",
+                "dual"
+            ],
+            "usedProps": [
+                "value",
+                "range",
+                "clearable"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择开始日期和结束日期"
+        },
+        {
+            "id": "datepicker_min_max",
+            "title": "限制日期范围",
+            "description": "限制可选日期的最小和最大值",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\nconst minDate = '2024-01-01';\nconst maxDate = '2024-12-31';\n</script>\n<template>\n  <Datepicker v-model=\"date\" :min=\"minDate\" :max=\"maxDate\" />\n</template>",
+            "tags": [
+                "min",
+                "max",
+                "limit"
+            ],
+            "usedProps": [
+                "value",
+                "min",
+                "max"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "限制可选的日期范围"
+        },
+        {
+            "id": "datepicker_disabled_date",
+            "title": "禁用日期",
+            "description": "禁用特定日期（如周末）",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\nimport type { Dayjs } from 'dayjs';\n\nconst date = ref('');\n\n// 禁用周末\nconst disabledDate = (d: Dayjs) => {\n  const day = d.day();\n  return day === 0 || day === 6;\n};\n</script>\n<template>\n  <Datepicker v-model=\"date\" :disabledDate=\"disabledDate\" />\n</template>",
+            "tags": [
+                "disabledDate",
+                "weekend"
+            ],
+            "usedProps": [
+                "value",
+                "disabledDate"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用周末日期"
+        },
+        {
+            "id": "datepicker_shortcuts",
+            "title": "快捷方式",
+            "description": "添加快捷日期选择",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\nimport dayjs from 'dayjs';\n\nconst date = ref('');\n\nconst shortcuts = [\n  { label: '今天', value: () => dayjs() },\n  { label: '昨天', value: () => dayjs().subtract(1, 'day') },\n  { label: '一周前', value: () => dayjs().subtract(7, 'day') }\n];\n</script>\n<template>\n  <Datepicker v-model=\"date\" :shortcuts=\"shortcuts\" />\n</template>",
+            "tags": [
+                "shortcuts",
+                "quick"
+            ],
+            "usedProps": [
+                "value",
+                "shortcuts"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "添加快捷日期选择"
+        },
+        {
+            "id": "datepicker_year_month",
+            "title": "年份/月份选择",
+            "description": "选择年份或月份",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst year = ref('');\nconst month = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"year\" type=\"year\" placeholder=\"请选择年份\" />\n  <Datepicker v-model=\"month\" type=\"month\" placeholder=\"请选择月份\" />\n</template>",
+            "tags": [
+                "year",
+                "month"
+            ],
+            "usedProps": [
+                "value",
+                "type",
+                "placeholder"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择年份或月份"
+        },
+        {
+            "id": "datepicker_custom_format",
+            "title": "自定义格式",
+            "description": "自定义日期显示格式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"date\" showFormat=\"YYYY年MM月DD日\" />\n</template>",
+            "tags": [
+                "format",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "showFormat"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义日期的显示格式"
         }
-      ],
-      "usageExample": "<Datepicker size=\"small\" />"
-    },
-    {
-      "name": "placeholder",
-      "description": "占位文案",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"请选择日期\"",
-      "usageExample": "<Datepicker placeholder=\"选择开始日期\" />"
-    },
-    {
-      "name": "format",
-      "description": "日期格式化字符串",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "\"YYYY-MM-DD HH:mm:ss\"",
-      "usageExample": "<Datepicker format=\"YYYY-MM-DD\" />"
-    },
-    {
-      "name": "valueFormat",
-      "description": "value 值的日期格式化字符串",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker valueFormat=\"YYYY-MM-DD\" />"
-    },
-    {
-      "name": "showFormat",
-      "description": "展示的日期格式化字符串",
-      "type": {
-        "raw": "string",
-        "kind": "string"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker showFormat=\"YYYY年MM月DD日\" />"
-    },
-    {
-      "name": "min",
-      "description": "最小可选日期",
-      "type": {
-        "raw": "Value",
-        "kind": "custom"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker min=\"2024-01-01\" />"
-    },
-    {
-      "name": "max",
-      "description": "最大可选日期",
-      "type": {
-        "raw": "Value",
-        "kind": "custom"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker max=\"2024-12-31\" />"
-    },
-    {
-      "name": "disabledDate",
-      "description": "禁用日期的函数，返回 true 表示禁用该日期",
-      "type": {
-        "raw": "(v: Dayjs) => boolean",
-        "kind": "function",
-        "functionSignature": "(v: Dayjs) => boolean"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker :disabledDate=\"(d) => d.day() === 0\" /></Datepicker>"
-    },
-    {
-      "name": "shortcuts",
-      "description": "快捷方式配置",
-      "type": {
-        "raw": "Shortcut[]",
-        "kind": "array"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker :shortcuts=\"shortcuts\" />"
-    },
-    {
-      "name": "hideIcon",
-      "description": "是否隐藏后面的图标",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker hideIcon />"
-    },
-    {
-      "name": "fluid",
-      "description": "是否宽度 100%",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker fluid />"
-    },
-    {
-      "name": "inline",
-      "description": "是否展示内联模式",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker inline />"
-    },
-    {
-      "name": "flat",
-      "description": "是否展示扁平样式",
-      "type": {
-        "raw": "boolean",
-        "kind": "boolean"
-      },
-      "required": false,
-      "default": "false",
-      "usageExample": "<Datepicker flat />"
-    },
-    {
-      "name": "width",
-      "description": "指定宽度，自动添加单位 px",
-      "type": {
-        "raw": "number | string",
-        "kind": "union"
-      },
-      "required": false,
-      "default": "undefined",
-      "usageExample": "<Datepicker :width=\"200\" />"
-    }
-  ],
-  "events": [
-    {
-      "name": "show",
-      "vueEventName": "@show",
-      "description": "菜单弹出时触发",
-      "payload": [],
-      "usageExample": "<Datepicker @show=\"handleShow\" />",
-      "handlerExample": "const handleShow = () => {\n  console.log('日期选择器已打开');\n};"
-    },
-    {
-      "name": "hide",
-      "vueEventName": "@hide",
-      "description": "菜单隐藏时触发",
-      "payload": [],
-      "usageExample": "<Datepicker @hide=\"handleHide\" />",
-      "handlerExample": "const handleHide = () => {\n  console.log('日期选择器已关闭');\n};"
-    },
-    {
-      "name": "selecting",
-      "vueEventName": "@selecting",
-      "description": "范围选择时，用户正在操作选择时触发",
-      "payload": [
-        {
-          "name": "value",
-          "type": "[Dayjs, Dayjs?]",
-          "description": "当前选择的值"
+    ],
+    "commonMistakes": [
+        {
+            "id": "datepicker_range_value_type",
+            "description": "范围选择时 value 类型错误",
+            "wrongCode": "const date = ref('');\n<Datepicker v-model=\"date\" range />",
+            "correctCode": "const dateRange = ref<[string, string]>(['', '']);\n<Datepicker v-model=\"dateRange\" range />",
+            "explanation": "当 range 为 true 时，value 必须是 [string, string] 数组",
+            "relatedProps": [
+                "value",
+                "range"
+            ]
+        },
+        {
+            "id": "datepicker_type_typo",
+            "description": "type 值拼写错误",
+            "wrongCode": "<Datepicker type=\"dateTime\" />",
+            "correctCode": "<Datepicker type=\"datetime\" />",
+            "explanation": "type 值为小写 datetime，不是 dateTime",
+            "relatedProps": [
+                "type"
+            ]
+        },
+        {
+            "id": "datepicker_disableddate_return",
+            "description": "disabledDate 函数返回值错误",
+            "wrongCode": "const disabledDate = (d) => { if (d.day() === 0) return '禁用'; }",
+            "correctCode": "const disabledDate = (d) => d.day() === 0;",
+            "explanation": "disabledDate 必须返回布尔值，true 表示禁用",
+            "relatedProps": [
+                "disabledDate"
+            ]
         }
-      ],
-      "usageExample": "<Datepicker range @selecting=\"handleSelecting\" />",
-      "handlerExample": "const handleSelecting = (value) => {\n  console.log('正在选择:', value);\n};"
-    }
-  ],
-  "methods": [],
-  "typeDefinitions": [
-    {
-      "name": "Value",
-      "definition": "type Value = string | Date | number | Dayjs",
-      "description": "日期值类型，支持字符串、Date 对象、时间戳或 Dayjs 对象"
-    },
-    {
-      "name": "Shortcut",
-      "definition": "type Shortcut = {\n  label: (() => string | VNode) | string | VNode\n  value: () => Value | [Value, Value]\n}",
-      "description": "快捷方式配置类型"
-    }
-  ],
-  "examples": [
-    {
-      "id": "datepicker_basic",
-      "title": "基础用法",
-      "description": "基本的日期选择",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"date\" clearable />\n  <p>选择的日期: {{ date }}</p>\n</template>",
-      "tags": [
-        "basic"
-      ],
-      "usedProps": [
-        "value",
-        "clearable"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "创建一个基本的日期选择器"
-    },
-    {
-      "id": "datepicker_datetime",
-      "title": "日期时间选择",
-      "description": "同时选择日期和时间",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst datetime = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"datetime\" type=\"datetime\" clearable />\n</template>",
-      "tags": [
-        "datetime",
-        "time"
-      ],
-      "usedProps": [
-        "value",
-        "type",
-        "clearable"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "选择日期和时间"
-    },
-    {
-      "id": "datepicker_range",
-      "title": "范围选择",
-      "description": "选择日期范围",
-      "difficulty": "medium",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst dateRange = ref<[string, string]>(['', '']);\n</script>\n<template>\n  <Datepicker v-model=\"dateRange\" range clearable />\n</template>",
-      "tags": [
-        "range",
-        "dual"
-      ],
-      "usedProps": [
-        "value",
-        "range",
-        "clearable"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "选择开始日期和结束日期"
-    },
-    {
-      "id": "datepicker_min_max",
-      "title": "限制日期范围",
-      "description": "限制可选日期的最小和最大值",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\nconst minDate = '2024-01-01';\nconst maxDate = '2024-12-31';\n</script>\n<template>\n  <Datepicker v-model=\"date\" :min=\"minDate\" :max=\"maxDate\" />\n</template>",
-      "tags": [
-        "min",
-        "max",
-        "limit"
-      ],
-      "usedProps": [
-        "value",
-        "min",
-        "max"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "限制可选的日期范围"
-    },
-    {
-      "id": "datepicker_disabled_date",
-      "title": "禁用日期",
-      "description": "禁用特定日期（如周末）",
-      "difficulty": "medium",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\nimport type { Dayjs } from 'dayjs';\n\nconst date = ref('');\n\n// 禁用周末\nconst disabledDate = (d: Dayjs) => {\n  const day = d.day();\n  return day === 0 || day === 6;\n};\n</script>\n<template>\n  <Datepicker v-model=\"date\" :disabledDate=\"disabledDate\" />\n</template>",
-      "tags": [
-        "disabledDate",
-        "weekend"
-      ],
-      "usedProps": [
-        "value",
-        "disabledDate"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "禁用周末日期"
-    },
-    {
-      "id": "datepicker_shortcuts",
-      "title": "快捷方式",
-      "description": "添加快捷日期选择",
-      "difficulty": "medium",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\nimport dayjs from 'dayjs';\n\nconst date = ref('');\n\nconst shortcuts = [\n  { label: '今天', value: () => dayjs() },\n  { label: '昨天', value: () => dayjs().subtract(1, 'day') },\n  { label: '一周前', value: () => dayjs().subtract(7, 'day') }\n];\n</script>\n<template>\n  <Datepicker v-model=\"date\" :shortcuts=\"shortcuts\" />\n</template>",
-      "tags": [
-        "shortcuts",
-        "quick"
-      ],
-      "usedProps": [
-        "value",
-        "shortcuts"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "添加快捷日期选择"
-    },
-    {
-      "id": "datepicker_year_month",
-      "title": "年份/月份选择",
-      "description": "选择年份或月份",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst year = ref('');\nconst month = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"year\" type=\"year\" placeholder=\"请选择年份\" />\n  <Datepicker v-model=\"month\" type=\"month\" placeholder=\"请选择月份\" />\n</template>",
-      "tags": [
-        "year",
-        "month"
-      ],
-      "usedProps": [
-        "value",
-        "type",
-        "placeholder"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "选择年份或月份"
-    },
-    {
-      "id": "datepicker_custom_format",
-      "title": "自定义格式",
-      "description": "自定义日期显示格式",
-      "difficulty": "easy",
-      "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Datepicker } from '@king-design/vue';\n\nconst date = ref('');\n</script>\n<template>\n  <Datepicker v-model=\"date\" showFormat=\"YYYY年MM月DD日\" />\n</template>",
-      "tags": [
-        "format",
-        "custom"
-      ],
-      "usedProps": [
-        "value",
-        "showFormat"
-      ],
-      "usedEvents": [],
-      "usedMethods": [],
-      "scenario": "自定义日期的显示格式"
-    }
-  ],
-  "commonMistakes": [
-    {
-      "id": "datepicker_range_value_type",
-      "description": "范围选择时 value 类型错误",
-      "wrongCode": "const date = ref('');\n<Datepicker v-model=\"date\" range />",
-      "correctCode": "const dateRange = ref<[string, string]>(['', '']);\n<Datepicker v-model=\"dateRange\" range />",
-      "explanation": "当 range 为 true 时，value 必须是 [string, string] 数组",
-      "relatedProps": [
-        "value",
-        "range"
-      ]
-    },
-    {
-      "id": "datepicker_type_typo",
-      "description": "type 值拼写错误",
-      "wrongCode": "<Datepicker type=\"dateTime\" />",
-      "correctCode": "<Datepicker type=\"datetime\" />",
-      "explanation": "type 值为小写 datetime，不是 dateTime",
-      "relatedProps": [
-        "type"
-      ]
-    },
-    {
-      "id": "datepicker_disableddate_return",
-      "description": "disabledDate 函数返回值错误",
-      "wrongCode": "const disabledDate = (d) => { if (d.day() === 0) return '禁用'; }",
-      "correctCode": "const disabledDate = (d) => d.day() === 0;",
-      "explanation": "disabledDate 必须返回布尔值，true 表示禁用",
-      "relatedProps": [
-        "disabledDate"
-      ]
-    }
-  ],
-  "searchKeywords": [
-    "日期",
-    "datepicker",
-    "时间",
-    "日历",
-    "calendar",
-    "年份",
-    "月份",
-    "范围选择"
-  ],
-  "useCases": [
-    "表单日期输入",
-    "订单时间选择",
-    "日期范围筛选",
-    "预约时间选择",
-    "报表日期查询"
-  ],
-  "relatedComponents": [
-    "Timepicker"
-  ]
+    ],
+    "searchKeywords": [
+        "日期",
+        "datepicker",
+        "时间",
+        "日历",
+        "calendar",
+        "年份",
+        "月份",
+        "范围选择"
+    ],
+    "useCases": [
+        "表单日期输入",
+        "订单时间选择",
+        "日期范围筛选",
+        "预约时间选择",
+        "报表日期查询"
+    ],
+    "relatedComponents": [
+        "Timepicker"
+    ]
 }