king-design-analyzer 2.1.9 → 2.2.0

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)
 | 插槽名 | 说明 | 模板写法 | 示例 |

package/docs_for_llm/layoutlistcontent.doc.md

@@ -0,0 +1,95 @@
+# 列表布局 (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>` | - |
+| headerTitle | 扩展顶部栏左侧标题处内容 | `<template #headerTitle>...</template>` | - |
+| headerTitleAppend | 扩展顶部栏左侧标题后的追加内容 | `<template #headerTitleAppend>...</template>` | - |
+| headerDocPrepend | 扩展顶部栏右侧文档前置内容 | `<template #headerDocPrepend>...</template>` | - |
+| headerDoc | 扩展顶部栏右侧文档内容 | `<template #headerDoc>...</template>` | - |
+| opLeft | 卡片操作栏左侧内容 | `<template #opLeft>...</template>` | - |
+| opRight | 卡片操作栏右侧内容 | `<template #opRight>...</template>` | - |
+| prepend | 卡片操作栏上方扩展内容 | `<template #prepend>...</template>` | - |
+| extra | 头部附加区域 | `<template #extra>...</template>` | - |
+
+## 使用示例
+### 标准列表页布局
+**场景**: 搭建常见的“页头 + 搜索 + 表格”列表页面。
+
+在同一容器内组合标题、搜索区和表格区，形成标准列表页结构。
+
+```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,84 @@
+# 权限内容布局 (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>` | - |
+
+## 使用示例
+### 无权限状态页
+**场景**: 在用户没有资源访问权限时展示统一结果页。
+
+统一展示无权限说明并提供下一步操作入口。
+
+**使用的 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
+

package/docs_for_llm/layoutstandardlist.doc.md

