king-design-analyzer 2.1.9 → 2.2.1

package/components/tag.json

@@ -243,8 +243,8 @@
               "description": "起始位置索引"
             }
           ],
-          "usageExample": "<Tags draggable @dragstart=\"handleDragStart\"></Tags>",
-          "handlerExample": "const handleDragStart = ({key, from}) => {\n  console.log('开始拖拽', key, from);\n};"
+          "usageExample": "<Tags draggable @dragstart=\"handleTagDragStart\"></Tags>",
+          "handlerExample": "const draggingTagKey = ref<string | number | null>(null);\n\nconst handleTagDragStart = ({ key }) => {\n  draggingTagKey.value = key;\n};"
         },
         {
           "name": "dragend",
@@ -267,14 +267,17 @@
               "description": "目标位置索引"
             }
           ],
-          "usageExample": "<Tags draggable @dragend=\"handleDragEnd\"></Tags>",
-          "handlerExample": "const handleDragEnd = ({key, from, to}) => {\n  console.log('拖拽结束', key, 'from', from, 'to', to);\n};"
+          "usageExample": "<Tags draggable @dragend=\"handleTagDragEnd\"></Tags>",
+          "handlerExample": "const tags = ref(['稳定版', '灰度中', '待发布']);\nconst draggingTagKey = ref<string | number | null>(null);\n\nconst handleTagDragEnd = ({ from, to }) => {\n  const moved = tags.value.splice(from, 1)[0];\n  tags.value.splice(to, 0, moved);\n  draggingTagKey.value = null;\n};"
         }
       ],
       "slots": [
         {
           "name": "append",
-          "description": "追加到后面的元素，不参与到Tags对Tag的管理中"
+          "description": "追加到后面的元素，不参与到Tags对Tag的管理中",
+          "bindingType": "none",
+          "vueTemplate": "#append",
+          "usageExample": "<Tags>\n  <Tag closable>标签一</Tag>\n  <template #append>\n    <Button type=\"link\">新增标签</Button>\n  </template>\n</Tags>"
         }
       ]
     }

package/components/timeline.json

