king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/tour.doc.md

@@ -12,43 +12,63 @@ import { Tour, TourStep } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `number` | `0` | 否 | 当前显示的步骤索引（从0开始），可用 v-model 双向绑定 | `<Tour v-model="currentStep"></Tour>` |
-| visible | `boolean` | `true` | 否 | 是否展示引导组件 | `<Tour :visible="showTour"></Tour>` |
-| data | `TourStepData[]` | `undefined` | 否 | 步骤数据数组，用于数据驱动方式 | `<Tour :data="tourData"></Tour>` |
-| beforeChange | `(current: number) => boolean | Promise<boolean>` | `undefined` | 否 | 步骤切换前的回调函数，返回 false 可阻止切换，支持异步 | `<Tour :beforeChange="handleBeforeChange"></Tour>` |
-| maskClosable | `boolean` | `false` | 否 | 点击遮罩层是否可关闭 | `<Tour maskClosable></Tour>` |
-| closable | `boolean` | `true` | 否 | 是否展示关闭图标 | `<Tour :closable="false"></Tour>` |
-| doneText | `string` | `"完成"` | 否 | 完成按钮文本 | `<Tour doneText="结束引导"></Tour>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `number` | `0` | 否 | 当前显示的步骤索引（从0开始），可用 v-model 双向绑定 | - | `<Tour v-model="currentStep">` |
+| theme | `"dark" | "light"` | `"light"` | 否 | 引导浮层主题 | - | `<Tour theme="dark" />` |
+| visible | `boolean` | `true` | 否 | 是否展示引导组件 | - | `<Tour :visible="showTour">` |
+| data | `TourStepData[]` | `undefined` | 否 | 步骤数据数组，用于数据驱动方式 | - | `<Tour :data="tourData">` |
+| beforeChange | `(current: number) => boolean | Promise<boolean>` | `undefined` | 否 | 步骤切换前的回调函数，返回 false 可阻止切换，支持异步 | - | `<Tour :beforeChange="handleBeforeChange">` |
+| maskClosable | `boolean` | `false` | 否 | 点击遮罩层是否可关闭 | - | `<Tour maskClosable>` |
+| closable | `boolean` | `true` | 否 | 是否展示关闭图标 | - | `<Tour :closable="false">` |
+| doneText | `string` | `"完成"` | 否 | 完成按钮文本 | - | `<Tour doneText="结束引导">` |
+| showArrow | `boolean` | `true` | 否 | 是否展示指向目标元素的箭头 | - | `<Tour :showArrow="false" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
-| prev | `@prev` | 点击上一步按钮时触发 | `index: number` | `<Tour @prev="handlePrev"></Tour>` |
-| next | `@next` | 点击下一步按钮时触发 | `index: number` | `<Tour @next="handleNext"></Tour>` |
-| finish | `@finish` | 引导完成或关闭时触发 | `-` | `<Tour @finish="handleFinish"></Tour>` |
+| prev | `@prev` | 点击上一步按钮时触发 | `index: number` | `<Tour @prev="handlePrev">` |
+| next | `@next` | 点击下一步按钮时触发 | `index: number` | `<Tour @next="handleNext">` |
+| finish | `@finish` | 引导完成或关闭时触发 | `-` | `<Tour @finish="handleFinish">` |
+| positioned | `@positioned` | 当前步骤定位完成后触发，可用于读取最终计算位置或做埋点。 | `feedback: Feedback` | `<Tour @positioned="handlePositioned">` |
 
-### 事件处理函数示例
-**prev**:
+### 事件参数说明
+**prev**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| index | `number` | 是 | - | 当前步骤索引 |
+
+事件处理示例:
 ```typescript
 const handlePrev = (index: number) => {
   console.log(`从步骤 ${index} 返回`);
 };
 ```
 
-**next**:
+**next**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| index | `number` | 是 | - | 当前步骤索引 |
+
+事件处理示例:
 ```typescript
 const handleNext = (index: number) => {
   console.log(`从步骤 ${index} 前进`);
 };
 ```
 
-**finish**:
+**positioned**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| feedback | `Feedback` | 是 | - | 定位反馈对象，包含当前步骤最终落位信息。 |
+
+事件处理示例:
 ```typescript
-const handleFinish = () => {
-  showTour.value = false;
-  console.log('引导完成');
+const handlePositioned = (feedback: Feedback) => {
+  console.log('当前定位结果', feedback.placement);
 };
 ```
 
