king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/aksk.doc.md

@@ -0,0 +1,111 @@
+# AK/SK 配置 (AKSK)
+
+用于录入 AccessKey / SecretKey 并控制是否沿用原始凭证的业务表单组件，常见于任务同步、数据接入和跨账号授权场景。
+
+**关键词**: aksk, access key, secret key, 凭证配置, ak sk, 云服务凭证
+
+**使用场景**: 云服务凭证录入、数据集或任务凭证配置、切换原始凭证或自定义凭证
+
+## 导入语句
+```typescript
+import { AKSK } from '@ksyun-internal/versatile';
+```
+
+## 属性 (Props)
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| ak | `string | null` | `undefined` | 否 | 当前 AccessKey | - | - |
+| sk | `string | null` | `undefined` | 否 | 当前 SecretKey | - | - |
+| isUseOriginal | `boolean | null` | `false` | 否 | 是否使用原始 AK/SK | - | - |
+| isShowUseOriginal | `boolean | null` | `false` | 否 | 是否展示“使用原始凭证”选项 | - | - |
+| inDataSet | `boolean | null` | `undefined` | 否 | 是否处于数据集场景 | - | - |
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| update:ak | `@update:ak` | AccessKey 变更时触发，便于和父级表单状态保持同步。 | `value?: string | null` | - |
+| update:sk | `@update:sk` | SecretKey 变更时触发，通常用于同步加密存储前的表单值。 | `value?: string | null` | - |
+| update:isUseOriginal | `@update:isUseOriginal` | “使用原始凭证”开关变化时触发，可据此切换输入项显隐。 | `value?: boolean | null` | - |
+
+### 事件参数说明
+**update:ak**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | null` | 否 | - | 当前输入的 AccessKey 值。 |
+
+**update:sk**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string | null` | 否 | - | 当前输入的 SecretKey 值。 |
+
+**update:isUseOriginal**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `boolean | null` | 否 | - | 当前是否使用原始凭证。 |
+
+## 使用示例
+### 任务配置中的 AK/SK 凭证录入
+**场景**: 录入任务访问外部对象存储或服务所需的访问凭证。
+
+通过多个 v-model 同步 AccessKey、SecretKey 和原始凭证开关。
+
+**使用的 API**: 属性: ak, sk, isUseOriginal, isShowUseOriginal | 事件: update:ak, update:sk, update:isUseOriginal
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AKSK } from '@ksyun-internal/versatile';
+
+const ak = ref('AKLTxxxxxxxx');
+const sk = ref('********');
+const isUseOriginal = ref(false);
+</script>
+
+<template>
+  <AKSK
+    v-model:ak="ak"
+    v-model:sk="sk"
+    v-model:isUseOriginal="isUseOriginal"
+    :is-show-use-original="true"
+  />
+</template>
+```
+
+### 切换是否沿用原始凭证
+**场景**: 在数据同步任务中切换使用系统默认凭证或自定义凭证。
+
+结合 update:isUseOriginal 在不同凭证来源之间切换。
+
+**使用的 API**: 属性: ak, sk, isUseOriginal, isShowUseOriginal, inDataSet | 事件: update:isUseOriginal
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AKSK } from '@ksyun-internal/versatile';
+
+const ak = ref('AKLTxxxx');
+const sk = ref('******');
+const isUseOriginal = ref(true);
+const handleToggle = (value: boolean) => {
+  console.log('use original credentials:', value);
+};
+</script>
+
+<template>
+  <AKSK
+    v-model:ak="ak"
+    v-model:sk="sk"
+    v-model:isUseOriginal="isUseOriginal"
+    :is-show-use-original="true"
+    :in-data-set="true"
+    @update:isUseOriginal="handleToggle"
+  />
+</template>
+```
+
+## 相关组件
+FormItemInput
+

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/az.doc.md

@@ -2,9 +2,9 @@
 
 可用区（Availability Zone）选择组件。
 
-**关键词**: az, zone, 可用区, 机房
+**关键词**: az, zone, 可用区, 机房, availability zone, az select, 可用区选择
 
