king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/instancenum.doc.md

@@ -0,0 +1,95 @@
+# 实例数量 (InstanceNum)
+
+围绕实例数量录入封装的业务组件，补充了范围控制、禁用提示和补丁数联动，适合节点数量、实例副本数等场景。
+
+**关键词**: instance num, instance count, 实例数量, 节点数量, 副本数输入
+
+**使用场景**: 启停开关、集群节点数量配置、受限规格下展示禁用原因
+
+## 导入语句
+```typescript
+import { InstanceNum } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `number` | `undefined` | 否 | 实例数量 | - | - |
+| label | `string` | `undefined` | 否 | 表单项标题 | - | - |
+| max | `number | null` | `undefined` | 否 | 允许的最大数量 | - | - |
+| min | `number | null` | `undefined` | 否 | 允许的最小数量 | - | - |
+| required | `boolean` | `undefined` | 否 | 是否必填 | - | - |
+| rules | `Record<string, any>` | `{}` | 否 | 表单校验规则 | - | - |
+| width | `string | number` | `undefined` | 否 | 输入控件宽度 | - | - |
+| disabled | `boolean` | `undefined` | 否 | 是否禁用输入 | - | - |
+| disabledTooltip | `boolean` | `undefined` | 否 | 禁用时是否显示 tooltip | - | - |
+| tooltipContent | `string` | `undefined` | 否 | 禁用提示内容 | - | - |
+| patchcount | `number` | `undefined` | 否 | 补丁数量或步进修正值 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 实例数量变化时触发，可用于联动库存、价格和配额校验。 | `value?: number` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `number` | 否 | - | 当前实例数量或副本数。 |
+
+## 使用示例
+### 集群节点数量选择
+**场景**: 在集群或弹性扩缩容场景中控制实例数量。
+
+限制节点数量范围，并在禁用时给出原因说明。
+
+**使用的 API**: 属性: modelValue, label, min, max, tooltipContent | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { InstanceNum } from '@ksyun-internal/versatile';
+
+const count = ref(3);
+</script>
+
+<template>
+  <InstanceNum
+    v-model="count"
+    label="节点数量"
+    :min="1"
+    :max="10"
+    tooltip-content="超出规格上限时需要升级套餐"
+  />
+</template>
+```
+
+### 禁用状态下展示原因
+**场景**: 在受限套餐下明确告知用户为什么不能修改数量。
+
+当规格不满足条件时暂时禁用数量调整，并给出解释。
+
+**使用的 API**: 属性: modelValue, label, disabled, disabledTooltip
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { InstanceNum } from '@ksyun-internal/versatile';
+
+const count = ref(1);
+</script>
+
+<template>
+  <InstanceNum
+    v-model="count"
+    label="实例数量"
+    :disabled="true"
+    disabled-tooltip="当前套餐仅支持单实例部署"
+  />
+</template>
+```
+
+## 相关组件
+FormItemSpinner, FormItemTableConfigs
+

package/docs_for_llm/ipinput.doc.md

@@ -0,0 +1,77 @@
+# IP 输入框 (IPInput)
+
+面向 IPv4 地址录入的分段输入组件，适合网卡、白名单、后端服务地址等需要明确格式校验的网络场景。
+
+**关键词**: ip input, ipv4 input, IP 输入, ip 地址录入, 网络地址输入
+
+**使用场景**: IPv4 地址录入、网络配置表单、分段 IP 输入提示
+
+## 导入语句
+```typescript
+import { IPInput } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `string` | `undefined` | 否 | IP 地址值 | - | - |
+| disabled | `boolean | any[]` | `undefined` | 否 | 禁用状态或分段禁用配置 | - | - |
+| tooltip | `any[]` | `undefined` | 否 | 分段 tooltip 配置 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 完整 IP 地址变化时触发，可直接同步网络配置表单。 | `value?: string` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 否 | - | 当前输入的 IPv4 地址字符串。 |
+
+## 使用示例
+### 后端服务 IP 地址录入
+**场景**: 在网络或服务发现配置中录入单个 IPv4 地址。
+
+用分段输入方式降低手写 IP 地址的出错概率。
+
+**使用的 API**: 属性: modelValue | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IPInput } from '@ksyun-internal/versatile';
+
+const ip = ref('10.0.0.12');
+</script>
+
+<template>
+  <IPInput v-model="ip" />
+</template>
+```
+
+### 为 IP 分段添加提示
+**场景**: 在网络配置页中为 IP 输入提供更明确的填写提示。
+
+给分段输入框补充提示信息，帮助用户理解每段含义。
+
+**使用的 API**: 属性: modelValue, tooltip | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IPInput } from '@ksyun-internal/versatile';
+
+const ip = ref('172.16.0.10');
+const tooltip = ['第一段', '第二段', '第三段', '第四段'];
+</script>
+
+<template>
+  <IPInput v-model="ip" :tooltip="tooltip" />
+</template>
+```
+
+## 相关组件
+CidrInput
+

