king-design-analyzer 2.1.9 → 2.2.0

package/docs_for_llm/drawer.doc.md

@@ -12,108 +12,67 @@ import { Drawer } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `boolean` | `false` | 否 | 抽屉是否展示，可用 v-model 双向绑定 | `<Drawer v-model="visible"></Drawer>` |
-| title | `string` | `"提示"` | 否 | 抽屉标题 | `<Drawer title="抽屉标题"></Drawer>` |
-| placement | `"top" | "bottom" | "left" | "right"` | `"right"` | 否 | 抽屉弹出的位置 | `<Drawer placement="left"></Drawer>` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 抽屉尺寸 | `<Drawer size="large"></Drawer>` |
-| width | `number | string` | `undefined` | 否 | 指定抽屉宽度，number 类型时单位为 px，string 类型需指定单位 | `<Drawer :width="500"></Drawer>` |
-| loading | `boolean` | `false` | 否 | "确定"按钮是否为加载状态 | `<Drawer :loading="isSubmitting"></Drawer>` |
-| disabledOk | `boolean` | `false` | 否 | "确定"按钮是否为禁用状态 | `<Drawer :disabledOk="!isFormValid"></Drawer>` |
-| okText | `string` | `"确定"` | 否 | "确定"按钮文案 | `<Drawer okText="保存"></Drawer>` |
-| cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | `<Drawer cancelText="关闭"></Drawer>` |
-| ok | `() => void` | `undefined` | 否 | "确定"按钮点击后自定义回调函数 | `<Drawer :ok="handleOk"></Drawer>` |
-| cancel | `() => void` | `undefined` | 否 | "取消"按钮点击后自定义回调函数 | `<Drawer :cancel="handleCancel"></Drawer>` |
-| hideClose | `boolean` | `false` | 否 | 是否隐藏右上角关闭按钮 | `<Drawer hideClose></Drawer>` |
-| overlay | `boolean` | `true` | 否 | 是否展示遮罩层 | `<Drawer :overlay="false"></Drawer>` |
-| closable | `boolean` | `true` | 否 | 点击遮罩层是否可以关闭抽屉 | `<Drawer :closable="false"></Drawer>` |
-| escClosable | `boolean` | `true` | 否 | 是否按 ESC 键时关闭抽屉 | `<Drawer :escClosable="false"></Drawer>` |
-| terminate | `() => void` | `undefined` | 否 | 用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数 | `<Drawer :terminate="handleTerminate"></Drawer>` |
-| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定抽屉插入的位置，默认追加到 body | `<Drawer :container="() => document.body"></Drawer>` |
-| mode | `"destroy" | "hide"` | `"hide"` | 否 | 指定关闭状态下的渲染方式 | `<Drawer mode="destroy"></Drawer>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `boolean` | `false` | 否 | 抽屉是否展示，可用 v-model 双向绑定 | - | `<Drawer v-model="visible">` |
+| title | `string` | `"提示"` | 否 | 抽屉标题 | - | `<Drawer title="抽屉标题">` |
+| placement | `"top" | "bottom" | "left" | "right"` | `"right"` | 否 | 抽屉弹出的位置 | - | `<Drawer placement="left">` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 抽屉尺寸 | - | `<Drawer size="large">` |
+| width | `number | string` | `undefined` | 否 | 指定抽屉宽度，number 类型时单位为 px，string 类型需指定单位 | - | `<Drawer :width="500">` |
+| loading | `boolean` | `false` | 否 | "确定"按钮是否为加载状态 | - | `<Drawer :loading="isSubmitting">` |
+| disabledOk | `boolean` | `false` | 否 | "确定"按钮是否为禁用状态 | - | `<Drawer :disabledOk="!isFormValid">` |
+| okText | `string` | `"确定"` | 否 | "确定"按钮文案 | - | `<Drawer okText="保存">` |
+| cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | - | `<Drawer cancelText="关闭">` |
+| ok | `() => void` | `undefined` | 否 | "确定"按钮点击后自定义回调函数 | - | `<Drawer :ok="handleOk">` |
+| cancel | `() => void` | `undefined` | 否 | "取消"按钮点击后自定义回调函数 | - | `<Drawer :cancel="handleCancel">` |
+| hideClose | `boolean` | `false` | 否 | 是否隐藏右上角关闭按钮 | - | `<Drawer hideClose>` |
+| overlay | `boolean` | `true` | 否 | 是否展示遮罩层 | - | `<Drawer :overlay="false">` |
+| closable | `boolean` | `true` | 否 | 点击遮罩层是否可以关闭抽屉 | - | `<Drawer :closable="false">` |
+| escClosable | `boolean` | `true` | 否 | 是否按 ESC 键时关闭抽屉 | - | `<Drawer :escClosable="false">` |
+| draggable | `boolean` | `true` | 否 | 抽屉是否可拖拽 | - | `<Drawer :draggable="false">` |
+| terminate | `() => void` | `undefined` | 否 | 用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数 | - | `<Drawer :terminate="handleTerminate">` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定抽屉插入的位置，默认追加到 body | - | `<Drawer :container="() => document.body">` |
+| mode | `"destroy" | "hide"` | `"hide"` | 否 | 指定关闭状态下的渲染方式 | - | `<Drawer mode="destroy">` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
-| open | `@open` | 抽屉打开后触发 | `-` | `<Drawer @open="handleOpen"></Drawer>` |
-| close | `@close` | 抽屉关闭后触发，不管是什么原因导致的关闭 | `-` | `<Drawer @close="handleClose"></Drawer>` |
-| ok | `@ok` | 点击确定按钮时触发 | `-` | `<Drawer @ok="handleOk"></Drawer>` |
-| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Drawer @cancel="handleCancel"></Drawer>` |
-| terminate | `@terminate` | 用户强行关闭抽屉时触发（点击关闭按钮、遮罩层或按 ESC） | `-` | `<Drawer @terminate="handleTerminate"></Drawer>` |
-| afterClose | `@afterClose` | 抽屉退出动画执行完成后触发 | `-` | `<Drawer @afterClose="handleAfterClose"></Drawer>` |
-
-### 事件处理函数示例
-**open**:
-```typescript
-const handleOpen = () => {
-  console.log('抽屉已打开');
-};
-```
-
-**close**:
-```typescript
-const handleClose = () => {
-  console.log('抽屉已关闭');
-};
-```
-
-**ok**:
-```typescript
-const handleOk = () => {
-  console.log('点击了确定');
-};
-```
-
-**cancel**:
-```typescript
-const handleCancel = () => {
-  console.log('点击了取消');
-};
-```
-
-**terminate**:
-```typescript
-const handleTerminate = () => {
-  console.log('用户强行关闭');
-};
-```
-
-**afterClose**:
-```typescript
-const handleAfterClose = () => {
-  console.log('动画完成');
-};
-```
-
-## 插槽 (Slots)
-| 插槽名 | 说明 | 模板写法 | 示例 |
-| --- | --- | --- | --- |
-| content | 定义整个弹窗体，包括header，body，footer | `undefined` | - |
-| header | 扩展弹窗头部 | `undefined` | - |
-| body | 扩展弹窗主体部分 | `undefined` | - |
-| footer | 扩展弹窗底部 | `undefined` | - |
-| footer-wrapper | 扩展弹窗整个底部，上述footer是它下面一个子扩展点 | `undefined` | - |
+| open | `@open` | 抽屉打开后触发 | `-` | `<Drawer @open="handleOpen">` |
+| close | `@close` | 抽屉关闭后触发，不管是什么原因导致的关闭 | `-` | `<Drawer @close="handleClose">` |
+| ok | `@ok` | 点击确定按钮时触发 | `-` | `<Drawer @ok="handleOk">` |
+| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Drawer @cancel="handleCancel">` |
+| terminate | `@terminate` | 用户强行关闭抽屉时触发（点击关闭按钮、遮罩层或按 ESC） | `-` | `<Drawer @terminate="handleTerminate">` |
+| afterClose | `@afterClose` | 抽屉退出动画执行完成后触发 | `-` | `<Drawer @afterClose="handleAfterClose">` |
 
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| show | 弹出抽屉 | `` | `Promise` |
-| close | 关闭抽屉 | `` | `void` |
-| showLoading | "确定"按钮变为加载状态 | `` | `void` |
-| hideLoading | "确定"按钮变为正常状态 | `` | `void` |
-| disableOk | "确定"按钮变为禁用状态 | `` | `void` |
-| enableOk | "确定"按钮变为正常状态 | `` | `void` |
+| show | 弹出抽屉 | `props?: DrawerProps` | `Promise` |
+| close | 关闭抽屉 | `-` | `void` |
+| showLoading | "确定"按钮变为加载状态 | `-` | `void` |
+| hideLoading | "确定"按钮变为正常状态 | `-` | `void` |
+| disableOk | "确定"按钮变为禁用状态 | `-` | `void` |
+| enableOk | "确定"按钮变为正常状态 | `-` | `void` |
+
+### 方法参数说明
+**show**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `DrawerProps` | 否 | - | 可选的临时抽屉配置，会在本次显示时覆盖标题、方向、宽度或按钮状态。 |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### placement 值拼写错误
 > **错误用法**: `<Drawer placement="center">`
 > **正确写法**: `<Drawer placement="right">`
 > **说明**: placement 只支持 top, bottom, left, right，不存在 center 值
 
+### 使用错误的 v-model 属性名
 > **错误用法**: `<Drawer v-model:visible="visible">`
 > **正确写法**: `<Drawer v-model="visible">`
 > **说明**: Drawer 使用 v-model 控制显示状态，不是 v-model:visible
 
+### 混淆 closable 和 hideClose
 > **错误用法**: `<Drawer :closable="true"> <!-- 想隐藏关闭按钮 -->`
 > **正确写法**: `<Drawer hideClose> <!-- 隐藏关闭按钮 -->
 <Drawer :closable="false"> <!-- 禁止点击遮罩关闭 -->`

package/docs_for_llm/dropdown.doc.md

@@ -12,37 +12,65 @@ import { Dropdown, DropdownMenu, DropdownItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| trigger | `"hover" | "click" | "contextmenu" | "focus"` | `"hover"` | 否 | 触发方式 | `<Dropdown trigger="click"></Dropdown>` |
-| value | `boolean` | `false` | 否 | 是否展示菜单，可用 v-model 双向绑定 | `<Dropdown v-model="visible"></Dropdown>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用整个菜单 | `<Dropdown disabled></Dropdown>` |
-| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'left top+8', at: 'left bottom'}` | 否 | 菜单弹出的位置 | `<Dropdown position="right"></Dropdown>` |
-| of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是触发元素所在的菜单元素 | `<Dropdown of="parent"></Dropdown>` |
-| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置，默认追加到 body | `<Dropdown :container="() => document.body"></Dropdown>` |
-| alwaysShowOnClick | `boolean` | `false` | 否 | 不管什么触发方式，重复点击触发器都不隐藏弹层 | `<Dropdown alwaysShowOnClick></Dropdown>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| trigger | `"hover" | "click" | "contextmenu" | "focus"` | `"hover"` | 否 | 触发方式 | - | `<Dropdown trigger="click">` |
+| value | `boolean` | `false` | 否 | 是否展示菜单，可用 v-model 双向绑定 | - | `<Dropdown v-model="visible">` |
+| disabled | `boolean` | `false` | 否 | 是否禁用整个菜单 | - | `<Dropdown disabled>` |
+| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'left top+8', at: 'left bottom'}` | 否 | 菜单弹出的位置 | - | `<Dropdown position="right">` |
+| collison | `Collision | [Collision, Collision]` | `undefined` | 否 | 碰撞检测策略，控制弹层超出边界时的处理方式。注意源码字段名拼写为 collison。 | - | `<Dropdown :collison="'flipfit'">` |
+| of | `"self" | "parent" | Event` | `"self"` | 否 | 弹出菜单的位置是相对当前触发元素还是触发元素所在的菜单元素 | - | `<Dropdown of="parent">` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹出菜单追加的位置，默认追加到 body | - | `<Dropdown :container="() => document.body">` |
+| alwaysShowOnClick | `boolean` | `false` | 否 | 不管什么触发方式，重复点击触发器都不隐藏弹层 | - | `<Dropdown alwaysShowOnClick>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
-| show | `@show` | 菜单展示时触发 | `-` | `<Dropdown @show="handleShow"></Dropdown>` |
-| hide | `@hide` | 菜单隐藏时触发 | `-` | `<Dropdown @hide="handleHide"></Dropdown>` |
+| show | `@show` | 菜单展示时触发 | `-` | `<Dropdown @show="handleShow">` |
+| hide | `@hide` | 菜单隐藏时触发 | `-` | `<Dropdown @hide="handleHide">` |
+| positioned | `@positioned` | 下拉菜单完成定位计算后触发，可用于读取最终落位方向和坐标。 | `feedback: Feedback` | `<Dropdown @positioned="handlePositioned">` |
 
