king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/button.doc.md

@@ -12,40 +12,85 @@ import { Button, ButtonGroup } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| type | `"default" | "primary" | "warning" | "danger" | "success" | "secondary" | "link" | "flat" | "none"` | `"default"` | 否 | 按钮类型，决定按钮的视觉样式 | `<Button type="primary">主要按钮</Button>` |
-| size | `"default" | "small" | "mini" | "large"` | `"default"` | 否 | 按钮尺寸 | `<Button size="small">小按钮</Button>` |
-| icon | `boolean` | `false` | 否 | 是否为图标按钮（宽高相等） | `<Button icon><Icon class="k-icon-search" /></Button>` |
-| circle | `boolean` | `false` | 否 | 是否为圆角按钮 | `<Button icon circle><Icon class="k-icon-plus" /></Button>` |
-| loading | `boolean` | `false` | 否 | 是否为正在加载中的按钮，加载时按钮会禁用点击 | `<Button type="primary" :loading="isLoading">提交中...</Button>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用状态 | `<Button disabled>禁用按钮</Button>` |
-| fluid | `boolean` | `false` | 否 | 是否宽度100% | `<Button fluid>块级按钮</Button>` |
-| htmlType | `string` | `"button"` | 否 | 按钮<button>元素的type属性 | `<Button htmlType="submit">提交表单</Button>` |
-| tagName | `string` | `"button"` | 否 | 按钮渲染后的实际HTML元素，例如可以传入"a"来渲染成超链接 | `<Button tagName="a" href="https://example.com" target="_blank">链接按钮</Button>` |
-| value | `*` | `undefined` | 否 | 对于radio/checkbox类型的按钮组，给按钮指定选中时的值 | `<Button value="option1">选项1</Button>` |
-| ghost | `boolean` | `false` | 否 | 展示透明背景的按钮，适用于深色背景 | `<div style="background: #001529; padding: 16px;">
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| type | `"default" | "primary" | "warning" | "danger" | "success" | "secondary" | "link" | "flat" | "none"` | `"default"` | 否 | 按钮类型，决定按钮的视觉样式 | - | `<Button type="primary">主要按钮</Button>` |
+| size | `"default" | "small" | "mini" | "large"` | `"default"` | 否 | 按钮尺寸 | - | `<Button size="small">小按钮</Button>` |
+| icon | `boolean` | `false` | 否 | 是否为图标按钮（宽高相等） | - | `<Button icon><Icon class="k-icon-search" /></Button>` |
+| circle | `boolean` | `false` | 否 | 是否为圆角按钮 | - | `<Button icon circle><Icon class="k-icon-plus" /></Button>` |
+| loading | `boolean` | `false` | 否 | 是否为正在加载中的按钮，加载时按钮会禁用点击 | - | `<Button type="primary" :loading="isLoading">提交中...</Button>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用状态 | - | `<Button disabled>禁用按钮</Button>` |
+| fluid | `boolean` | `false` | 否 | 是否宽度100% | - | `<Button fluid>块级按钮</Button>` |
+| htmlType | `string` | `"button"` | 否 | 按钮<button>元素的type属性 | - | `<Button htmlType="submit">提交表单</Button>` |
+| color | `string` | `undefined` | 否 | 自定义按钮颜色，通常用于细粒度的主题色控制 | - | `<Button color="#1677ff">自定义颜色按钮</Button>` |
+| tagName | `string` | `"button"` | 否 | 按钮渲染后的实际HTML元素，例如可以传入"a"来渲染成超链接 | - | `<Button tagName="a" href="https://example.com" target="_blank">链接按钮</Button>` |
+| autofocus | `boolean` | `undefined` | 否 | 原生 autofocus 属性，页面加载后自动聚焦按钮 | `native` | `<Button autofocus>自动聚焦</Button>` |
+| form | `string` | `undefined` | 否 | 原生 form 属性，指定按钮关联的表单 id | `native` | `<Button form="loginForm" htmlType="submit">提交</Button>` |
+| formaction | `string` | `undefined` | 否 | 原生 formaction 属性，覆盖表单提交地址 | `native` | `<Button formaction="/api/submit" htmlType="submit">提交</Button>` |
+| formenctype | `string` | `undefined` | 否 | 原生 formenctype 属性，指定表单提交编码类型 | `native` | `<Button formenctype="multipart/form-data" htmlType="submit">上传</Button>` |
+| formmethod | `"post" | "get" | "dialog" | string` | `undefined` | 否 | 原生 formmethod 属性，指定表单提交方法 | `native` | `<Button formmethod="post" htmlType="submit">提交</Button>` |
+| formnovalidate | `boolean` | `undefined` | 否 | 原生 formnovalidate 属性，提交时跳过原生表单校验 | `native` | `<Button formnovalidate htmlType="submit">跳过校验</Button>` |
+| formtarget | `string` | `undefined` | 否 | 原生 formtarget 属性，指定表单响应的打开位置 | `native` | `<Button formtarget="_blank" htmlType="submit">新窗口提交</Button>` |
+| href | `string` | `undefined` | 否 | 原生 href 属性，当 tagName="a" 时指定跳转链接 | `native` | `<Button tagName="a" href="https://example.com">外部链接</Button>` |
+| target | `string` | `undefined` | 否 | 原生 target 属性，当 tagName="a" 时指定打开方式 | `native` | `<Button tagName="a" href="https://example.com" target="_blank">新窗口打开</Button>` |
+| download | `string` | `undefined` | 否 | 原生 download 属性，当 tagName="a" 时提示浏览器下载资源 | `native` | `<Button tagName="a" href="/file.pdf" download="demo.pdf">下载文件</Button>` |
+| value | `*` | `undefined` | 否 | 对于radio/checkbox类型的按钮组，给按钮指定选中时的值 | - | `<Button value="option1">选项1</Button>` |
+| name | `string` | `undefined` | 否 | 原生 name 属性 | `native` | `<Button name="submitBtn">提交</Button>` |
+| tabindex | `string | number` | `undefined` | 否 | 原生 tabindex 属性，控制键盘 Tab 导航顺序 | `native` | `<Button :tabindex="-1">跳过焦点</Button>` |
+| ghost | `boolean` | `false` | 否 | 展示透明背景的按钮，适用于深色背景 | - | `<div style="background: #001529; padding: 16px;">
   <Button ghost>幽灵按钮</Button>
 </div>` |
-| class | `string | Record<string, boolean>` | `undefined` | 否 | 给按钮添加自定义类名，通常用于通过 CSS 类名来定义按钮的具体视觉样式 | `<Button class="my-custom-btn">自定义类名按钮</Button>` |
+| class | `string | Record<string, boolean>` | `undefined` | 否 | 给按钮添加自定义类名，通常用于通过 CSS 类名来定义按钮的具体视觉样式 | - | `<Button class="my-custom-btn">自定义类名按钮</Button>` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
 | default | 按钮内容 | `#default` | `<Button>按钮文字</Button>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| showLoading | 展示 loading 状态 | `` | `void` |
