king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/icon.doc.md

@@ -12,28 +12,32 @@ import { Icon } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| class | `string` | `undefined` | 是 | 必填。通过 class 指定图标名称，需以 k-icon- 为前缀。例如: k-icon-user | `<Icon class="k-icon-user" />` |
-| size | `"default" | "large" | "small" | "mini" | string | number` | `"default"` | 否 | 定义图标尺寸，可使用预设值或自定义数值 | `<Icon class="k-icon-home" size="large" />` |
-| color | `"default" | "primary" | "danger" | "warning" | "success" | string` | `undefined` | 否 | 图标颜色，可使用预设主题色或自定义颜色值 | `<Icon class="k-icon-heart" color="danger" />` |
-| rotate | `boolean` | `false` | 否 | 是否一直旋转图标，适用于加载状态 | `<Icon class="k-icon-refresh" rotate />` |
-| hoverable | `boolean` | `false` | 否 | 图标是否具有 hover 效果，适用于可点击图标 | `<Icon class="k-icon-delete" hoverable @click="handleDelete" />` |
-| disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | `<Icon class="k-icon-edit" disabled />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| class | `string` | `undefined` | 是 | 必填。通过 class 指定图标名称，需以 k-icon- 为前缀。例如: k-icon-user | - | `<Icon class="k-icon-user" />` |
+| size | `"default" | "large" | "small" | "mini" | string | number` | `"default"` | 否 | 定义图标尺寸，可使用预设值或自定义数值 | - | `<Icon class="k-icon-home" size="large" />` |
+| color | `"default" | "primary" | "danger" | "warning" | "success" | string` | `undefined` | 否 | 图标颜色，可使用预设主题色或自定义颜色值 | - | `<Icon class="k-icon-heart" color="danger" />` |
+| rotate | `boolean` | `false` | 否 | 是否一直旋转图标，适用于加载状态 | - | `<Icon class="k-icon-refresh" rotate />` |
+| hoverable | `boolean` | `false` | 否 | 图标是否具有 hover 效果，适用于可点击图标 | - | `<Icon class="k-icon-delete" hoverable @click="handleDelete" />` |
+| disabled | `boolean` | `false` | 否 | 是否展示禁用状态 | - | `<Icon class="k-icon-edit" disabled />` |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 未通过 class 指定图标名称
 > **错误用法**: `<Icon name="k-icon-search" />`
 > **正确写法**: `<Icon class="k-icon-search" />`
 > **说明**: 图标名称必须通过 class 属性指定，而非 name 属性
 
+### 图标名称前缀错误
 > **错误用法**: `<Icon class="icon-search" />`
 > **正确写法**: `<Icon class="k-icon-search" />`
 > **说明**: KPC 图标名称必须以 k-icon- 为前缀
 
+### 自定义尺寸使用字符串而非数字
 > **错误用法**: `<Icon class="k-icon-home" size="24px" />`
 > **正确写法**: `<Icon class="k-icon-home" :size="24" />`
 > **说明**: 自定义数值尺寸应使用数字类型，不需要带单位
 
+### 预设颜色值拼写错误
 > **错误用法**: `<Icon class="k-icon-heart" color="red" />`
 > **正确写法**: `<Icon class="k-icon-heart" color="danger" />`
 > **说明**: 预设颜色值为 default, primary, danger, warning, success。如需使用其他颜色，请使用十六进制或 RGB 格式

package/docs_for_llm/icontooltip.doc.md

@@ -0,0 +1,121 @@
+# 图标提示 (IconTooltip)
+
+带有 Tooltip 提示的图标组件，支持普通图标和按钮图标两种类型。常用于工具栏中的刷新、下载、设置等操作。
+
+**关键词**: IconTooltip, 图标提示, 工具栏, 刷新, 下载, 设置
+
+**使用场景**: 工具栏操作按钮、表格刷新按钮、信息提示图标、设置入口
+
+## 导入语句
+```typescript
+import { IconTooltip } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| icon | `string` | `""` | 是 | 指定 KPC 图标的 class 名称 | - | `<IconTooltip icon="k-icon-refresh" />` |
+| type | `"default" | "button"` | `"default"` | 否 | 图标类型 | - | `<IconTooltip type="button" icon="k-icon-refresh" />` |
+| hoverable | `boolean` | `true` | 否 | 图标是否具有 hover 效果 | - | `<IconTooltip icon="k-icon-information" :hoverable="false" />` |
+| loading | `boolean` | `false` | 否 | 对于 type="button" 类型，是否为正在加载中的图标 | - | `<IconTooltip type="button" icon="k-icon-refresh" :loading="true" />` |
+| theme | `"dark" | "light"` | `"dark"` | 否 | 指定 Tooltip 的主题 | - | `<IconTooltip icon="k-icon-refresh" theme="light" />` |
+| tooltipText | `string` | `""` | 否 | 指定 Tooltip 的提示内容 | - | `<IconTooltip icon="k-icon-refresh" tooltipText="刷新" />` |
+| color | `string` | `undefined` | 否 | 自定义图标颜色，适用于普通图标和按钮图标 | - | `<IconTooltip icon="k-icon-information" color="#1890ff" tooltipText="信息" />` |
+
+## 常见错误与正确用法 (Anti-Hallucination)
+### 未指定 icon 属性
+> **错误用法**: `<IconTooltip tooltipText="刷新" />`
+> **正确写法**: `<IconTooltip icon="k-icon-refresh" tooltipText="刷新" />`
+> **说明**: icon 是必填属性，需要指定图标的 class 名称
+
+### 在 default 类型上使用 loading
+> **错误用法**: `<IconTooltip icon="k-icon-refresh" :loading="true" />`
+> **正确写法**: `<IconTooltip type="button" icon="k-icon-refresh" :loading="true" />`
+> **说明**: loading 属性仅对 type="button" 类型有效
+
+## 使用示例
+### 基础用法
+**场景**: 展示基础的图标提示
+
+基本的图标提示
+
+**使用的 API**: 属性: icon, tooltipText, theme
+
+```vue
+<script setup lang="ts">
+import { IconTooltip } from '@ksyun-internal/versatile';
+</script>
+<template>
+  <IconTooltip icon="k-icon-refresh" tooltipText="刷新" theme="light" />
+  <IconTooltip icon="k-icon-download" tooltipText="下载" theme="light" />
+  <IconTooltip icon="k-icon-settings" tooltipText="自定义列表字段" theme="light" />
+</template>
+```
+
+### 图标按钮
+**场景**: 展示按钮样式的图标
+
+按钮样式的图标提示
+
+**使用的 API**: 属性: type, icon, tooltipText
+
+```vue
+<script setup lang="ts">
+import { IconTooltip } from '@ksyun-internal/versatile';
+</script>
+<template>
+  <IconTooltip type="button" icon="k-icon-refresh" tooltipText="刷新" />
+  <IconTooltip type="button" icon="k-icon-download" tooltipText="下载" />
+  <IconTooltip type="button" icon="k-icon-settings" tooltipText="自定义列表字段" />
+</template>
+```
+
+### 加载状态
+**场景**: 展示加载中的图标按钮
+
+按钮图标的加载状态
+
+**使用的 API**: 属性: icon, type, loading, tooltipText
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IconTooltip } from '@ksyun-internal/versatile';
+
+const loading = ref(false);
+const handleClick = () => {
+  loading.value = true;
+  setTimeout(() => loading.value = false, 2000);
+};
+</script>
+<template>
+  <IconTooltip
+    icon="k-icon-refresh"
+    type="button"
+    :loading="loading"
+    tooltipText="刷新"
+    @click="handleClick"
+  />
+</template>
+```
+
+### 去掉 hover 状态
+**场景**: 禁用 hover 效果
+
+禁用 hover 效果的图标
+
+**使用的 API**: 属性: type, icon, tooltipText, hoverable
+
+```vue
+<script setup lang="ts">
+import { IconTooltip } from '@ksyun-internal/versatile';
+</script>
+<template>
+  <IconTooltip type="button" icon="k-icon-refresh" tooltipText="刷新" :hoverable="false" />
+  <IconTooltip icon="k-icon-information" tooltipText="信息提示" :hoverable="false" />
+</template>
+```
+
+## 相关组件
+Icon, Tooltip, ButtonLink
+

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('鼠标离开');
@@ -122,17 +168,55 @@ const handleMouseleave = (e: MouseEvent) => {
   <template #suffix><Icon class="k-icon-search" /></template>
 </Input>` |
 
