king-design-analyzer 2.2.0 → 2.2.1

package/dist/index.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkTA3SV4SP_js = require('./chunk-TA3SV4SP.js');
+var chunkJJ6AB4ZH_js = require('./chunk-JJ6AB4ZH.js');
 require('./chunk-YTEYDSDW.js');
-var chunkCJGGFVQJ_js = require('./chunk-CJGGFVQJ.js');
-var chunkSZYVGYKK_js = require('./chunk-SZYVGYKK.js');
-var chunkEYKZY2F3_js = require('./chunk-EYKZY2F3.js');
-var chunkCR3GC4H3_js = require('./chunk-CR3GC4H3.js');
+var chunk4WXOYU2N_js = require('./chunk-4WXOYU2N.js');
+var chunkJNRGUR3O_js = require('./chunk-JNRGUR3O.js');
+var chunkV5N65MRP_js = require('./chunk-V5N65MRP.js');
+var chunkDHLWNT53_js = require('./chunk-DHLWNT53.js');
 require('./chunk-KF5YBEM5.js');
 require('./chunk-JSBRDJBE.js');
 
@@ -13,33 +13,33 @@ require('./chunk-JSBRDJBE.js');
 
 Object.defineProperty(exports, "validateCompilation", {
   enumerable: true,
-  get: function () { return chunkTA3SV4SP_js.validateCompilation; }
+  get: function () { return chunkJJ6AB4ZH_js.validateCompilation; }
 });
 Object.defineProperty(exports, "validateCode", {
   enumerable: true,
-  get: function () { return chunkCJGGFVQJ_js.validateCode; }
+  get: function () { return chunk4WXOYU2N_js.validateCode; }
 });
 Object.defineProperty(exports, "validateCodeSync", {
   enumerable: true,
-  get: function () { return chunkCJGGFVQJ_js.validateCodeSync; }
+  get: function () { return chunk4WXOYU2N_js.validateCodeSync; }
 });
 Object.defineProperty(exports, "analyzeCodeWithAST", {
   enumerable: true,
-  get: function () { return chunkSZYVGYKK_js.analyzeCodeWithAST; }
+  get: function () { return chunkJNRGUR3O_js.analyzeCodeWithAST; }
 });
 Object.defineProperty(exports, "componentRegistry", {
   enumerable: true,
-  get: function () { return chunkSZYVGYKK_js.componentRegistry; }
+  get: function () { return chunkJNRGUR3O_js.componentRegistry; }
 });
 Object.defineProperty(exports, "validateRuntimePrecheck", {
   enumerable: true,
-  get: function () { return chunkEYKZY2F3_js.validateRuntimePrecheck; }
+  get: function () { return chunkV5N65MRP_js.validateRuntimePrecheck; }
 });
 Object.defineProperty(exports, "compileSFC", {
   enumerable: true,
-  get: function () { return chunkCR3GC4H3_js.compileSFC; }
+  get: function () { return chunkDHLWNT53_js.compileSFC; }
 });
 Object.defineProperty(exports, "scopeStyles", {
   enumerable: true,
-  get: function () { return chunkCR3GC4H3_js.scopeStyles; }
+  get: function () { return chunkDHLWNT53_js.scopeStyles; }
 });

package/dist/index.mjs

@@ -1,8 +1,8 @@
-export { validateCompilation } from './chunk-3LYQ5XFM.mjs';
+export { validateCompilation } from './chunk-NZL6T22V.mjs';
 import './chunk-5H7N2A5X.mjs';
-export { validateCode, validateCodeSync } from './chunk-XGPHQHLR.mjs';
-export { analyzeCodeWithAST, componentRegistry } from './chunk-KMIDURUR.mjs';
-export { validateRuntimePrecheck } from './chunk-D2SXGGTX.mjs';
-export { compileSFC, scopeStyles } from './chunk-BI5TIQID.mjs';
+export { validateCode, validateCodeSync } from './chunk-LRTDTFFQ.mjs';
+export { analyzeCodeWithAST, componentRegistry } from './chunk-IPJJMPOO.mjs';
+export { validateRuntimePrecheck } from './chunk-6HOIRUQB.mjs';
+export { compileSFC, scopeStyles } from './chunk-4OTQAQ6J.mjs';
 import './chunk-QC6VTSA3.mjs';
 import './chunk-UJCSKKID.mjs';

package/dist/metadata/index.d.mts