package/docs_for_llm/kspstatus.doc.md

@@ -0,0 +1,82 @@
+# 业务状态标识 (KspStatus)
+
+根据业务状态值自动映射文案、颜色和加载态的状态展示组件，适合实例生命周期、任务状态和工单状态等复杂业务场景。
+
+**关键词**: ksp status, business status, 业务状态, 状态码映射, progress status, 任务状态
+
+**使用场景**: 资源状态展示、任务进度与异常态展示、带进度的迁移或备份状态
+
+## 导入语句
+```typescript
+import { KspStatus } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| status | `string | number` | `undefined` | 否 | 业务状态值，可为字符串或数字 | - | - |
+| progress | `number` | `undefined` | 否 | 进度值，用于进度型状态展示 | - | - |
+| success | `any[]` | `undefined` | 否 | 会被视为成功态的状态值集合 | - | - |
+| danger | `any[]` | `undefined` | 否 | 会被视为失败态的状态值集合 | - | - |
+| disabled | `any[]` | `undefined` | 否 | 会被视为禁用态的状态值集合 | - | - |
+| warning | `any[]` | `undefined` | 否 | 会被视为警告态的状态值集合 | - | - |
+| loading | `any[]` | `undefined` | 否 | 会被视为加载态的状态值集合 | - | - |
+| progressbar | `any[]` | `undefined` | 否 | 会被视为进度条态的状态值集合 | - | - |
+| maps | `Record<string, any>` | `undefined` | 否 | 自定义状态映射表 | - | - |
+| tip | `string` | `undefined` | 否 | 状态说明 tooltip 文案 | - | - |
+| position | `any` | `undefined` | 否 | tooltip 或刷新按钮的弹出位置 | - | - |
+| refreshTip | `string` | `undefined` | 否 | 刷新按钮提示文案 | - | - |
+| refresh | `() => Promise<void>` | `undefined` | 否 | 点击刷新时执行的异步函数 | - | - |
+| text | `string` | `undefined` | 否 | 自定义展示文案，优先级高于状态映射 | - | - |
+
+## 使用示例
+### 实例生命周期状态展示
+**场景**: 在列表或详情页中按统一规则展示业务状态。
+
+通过 maps 配置把业务状态码映射成统一的状态展示。
+
+**使用的 API**: 属性: status, maps, refreshTip
+
+```vue
+<script setup lang="ts">
+import { KspStatus } from '@ksyun-internal/versatile';
+
+const maps = {
+  creating: { text: '创建中', loading: true },
+  running: { text: '运行中', success: true },
+  stopped: { text: '已停止', disabled: true },
+};
+</script>
+
+<template>
+  <KspStatus status="creating" :maps="maps" refresh-tip="状态每 10 秒刷新一次" />
+</template>
+```
+
+### 展示带进度的业务状态
+**场景**: 在迁移、备份等长任务场景中展示进度化状态。
+
+通过 progress 和 refresh 提示渲染任务执行中的状态。
+
+**使用的 API**: 属性: status, text, progress, refresh, refreshTip, tip
+
+```vue
+<script setup lang="ts">
+import { KspStatus } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <KspStatus
+    status="migrating"
+    text="迁移中"
+    :progress="68"
+    :refresh="true"
+    refresh-tip="状态会自动刷新"
+    tip="预计 2 分钟后完成"
+  />
+</template>
+```
+
+## 相关组件
+Status
+

package/docs_for_llm/kvcode.doc.md

@@ -0,0 +1,76 @@
+# 键值代码输入 (KvCode)
+
+用于录入脚本、配置片段或键值代码内容的表单组件，适合高级参数、启动脚本和策略文本等输入场景。
+
+**关键词**: kv code, code input, 代码输入, 脚本录入, 策略文本
+
+**使用场景**: 脚本配置输入、高级参数录入、JSON 策略文本填写
+
+## 导入语句
+```typescript
+import { KvCode } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| label | `string` | `undefined` | 否 | 表单项标题 | - | - |
+| modelValue | `string` | `undefined` | 否 | 代码内容 | - | - |
+| required | `boolean` | `undefined` | 否 | 是否必填 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 代码或文本片段内容变化时触发，适合与父级表单实时同步。 | `value?: string` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 否 | - | 当前编辑器中的代码或文本内容。 |
+
+## 使用示例
+### 启动脚本输入
+**场景**: 录入任务脚本、环境变量模板或高级参数文本。
+
+在创建任务或实例时录入一段配置脚本。
+
+**使用的 API**: 属性: modelValue, label, required | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { KvCode } from '@ksyun-internal/versatile';
+
+const script = ref('export NODE_ENV=production');
+</script>
+
+<template>
+  <KvCode v-model="script" label="启动脚本" :required="true" />
+</template>
+```
+
+### 录入策略 JSON 文本
+**场景**: 在策略配置页中录入 JSON 结构化文本。
+
+在权限或策略场景中填写结构化文本配置。
+
+**使用的 API**: 属性: modelValue, label | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { KvCode } from '@ksyun-internal/versatile';
+
+const policy = ref('{"Version":"1.0","Statement":[]}');
+</script>
+
+<template>
+  <KvCode v-model="policy" label="访问策略" />
+</template>
+```
+
+## 相关组件
+Code, FormItemInput
+