-### 事件处理函数示例
-**show**:
-```typescript
-const handleShow = () => {
-  console.log('菜单已展示');
-};
-```
+### 事件参数说明
+**positioned**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| feedback | `Feedback` | 是 | - | 定位反馈对象，描述当前菜单的最终 placement 和坐标信息。 |
 
-**hide**:
+事件处理示例:
 ```typescript
-const handleHide = () => {
-  console.log('菜单已隐藏');
+const handlePositioned = (feedback: Feedback) => {
+  console.log('最终位置', feedback.placement);
 };
 ```
 
+## 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| show | 主动展开下拉菜单。 | `shouldFocus?: boolean` | `void` |
+| hide | 主动隐藏下拉菜单。 | `immediately?: boolean` | `void` |
+| focusFirst | 把焦点移动到菜单中的第一个可聚焦项。 | `-` | `void` |
+| position | 重新计算当前下拉菜单的位置。 | `callback?: (feedback: Feedback) => void` | `void` |
+
+### 方法参数说明
+**show**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| shouldFocus | `boolean` | 否 | - | 展开后是否尝试把焦点移动到菜单内容，用于键盘可访问性场景。 |
+
+**hide**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| immediately | `boolean` | 否 | - | 是否立即隐藏并跳过延迟关闭逻辑。 |
+
+**position**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| callback | `(feedback: Feedback) => void` | 否 | - | 定位完成后的回调，可读取最终 placement 和坐标。 |
+
 ## 子组件 (Sub-Components)
 ### DropdownMenu
 下拉菜单容器，用于包裹菜单项