@@ -56,28 +76,105 @@ const handleFinish = () => {
 ### TourStep
 引导步骤组件，用于定义每个引导步骤的内容
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
-| target | `string | HTMLElement` | 目标元素，可以是 CSS 选择器或 DOM 元素。不指定则居中显示 | `<TourStep target="#btn1"></TourStep>` |
-| title | `string | VNode` | 步骤标题 | `<TourStep title="第一步"></TourStep>` |
-| content | `string | VNode` | 步骤内容 | `<TourStep content="这是引导说明"></TourStep>` |
-| position | `"top" | "right" | "bottom" | "left"` | 弹出位置 | `<TourStep position="top"></TourStep>` |
-| nextText | `string` | 下一步按钮文本 | `<TourStep nextText="继续"></TourStep>` |
-| prevText | `string` | 上一步按钮文本 | `<TourStep prevText="返回"></TourStep>` |
+| target | `string | HTMLElement` | 目标元素，可以是 CSS 选择器或 DOM 元素。不指定则居中显示 | `<TourStep target="#btn1">` |
+| title | `string | VNode` | 步骤标题 | `<TourStep title="第一步">` |
+| content | `string | VNode` | 步骤内容 | `<TourStep content="这是引导说明">` |
+| position | `"top" | "right" | "bottom" | "left"` | 弹出位置 | `<TourStep position="top">` |
+| nextText | `string` | 下一步按钮文本 | `<TourStep nextText="继续">` |
+| prevText | `string` | 上一步按钮文本 | `<TourStep prevText="返回">` |
+
+#### 组合示例
+##### 声明式步骤
+**场景**: 使用声明式方式定义引导步骤
+
+使用 TourStep 子组件定义步骤
+
+**命中的子组件 API**: 属性: target, title, content, position
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tour, TourStep, Button } from '@king-design/vue';
 
-**插槽**:
-- `undefined`: 自定义标题内容
-- `undefined`: 自定义底部内容
+const currentStep = ref(0);
+const showTour = ref(false);
+
+const startTour = () => {
+  showTour.value = true;
+  currentStep.value = 0;
+};
+
+const closeTour = () => {
+  showTour.value = false;
+};
+</script>
+<template>
+  <div>
+    <Button id="btn1">元素1</Button>
+    <Button id="btn2" style="margin-left: 20px;">元素2</Button>
+    <Tour v-model="currentStep" :visible="showTour" @finish="closeTour">
+      <TourStep target="#btn1" title="第一步" content="第一步说明" position="left" />
+      <TourStep target="#btn2" title="第二步" position="top">第二步说明</TourStep>
+    </Tour>
+    <Button @click="startTour">启动引导</Button>
+  </div>
+</template>
+```
+
+##### 居中引导
+**场景**: 无目标元素的居中显示引导
+
+无目标元素的居中显示
+
+**命中的子组件 API**: 属性: title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tour, TourStep, Button } from '@king-design/vue';
+
+const currentStep = ref(0);
+const showTour = ref(false);
+
+const startTour = () => {
+  showTour.value = true;
+  currentStep.value = 0;
+};
+
+const closeTour = () => {
+  showTour.value = false;
+};
+</script>
+<template>
+  <div>
+    <Tour v-model="currentStep" :visible="showTour" @finish="closeTour">
+      <TourStep title="欢迎页面">
+        <span>没有指定目标元素时，引导弹窗会居中显示。</span>
+      </TourStep>
+      <TourStep title="功能介绍">
+        <span>适合用于展示全局性的引导说明。</span>
+      </TourStep>
+    </Tour>
+    <Button @click="startTour">启动无目标引导</Button>
+  </div>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### target 选择器未匹配到元素
 > **错误用法**: `<TourStep target="btn1" /> <!-- 缺少 # -->`
 > **正确写法**: `<TourStep target="#btn1" />`
 > **说明**: target 使用 CSS 选择器，ID 选择器需要加 # 前缀
 
