king-design-analyzer 2.1.9 → 2.2.1

package/components/actions.json

@@ -0,0 +1,109 @@
+{
+    "id": "actions",
+    "name": "Actions",
+    "displayName": "操作按钮集",
+    "category": "feedback",
+    "description": "用于组织主操作和次操作的按钮集合组件，常放在表格操作列、详情页头部和工具栏右侧，避免页面出现过多平铺按钮。",
+    "importStatement": "import { Actions } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "primaries",
+            "description": "一级操作按钮列表",
+            "type": {
+                "raw": "ActionConfig[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]"
+        },
+        {
+            "name": "secondaries",
+            "description": "二级操作按钮列表，通常展示在“更多”菜单中",
+            "type": {
+                "raw": "ActionConfig[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "btnText",
+            "description": "自定义按钮文案渲染",
+            "bindingType": "object",
+            "slotProps": [
+                {
+                    "name": "action",
+                    "type": "ActionConfig",
+                    "description": "当前操作项配置对象"
+                }
+            ],
+            "vueTemplate": "<template #btnText=\"{ action }\">...</template>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "actions_table_row",
+            "title": "表格操作列中的主次操作",
+            "description": "将高频操作直接展示，低频操作折叠到更多菜单中。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Actions } from '@ksyun-internal/versatile';\n\nconst primaries = [\n  { text: '重启', type: 'primary', onClick: () => console.log('restart') },\n];\nconst secondaries = [\n  { text: '续费', onClick: () => console.log('renew') },\n  { text: '释放', danger: true, onClick: () => console.log('delete') },\n];\n</script>\n\n<template>\n  <Actions :primaries=\"primaries\" :secondaries=\"secondaries\" />\n</template>",
+            "tags": [
+                "actions",
+                "table"
+            ],
+            "usedProps": [
+                "primaries",
+                "secondaries"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在列表行内同时承载高频与低频操作，减少操作列拥挤。"
+        },
+        {
+            "id": "actions_slot_btn_text",
+            "title": "自定义操作按钮文案",
+            "description": "使用 btnText 插槽为危险操作补充风险提示。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Actions } from '@ksyun-internal/versatile';\n\nconst primaries = [{ text: '启动', onClick: () => console.log('start') }];\nconst secondaries = [{ text: '释放', danger: true, onClick: () => console.log('release') }];\n</script>\n\n<template>\n  <Actions :primaries=\"primaries\" :secondaries=\"secondaries\">\n    <template #btnText=\"{ action }\">\n      {{ action.danger ? action.text + '（高风险）' : action.text }}\n    </template>\n  </Actions>\n</template>",
+            "tags": [
+                "actions",
+                "slot"
+            ],
+            "usedProps": [
+                "primaries",
+                "secondaries"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在操作区给危险动作补充更明确的文案提示。"
+        }
+    ],
+    "searchKeywords": [
+        "actions",
+        "action buttons",
+        "操作按钮集",
+        "更多操作",
+        "主次操作",
+        "操作列按钮"
+    ],
+    "useCases": [
+        "表格操作列",
+        "页面头部操作区",
+        "主次操作分层展示"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ActionItem",
+            "definition": "interface ActionItem { label: string; key?: string; disabled?: boolean; type?: string }",
+            "description": "操作项配置类型，用于描述操作按钮文案、唯一标识和禁用状态。"
+        }
+    ],
+    "relatedComponents": [
+        "ButtonLink",
+        "IconTooltip"
+    ]
+}

package/components/advancedset.json

@@ -0,0 +1,128 @@
+{
+    "id": "advancedset",
+    "name": "AdvancedSet",
+    "displayName": "高级设置开关",
+    "category": "form",
+    "description": "用于折叠和展开高级配置区域的业务组件，适合购买页、创建页中把非高频参数收进“高级设置”。",
+    "importStatement": "import { AdvancedSet } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "是否展开高级设置",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "label",
+            "description": "标题文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "appendTip",
+            "description": "追加提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "用户展开或收起高级设置区域时触发，可用于同步表单状态或埋点。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "boolean",
+                    "description": "当前高级设置区域的展开状态。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "高级设置内容区域",
+            "bindingType": "none",
+            "vueTemplate": "<AdvancedSet>...</AdvancedSet>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "advancedset_purchase",
+            "title": "购买页中的高级设置折叠区",
+            "description": "默认收起高级参数，只在用户主动展开后展示额外配置。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AdvancedSet, FormItemInput, FormItemSpinner } from '@ksyun-internal/versatile';\n\nconst advanced = ref(false);\nconst hostname = ref('web-01');\nconst bandwidth = ref(20);\n</script>\n\n<template>\n  <AdvancedSet v-model=\"advanced\" label=\"高级设置\" append-tip=\"修改后将影响实例网络配置\">\n    <FormItemInput v-model=\"hostname\" label=\"主机名\" />\n    <FormItemSpinner v-model=\"bandwidth\" label=\"带宽峰值\" unit=\"Mbps\" />\n  </AdvancedSet>\n</template>",
+            "tags": [
+                "advanced",
+                "form"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "appendTip"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "创建实例时把网络、命名等低频参数收纳到高级设置区。"
+        },
+        {
+            "id": "advancedset_open_default",
+            "title": "默认展开高级设置",
+            "description": "在编辑已有配置时直接展开高级区域，减少额外点击。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AdvancedSet, FormItemSwitch } from '@ksyun-internal/versatile';\n\nconst advanced = ref(true);\nconst enableMonitor = ref(false);\n</script>\n\n<template>\n  <AdvancedSet v-model=\"advanced\" label=\"高级设置\" append-tip=\"修改后即时生效\">\n    <FormItemSwitch v-model=\"enableMonitor\" label=\"开启监控增强\" />\n  </AdvancedSet>\n</template>",
+            "tags": [
+                "advanced",
+                "toggle"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "appendTip"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在编辑页面中默认展开高级参数，方便用户快速核对设置。"
+        }
+    ],
+    "searchKeywords": [
+        "advanced set",
+        "advanced options",
+        "高级设置",
+        "折叠配置区",
+        "高级参数"
+    ],
+    "useCases": [
+        "高级参数开关",
+        "可折叠配置区",
+        "编辑页默认展开高级设置"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "AdvancedSetModelValue",
+            "definition": "type AdvancedSetModelValue = boolean",
+            "description": "高级设置展开状态类型，`true` 表示默认展开高级配置区域。"
+        }
+    ],
+    "relatedComponents": [
+        "FormItemInput",
+        "FormItemSpinner"
+    ]
+}

