king-design-analyzer 2.1.9 → 2.2.0

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
+

package/docs_for_llm/carousel.doc.md

@@ -12,13 +12,13 @@ import { Carousel, CarouselItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string` | `"$0"` | 否 | 当前展示的内容块对应的值。默认为索引字符串 "$0", "$1" 等 | `<Carousel v-model="currentValue"></Carousel>` |
-| autoplay | `boolean | number` | `false` | 否 | 是否自动切换。如果传入数字，则表示自动切换的时间间隔（毫秒）。为 0 或 false 则不自动切换。 | `<Carousel :autoplay="3000"></Carousel>` |
-| arrow | `"hover" | "always" | "never"` | `"hover"` | 否 | 左右切换箭头的展示方式 | `<Carousel arrow="always"></Carousel>` |
-| effect | `"slide" | "fade"` | `"slide"` | 否 | 切换动画效果 | `<Carousel effect="fade"></Carousel>` |
-| clonedAmount | `number` | `1` | 否 | slide 模式下，指定前后克隆的内容块数量，用于无缝循环轮播 | `<Carousel :clonedAmount="2"></Carousel>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `"$0"` | 否 | 当前展示的内容块对应的值。默认为索引字符串 "$0", "$1" 等 | - | `<Carousel v-model="currentValue"></Carousel>` |
+| autoplay | `boolean | number` | `false` | 否 | 是否自动切换。如果传入数字，则表示自动切换的时间间隔（毫秒）。为 0 或 false 则不自动切换。 | - | `<Carousel :autoplay="3000"></Carousel>` |
+| arrow | `"hover" | "always" | "never"` | `"hover"` | 否 | 左右切换箭头的展示方式 | - | `<Carousel arrow="always"></Carousel>` |
+| effect | `"slide" | "fade"` | `"slide"` | 否 | 切换动画效果 | - | `<Carousel effect="fade"></Carousel>` |
+| clonedAmount | `number` | `1` | 否 | slide 模式下，指定前后克隆的内容块数量，用于无缝循环轮播 | - | `<Carousel :clonedAmount="2"></Carousel>` |
 
 ## 子组件 (Sub-Components)
 ### CarouselItem
@@ -29,6 +29,7 @@ import { Carousel, CarouselItem } from '@king-design/vue';
 | value | `string` | 定义该项的唯一值，若不设置默认为索引 "$0", "$1"... | `<CarouselItem value="item1"></CarouselItem>` |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 未设置 Carousel 高度
 > **错误用法**: `<Carousel>...</Carousel>`
 > **正确写法**: `<Carousel style="height: 300px;">...</Carousel>`
 > **说明**: Carousel 默认可能没有高度或者高度为 0，需要显式设置高度。

package/docs_for_llm/cascader.doc.md

@@ -12,43 +12,64 @@ import { Cascader } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `any` | `""` | 否 | 当前选中的值。多选模式下为数组。 | `<Cascader v-model="selectedCity"></Cascader>` |
-| data | `CascaderData[]` | `[]` | 是 | 级联数据源。结构为 {value, label, children}[] | `<Cascader :data="options"></Cascader>` |
-| multiple | `boolean` | `false` | 否 | 是否开启多选模式 | `<Cascader multiple></Cascader>` |
-| filterable | `boolean` | `false` | 否 | 是否可搜索 | `<Cascader filterable></Cascader>` |
-| clearable | `boolean` | `false` | 否 | 是否显示清空按钮 | `<Cascader clearable></Cascader>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 | `<Cascader disabled></Cascader>` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | `<Cascader size="small"></Cascader>` |
-| trigger | `"click" | "hover"` | `"click"` | 否 | 子菜单触发方式 | `<Cascader trigger="hover"></Cascader>` |
-| changeOnSelect | `boolean` | `false` | 否 | 是否选中父级即改变 value（允许选择任意一级） | `<Cascader changeOnSelect></Cascader>` |
-| format | `(values: any[]) => string` | `undefined` | 否 | 自定义选中项的显示格式，参数为选中的数据项数组，返回显示的字符串。 | `<Cascader :format="(v) => v.map(i => i.label).join(' > ')"></Cascader>` |
-| loadData | `(item: any) => Promise<void> | void` | `undefined` | 否 | 动态加载数据函数。当子节点为空时调用。 | `<Cascader :loadData="loadMore"></Cascader>` |
-| loading | `boolean` | `false` | 否 | 是否显示加载中状态 | `<Cascader loading></Cascader>` |
-| placeholder | `string` | `"请选择"` | 否 | 占位文本 | `<Cascader placeholder="请选择城市"></Cascader>` |
-| fields | `object` | `undefined` | 否 | 自定义字段名映射，默认 {value:'value', label:'label', children:'children', disabled:'disabled'} | `<Cascader :fields="{value: 'code', label: 'name'}"></Cascader>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `any` | `""` | 否 | 当前选中的值。多选模式下为数组。 | - | `<Cascader v-model="selectedCity">` |
+| data | `CascaderData[]` | `[]` | 是 | 级联数据源。结构为 {value, label, children}[] | - | `<Cascader :data="options">` |
+| multiple | `boolean` | `false` | 否 | 是否开启多选模式 | - | `<Cascader multiple>` |
+| filterable | `boolean` | `false` | 否 | 是否可搜索 | - | `<Cascader filterable>` |
+| filter | `(keywords: string, data: CascaderData) => boolean` | `undefined` | 否 | 自定义筛选规则函数 | - | `<Cascader filterable :filter="(kw, item) => item.label.includes(kw)">` |
+| clearable | `boolean` | `false` | 否 | 是否显示清空按钮 | - | `<Cascader clearable>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Cascader disabled>` |
+| name | `string` | `undefined` | 否 | 表单元素的 name 属性 | - | `<Cascader name="city">` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸 | - | `<Cascader size="small">` |
+| hideIcon | `boolean` | `false` | 否 | 是否隐藏后面的下拉图标 | - | `<Cascader hideIcon>` |
+| trigger | `"click" | "hover"` | `"click"` | 否 | 子菜单触发方式 | - | `<Cascader trigger="hover">` |
+| changeOnSelect | `boolean` | `false` | 否 | 是否选中父级即改变 value（允许选择任意一级） | - | `<Cascader changeOnSelect>` |
+| format | `(values: any[]) => string` | `undefined` | 否 | 自定义选中项的显示格式，参数为选中的数据项数组，返回显示的字符串。 | - | `<Cascader :format="(v) => v.map(i => i.label).join(' > ')">` |
+| loadData | `(item: any) => Promise<void> | void` | `undefined` | 否 | 动态加载数据函数。当子节点为空时调用。 | - | `<Cascader :loadData="loadMore">` |
+| loading | `boolean` | `false` | 否 | 是否显示加载中状态 | - | `<Cascader loading>` |
+| fluid | `boolean` | `false` | 否 | 是否宽度 100% | - | `<Cascader fluid>` |
+| inline | `boolean` | `false` | 否 | 展示内联模式，该模式下组件没有边框，宽度和高度由内容撑开 | - | `<Cascader inline>` |
+| placeholder | `string` | `"请选择"` | 否 | 占位文本 | - | `<Cascader placeholder="请选择城市">` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置，默认 Dialog 组件会追加到 Dialog 中，其他追加到 body | - | `<Cascader :container="() => document.body">` |
+| width | `number | string` | `undefined` | 否 | 指定宽度，组件自动添加单位 px | - | `<Cascader :width="240">` |
+| show | `boolean` | `false` | 否 | 是否展示菜单项（受控模式） | - | `<Cascader :show="visible">` |
+| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'left top+8', at: 'left bottom'}` | 否 | 菜单弹出的位置 | - | `<Cascader position="top">` |
+| flat | `boolean` | `false` | 否 | 是否展示扁平样式 | - | `<Cascader flat>` |
+| nowrap | `boolean` | `false` | 否 | 选中值区域是否不换行展示，适合单行紧凑布局 | - | `<Cascader nowrap>` |
+| draggable | `boolean` | `false` | 否 | 多选值是否支持拖动排序 | - | `<Cascader multiple draggable>` |
+| virtual | `boolean` | `false` | 否 | 是否开启虚拟列表，用于大数据量场景 | - | `<Cascader virtual>` |
+| fields | `object` | `undefined` | 否 | 自定义字段名映射，默认 {value:'value', label:'label', children:'children', disabled:'disabled'} | - | `<Cascader :fields="{value: 'code', label: 'name'}">` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
-| change | `@change` | 值发生变化时触发 | `value: any` | `<Cascader @change="handleChange"></Cascader>` |
-| show | `@show` | 菜单显示时触发 | `-` | `<Cascader @show="onShow"></Cascader>` |
-| hide | `@hide` | 菜单隐藏时触发 | `-` | `<Cascader @hide="onHide"></Cascader>` |
+| change | `@change` | 值发生变化时触发 | `value: any` | `<Cascader @change="handleChange">` |
+| show | `@show` | 菜单显示时触发 | `-` | `<Cascader @show="onShow">` |
+| hide | `@hide` | 菜单隐藏时触发 | `-` | `<Cascader @hide="onHide">` |
 
-## 插槽 (Slots)
-| 插槽名 | 说明 | 模板写法 | 示例 |
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `any` | 是 | - | 当前选中的值 |
+
+## 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| value | 自定义选择结果的展示 | `undefined` | - |
-| values | 自定义多选的选择结果的展示 | `undefined` | - |
-| prefix | 自定义输入框前面展示的内容 | `undefined` | - |
-| suffix | 自定义输入框后面展示的内容 | `undefined` | - |
+| show | 主动展开级联选择面板。 | `-` | `void` |
+| hide | 主动关闭级联选择面板。 | `-` | `void` |
+| position | 重新计算级联选择面板的位置。 | `-` | `void` |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 数据未加载时显示空白
 > **错误用法**: `<Cascader :data="[]" />`
 > **正确写法**: `<Cascader :data="options" :loading="isLoading" />`
 > **说明**: 如果数据为空，建议设置 loading 状态或者提供数据源。
 
+### value 格式错误
 > **错误用法**: `const value = ref('beijing')`
 > **正确写法**: `const value = ref(['beijing', 'chaoyang'])`
 > **说明**: Cascader 的 value 通常是一个数组（表示路径），如果是多选则为二维数组。

package/docs_for_llm/checkbox.doc.md

@@ -12,25 +12,34 @@ import { Checkbox } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `any` | `false` | 否 | 复选框的取值，可用 v-model 双向绑定。单独使用时为布尔值，组合使用时为数组 | `<Checkbox v-model="checked">选项</Checkbox>` |
-| trueValue | `any` | `true` | 否 | 选中时的值 | `<Checkbox trueValue="yes" falseValue="no"></Checkbox>` |
-| falseValue | `any` | `false` | 否 | 未选中时的值 | `<Checkbox trueValue="active" falseValue="inactive"></Checkbox>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 | `<Checkbox disabled>禁用</Checkbox>` |
-| indeterminate | `boolean` | `false` | 否 | 是否半选中状态，用于实现全选功能时表示部分选中 | `<Checkbox :indeterminate="isPartialChecked"></Checkbox>` |
-| name | `string` | `undefined` | 否 | 原生 name 属性 | `<Checkbox name="agreement"></Checkbox>` |
-| required | `boolean` | `undefined` | 否 | 原生 required 属性 | `<Checkbox required></Checkbox>` |
-| form | `string` | `undefined` | 否 | 原生 form 属性 | `<Checkbox form="myForm"></Checkbox>` |
-| autofocus | `boolean` | `undefined` | 否 | 原生 autofocus 属性 | `<Checkbox autofocus></Checkbox>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `any` | `false` | 否 | 复选框的取值，可用 v-model 双向绑定。单独使用时为布尔值，组合使用时为数组 | - | `<Checkbox v-model="checked">选项</Checkbox>` |
+| trueValue | `any` | `true` | 否 | 选中时的值 | - | `<Checkbox trueValue="yes" falseValue="no"></Checkbox>` |
+| falseValue | `any` | `false` | 否 | 未选中时的值 | - | `<Checkbox trueValue="active" falseValue="inactive"></Checkbox>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Checkbox disabled>禁用</Checkbox>` |
+| indeterminate | `boolean` | `false` | 否 | 是否半选中状态，用于实现全选功能时表示部分选中 | - | `<Checkbox :indeterminate="isPartialChecked"></Checkbox>` |
+| name | `string` | `undefined` | 否 | 原生 name 属性 | `native` | `<Checkbox name="agreement"></Checkbox>` |
+| required | `boolean` | `undefined` | 否 | 原生 required 属性 | `native` | `<Checkbox required></Checkbox>` |
+| form | `string` | `undefined` | 否 | 原生 form 属性 | `native` | `<Checkbox form="myForm"></Checkbox>` |
+| autofocus | `boolean` | `undefined` | 否 | 原生 autofocus 属性 | `native` | `<Checkbox autofocus></Checkbox>` |
+| autocomplete | `string` | `undefined` | 否 | 原生 autocomplete 属性，指定浏览器自动补全行为 | `native` | `<Checkbox autocomplete="off"></Checkbox>` |
+| maxlength | `number | string` | `undefined` | 否 | 原生 maxlength 属性，组件透传到内部 input 元素 | `native` | `<Checkbox :maxlength="1"></Checkbox>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | change | `@change` | 当点击组件导致值变化时触发 | `value: any, e: MouseEvent` | `<Checkbox @change="handleChange"></Checkbox>` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `any` | 是 | - | 变化后的值 |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+
+事件处理示例:
 ```typescript
 const handleChange = (value: boolean, e: MouseEvent) => {
   console.log('选中状态:', value);
@@ -38,6 +47,7 @@ const handleChange = (value: boolean, e: MouseEvent) => {
 ```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 复选框组使用错误的 value 类型
 > **错误用法**: `const checked = ref(false);
 <Checkbox v-model="checked" trueValue="apple">苹果</Checkbox>
 <Checkbox v-model="checked" trueValue="banana">香蕉</Checkbox>`