-| hideLoading | 取消 loading 状态 | `` | `void` |
-| disable | 禁用按钮 | `` | `void` |
-| enable | 启用按钮 | `` | `void` |
+| showLoading | 展示 loading 状态 | `-` | `void` |
+| hideLoading | 取消 loading 状态 | `-` | `void` |
+| disable | 禁用按钮 | `-` | `void` |
+| enable | 启用按钮 | `-` | `void` |
+
+### 方法调用示例
+**showLoading**
+
+```typescript
+const buttonRef = ref<InstanceType<typeof Button>>();
+buttonRef.value?.showLoading();</InstanceType>
+```
+
+**hideLoading**
+
+```typescript
+buttonRef.value?.hideLoading();
+```
+
+**disable**
+
+```typescript
+buttonRef.value?.disable();
+```
+
+**enable**
+
+```typescript
+buttonRef.value?.enable();
+```
 
 ## 子组件 (Sub-Components)
 ### ButtonGroup
 按钮组容器，可实现按钮组合、单选组、复选组等功能
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | vertical | `boolean` | 是否垂直排列按钮组 | `<ButtonGroup vertical>
@@ -65,15 +110,43 @@ import { Button, ButtonGroup } from '@king-design/vue';
 </ButtonGroup>` |
 | btnWidth | `number | string` | 指定按钮组每个按钮的固定宽度 | `<ButtonGroup btnWidth="100px"></ButtonGroup>` |
 