@@ -0,0 +1,215 @@
+{
+    "id": "timeline",
+    "name": "Timeline",
+    "displayName": "时间轴",
+    "category": "data",
+    "description": "时间轴组件，用于按时间顺序展示事件或流程记录。配合 TimelineItem 子组件使用，支持不同状态类型和自定义节点。",
+    "importStatement": "import { Timeline, TimelineItem } from '@king-design/vue';",
+    "props": [],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "时间轴内容，通常由多个 TimelineItem 组成。",
+            "bindingType": "none",
+            "vueTemplate": "<Timeline>...</Timeline>",
+            "usageExample": "<Timeline><TimelineItem>创建完成</TimelineItem><TimelineItem>审核通过</TimelineItem></Timeline>"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "TimelineItem",
+            "description": "时间轴节点项。",
+            "props": [
+                {
+                    "name": "type",
+                    "description": "节点状态类型。",
+                    "type": {
+                        "raw": "\"primary\" | \"warning\" | \"danger\" | \"success\"",
+                        "kind": "union",
+                        "unionTypes": [
+                            "primary",
+                            "warning",
+                            "danger",
+                            "success"
+                        ]
+                    },
+                    "required": false,
+                    "default": "\"primary\"",
+                    "allowedValues": [
+                        {
+                            "value": "primary",
+                            "label": "默认状态",
+                            "isDefault": true
+                        },
+                        {
+                            "value": "warning",
+                            "label": "警告状态"
+                        },
+                        {
+                            "value": "danger",
+                            "label": "错误状态"
+                        },
+                        {
+                            "value": "success",
+                            "label": "成功状态"
+                        }
+                    ],
+                    "usageExample": "<TimelineItem type=\"success\">发布成功</TimelineItem>"
+                },
+                {
+                    "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": "<TimelineItem size=\"small\">日志记录</TimelineItem>"
+                }
+            ],
+            "slots": [
+                {
+                    "name": "dot",
+                    "description": "自定义时间轴节点圆点。",
+                    "vueTemplate": "<template #dot>...</template>",
+                    "usageExample": "<TimelineItem><template #dot><Icon class=\"k-icon-check\" /></template>发布完成</TimelineItem>",
+                    "bindingType": "none"
+                }
+            ]
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TimelineItemType",
+            "definition": "type TimelineItemType = 'primary' | 'warning' | 'danger' | 'success'",
+            "description": "TimelineItem 的状态类型"
+        }
+    ],
+    "examples": [
+        {
+            "id": "timeline_basic",
+            "title": "基础用法",
+            "description": "按时间顺序展示操作记录。",
+            "difficulty": "easy",
+            "code": "<template>\n  <Timeline>\n    <TimelineItem>2026-04-20 10:00 创建任务</TimelineItem>\n    <TimelineItem>2026-04-20 10:10 分配负责人</TimelineItem>\n    <TimelineItem type=\"success\">2026-04-20 10:30 处理完成</TimelineItem>\n  </Timeline>\n</template>",
+            "tags": [
+                "basic",
+                "log"
+            ],
+            "usedProps": [
+                "type"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "展示任务处理过程"
+        },
+        {
+            "id": "timeline_status",
+            "title": "不同状态节点",
+            "description": "用颜色区分不同阶段。",
+            "difficulty": "easy",
+            "code": "<template>\n  <Timeline>\n    <TimelineItem type=\"primary\">等待执行</TimelineItem>\n    <TimelineItem type=\"warning\">处理中</TimelineItem>\n    <TimelineItem type=\"danger\">执行失败</TimelineItem>\n    <TimelineItem type=\"success\">重新执行成功</TimelineItem>\n  </Timeline>\n</template>",
+            "tags": [
+                "status",
+                "type"
+            ],
+            "usedProps": [
+                "type"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "用时间轴展示状态变更"
+        },
+        {
+            "id": "timeline_custom_dot",
+            "title": "自定义节点",
+            "description": "通过 dot 插槽渲染图标或编号。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Icon, Timeline, TimelineItem } from '@king-design/vue';\n</script>\n<template>\n  <Timeline>\n    <TimelineItem>\n      <template #dot>\n        <Icon class=\"k-icon-play-circle\" />\n      </template>\n      服务启动\n    </TimelineItem>\n    <TimelineItem type=\"success\">\n      <template #dot>\n        <Icon class=\"k-icon-check\" />\n      </template>\n      健康检查通过\n    </TimelineItem>\n  </Timeline>\n</template>",
+            "tags": [
+                "dot",
+                "icon"
+            ],
+            "usedProps": [
+                "type"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "dot"
+            ],
+            "usedMethods": [],
+            "scenario": "用图标增强时间轴状态表达"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "timeline_plain_children",
+            "description": "在 Timeline 中直接写普通 div，而不是 TimelineItem",
+            "wrongCode": "<Timeline><div>创建成功</div><div>发布完成</div></Timeline>",
+            "correctCode": "<Timeline><TimelineItem>创建成功</TimelineItem><TimelineItem>发布完成</TimelineItem></Timeline>",
+            "explanation": "Timeline 负责整体容器结构，具体节点应使用 TimelineItem 渲染，才能获得连线、圆点和状态样式。",
+            "relatedProps": []
+        },
+        {
+            "id": "timeline_dot_outside_item",
+            "description": "把 dot 插槽写在 Timeline 上",
+            "wrongCode": "<Timeline><template #dot>1</template></Timeline>",
+            "correctCode": "<Timeline><TimelineItem><template #dot>1</template>步骤一</TimelineItem></Timeline>",
+            "explanation": "dot 是 TimelineItem 的插槽，不属于 Timeline 容器本身。",
+            "relatedProps": []
+        }
+    ],
+    "searchKeywords": [
+        "timeline",
+        "时间轴",
+        "操作记录",
+        "流程日志",
+        "TimelineItem",
+        "dot"
+    ],
+    "useCases": [
+        "操作日志",
+        "订单轨迹",
+        "发布流程",
+        "任务执行记录"
+    ],
+    "relatedComponents": [
+        "Steps",
+        "Tag",
+        "Icon"
+    ]
+}

package/components/timepicker.json

@@ -39,6 +39,28 @@
             "default": "false",
             "usageExample": "<Timepicker multiple />"
         },