package/components/affix.json

@@ -81,6 +81,7 @@
     {
       "name": "default",
       "description": "需要被固定的元素",
+      "bindingType": "none",
       "vueTemplate": "#default",
       "usageExample": "<Affix><Button>Fixed Button</Button></Affix>"
     }
@@ -174,5 +175,12 @@
     "底部操作栏固定",
     "悬浮按钮"
   ],
+  "typeDefinitions": [
+    {
+      "name": "AffixOffset",
+      "definition": "type AffixOffset = string | number",
+      "description": "Affix 偏移量类型，可传数字或带单位字符串。"
+    }
+  ],
   "relatedComponents": []
 }

package/components/aksk.json

@@ -0,0 +1,172 @@
+{
+    "id": "aksk",
+    "name": "AKSK",
+    "displayName": "AK/SK 配置",
+    "category": "form",
+    "description": "用于录入 AccessKey / SecretKey 并控制是否沿用原始凭证的业务表单组件，常见于任务同步、数据接入和跨账号授权场景。",
+    "importStatement": "import { AKSK } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "ak",
+            "description": "当前 AccessKey",
+            "type": {
+                "raw": "string | null",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "sk",
+            "description": "当前 SecretKey",
+            "type": {
+                "raw": "string | null",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "isUseOriginal",
+            "description": "是否使用原始 AK/SK",
+            "type": {
+                "raw": "boolean | null",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "isShowUseOriginal",
+            "description": "是否展示“使用原始凭证”选项",
+            "type": {
+                "raw": "boolean | null",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "inDataSet",
+            "description": "是否处于数据集场景",
+            "type": {
+                "raw": "boolean | null",
+                "kind": "union"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:ak",
+            "vueEventName": "@update:ak",
+            "description": "AccessKey 变更时触发，便于和父级表单状态保持同步。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | null",
+                    "description": "当前输入的 AccessKey 值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:sk",
+            "vueEventName": "@update:sk",
+            "description": "SecretKey 变更时触发，通常用于同步加密存储前的表单值。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string | null",
+                    "description": "当前输入的 SecretKey 值。",
+                    "optional": true
+                }
+            ]
+        },
+        {
+            "name": "update:isUseOriginal",
+            "vueEventName": "@update:isUseOriginal",
+            "description": "“使用原始凭证”开关变化时触发，可据此切换输入项显隐。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "boolean | null",
+                    "description": "当前是否使用原始凭证。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "aksk_credentials",
+            "title": "任务配置中的 AK/SK 凭证录入",
+            "description": "通过多个 v-model 同步 AccessKey、SecretKey 和原始凭证开关。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AKSK } from '@ksyun-internal/versatile';\n\nconst ak = ref('AKLTxxxxxxxx');\nconst sk = ref('********');\nconst isUseOriginal = ref(false);\n</script>\n\n<template>\n  <AKSK\n    v-model:ak=\"ak\"\n    v-model:sk=\"sk\"\n    v-model:isUseOriginal=\"isUseOriginal\"\n    :is-show-use-original=\"true\"\n  />\n</template>",
+            "tags": [
+                "credentials",
+                "security"
+            ],
+            "usedProps": [
+                "ak",
+                "sk",
+                "isUseOriginal",
+                "isShowUseOriginal"
+            ],
+            "usedEvents": [
+                "update:ak",
+                "update:sk",
+                "update:isUseOriginal"
+            ],
+            "usedMethods": [],
+            "scenario": "录入任务访问外部对象存储或服务所需的访问凭证。"
+        },
+        {
+            "id": "aksk_toggle_original",
+            "title": "切换是否沿用原始凭证",
+            "description": "结合 update:isUseOriginal 在不同凭证来源之间切换。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { AKSK } from '@ksyun-internal/versatile';\n\nconst ak = ref('AKLTxxxx');\nconst sk = ref('******');\nconst isUseOriginal = ref(true);\nconst handleToggle = (value: boolean) => {\n  console.log('use original credentials:', value);\n};\n</script>\n\n<template>\n  <AKSK\n    v-model:ak=\"ak\"\n    v-model:sk=\"sk\"\n    v-model:isUseOriginal=\"isUseOriginal\"\n    :is-show-use-original=\"true\"\n    :in-data-set=\"true\"\n    @update:isUseOriginal=\"handleToggle\"\n  />\n</template>",
+            "tags": [
+                "credentials",
+                "toggle"
+            ],
+            "usedProps": [
+                "ak",
+                "sk",
+                "isUseOriginal",
+                "isShowUseOriginal",
+                "inDataSet"
+            ],
+            "usedEvents": [
+                "update:isUseOriginal"
+            ],
+            "usedMethods": [],
+            "scenario": "在数据同步任务中切换使用系统默认凭证或自定义凭证。"
+        }
+    ],
+    "searchKeywords": [
+        "aksk",
+        "access key",
+        "secret key",
+        "凭证配置",
+        "ak sk",
+        "云服务凭证"
+    ],
+    "useCases": [
+        "云服务凭证录入",
+        "数据集或任务凭证配置",
+        "切换原始凭证或自定义凭证"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "AKSKMode",
+            "definition": "type AKSKMode = 'original' | 'custom'",
+            "description": "凭证模式枚举，用于区分沿用原始凭证还是填写自定义 AK/SK。"
+        }
+    ],
+    "relatedComponents": [
+        "FormItemInput"
+    ]
+}

