king-design-analyzer 2.1.9 → 2.2.1

package/components/layoutlistcontent.json

@@ -0,0 +1,157 @@
+{
+    "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": "页面主体内容区域",
+            "bindingType": "none",
+            "vueTemplate": "<LayoutListContent>...</LayoutListContent>"
+        },
+        {
+            "name": "headerTitle",
+            "description": "扩展顶部栏左侧标题处内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #headerTitle>...</template>"
+        },
+        {
+            "name": "headerTitleAppend",
+            "description": "扩展顶部栏左侧标题后的追加内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #headerTitleAppend>...</template>"
+        },
+        {
+            "name": "headerDocPrepend",
+            "description": "扩展顶部栏右侧文档前置内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #headerDocPrepend>...</template>"
+        },
+        {
+            "name": "headerDoc",
+            "description": "扩展顶部栏右侧文档内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #headerDoc>...</template>"
+        },
+        {
+            "name": "opLeft",
+            "description": "卡片操作栏左侧内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #opLeft>...</template>"
+        },
+        {
+            "name": "opRight",
+            "description": "卡片操作栏右侧内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #opRight>...</template>"
+        },
+        {
+            "name": "prepend",
+            "description": "卡片操作栏上方扩展内容",
+            "bindingType": "none",
+            "vueTemplate": "<template #prepend>...</template>"
+        },
+        {
+            "name": "extra",
+            "description": "头部附加区域",
+            "bindingType": "none",
+            "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,156 @@
+{
+    "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": "主内容区域",
+            "bindingType": "none",
+            "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"
+    ]
+}

package/components/layoutstandardlist.json