+### 未正确控制 visible 状态
 > **错误用法**: `<Tour :visible="true" /> <!-- 无法关闭 -->`
 > **正确写法**: `<Tour :visible="showTour" @finish="showTour = false" />`
 > **说明**: 需要通过响应式变量和 finish 事件控制显示隐藏
 
+### 步骤索引从 1 开始
 > **错误用法**: `const currentStep = ref(1); // 期望从第一步开始`
 > **正确写法**: `const currentStep = ref(0); // 第一步索引为 0`
 > **说明**: 步骤索引从 0 开始，0 表示第一步

package/docs_for_llm/transfer.doc.md

@@ -12,68 +12,134 @@ import { Transfer } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| data | `TransferDataItem[]` | `undefined` | 是 | 需要展示的列表数据，包含 label、key、disabled 属性 | `<Transfer :data="data"></Transfer>` |
-| value | `string[]` | `[]` | 否 | 已选择的 key 数组，可用 v-model 双向绑定 | `<Transfer v-model="selectedKeys"></Transfer>` |
-| keyName | `string` | `"key"` | 否 | 指定数据的 key 属性名 | `<Transfer keyName="id"></Transfer>` |
-| labelName | `string` | `"label"` | 否 | 指定数据的 label 属性名 | `<Transfer labelName="name"></Transfer>` |
-| leftCheckedKeys | `string[]` | `[]` | 否 | 左侧勾选的节点 key 数组，可用 v-model:leftCheckedKeys | `<Transfer v-model:leftCheckedKeys="leftChecked"></Transfer>` |
-| rightCheckedKeys | `string[]` | `[]` | 否 | 右侧勾选的节点 key 数组，可用 v-model:rightCheckedKeys | `<Transfer v-model:rightCheckedKeys="rightChecked"></Transfer>` |
-| filterable | `boolean` | `false` | 否 | 是否启用过滤功能 | `<Transfer filterable></Transfer>` |
-| filter | `(data: TransferDataItem, keywords: string) => boolean` | `(data, keywords) => data.label.includes(keywords)` | 否 | 自定义过滤函数 | `<Transfer :filter="customFilter"></Transfer>` |
-| placeholder | `string` | `"请输入"` | 否 | 过滤输入框的占位文案 | `<Transfer placeholder="搜索..."></Transfer>` |
-| leftKeywords | `string` | `undefined` | 否 | 左侧筛选关键字 | `<Transfer v-model:leftKeywords="leftSearch"></Transfer>` |
-| rightKeywords | `string` | `undefined` | 否 | 右侧筛选关键字 | `<Transfer v-model:rightKeywords="rightSearch"></Transfer>` |
-| leftTitle | `string | VNode` | `"请选择"` | 否 | 左侧标题 | `<Transfer leftTitle="待选列表"></Transfer>` |
-| rightTitle | `string | VNode` | `"已选择"` | 否 | 右侧标题 | `<Transfer rightTitle="已选列表"></Transfer>` |
-| enableAdd | `() => boolean` | `undefined` | 否 | 控制右箭头按钮的可用状态 | `<Transfer :enableAdd="canAdd"></Transfer>` |
-| enableRemove | `() => boolean` | `undefined` | 否 | 控制左箭头按钮的可用状态 | `<Transfer :enableRemove="canRemove"></Transfer>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| data | `TransferDataItem[]` | `undefined` | 是 | 需要展示的列表数据，包含 label、key、disabled 属性 | - | `<Transfer :data="data"></Transfer>` |
+| value | `string[]` | `[]` | 否 | 已选择的 key 数组，可用 v-model 双向绑定 | - | `<Transfer v-model="selectedKeys"></Transfer>` |
+| keyName | `string` | `"key"` | 否 | 指定数据的 key 属性名 | - | `<Transfer keyName="id"></Transfer>` |
+| labelName | `string` | `"label"` | 否 | 指定数据的 label 属性名 | - | `<Transfer labelName="name"></Transfer>` |
+| leftCheckedKeys | `string[]` | `[]` | 否 | 左侧勾选的节点 key 数组，可用 v-model:leftCheckedKeys | - | `<Transfer v-model:leftCheckedKeys="leftChecked"></Transfer>` |
+| rightCheckedKeys | `string[]` | `[]` | 否 | 右侧勾选的节点 key 数组，可用 v-model:rightCheckedKeys | - | `<Transfer v-model:rightCheckedKeys="rightChecked"></Transfer>` |
+| filterable | `boolean` | `false` | 否 | 是否启用过滤功能 | - | `<Transfer filterable></Transfer>` |
+| filter | `(data: TransferDataItem, keywords: string) => boolean` | `(data, keywords) => data.label.includes(keywords)` | 否 | 自定义过滤函数 | - | `<Transfer :filter="customFilter"></Transfer>` |
+| placeholder | `string` | `"请输入"` | 否 | 过滤输入框的占位文案 | - | `<Transfer placeholder="搜索..."></Transfer>` |
+| leftKeywords | `string` | `undefined` | 否 | 左侧筛选关键字 | - | `<Transfer v-model:leftKeywords="leftSearch"></Transfer>` |
+| rightKeywords | `string` | `undefined` | 否 | 右侧筛选关键字 | - | `<Transfer v-model:rightKeywords="rightSearch"></Transfer>` |
+| leftTitle | `string | VNode` | `"请选择"` | 否 | 左侧标题 | - | `<Transfer leftTitle="待选列表"></Transfer>` |
+| rightTitle | `string | VNode` | `"已选择"` | 否 | 右侧标题 | - | `<Transfer rightTitle="已选列表"></Transfer>` |
+| enableAdd | `() => boolean` | `undefined` | 否 | 控制右箭头按钮的可用状态 | - | `<Transfer :enableAdd="canAdd"></Transfer>` |
+| enableRemove | `() => boolean` | `undefined` | 否 | 控制左箭头按钮的可用状态 | - | `<Transfer :enableRemove="canRemove"></Transfer>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | add | `@add` | 点击右箭头按钮时触发 | `-` | `<Transfer @add="handleAdd"></Transfer>` |
 | remove | `@remove` | 点击左箭头按钮时触发 | `-` | `<Transfer @remove="handleRemove"></Transfer>` |