@@ -60,6 +88,7 @@ const handleHide = () => {
 - `@click`: 菜单项被点击时触发
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 未使用 #menu 插槽
 > **错误用法**: `<Dropdown>
   <Button>菜单</Button>
   <DropdownMenu>
@@ -76,10 +105,12 @@ const handleHide = () => {
 </Dropdown>`
 > **说明**: DropdownMenu 必须放在 #menu 插槽中
 
+### trigger 值拼写错误
 > **错误用法**: `<Dropdown trigger="rightclick">`
 > **正确写法**: `<Dropdown trigger="contextmenu">`
 > **说明**: 右键触发应使用 contextmenu，不是 rightclick
 
+### DropdownItem 未放在 DropdownMenu 中
 > **错误用法**: `<Dropdown>
   <Button>菜单</Button>
   <template #menu>

package/docs_for_llm/duration.doc.md

@@ -0,0 +1,76 @@
+# 时长选择 (Duration)
+
+用于购买、续费和策略配置场景的时长选择器，支持按月或按小时切换，并可配合内置刻度快速选择常用周期。
+
+**关键词**: duration, period, 时长选择, 购买时长, 按小时时长, 续费周期
+
+**使用场景**: 购买链路时长选择、资源续费时长选择、按小时设置临时资源周期
+
+## 导入语句
+```typescript
+import { Duration } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `number` | `undefined` | 否 | 当前选中的时长值 | - | - |
+| marksType | `string` | `"month"` | 否 | 刻度类型，控制内置 marks 的生成方式 | - | - |
+| type | `string` | `"month"` | 否 | 时长类型，通常为 month 或 hour | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 用户选择新的时长后触发，通常用于联动价格或到期时间计算。 | `value?: number` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `number` | 否 | - | 当前选中的时长值。 |
+
+## 使用示例
+### 续费时长选择
+**场景**: 在购买或续费流程中选择资源有效时长。
+
+按月展示常用刻度，并把结果同步到续费表单。
+
+**使用的 API**: 属性: modelValue, type, marksType | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Duration } from '@ksyun-internal/versatile';
+
+const duration = ref(3);
+</script>
+
+<template>
+  <Duration v-model="duration" type="month" marks-type="month" />
+</template>
+```
+
+### 按小时选择时长
+**场景**: 在临时测试机或弹性资源场景中按小时设置有效时长。
+
+在临时资源场景中切换到按小时的时长选择。
+
+**使用的 API**: 属性: modelValue, type, marksType | 事件: update:modelValue
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Duration } from '@ksyun-internal/versatile';
+
+const duration = ref(12);
+</script>
+
+<template>
+  <Duration v-model="duration" type="hour" marks-type="hour" />
+</template>
+```
+
+## 相关组件
+Slider, TimeRange
+

