king-design-analyzer 2.2.0 → 2.2.2

package/docs_for_llm/anchor.doc.md

@@ -0,0 +1,155 @@
+# 锚点导航 (Anchor)
+
+锚点导航组件，用于监听页面滚动位置并高亮当前锚点。支持自定义滚动容器、偏移量、横向或纵向模式，通常与 AnchorLink 配合使用。
+
+**关键词**: anchor, 锚点, 目录导航, 滚动定位, AnchorLink
+
+**使用场景**: 长页面章节导航、文档目录定位、详情页内容分区跳转
+
+## 导入语句
+```typescript
+import { Anchor, AnchorLink } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `string` | `undefined` | 否 | 当前激活的锚点 href，可用 v-model 双向绑定 | - | `<Anchor v-model="currentLink"></Anchor>` |
+| offset | `number` | `0` | 否 | 滚动定位偏移量，适合页面存在固定头部时使用 | - | `<Anchor :offset="64"></Anchor>` |
+| container | `string | HTMLElement` | `window` | 否 | 监听滚动的容器，可传选择器或 HTMLElement | - | `<Anchor container="#scroll-container"></Anchor>` |
+| threshold | `number` | `0` | 否 | 激活锚点时的阈值范围 | - | `<Anchor :threshold="20"></Anchor>` |
+| vertical | `boolean` | `true` | 否 | 是否使用纵向模式，默认开启；传 false 时为横向模式 | - | `<Anchor :vertical="false"></Anchor>` |
+| size | `Sizes` | `"default"` | 否 | 导航尺寸 | - | `<Anchor size="small"></Anchor>` |
+| duration | `number` | `300` | 否 | 点击锚点后的滚动动画时长，单位 ms | - | `<Anchor :duration="500"></Anchor>` |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| change | `@change` | 当前激活锚点变化时触发 | `href: string` | `<Anchor @change="handleChange"></Anchor>` |
+| click | `@click` | 点击锚点链接时触发 | `e: MouseEvent, link: AnchorLinkProps` | `<Anchor @click="handleClick"></Anchor>` |
+
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| href | `string` | 是 | - | 当前激活锚点 href |
+
+事件处理示例:
+```typescript
+const handleChange = (href: string) => {
+  console.log('当前锚点', href);
+};
+```
+
+**click**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| e | `MouseEvent` | 是 | - | 原生鼠标事件 |
+| link | `AnchorLinkProps` | 是 | - | 被点击的锚点配置 |
+
+事件处理示例:
+```typescript
+const handleClick = (e: MouseEvent, link: { href?: string }) => {
+  console.log('点击了锚点', link.href);
+};
+```
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 锚点导航内容，通常放置一个或多个 AnchorLink | `#default` | `<Anchor>
+  <AnchorLink href="section1" title="Section 1" />
+</Anchor>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 方法 (Methods)
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| getLinks | 获取当前 Anchor 中注册的所有 href | `-` | `string[]` |
+| getTargetElement | 根据 href 查找对应的目标元素 | `href: string` | `HTMLElement | null` |
+
+### 方法参数说明
+**getTargetElement**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| href | `string` | 是 | - | 目标锚点 href |
+
+调用示例:
+```typescript
+anchorRef.value?.getTargetElement('section2');
+```
+
+### 方法调用示例
+**getLinks**
+
+```typescript
+anchorRef.value?.getLinks();
+```
+
+**getTargetElement**
+
+```typescript
+anchorRef.value?.getTargetElement('section2');
+```
+
+## 使用示例
+### 基础用法
+**场景**: 为详情页长内容区域提供目录导航。
+
+在滚动容器旁边展示纵向锚点导航。
+
+**使用的 API**: 属性: value, container | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Anchor, AnchorLink } from '@king-design/vue';
+
+const current = ref('section1');
+</script>
+<template>
+  <div style="display: flex; gap: 20px; align-items: flex-start;">
+    <div id="scroll-container" style="height: 240px; overflow-y: auto; width: 360px; border: 1px solid #eee; padding: 12px;">
+      <section id="section1" style="height: 180px;">第一部分</section>
+      <section id="section2" style="height: 180px;">第二部分</section>
+      <section id="section3" style="height: 180px;">第三部分</section>
+    </div>
+    <Anchor v-model="current" container="#scroll-container">
+      <AnchorLink href="section1" title="第一部分" />
+      <AnchorLink href="section2" title="第二部分" />
+      <AnchorLink href="section3" title="第三部分" />
+    </Anchor>
+  </div>
+</template>
+```
+
+### 横向锚点
+**场景**: 在页面头部展示横向章节切换导航。
+
+将 Anchor 作为横向导航栏使用。
+
+**使用的 API**: 属性: vertical, offset | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Anchor, AnchorLink } from '@king-design/vue';
+</script>
+<template>
+  <Anchor :vertical="false" :offset="64">
+    <AnchorLink href="overview" title="概览" />
+    <AnchorLink href="spec" title="规格" />
+    <AnchorLink href="billing" title="计费" />
+  </Anchor>
+</template>
+```
+
+## 相关组件
+AnchorLink, Affix
+

package/docs_for_llm/anchorlink.doc.md

