king-design-analyzer 2.2.0 → 2.2.1

package/docs_for_llm/button.doc.md

@@ -47,6 +47,11 @@ import { Button, ButtonGroup } from '@king-design/vue';
 | --- | --- | --- | --- |
 | default | 按钮内容 | `#default` | `<Button>按钮文字</Button>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -55,10 +60,37 @@ import { Button, ButtonGroup } from '@king-design/vue';
 | disable | 禁用按钮 | `-` | `void` |
 | enable | 启用按钮 | `-` | `void` |
 
+### 方法调用示例
+**showLoading**
+
+```typescript
+const buttonRef = ref<InstanceType<typeof Button>>();
+buttonRef.value?.showLoading();</InstanceType>
+```
+
+**hideLoading**
+
+```typescript
+buttonRef.value?.hideLoading();
+```
+
+**disable**
+
+```typescript
+buttonRef.value?.disable();
+```
+
+**enable**
+
+```typescript
+buttonRef.value?.enable();
+```
+
 ## 子组件 (Sub-Components)
 ### ButtonGroup
 按钮组容器，可实现按钮组合、单选组、复选组等功能
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | vertical | `boolean` | 是否垂直排列按钮组 | `<ButtonGroup vertical>
@@ -78,6 +110,31 @@ import { Button, ButtonGroup } from '@king-design/vue';
 </ButtonGroup>` |
 | btnWidth | `number | string` | 指定按钮组每个按钮的固定宽度 | `<ButtonGroup btnWidth="100px"></ButtonGroup>` |
 
+#### 组合示例
+##### 单选按钮组
+**场景**: 创建一个城市选择的单选按钮组，支持双向绑定
+
+使用ButtonGroup实现单选功能
+
+**命中的子组件 API**: 属性: checkType
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, ButtonGroup } from '@king-design/vue';
+
+const selected = ref('beijing');
+</script>
+<template>
+  <ButtonGroup checkType="radio" v-model="selected">
+    <Button value="beijing">北京</Button>
+    <Button value="shanghai">上海</Button>
+    <Button value="guangzhou">广州</Button>
+  </ButtonGroup>
+  <p>当前选中: {{ selected }}</p>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### type 属性值拼写错误
 > **错误用法**: `<Button type="primay">`

package/docs_for_llm/buttonlink.doc.md

@@ -14,7 +14,16 @@ import { ButtonLink } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 按钮内容 | `<ButtonLink>...</ButtonLink>` | - |
+| default | 按钮内容 | `<ButtonLink>...</ButtonLink>` | `<ButtonLink>
+  <template <ButtonLink>...</ButtonLink>>
+    自定义default内容
+  </template>
+</ButtonLink>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 详情页中的文档跳转入口

package/docs_for_llm/card.doc.md

@@ -21,19 +21,66 @@ import { Card, CardColumn } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| header | 扩展整个头部内容 | `undefined` | - |
-| title | 扩展头部标题内容 | `undefined` | - |
-| extra | 扩展头部附加内容 | `undefined` | - |
+| header | 扩展整个头部内容 | `#header` | `<Card>
+  <template #header>头部内容</template>
+</Card>` |
+| title | 扩展头部标题内容 | `#title` | `<Card>
+  <template #title>自定义标题</template>
+</Card>` |
+| extra | 扩展头部附加内容 | `#extra` | `<Card>
+  <template #extra>
+    自定义extra内容
+  </template>
+</Card>` |
+
+### 插槽参数说明
+**header**
+
+- 参数结构: 无参数
+
+**title**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### CardColumn
 卡片列组件，用于实现卡片内的多列布局
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | width | `string` | 列宽，必须带单位 | `<CardColumn width="100px">内容</CardColumn>` |
 | center | `boolean` | 该列内容是否居中 | `<CardColumn center>居中内容</CardColumn>` |
 
