king-design-analyzer 1.0.0

package/components/datepicker.json

@@ -0,0 +1,529 @@
+{
+    "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": "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": "迷你尺寸"
+                }
+            ],
+            "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\" />"
+        }
+    ],
+    "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": "当前选择的值"
+                }
+            ],
+            "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"
+    ]
+}