+        {
+            "name": "filterable",
+            "description": "是否支持筛选输入",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker filterable />"
+        },
+        {
+            "name": "loading",
+            "description": "数据加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker :loading=\"loading\" />"
+        },
         {
             "name": "disabled",
             "description": "是否禁用",
@@ -50,6 +72,17 @@
             "default": "false",
             "usageExample": "<Timepicker disabled />"
         },
+        {
+            "name": "name",
+            "description": "表单元素的 name 属性",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker name=\"startTime\" />"
+        },
         {
             "name": "clearable",
             "description": "是否可清空",
@@ -174,6 +207,18 @@
             "default": "undefined",
             "usageExample": "<Timepicker max=\"18:00:00\" />"
         },
+        {
+            "name": "disabledDate",
+            "description": "禁用日期的函数，返回 true 表示禁用该日期",
+            "type": {
+                "raw": "(v: Dayjs) => boolean",
+                "kind": "function",
+                "functionSignature": "(v: Dayjs) => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker :disabledDate=\"(d) => d.day() === 0\" />"
+        },
         {
             "name": "hideIcon",
             "description": "是否隐藏后面的图标",
@@ -228,6 +273,78 @@
             "required": false,
             "default": "undefined",
             "usageExample": "<Timepicker :width=\"150\" />"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出菜单追加的位置，默认 Dialog 组件会追加到 Dialog 中，其他追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Timepicker :container=\"() => document.body\" />"
+        },
+        {
+            "name": "show",
+            "description": "是否展示菜单项（受控模式）",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker :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": "<Timepicker position=\"top\" />"
+        },
+        {
+            "name": "nowrap",
+            "description": "选中值区域是否不换行展示，适合单行紧凑布局",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker nowrap />"
+        },
+        {
+            "name": "draggable",
+            "description": "多选值是否支持拖动排序",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker multiple draggable />"
+        },
+        {
+            "name": "virtual",
+            "description": "是否开启虚拟列表，用于大数据量场景",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Timepicker virtual />"
         }
     ],
     "events": [
@@ -270,13 +387,40 @@
                     "name": "value",
                     "type": "[Dayjs, Dayjs?]",
                     "description": "当前选择的值"
+                },
+                {
+                    "name": "confirmed",
+                    "type": "boolean",
+                    "description": "当前这次 selecting 是否已经进入确认完成态；常见交互过程中通常为 `false`。"
                 }
             ],
             "usageExample": "<Timepicker range @selecting=\"handleSelecting\" />",
-            "handlerExample": "const handleSelecting = (value) => {\n  console.log('正在选择:', value);\n};"
+            "handlerExample": "const handleSelecting = (value, confirmed) => {\n  console.log('正在选择:', value, confirmed);\n};"
+        }
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "主动展开时间选择面板。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "timepickerRef.value?.show();"
+        },
+        {
+            "name": "hide",
+            "description": "主动关闭时间选择面板。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "timepickerRef.value?.hide();"
+        },
+        {
+            "name": "position",
+            "description": "重新计算时间选择面板的位置。",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "timepickerRef.value?.position();"
         }
     ],
-    "methods": [],
     "typeDefinitions": [
         {
             "name": "Value",
@@ -444,4 +588,4 @@
     "relatedComponents": [
         "Datepicker"
     ]
-}
+}