package/docs_for_llm/layoutcontent.doc.md

@@ -2,9 +2,9 @@
 
 标准页面布局组件，包含头部、面包屑、内容区和可选的底部操作栏。
 
-**关键词**: layout, content, page, 布局
+**关键词**: layout, content, page, 布局, 详情布局, 页面骨架, 内容页容器
 
-**使用场景**: 详情页、列表页、表单页
+**使用场景**: 详情页、列表页、表单页、购买链路页面、带顶部栏和底部栏的业务内容页
 
 ## 导入语句
 ```typescript
@@ -12,21 +12,21 @@ import { LayoutContent } from '@ksyun-internal/versatile';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| title | `string` | `""` | 否 | 定义顶部栏标题，也可通过 headerProps.title 定义标题 | - |
-| back | `() => any | RouteLocationRaw` | `undefined` | 否 | 定义顶部栏是否支持返回按钮，也可通过 headerProps.back 定义返回内容 | - |
-| headerProps | `LayoutHeaderProps` | `undefined` | 否 | 定义顶部栏，Header 组件支持的属性 | - |
-| tab | `string` | `""` | 否 | 当前选项卡 | - |
-| tabs | `TabItem[]` | `undefined` | 否 | 所有选项卡数据 | - |
-| tabsProps | `LayoutTabsProps` | `undefined` | 否 | 定义 tab 栏，LayoutTabs 组件支持的属性 | - |
-| newable | `boolean` | `false` | 否 | 购买链路页面样式。UI 规范要求在浏览器新的 tab 中打开 | - |
-| scroll | `boolean` | `false` | 否 | 内容超出范围是否支持滚动条 | - |
-| topShadow | `boolean` | `false` | 否 | 顶部固定处是否加阴影，有返回操作的默认自带阴影 | - |
-| initialized | `boolean` | `true` | 否 | 是否初始化完成，默认初始化已完成为 true，初始化未完成时会有 loading 效果 | - |
-| loading | `boolean` | `false` | 否 | 是否为加载中状态 | - |
-| isHasFooter | `boolean` | `undefined` | 否 | 是否有底部栏，可通过此参数强制进行设置。默认根据是否有 footer、footerLeft、footerRight 扩展点判断 | - |
-| breadcrumb | `Array<{ to: string, label: string }>` | `undefined` | 否 | 同 Header 组件的 breadcrumb 属性一致，定义面包屑导航，数组元素为 { to: string, label: string } 格式 | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `string` | `""` | 否 | 定义顶部栏标题，也可通过 headerProps.title 定义标题 | - | - |
+| back | `() => any | RouteLocationRaw` | `undefined` | 否 | 定义顶部栏是否支持返回按钮，也可通过 headerProps.back 定义返回内容 | - | - |
+| headerProps | `LayoutHeaderProps` | `undefined` | 否 | 定义顶部栏，Header 组件支持的属性 | - | - |
+| tab | `string` | `""` | 否 | 当前选项卡 | - | - |
+| tabs | `TabItem[]` | `undefined` | 否 | 所有选项卡数据 | - | - |
+| tabsProps | `LayoutTabsProps` | `undefined` | 否 | 定义 tab 栏，LayoutTabs 组件支持的属性 | - | - |
+| newable | `boolean` | `false` | 否 | 购买链路页面样式。UI 规范要求在浏览器新的 tab 中打开 | - | - |
+| scroll | `boolean` | `false` | 否 | 内容超出范围是否支持滚动条 | - | - |
+| topShadow | `boolean` | `false` | 否 | 顶部固定处是否加阴影，有返回操作的默认自带阴影 | - | - |
+| initialized | `boolean` | `true` | 否 | 是否初始化完成，默认初始化已完成为 true，初始化未完成时会有 loading 效果 | - | - |
+| loading | `boolean` | `false` | 否 | 是否为加载中状态 | - | - |
+| isHasFooter | `boolean` | `undefined` | 否 | 是否有底部栏，可通过此参数强制进行设置。默认根据是否有 footer、footerLeft、footerRight 扩展点判断 | - | - |
+| breadcrumb | `Array<{ to: string, label: string }>` | `undefined` | 否 | 同 Header 组件的 breadcrumb 属性一致，定义面包屑导航，数组元素为 { to: string, label: string } 格式 | - | - |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
@@ -41,3 +41,40 @@ import { LayoutContent } from '@ksyun-internal/versatile';
 | footerRight | 扩展底部栏右侧处内容 | `<template #footerRight>...</template>` | `<LayoutContent><template #footerRight><Button>提交</Button></template></LayoutContent>` |
 | footer | 扩展底部栏处的整体内容，底部栏没有左右之分的时候可使用此扩展 | `<template #footer>...</template>` | `<LayoutContent><template #footer><Button>保存</Button><Button>取消</Button></template></LayoutContent>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**headerTitle**
+
+- 参数结构: 无参数
+
+**headerTitleAppend**
+
+- 参数结构: 无参数
+
+**headerDocPrepend**
+
+- 参数结构: 无参数
+
+**headerDoc**
+
+- 参数结构: 无参数
+
+**tab**
+
+- 参数结构: 无参数
+
+**footerLeft**
+
+- 参数结构: 无参数
+
+**footerRight**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+

package/docs_for_llm/layoutlistcontent.doc.md

@@ -0,0 +1,168 @@
+# 列表布局 (LayoutListContent)
+
+面向列表页的一体化布局容器，统一承载头部、操作区、搜索区和列表内容，适合和 Search、ProTable 组合使用。
+
+**关键词**: list layout, layout list, 列表布局, 资源列表页, 搜索加表格布局, 页头操作区
+
+**使用场景**: 资源列表页、带搜索和操作栏的列表页、通过插槽扩展头部操作区
+
+## 导入语句
+```typescript
+import { LayoutListContent } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `string` | `""` | 否 | 顶部栏标题，也可通过 headerProps.title 配置 | - | - |
+| headerProps | `LayoutHeaderProps` | `undefined` | 否 | 顶部栏配置，同 Header 组件的属性集合 | - | - |
+| loading | `boolean` | `false` | 否 | 整体加载状态 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 页面主体内容区域 | `<LayoutListContent>...</LayoutListContent>` | `<LayoutListContent>
+  <template <LayoutListContent>...</LayoutListContent>>
+    自定义default内容
+  </template>
+</LayoutListContent>` |
+| headerTitle | 扩展顶部栏左侧标题处内容 | `<template #headerTitle>...</template>` | `<LayoutListContent>
+  <template <template #headerTitle>...</template>>
+    自定义headerTitle内容
+  </template>
+</LayoutListContent>` |
+| headerTitleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #headerTitleAppend>...</template>` | `<LayoutListContent>
+  <template <template #headerTitleAppend>...</template>>
+    自定义headerTitleAppend内容
+  </template>
+</LayoutListContent>` |
+| headerDocPrepend | 扩展顶部栏右侧文档前置内容 | `<template #headerDocPrepend>...</template>` | `<LayoutListContent>
+  <template <template #headerDocPrepend>...</template>>
+    自定义headerDocPrepend内容
+  </template>
+</LayoutListContent>` |
+| headerDoc | 扩展顶部栏右侧文档内容 | `<template #headerDoc>...</template>` | `<LayoutListContent>
+  <template <template #headerDoc>...</template>>
+    自定义headerDoc内容
+  </template>
+</LayoutListContent>` |
+| opLeft | 卡片操作栏左侧内容 | `<template #opLeft>...</template>` | `<LayoutListContent>
+  <template <template #opLeft>...</template>>
+    自定义opLeft内容
+  </template>
+</LayoutListContent>` |
+| opRight | 卡片操作栏右侧内容 | `<template #opRight>...</template>` | `<LayoutListContent>
+  <template <template #opRight>...</template>>
+    自定义opRight内容
+  </template>
+</LayoutListContent>` |
+| prepend | 卡片操作栏上方扩展内容 | `<template #prepend>...</template>` | `<LayoutListContent>
+  <template <template #prepend>...</template>>
+    自定义prepend内容
+  </template>
+</LayoutListContent>` |
+| extra | 头部附加区域 | `<template #extra>...</template>` | `<LayoutListContent>
+  <template <template #extra>...</template>>
+    自定义extra内容
+  </template>
+</LayoutListContent>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**headerTitle**
+
+- 参数结构: 无参数
+
+**headerTitleAppend**
+
+- 参数结构: 无参数
+
+**headerDocPrepend**
+
+- 参数结构: 无参数
+
+**headerDoc**
+
+- 参数结构: 无参数
+
+**opLeft**
+
+- 参数结构: 无参数
+
+**opRight**
+
+- 参数结构: 无参数
+
+**prepend**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 标准列表页布局
+**场景**: 搭建常见的“页头 + 搜索 + 表格”列表页面。
+
+在同一容器内组合标题、搜索区和表格区，形成标准列表页结构。
+
+```vue
+<script setup lang="ts">
+import { LayoutListContent, Header, Search, ProTable } from '@ksyun-internal/versatile';
+
+const searches = [
+  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },
+];
+const columns = [
+  { key: 'name', title: '实例名称' },
+];
+</script>
+
+<template>
+  <LayoutListContent>
+    <template #headerTitle>
+      <Header title="实例列表" />
+    </template>
+    <template #prepend>
+      <Search :searches="searches" />
+    </template>
+    <ProTable :columns="columns" :data-source="[]" />
+  </LayoutListContent>
+</template>
+```
+
+### 使用操作栏左右插槽
+**场景**: 在列表页头部同时摆放批量操作、主操作和统计信息。
+
+通过 opLeft、opRight 和 extra 插槽扩展列表页头部区域。
+
+**使用的 API**: 属性: title
+
+```vue
+<script setup lang="ts">
+import { LayoutListContent, ProTable } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <LayoutListContent title="镜像列表">
+    <template #opLeft>
+      <button>批量导出</button>
+    </template>
+    <template #opRight>
+      <button>新建镜像</button>
+    </template>
+    <template #extra>
+      <span>共 32 个镜像</span>
+    </template>
+    <ProTable :columns="[]" :data-source="[]" />
+  </LayoutListContent>
+</template>
+```
+
+## 相关组件
+Header, ProTable, Search
+