@@ -46,10 +56,12 @@ const handleChange = (value: boolean, e: MouseEvent) => {
 <Checkbox v-model="checkedList" trueValue="banana">香蕉</Checkbox>`
 > **说明**: 复选框组需要使用数组类型的 value
 
+### 使用 indeterminate 但未正确处理全选逻辑
 > **错误用法**: `<Checkbox :indeterminate="true">全选</Checkbox>`
 > **正确写法**: `<Checkbox v-model="checkAll" :indeterminate="indeterminate">全选</Checkbox>`
 > **说明**: indeterminate 只控制视觉样式，需要配合 v-model 和计算属性实现全选逻辑
 
+### 自定义值类型与初始值不匹配
 > **错误用法**: `const value = ref(false);
 <Checkbox v-model="value" trueValue="yes" falseValue="no">`
 > **正确写法**: `const value = ref('no');

package/docs_for_llm/cidrinput.doc.md

@@ -0,0 +1,83 @@
+# CIDR 输入框 (CidrInput)
+
+用于录入网段 CIDR 的业务输入组件，把 IP 地址与掩码选择组合在一起，常用于 VPC、子网和安全策略配置。
+
+**关键词**: cidr, cidr input, 网段输入, 子网配置, network cidr, 掩码选择
+
+**使用场景**: 网络配置、子网和路由录入、CIDR 分段输入与校验
+
+## 导入语句
+```typescript
+import { CidrInput } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `string` | `undefined` | 否 | CIDR 值，如 192.168.0.0/24 | - | - |
+| vpcCidr | `string` | `undefined` | 否 | 所属 VPC 的 CIDR，用于约束和提示 | - | - |
+| disabled | `boolean | any[]` | `undefined` | 否 | 禁用状态或禁用分段配置 | - | - |
+| tooltip | `any[]` | `undefined` | 否 | 各分段 tooltip 配置 | - | - |
+| maskRange | `number[]` | `[0, 32]` | 否 | 可选掩码范围 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | CIDR 字符串变化时触发，可直接同步到网络配置表单。 | `value?: string` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 否 | - | 当前输入的 CIDR 字符串。 |
+
+## 使用示例
+### 子网网段录入
+**场景**: 创建子网时录入并校验目标网段。
+
+限制掩码范围，并结合 VPC 网段给出约束。
+
+**使用的 API**: 属性: modelValue, vpcCidr, maskRange | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CidrInput } from '@ksyun-internal/versatile';
+
+const cidr = ref('192.168.1.0/24');
+</script>
+
+<template>
+  <CidrInput
+    v-model="cidr"
+    vpc-cidr="192.168.0.0/16"
+    :mask-range="[16, 28]"
+  />
+</template>
+```
+
+### 为分段输入补充提示
+**场景**: 在网络配置页中用提示文案降低 CIDR 输入门槛。
+
+给 CIDR 各段提供 tooltip，帮助用户理解输入规则。
+
+**使用的 API**: 属性: modelValue, tooltip, maskRange | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CidrInput } from '@ksyun-internal/versatile';
+
+const cidr = ref('10.0.0.0/24');
+const tooltip = ['网络段', '子网段', '主机段', '预留', '掩码长度'];
+</script>
+
+<template>
+  <CidrInput v-model="cidr" :tooltip="tooltip" :mask-range="[24, 28]" />
+</template>
+```
+
+## 相关组件
+IPInput
+

package/docs_for_llm/code.doc.md

@@ -12,23 +12,31 @@ import { Code } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string` | `""` | 否 | 编辑器的代码内容，可用 v-model 双向绑定 | `<Code v-model="code" />` |
-| language | `string` | `"javascript"` | 否 | 指定编程语言 | `<Code language="typescript" />` |
-| theme | `"vs" | "vs-dark" | "hc-black"` | `"vs"` | 否 | 指定主题 | `<Code theme="vs-dark" />` |
-| readOnly | `boolean` | `false` | 否 | 是否只读 | `<Code readOnly />` |
-| width | `string` | `"100%"` | 否 | 指定宽度，需要带单位 | `<Code width="800px" />` |
-| height | `string` | `"100%"` | 否 | 指定高度，需要带单位 | `<Code height="400px" />` |
-| options | `editor.IStandaloneEditorConstructionOptions` | `{}` | 否 | 其它 Monaco Editor 配置，会传给 monaco.editor.create() 方法 | `<Code :options="{minimap: {enabled: false}}" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `""` | 否 | 编辑器的代码内容，可用 v-model 双向绑定 | - | `<Code v-model="code" />` |
+| language | `string` | `"javascript"` | 否 | 指定编程语言 | - | `<Code language="typescript" />` |
+| theme | `"vs" | "vs-dark" | "hc-black"` | `"vs"` | 否 | 指定主题 | - | `<Code theme="vs-dark" />` |
+| readOnly | `boolean` | `false` | 否 | 是否只读 | - | `<Code readOnly />` |
+| width | `string` | `"100%"` | 否 | 指定宽度，需要带单位 | - | `<Code width="800px" />` |
+| height | `string` | `"100%"` | 否 | 指定高度，需要带单位 | - | `<Code height="400px" />` |
+| options | `editor.IStandaloneEditorConstructionOptions` | `{}` | 否 | 其它 Monaco Editor 配置，会传给 monaco.editor.create() 方法 | - | `<Code :options="{minimap: {enabled: false}}" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | ready | `@ready` | 编辑器加载并实例化完成时触发 | `editor: editor.IStandaloneCodeEditor, Editor: typeof editor, Monaco: typeof monaco` | `<Code @ready="handleReady" />` |
 
