king-design-analyzer 2.1.9 → 2.2.0

package/components/kspstatus.json

@@ -0,0 +1,205 @@
+{
+    "id": "kspstatus",
+    "name": "KspStatus",
+    "displayName": "业务状态标识",
+    "category": "feedback",
+    "description": "根据业务状态值自动映射文案、颜色和加载态的状态展示组件，适合实例生命周期、任务状态和工单状态等复杂业务场景。",
+    "importStatement": "import { KspStatus } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "status",
+            "description": "业务状态值，可为字符串或数字",
+            "type": {
+                "raw": "string | number",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "progress",
+            "description": "进度值，用于进度型状态展示",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "success",
+            "description": "会被视为成功态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "danger",
+            "description": "会被视为失败态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "会被视为禁用态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "warning",
+            "description": "会被视为警告态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "loading",
+            "description": "会被视为加载态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "progressbar",
+            "description": "会被视为进度条态的状态值集合",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "maps",
+            "description": "自定义状态映射表",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "tip",
+            "description": "状态说明 tooltip 文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "position",
+            "description": "tooltip 或刷新按钮的弹出位置",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        },
+        {
+            "name": "refreshTip",
+            "description": "刷新按钮提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "refresh",
+            "description": "点击刷新时执行的异步函数",
+            "type": {
+                "raw": "() => Promise<void>",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "text",
+            "description": "自定义展示文案，优先级高于状态映射",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "kspstatus_instance_status",
+            "title": "实例生命周期状态展示",
+            "description": "通过 maps 配置把业务状态码映射成统一的状态展示。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { KspStatus } from '@ksyun-internal/versatile';\n\nconst maps = {\n  creating: { text: '创建中', loading: true },\n  running: { text: '运行中', success: true },\n  stopped: { text: '已停止', disabled: true },\n};\n</script>\n\n<template>\n  <KspStatus status=\"creating\" :maps=\"maps\" refresh-tip=\"状态每 10 秒刷新一次\" />\n</template>",
+            "tags": [
+                "status",
+                "business"
+            ],
+            "usedProps": [
+                "status",
+                "maps",
+                "refreshTip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在列表或详情页中按统一规则展示业务状态。"
+        },
+        {
+            "id": "kspstatus_progress_mode",
+            "title": "展示带进度的业务状态",
+            "description": "通过 progress 和 refresh 提示渲染任务执行中的状态。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { KspStatus } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <KspStatus\n    status=\"migrating\"\n    text=\"迁移中\"\n    :progress=\"68\"\n    :refresh=\"true\"\n    refresh-tip=\"状态会自动刷新\"\n    tip=\"预计 2 分钟后完成\"\n  />\n</template>",
+            "tags": [
+                "status",
+                "progress"
+            ],
+            "usedProps": [
+                "status",
+                "text",
+                "progress",
+                "refresh",
+                "refreshTip",
+                "tip"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在迁移、备份等长任务场景中展示进度化状态。"
+        }
+    ],
+    "searchKeywords": [
+        "ksp status",
+        "business status",
+        "业务状态",
+        "状态码映射",
+        "progress status",
+        "任务状态"
+    ],
+    "useCases": [
+        "资源状态展示",
+        "任务进度与异常态展示",
+        "带进度的迁移或备份状态"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "KspStatusValue",
+            "definition": "type KspStatusValue = string | number",
+            "description": "业务状态标识类型，可使用状态码或状态字符串驱动展示。"
+        }
+    ],
+    "relatedComponents": [
+        "Status"
+    ]
+}

package/components/kvcode.json

@@ -0,0 +1,120 @@
+{
+    "id": "kvcode",
+    "name": "KvCode",
+    "displayName": "键值代码输入",
+    "category": "form",
+    "description": "用于录入脚本、配置片段或键值代码内容的表单组件，适合高级参数、启动脚本和策略文本等输入场景。",
+    "importStatement": "import { KvCode } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "label",
+            "description": "表单项标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "modelValue",
+            "description": "代码内容",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "required",
+            "description": "是否必填",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "update:modelValue",
+            "vueEventName": "@update:modelValue",
+            "description": "代码或文本片段内容变化时触发，适合与父级表单实时同步。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前编辑器中的代码或文本内容。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "kvcode_startup_script",
+            "title": "启动脚本输入",
+            "description": "在创建任务或实例时录入一段配置脚本。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KvCode } from '@ksyun-internal/versatile';\n\nconst script = ref('export NODE_ENV=production');\n</script>\n\n<template>\n  <KvCode v-model=\"script\" label=\"启动脚本\" :required=\"true\" />\n</template>",
+            "tags": [
+                "code",
+                "script"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "required"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "录入任务脚本、环境变量模板或高级参数文本。"
+        },
+        {
+            "id": "kvcode_policy_text",
+            "title": "录入策略 JSON 文本",
+            "description": "在权限或策略场景中填写结构化文本配置。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KvCode } from '@ksyun-internal/versatile';\n\nconst policy = ref('{\"Version\":\"1.0\",\"Statement\":[]}');\n</script>\n\n<template>\n  <KvCode v-model=\"policy\" label=\"访问策略\" />\n</template>",
+            "tags": [
+                "code",
+                "policy"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label"
+            ],
+            "usedEvents": [
+                "update:modelValue"
+            ],
+            "usedMethods": [],
+            "scenario": "在策略配置页中录入 JSON 结构化文本。"
+        }
+    ],
+    "searchKeywords": [
+        "kv code",
+        "code input",
+        "代码输入",
+        "脚本录入",
+        "策略文本"
+    ],
+    "useCases": [
+        "脚本配置输入",
+        "高级参数录入",
+        "JSON 策略文本填写"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "KVCodeValue",
+            "definition": "type KVCodeValue = string",
+            "description": "代码或结构化文本输入值类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Code",
+        "FormItemInput"
+    ]
+}

