king-design-analyzer 2.1.9 → 2.2.1

package/components/duration.json

@@ -0,0 +1,125 @@
+{
+    "id": "duration",
+    "name": "Duration",
+    "displayName": "时长选择",
+    "category": "data",
+    "description": "用于购买、续费和策略配置场景的时长选择器，支持按月或按小时切换，并可配合内置刻度快速选择常用周期。",
+    "importStatement": "import { Duration } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前选中的时长值",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "marksType",
+            "description": "刻度类型，控制内置 marks 的生成方式",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"month\""
+        },
+        {
+            "name": "type",
+            "description": "时长类型，通常为 month 或 hour",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"month\""
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "用户选择新的时长后触发，通常用于联动价格或到期时间计算。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "number",
+                    "description": "当前选中的时长值。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "duration_renew",
+            "title": "续费时长选择",
+            "description": "按月展示常用刻度，并把结果同步到续费表单。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Duration } from '@ksyun-internal/versatile';\n\nconst duration = ref(3);\n</script>\n\n<template>\n  <Duration v-model=\"duration\" type=\"month\" marks-type=\"month\" />\n</template>",
+            "tags": [
+                "duration",
+                "renew"
+            ],
+            "usedProps": [
+                "modelValue",
+                "type",
+                "marksType"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在购买或续费流程中选择资源有效时长。"
+        },
+        {
+            "id": "duration_hour_mode",
+            "title": "按小时选择时长",
+            "description": "在临时资源场景中切换到按小时的时长选择。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Duration } from '@ksyun-internal/versatile';\n\nconst duration = ref(12);\n</script>\n\n<template>\n  <Duration v-model=\"duration\" type=\"hour\" marks-type=\"hour\" />\n</template>",
+            "tags": [
+                "duration",
+                "hour"
+            ],
+            "usedProps": [
+                "modelValue",
+                "type",
+                "marksType"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在临时测试机或弹性资源场景中按小时设置有效时长。"
+        }
+    ],
+    "searchKeywords": [
+        "duration",
+        "period",
+        "时长选择",
+        "购买时长",
+        "按小时时长",
+        "续费周期"
+    ],
+    "useCases": [
+        "购买链路时长选择",
+        "资源续费时长选择",
+        "按小时设置临时资源周期"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "DurationValue",
+            "definition": "type DurationValue = string | number",
+            "description": "时长值类型，可用于表达月、年或小时等周期值。"
+        }
+    ],
+    "relatedComponents": [
+        "Slider",
+        "TimeRange"
+    ]
+}

package/components/editable.json

@@ -61,6 +61,28 @@
       "default": "false",
       "usageExample": "<Editable disabled />"
     },
+    {
+      "name": "placeholder",
+      "description": "编辑态输入框的占位提示文本",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Editable placeholder=\"请输入内容\" />"
+    },
+    {
+      "name": "title",
+      "description": "编辑按钮或输入区域的标题提示文本",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"编辑\"",
+      "usageExample": "<Editable title=\"修改名称\" />"
+    },
     {
       "name": "tip",
       "description": "编辑按钮提示文案",
@@ -94,6 +116,50 @@
       "default": "false",
       "usageExample": "<Editable :invalid=\"hasError\" />"
     },
+    {
+      "name": "errorTip",
+      "description": "验证失败时显示的错误提示文案",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"输入有误\"",
+      "usageExample": "<Editable error-tip=\"名称格式不正确\" />"
+    },
+    {
+      "name": "okText",
+      "description": "确认按钮文案",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"确定\"",
+      "usageExample": "<Editable ok-text=\"保存\" />"
+    },
+    {
+      "name": "cancelText",
+      "description": "取消按钮文案",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "\"取消\"",
+      "usageExample": "<Editable cancel-text=\"放弃\" />"
+    },
+    {
+      "name": "type",
+      "description": "编辑输入框类型，通常用于切换单行或其他输入模式",
+      "type": {
+        "raw": "string",
+        "kind": "string"
+      },
+      "required": false,
+      "default": "undefined",
+      "usageExample": "<Editable type=\"textarea\" />"
+    },
     {
       "name": "rows",
       "description": "是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象",

package/components/ellipsis.json

@@ -53,6 +53,32 @@
             ],
             "usageExample": "<Ellipsis position=\"bottom\">长文本</Ellipsis>"
         },