package/docs_for_llm/layoutpermissioncontent.doc.md

@@ -0,0 +1,93 @@
+# 权限内容布局 (LayoutPermissionContent)
+
+用于承载无权限、待开通、待授权等结果页内容的布局组件，统一管理插图、说明文案和主操作按钮。
+
+**关键词**: permission, permission layout, 权限布局, 无权限页, 结果页布局, 开通引导
+
+**使用场景**: 无权限页、待授权提示页、纵向结果页和引导操作
+
+## 导入语句
+```typescript
+import { LayoutPermissionContent } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| img | `string` | `undefined` | 否 | 状态插图地址 | - | - |
+| title | `string` | `undefined` | 否 | 主标题 | - | - |
+| message | `string` | `undefined` | 否 | 说明文案 | - | - |
+| btnText | `string` | `undefined` | 否 | 操作按钮文案 | - | - |
+| vertical | `boolean` | `undefined` | 否 | 是否采用纵向布局 | - | - |
+| type | `string` | `undefined` | 否 | 展示类型 | - | - |
+| loading | `boolean` | `undefined` | 否 | 按钮是否处于加载状态 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| click:btn | `@click:btn` | 用户点击主操作按钮时触发，通常用于跳转授权页、申请开通或返回列表。 | `-` | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 主内容区域 | `<LayoutPermissionContent>...</LayoutPermissionContent>` | `<LayoutPermissionContent>
+  <template <LayoutPermissionContent>...</LayoutPermissionContent>>
+    自定义default内容
+  </template>
+</LayoutPermissionContent>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 无权限状态页
+**场景**: 在用户没有资源访问权限时展示统一结果页。
+
+统一展示无权限说明并提供下一步操作入口。
+
+**使用的 API**: 属性: title, message, btnText | 事件: click:btn
+
+```vue
+<script setup lang="ts">
+import { LayoutPermissionContent } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <LayoutPermissionContent
+    title="暂无访问权限"
+    message="请联系项目管理员为当前账号开通实例查看权限"
+    btn-text="去申请权限"
+    @click:btn="() => console.log('apply')"
+  />
+</template>
+```
+
+### 纵向结果页布局
+**场景**: 在待开通或待申请的结果页中展示更多引导说明。
+
+在说明较多时启用纵向布局并通过默认插槽补充帮助信息。
+
+**使用的 API**: 属性: title, message, btnText, vertical
+
+```vue
+<script setup lang="ts">
+import { LayoutPermissionContent } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <LayoutPermissionContent
+    title="服务暂未开通"
+    message="当前地域尚未开通该服务，可先查看产品介绍。"
+    btn-text="申请开通"
+    :vertical="true"
+  >
+    <p>如需加急，请联系客户经理或提交工单。</p>
+  </LayoutPermissionContent>
+</template>
+```
+
+## 相关组件
+LayoutContent, CardContent
+