package/components/layoutcontent.json

@@ -200,11 +200,23 @@
         "layout",
         "content",
         "page",
-        "布局"
+        "布局",
+        "详情布局",
+        "页面骨架",
+        "内容页容器"
     ],
     "useCases": [
         "详情页",
         "列表页",
-        "表单页"
+        "表单页",
+        "购买链路页面",
+        "带顶部栏和底部栏的业务内容页"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "BreadcrumbItem",
+            "definition": "type BreadcrumbItem = {\\n  to: string\\n  label: string\\n}",
+            "description": "LayoutContent 与 Header 共用的面包屑节点结构。"
+        }
     ]
-}
+}

package/components/layoutlistcontent.json

@@ -0,0 +1,148 @@
+{
+    "id": "layoutlistcontent",
+    "name": "LayoutListContent",
+    "displayName": "列表布局",
+    "category": "layout",
+    "description": "面向列表页的一体化布局容器，统一承载头部、操作区、搜索区和列表内容，适合和 Search、ProTable 组合使用。",
+    "importStatement": "import { LayoutListContent } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "title",
+            "description": "顶部栏标题，也可通过 headerProps.title 配置",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "headerProps",
+            "description": "顶部栏配置，同 Header 组件的属性集合",
+            "type": {
+                "raw": "LayoutHeaderProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "loading",
+            "description": "整体加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "页面主体内容区域",
+            "vueTemplate": "<LayoutListContent>...</LayoutListContent>"
+        },
+        {
+            "name": "headerTitle",
+            "description": "扩展顶部栏左侧标题处内容",
+            "vueTemplate": "<template #headerTitle>...</template>"
+        },
+        {
+            "name": "headerTitleAppend",
+            "description": "扩展顶部栏左侧标题后的追加内容",
+            "vueTemplate": "<template #headerTitleAppend>...</template>"
+        },
+        {
+            "name": "headerDocPrepend",
+            "description": "扩展顶部栏右侧文档前置内容",
+            "vueTemplate": "<template #headerDocPrepend>...</template>"
+        },
+        {
+            "name": "headerDoc",
+            "description": "扩展顶部栏右侧文档内容",
+            "vueTemplate": "<template #headerDoc>...</template>"
+        },
+        {
+            "name": "opLeft",
+            "description": "卡片操作栏左侧内容",
+            "vueTemplate": "<template #opLeft>...</template>"
+        },
+        {
+            "name": "opRight",
+            "description": "卡片操作栏右侧内容",
+            "vueTemplate": "<template #opRight>...</template>"
+        },
+        {
+            "name": "prepend",
+            "description": "卡片操作栏上方扩展内容",
+            "vueTemplate": "<template #prepend>...</template>"
+        },
+        {
+            "name": "extra",
+            "description": "头部附加区域",
+            "vueTemplate": "<template #extra>...</template>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "layoutlistcontent_table",
+            "title": "标准列表页布局",
+            "description": "在同一容器内组合标题、搜索区和表格区，形成标准列表页结构。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutListContent, Header, Search, ProTable } from '@ksyun-internal/versatile';\n\nconst searches = [\n  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },\n];\nconst columns = [\n  { key: 'name', title: '实例名称' },\n];\n</script>\n\n<template>\n  <LayoutListContent>\n    <template #headerTitle>\n      <Header title=\"实例列表\" />\n    </template>\n    <template #prepend>\n      <Search :searches=\"searches\" />\n    </template>\n    <ProTable :columns=\"columns\" :data-source=\"[]\" />\n  </LayoutListContent>\n</template>",
+            "tags": [
+                "layout",
+                "list"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "搭建常见的“页头 + 搜索 + 表格”列表页面。"
+        },
+        {
+            "id": "layoutlistcontent_action_slots",
+            "title": "使用操作栏左右插槽",
+            "description": "通过 opLeft、opRight 和 extra 插槽扩展列表页头部区域。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutListContent, ProTable } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <LayoutListContent title=\"镜像列表\">\n    <template #opLeft>\n      <button>批量导出</button>\n    </template>\n    <template #opRight>\n      <button>新建镜像</button>\n    </template>\n    <template #extra>\n      <span>共 32 个镜像</span>\n    </template>\n    <ProTable :columns=\"[]\" :data-source=\"[]\" />\n  </LayoutListContent>\n</template>",
+            "tags": [
+                "layout",
+                "slots"
+            ],
+            "usedProps": [
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在列表页头部同时摆放批量操作、主操作和统计信息。"
+        }
+    ],
+    "searchKeywords": [
+        "list layout",
+        "layout list",
+        "列表布局",
+        "资源列表页",
+        "搜索加表格布局",
+        "页头操作区"
+    ],
+    "useCases": [
+        "资源列表页",
+        "带搜索和操作栏的列表页",
+        "通过插槽扩展头部操作区"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "LayoutListToolbarItem",
+            "definition": "interface LayoutListToolbarItem { label: string; key?: string; disabled?: boolean }",
+            "description": "列表页头部工具项类型，用于表达批量操作、次级操作等按钮配置。"
+        }
+    ],
+    "relatedComponents": [
+        "Header",
+        "ProTable",
+        "Search"
+    ]
+}