@@ -0,0 +1,120 @@
+# 标准列表布局 (LayoutStandardList)
+
+标准化列表页业务容器，内置搜索、批量操作、轮询和列管理等能力，适合快速搭建成熟的资源管理列表页。
+
+**关键词**: standard list, resource list layout, 列表布局, 标准列表, 批量操作列表, 带搜索列表, 列管理, 轮询列表
+
+**使用场景**: 标准资源列表页、带搜索和批量操作的列表页、带轮询和列设置的控制台列表、快速搭建资源管理页
+
+## 导入语句
+```typescript
+import { LayoutStandardList } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| canCreate | `Record<string, any>` | `undefined` | 否 | 控制“创建”按钮可用性的配置对象 | - | - |
+| canDelete | `Record<string, any>` | `undefined` | 否 | 控制批量删除按钮可用性的配置对象 | - | - |
+| handleClickCreateBtn | `() => void` | `undefined` | 否 | 点击创建按钮时的处理函数 | - | - |
+| handleClickBatchDeleteBtn | `() => void` | `undefined` | 否 | 点击批量删除按钮时的处理函数 | - | - |
+| placeholder | `string` | `undefined` | 否 | 搜索框占位文案 | - | - |
+| hasSearch | `boolean` | `true` | 否 | 是否显示搜索区域 | - | - |
+| hasSearchItems | `boolean` | `undefined` | 否 | 是否显示检索项区域 | - | - |
+| searches | `SearchType[] | Record<string, SearchType>` | `undefined` | 否 | 搜索配置集合 | - | - |
+| searchGroups | `SearchGroupItem[]` | `undefined` | 否 | 搜索类型分组配置 | - | - |
+| labelMaps | `Record<string, string>` | `undefined` | 否 | 筛选标签文案映射 | - | - |
+| rowKey | `string` | `undefined` | 否 | 表格行唯一键字段名 | - | - |
+| notCheckTip | `string` | `undefined` | 否 | 未选中任何行时的提示文案 | - | - |
+| tableFields | `any` | `undefined` | 否 | 可配置的表格字段定义 | - | - |
+| checkType | `any` | `"checkbox"` | 否 | 表格勾选模式 | - | - |
+| sortType | `string` | `undefined` | 否 | 排序模式 | - | - |
+| pollInterval | `number` | `0` | 否 | 轮询刷新间隔，单位毫秒 | - | - |
+| useList | `Function` | `undefined` | 是 | 拉取列表数据的 hook 或函数，必填 | - | - |
+| useListDepParams | `any[]` | `undefined` | 否 | 触发 useList 刷新的依赖参数列表 | - | - |
+| useListOptionParams | `Record<string, any>` | `undefined` | 否 | 传给 useList 的可选参数对象 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 自定义列表主体内容 | `<LayoutStandardList>...</LayoutStandardList>` | - |
+
+## 使用示例
+### 资源管理列表页
+**场景**: 快速拼出带搜索、列配置和新建入口的资源列表页。
+
+通过内置搜索和创建按钮快速搭建标准资源列表。
+
+**使用的 API**: 属性: canCreate, hasSearch, searches, tableFields, placeholder
+
+```vue
+<script setup lang="ts">
+import { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';
+
+const searches = [
+  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },
+  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }] },
+];
+const tableFields = [
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'status', label: '状态', checked: true },
+];
+</script>
+
+<template>
+  <LayoutStandardList
+    :can-create="true"
+    :has-search="true"
+    :searches="searches"
+    :table-fields="tableFields"
+    placeholder="搜索实例名称"
+  >
+    <ProTable :columns="[]" :data-source="[]" row-key="id" />
+  </LayoutStandardList>
+</template>
+```
+
+### 带批量操作和轮询的标准列表
+**场景**: 在资源列表页中同时开启筛选条件回显、批量操作和定时刷新。
+
+使用批量删除、检索项回显和轮询能力构建更完整的资源管理页。
+
+**使用的 API**: 属性: hasSearch, hasSearchItems, searches, tableFields, pollInterval, canDelete, handleClickBatchDeleteBtn, useList, rowKey
+
+```vue
+<script setup lang="ts">
+import { LayoutStandardList, ProTable } from '@ksyun-internal/versatile';
+
+const searches = [
+  { key: 'name', label: '实例名称', type: 'input', placeholder: '请输入实例名称' },
+  { key: 'status', label: '状态', type: 'select', list: [{ key: 'running', label: '运行中' }, { key: 'stopped', label: '已停止' }] },
+];
+const tableFields = [
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'status', label: '状态', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+const useList = () => ({ loading: false, dataSource: [], total: 0 });
+const handleClickBatchDeleteBtn = () => console.log('batch delete');
+</script>
+
+<template>
+  <LayoutStandardList
+    :has-search="true"
+    :has-search-items="true"
+    :searches="searches"
+    :table-fields="tableFields"
+    :poll-interval="10000"
+    :can-delete="{ value: true }"
+    :handle-click-batch-delete-btn="handleClickBatchDeleteBtn"
+    :use-list="useList"
+    row-key="id"
+  >
+    <ProTable :columns="[]" :data-source="[]" row-key="id" />
+  </LayoutStandardList>
+</template>
+```
+
+## 相关组件
+LayoutListContent, ProTable, Search, SearchItems
+

package/docs_for_llm/layouttabs.doc.md

@@ -0,0 +1,101 @@
+# 布局标签页 (LayoutTabs)
+
+页面级业务标签组件，适合在详情页或配置页切换“概览、监控、日志、告警”等大块内容。
+
+**关键词**: layout tabs, tabs, tab, 页面标签, 页签
+
+**使用场景**: 详情页多标签切换、控制台页面分区导航、路由参数驱动的页签切换
+
+## 导入语句
+```typescript
+import { LayoutTabs } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `any` | `undefined` | 否 | 当前激活的标签值 | - | - |
+| tabs | `TabItem[]` | `[]` | 否 | 标签数据列表，元素通常包含 value、label、disabled 等字段 | - | - |
+| theme | `string` | `undefined` | 否 | 标签页视觉主题 | - | - |
+| routerName | `string` | `undefined` | 否 | 结合路由模式时使用的路由名称 | - | - |
+| tabParamKey | `string` | `"tab"` | 否 | URL 中用于记录当前 tab 的参数名 | - | - |
+| halfRadius | `boolean` | `false` | 否 | 是否启用半圆角样式 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 激活标签值变化时触发，适合直接绑定当前 tab 状态。 | `value?: string | number` | - |
+| update:tab | `@update:tab` | 当前完整标签对象变化时触发，便于读取路由名或扩展字段。 | `value?: LayoutTabItem` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | number` | 否 | - | 当前激活标签的 value。 |
+
+**update:tab**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `LayoutTabItem` | 否 | - | 当前选中的完整标签项对象。 |
+
+## 使用示例
+### 详情页标签切换
+**场景**: 在详情页顶部切换不同子页面内容。
+
+在页面主区域切换不同业务模块。
+
+**使用的 API**: 属性: modelValue, tabs | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LayoutTabs } from '@ksyun-internal/versatile';
+
+const active = ref('overview');
+const tabs = [
+  { label: '概览', value: 'overview' },
+  { label: '监控', value: 'monitor' },
+  { label: '日志', value: 'logs' },
+];
+</script>
+
+<template>
+  <LayoutTabs v-model="active" :tabs="tabs" />
+</template>
+```
+
+### 结合路由参数记录页签
+**场景**: 让用户刷新页面后仍能保留当前页签状态。
+
+通过 tabParamKey 让当前页签状态体现在 URL 上。
+
+**使用的 API**: 属性: modelValue, tabs, tabParamKey, halfRadius | 事件: update:modelValue, update:tab
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LayoutTabs } from '@ksyun-internal/versatile';
+
+const active = ref('alarm');
+const tabs = [
+  { label: '概览', value: 'overview' },
+  { label: '告警', value: 'alarm' },
+  { label: '审计日志', value: 'audit' },
+];
+</script>
+
+<template>
+  <LayoutTabs
+    v-model="active"
+    :tabs="tabs"
+    tab-param-key="view"
+    :half-radius="true"
+  />
+</template>
+```
+
+## 相关组件
+LayoutContent, Header
+

package/docs_for_llm/lazymount.doc.md

@@ -0,0 +1,73 @@
+# 延迟挂载 (LazyMount)
+
+仅在内容真正可见时再挂载子树的轻量组件，适合优化重量级图表、编辑器或弹层内部内容的首次渲染开销。
+
+**关键词**: lazy mount, deferred mount, 延迟挂载, 按需挂载, 性能优化
+
+**使用场景**: 大型内容按需挂载、弹层内容懒加载、编辑器或图表按需渲染
+
+## 导入语句
+```typescript
+import { LazyMount } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| show | `boolean` | `undefined` | 是 | 是否挂载内容 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 延迟挂载的内容 | `<LazyMount>...</LazyMount>` | - |
+
+## 使用示例
+### 延迟挂载重量级图表
+**场景**: 减少图表、代码编辑器等重组件的初始渲染成本。
+
+在用户展开监控面板后再渲染图表区域。
+
+**使用的 API**: 属性: show
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyMount } from '@ksyun-internal/versatile';
+
+const showChart = ref(false);
+</script>
+
+<template>
+  <button @click="showChart = !showChart">切换监控面板</button>
+  <LazyMount :show="showChart">
+    <div>这里放图表组件</div>
+  </LazyMount>
+</template>
+```
+
+### 编辑器面板按需挂载
+**场景**: 避免策略编辑器、脚本编辑器在初始渲染时带来额外开销。
+
+只在用户切换到高级编辑模式后再加载编辑器区域。
+
+**使用的 API**: 属性: show
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LazyMount } from '@ksyun-internal/versatile';
+
+const advanced = ref(false);
+</script>
+
+<template>
+  <button @click="advanced = !advanced">高级编辑</button>
+  <LazyMount :show="advanced">
+    <textarea rows="8" style="width: 100%;">这里放策略编辑器</textarea>
+  </LazyMount>
+</template>
+```
+
+## 相关组件
+LazyTeleport
+