king-design-analyzer 2.1.9 → 2.2.1

package/components/timerange.json

@@ -0,0 +1,262 @@
+{
+    "id": "timerange",
+    "name": "TimeRange",
+    "displayName": "时间范围",
+    "category": "data",
+    "description": "面向报表、监控和日志场景的时间范围选择组件，支持快捷区间、自定义起止时间以及时间戳格式输出。",
+    "importStatement": "import { TimeRange } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Datepicker",
+            "include": [
+                "props"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前选中的时间范围",
+            "type": {
+                "raw": "[number, number] | [string, string]",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "startTime",
+            "description": "当前时间范围的开始时间",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "endTime",
+            "description": "当前时间范围的结束时间",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "label",
+            "description": "组件标题文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "times",
+            "description": "快捷时间范围配置，支持分钟数或 today / yesterday 等枚举",
+            "type": {
+                "raw": "(Time | number | 'today' | 'yesterday')[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "defaultValue",
+            "description": "首次渲染时使用的默认快捷值",
+            "type": {
+                "raw": "number | 'today' | 'yesterday'",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "timestamp",
+            "description": "是否以时间戳格式返回值",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "container",
+            "description": "弹出层挂载容器",
+            "type": {
+                "raw": "Container",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "format",
+            "description": "日期格式化字符串",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"YYYY-MM-DD HH:mm:ss\""
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "整个时间范围值变化时触发，适合直接驱动查询参数。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "TimeModelType",
+                    "description": "当前完整时间范围，可能是时间戳元组或格式化后的字符串元组。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:startTime",
+            "vueEventName": "@update:startTime",
+            "description": "开始时间变化时触发，可用于单独记录查询区间起点。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | number",
+                    "description": "当前开始时间值；`timestamp=true` 时通常是时间戳，否则为格式化字符串。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:endTime",
+            "vueEventName": "@update:endTime",
+            "description": "结束时间变化时触发，可用于单独记录查询区间终点。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | number",
+                    "description": "当前结束时间值；`timestamp=true` 时通常是时间戳，否则为格式化字符串。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [
+        {
+            "name": "setTimeValue",
+            "description": "按快捷值主动切换时间范围",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "number | 'today' | 'yesterday'",
+                    "description": "目标快捷值，可传分钟数或 `today`、`yesterday` 这类内置快捷标识。"
+                }
+            ],
+            "returnType": "void"
+        },
+        {
+            "name": "refetch",
+            "description": "刷新当前时间范围到最新时间",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "number | 'today' | 'yesterday'",
+                    "description": "可选的快捷值；传入后会先切换到该快捷区间，再把结束时间刷新到当前最新时刻。",
+                    "optional": true
+                }
+            ],
+            "returnType": "void"
+        }
+    ],
+    "examples": [
+        {
+            "id": "timerange_monitor",
+            "title": "监控页时间筛选",
+            "description": "提供最近 1 小时、最近 24 小时等快捷时间范围。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { TimeRange } from '@ksyun-internal/versatile';\n\nconst timeRange = ref<[number, number] | undefined>();\n</script>\n\n<template>\n  <TimeRange\n    v-model=\"timeRange\"\n    label=\"统计周期\"\n    :times=\"[60, 360, 'today']\"\n    :timestamp=\"true\"\n  />\n</template>",
+            "tags": [
+                "time",
+                "monitor"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "times",
+                "timestamp"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "update:startTime",
+                "update:endTime"
+            ],
+            "usedMethods": [],
+            "scenario": "在监控和报表页面中切换查询时间范围。"
+        },
+        {
+            "id": "timerange_refetch_latest",
+            "title": "刷新到最新时间窗口",
+            "description": "通过组件方法把当前时间范围刷新到最新时刻，适合日志和监控实时查看场景。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { TimeRange } from '@ksyun-internal/versatile';\n\nconst rangeRef = ref<InstanceType<typeof TimeRange>>();\nconst timeRange = ref<[number, number] | undefined>();\nconst refreshLatest = () => {\n  rangeRef.value?.refetch(60);\n};\n</script>\n\n<template>\n  <button @click=\"refreshLatest\">刷新最近 1 小时</button>\n  <TimeRange\n    ref=\"rangeRef\"\n    v-model=\"timeRange\"\n    :times=\"[60, 360, 1440]\"\n    :default-value=\"60\"\n    :timestamp=\"true\"\n  />\n</template>",
+            "tags": [
+                "time",
+                "methods"
+            ],
+            "usedProps": [
+                "modelValue",
+                "times",
+                "defaultValue",
+                "timestamp"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [
+                "refetch"
+            ],
+            "scenario": "在日志和监控页面中一键把查询区间重置到最新时间窗口。"
+        }
+    ],
+    "searchKeywords": [
+        "time range",
+        "date range",
+        "time filter",
+        "时间范围",
+        "时间筛选",
+        "快捷时间",
+        "监控时间段",
+        "日志时间查询"
+    ],
+    "useCases": [
+        "监控页时间筛选",
+        "报表页时间范围选择",
+        "日志页最近时间窗口查询",
+        "按快捷区间切换统计周期"
+    ],
+    "relatedComponents": [
+        "Datepicker",
+        "Duration"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TimeShortcut",
+            "definition": "type TimeShortcut = number | 'today' | 'yesterday'",
+            "description": "快捷时间范围值，支持分钟数以及 today、yesterday 等内置枚举。"
+        },
+        {
+            "name": "TimeModelType",
+            "definition": "type TimeModelType = [number, number] | [string, string]",
+            "description": "时间范围模型值类型，表示开始和结束时间组成的二元组。"
+        }
+    ]
+}

package/components/tip.json

@@ -175,6 +175,26 @@
       "handlerExample": "const handleClose = (e: MouseEvent) => {\n  console.log('提示已关闭');\n};"
     }
   ],
+  "slots": [
+    {
+      "name": "title",
+      "description": "自定义标题内容",
+      "bindingType": "none",
+      "vueTemplate": "<template #title>...</template>"
+    },
+    {
+      "name": "close",
+      "description": "自定义关闭按钮内容",
+      "bindingType": "none",
+      "vueTemplate": "<template #close>...</template>"
+    },
+    {
+      "name": "icon",
+      "description": "自定义Icon内容",
+      "bindingType": "none",
+      "vueTemplate": "<template #icon>...</template>"
+    }
+  ],
   "methods": [],
   "examples": [
     {
@@ -315,6 +335,13 @@
     "重要信息提示",
     "页面公告"
   ],
+  "typeDefinitions": [
+    {
+      "name": "TipType",
+      "definition": "type TipType = 'default' | 'primary' | 'success' | 'warning' | 'danger'",
+      "description": "提示条语义类型枚举。"
+    }
+  ],
   "relatedComponents": [
     "Tag",
     "Message"