@@ -0,0 +1,276 @@
+{
+    "id": "layoutstandardlist",
+    "name": "LayoutStandardList",
+    "displayName": "标准列表布局",
+    "category": "layout",
+    "description": "标准化列表页业务容器，内置搜索、批量操作、轮询和列管理等能力，适合快速搭建成熟的资源管理列表页。",
+    "importStatement": "import { LayoutStandardList } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "canCreate",
+            "description": "控制“创建”按钮可用性的配置对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "canDelete",
+            "description": "控制批量删除按钮可用性的配置对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "handleClickCreateBtn",
+            "description": "点击创建按钮时的处理函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "handleClickBatchDeleteBtn",
+            "description": "点击批量删除按钮时的处理函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function"
+            },
+            "required": false
+        },
+        {
+            "name": "placeholder",
+            "description": "搜索框占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "hasSearch",
+            "description": "是否显示搜索区域",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        },
+        {
+            "name": "hasSearchItems",
+            "description": "是否显示检索项区域",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "searches",
+            "description": "搜索配置集合",
+            "type": {
+                "raw": "SearchType[] | Record<string, SearchType>",
+                "kind": "union"
+            },
+            "required": false
+        },
+        {
+            "name": "searchGroups",
+            "description": "搜索类型分组配置",
+            "type": {
+                "raw": "SearchGroupItem[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "labelMaps",
+            "description": "筛选标签文案映射",
+            "type": {
+                "raw": "Record<string, string>",
+                "kind": "object"
+            },
+            "required": false
+        },
+        {
+            "name": "rowKey",
+            "description": "表格行唯一键字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "notCheckTip",
+            "description": "未选中任何行时的提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "tableFields",
+            "description": "可配置的表格字段定义",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        },
+        {
+            "name": "checkType",
+            "description": "表格勾选模式",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "\"checkbox\""
+        },
+        {
+            "name": "sortType",
+            "description": "排序模式",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "pollInterval",
+            "description": "轮询刷新间隔，单位毫秒",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0"
+        },
+        {
+            "name": "useList",
+            "description": "拉取列表数据的 hook 或函数，必填",
+            "type": {
+                "raw": "Function",
+                "kind": "function"
+            },
+            "required": true
+        },
+        {
+            "name": "useListDepParams",
+            "description": "触发 useList 刷新的依赖参数列表",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "useListOptionParams",
+            "description": "传给 useList 的可选参数对象",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "自定义列表主体内容",
+            "bindingType": "none",
+            "vueTemplate": "<LayoutStandardList>...</LayoutStandardList>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "layoutstandardlist_instances",
+            "title": "资源管理列表页",
+            "description": "通过内置搜索和创建按钮快速搭建标准资源列表。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';\n\nconst searches = [\n  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },\n  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }] },\n];\nconst tableFields = [\n  { key: 'name', label: '实例名称', checked: true },\n  { key: 'status', label: '状态', checked: true },\n];\n</script>\n\n<template>\n  <LayoutStandardList\n    :can-create=\"true\"\n    :has-search=\"true\"\n    :searches=\"searches\"\n    :table-fields=\"tableFields\"\n    placeholder=\"搜索实例名称\"\n  >\n    <ProTable :columns=\"[]\" :data-source=\"[]\" row-key=\"id\" />\n  </LayoutStandardList>\n</template>",
+            "tags": [
+                "layout",
+                "standard-list"
+            ],
+            "usedProps": [
+                "canCreate",
+                "hasSearch",
+                "searches",
+                "tableFields",
+                "placeholder"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "快速拼出带搜索、列配置和新建入口的资源列表页。"
+        },
+        {
+            "id": "layoutstandardlist_batch_ops",
+            "title": "带批量操作和轮询的标准列表",
+            "description": "使用批量删除、检索项回显和轮询能力构建更完整的资源管理页。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';\n\nconst searches = [\n  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },\n  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }, { key: 'stopped', label: '已停止' }] },\n];\nconst tableFields = [\n  { key: 'name', label: '实例名称', checked: true },\n  { key: 'status', label: '状态', checked: true },\n  { key: 'privateIp', label: '内网 IP', checked: false },\n];\nconst useList = () => ({ loading: false, dataSource: [], total: 0 });\nconst handleClickBatchDeleteBtn = () => console.log('batch delete');\n</script>\n\n<template>\n  <LayoutStandardList\n    :has-search=\"true\"\n    :has-search-items=\"true\"\n    :searches=\"searches\"\n    :table-fields=\"tableFields\"\n    :poll-interval=\"10000\"\n    :can-delete=\"{ value: true }\"\n    :handle-click-batch-delete-btn=\"handleClickBatchDeleteBtn\"\n    :use-list=\"useList\"\n    row-key=\"id\"\n  >\n    <ProTable :columns=\"[]\" :data-source=\"[]\" row-key=\"id\" />\n  </LayoutStandardList>\n</template>",
+            "tags": [
+                "layout",
+                "batch"
+            ],
+            "usedProps": [
+                "hasSearch",
+                "hasSearchItems",
+                "searches",
+                "tableFields",
+                "pollInterval",
+                "canDelete",
+                "handleClickBatchDeleteBtn",
+                "useList",
+                "rowKey"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在资源列表页中同时开启筛选条件回显、批量操作和定时刷新。"
+        }
+    ],
+    "searchKeywords": [
+        "standard list",
+        "resource list layout",
+        "列表布局",
+        "标准列表",
+        "批量操作列表",
+        "带搜索列表",
+        "列管理",
+        "轮询列表"
+    ],
+    "useCases": [
+        "标准资源列表页",
+        "带搜索和批量操作的列表页",
+        "带轮询和列设置的控制台列表",
+        "快速搭建资源管理页"
+    ],
+    "relatedComponents": [
+        "LayoutListContent",
+        "ProTable",
+        "Search",
+        "SearchItems"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "SearchType",
+            "definition": "type SearchType = {\n  key: string\n  label: string\n  type?: 'input' | 'select'\n  placeholder?: string\n}",
+            "description": "标准列表搜索区域中的单个搜索项配置。"
+        },
+        {
+            "name": "TableFieldItem",
+            "definition": "type TableFieldItem = {\n  key: string\n  label: string\n  checked?: boolean\n}",
+            "description": "列表字段配置项，用于控制列展示、隐藏和字段名称。"
+        }
+    ]
+}