package/docs_for_llm/editable.doc.md

@@ -12,17 +12,23 @@ import { Editable } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `string` | `undefined` | 否 | 编辑的内容，可用 v-model 双向绑定 | `<Editable v-model="text" />` |
-| editing | `boolean` | `false` | 否 | 是否为编辑状态 | `<Editable :editing="isEditing" />` |
-| required | `boolean` | `true` | 否 | 是否规定不能为空 | `<Editable :required="false" />` |
-| validate | `((v: string) => boolean) | RegExp | string` | `undefined` | 否 | 验证规则，支持函数、正则表达式或正则字符串。函数返回 true 表示验证通过 | `<Editable :validate="(v) => v.length >= 3" /></Editable>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用编辑 | `<Editable disabled />` |
-| tip | `string` | `"编辑"` | 否 | 编辑按钮提示文案 | `<Editable tip="点击修改" />` |
-| trim | `boolean` | `true` | 否 | 是否去掉前后空白字符 | `<Editable :trim="false" />` |
-| invalid | `boolean` | `false` | 否 | 是否为验证失败状态 | `<Editable :invalid="hasError" />` |
-| rows | `string | number | 'auto' | AutoRows` | `1` | 否 | 是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象 | `<Editable :rows="3" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `undefined` | 否 | 编辑的内容，可用 v-model 双向绑定 | - | `<Editable v-model="text" />` |
+| editing | `boolean` | `false` | 否 | 是否为编辑状态 | - | `<Editable :editing="isEditing" />` |
+| required | `boolean` | `true` | 否 | 是否规定不能为空 | - | `<Editable :required="false" />` |
+| validate | `((v: string) => boolean) | RegExp | string` | `undefined` | 否 | 验证规则，支持函数、正则表达式或正则字符串。函数返回 true 表示验证通过 | - | `<Editable :validate="(v) => v.length >= 3" /></Editable>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用编辑 | - | `<Editable disabled />` |
+| placeholder | `string` | `undefined` | 否 | 编辑态输入框的占位提示文本 | - | `<Editable placeholder="请输入内容" />` |
+| title | `string` | `"编辑"` | 否 | 编辑按钮或输入区域的标题提示文本 | - | `<Editable title="修改名称" />` |
+| tip | `string` | `"编辑"` | 否 | 编辑按钮提示文案 | - | `<Editable tip="点击修改" />` |
+| trim | `boolean` | `true` | 否 | 是否去掉前后空白字符 | - | `<Editable :trim="false" />` |
+| invalid | `boolean` | `false` | 否 | 是否为验证失败状态 | - | `<Editable :invalid="hasError" />` |
+| errorTip | `string` | `"输入有误"` | 否 | 验证失败时显示的错误提示文案 | - | `<Editable error-tip="名称格式不正确" />` |
+| okText | `string` | `"确定"` | 否 | 确认按钮文案 | - | `<Editable ok-text="保存" />` |
+| cancelText | `string` | `"取消"` | 否 | 取消按钮文案 | - | `<Editable cancel-text="放弃" />` |
+| type | `string` | `undefined` | 否 | 编辑输入框类型，通常用于切换单行或其他输入模式 | - | `<Editable type="textarea" />` |
+| rows | `string | number | 'auto' | AutoRows` | `1` | 否 | 是否自动折行及行数控制，可为数字、'auto' 或包含 min/max 的对象 | - | `<Editable :rows="3" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -30,15 +36,28 @@ import { Editable } from '@king-design/vue';
 | change | `@change` | 当值改变时触发 | `newValue: string, oldValue: string` | `<Editable @change="handleChange" />` |
 | error | `@error` | 验证失败时触发 | `value: string` | `<Editable @error="handleError" />` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| newValue | `string` | 是 | - | 新的值 |
