king-design-analyzer 2.2.0 → 2.2.2

package/docs_for_llm/timeline.doc.md

@@ -16,17 +16,95 @@ import { Timeline, TimelineItem } from '@king-design/vue';
 | --- | --- | --- | --- |
 | default | 时间轴内容，通常由多个 TimelineItem 组成。 | `<Timeline>...</Timeline>` | `<Timeline><TimelineItem>创建完成</TimelineItem><TimelineItem>审核通过</TimelineItem></Timeline>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 子组件 (Sub-Components)
 ### TimelineItem
 时间轴节点项。
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | type | `"primary" | "warning" | "danger" | "success"` | 节点状态类型。 | `<TimelineItem type="success">发布成功</TimelineItem>` |
 | size | `"large" | "default" | "small" | "mini"` | 节点尺寸。 | `<TimelineItem size="small">日志记录</TimelineItem>` |
 
-**插槽**:
-- `<template #dot>...</template>`: 自定义时间轴节点圆点。
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| dot | 自定义时间轴节点圆点。 | `<template #dot>...</template>` | `<TimelineItem><template #dot><Icon class="k-icon-check" /></template>发布完成</TimelineItem>` |
+
+##### 插槽参数说明
+**dot**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 自定义节点
+**场景**: 用图标增强时间轴状态表达
+
+通过 dot 插槽渲染图标或编号。
+
+**命中的子组件 API**: 属性: type | 插槽: dot
+
+```vue
+<script setup lang="ts">
+import { Icon, Timeline, TimelineItem } from '@king-design/vue';
+</script>
+<template>
+  <Timeline>
+    <TimelineItem>
+      <template #dot>
+        <Icon class="k-icon-play-circle" />
+      </template>
+      服务启动
+    </TimelineItem>
+    <TimelineItem type="success">
+      <template #dot>
+        <Icon class="k-icon-check" />
+      </template>
+      健康检查通过
+    </TimelineItem>
+  </Timeline>
+</template>
+```
+
+##### 不同状态节点
+**场景**: 用时间轴展示状态变更
+
+用颜色区分不同阶段。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem type="primary">等待执行</TimelineItem>
+    <TimelineItem type="warning">处理中</TimelineItem>
+    <TimelineItem type="danger">执行失败</TimelineItem>
+    <TimelineItem type="success">重新执行成功</TimelineItem>
+  </Timeline>
+</template>
+```
+
+##### 基础用法
+**场景**: 展示任务处理过程
+
+按时间顺序展示操作记录。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<template>
+  <Timeline>
+    <TimelineItem>2026-04-20 10:00 创建任务</TimelineItem>
+    <TimelineItem>2026-04-20 10:10 分配负责人</TimelineItem>
+    <TimelineItem type="success">2026-04-20 10:30 处理完成</TimelineItem>
+  </Timeline>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 在 Timeline 中直接写普通 div，而不是 TimelineItem

package/docs_for_llm/timepicker.doc.md

@@ -86,6 +86,25 @@ const handleSelecting = (value, confirmed) => {
 | hide | 主动关闭时间选择面板。 | `-` | `void` |
 | position | 重新计算时间选择面板的位置。 | `-` | `void` |
 
+### 方法调用示例
+**show**
+
+```typescript
+timepickerRef.value?.show();
+```
+
+**hide**
+
+```typescript
+timepickerRef.value?.hide();
+```
+
+**position**
+
+```typescript
+timepickerRef.value?.position();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 范围选择时 value 类型错误
 > **错误用法**: `const time = ref('');

package/docs_for_llm/tip.doc.md

@@ -41,6 +41,36 @@ const handleClose = (e: MouseEvent) => {
 };
 ```
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 自定义标题内容 | `<template #title>...</template>` | `<Tip>
+  <template <template #title>...</template>>自定义标题</template>
+</Tip>` |
+| close | 自定义关闭按钮内容 | `<template #close>...</template>` | `<Tip>
+  <template <template #close>...</template>>
+    自定义close内容
+  </template>
+</Tip>` |
+| icon | 自定义Icon内容 | `<template #icon>...</template>` | `<Tip>
+  <template <template #icon>...</template>>
+    自定义icon内容
+  </template>
+</Tip>` |
+
+### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+**close**
+
+- 参数结构: 无参数
+
+**icon**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 使用 closable 但未处理关闭逻辑
 > **错误用法**: `<Tip closable>提示</Tip> <!-- 点击关闭按钮不会隐藏 -->`