+| page | `@page` | 启用分页时，左右面板任一侧翻页后触发。 | `model: 'left' | 'right', data: PaginationChangeData` | `<Transfer :pagination="true" @page="handlePage"></Transfer>` |
 
-### 事件处理函数示例
-**add**:
-```typescript
-const handleAdd = () => {
-  console.log('数据已添加到右侧');
-};
-```
+### 事件参数说明
+**page**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| model | `'left' | 'right'` | 是 | - | 触发翻页的面板标识，`left` 表示候选列表，`right` 表示已选列表。 |
+| data | `PaginationChangeData` | 是 | - | 当前分页变更数据，通常包含页码和每页数量。 |
 
-**remove**:
+事件处理示例:
 ```typescript
-const handleRemove = () => {
-  console.log('数据已移回左侧');
+const handlePage = (model: 'left' | 'right', data: { value: number; limit: number }) => {
+  console.log(model, data.value, data.limit);
 };
 ```
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| header | 自定义整个头部内容 | `undefined` | - |
-| filter | 自定义检索内容 | `undefined` | - |
-| list | 自定义整个列表内容 | `undefined` | - |
-| label | 自定义每一项的渲染函数，类似于label属性 | `undefined` | - |
+| header | 自定义整个头部内容 | `#header="type"` | `<Transfer :data="data">
+  <template #header="type">
+    <span>{{ type === 'left' ? '待选列表' : '已选列表' }}</span>
+  </template>
+</Transfer>` |
+| filter | 自定义检索内容 | `#filter="type"` | `<Transfer :data="data">
+  <template #filter="type">
+    <span>{{ type === 'left' ? '搜索左侧' : '搜索右侧' }}</span>
+  </template>
+</Transfer>` |
+| list | 自定义整个列表内容 | `#list="type"` | `<Transfer :data="data">
+  <template #list="type">
+    <div>当前面板: {{ type }}</div>
+  </template>
+</Transfer>` |
+| label | 自定义每一项的渲染函数，类似于 label 属性 | `#label="[data, key, type]"` | `<Transfer :data="data">
+  <template #label="[data, key, type]">
+    <span>{{ data.label }} - {{ type }} - {{ key }}</span>
+  </template>
+</Transfer>` |
+
+### 插槽参数说明
+**header**
+
+- 参数结构: #header="type"
+- 参数列表: `type: 'left' | 'right'`
+
+**filter**
+
+- 参数结构: #filter="type"
+- 参数列表: `type: 'left' | 'right'`
+
+**list**
+
+- 参数结构: #list="type"
+- 参数列表: `type: 'left' | 'right'`
+
+**label**
+
+- 参数结构: #label="[data, key, type]"
+- 参数列表: `data: TransferDataItem`、`key: string | number`、`type: 'left' | 'right'`
 
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | getData | 获取右侧已选择的节点数据 | `-` | `TransferDataItem[]` |
-| getCheckedData | 获取勾选的节点数据 | `-` | `TransferDataItem[]` |
+| getCheckedData | 获取勾选的节点数据 | `model: 'left' | 'right'` | `TransferDataItem[]` |
+
+### 方法参数说明
+**getCheckedData**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| model | `'left' | 'right'` | 是 | - | 指定读取左侧候选列表或右侧已选列表中的勾选数据。 |
+
+调用示例:
+```typescript
+const leftChecked = transferRef.value?.getCheckedData('left');
+```
+
+### 方法调用示例
+**getData**
+
+```typescript
+const rightData = transferRef.value?.getData();
+```
+
+**getCheckedData**
+
+```typescript
+const leftChecked = transferRef.value?.getCheckedData('left');
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### data 中缺少 key 属性
 > **错误用法**: `const data = [{ label: '选项1' }]; // 缺少 key`
 > **正确写法**: `const data = [{ label: '选项1', key: 1 }];`
 > **说明**: 每个数据项必须有 key 属性（或通过 keyName 指定的属性）
 