+#### 组合示例
+##### 单选按钮组
+**场景**: 创建一个城市选择的单选按钮组，支持双向绑定
+
+使用ButtonGroup实现单选功能
+
+**命中的子组件 API**: 属性: checkType
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, ButtonGroup } from '@king-design/vue';
+
+const selected = ref('beijing');
+</script>
+<template>
+  <ButtonGroup checkType="radio" v-model="selected">
+    <Button value="beijing">北京</Button>
+    <Button value="shanghai">上海</Button>
+    <Button value="guangzhou">广州</Button>
+  </ButtonGroup>
+  <p>当前选中: {{ selected }}</p>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
+### type 属性值拼写错误
 > **错误用法**: `<Button type="primay">`
 > **正确写法**: `<Button type="primary">`
 > **说明**: type 必须使用预定义的值：default, primary, warning, danger, success, secondary, link, flat, none。常见错误是 primary 拼写为 primay
 
+### 使用不存在的 size 值 (Button)
 > **错误用法**: `<Button size="medium">`
 > **正确写法**: `<Button size="default">`
 > **说明**: Button 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。
 
+### 单选/复选按钮组未给 Button 设置 value
 > **错误用法**: `<ButtonGroup checkType="radio" v-model="selected">
   <Button>选项A</Button>
   <Button>选项B</Button>

package/docs_for_llm/buttonlink.doc.md

@@ -0,0 +1,64 @@
+# 链接按钮 (ButtonLink)
+
+外观接近按钮但语义偏链接的操作组件，适合放在详情页头部、说明区或空状态中承载跳转型动作。
+
+**关键词**: button link, link button, 链接按钮, 跳转按钮, 文档入口
+
+**使用场景**: 操作区链接按钮、详情页跳转入口、空状态引导操作
+
+## 导入语句
+```typescript
+import { ButtonLink } from '@ksyun-internal/versatile';
+```
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 按钮内容 | `<ButtonLink>...</ButtonLink>` | `<ButtonLink>
+  <template <ButtonLink>...</ButtonLink>>
+    自定义default内容
+  </template>
+</ButtonLink>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 详情页中的文档跳转入口
+**场景**: 在操作区提供“查看文档”“前往控制台”等跳转动作。
+
+用按钮样式突出跳转动作，同时保持链接语义。
+
+```vue
+<script setup lang="ts">
+import { ButtonLink } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <ButtonLink>查看 API 文档</ButtonLink>
+</template>
+```
+
+### 空状态跳转入口
+**场景**: 在空状态或帮助提示区提供跳转型操作。
+
+在空状态说明区域中用链接按钮承载引导操作。
+
+```vue
+<script setup lang="ts">
+import { ButtonLink } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <div>
+    <p>当前没有可用项目。</p>
+    <ButtonLink>前往创建项目</ButtonLink>
+  </div>
+</template>
+```
+
+## 相关组件
+IconTooltip, Actions
+

package/docs_for_llm/card.doc.md

@@ -12,37 +12,87 @@ import { Card, CardColumn } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| title | `string | VNode` | `undefined` | 否 | 卡片标题 | `<Card title="卡片标题">内容</Card>` |
-| type | `"shadow" | "border" | "none"` | `"shadow"` | 否 | 卡片类型，决定卡片的视觉样式 | `<Card type="border" title="边框卡片">内容</Card>` |
-| size | `"default" | "small" | "mini"` | `"default"` | 否 | 卡片尺寸 | `<Card size="small" title="小卡片">内容</Card>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `string | VNode` | `undefined` | 否 | 卡片标题 | - | `<Card title="卡片标题">内容</Card>` |
+| type | `"shadow" | "border" | "none"` | `"shadow"` | 否 | 卡片类型，决定卡片的视觉样式 | - | `<Card type="border" title="边框卡片">内容</Card>` |
+| size | `"default" | "small" | "mini"` | `"default"` | 否 | 卡片尺寸 | - | `<Card size="small" title="小卡片">内容</Card>` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| header | 扩展整个头部内容 | `undefined` | - |
-| title | 扩展头部标题内容 | `undefined` | - |
-| extra | 扩展头部附加内容 | `undefined` | - |
+| header | 扩展整个头部内容 | `#header` | `<Card>
+  <template #header>头部内容</template>
+</Card>` |
+| title | 扩展头部标题内容 | `#title` | `<Card>
+  <template #title>自定义标题</template>
+</Card>` |
+| extra | 扩展头部附加内容 | `#extra` | `<Card>
+  <template #extra>
+    自定义extra内容
+  </template>
+</Card>` |
+
+### 插槽参数说明
+**header**
+
+- 参数结构: 无参数
+
+**title**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### CardColumn
 卡片列组件，用于实现卡片内的多列布局
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | width | `string` | 列宽，必须带单位 | `<CardColumn width="100px">内容</CardColumn>` |
 | center | `boolean` | 该列内容是否居中 | `<CardColumn center>居中内容</CardColumn>` |
 
+#### 组合示例
+##### 多列布局
+**场景**: 创建带有头像和信息的多列卡片
+
+使用 CardColumn 实现多列布局
+
+**命中的子组件 API**: 属性: width, center
+
+```vue
+<script setup lang="ts">
+import { Card, CardColumn } from '@king-design/vue';
+</script>
+<template>
+  <Card title="用户信息">
+    <CardColumn width="100px" center>
+      <img src="avatar.png" style="width: 80px; height: 80px; border-radius: 50%;" />
+    </CardColumn>
+    <CardColumn>
+      <h4>用户名称</h4>
+      <p>这是用户的详细描述信息</p>
+    </CardColumn>
+  </Card>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 使用不存在的 type 值
 > **错误用法**: `<Card type="bordered">内容</Card>`
 > **正确写法**: `<Card type="border">内容</Card>`
 > **说明**: Card 的 type 只支持 shadow, border, none，注意 border 不是 bordered
 