package/docs_for_llm/tooltip.doc.md

@@ -50,6 +50,18 @@ const handlePositioned = (feedback: Feedback) => {
 };
 ```
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| content | 自定义提示内容 | `<template #content>...</template>` | `<Tooltip>
+  <template <template #content>...</template>>自定义内容</template>
+</Tooltip>` |
+
+### 插槽参数说明
+**content**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -64,18 +76,52 @@ const handlePositioned = (feedback: Feedback) => {
 | --- | --- | --- | --- | --- |
 | shouldFocus | `boolean` | 否 | - | 显示后是否尝试把焦点移动到弹层内容。 |
 
+调用示例:
+```typescript
+tooltipRef.value?.show(true);
+```
+
 **hide**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
 | immediately | `boolean` | 是 | - | 是否立即隐藏，用于手动控制点击确认型 Tooltip 的关闭时机。 |
 
+调用示例:
+```typescript
+tooltipRef.value?.hide(true);
+```
+
 **position**
 
 | 参数 | 类型 | 必填 | 默认值 | 说明 |
 | --- | --- | --- | --- | --- |
 | callback | `(feedback: Feedback) => void` | 否 | - | 定位完成后的回调，可读取最终 placement 和坐标。 |
 
+调用示例:
+```typescript
+tooltipRef.value?.position((feedback) => console.log(feedback.placement));
+```
+
+### 方法调用示例
+**show**
+
+```typescript
+tooltipRef.value?.show(true);
+```
+
+**hide**
+
+```typescript
+tooltipRef.value?.hide(true);
+```
+
+**position**
+
+```typescript
+tooltipRef.value?.position((feedback) => console.log(feedback.placement));
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未提供触发元素
 > **错误用法**: `<Tooltip content="提示" />`

package/docs_for_llm/tour.doc.md