-### 事件处理函数示例
-**ready**:
+### 事件参数说明
+**ready**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| editor | `editor.IStandaloneCodeEditor` | 是 | - | 编辑器实例 |
+| Editor | `typeof editor` | 是 | - | Editor 模块 |
+| Monaco | `typeof monaco` | 是 | - | Monaco 模块 |
+
+事件处理示例:
 ```typescript
 const handleReady = (editor, Editor, Monaco) => {
   console.log('编辑器已加载', editor);
@@ -37,14 +45,17 @@ const handleReady = (editor, Editor, Monaco) => {
 ```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### height/width 未带单位
 > **错误用法**: `<Code height="200" /> <!-- 无单位 -->`
 > **正确写法**: `<Code height="200px" />`
 > **说明**: height 和 width 需要带单位，如 px、%、vh 等
 
+### language 拼写错误
 > **错误用法**: `<Code language="Javascript" /> <!-- 大写错误 -->`
 > **正确写法**: `<Code language="javascript" />`
 > **说明**: language 应使用小写，如 javascript、typescript
 
+### 未正确导入 Code 组件
 > **错误用法**: `import { Code } from '@king-design/vue'; // 可能未包含在默认 bundle 中`
 > **正确写法**: `// 确保项目配置了 Monaco Editor
 import { Code } from '@king-design/vue';`