+        {
+            "name": "theme",
+            "description": "Tooltip 主题",
+            "type": {
+                "raw": "\"dark\" | \"light\"",
+                "kind": "union",
+                "unionTypes": [
+                    "dark",
+                    "light"
+                ]
+            },
+            "required": false,
+            "default": "\"light\"",
+            "usageExample": "<Ellipsis theme=\"dark\">长文本</Ellipsis>"
+        },
+        {
+            "name": "hoverable",
+            "description": "悬浮提示层是否在鼠标移入 Tooltip 内容时仍然保持显示",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Ellipsis hoverable>长文本</Ellipsis>"
+        },
         {
             "name": "disabled",
             "description": "是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容）",
@@ -212,7 +238,14 @@
         "文章摘要展示",
         "商品名称省略"
     ],
+    "typeDefinitions": [
+        {
+            "name": "EllipsisLines",
+            "definition": "type EllipsisLines = number",
+            "description": "文本省略最大行数类型，用于控制多行截断。"
+        }
+    ],
     "relatedComponents": [
         "Tooltip"
     ]
-}
+}

package/components/filtertablefieldsdialog.json

@@ -0,0 +1,128 @@
+{
+    "id": "filtertablefieldsdialog",
+    "name": "FilterTableFieldsDialog",
+    "displayName": "表格字段筛选弹窗",
+    "category": "feedback",
+    "description": "用于自定义表格可见列的配置弹窗，常与 ProTable、标准列表页联动，让用户自行决定展示哪些字段。",
+    "importStatement": "import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "弹窗显示状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "fields",
+            "description": "可配置字段列表",
+            "type": {
+                "raw": "TableFieldItem[]",
+                "kind": "array"
+            },
+            "required": true
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "弹窗开关状态变化时触发，用于控制列设置面板显隐。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "boolean",
+                    "description": "当前列设置弹窗是否显示。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "change:noCheckedColFields",
+            "vueEventName": "@change:noCheckedColFields",
+            "description": "未勾选列集合变化时触发，便于把列配置持久化到本地或服务端。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string[]",
+                    "description": "当前未勾选字段的 key 列表。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "filtertablefieldsdialog_columns",
+            "title": "列表列展示配置",
+            "description": "通过字段列表控制表格哪些列默认展示。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FilterTableFieldsDialog } from '@ksyun-internal/versatile';\n\nconst visible = ref(true);\nconst fields = [\n  { key: 'id', label: '实例 ID', checked: true },\n  { key: 'name', label: '实例名称', checked: true },\n  { key: 'privateIp', label: '内网 IP', checked: false },\n];\n</script>\n\n<template>\n  <FilterTableFieldsDialog v-model=\"visible\" :fields=\"fields\" />\n</template>",
+            "tags": [
+                "table",
+                "fields"
+            ],
+            "usedProps": [
+                "modelValue",
+                "fields"
+            ],
+            "usedEvents": [
+                "update:modelValue",
+                "change:noCheckedColFields"
+            ],
+            "usedMethods": [],
+            "scenario": "让用户自主配置列表页中要显示的列。"
+        },
+        {
+            "id": "filtertablefieldsdialog_persist",
+            "title": "持久化隐藏列配置",
+            "description": "监听未勾选字段变化并保存到本地缓存。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FilterTableFieldsDialog } from '@ksyun-internal/versatile';\n\nconst visible = ref(true);\nconst fields = [\n  { key: 'id', label: '实例 ID', checked: true },\n  { key: 'zone', label: '可用区', checked: true },\n  { key: 'privateIp', label: '内网 IP', checked: false },\n];\nconst handleChange = (hiddenFields: string[]) => {\n  localStorage.setItem('instance-hidden-fields', JSON.stringify(hiddenFields));\n};\n</script>\n\n<template>\n  <FilterTableFieldsDialog\n    v-model=\"visible\"\n    :fields=\"fields\"\n    @change:noCheckedColFields=\"handleChange\"\n  />\n</template>",
+            "tags": [
+                "table",
+                "persist"
+            ],
+            "usedProps": [
+                "modelValue",
+                "fields"
+            ],
+            "usedEvents": [
+                "change:noCheckedColFields"
+            ],
+            "usedMethods": [],
+            "scenario": "让用户的列显示偏好在刷新页面后仍然保留。"
+        }
+    ],
+    "searchKeywords": [
+        "filter table fields dialog",
+        "column settings",
+        "列筛选弹窗",
+        "字段配置",
+        "列展示设置",
+        "column chooser",
+        "表格列管理",
+        "隐藏列"
+    ],
+    "useCases": [
+        "表格字段自定义",
+        "列表列设置",
+        "列显示偏好持久化",
+        "用户自定义列表展示字段"
+    ],
+    "relatedComponents": [
+        "ProTable",
+        "LayoutStandardList"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TableFieldItem",
+            "definition": "type TableFieldItem = {\n  key: string\n  label: string\n  checked?: boolean\n}",
+            "description": "可配置表格列项，描述字段 key、显示名称和默认勾选状态。"
+        }
+    ]
+}