+#### 组合示例
+##### 多列布局
+**场景**: 创建带有头像和信息的多列卡片
+
+使用 CardColumn 实现多列布局
+
+**命中的子组件 API**: 属性: width, center
+
+```vue
+<script setup lang="ts">
+import { Card, CardColumn } from '@king-design/vue';
+</script>
+<template>
+  <Card title="用户信息">
+    <CardColumn width="100px" center>
+      <img src="avatar.png" style="width: 80px; height: 80px; border-radius: 50%;" />
+    </CardColumn>
+    <CardColumn>
+      <h4>用户名称</h4>
+      <p>这是用户的详细描述信息</p>
+    </CardColumn>
+  </Card>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 使用不存在的 type 值
 > **错误用法**: `<Card type="bordered">内容</Card>`

package/docs_for_llm/cardcontent.doc.md

@@ -30,3 +30,24 @@ import { CardContent } from '@ksyun-internal/versatile';
 | prepend | 扩展卡片操作栏上面部分内容 | `<template #prepend>...</template>` | `<CardContent><template #prepend><Alert>提示信息</Alert></template></CardContent>` |
 | extra | 扩展头部附加内容 | `<template #extra>...</template>` | `<CardContent title="标题"><template #extra><Link>查看更多</Link></template></CardContent>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**opLeft**
+
+- 参数结构: 无参数
+
+**opRight**
+
+- 参数结构: 无参数
+
+**prepend**
+
+- 参数结构: 无参数
+
+**extra**
+
+- 参数结构: 无参数
+

package/docs_for_llm/carousel.doc.md

@@ -24,10 +24,81 @@ import { Carousel, CarouselItem } from '@king-design/vue';
 ### CarouselItem
 走马灯的内容项
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `string` | 定义该项的唯一值，若不设置默认为索引 "$0", "$1"... | `<CarouselItem value="item1"></CarouselItem>` |
 
+#### 组合示例
+##### 基础用法
+**场景**: 基本的轮播展示
+
+基本的走马灯效果
+
+```vue
+<script setup lang="ts">
+import { Carousel, CarouselItem } from '@king-design/vue';
+</script>
+<template>
+  <Carousel style="height: 200px;">
+    <CarouselItem>
+      <div class="demo-item">1</div>
+    </CarouselItem>
+    <CarouselItem>
+      <div class="demo-item">2</div>
+    </CarouselItem>
+    <CarouselItem>
+      <div class="demo-item">3</div>
+    </CarouselItem>
+  </Carousel>
+</template>
+<style>
+.demo-item {
+  height: 100%;
+  background: #36cfc9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+}
+</style>
+```
+
+##### 自动轮播
+**场景**: 首页 Banner 自动轮播
+
+设置 autoplay 属性自动播放
+
+```vue
+<script setup lang="ts">
+import { Carousel, CarouselItem } from '@king-design/vue';
+</script>
+<template>
+  <Carousel :autoplay="3000" style="height: 200px;">
+    <CarouselItem>Page 1</CarouselItem>
+    <CarouselItem>Page 2</CarouselItem>
+  </Carousel>
+</template>
+```
+
+##### 淡入淡出
+**场景**: 使用淡入淡出效果的轮播
+
+使用 effect="fade" 切换效果
+
+```vue
+<script setup lang="ts">
+import { Carousel, CarouselItem } from '@king-design/vue';
+</script>
+<template>
+  <Carousel effect="fade" style="height: 200px;">
+    <CarouselItem>Page 1</CarouselItem>
+    <CarouselItem>Page 2</CarouselItem>
+  </Carousel>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 未设置 Carousel 高度
 > **错误用法**: `<Carousel>...</Carousel>`

package/docs_for_llm/cascader.doc.md

@@ -56,6 +56,49 @@ import { Cascader } from '@king-design/vue';
 | --- | --- | --- | --- | --- |
 | value | `any` | 是 | - | 当前选中的值 |
 
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| value | 自定义单选模式下的已选路径展示内容 | `#value="[value, label]"` | `<Cascader v-model="selectedCity" :data="options">
+  <template #value="[value, label]">
+    <span>{{ label }} ({{ value.join(' / ') }})</span>
+  </template>
+</Cascader>` |
+| values | 自定义多选模式下的已选路径展示内容 | `#values="[values, labels]"` | `<Cascader v-model="selectedCities" :data="options" multiple>
+  <template #values="[values, labels]">
+    <span>已选 {{ labels.length }} 条路径</span>
+  </template>
+</Cascader>` |
+| prefix | 扩展选择框前缀内容 | `#prefix` | `<Cascader :data="options">
+  <template #prefix>
+    <span class="k-icon-location"></span>
+  </template>
+</Cascader>` |
+| suffix | 扩展选择框后缀内容 | `#suffix` | `<Cascader :data="options">
+  <template #suffix>
+    <span>路径</span>
+  </template>
+</Cascader>` |
+
+### 插槽参数说明
+**value**
+
+- 参数结构: #value="[value, label]"
+- 参数列表: `value: V[]`、`label: string`
+
+**values**
+
+- 参数结构: #values="[values, labels]"
+- 参数列表: `values: V[][]`、`labels: string[]`
+
+**prefix**
+
+- 参数结构: 无参数
+
+**suffix**
+
+- 参数结构: 无参数
+
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -63,6 +106,25 @@ import { Cascader } from '@king-design/vue';
 | hide | 主动关闭级联选择面板。 | `-` | `void` |
 | position | 重新计算级联选择面板的位置。 | `-` | `void` |
 
+### 方法调用示例
+**show**
+
+```typescript
+cascaderRef.value?.show();
+```
+
+**hide**
+
+```typescript
+cascaderRef.value?.hide();
+```
+
+**position**
+
+```typescript
+cascaderRef.value?.position();
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 数据未加载时显示空白
 > **错误用法**: `<Cascader :data="[]" />`

package/docs_for_llm/collapse.doc.md

@@ -19,24 +19,154 @@ import { Collapse, CollapseItem } from '@king-design/vue';
 | arrow | `"right" | "left"` | `"right"` | 否 | 指定箭头位置 | - | `<Collapse arrow="left"></Collapse>` |
 | noBorder | `boolean` | `false` | 否 | 是否展示无边框的简洁样式 | - | `<Collapse noBorder></Collapse>` |
 
-## 插槽 (Slots)
-| 插槽名 | 说明 | 模板写法 | 示例 |
-| --- | --- | --- | --- |
-| title | 扩展标题 | `undefined` | - |
-
 ## 子组件 (Sub-Components)
 ### CollapseItem
 折叠面板项组件，用于定义每个可折叠的内容区域
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | value | `string` | 当前 CollapseItem 的取值，默认会使用 $ + 索引的组合 | `<CollapseItem value="1" title="面板标题">内容</CollapseItem>` |
 | title | `string | VNode` | 标题内容 | `<CollapseItem title="面板标题">内容</CollapseItem>` |
 | disabled | `boolean` | 是否禁用 | `<CollapseItem disabled title="禁用面板">内容</CollapseItem>` |
 
-**事件**:
-- `@show`: 展开时触发
-- `@hide`: 收起时触发
+#### 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| show | `@show` | 展开时触发 | `collapseItem: CollapseItem` | `<CollapseItem @show="handlePanelShow"></CollapseItem>` |
+| hide | `@hide` | 收起时触发 | `collapseItem: CollapseItem` | `<CollapseItem @hide="handlePanelHide"></CollapseItem>` |
+
+##### CollapseItem 事件参数说明
+**show**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| collapseItem | `CollapseItem` | 是 | - | 当前折叠项实例 |
+
+事件处理示例:
+```typescript
+const expandedPanels = ref<string[]>([]);
+
+const handlePanelShow = (collapseItem) => {
+  const panelValue = String(collapseItem.value);
+  if (!expandedPanels.value.includes(panelValue)) {
+    expandedPanels.value.push(panelValue);
+  }
+};
+```
+
+**hide**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| collapseItem | `CollapseItem` | 是 | - | 当前折叠项实例 |
+
+事件处理示例:
+```typescript
+const expandedPanels = ref<string[]>([]);
+
+const handlePanelHide = (collapseItem) => {
+  expandedPanels.value = expandedPanels.value.filter((item) => item !== String(collapseItem.value));
+};
+```
+
+#### 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| title | 扩展标题 | `#title` | `<CollapseItem value="custom">
+  <template #title>
+    自定义标题
+  </template>
+  自定义内容
+</CollapseItem>` |
+
+##### 插槽参数说明
+**title**
+
+- 参数结构: 无参数
+
+#### 组合示例
+##### 监听展开收起
+**场景**: 监听折叠面板的展开和收起事件
+
+监听面板的展开和收起事件
+
+**命中的子组件 API**: 属性: value, title | 事件: show, hide
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem, Message } from '@king-design/vue';
+
+const activeKeys = ref([]);
+
+const handleShow = () => {
+  Message.success('面板已展开');
+};
+
+const handleHide = () => {
+  Message.info('面板已收起');
+};
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="面板一" @show="handleShow" @hide="handleHide">
+      内容一
+    </CollapseItem>
+  </Collapse>
+</template>
+```
+
+##### 禁用面板
+**场景**: 禁用某个折叠面板项
+
+禁用某个折叠项
+
+**命中的子组件 API**: 属性: value, title, disabled
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem } from '@king-design/vue';
+
+const activeKeys = ref([]);
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="可用面板">内容一</CollapseItem>
+    <CollapseItem value="2" title="禁用面板" disabled>内容二</CollapseItem>
+  </Collapse>
+</template>
+```
+
+##### 基础用法
+**场景**: 创建基本的折叠面板
+
+基本的折叠面板
+
+**命中的子组件 API**: 属性: value, title
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Collapse, CollapseItem } from '@king-design/vue';
+
+const activeKeys = ref(['1']);
+</script>
+<template>
+  <Collapse v-model="activeKeys">
+    <CollapseItem value="1" title="面板一">
+      这是面板一的内容
+    </CollapseItem>
+    <CollapseItem value="2" title="面板二">
+      这是面板二的内容
+    </CollapseItem>
+    <CollapseItem value="3" title="面板三">
+      这是面板三的内容
+    </CollapseItem>
+  </Collapse>
+</template>
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### value 类型错误，使用字符串而非数组

package/docs_for_llm/configprovider.doc.md

@@ -0,0 +1,77 @@
+# 全局配置提供器 (ConfigProvider)
+
+配置上下文提供器，用于向包裹区域内的组件统一注入类名前缀和波纹动画配置。适合在局部区域隔离样式命名空间或关闭交互波纹效果。
+
+**关键词**: configprovider, 配置提供器, classNamePrefix, disableWave
+
+**使用场景**: 局部样式前缀隔离、统一关闭波纹动画、子树级组件配置注入
+
+## 导入语句
+```typescript
+import { ConfigProvider } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `{ classNamePrefix?: string; disableWave?: boolean }` | `{}` | 否 | 传递给内部组件的配置对象 | - | `<ConfigProvider :value="{ classNamePrefix: 'my', disableWave: true }"></ConfigProvider>` |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 需要继承配置的子组件内容 | `#default` | `<ConfigProvider :value="config"><Button>按钮</Button></ConfigProvider>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 自定义类名前缀
+**场景**: 在微前端或局部主题隔离场景中定制组件类名前缀。
+
+为局部组件树设置独立类名前缀。
+
+**使用的 API**: 属性: value | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Button, ButtonGroup, ConfigProvider } from '@king-design/vue';
+
+const config = ref({ classNamePrefix: 'custom' });
+</script>
+<template>
+  <ConfigProvider :value="config">
+    <ButtonGroup>
+      <Button>默认按钮</Button>
+      <Button type="primary">主要按钮</Button>
+    </ButtonGroup>
+  </ConfigProvider>
+</template>
+```
+
+### 关闭波纹效果
+**场景**: 在需要弱化交互动画或统一交互体验时关闭波纹效果。
+
+统一禁用子组件的波纹动画效果。
+
+**使用的 API**: 属性: value | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Button, ConfigProvider } from '@king-design/vue';
+</script>
+<template>
+  <ConfigProvider :value="{ disableWave: true }">
+    <div style="display: flex; gap: 8px;">
+      <Button>普通按钮</Button>
+      <Button type="primary">无波纹按钮</Button>
+    </div>
+  </ConfigProvider>
+</template>
+```
+
+## 相关组件
+Button, Notification
+

package/docs_for_llm/copyrow.doc.md

@@ -23,7 +23,16 @@ import { CopyRow } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 自定义行内容 | `<CopyRow>...</CopyRow>` | - |
+| default | 自定义行内容 | `<CopyRow>...</CopyRow>` | `<CopyRow>
+  <template <CopyRow>...</CopyRow>>
+    自定义default内容
+  </template>
+</CopyRow>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 接口地址一键复制

package/docs_for_llm/datepicker.doc.md

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