package/docs_for_llm/collapse.doc.md

@@ -12,12 +12,12 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string[]` | `undefined` | 否 | 当前展开的 CollapseItem 取值，可用 v-model 双向绑定 | `<Collapse v-model="activeKeys"></Collapse>` |
-| accordion | `boolean` | `false` | 否 | 是否展示手风琴风格，同时只能展开一个面板 | `<Collapse v-model="activeKeys" accordion></Collapse>` |
-| arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | `<Collapse arrow="left"></Collapse>` |
-| noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | `<Collapse noBorder></Collapse>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string[]` | `undefined` | 否 | 当前展开的 CollapseItem 取值，可用 v-model 双向绑定 | - | `<Collapse v-model="activeKeys"></Collapse>` |
+| accordion | `boolean` | `false` | 否 | 是否展示手风琴风格，同时只能展开一个面板 | - | `<Collapse v-model="activeKeys" accordion></Collapse>` |
+| arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | - | `<Collapse arrow="left"></Collapse>` |
+| noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | - | `<Collapse noBorder></Collapse>` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
@@ -39,12 +39,14 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 - `@hide`: 收起时触发
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### value 类型错误，使用字符串而非数组
 > **错误用法**: `const activeKey = ref('1');
 <Collapse v-model="activeKey">`
 > **正确写法**: `const activeKeys = ref(['1']);
 <Collapse v-model="activeKeys">`
 > **说明**: Collapse 的 value 必须是字符串数组类型，即使使用 accordion 模式
 
+### CollapseItem 未设置 value 导致无法正确控制
 > **错误用法**: `<Collapse v-model="activeKeys">
   <CollapseItem title="面板">内容</CollapseItem>
 </Collapse>`
@@ -53,6 +55,7 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 </Collapse>`
 > **说明**: 建议为 CollapseItem 显式设置 value，便于控制展开状态
 