+| oldValue | `string` | 是 | - | 旧的值 |
+
+事件处理示例:
 ```typescript
 const handleChange = (newValue: string, oldValue: string) => {
   console.log(`值从 ${oldValue} 变为 ${newValue}`);
 };
 ```
 
-**error**:
+**error**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | 验证失败的值 |
+
+事件处理示例:
 ```typescript
 const handleError = (value: string) => {
   Message.error(`验证失败: ${value}`);
@@ -46,6 +65,7 @@ const handleError = (value: string) => {
 ```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 验证函数返回值错误
 > **错误用法**: `const validate = (v: string) => {
   if (v.length < 3) {
     return '长度不能小于3';
@@ -56,10 +76,12 @@ const handleError = (value: string) => {
 }`
 > **说明**: validate 函数应返回布尔值，true 表示验证通过，false 表示失败
 
+### rows 值类型错误
 > **错误用法**: `<Editable rows="3" />`
 > **正确写法**: `<Editable :rows="3" />`
 > **说明**: 当 rows 为数字时需要使用 v-bind (:rows)，字符串 '3' 会被当作字符串处理
 
+### 不了解 required 默认为 true
 > **错误用法**: `<Editable v-model="text" /> <!-- 用户无法保存空值 -->`
 > **正确写法**: `<Editable v-model="text" :required="false" /> <!-- 允许空值 -->`
 > **说明**: Editable 默认 required 为 true，如果允许空值需要显式设置 :required="false"