package/components/layoutpermissioncontent.json

@@ -0,0 +1,155 @@
+{
+    "id": "layoutpermissioncontent",
+    "name": "LayoutPermissionContent",
+    "displayName": "权限内容布局",
+    "category": "layout",
+    "description": "用于承载无权限、待开通、待授权等结果页内容的布局组件，统一管理插图、说明文案和主操作按钮。",
+    "importStatement": "import { LayoutPermissionContent } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "img",
+            "description": "状态插图地址",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "title",
+            "description": "主标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "message",
+            "description": "说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "btnText",
+            "description": "操作按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "vertical",
+            "description": "是否采用纵向布局",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "type",
+            "description": "展示类型",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "loading",
+            "description": "按钮是否处于加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [
+        {
+            "name": "click:btn",
+            "vueEventName": "@click:btn",
+            "description": "用户点击主操作按钮时触发，通常用于跳转授权页、申请开通或返回列表。"
+        }
+    ],
+    "slots": [
+        {
+            "name": "default",
+            "description": "主内容区域",
+            "vueTemplate": "<LayoutPermissionContent>...</LayoutPermissionContent>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "layoutpermissioncontent_no_permission",
+            "title": "无权限状态页",
+            "description": "统一展示无权限说明并提供下一步操作入口。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutPermissionContent } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <LayoutPermissionContent\n    title=\"暂无访问权限\"\n    message=\"请联系项目管理员为当前账号开通实例查看权限\"\n    btn-text=\"去申请权限\"\n    @click:btn=\"() => console.log('apply')\"\n  />\n</template>",
+            "tags": [
+                "permission",
+                "empty"
+            ],
+            "usedProps": [
+                "title",
+                "message",
+                "btnText"
+            ],
+            "usedEvents": [
+                "click:btn"
+            ],
+            "usedMethods": [],
+            "scenario": "在用户没有资源访问权限时展示统一结果页。"
+        },
+        {
+            "id": "layoutpermissioncontent_vertical",
+            "title": "纵向结果页布局",
+            "description": "在说明较多时启用纵向布局并通过默认插槽补充帮助信息。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutPermissionContent } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <LayoutPermissionContent\n    title=\"服务暂未开通\"\n    message=\"当前地域尚未开通该服务，可先查看产品介绍。\"\n    btn-text=\"申请开通\"\n    :vertical=\"true\"\n  >\n    <p>如需加急，请联系客户经理或提交工单。</p>\n  </LayoutPermissionContent>\n</template>",
+            "tags": [
+                "permission",
+                "vertical"
+            ],
+            "usedProps": [
+                "title",
+                "message",
+                "btnText",
+                "vertical"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在待开通或待申请的结果页中展示更多引导说明。"
+        }
+    ],
+    "searchKeywords": [
+        "permission",
+        "permission layout",
+        "权限布局",
+        "无权限页",
+        "结果页布局",
+        "开通引导"
+    ],
+    "useCases": [
+        "无权限页",
+        "待授权提示页",
+        "纵向结果页和引导操作"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "PermissionLayoutDirection",
+            "definition": "type PermissionLayoutDirection = 'horizontal' | 'vertical'",
+            "description": "权限结果页内容排列方向枚举。"
+        }
+    ],
+    "relatedComponents": [
+        "LayoutContent",
+        "CardContent"
+    ]
+}