package/components/anchor.json

@@ -0,0 +1,220 @@
+{
+    "id": "anchor",
+    "name": "Anchor",
+    "displayName": "锚点导航",
+    "category": "navigation",
+    "description": "锚点导航组件，用于监听页面滚动位置并高亮当前锚点。支持自定义滚动容器、偏移量、横向或纵向模式，通常与 AnchorLink 配合使用。",
+    "importStatement": "import { Anchor, AnchorLink } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前激活的锚点 href，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Anchor v-model=\"currentLink\"></Anchor>"
+        },
+        {
+            "name": "offset",
+            "description": "滚动定位偏移量，适合页面存在固定头部时使用",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Anchor :offset=\"64\"></Anchor>"
+        },
+        {
+            "name": "container",
+            "description": "监听滚动的容器，可传选择器或 HTMLElement",
+            "type": {
+                "raw": "string | HTMLElement",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "window",
+            "usageExample": "<Anchor container=\"#scroll-container\"></Anchor>"
+        },
+        {
+            "name": "threshold",
+            "description": "激活锚点时的阈值范围",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Anchor :threshold=\"20\"></Anchor>"
+        },
+        {
+            "name": "vertical",
+            "description": "是否使用纵向模式，默认开启；传 false 时为横向模式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Anchor :vertical=\"false\"></Anchor>"
+        },
+        {
+            "name": "size",
+            "description": "导航尺寸",
+            "type": {
+                "raw": "Sizes",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "\"default\"",
+            "usageExample": "<Anchor size=\"small\"></Anchor>"
+        },
+        {
+            "name": "duration",
+            "description": "点击锚点后的滚动动画时长，单位 ms",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "300",
+            "usageExample": "<Anchor :duration=\"500\"></Anchor>"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "当前激活锚点变化时触发",
+            "payload": [
+                {
+                    "name": "href",
+                    "type": "string",
+                    "description": "当前激活锚点 href"
+                }
+            ],
+            "usageExample": "<Anchor @change=\"handleChange\"></Anchor>",
+            "handlerExample": "const handleChange = (href: string) => {\n  console.log('当前锚点', href);\n};"
+        },
+        {
+            "name": "click",
+            "vueEventName": "@click",
+            "description": "点击锚点链接时触发",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                },
+                {
+                    "name": "link",
+                    "type": "AnchorLinkProps",
+                    "description": "被点击的锚点配置"
+                }
+            ],
+            "usageExample": "<Anchor @click=\"handleClick\"></Anchor>",
+            "handlerExample": "const handleClick = (e: MouseEvent, link: { href?: string }) => {\n  console.log('点击了锚点', link.href);\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "锚点导航内容，通常放置一个或多个 AnchorLink",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<Anchor>\n  <AnchorLink href=\"section1\" title=\"Section 1\" />\n</Anchor>"
+        }
+    ],
+    "methods": [
+        {
+            "name": "getLinks",
+            "description": "获取当前 Anchor 中注册的所有 href",
+            "params": [],
+            "returnType": "string[]",
+            "usageExample": "anchorRef.value?.getLinks();"
+        },
+        {
+            "name": "getTargetElement",
+            "description": "根据 href 查找对应的目标元素",
+            "params": [
+                {
+                    "name": "href",
+                    "type": "string",
+                    "description": "目标锚点 href"
+                }
+            ],
+            "returnType": "HTMLElement | null",
+            "usageExample": "anchorRef.value?.getTargetElement('section2');"
+        }
+    ],
+    "examples": [
+        {
+            "id": "anchor_basic",
+            "title": "基础用法",
+            "description": "在滚动容器旁边展示纵向锚点导航。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Anchor, AnchorLink } from '@king-design/vue';\n\nconst current = ref('section1');\n</script>\n<template>\n  <div style=\"display: flex; gap: 20px; align-items: flex-start;\">\n    <div id=\"scroll-container\" style=\"height: 240px; overflow-y: auto; width: 360px; border: 1px solid #eee; padding: 12px;\">\n      <section id=\"section1\" style=\"height: 180px;\">第一部分</section>\n      <section id=\"section2\" style=\"height: 180px;\">第二部分</section>\n      <section id=\"section3\" style=\"height: 180px;\">第三部分</section>\n    </div>\n    <Anchor v-model=\"current\" container=\"#scroll-container\">\n      <AnchorLink href=\"section1\" title=\"第一部分\" />\n      <AnchorLink href=\"section2\" title=\"第二部分\" />\n      <AnchorLink href=\"section3\" title=\"第三部分\" />\n    </Anchor>\n  </div>\n</template>",
+            "tags": [
+                "basic",
+                "container"
+            ],
+            "usedProps": [
+                "value",
+                "container"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "为详情页长内容区域提供目录导航。"
+        },
+        {
+            "id": "anchor_horizontal",
+            "title": "横向锚点",
+            "description": "将 Anchor 作为横向导航栏使用。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Anchor, AnchorLink } from '@king-design/vue';\n</script>\n<template>\n  <Anchor :vertical=\"false\" :offset=\"64\">\n    <AnchorLink href=\"overview\" title=\"概览\" />\n    <AnchorLink href=\"spec\" title=\"规格\" />\n    <AnchorLink href=\"billing\" title=\"计费\" />\n  </Anchor>\n</template>",
+            "tags": [
+                "horizontal",
+                "offset"
+            ],
+            "usedProps": [
+                "vertical",
+                "offset"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在页面头部展示横向章节切换导航。"
+        }
+    ],
+    "searchKeywords": [
+        "anchor",
+        "锚点",
+        "目录导航",
+        "滚动定位",
+        "AnchorLink"
+    ],
+    "useCases": [
+        "长页面章节导航",
+        "文档目录定位",
+        "详情页内容分区跳转"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "AnchorContainer",
+            "definition": "type AnchorContainer = string | HTMLElement",
+            "description": "锚点导航支持的滚动容器类型。"
+        }
+    ],
+    "relatedComponents": [
+        "AnchorLink",
+        "Affix"
+    ]
+}