-**使用场景**: 购买页选择可用区
+**使用场景**: 购买页选择可用区、与地域联动切换机房、资源部署位置选择、高可用架构中选择目标可用区
 
 ## 导入语句
 ```typescript
@@ -12,21 +12,27 @@ import { AZ } from '@ksyun-internal/versatile';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| modelValue | `string` | `undefined` | 否 | 选中的可用区编码 | `<AZ v-model="azCode" />` |
-| regionCode | `string` | `undefined` | 否 | 所属地域编码 | `<AZ regionCode="cn-beijing-6" />` |
-| packages | `AZ[]` | `undefined` | 否 | 可用区配置列表（通常从Region组件联动获取，或通过API获取） | `<AZ :packages="packages" />` |
-| showLearnMore | `boolean` | `true` | 否 | 是否显示了解更多 | - |
-| learnMoreUrl | `number` | `undefined` | 否 | 了解更多链接ID | - |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `string` | `undefined` | 否 | 选中的可用区编码 | - | `<AZ v-model="azCode" />` |
+| regionCode | `string` | `undefined` | 否 | 所属地域编码 | - | `<AZ regionCode="cn-beijing-6" />` |
+| packages | `AZ[]` | `undefined` | 否 | 可用区配置列表（通常从Region组件联动获取，或通过API获取） | - | `<AZ :packages="packages" />` |
+| showLearnMore | `boolean` | `true` | 否 | 是否显示了解更多 | - | - |
+| learnMoreUrl | `number` | `undefined` | 否 | 了解更多链接ID | - | - |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | change | `update:modelValue` | 可用区改变时触发 | `value: string` | `<AZ @update:modelValue="v => console.log(v)" /></AZ>` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `string` | 是 | - | 新的AZCode |
+
+事件处理示例:
 ```typescript
 (val) => { console.log(val); }
 ```

package/docs_for_llm/badge.doc.md

@@ -12,18 +12,24 @@ import { Badge } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| text | `string | number` | `undefined` | 否 | 显示的文本内容或数字。如果不传，则显示为一个小红点。 | `<Badge :text="10"></Badge>` |
-| max | `number` | `undefined` | 否 | 显示的最大数值，超过最大值会显示为 max+。仅在 text 为 numeric 时生效。 | `<Badge :text="100" :max="99"></Badge>` |
-| disabled | `boolean` | `false` | 否 | 是否隐藏徽标 | `<Badge disabled></Badge>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| text | `string | number` | `undefined` | 否 | 显示的文本内容或数字。如果不传，则显示为一个小红点。 | - | `<Badge :text="10"></Badge>` |
+| max | `number` | `undefined` | 否 | 显示的最大数值，超过最大值会显示为 max+。仅在 text 为 numeric 时生效。 | - | `<Badge :text="100" :max="99"></Badge>` |
+| disabled | `boolean` | `false` | 否 | 是否隐藏徽标 | - | `<Badge disabled></Badge>` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
 | default | 徽标包裹的元素 | `#default` | `<Badge><Button>Button</Button></Badge>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 数字作为字符串传入
 > **错误用法**: `<Badge text="10" :max="9">`
 > **正确写法**: `<Badge :text="10" :max="9">`
 > **说明**: 如果 text 传入的是字符串 "10"，max 属性可能无法正确比较。建议数字类型使用 v-bind 传入。

package/docs_for_llm/billtypes.doc.md

@@ -2,9 +2,9 @@
 
 计费类型选择组件，支持按量付费、包年包月等多种计费模式展示与选择。
 
-**关键词**: bill, price, charge, 计费, 价格
+**关键词**: bill, price, charge, 计费, 价格, 计费模式, 按量付费, 包年包月
 
-**使用场景**: 购买页选择计费模式
+**使用场景**: 购买页选择计费模式、切换按量和包年包月、试用与正式计费方式选择
 
 ## 导入语句
 ```typescript
@@ -12,21 +12,27 @@ import { BillTypes } from '@ksyun-internal/versatile';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| modelValue | `number` | `undefined` | 否 | 选中的计费类型ID | `<BillTypes v-model="billType" />` |
-| packages | `BillType[]` | `undefined` | 否 | 计费类型配置列表 | `<BillTypes :packages="packages" />` |
-| showTrial | `boolean` | `false` | 否 | 是否显示试用选项 | `<BillTypes showTrial />` |
-| showLearnMore | `boolean` | `true` | 否 | 是否显示了解更多链接 | `<BillTypes showLearnMore />` |
-| learnMoreUrl | `number` | `undefined` | 否 | 了解更多链接的帮助文档ID | `<BillTypes :learnMoreUrl="123" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| modelValue | `number` | `undefined` | 否 | 选中的计费类型ID | - | `<BillTypes v-model="billType" />` |
+| packages | `BillType[]` | `undefined` | 否 | 计费类型配置列表 | - | `<BillTypes :packages="packages" />` |
+| showTrial | `boolean` | `false` | 否 | 是否显示试用选项 | - | `<BillTypes showTrial />` |
+| showLearnMore | `boolean` | `true` | 否 | 是否显示了解更多链接 | - | `<BillTypes showLearnMore />` |
+| learnMoreUrl | `number` | `undefined` | 否 | 了解更多链接的帮助文档ID | - | `<BillTypes :learnMoreUrl="123" />` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
 | change | `update:modelValue` | 选中值改变时触发 | `value: number` | `<BillTypes @update:modelValue="v => console.log(v)" /></BillTypes>` |
 
-### 事件处理函数示例
-**change**:
+### 事件参数说明
+**change**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| value | `number` | 是 | - | 新的计费类型ID |
+
+事件处理示例:
 ```typescript
 (val) => { console.log(val); }
 ```

package/docs_for_llm/breadcrumb.doc.md

@@ -12,24 +12,98 @@ import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| separator | `string` | `undefined` | 否 | 指定分隔符 | `<Breadcrumb separator=">"></Breadcrumb>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| separator | `string` | `undefined` | 否 | 指定分隔符 | - | `<Breadcrumb separator=">"></Breadcrumb>` |
 
 ## 插槽 (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>
   <BreadcrumbItem to="/">首页</BreadcrumbItem>
   <BreadcrumbItem to="/current">当前页面</BreadcrumbItem>
@@ -40,6 +114,7 @@ import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
 </Breadcrumb>`
 > **说明**: 面包屑最后一项表示当前页面，不应该设置链接
 
+### 直接使用 Breadcrumb 未包含 BreadcrumbItem
 > **错误用法**: `<Breadcrumb>
   <span>首页</span>
   <span>产品</span>
@@ -50,6 +125,7 @@ import { Breadcrumb, BreadcrumbItem } from '@king-design/vue';
 </Breadcrumb>`
 > **说明**: Breadcrumb 组件必须配合 BreadcrumbItem 子组件使用
 
+### 路由对象未使用绑定语法
 > **错误用法**: `<BreadcrumbItem to="{path: '/home'}">首页</BreadcrumbItem>`
 > **正确写法**: `<BreadcrumbItem :to="{path: '/home'}">首页</BreadcrumbItem>`
 > **说明**: 传入对象类型时需要使用 v-bind (:to) 语法