+### CardColumn width 未带单位
 > **错误用法**: `<CardColumn width="100">内容</CardColumn>`
 > **正确写法**: `<CardColumn width="100px">内容</CardColumn>`
 > **说明**: CardColumn 的 width 必须带单位，如 px、em、%
 
+### 使用不存在的 size 值 (Card)
 > **错误用法**: `<Card size="large">内容</Card>`
 > **正确写法**: `<Card size="default">内容</Card>`
 > **说明**: Card 的 size 只支持 default, small, mini。Card 组件目前不支持 large 尺寸。

package/docs_for_llm/cardcol.doc.md

@@ -0,0 +1,78 @@
+# 卡片列项 (CardCol)
+
+详情卡片中的单个字段展示组件，适合渲染基础文本、状态、可复制内容或带确认操作的字段项。
+
+**关键词**: card col, detail field, 卡片列, 详情字段, 详情项, 卡片字段, 单字段展示, 详情单元
+
+**使用场景**: 详情页字段展示、卡片型信息布局、单字段 loading 占位、支持复制和状态展示的详情项
+
+## 导入语句
+```typescript
+import { CardCol } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| label | `string` | `undefined` | 否 | 列标题 | - | - |
+| col | `Record<string, any>` | `{}` | 否 | 列配置对象 | - | - |
+| loading | `boolean` | `undefined` | 否 | 是否处于加载状态 | - | - |
+| gap | `number` | `undefined` | 否 | 列内容与标题间距 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| change:value | `@change:value` | 字段内部值发生变更时触发，常用于可编辑字段回写。 | `value?: CardColValue` | - |
+| confirmPopover | `@confirmPopover` | 用户确认 Popover 内的二次操作时触发，适合承接危险操作确认。 | `-` | - |
+| hidePopover | `@hidePopover` | 字段上的确认弹层关闭时触发，可用于清理临时状态。 | `-` | - |
+
+### 事件参数说明
+**change:value**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `CardColValue` | 否 | - | 当前字段最新值，具体类型取决于该列使用的编辑控件。 |
+
+## 使用示例
+### 详情页中的单字段展示
+**场景**: 在实例详情卡片中展示单条字段并开启复制能力。
+
+用 CardCol 渲染一条实例属性，保持与详情卡片布局一致。
+
+**使用的 API**: 属性: label, col, gap
+
+```vue
+<script setup lang="ts">
+import { CardCol } from '@ksyun-internal/versatile';
+
+const instanceCol = {
+  value: 'i-2ze7x5a4',
+  copyable: true,
+};
+</script>
+
+<template>
+  <CardCol label="实例 ID" :col="instanceCol" :gap="12" />
+</template>
+```
+
+### 字段加载占位
+**场景**: 在详情页分段加载数据时先渲染单字段占位。
+
+在详情数据尚未返回时先渲染字段级 loading 状态。
+
+**使用的 API**: 属性: label, loading
+
+```vue
+<script setup lang="ts">
+import { CardCol } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <CardCol label="公网 IP" :loading="true" />
+</template>
+```
+
+## 相关组件
+CardCols, CardTabs, CopyHover, Editable
+

package/docs_for_llm/cardcols.doc.md

@@ -0,0 +1,84 @@
+# 卡片列容器 (CardCols)
+
+用于批量组织多个详情字段的卡片列容器，适合把实例、网络、计费等信息按栅格方式排布。
+
+**关键词**: card cols, detail grid, 卡片列容器, 详情布局, 字段栅格, 卡片详情区, 多字段展示, 详情栅格
+
+**使用场景**: 详情页字段排版、卡片信息栅格布局、两列或三列详情分布、批量渲染多条详情字段
+
+## 导入语句
+```typescript
+import { CardCols } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| cols | `CardColItem[]` | `undefined` | 否 | 列配置列表 | - | - |
+| colLength | `number` | `3` | 否 | 每行列数 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| change:value | `@change:value` | 任一字段值变化时统一向外抛出，便于父级集中处理。 | `value?: CardColItem[]` | - |
+| confirmPopover | `@confirmPopover` | 列项中的确认弹层完成确认时触发。 | `-` | - |
+| hidePopover | `@hidePopover` | 列项中的确认弹层关闭时触发。 | `-` | - |
+
+### 事件参数说明
+**change:value**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `CardColItem[]` | 否 | - | 当前卡片字段配置数组，包含每一列的最新值和展示配置。 |
+
+## 使用示例
+### 实例详情字段栅格布局
+**场景**: 在资源详情页中以三列布局展示基础信息。
+
+通过 cols 配置一次性渲染多条详情字段。
+
+**使用的 API**: 属性: cols, colLength
+
+```vue
+<script setup lang="ts">
+import { CardCols } from '@ksyun-internal/versatile';
+
+const cols = [
+  { label: '实例 ID', value: 'i-2ze7x5a4', copyable: true },
+  { label: '可用区', value: 'cn-beijing-6a' },
+  { label: '运行状态', value: '运行中' },
+];
+</script>
+
+<template>
+  <CardCols :cols="cols" :col-length="3" />
+</template>
+```
+
+### 两列详情布局
+**场景**: 在字段较长的详情页中改用两列布局提升可读性。
+
+通过 colLength 控制更宽松的两列详情排版。
+
+**使用的 API**: 属性: cols, colLength
+
+```vue
+<script setup lang="ts">
+import { CardCols } from '@ksyun-internal/versatile';
+
+const cols = [
+  { label: '项目名称', value: '核心项目' },
+  { label: '计费方式', value: '包年包月' },
+  { label: '到期时间', value: '2026-12-31 23:59:59' },
+  { label: '可用区', value: 'cn-beijing-6a' },
+];
+</script>
+
+<template>
+  <CardCols :cols="cols" :col-length="2" />
+</template>
+```
+
+## 相关组件
+CardCol, CardTabs
+