package/docs_for_llm/ellipsis.doc.md

@@ -12,23 +12,28 @@ import { Ellipsis } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| maxLines | `number` | `undefined` | 否 | 定义多行省略最大行数，不设置时为单行省略 | `<Ellipsis :maxLines="2">长文本内容</Ellipsis>` |
-| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | Tooltip 弹出的位置，默认在触发器正上方向上偏移 10px | `<Ellipsis position="bottom">长文本</Ellipsis>` |
-| disabled | `boolean` | `false` | 否 | 是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容） | `<Ellipsis disabled>长文本</Ellipsis>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| maxLines | `number` | `undefined` | 否 | 定义多行省略最大行数，不设置时为单行省略 | - | `<Ellipsis :maxLines="2">长文本内容</Ellipsis>` |
+| position | `Position | "left" | "bottom" | "right" | "top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` | 否 | Tooltip 弹出的位置，默认在触发器正上方向上偏移 10px | - | `<Ellipsis position="bottom">长文本</Ellipsis>` |
+| theme | `"dark" | "light"` | `"light"` | 否 | Tooltip 主题 | - | `<Ellipsis theme="dark">长文本</Ellipsis>` |
+| hoverable | `boolean` | `false` | 否 | 悬浮提示层是否在鼠标移入 Tooltip 内容时仍然保持显示 | - | `<Ellipsis hoverable>长文本</Ellipsis>` |
+| disabled | `boolean` | `false` | 否 | 是否禁用 Tooltip 提示（禁用后悬停不会显示完整内容） | - | `<Ellipsis disabled>长文本</Ellipsis>` |
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 容器未设置宽度
 > **错误用法**: `<Ellipsis>长文本内容</Ellipsis>`
 > **正确写法**: `<div style="width: 200px;">
   <Ellipsis>长文本内容</Ellipsis>
 </div>`
 > **说明**: Ellipsis 需要父容器有明确的宽度限制才能生效
 
+### maxLines 使用字符串而非数字
 > **错误用法**: `<Ellipsis maxLines="2">文本</Ellipsis>`
 > **正确写法**: `<Ellipsis :maxLines="2">文本</Ellipsis>`
 > **说明**: maxLines 是数字类型，需要使用 v-bind 语法
 
+### 误解 disabled 属性的含义
 > **错误用法**: `<Ellipsis disabled> <!-- 以为会禁用省略效果 -->`
 > **正确写法**: `<Ellipsis disabled> <!-- 实际是禁用 Tooltip，省略效果仍然存在 -->`
 > **说明**: disabled 只是禁用悬停时的 Tooltip 提示，文本省略效果仍然生效

package/docs_for_llm/filtertablefieldsdialog.doc.md