+### arrow 值拼写错误
 > **错误用法**: `<Collapse arrow="start">`
 > **正确写法**: `<Collapse arrow="left">`
 > **说明**: arrow 只支持 right 和 left 两个值

package/docs_for_llm/colorpicker.doc.md

@@ -0,0 +1,104 @@
+# 颜色选择器 (Colorpicker)
+
+颜色选择器组件，用于选择纯色或带透明度的颜色值。点击触发器后会弹出调色面板，支持预设颜色、自定义弹出容器和弹层定位。
+
+**关键词**: colorpicker, 颜色选择器, 颜色, 主题色, rgba, hex, 预设颜色
+
+**使用场景**: 主题颜色配置、图表颜色设置、标签颜色自定义、运营后台品牌色选择
+
+## 导入语句
+```typescript
+import { Colorpicker } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `undefined` | 是 | 当前颜色值，必填。支持十六进制颜色或 rgba 字符串，可用 v-model 双向绑定。 | - | `<Colorpicker v-model="color" />` |
+| presets | `string[]` | `["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]` | 否 | 预设颜色列表，展示在面板底部，便于快速选择常用颜色。 | - | `<Colorpicker v-model="color" :presets="['#1677ff', '#52c41a', '#faad14']" />` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 尺寸。 | - | `<Colorpicker v-model="color" size="small" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用，禁用后无法打开面板和修改颜色。 | - | `<Colorpicker v-model="color" disabled />` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出层挂载位置。通常在 Dialog、Drawer 等容器中需要显式指定，避免层级或定位异常。 | - | `<Colorpicker v-model="color" :container="() => document.body" />` |
+| show | `boolean` | `undefined` | 否 | 是否展示颜色面板，可用于受控显示。 | - | `<Colorpicker v-model="color" :show="visible" />` |
+| position | `DropdownProps['position']` | `{ collision: 'fit' }` | 否 | 下拉面板定位配置，继承 Dropdown 的 position 能力。 | - | `<Colorpicker v-model="color" :position="{ placement: 'bottom-start', collision: 'fit' }" />` |
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 未传入有效颜色字符串
+> **错误用法**: `<Colorpicker :value="undefined" />`
+> **正确写法**: `<Colorpicker v-model="color" />`
+> **说明**: Colorpicker 的 value 是必填项，应提供合法的颜色字符串并通过 v-model 维护状态。
+
+### 在弹层容器内使用时未指定 container
+> **错误用法**: `<Dialog v-model="visible"><Colorpicker v-model="color" /></Dialog>`
+> **正确写法**: `<Dialog v-model="visible"><Colorpicker v-model="color" :container="() => document.body" /></Dialog>`
+> **说明**: Colorpicker 内部会渲染下拉面板，在 Dialog、Drawer 等场景中建议显式设置挂载容器，避免遮挡和定位问题。
+
+## 使用示例
+### 基础用法
+**场景**: 选择品牌主色或主题色
+
+选择主题色并实时预览。
+
+**使用的 API**: 属性: value
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Colorpicker } from '@king-design/vue';
+
+const color = ref('#1677ff');
+</script>
+<template>
+  <div style="display: flex; align-items: center; gap: 12px;">
+    <Colorpicker v-model="color" />
+    <span>当前颜色：{{ color }}</span>
+  </div>
+</template>
+```
+
+### 预设颜色
+**场景**: 为运营后台提供固定品牌色
+
+通过 presets 提供常用颜色快捷选择。
+
+**使用的 API**: 属性: value, presets
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Colorpicker } from '@king-design/vue';
+
+const color = ref('#52c41a');
+const presets = ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'];
+</script>
+<template>
+  <Colorpicker v-model="color" :presets="presets" />
+</template>
+```
+
+### 弹窗内使用
+**场景**: 在弹窗中配置颜色字段
+
+在弹窗中显式指定挂载容器，避免弹层错位。
+
+**使用的 API**: 属性: value, container
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, Colorpicker, Dialog } from '@king-design/vue';
+
+const visible = ref(false);
+const color = ref('rgba(22, 119, 255, 0.8)');
+</script>
+<template>
+  <Button @click="visible = true">编辑颜色</Button>
+  <Dialog v-model="visible" title="颜色设置">
+    <Colorpicker v-model="color" :container="() => document.body" />
+  </Dialog>
+</template>
+```
+
+## 相关组件
+Input, Dropdown, Dialog
+