package/docs_for_llm/cardcontent.doc.md

@@ -2,9 +2,9 @@
 
 LayoutContent 内部使用的卡片容器，通常用于包裹具体业务内容。
 
-**关键词**: card, panel, container, 卡片
+**关键词**: card, panel, container, 卡片, 内容卡片, 详情卡片, 卡片容器
 
-**使用场景**: 页面主体内容包裹
+**使用场景**: 页面主体内容包裹、详情页分块信息卡片、带头部操作区的业务内容容器
 
 ## 导入语句
 ```typescript
@@ -12,14 +12,14 @@ import { CardContent } from '@ksyun-internal/versatile';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| title | `string | VNode` | `""` | 否 | 卡片标题 | - |
-| type | `"shadow" | "border" | "none"` | `"none"` | 否 | 卡片类型 | - |
-| size | `"default" | "small" | "mini"` | `"default"` | 否 | 卡片尺寸 | - |
-| scroll | `boolean` | `false` | 否 | 是否支持滚动条 | - |
-| halfRadius | `boolean` | `false` | 否 | 卡片顶部是否支持平角，默认支持圆角样式 | - |
-| loading | `boolean` | `false` | 否 | 是否为加载中状态 | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| title | `string | VNode` | `""` | 否 | 卡片标题 | - | - |
+| type | `"shadow" | "border" | "none"` | `"none"` | 否 | 卡片类型 | - | - |
+| size | `"default" | "small" | "mini"` | `"default"` | 否 | 卡片尺寸 | - | - |
+| scroll | `boolean` | `false` | 否 | 是否支持滚动条 | - | - |
+| halfRadius | `boolean` | `false` | 否 | 卡片顶部是否支持平角，默认支持圆角样式 | - | - |
+| loading | `boolean` | `false` | 否 | 是否为加载中状态 | - | - |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
@@ -30,3 +30,24 @@ import { CardContent } from '@ksyun-internal/versatile';
 | prepend | 扩展卡片操作栏上面部分内容 | `<template #prepend>...</template>` | `<CardContent><template #prepend><Alert>提示信息</Alert></template></CardContent>` |
 | extra | 扩展头部附加内容 | `<template #extra>...</template>` | `<CardContent title="标题"><template #extra><Link>查看更多</Link></template></CardContent>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**opLeft**
+
+- 参数结构: 无参数
+
+**opRight**
+
+- 参数结构: 无参数
+
+**prepend**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
+

package/docs_for_llm/cardtabs.doc.md

@@ -0,0 +1,106 @@
+# 卡片标签页 (CardTabs)
+
+带卡片视觉风格的标签切换组件，适合详情页顶部在“概览、监控、操作日志”等信息块之间切换。
+
+**关键词**: card tabs, detail tabs, 卡片标签, 卡片页签, 详情页签, 信息块切换, tabs, tab switch
+
+**使用场景**: 详情页卡片切换、多块信息切换、基于后端字段映射的标签切换、概览与监控等内容分区
+
+## 导入语句
+```typescript
+import { CardTabs } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `string | number` | `undefined` | 否 | 当前选中的标签值 | - | - |
+| tabs | `any[]` | `undefined` | 否 | 标签数据列表 | - | - |
+| tabLabelName | `string` | `"label"` | 否 | 标签文案字段名 | - | - |
+| tabValueName | `string` | `"value"` | 否 | 标签值字段名 | - | - |
+| data | `any[]` | `undefined` | 否 | 每个标签对应的卡片内容数据 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 当前激活标签值变化时触发，可直接驱动外层 `v-model`。 | `value?: string | number` | - |
+| change:value | `@change:value` | 标签切换并得到新的 value 时触发，通常用于请求对应数据。 | `value?: string | number` | - |
+| update:tab | `@update:tab` | 当前选中的完整 tab 对象变化时触发，便于读取 tab 上的额外配置。 | `value?: CardTabItem` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | number` | 否 | - | 当前激活标签的 value。 |
+
+**change:value**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | number` | 否 | - | 当前切换后的标签值。 |
+
+**update:tab**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `CardTabItem` | 否 | - | 当前激活的完整标签项对象。 |
+
+## 使用示例
+### 详情页中的卡片标签切换
+**场景**: 在详情卡片头部切换不同业务分区。
+
+用 CardTabs 在卡片区域切换不同信息块。
+
+**使用的 API**: 属性: modelValue, tabs | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CardTabs } from '@ksyun-internal/versatile';
+
+const activeTab = ref('base');
+const tabs = [
+  { label: '基本信息', value: 'base' },
+  { label: '监控图表', value: 'monitor' },
+  { label: '变更记录', value: 'logs' },
+];
+</script>
+
+<template>
+  <CardTabs v-model="activeTab" :tabs="tabs" />
+</template>
+```
+
+### 自定义标签字段名
+**场景**: 直接复用后端返回的 tab 数据结构而不做额外转换。
+
+当后端返回的字段名不是 label/value 时，可通过映射字段使用。
+
+**使用的 API**: 属性: modelValue, tabs, tabLabelName, tabValueName | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CardTabs } from '@ksyun-internal/versatile';
+
+const activeTab = ref('network');
+const tabs = [
+  { name: '基础信息', id: 'base' },
+  { name: '网络配置', id: 'network' },
+];
+</script>
+
+<template>
+  <CardTabs
+    v-model="activeTab"
+    :tabs="tabs"
+    tab-label-name="name"
+    tab-value-name="id"
+  />
+</template>
+```
+
+## 相关组件
+LayoutTabs, CardCols, CardCol
+