@@ -51,6 +51,21 @@ interface ComponentSlot {
     description: string;
     vueTemplate?: string;
     usageExample?: string;
+    bindingType?: 'array' | 'object' | 'single' | 'none';
+    slotProps?: {
+        name: string;
+        type?: string;
+        description?: string;
+        destructuringExample?: string;
+    }[];
+}
+interface ComponentSubComponent {
+    name: string;
+    description: string;
+    props?: ComponentProp[];
+    events?: ComponentEvent[];
+    slots?: ComponentSlot[];
+    methods?: ComponentMethod[];
 }
 interface ComponentMetadata {
     id: string;
@@ -64,7 +79,7 @@ interface ComponentMetadata {
     slots: ComponentSlot[];
     methods?: ComponentMethod[];
     examples?: any[];
-    subComponents?: any[];
+    subComponents?: ComponentSubComponent[];
     commonMistakes?: any[];
     searchKeywords?: string[];
     useCases?: string[];
@@ -94,4 +109,4 @@ declare function getComponentsDir(): string;
  */
 declare function getComponentPath(componentName: string): string;
 
-export { type ComponentActionParam, type ComponentEvent, type ComponentMetadata, type ComponentMethod, type ComponentProp, type ComponentSlot, getAllComponentsMetadata, getComponentMetadata, getComponentPath, getComponentsDir, getComponentsList };
+export { type ComponentActionParam, type ComponentEvent, type ComponentMetadata, type ComponentMethod, type ComponentProp, type ComponentSlot, type ComponentSubComponent, getAllComponentsMetadata, getComponentMetadata, getComponentPath, getComponentsDir, getComponentsList };

package/dist/metadata/index.d.ts

@@ -51,6 +51,21 @@ interface ComponentSlot {
     description: string;
     vueTemplate?: string;
     usageExample?: string;
+    bindingType?: 'array' | 'object' | 'single' | 'none';
+    slotProps?: {
+        name: string;
+        type?: string;
+        description?: string;
+        destructuringExample?: string;
+    }[];
+}
+interface ComponentSubComponent {
+    name: string;
+    description: string;
+    props?: ComponentProp[];
+    events?: ComponentEvent[];
+    slots?: ComponentSlot[];
+    methods?: ComponentMethod[];
 }
 interface ComponentMetadata {
     id: string;
@@ -64,7 +79,7 @@ interface ComponentMetadata {
     slots: ComponentSlot[];
     methods?: ComponentMethod[];
     examples?: any[];
-    subComponents?: any[];
+    subComponents?: ComponentSubComponent[];
     commonMistakes?: any[];
     searchKeywords?: string[];
     useCases?: string[];
@@ -94,4 +109,4 @@ declare function getComponentsDir(): string;
  */
 declare function getComponentPath(componentName: string): string;
 
-export { type ComponentActionParam, type ComponentEvent, type ComponentMetadata, type ComponentMethod, type ComponentProp, type ComponentSlot, getAllComponentsMetadata, getComponentMetadata, getComponentPath, getComponentsDir, getComponentsList };
+export { type ComponentActionParam, type ComponentEvent, type ComponentMetadata, type ComponentMethod, type ComponentProp, type ComponentSlot, type ComponentSubComponent, getAllComponentsMetadata, getComponentMetadata, getComponentPath, getComponentsDir, getComponentsList };

package/dist/runtime/index.d.mts

@@ -4,6 +4,8 @@ interface ValidationLayer {
     name: string;
     passed: boolean;
     errors: string[];
+    warnings?: string[];
+    status?: 'passed' | 'failed' | 'env_dependent' | 'runtime_skipped';
 }
 /**
  * 运行时预检查 (模拟执行)

package/dist/runtime/index.d.ts

@@ -4,6 +4,8 @@ interface ValidationLayer {
     name: string;
     passed: boolean;
     errors: string[];
+    warnings?: string[];
+    status?: 'passed' | 'failed' | 'env_dependent' | 'runtime_skipped';
 }
 /**
  * 运行时预检查 (模拟执行)

package/dist/runtime/index.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkEYKZY2F3_js = require('../chunk-EYKZY2F3.js');
-var chunkCR3GC4H3_js = require('../chunk-CR3GC4H3.js');
+var chunkV5N65MRP_js = require('../chunk-V5N65MRP.js');
+var chunkDHLWNT53_js = require('../chunk-DHLWNT53.js');
 require('../chunk-JSBRDJBE.js');
 
 
 
 Object.defineProperty(exports, "validateRuntimePrecheck", {
   enumerable: true,
-  get: function () { return chunkEYKZY2F3_js.validateRuntimePrecheck; }
+  get: function () { return chunkV5N65MRP_js.validateRuntimePrecheck; }
 });
 Object.defineProperty(exports, "compileSFC", {
   enumerable: true,
-  get: function () { return chunkCR3GC4H3_js.compileSFC; }
+  get: function () { return chunkDHLWNT53_js.compileSFC; }
 });

package/dist/runtime/index.mjs

@@ -1,3 +1,3 @@
-export { validateRuntimePrecheck } from '../chunk-D2SXGGTX.mjs';
-export { compileSFC } from '../chunk-BI5TIQID.mjs';
+export { validateRuntimePrecheck } from '../chunk-6HOIRUQB.mjs';
+export { compileSFC } from '../chunk-4OTQAQ6J.mjs';
 import '../chunk-UJCSKKID.mjs';

package/dist/static/index.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var chunkTA3SV4SP_js = require('../chunk-TA3SV4SP.js');
-var chunkCR3GC4H3_js = require('../chunk-CR3GC4H3.js');
+var chunkJJ6AB4ZH_js = require('../chunk-JJ6AB4ZH.js');
+var chunkDHLWNT53_js = require('../chunk-DHLWNT53.js');
 require('../chunk-JSBRDJBE.js');
 
 
 
 Object.defineProperty(exports, "validateCompilation", {
   enumerable: true,
-  get: function () { return chunkTA3SV4SP_js.validateCompilation; }
+  get: function () { return chunkJJ6AB4ZH_js.validateCompilation; }
 });
 Object.defineProperty(exports, "compileSFC", {
   enumerable: true,
-  get: function () { return chunkCR3GC4H3_js.compileSFC; }
+  get: function () { return chunkDHLWNT53_js.compileSFC; }
 });
 Object.defineProperty(exports, "scopeStyles", {
   enumerable: true,
-  get: function () { return chunkCR3GC4H3_js.scopeStyles; }
+  get: function () { return chunkDHLWNT53_js.scopeStyles; }
 });

package/dist/static/index.mjs

@@ -1,3 +1,3 @@
-export { validateCompilation } from '../chunk-3LYQ5XFM.mjs';
-export { compileSFC, scopeStyles } from '../chunk-BI5TIQID.mjs';
+export { validateCompilation } from '../chunk-NZL6T22V.mjs';
+export { compileSFC, scopeStyles } from '../chunk-4OTQAQ6J.mjs';
 import '../chunk-UJCSKKID.mjs';

package/docs_for_llm/actions.doc.md

@@ -20,7 +20,17 @@ import { Actions } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| btnText | 自定义按钮文案渲染 | `<template #btnText="{ action }">...</template>` | - |
+| btnText | 自定义按钮文案渲染 | `<template #btnText="{ action }">...</template>` | `<Actions>
+  <template <template #btnText="{ action }">...</template>>
+    {{ action }}
+  </template>
+</Actions>` |
+
+### 插槽参数说明
+**btnText**
+
+- 参数结构: <template #btnText="{ action }">...</template>
+- 参数列表: `action: ActionConfig`
 
 ## 使用示例
 ### 表格操作列中的主次操作

package/docs_for_llm/advancedset.doc.md

@@ -33,7 +33,16 @@ import { AdvancedSet } from '@ksyun-internal/versatile';
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| default | 高级设置内容区域 | `<AdvancedSet>...</AdvancedSet>` | - |
+| default | 高级设置内容区域 | `<AdvancedSet>...</AdvancedSet>` | `<AdvancedSet>
+  <template <AdvancedSet>...</AdvancedSet>>
+    自定义default内容
+  </template>
+</AdvancedSet>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
 
 ## 使用示例
 ### 购买页中的高级设置折叠区

package/docs_for_llm/affix.doc.md

@@ -37,6 +37,11 @@ import { Affix } from '@king-design/vue';
 | --- | --- | --- | --- |
 | default | 需要被固定的元素 | `#default` | `<Affix><Button>Fixed Button</Button></Affix>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
 ### 父容器滚动问题
 > **错误用法**: `<div style="overflow: auto; height: 200px;">

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>