@@ -0,0 +1,75 @@
+# 锚点链接 (AnchorLink)
+
+Anchor 的子链接组件，用于声明单个锚点项。支持标题、禁用态以及嵌套层级，通常作为 Anchor 的默认插槽子节点出现。
+
+**关键词**: anchorlink, 锚点链接, 目录项, Anchor
+
+**使用场景**: Anchor 子导航项、目录树层级导航
+
+## 导入语句
+```typescript
+import { AnchorLink } from '@king-design/vue';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| href | `string` | `undefined` | 否 | 目标元素的 id 或锚点标识 | - | `<AnchorLink href="section1" title="第一部分" />` |
+| title | `string | VNode` | `undefined` | 否 | 链接标题内容 | - | `<AnchorLink href="billing" title="计费说明" />` |
+| disabled | `boolean` | `false` | 否 | 是否禁用当前锚点链接 | - | `<AnchorLink href="advanced" title="高级设置" disabled />` |
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 自定义链接内容；未设置 title 时可直接通过默认插槽传入文字或节点 | `#default` | `<AnchorLink href="section2">第二部分</AnchorLink>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 使用示例
+### 基础链接
+**场景**: 为章节导航添加单个可点击锚点项。
+
+在 Anchor 中声明单个锚点链接。
+
+**使用的 API**: 属性: href, title | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Anchor, AnchorLink } from '@king-design/vue';
+</script>
+<template>
+  <Anchor>
+    <AnchorLink href="section1" title="第一部分" />
+    <AnchorLink href="section2">第二部分</AnchorLink>
+  </Anchor>
+</template>
+```
+
+### 嵌套链接
+**场景**: 构建多级目录结构的页面导航。
+
+在纵向 Anchor 中构建层级导航。
+
+**使用的 API**: 属性: href, title | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Anchor, AnchorLink } from '@king-design/vue';
+</script>
+<template>
+  <Anchor>
+    <AnchorLink href="overview" title="概览">
+      <AnchorLink href="overview-base" title="基础信息" />
+      <AnchorLink href="overview-network" title="网络配置" />
+    </AnchorLink>
+    <AnchorLink href="billing" title="计费" />
+  </Anchor>
+</template>
+```
+
+## 相关组件
+Anchor
+

package/docs_for_llm/badge.doc.md

@@ -23,6 +23,11 @@ import { Badge } from '@king-design/vue';
 | --- | --- | --- | --- |
 | default | 徽标包裹的元素 | `#default` | `<Badge><Button>Button</Button></Badge>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 数字作为字符串传入
 > **错误用法**: `<Badge text="10" :max="9">`

package/docs_for_llm/breadcrumb.doc.md

@@ -19,16 +19,89 @@ import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| separator | 指定分隔符 | `undefined` | - |
+| separator | 指定分隔符 | `#separator` | `<Breadcrumb>
+  <template #separator>
+    自定义separator内容
+  </template>
+</Breadcrumb>` |
+
+### 插槽参数说明
+**separator**
+
+- 参数结构: 无参数
 
 ## 子组件 (Sub-Components)
 ### BreadcrumbItem
 面包屑项组件，用于定义导航路径中的每一项
 
+#### 属性 (Props)
 | 属性名 | 类型 | 说明 | 示例 |
 | --- | --- | --- | --- |
 | to | `string | object` | 指定超链接地址，支持字符串路径或 Vue Router 路由对象 | `<BreadcrumbItem to="/products">产品中心</BreadcrumbItem>` |
 
+#### 组合示例
+##### 带链接的面包屑
+**场景**: 创建可点击跳转的面包屑导航
+
+点击可跳转的面包屑项
+
+**命中的子组件 API**: 属性: to
+
+```vue
+<script setup lang="ts">
+import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbItem to="/">首页</BreadcrumbItem>
+    <BreadcrumbItem to="/products">产品中心</BreadcrumbItem>
+    <BreadcrumbItem>当前页面</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+```
+
+##### 配合 Vue Router
+**场景**: 配合 Vue Router 使用路由对象导航
+
+使用路由对象进行导航
+
+**命中的子组件 API**: 属性: to
+
+```vue
+<script setup lang="ts">
+import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbItem :to="{name: 'home'}">首页</BreadcrumbItem>
+    <BreadcrumbItem :to="{path: '/products'}">产品中心</BreadcrumbItem>
+    <BreadcrumbItem :to="{path: '/products/1', query: {id: 1}}">产品详情</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+```
+
+##### 带图标的首页
+**场景**: 使用图标表示首页
+
+首页项使用图标代替文字
+
+**命中的子组件 API**: 属性: to
+
+```vue
+<script setup lang="ts">
+import { Breadcrumb, BreadcrumbItem, Icon } from '@king-design/vue';
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbItem to="/">
+      <Icon class="k-icon-home" />
+    </BreadcrumbItem>
+    <BreadcrumbItem to="/products">产品中心</BreadcrumbItem>
+    <BreadcrumbItem>产品详情</BreadcrumbItem>
+  </Breadcrumb>
+</template>
+```
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 最后一项不应该有链接
 > **错误用法**: `<Breadcrumb>

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="[]" />`