+### 插槽参数说明
+**prepend**
+
+- 参数结构: 无参数
+
+**append**
+
+- 参数结构: 无参数
+
+**prefix**
+
+- 参数结构: 无参数
+
+**suffix**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| focus | 使输入框获得焦点 | `` | `void` |
-| blur | 使输入框失去焦点 | `` | `void` |
-| select | 全选输入框中的内容 | `` | `void` |
+| focus | 使输入框获得焦点 | `-` | `void` |
+| blur | 使输入框失去焦点 | `-` | `void` |
+| select | 全选输入框中的内容 | `-` | `void` |
+
+### 方法调用示例
+**focus**
+
+```typescript
+const inputRef = ref<InstanceType<typeof Input>>();
+inputRef.value?.focus();</InstanceType>
+```
+
+**blur**
+
+```typescript
+inputRef.value?.blur();
+```
+
+**select**
+
+```typescript
+inputRef.value?.select();
+```
 
 ## 子组件 (Sub-Components)
 ### Search
 搜索框组件，提供可展开收起的搜索输入框功能
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `string` | 组件输入的值 | `<Search v-model="keywords" />` |
@@ -141,28 +225,102 @@ const handleMouseleave = (e: MouseEvent) => {
 | size | `"large" | "default" | "small" | "mini"` | 尺寸 | `<Search size="small" />` |
 | open | `boolean` | 是否展开状态 | `<Search :open="isExpanded" />` |
 
-**事件**:
-- `@submit`: 表单提交事件，按回车或点击搜索按钮时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| submit | `@submit` | 表单提交事件，按回车或点击搜索按钮时触发 | `keywords: string` | `<Search @submit="handleKeywordSearch" />` |
+
+##### Search 事件参数说明
+**submit**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| keywords | `string` | 是 | - | 当前搜索关键字 |
+
+事件处理示例:
+```typescript
+const searchHistory = ref<string[]>([]);
+
+const handleKeywordSearch = (keywords: string) => {
+  const normalized = keywords.trim();
+  if (!normalized) return;
+  searchHistory.value = [normalized, ...searchHistory.value.filter((item) => item !== normalized)].slice(0, 5);
+};
+```
+
+#### 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| focus | 使搜索框获得焦点 | `-` | `void` |
+| blur | 使搜索框失去焦点 | `-` | `void` |
+
+##### Search 方法调用示例
+**focus**
+
+```typescript
+const searchRef = ref<InstanceType<typeof Search>>();
+
+const openSearchBar = () => {
+  searchRef.value?.focus();
+};
+```
+
+**blur**
+
+```typescript
+const closeSearchBar = () => {
+  searchRef.value?.blur();
+};
+```
+
+#### 组合示例
+##### 搜索框
+**场景**: 创建搜索框，支持回车提交
+
+使用 Search 组件创建搜索输入框
+
+**命中的子组件 API**: 事件: submit
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Search, Message } from '@king-design/vue';
+
+const keywords = ref('');
+
+const handleSubmit = (value: string) => {
+  Message.info(`搜索: ${value}`);
+};
+</script>
+<template>
+  <Search v-model="keywords" @submit="handleSubmit" />
+</template>
+```
 
 ## 常见错误与正确用法 (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
+