@@ -0,0 +1,99 @@
+# 表格字段筛选弹窗 (FilterTableFieldsDialog)
+
+用于自定义表格可见列的配置弹窗，常与 ProTable、标准列表页联动，让用户自行决定展示哪些字段。
+
+**关键词**: filter table fields dialog, column settings, 列筛选弹窗, 字段配置, 列展示设置, column chooser, 表格列管理, 隐藏列
+
+**使用场景**: 表格字段自定义、列表列设置、列显示偏好持久化、用户自定义列表展示字段
+
+## 导入语句
+```typescript
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `boolean` | `undefined` | 否 | 弹窗显示状态 | - | - |
+| fields | `TableFieldItem[]` | `undefined` | 是 | 可配置字段列表 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:modelValue | `@update:modelValue` | 弹窗开关状态变化时触发，用于控制列设置面板显隐。 | `value?: boolean` | - |
+| change:noCheckedColFields | `@change:noCheckedColFields` | 未勾选列集合变化时触发，便于把列配置持久化到本地或服务端。 | `value?: string[]` | - |
+
+### 事件参数说明
+**update:modelValue**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `boolean` | 否 | - | 当前列设置弹窗是否显示。 |
+
+**change:noCheckedColFields**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string[]` | 否 | - | 当前未勾选字段的 key 列表。 |
+
+## 使用示例
+### 列表列展示配置
+**场景**: 让用户自主配置列表页中要显示的列。
+
+通过字段列表控制表格哪些列默认展示。
+
+**使用的 API**: 属性: modelValue, fields | 事件: update:modelValue, change:noCheckedColFields
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+
+const visible = ref(true);
+const fields = [
+  { key: 'id', label: '实例 ID', checked: true },
+  { key: 'name', label: '实例名称', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+</script>
+
+<template>
+  <FilterTableFieldsDialog v-model="visible" :fields="fields" />
+</template>
+```
+
+### 持久化隐藏列配置
+**场景**: 让用户的列显示偏好在刷新页面后仍然保留。
+
+监听未勾选字段变化并保存到本地缓存。
+
+**使用的 API**: 属性: modelValue, fields | 事件: change:noCheckedColFields
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilterTableFieldsDialog } from '@ksyun-internal/versatile';
+
+const visible = ref(true);
+const fields = [
+  { key: 'id', label: '实例 ID', checked: true },
+  { key: 'zone', label: '可用区', checked: true },
+  { key: 'privateIp', label: '内网 IP', checked: false },
+];
+const handleChange = (hiddenFields: string[]) => {
+  localStorage.setItem('instance-hidden-fields', JSON.stringify(hiddenFields));
+};
+</script>
+
+<template>
+  <FilterTableFieldsDialog
+    v-model="visible"
+    :fields="fields"
+    @change:noCheckedColFields="handleChange"
+  />
+</template>
+```
+
+## 相关组件
+ProTable, LayoutStandardList
+

package/docs_for_llm/flex.doc.md

@@ -0,0 +1,74 @@
+# 弹性布局 (Flex)
+
+对 Flexbox 的业务友好封装，适合快速实现工具栏、卡片头部、表单辅助区等横向或纵向弹性布局。
+
+**关键词**: flex, layout, 弹性布局, 对齐, gap
+
+**使用场景**: 工具栏布局、信息块横向或纵向排列、纵向摘要区排版
+
+## 导入语句
+```typescript
+import { Flex } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| align | `'normal' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'` | `'normal'` | 否 | 交叉轴对齐方式 | - | - |
+| justify | `'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'` | `'normal'` | 否 | 主轴对齐方式 | - | - |
+| wrap | `'nowrap' | 'wrap' | 'wrap-reverse' | boolean` | `'nowrap'` | 否 | 换行方式 | - | - |
+| inline | `boolean` | `false` | 否 | 是否以行内 flex 容器渲染 | - | - |
+| vertical | `boolean` | `false` | 否 | 是否启用纵向布局 | - | - |
+| gap | `'small' | 'middle' | 'large' | string` | `'small'` | 否 | 子元素间距，支持预设值或自定义字符串 | - | - |
+| component | `string | Component` | `'div'` | 否 | 容器渲染的标签或组件类型 | - | - |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | Flex 容器内容 | `<Flex>...</Flex>` | - |
+
+## 使用示例
+### 工具栏左右分布布局
+**场景**: 搭建列表页顶部的标题和操作区。
+
+用 Flex 快速搭建常见的左右两端对齐工具栏。
+
+**使用的 API**: 属性: justify, align, gap
+
+```vue
+<script setup lang="ts">
+import { Flex } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <Flex justify="space-between" align="center" gap="middle">
+    <div>实例列表</div>
+    <div>刷新 / 导出 / 新建</div>
+  </Flex>
+</template>
+```
+
+### 纵向信息堆叠
+**场景**: 在详情摘要区纵向排列多条关键信息。
+
+使用 vertical 和 gap 快速搭建纵向信息区。
+
+**使用的 API**: 属性: vertical, gap
+
+```vue
+<script setup lang="ts">
+import { Flex } from '@ksyun-internal/versatile';
+</script>
+
+<template>
+  <Flex vertical gap="large">
+    <div>实例规格：4C8G</div>
+    <div>系统盘：100GB SSD</div>
+    <div>网络：经典网络</div>
+  </Flex>
+</template>
+```
+
+## 相关组件
+LayoutContent, LayoutListContent
+