king-design-analyzer 2.1.9 → 2.2.0

package/components/vdialog.json

@@ -0,0 +1,308 @@
+{
+    "id": "vdialog",
+    "name": "VDialog",
+    "displayName": "业务弹窗",
+    "category": "feedback",
+    "description": "在基础 Dialog 之上补充默认触发器、受控显隐和异步确认逻辑的业务弹窗组件，适合表单弹窗和危险操作确认。",
+    "importStatement": "import { VDialog } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Dialog",
+            "include": [
+                "props",
+                "events",
+                "slots"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "title",
+            "description": "弹窗标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "size",
+            "description": "弹窗尺寸",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "loading",
+            "description": "确认按钮加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "disabledOk",
+            "description": "是否禁用确认按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "okText",
+            "description": "确认按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确定\""
+        },
+        {
+            "name": "cancelText",
+            "description": "取消按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\""
+        },
+        {
+            "name": "cancel",
+            "description": "取消时的回调逻辑",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "container",
+            "description": "指定弹窗挂载容器",
+            "type": {
+                "raw": "string | Function",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "hideClose",
+            "description": "是否隐藏右上角关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "overlay",
+            "description": "是否显示遮罩层",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "closable",
+            "description": "点击遮罩层是否可关闭",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "terminate",
+            "description": "关闭动作统一回调",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "escClosable",
+            "description": "是否允许 ESC 关闭",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "width",
+            "description": "弹窗宽度",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "mode",
+            "description": "弹窗展示模式",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "draggable",
+            "description": "是否允许拖拽弹窗",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "hideTrigger",
+            "description": "隐藏默认 trigger，作为受控弹窗使用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "modelValue",
+            "description": "弹窗显示状态",
+            "type": {
+                "raw": "boolean | undefined",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "btnProps",
+            "description": "默认 trigger 按钮属性",
+            "type": {
+                "raw": "ButtonProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "btnText",
+            "description": "默认 trigger 按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"打开对话框\""
+        },
+        {
+            "name": "ok",
+            "description": "确认时的异步处理函数，可返回 false 阻止关闭",
+            "type": {
+                "raw": "() => Promise<boolean | void> | boolean | void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "trigger",
+            "description": "自定义触发按钮或触发区域",
+            "vueTemplate": "<template #trigger>...</template>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "vdialog_form",
+            "title": "受控表单弹窗",
+            "description": "通过 v-model 控制弹窗显隐，并在确认时执行异步逻辑。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VDialog, FormItemInput } from '@ksyun-internal/versatile';\n\nconst visible = ref(false);\nconst name = ref('');\nconst handleOk = async () => {\n  console.log('submit', name.value);\n};\n</script>\n\n<template>\n  <button @click=\"visible = true\">新建实例</button>\n  <VDialog v-model=\"visible\" title=\"新建实例\" :ok=\"handleOk\" :hide-trigger=\"true\">\n    <FormItemInput v-model=\"name\" label=\"实例名称\" placeholder=\"请输入实例名称\" />\n  </VDialog>\n</template>",
+            "tags": [
+                "dialog",
+                "form"
+            ],
+            "usedProps": [
+                "modelValue",
+                "title",
+                "ok",
+                "hideTrigger"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在页面中以受控方式打开一个承载业务表单的弹窗。"
+        },
+        {
+            "id": "vdialog_trigger_confirm",
+            "title": "使用 trigger 插槽触发确认弹窗",
+            "description": "通过 trigger 插槽自定义入口，用于危险操作前的二次确认。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { VDialog } from '@ksyun-internal/versatile';\n\nconst handleOk = async () => {\n  console.log('release instance');\n};\n</script>\n\n<template>\n  <VDialog title=\"释放实例\" ok-text=\"确认释放\" :ok=\"handleOk\">\n    <template #trigger>\n      <button>释放实例</button>\n    </template>\n    <div>释放后实例数据将被删除，且不可恢复。</div>\n  </VDialog>\n</template>",
+            "tags": [
+                "dialog",
+                "confirm"
+            ],
+            "usedProps": [
+                "title",
+                "okText",
+                "ok"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在操作列或详情页中用自定义按钮触发危险操作确认弹窗。"
+        }
+    ],
+    "searchKeywords": [
+        "vdialog",
+        "dialog",
+        "业务弹窗",
+        "确认弹窗",
+        "表单弹窗",
+        "trigger dialog"
+    ],
+    "useCases": [
+        "表单弹窗",
+        "异步确认弹窗",
+        "通过按钮触发的操作弹窗"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "VDialogVisible",
+            "definition": "type VDialogVisible = boolean",
+            "description": "业务弹窗显隐状态类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Dialog",
+        "VDrawer",
+        "useDialog"
+    ]
+}

package/components/vdrawer.json

@@ -0,0 +1,331 @@
+{
+    "id": "vdrawer",
+    "name": "VDrawer",
+    "displayName": "业务抽屉",
+    "category": "feedback",
+    "description": "在基础 Drawer 之上补充默认触发器、受控显隐和异步确认逻辑的业务抽屉组件，适合编辑长表单和查看侧边详情。",
+    "importStatement": "import { VDrawer } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Drawer",
+            "include": [
+                "props",
+                "events"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "placement",
+            "description": "抽屉弹出方向",
+            "type": {
+                "raw": "\"left\" | \"right\" | \"top\" | \"bottom\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"right\""
+        },
+        {
+            "name": "title",
+            "description": "抽屉标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "size",
+            "description": "抽屉尺寸",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "loading",
+            "description": "确认按钮加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "disabledOk",
+            "description": "是否禁用确认按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "okText",
+            "description": "确认按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确定\""
+        },
+        {
+            "name": "cancelText",
+            "description": "取消按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\""
+        },
+        {
+            "name": "cancel",
+            "description": "取消时的回调逻辑",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "container",
+            "description": "指定抽屉挂载容器",
+            "type": {
+                "raw": "string | Function",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "hideClose",
+            "description": "是否隐藏右上角关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "overlay",
+            "description": "是否显示遮罩层",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "closable",
+            "description": "点击遮罩层是否可关闭",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "terminate",
+            "description": "关闭动作统一回调",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "escClosable",
+            "description": "是否允许 ESC 关闭",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "width",
+            "description": "抽屉宽度",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "mode",
+            "description": "抽屉展示模式",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "draggable",
+            "description": "是否允许拖拽抽屉",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "hideTrigger",
+            "description": "隐藏默认 trigger，作为受控抽屉使用",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "modelValue",
+            "description": "抽屉显示状态",
+            "type": {
+                "raw": "boolean | undefined",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "btnProps",
+            "description": "默认 trigger 按钮属性",
+            "type": {
+                "raw": "ButtonProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "btnText",
+            "description": "默认 trigger 按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"打开抽屉\""
+        },
+        {
+            "name": "ok",
+            "description": "确认时的异步处理函数，可返回 false 阻止关闭",
+            "type": {
+                "raw": "() => Promise<boolean | void> | boolean | void",
+                "kind": "function"
+            },
+            "required": false,
+            "default": "undefined"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "抽屉主体内容区域",
+            "vueTemplate": "<VDrawer>...</VDrawer>"
+        },
+        {
+            "name": "header",
+            "description": "自定义抽屉头部",
+            "vueTemplate": "<template #header>...</template>"
+        },
+        {
+            "name": "footer",
+            "description": "自定义抽屉底部操作区",
+            "vueTemplate": "<template #footer>...</template>"
+        },
+        {
+            "name": "trigger",
+            "description": "自定义触发按钮或触发区域",
+            "vueTemplate": "<template #trigger>...</template>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "vdrawer_edit_form",
+            "title": "侧边编辑抽屉",
+            "description": "用抽屉承载较长的编辑表单，避免打断列表上下文。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VDrawer, FormItemInput, Description } from '@ksyun-internal/versatile';\n\nconst visible = ref(false);\nconst name = ref('web-prod-01');\nconst remark = ref('支付链路核心实例');\nconst handleOk = async () => {\n  console.log('save', name.value, remark.value);\n};\n</script>\n\n<template>\n  <button @click=\"visible = true\">编辑实例</button>\n  <VDrawer v-model=\"visible\" title=\"编辑实例\" :ok=\"handleOk\" :hide-trigger=\"true\">\n    <FormItemInput v-model=\"name\" label=\"实例名称\" />\n    <Description v-model=\"remark\" />\n  </VDrawer>\n</template>",
+            "tags": [
+                "drawer",
+                "form"
+            ],
+            "usedProps": [
+                "modelValue",
+                "title",
+                "ok",
+                "hideTrigger"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在列表页右侧滑出编辑面板，保留用户当前上下文。"
+        },
+        {
+            "id": "vdrawer_custom_trigger",
+            "title": "使用 trigger 和 footer 插槽自定义抽屉",
+            "description": "通过 trigger 和 footer 插槽自定义抽屉打开方式和底部操作区。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VDrawer } from '@ksyun-internal/versatile';\n\nconst visible = ref(false);\n</script>\n\n<template>\n  <VDrawer v-model=\"visible\" title=\"实例详情\" :hide-trigger=\"false\">\n    <template #trigger>\n      <button>查看详情</button>\n    </template>\n    <div>这里可以放详情摘要、监控图表或操作记录。</div>\n    <template #footer>\n      <button @click=\"visible = false\">关闭</button>\n      <button>导出详情</button>\n    </template>\n  </VDrawer>\n</template>",
+            "tags": [
+                "drawer",
+                "slots"
+            ],
+            "usedProps": [
+                "modelValue",
+                "title",
+                "hideTrigger"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情预览场景下通过自定义触发器和底部按钮扩展抽屉交互。"
+        }
+    ],
+    "searchKeywords": [
+        "vdrawer",
+        "drawer",
+        "业务抽屉",
+        "侧边抽屉",
+        "编辑抽屉",
+        "slot drawer"
+    ],
+    "useCases": [
+        "侧边表单编辑",
+        "详情信息展示",
+        "通过按钮触发的抽屉"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "VDrawerVisible",
+            "definition": "type VDrawerVisible = boolean",
+            "description": "业务抽屉显隐状态类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Drawer",
+        "VDialog"
+    ]
+}

package/components/virtuallist.json

@@ -171,6 +171,13 @@
     "大数据表格",
     "无限滚动"
   ],
+  "typeDefinitions": [
+    {
+      "name": "VirtualListItemSize",
+      "definition": "type VirtualListItemSize = number",
+      "description": "虚拟列表单项高度类型，用于计算可视区域渲染范围。"
+    }
+  ],
   "relatedComponents": [
     "Table",
     "Select"