king-design-analyzer 1.0.0

package/components/timepicker.json

@@ -0,0 +1,447 @@
+{
+    "id": "timepicker",
+    "name": "Timepicker",
+    "displayName": "时间选择",
+    "category": "form",
+    "description": "时间选择组件，用于选择时间。支持单选、多选、范围选择，支持设置时间步长、限制可选时间范围等功能。",
+    "importStatement": "import { Timepicker } 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": "<Timepicker v-model=\"time\" />"
+        },
+        {
+            "name": "range",
+            "description": "是否选择时间范围",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker range />"
+        },
+        {
+            "name": "multiple",
+            "description": "是否支持多选",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker multiple />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker disabled />"
+        },
+        {
+            "name": "clearable",
+            "description": "是否可清空",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker 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": "<Timepicker size=\"small\" />"
+        },
+        {
+            "name": "placeholder",
+            "description": "占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"请选择时间\"",
+            "usageExample": "<Timepicker placeholder=\"选择开始时间\" />"
+        },
+        {
+            "name": "format",
+            "description": "时间格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"YYYY-MM-DD HH:mm:ss\"",
+            "usageExample": "<Timepicker format=\"HH:mm\" />"
+        },
+        {
+            "name": "valueFormat",
+            "description": "value 值的格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker valueFormat=\"HH:mm:ss\" />"
+        },
+        {
+            "name": "showFormat",
+            "description": "展示的格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker showFormat=\"HH时mm分\" />"
+        },
+        {
+            "name": "step",
+            "description": "固定时间点的步长，如 \"00:30\" 表示每 30 分钟一个选项",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker step=\"00:30\" />"
+        },
+        {
+            "name": "min",
+            "description": "最小可选时间",
+            "type": {
+                "raw": "Value",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker min=\"09:00:00\" />"
+        },
+        {
+            "name": "max",
+            "description": "最大可选时间",
+            "type": {
+                "raw": "Value",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker max=\"18:00:00\" />"
+        },
+        {
+            "name": "hideIcon",
+            "description": "是否隐藏后面的图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker hideIcon />"
+        },
+        {
+            "name": "fluid",
+            "description": "是否宽度 100%",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker fluid />"
+        },
+        {
+            "name": "inline",
+            "description": "是否展示内联模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker inline />"
+        },
+        {
+            "name": "flat",
+            "description": "是否展示扁平样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker flat />"
+        },
+        {
+            "name": "width",
+            "description": "指定宽度，自动添加单位 px",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker :width=\"150\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "show",
+            "vueEventName": "@show",
+            "description": "菜单弹出时触发",
+            "payload": [],
+            "usageExample": "<Timepicker @show=\"handleShow\" />",
+            "handlerExample": "const handleShow = () => {\n  console.log('时间选择器已打开');\n};"
+        },
+        {
+            "name": "hide",
+            "vueEventName": "@hide",
+            "description": "菜单隐藏时触发",
+            "payload": [],
+            "usageExample": "<Timepicker @hide=\"handleHide\" />",
+            "handlerExample": "const handleHide = () => {\n  console.log('时间选择器已关闭');\n};"
+        },
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "用户操作完成且值变化时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前选择的时间值"
+                }
+            ],
+            "usageExample": "<Timepicker @change=\"handleChange\" />",
+            "handlerExample": "const handleChange = (value: string) => {\n  console.log('选择的时间:', value);\n};"
+        },
+        {
+            "name": "selecting",
+            "vueEventName": "@selecting",
+            "description": "范围选择时，用户正在操作选择时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "[Dayjs, Dayjs?]",
+                    "description": "当前选择的值"
+                }
+            ],
+            "usageExample": "<Timepicker 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 对象"
+        }
+    ],
+    "examples": [
+        {
+            "id": "timepicker_basic",
+            "title": "基础用法",
+            "description": "基本的时间选择",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst time = ref('');\n</script>\n<template>\n  <Timepicker v-model=\"time\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的时间选择器"
+        },
+        {
+            "id": "timepicker_range",
+            "title": "范围选择",
+            "description": "选择时间范围",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst timeRange = ref<[string, string]>(['', '']);\n</script>\n<template>\n  <Timepicker v-model=\"timeRange\" range />\n</template>",
+            "tags": [
+                "range"
+            ],
+            "usedProps": [
+                "value",
+                "range"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择开始时间和结束时间"
+        },
+        {
+            "id": "timepicker_step",
+            "title": "时间步长",
+            "description": "设置固定时间步长",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst time = ref('');\n</script>\n<template>\n  <!-- 每 30 分钟一个选项 -->\n  <Timepicker v-model=\"time\" step=\"00:30\" />\n</template>",
+            "tags": [
+                "step",
+                "interval"
+            ],
+            "usedProps": [
+                "value",
+                "step"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置固定的时间间隔"
+        },
+        {
+            "id": "timepicker_min_max",
+            "title": "限制时间范围",
+            "description": "限制可选时间的最小和最大值",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst time = ref('');\n</script>\n<template>\n  <Timepicker v-model=\"time\" min=\"09:00:00\" max=\"18:00:00\" />\n</template>",
+            "tags": [
+                "min",
+                "max",
+                "limit"
+            ],
+            "usedProps": [
+                "value",
+                "min",
+                "max"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "限制工作时间范围"
+        },
+        {
+            "id": "timepicker_clearable",
+            "title": "可清空",
+            "description": "可清空的时间选择器",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst time = ref('12:00:00');\n</script>\n<template>\n  <Timepicker v-model=\"time\" clearable />\n</template>",
+            "tags": [
+                "clearable"
+            ],
+            "usedProps": [
+                "value",
+                "clearable"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "允许清空已选时间"
+        },
+        {
+            "id": "timepicker_format",
+            "title": "自定义格式",
+            "description": "自定义时间显示格式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Timepicker } from '@king-design/vue';\n\nconst time = ref('');\n</script>\n<template>\n  <Timepicker v-model=\"time\" showFormat=\"HH时mm分\" />\n</template>",
+            "tags": [
+                "format",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "showFormat"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义时间的显示格式"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "timepicker_range_value_type",
+            "description": "范围选择时 value 类型错误",
+            "wrongCode": "const time = ref('');\n<Timepicker v-model=\"time\" range />",
+            "correctCode": "const timeRange = ref<[string, string]>(['', '']);\n<Timepicker v-model=\"timeRange\" range />",
+            "explanation": "当 range 为 true 时，value 必须是 [string, string] 数组",
+            "relatedProps": [
+                "value",
+                "range"
+            ]
+        },
+        {
+            "id": "timepicker_step_format",
+            "description": "step 格式错误",
+            "wrongCode": "<Timepicker step=\"30\" /> <!-- 期望 30 分钟 -->",
+            "correctCode": "<Timepicker step=\"00:30\" />",
+            "explanation": "step 应使用时间格式字符串，如 \"00:30\" 表示 30 分钟",
+            "relatedProps": [
+                "step"
+            ]
+        },
+        {
+            "id": "timepicker_min_max_format",
+            "description": "min/max 格式与 format 不匹配",
+            "wrongCode": "<Timepicker min=\"9:00\" max=\"18:00\" /> <!-- 缺少秒 -->",
+            "correctCode": "<Timepicker min=\"09:00:00\" max=\"18:00:00\" />",
+            "explanation": "min/max 应使用完整的时间格式",
+            "relatedProps": [
+                "min",
+                "max"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "时间",
+        "timepicker",
+        "时间选择",
+        "time",
+        "时分秒",
+        "时间范围"
+    ],
+    "useCases": [
+        "表单时间输入",
+        "预约时间选择",
+        "工作时间设置",
+        "营业时间配置",
+        "定时任务设置"
+    ],
+    "relatedComponents": [
+        "Datepicker"
+    ]
+}