+### value 类型错误
 > **错误用法**: `const value = ref(0); // 应该是数组`
 > **正确写法**: `const value = ref<number[]>([]);`
 > **说明**: value 必须是数组类型
 
+### keyName 与实际属性名不匹配
 > **错误用法**: `const data = [{ id: 1, name: '张三' }];
 <Transfer :data="data" /> <!-- 默认使用 key，但数据中是 id -->`
 > **正确写法**: `const data = [{ id: 1, name: '张三' }];
@@ -222,7 +288,7 @@ const value = ref<string[]>([]);
 
 使用方法获取穿梭框数据
 
-**使用的 API**: 属性: data, value
+**使用的 API**: 属性: data, value | 方法: getData
 
 ```vue
 <script setup lang="ts">

package/docs_for_llm/tree.doc.md

@@ -12,23 +12,23 @@ import { Tree } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| data | `TreeDataItem[]` | `undefined` | 是 | 要渲染的树形数据 | `<Tree :data="treeData"></Tree>` |
-| expandedKeys | `K[]` | `undefined` | 否 | 指定展开的节点 key 数组，可用 v-model:expandedKeys | `<Tree v-model:expandedKeys="expandedKeys"></Tree>` |
-| defaultExpandAll | `boolean` | `false` | 否 | 是否默认展开所有节点 | `<Tree defaultExpandAll></Tree>` |
-| checkbox | `boolean` | `false` | 否 | 是否展示复选框 | `<Tree checkbox></Tree>` |
-| checkedKeys | `K[]` | `undefined` | 否 | 指定勾选的节点 key 数组，可用 v-model:checkedKeys | `<Tree checkbox v-model:checkedKeys="checkedKeys"></Tree>` |
-| uncorrelated | `boolean` | `false` | 否 | 父子 checkbox 选中状态是否互不关联 | `<Tree checkbox uncorrelated></Tree>` |
-| selectable | `boolean` | `true` | 否 | 节点是否可选中 | `<Tree :selectable="false"></Tree>` |
-| selectedKeys | `K[]` | `undefined` | 否 | 指定选中的节点 key 数组，可用 v-model:selectedKeys | `<Tree v-model:selectedKeys="selectedKeys"></Tree>` |
-| multiple | `boolean` | `false` | 否 | selectedKeys 是否支持多选 | `<Tree multiple></Tree>` |
-| filter | `(data: TreeDataItem, node: TreeNode) => boolean` | `undefined` | 否 | 节点过滤函数，返回 true 则展示，否则过滤掉 | `<Tree :filter="filterFn"></Tree>` |
-| load | `(node: TreeNode) => Promise<void> | void` | `undefined` | 否 | 异步加载节点数据的函数 | `<Tree :load="loadData"></Tree>` |
-| showLine | `boolean` | `true` | 否 | 是否展示左侧对齐线 | `<Tree :showLine="false"></Tree>` |
-| draggable | `boolean` | `false` | 否 | 是否支持拖拽 | `<Tree draggable></Tree>` |
-| allowDrag | `(node: TreeNode) => boolean` | `undefined` | 否 | 指定哪些节点可拖拽 | `<Tree draggable :allowDrag="allowDragFn"></Tree>` |
-| allowDrop | `(node: TreeNode, srcNode: TreeNode) => boolean` | `undefined` | 否 | 指定哪些节点可以插入子节点 | `<Tree draggable :allowDrop="allowDropFn"></Tree>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| data | `TreeDataItem[]` | `undefined` | 是 | 要渲染的树形数据 | - | `<Tree :data="treeData"></Tree>` |
+| expandedKeys | `K[]` | `undefined` | 否 | 指定展开的节点 key 数组，可用 v-model:expandedKeys | - | `<Tree v-model:expandedKeys="expandedKeys"></Tree>` |
+| defaultExpandAll | `boolean` | `false` | 否 | 是否默认展开所有节点 | - | `<Tree defaultExpandAll></Tree>` |
+| checkbox | `boolean` | `false` | 否 | 是否展示复选框 | - | `<Tree checkbox></Tree>` |
+| checkedKeys | `K[]` | `undefined` | 否 | 指定勾选的节点 key 数组，可用 v-model:checkedKeys | - | `<Tree checkbox v-model:checkedKeys="checkedKeys"></Tree>` |
+| uncorrelated | `boolean` | `false` | 否 | 父子 checkbox 选中状态是否互不关联 | - | `<Tree checkbox uncorrelated></Tree>` |
+| selectable | `boolean` | `true` | 否 | 节点是否可选中 | - | `<Tree :selectable="false"></Tree>` |
+| selectedKeys | `K[]` | `undefined` | 否 | 指定选中的节点 key 数组，可用 v-model:selectedKeys | - | `<Tree v-model:selectedKeys="selectedKeys"></Tree>` |
+| multiple | `boolean` | `false` | 否 | selectedKeys 是否支持多选 | - | `<Tree multiple></Tree>` |
+| filter | `(data: TreeDataItem, node: TreeNode) => boolean` | `undefined` | 否 | 节点过滤函数，返回 true 则展示，否则过滤掉 | - | `<Tree :filter="filterFn"></Tree>` |
+| load | `(node: TreeNode) => Promise<void> | void` | `undefined` | 否 | 异步加载节点数据的函数 | - | `<Tree :load="loadData"></Tree>` |
+| showLine | `boolean` | `true` | 否 | 是否展示左侧对齐线 | - | `<Tree :showLine="false"></Tree>` |
+| draggable | `boolean` | `false` | 否 | 是否支持拖拽 | - | `<Tree draggable></Tree>` |
+| allowDrag | `(node: TreeNode) => boolean` | `undefined` | 否 | 指定哪些节点可拖拽 | - | `<Tree draggable :allowDrag="allowDragFn"></Tree>` |
+| allowDrop | `(node: TreeNode, srcNode: TreeNode) => boolean` | `undefined` | 否 | 指定哪些节点可以插入子节点 | - | `<Tree draggable :allowDrop="allowDropFn"></Tree>` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
@@ -37,38 +37,143 @@ import { Tree } from '@king-design/vue';
 | denydrag | `@denydrag` | 拖拽不允许拖拽的节点时触发 | `node: TreeNode` | `<Tree @denydrag="handleDenyDrag"></Tree>` |
 | denydrop | `@denydrop` | 插入到不允许插入的节点时触发 | `node: TreeNode, srcNode: TreeNode, mode: TreeMode` | `<Tree @denydrop="handleDenyDrop"></Tree>` |
 
-### 事件处理函数示例
-**dragend**:
+### 事件参数说明
+**dragend**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| data | `DragEndData` | 是 | - | 拖拽数据，包含 srcNode、toNode、mode |
+
+事件处理示例:
 ```typescript
 const handleDragEnd = (data) => {
   console.log(`${data.srcNode.data.label} -> ${data.toNode.data.label}`);
 };
 ```
 
+**denydrag**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| node | `TreeNode` | 是 | - | 被拒绝拖拽的节点 |
+
+**denydrop**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| node | `TreeNode` | 是 | - | 目标节点 |
+| srcNode | `TreeNode` | 是 | - | 源节点 |
+| mode | `TreeMode` | 是 | - | 插入模式 |
+
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| label | 自定义节点渲染内容 | `undefined` | - |
+| label | 自定义节点渲染内容 | `#label="[data, node, index]"` | `<Tree :data="treeData">
+  <template #label="[data, node]">
+    <span>{{ data.label }}</span>
+    <em v-if="node.isLeaf">叶子</em>
+  </template>
+</Tree>` |
+
+### 插槽参数说明
+**label**
+
+- 参数结构: #label="[data, node, index]"
+- 参数列表: `data: TreeDataItem`、`node: TreeNode`、`index: number`
 
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getCheckedData | 获取勾选的节点数据 | `-` | `TreeDataItem[]` |
+| getCheckedData | 获取勾选的节点数据 | `leafOnly?: boolean` | `TreeDataItem[]` |
 | getSelectedData | 获取选中的节点数据 | `-` | `TreeDataItem[]` |
-| expand | 展开指定节点 | `-` | `void` |
-| shrink | 收起指定节点 | `-` | `void` |
+| expand | 展开指定节点 | `key: K` | `void` |
+| shrink | 收起指定节点 | `key: K` | `void` |
 | expandAll | 展开所有节点 | `-` | `void` |
 | getNodes | 返回一级节点数组 | `-` | `TreeNode[]` |
 
+### 方法参数说明
+**getCheckedData**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| leafOnly | `boolean` | 否 | `false` | 是否只返回叶子节点；传 `true` 时会过滤掉父级节点。 |
+
+调用示例:
+```typescript
+const checkedData = treeRef.value?.getCheckedData();
+```
+
+**expand**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| key | `K` | 是 | - | 要展开的节点 key |
+
+调用示例:
+```typescript
+treeRef.value?.expand('node1');
+```
+
+**shrink**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| key | `K` | 是 | - | 要收起的节点 key |
+
+调用示例:
+```typescript
+treeRef.value?.shrink('node1');
+```
+
+### 方法调用示例
+**getCheckedData**
+
+```typescript
+const checkedData = treeRef.value?.getCheckedData();
+```
+
+**getSelectedData**
+
+```typescript
+const selectedData = treeRef.value?.getSelectedData();
+```
+
+**expand**
+
+```typescript
+treeRef.value?.expand('node1');
+```
+
+**shrink**
+
+```typescript
+treeRef.value?.shrink('node1');
+```
+
+**expandAll**
+
+```typescript
+treeRef.value?.expandAll();
+```
+
+**getNodes**
+
+```typescript
+const nodes = treeRef.value?.getNodes();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
+### data 中缺少 key 属性
 > **错误用法**: `const data = [{ label: '节点1' }]; // 缺少 key`
 > **正确写法**: `const data = [{ label: '节点1', key: 'node1' }];`
 > **说明**: 每个节点必须有唯一的 key 属性
 
+### 异步加载时未设置 children 为空数组
 > **错误用法**: `const data = [{ label: '父节点', key: 'parent' }]; // 无 children，不会显示展开箭头`
 > **正确写法**: `const data = [{ label: '父节点', key: 'parent', children: [] }];`
 > **说明**: 异步加载节点需要设置 children 为空数组，才会显示展开箭头
 
+### checkbox 模式下 checkedKeys 类型错误
 > **错误用法**: `const checkedKeys = ref('node1'); // 应该是数组`
 > **正确写法**: `const checkedKeys = ref<string[]>(['node1']);`
 > **说明**: checkedKeys 必须是数组类型
@@ -118,7 +223,7 @@ const data = reactive([
 
 带复选框的树形控件
 
-**使用的 API**: 属性: data, checkbox, checkedKeys, expandedKeys
+**使用的 API**: 属性: data, checkbox, checkedKeys, expandedKeys | 方法: getCheckedData
 
 ```vue
 <script setup lang="ts">