package/components/flex.json

@@ -0,0 +1,152 @@
+{
+    "id": "flex",
+    "name": "Flex",
+    "displayName": "弹性布局",
+    "category": "layout",
+    "description": "对 Flexbox 的业务友好封装，适合快速实现工具栏、卡片头部、表单辅助区等横向或纵向弹性布局。",
+    "importStatement": "import { Flex } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "align",
+            "description": "交叉轴对齐方式",
+            "type": {
+                "raw": "'normal' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'normal'"
+        },
+        {
+            "name": "justify",
+            "description": "主轴对齐方式",
+            "type": {
+                "raw": "'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'normal'"
+        },
+        {
+            "name": "wrap",
+            "description": "换行方式",
+            "type": {
+                "raw": "'nowrap' | 'wrap' | 'wrap-reverse' | boolean",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'nowrap'"
+        },
+        {
+            "name": "inline",
+            "description": "是否以行内 flex 容器渲染",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "vertical",
+            "description": "是否启用纵向布局",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "gap",
+            "description": "子元素间距，支持预设值或自定义字符串",
+            "type": {
+                "raw": "'small' | 'middle' | 'large' | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'small'"
+        },
+        {
+            "name": "component",
+            "description": "容器渲染的标签或组件类型",
+            "type": {
+                "raw": "string | Component",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'div'"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "Flex 容器内容",
+            "bindingType": "none",
+            "vueTemplate": "<Flex>...</Flex>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "flex_toolbar",
+            "title": "工具栏左右分布布局",
+            "description": "用 Flex 快速搭建常见的左右两端对齐工具栏。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Flex } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <Flex justify=\"space-between\" align=\"center\" gap=\"middle\">\n    <div>实例列表</div>\n    <div>刷新 / 导出 / 新建</div>\n  </Flex>\n</template>",
+            "tags": [
+                "layout",
+                "toolbar"
+            ],
+            "usedProps": [
+                "justify",
+                "align",
+                "gap"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "搭建列表页顶部的标题和操作区。"
+        },
+        {
+            "id": "flex_vertical_stack",
+            "title": "纵向信息堆叠",
+            "description": "使用 vertical 和 gap 快速搭建纵向信息区。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Flex } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <Flex vertical gap=\"large\">\n    <div>实例规格：4C8G</div>\n    <div>系统盘：100GB SSD</div>\n    <div>网络：经典网络</div>\n  </Flex>\n</template>",
+            "tags": [
+                "layout",
+                "vertical"
+            ],
+            "usedProps": [
+                "vertical",
+                "gap"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情摘要区纵向排列多条关键信息。"
+        }
+    ],
+    "searchKeywords": [
+        "flex",
+        "layout",
+        "弹性布局",
+        "对齐",
+        "gap"
+    ],
+    "useCases": [
+        "工具栏布局",
+        "信息块横向或纵向排列",
+        "纵向摘要区排版"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "FlexJustify",
+            "definition": "type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around'",
+            "description": "弹性布局主轴对齐方式枚举。"
+        }
+    ],
+    "relatedComponents": [
+        "LayoutContent",
+        "LayoutListContent"
+    ]
+}