@@ -76,6 +76,7 @@ const handlePositioned = (feedback: Feedback) => {
 ### TourStep
 引导步骤组件，用于定义每个引导步骤的内容
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | target | `string | HTMLElement` | 目标元素，可以是 CSS 选择器或 DOM 元素。不指定则居中显示 | `<TourStep target="#btn1">` |
@@ -85,6 +86,107 @@ const handlePositioned = (feedback: Feedback) => {
 | nextText | `string` | 下一步按钮文本 | `<TourStep nextText="继续">` |
 | prevText | `string` | 上一步按钮文本 | `<TourStep prevText="返回">` |
 
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| header | 自定义步骤头部内容，可覆盖标题区域。 | `#header` | `<TourStep>
+  <template #header>
+    <strong>欢迎使用控制台</strong>
+  </template>
+</TourStep>` |
+| footer | 自定义步骤底部操作区，可覆盖默认的步骤指示和按钮。 | `#footer` | `<TourStep>
+  <template #footer>
+    <Button size="small">跳过引导</Button>
+    <Button type="primary" size="small">继续</Button>
+  </template>
+</TourStep>` |
+
+##### 插槽参数说明
+**header**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 声明式步骤
+**场景**: 使用声明式方式定义引导步骤
+
+使用 TourStep 子组件定义步骤
+
+**命中的子组件 API**: 属性: target, title, content, position
+
+```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>
+    <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" /> <!-- 缺少 # -->`

package/docs_for_llm/transfer.doc.md

@@ -55,10 +55,47 @@ const handlePage = (model: 'left' | 'right', data: { value: number; limit: numbe
 ## 插槽 (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)
 | 方法名 | 说明 | 参数 | 返回值 |
@@ -73,6 +110,24 @@ const handlePage = (model: 'left' | 'right', data: { value: number; limit: numbe
 | --- | --- | --- | --- | --- |
 | 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`

package/docs_for_llm/tree.doc.md

@@ -68,7 +68,18 @@ const handleDragEnd = (data) => {
 ## 插槽 (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)
 | 方法名 | 说明 | 参数 | 返回值 |
@@ -87,18 +98,70 @@ const handleDragEnd = (data) => {
 | --- | --- | --- | --- | --- |
 | 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`

package/docs_for_llm/treeselect.doc.md

@@ -48,6 +48,49 @@ import { TreeSelect } from '@king-design/vue';
 | show | `@show` | 菜单弹出时触发 | `-` | `<TreeSelect @show="handleShow">` |
 | hide | `@hide` | 菜单隐藏时触发 | `-` | `<TreeSelect @hide="handleHide">` |
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| value | 自定义单选模式下的已选值展示内容 | `#value="[value, label]"` | `<TreeSelect v-model="value" :data="treeData">
+  <template #value="[value, label]">
+    <span>{{ label }} ({{ value }})</span>
+  </template>
+</TreeSelect>` |
+| values | 自定义多选模式下的已选值展示内容 | `#values="[values, labels]"` | `<TreeSelect v-model="values" :data="treeData" multiple>
+  <template #values="[values, labels]">
+    <span>已选 {{ labels.length }} 项</span>
+  </template>
+</TreeSelect>` |
+| prefix | 扩展选择框前缀内容 | `#prefix` | `<TreeSelect :data="treeData">
+  <template #prefix>
+    <span class="k-icon-search"></span>
+  </template>
+</TreeSelect>` |
+| suffix | 扩展选择框后缀内容 | `#suffix` | `<TreeSelect :data="treeData">
+  <template #suffix>
+    <span class="suffix-tip">树</span>
+  </template>
+</TreeSelect>` |
+
+### 插槽参数说明
+**value**
+
+- 参数结构: #value="[value, label]"
+- 参数列表: `value: K`、`label: string`
+
+**values**
+
+- 参数结构: #values="[values, labels]"
+- 参数列表: `values: K[]`、`labels: string[]`
+
+**prefix**
+
+- 参数结构: 无参数
+
+**suffix**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -56,6 +99,31 @@ import { TreeSelect } from '@king-design/vue';
 | position | 重新计算下拉树面板的位置。 | `-` | `void` |
 | expandAll | 展开所有节点 | `-` | `void` |
 
+### 方法调用示例
+**show**
+
+```typescript
+treeSelectRef.value?.show();
+```
+
+**hide**
+
+```typescript
+treeSelectRef.value?.hide();
+```
+
+**position**
+
+```typescript
+treeSelectRef.value?.position();
+```
+
+**expandAll**
+
+```typescript
+treeSelectRef.value?.expandAll();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### data 中缺少 key 属性
 > **错误用法**: `const data = [{ label: '节点1' }]; // 缺少 key`

package/docs_for_llm/upload.doc.md

@@ -87,11 +87,39 @@ const handleError = (err, file, files) => {
 };
 ```
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| content | 自定义上传触发区域内容，例如按钮、拖拽提示文案等。 | `<template #content>...</template>` | `<Upload action="/api/upload">
+  <template #content>
+    <Button type="primary">选择文件</Button>
+  </template>
+</Upload>` |
+| tip | 自定义底部提示内容，通常用于说明支持的文件类型、大小或数量限制。 | `<template #tip>...</template>` | `<Upload action="/api/upload">
+  <template #tip>只能上传 JPG/PNG 文件，且不超过 500KB</template>
+</Upload>` |
+
+### 插槽参数说明
+**content**
+
+- 参数结构: 无参数
+
+**tip**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
 | submit | 手动上传时，调用该方法开始上传 | `-` | `void` |
 
+### 方法调用示例
+**submit**
+
+```typescript
+uploadRef.value?.submit();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未设置 action 属性
 > **错误用法**: `<Upload /> <!-- 缺少上传地址 -->`

package/docs_for_llm/vdialog.doc.md

@@ -68,7 +68,32 @@ import { VDialog } from '@ksyun-internal/versatile';
     <!-- 完全自定义弹窗结构 -->
   </template>
 </Dialog>` |
-| trigger | 自定义触发按钮或触发区域 | `<template #trigger>...</template>` | - |
+| trigger | 自定义触发按钮或触发区域 | `<template #trigger>...</template>` | `<VDialog>
+  <template <template #trigger>...</template>>
+    自定义trigger内容
+  </template>
+</VDialog>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**header**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+
+**content**
+
+- 参数结构: 无参数
+
+**trigger**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 受控表单弹窗