king-design-analyzer 2.1.7 → 2.2.0

package/docs_for_llm/input.doc.md

@@ -12,28 +12,39 @@ import { Input, Search } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| type | `string` | `"text"` | 否 | 在原生 input 标签的 type 取值的基础上扩展了 textarea 值，当取该值时渲染成 <textarea> | `<Input type="textarea" :rows="4" placeholder="请输入内容" />` |
-| value | `string` | `undefined` | 否 | 输入框的值，可用 v-model 进行双向绑定 | `<Input v-model="inputValue" />` |
-| defaultValue | `string` | `undefined` | 否 | input 的 defaultValue，首次渲染使用该值 | `<Input defaultValue="初始值" />` |
-| name | `string` | `undefined` | 否 | 原生 input 标签的 name 属性 | `<Input name="username" />` |
-| placeholder | `string` | `undefined` | 否 | 占位文案 | `<Input placeholder="请输入内容" />` |
-| readonly | `boolean` | `false` | 否 | 是否只读 | `<Input v-model="value" readonly />` |
-| clearable | `boolean` | `false` | 否 | 是否展示快速清除按钮 | `<Input v-model="value" clearable />` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 | `<Input disabled placeholder="禁用状态" />` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | `<Input size="large" placeholder="大尺寸输入框" />` |
-| rows | `number | string` | `2` | 否 | 当 type="textarea" 时，默认展示文本行数 | `<Input type="textarea" :rows="6" />` |
-| autoWidth | `boolean` | `false` | 否 | 是否宽度随输入的文本的长度变化而变化 | `<Input autoWidth placeholder="宽度自适应" />` |
-| fluid | `boolean` | `false` | 否 | 是否宽度 100% | `<Input fluid placeholder="宽度100%" />` |
-| width | `string | number` | `undefined` | 否 | 指定宽度，组件会加上单位 px | `<Input :width="300" placeholder="宽度300px" />` |
-| stackClearIcon | `boolean` | `false` | 否 | 是否将清空按钮覆盖在 suffix 按钮上展示来节省空间 | `<Input clearable stackClearIcon />` |
-| frozenOnInput | `boolean` | `false` | 否 | 是否在输入的过程中冻结 value 更新到视图 | `<Input frozenOnInput />` |
-| inline | `boolean` | `false` | 否 | 是否展示内联模式 | `<Input inline />` |
-| resize | `"none" | "vertical" | "horizontal" | "both"` | `"vertical"` | 否 | 指定 textarea 输入框拖动调整大小的方向，默认只能垂直方向调整 | `<Input type="textarea" resize="both" />` |
-| flat | `boolean` | `false` | 否 | 是否展示扁平样式 | `<Input flat placeholder="扁平样式" />` |
-| showCount | `boolean` | `false` | 否 | 是否展示字符长度提示数字 | `<Input showCount maxlength="50" />` |
-| showPassword | `boolean` | `false` | 否 | 当 type="password" 时，是否展示显隐密码按钮 | `<Input type="password" showPassword />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| type | `string` | `"text"` | 否 | 在原生 input 标签的 type 取值的基础上扩展了 textarea 值，当取该值时渲染成 <textarea> | - | `<Input type="textarea" :rows="4" placeholder="请输入内容" />` |
+| value | `string` | `undefined` | 否 | 输入框的值，可用 v-model 进行双向绑定 | - | `<Input v-model="inputValue" />` |
+| defaultValue | `string` | `undefined` | 否 | input 的 defaultValue，首次渲染使用该值 | - | `<Input defaultValue="初始值" />` |
+| name | `string` | `undefined` | 否 | 原生 input 标签的 name 属性 | `native` | `<Input name="username" />` |
+| placeholder | `string` | `undefined` | 否 | 占位文案 | `native` | `<Input placeholder="请输入内容" />` |
+| readonly | `boolean` | `false` | 否 | 是否只读 | `native` | `<Input v-model="value" readonly />` |
+| autocomplete | `string` | `undefined` | 否 | 原生 autocomplete 属性，指定浏览器自动补全行为 | `native` | `<Input autocomplete="username" />` |
+| autofocus | `boolean` | `undefined` | 否 | 原生 autofocus 属性，页面加载后自动聚焦输入框 | `native` | `<Input autofocus />` |
+| form | `string` | `undefined` | 否 | 原生 form 属性，指定输入框关联的表单 id | `native` | `<Input form="searchForm" />` |
+| maxlength | `number | string` | `undefined` | 否 | 原生 maxlength 属性，限制最大输入长度 | `native` | `<Input :maxlength="50" showCount />` |
+| pattern | `string` | `undefined` | 否 | 原生 pattern 属性，指定输入值需要匹配的正则模式 | `native` | `<Input pattern="[0-9]{6}" placeholder="请输入6位数字" />` |
+| required | `boolean` | `undefined` | 否 | 原生 required 属性，标记为必填输入项 | `native` | `<Input required placeholder="必填项" />` |
+| clearable | `boolean` | `false` | 否 | 是否展示快速清除按钮 | - | `<Input v-model="value" clearable />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 | - | `<Input disabled placeholder="禁用状态" />` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 组件尺寸 | - | `<Input size="large" placeholder="大尺寸输入框" />` |
+| rows | `number | string` | `2` | 否 | 当 type="textarea" 时，默认展示文本行数 | `native` | `<Input type="textarea" :rows="6" />` |
+| cols | `number` | `undefined` | 否 | 原生 cols 属性，当 type="textarea" 时指定可见宽度 | `native` | `<Input type="textarea" :cols="40" />` |
+| datalist | `string` | `undefined` | 否 | 原生 datalist 属性，关联 datalist 元素 id | `native` | `<Input datalist="city-list" />` |
+| dirname | `string` | `undefined` | 否 | 原生 dirname 属性，提交时附带输入方向信息 | `native` | `<Input dirname="comment.dir" />` |
+| wrap | `"hard" | "soft"` | `undefined` | 否 | 原生 wrap 属性，当 type="textarea" 时指定换行提交方式 | `native` | `<Input type="textarea" wrap="hard" />` |
+| autoWidth | `boolean` | `false` | 否 | 是否宽度随输入的文本的长度变化而变化 | - | `<Input autoWidth placeholder="宽度自适应" />` |
+| fluid | `boolean` | `false` | 否 | 是否宽度 100% | - | `<Input fluid placeholder="宽度100%" />` |
+| width | `string | number` | `undefined` | 否 | 指定宽度，组件会加上单位 px | - | `<Input :width="300" placeholder="宽度300px" />` |
+| stackClearIcon | `boolean` | `false` | 否 | 是否将清空按钮覆盖在 suffix 按钮上展示来节省空间 | - | `<Input clearable stackClearIcon />` |
+| frozenOnInput | `boolean` | `false` | 否 | 是否在输入的过程中冻结 value 更新到视图 | - | `<Input frozenOnInput />` |
+| inline | `boolean` | `false` | 否 | 是否展示内联模式 | - | `<Input inline />` |
+| waveDisabled | `boolean` | `false` | 否 | 是否禁用点击波纹效果 | - | `<Input waveDisabled />` |
+| resize | `"none" | "vertical" | "horizontal" | "both"` | `"vertical"` | 否 | 指定 textarea 输入框拖动调整大小的方向，默认只能垂直方向调整 | - | `<Input type="textarea" resize="both" />` |
+| flat | `boolean` | `false` | 否 | 是否展示扁平样式 | - | `<Input flat placeholder="扁平样式" />` |
+| showCount | `boolean` | `false` | 否 | 是否展示字符长度提示数字 | - | `<Input showCount maxlength="50" />` |
+| showPassword | `boolean` | `false` | 否 | 当 type="password" 时，是否展示显隐密码按钮 | - | `<Input type="password" showPassword />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -47,22 +58,27 @@ import { Input, Search } from '@king-design/vue';
 | mouseenter | `@mouseenter` | 原生 mouseenter 事件，绑定在组件最外层元素上 | `event: MouseEvent` | `<Input @mouseenter="handleMouseenter" />` |
 | mouseleave | `@mouseleave` | 原生 mouseleave 事件，绑定在组件最外层元素上 | `event: MouseEvent` | `<Input @mouseleave="handleMouseleave" />` |
 
-### 事件处理函数示例
-**clear**:
-```typescript
-const handleClear = () => {
-  console.log('内容已清空');
-};
-```
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `Event` | 是 | - | 原生 change 事件对象 |
 
-**change**:
+事件处理示例:
 ```typescript
 const handleChange = (e: Event) => {
   console.log('值已变化', (e.target as HTMLInputElement).value);
 };
 ```
 
-**keydown**:
+**keydown**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `KeyboardEvent` | 是 | - | 原生键盘事件对象 |
+
+事件处理示例:
 ```typescript
 const handleKeydown = (e: KeyboardEvent) => {
   if (e.key === 'Enter') {
@@ -71,35 +87,65 @@ const handleKeydown = (e: KeyboardEvent) => {
 };
 ```
 
-**keyup**:
+**keyup**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `KeyboardEvent` | 是 | - | 原生键盘事件对象 |
+
+事件处理示例:
 ```typescript
 const handleKeyup = (e: KeyboardEvent) => {
   console.log('键盘抬起', e.key);
 };
 ```
 
-**keypress**:
+**keypress**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `KeyboardEvent` | 是 | - | 原生键盘事件对象 |
+
+事件处理示例:
 ```typescript
 const handleKeypress = (e: KeyboardEvent) => {
   console.log('按键', e.key);
 };
 ```
 
-**click**:
+**click**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `MouseEvent` | 是 | - | 原生鼠标事件对象 |
+
+事件处理示例:
 ```typescript
 const handleClick = (e: MouseEvent) => {
   console.log('点击输入框');
 };
 ```
 
-**mouseenter**:
+**mouseenter**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `MouseEvent` | 是 | - | 原生鼠标事件对象 |
+
+事件处理示例:
 ```typescript
 const handleMouseenter = (e: MouseEvent) => {
   console.log('鼠标进入');
 };
 ```
 
-**mouseleave**:
+**mouseleave**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| event | `MouseEvent` | 是 | - | 原生鼠标事件对象 |
+
+事件处理示例:
 ```typescript
 const handleMouseleave = (e: MouseEvent) => {
   console.log('鼠标离开');
@@ -125,9 +171,9 @@ const handleMouseleave = (e: MouseEvent) => {
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| focus | 使输入框获得焦点 | `` | `void` |
-| blur | 使输入框失去焦点 | `` | `void` |
-| select | 全选输入框中的内容 | `` | `void` |
+| focus | 使输入框获得焦点 | `-` | `void` |
+| blur | 使输入框失去焦点 | `-` | `void` |
+| select | 全选输入框中的内容 | `-` | `void` |
 
 ## 子组件 (Sub-Components)
 ### Search
@@ -145,24 +191,29 @@ const handleMouseleave = (e: MouseEvent) => {
 - `@submit`: 表单提交事件，按回车或点击搜索按钮时触发
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 设置 rows 但未指定 type="textarea"
 > **错误用法**: `<Input :rows="4" placeholder="多行" />`
 > **正确写法**: `<Input type="textarea" :rows="4" placeholder="多行" />`
 > **说明**: rows 属性只在 type="textarea" 时生效，普通 input 不支持 rows
 
+### 使用不存在的 size 值 (Input)
 > **错误用法**: `<Input size="medium" />`
 > **正确写法**: `<Input size="default" />`
 > **说明**: Input 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。
 
+### 在非 textarea 上使用 resize 属性
 > **错误用法**: `<Input resize="both" />`
 > **正确写法**: `<Input type="textarea" resize="both" />`
 > **说明**: resize 属性只对 type="textarea" 生效
 
+### 错误地导入或使用不存在的 Textarea 组件
 > **错误用法**: `import { Textarea } from '@king-design/vue';
 <Textarea v-model="desc" />`
 > **正确写法**: `import { Input } from '@king-design/vue';
 <Input type="textarea" v-model="desc" />`
 > **说明**: KPC 组件库没有单独的 Textarea 组件，多行输入统一使用 Input 组件并设置 type="textarea"。
 
+### 使用 Element UI 的 show-word-limit 属性
 > **错误用法**: `<Input show-word-limit />`
 > **正确写法**: `<Input showCount />`
 > **说明**: KPC 中展示字数计数的属性是 showCount，不是 show-word-limit。

package/docs_for_llm/instancelist.doc.md

@@ -0,0 +1,113 @@
+# 实例列表选择 (InstanceList)
+
+用于从实例候选列表中选择目标实例的表单组件，可同步返回实例值和实例实体，适合迁移、备份、挂载等场景。
+
+**关键词**: instance list, instance selector, 实例选择, 目标实例, 资源实例下拉
+
+**使用场景**: 从候选实例中选择目标实例、迁移或挂载时选择实例、选择后联动实例实体信息
+
+## 导入语句
+```typescript
+import { InstanceList } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `string` | `undefined` | 否 | 当前选中的实例 ID | - | - |
+| list | `Record<string, any>[]` | `undefined` | 否 | 可选实例列表 | - | - |
+| listKeyName | `string` | `"key"` | 否 | 列表项中作为 value 的字段名 | - | - |
+| listLabelName | `string` | `"label"` | 否 | 列表项中作为 label 的字段名 | - | - |
+| fluid | `boolean` | `undefined` | 否 | 是否启用流式宽度 | - | - |
+| existedList | `string[]` | `undefined` | 否 | 已存在实例列表，用于唯一性校验 | - | - |
+| checkInstanceUniqueTip | `string` | `"实例不可重复"` | 否 | 实例重复时的提示文案 | - | - |
+| container | `string` | `undefined` | 否 | 下拉面板挂载容器 | - | - |
+| width | `string | number` | `undefined` | 否 | 控件宽度 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 选中的实例标识变化时触发，通常用于同步实例 ID 或名称。 | `value?: string` | - |
+| update:instance | `@update:instance` | 当前选中的完整实例对象变化时触发，便于读取规格、状态等附加字段。 | `value?: InstanceOption` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 否 | - | 当前选中的实例标识。 |
+
+**update:instance**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `InstanceOption` | 否 | - | 当前选中的完整实例对象。 |
+
+## 使用示例
+### 选择目标实例
+**场景**: 在克隆、挂载或迁移流程中选择目标实例。
+
+从候选实例列表中选取一个实例并同步实例实体。
+
+**使用的 API**: 属性: modelValue, list, listKeyName, listLabelName | 事件: update:modelValue, update:instance
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { InstanceList } from '@ksyun-internal/versatile';
+
+const selected = ref('i-001');
+const list = [
+  { id: 'i-001', name: 'web-prod-01' },
+  { id: 'i-002', name: 'web-prod-02' },
+];
+</script>
+
+<template>
+  <InstanceList
+    v-model="selected"
+    :list="list"
+    list-key-name="id"
+    list-label-name="name"
+  />
+</template>
+```
+
+### 联动实例实体信息
+**场景**: 在选择实例后同步展示其可用区、规格等附加信息。
+
+监听 update:instance 获取当前实例的完整信息。
+
+**使用的 API**: 属性: modelValue, list, listKeyName, listLabelName | 事件: update:instance
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { InstanceList } from '@ksyun-internal/versatile';
+
+const selected = ref('i-001');
+const currentZone = ref('');
+const list = [
+  { id: 'i-001', name: 'web-prod-01', zone: 'cn-beijing-6a' },
+  { id: 'i-002', name: 'web-prod-02', zone: 'cn-beijing-6b' },
+];
+const handleInstance = (instance: { zone?: string }) => {
+  currentZone.value = instance?.zone || '';
+};
+</script>
+
+<template>
+  <InstanceList
+    v-model="selected"
+    :list="list"
+    list-key-name="id"
+    list-label-name="name"
+    @update:instance="handleInstance"
+  />
+  <div>所在可用区：{{ currentZone }}</div>
+</template>
+```
+
+## 相关组件
+FormItemTableConfigs, Select
+

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
+