king-design-analyzer 2.1.9 → 2.2.1

package/docs_for_llm/diagram.doc.md

@@ -0,0 +1,343 @@
+# 流程图 (Diagram)
+
+流程图组件，用于在画布中组织图形、连线和布局。支持节点选中、标签编辑以及多种布局方式，适合流程建模、拓扑展示和审批链路可视化场景。
+
+**关键词**: diagram, 流程图, 拓扑图, graph, DTreeLayout, DFlowLayout
+
+**使用场景**: 审批流建模、拓扑结构展示、流程状态可视化
+
+## 导入语句
+```typescript
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+```
+
+## 事件 (Events)
+| 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
+| --- | --- | --- | --- | --- |
+| labelChanged | `@labelChanged` | 节点标签修改后触发 | `cell: any, newLabel: string, oldLabel: string` | `<Diagram @labelChanged="handleLabelChanged"></Diagram>` |
+| selectionChanged | `@selectionChanged` | 画布选中元素变化时触发 | `cells: any[]` | `<Diagram @selectionChanged="handleSelectionChanged"></Diagram>` |
+
+### 事件参数说明
+**labelChanged**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| cell | `any` | 是 | - | 发生变化的图元实例 |
+| newLabel | `string` | 是 | - | 修改后的标签内容 |
+| oldLabel | `string` | 是 | - | 修改前的标签内容 |
+
+事件处理示例:
+```typescript
+const handleLabelChanged = (cell: any, newLabel: string, oldLabel: string) => {
+  console.log('label changed', oldLabel, '=>', newLabel);
+};
+```
+
+**selectionChanged**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| cells | `any[]` | 是 | - | 当前选中的图元列表 |
+
+事件处理示例:
+```typescript
+const handleSelectionChanged = (cells: any[]) => {
+  console.log('selected cells', cells.length);
+};
+```
+
+## 插槽 (Slots)
+| 插槽名 | 说明 | 模板写法 | 示例 |
+| --- | --- | --- | --- |
+| default | 流程图内容，通常放置布局组件、图形组件和连线组件 | `#default` | `<Diagram>
+  <DTreeLayout>
+    <DRectangle key="1" />
+    <DCircle key="2" />
+    <DLine from="1" to="2" />
+  </DTreeLayout>
+</Diagram>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+## 子组件 (Sub-Components)
+### DRectangle
+矩形节点，支持圆角、拖拽、选中和自定义内容。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| key | `string | number` | 节点唯一标识，供连线引用 | `<DRectangle key="1" />` |
+| label | `string | number` | 节点标签 | `<DRectangle key="1" label="开始" />` |
+| rounded | `number | string` | 圆角大小 | `<DRectangle key="1" :rounded="8" />` |
+
+#### 组合示例
+##### 可选中节点
+**场景**: 在画布中选中节点并联动侧边配置面板。
+
+监听选中变化，处理画布交互。
+
+**命中的子组件 API**: 属性: key, label
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DLine, DFlowLayout } from '@king-design/vue/components/diagram';
+
+const handleSelectionChanged = (cells: any[]) => {
+  console.log('当前选中数量', cells.length);
+};
+</script>
+<template>
+  <Diagram @selectionChanged="handleSelectionChanged">
+    <DFlowLayout type="horizontal">
+      <DRectangle key="1" label="节点 A" selectable />
+      <DRectangle key="2" label="节点 B" selectable />
+      <DLine from="1" to="2" label="流转" />
+    </DFlowLayout>
+  </Diagram>
+</template>
+```
+
+##### 基础树形流程图
+**场景**: 快速搭建审批流或状态流转图。
+
+使用树形布局组织节点和连线。
+
+**命中的子组件 API**: 属性: key, label
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+</script>
+<template>
+  <Diagram>
+    <DTreeLayout>
+      <DRectangle key="1" label="开始" />
+      <DCircle key="2" label="审核" />
+      <DCircle key="3" label="结束" />
+      <DLine from="1" to="2" />
+      <DLine from="2" to="3" />
+    </DTreeLayout>
+  </Diagram>
+</template>
+```
+
+### DCircle
+圆形节点，适合展示起止节点或状态节点。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| key | `string | number` | 节点唯一标识 | `<DCircle key="2" />` |
+| label | `string | number` | 节点标签 | `<DCircle key="2" label="结束" />` |
+
+#### 组合示例
+##### 基础树形流程图
+**场景**: 快速搭建审批流或状态流转图。
+
+使用树形布局组织节点和连线。
+
+**命中的子组件 API**: 属性: key, label
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+</script>
+<template>
+  <Diagram>
+    <DTreeLayout>
+      <DRectangle key="1" label="开始" />
+      <DCircle key="2" label="审核" />
+      <DCircle key="3" label="结束" />
+      <DLine from="1" to="2" />
+      <DLine from="2" to="3" />
+    </DTreeLayout>
+  </Diagram>
+</template>
+```
+
+### DLine
+节点之间的连线。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| from | `string | number` | 起始节点 key | `<DLine from="1" to="2" />` |
+| to | `string | number` | 目标节点 key | `<DLine from="1" to="2" />` |
+| label | `string` | 连线标签 | `<DLine from="1" to="2" label="通过" />` |
+
+#### 组合示例
+##### 可选中节点
+**场景**: 在画布中选中节点并联动侧边配置面板。
+
+监听选中变化，处理画布交互。
+
+**命中的子组件 API**: 属性: from, to, label
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DLine, DFlowLayout } from '@king-design/vue/components/diagram';
+
+const handleSelectionChanged = (cells: any[]) => {
+  console.log('当前选中数量', cells.length);
+};
+</script>
+<template>
+  <Diagram @selectionChanged="handleSelectionChanged">
+    <DFlowLayout type="horizontal">
+      <DRectangle key="1" label="节点 A" selectable />
+      <DRectangle key="2" label="节点 B" selectable />
+      <DLine from="1" to="2" label="流转" />
+    </DFlowLayout>
+  </Diagram>
+</template>
+```
+
+##### 基础树形流程图
+**场景**: 快速搭建审批流或状态流转图。
+
+使用树形布局组织节点和连线。
+
+**命中的子组件 API**: 属性: from, to
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+</script>
+<template>
+  <Diagram>
+    <DTreeLayout>
+      <DRectangle key="1" label="开始" />
+      <DCircle key="2" label="审核" />
+      <DCircle key="3" label="结束" />
+      <DLine from="1" to="2" />
+      <DLine from="2" to="3" />
+    </DTreeLayout>
+  </Diagram>
+</template>
+```
+
+### DTreeLayout
+树形布局，适合组织审批流或层级关系图。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| type | `"horizontal" | "vertical"` | 布局方向 | `<DTreeLayout type="horizontal"></DTreeLayout>` |
+| levelDistance | `number | string` | 层级之间的距离 | `<DTreeLayout :levelDistance="80"></DTreeLayout>` |
+
+#### 组合示例
+##### 基础树形流程图
+**场景**: 快速搭建审批流或状态流转图。
+
+使用树形布局组织节点和连线。
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+</script>
+<template>
+  <Diagram>
+    <DTreeLayout>
+      <DRectangle key="1" label="开始" />
+      <DCircle key="2" label="审核" />
+      <DCircle key="3" label="结束" />
+      <DLine from="1" to="2" />
+      <DLine from="2" to="3" />
+    </DTreeLayout>
+  </Diagram>
+</template>
+```
+
+### DFlowLayout
+流式布局，适合横向或纵向流程图编排。
+
+#### 属性 (Props)
+| 属性名 | 类型 | 说明 | 示例 |
+| --- | --- | --- | --- |
+| type | `"horizontal" | "vertical"` | 布局方向 | `<DFlowLayout type="horizontal"></DFlowLayout>` |
+| intraCellSpacing | `number | string` | 同层节点间距 | `<DFlowLayout :intraCellSpacing="40"></DFlowLayout>` |
+
+#### 组合示例
+##### 可选中节点
+**场景**: 在画布中选中节点并联动侧边配置面板。
+
+监听选中变化，处理画布交互。
+
+**命中的子组件 API**: 属性: type
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DLine, DFlowLayout } from '@king-design/vue/components/diagram';
+
+const handleSelectionChanged = (cells: any[]) => {
+  console.log('当前选中数量', cells.length);
+};
+</script>
+<template>
+  <Diagram @selectionChanged="handleSelectionChanged">
+    <DFlowLayout type="horizontal">
+      <DRectangle key="1" label="节点 A" selectable />
+      <DRectangle key="2" label="节点 B" selectable />
+      <DLine from="1" to="2" label="流转" />
+    </DFlowLayout>
+  </Diagram>
+</template>
+```
+
+## 使用示例
+### 基础树形流程图
+**场景**: 快速搭建审批流或状态流转图。
+
+使用树形布局组织节点和连线。
+
+**使用的 API**: 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DCircle, DLine, DTreeLayout } from '@king-design/vue/components/diagram';
+</script>
+<template>
+  <Diagram>
+    <DTreeLayout>
+      <DRectangle key="1" label="开始" />
+      <DCircle key="2" label="审核" />
+      <DCircle key="3" label="结束" />
+      <DLine from="1" to="2" />
+      <DLine from="2" to="3" />
+    </DTreeLayout>
+  </Diagram>
+</template>
+```
+
+### 可选中节点
+**场景**: 在画布中选中节点并联动侧边配置面板。
+
+监听选中变化，处理画布交互。
+
+**使用的 API**: 事件: selectionChanged | 插槽: default
+
+```vue
+<script setup lang="ts">
+import { Diagram, DRectangle, DLine, DFlowLayout } from '@king-design/vue/components/diagram';
+
+const handleSelectionChanged = (cells: any[]) => {
+  console.log('当前选中数量', cells.length);
+};
+</script>
+<template>
+  <Diagram @selectionChanged="handleSelectionChanged">
+    <DFlowLayout type="horizontal">
+      <DRectangle key="1" label="节点 A" selectable />
+      <DRectangle key="2" label="节点 B" selectable />
+      <DLine from="1" to="2" label="流转" />
+    </DFlowLayout>
+  </Diagram>
+</template>
+```
+
+## 相关组件
+Anchor, Card
+

package/docs_for_llm/dialog.doc.md

@@ -12,114 +12,133 @@ import { Dialog, Button } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| value | `boolean` | `false` | 否 | 弹窗是否展示，可用v-model双向绑定 | `<Dialog v-model="visible"></Dialog>` |
-| title | `string` | `"提示"` | 否 | 弹窗标题 | `<Dialog v-model="visible" title="确认操作"></Dialog>` |
-| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 弹窗尺寸 | `<Dialog v-model="visible" size="small"></Dialog>` |
-| width | `number | string` | `undefined` | 否 | 指定弹窗宽度，number类型时单位为px，string类型需要指定单位 | `<Dialog v-model="visible" :width="800"></Dialog>` |
-| loading | `boolean` | `false` | 否 | "确定"按钮是否为加载状态 | `<Dialog v-model="visible" :loading="isSubmitting"></Dialog>` |
-| disabledOk | `boolean` | `false` | 否 | "确定"按钮是否为禁用状态 | `<Dialog v-model="visible" :disabledOk="!isValid"></Dialog>` |
-| okText | `string` | `"确定"` | 否 | "确定"按钮文案 | `<Dialog v-model="visible" okText="保存"></Dialog>` |
-| cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | `<Dialog v-model="visible" cancelText="放弃"></Dialog>` |
-| overlay | `boolean` | `true` | 否 | 是否展示遮罩层 | `<Dialog v-model="visible" :overlay="false"></Dialog>` |
-| closable | `boolean` | `true` | 否 | 点击遮罩层是否可以关闭弹窗 | `<Dialog v-model="visible" :closable="false"></Dialog>` |
-| escClosable | `boolean` | `true` | 否 | 是否按ESC键关闭弹窗 | `<Dialog v-model="visible" :escClosable="false"></Dialog>` |
-| hideClose | `boolean` | `false` | 否 | 是否隐藏右上角关闭按钮 | `<Dialog v-model="visible" hideClose></Dialog>` |
-| draggable | `boolean` | `true` | 否 | 弹窗是否可拖拽 | `<Dialog v-model="visible" :draggable="false"></Dialog>` |
-| mode | `"destroy" | "hide"` | `"hide"` | 否 | 指定主体元素在关闭状态下的渲染方式 | `<Dialog v-model="visible" mode="destroy"></Dialog>` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| value | `boolean` | `false` | 否 | 弹窗是否展示，可用v-model双向绑定 | - | `<Dialog v-model="visible">` |
+| title | `string` | `"提示"` | 否 | 弹窗标题 | - | `<Dialog v-model="visible" title="确认操作">` |
+| size | `"large" | "default" | "small" | "mini"` | `"default"` | 否 | 弹窗尺寸 | - | `<Dialog v-model="visible" size="small">` |
+| width | `number | string` | `undefined` | 否 | 指定弹窗宽度，number类型时单位为px，string类型需要指定单位 | - | `<Dialog v-model="visible" :width="800">` |
+| loading | `boolean` | `false` | 否 | "确定"按钮是否为加载状态 | - | `<Dialog v-model="visible" :loading="isSubmitting">` |
+| disabledOk | `boolean` | `false` | 否 | "确定"按钮是否为禁用状态 | - | `<Dialog v-model="visible" :disabledOk="!isValid">` |
+| okText | `string` | `"确定"` | 否 | "确定"按钮文案 | - | `<Dialog v-model="visible" okText="保存">` |
+| cancelText | `string` | `"取消"` | 否 | "取消"按钮文案 | - | `<Dialog v-model="visible" cancelText="放弃">` |
+| ok | `() => void` | `undefined` | 否 | "确定"按钮点击后自定义回调函数 | - | `<Dialog v-model="visible" :ok="handleOk">` |
+| cancel | `() => void` | `undefined` | 否 | "取消"按钮点击后自定义回调函数 | - | `<Dialog v-model="visible" :cancel="handleCancel">` |
+| container | `string | ((parentDom: Element, anchor: Node | null) => Element)` | `undefined` | 否 | 指定弹窗插入的位置，默认追加到 body | - | `<Dialog v-model="visible" :container="() => document.body">` |
+| overlay | `boolean` | `true` | 否 | 是否展示遮罩层 | - | `<Dialog v-model="visible" :overlay="false">` |
+| closable | `boolean` | `true` | 否 | 点击遮罩层是否可以关闭弹窗 | - | `<Dialog v-model="visible" :closable="false">` |
+| terminate | `() => void` | `undefined` | 否 | 用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数 | - | `<Dialog v-model="visible" :terminate="handleTerminate">` |
+| escClosable | `boolean` | `true` | 否 | 是否按ESC键关闭弹窗 | - | `<Dialog v-model="visible" :escClosable="false">` |
+| hideClose | `boolean` | `false` | 否 | 是否隐藏右上角关闭按钮 | - | `<Dialog v-model="visible" hideClose>` |
+| draggable | `boolean` | `true` | 否 | 弹窗是否可拖拽 | - | `<Dialog v-model="visible" :draggable="false">` |
+| mode | `"destroy" | "hide"` | `"hide"` | 否 | 指定主体元素在关闭状态下的渲染方式 | - | `<Dialog v-model="visible" mode="destroy">` |
 
 ## 事件 (Events)
 | 事件名 | Vue事件名 | 说明 | 回调参数 | 示例 |
 | --- | --- | --- | --- | --- |
-| open | `@open` | 弹窗打开后触发 | `-` | `<Dialog v-model="visible" @open="handleOpen"></Dialog>` |
-| close | `@close` | 弹窗关闭后触发，不管是什么原因导致的关闭 | `-` | `<Dialog v-model="visible" @close="handleClose"></Dialog>` |
-| ok | `@ok` | 点击确定按钮时触发 | `-` | `<Dialog v-model="visible" @ok="handleOk"></Dialog>` |
-| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Dialog v-model="visible" @cancel="handleCancel"></Dialog>` |
-| terminate | `@terminate` | 用户强行关闭弹窗时触发：点击关闭按钮、点击遮罩层、按ESC键 | `-` | `<Dialog v-model="visible" @terminate="handleTerminate"></Dialog>` |
-| afterClose | `@after-close` | 弹窗退出动画执行完成后触发 | `-` | `<Dialog v-model="visible" @after-close="handleAfterClose"></Dialog>` |
-
-### 事件处理函数示例
-**open**:
-```typescript
-const handleOpen = () => {
-  console.log('弹窗已打开');
-};
-```
-
-**close**:
-```typescript
-const handleClose = () => {
-  console.log('弹窗已关闭');
-};
-```
-
-**ok**:
-```typescript
-const handleOk = () => {
-  // 处理确定逻辑
-  visible.value = false;
-};
-```
-
-**cancel**:
-```typescript
-const handleCancel = () => {
-  visible.value = false;
-};
-```
-
-**terminate**:
-```typescript
-const handleTerminate = () => {
-  console.log('用户强行关闭了弹窗');
-};
-```
-
-**afterClose**:
-```typescript
-const handleAfterClose = () => {
-  // 动画完成后清理
-};
-```
+| open | `@open` | 弹窗打开后触发 | `-` | `<Dialog v-model="visible" @open="handleOpen">` |
+| close | `@close` | 弹窗关闭后触发，不管是什么原因导致的关闭 | `-` | `<Dialog v-model="visible" @close="handleClose">` |
+| ok | `@ok` | 点击确定按钮时触发 | `-` | `<Dialog v-model="visible" @ok="handleOk">` |
+| cancel | `@cancel` | 点击取消按钮时触发 | `-` | `<Dialog v-model="visible" @cancel="handleCancel">` |
+| terminate | `@terminate` | 用户强行关闭弹窗时触发：点击关闭按钮、点击遮罩层、按ESC键 | `-` | `<Dialog v-model="visible" @terminate="handleTerminate">` |
+| afterClose | `@after-close` | 弹窗退出动画执行完成后触发 | `-` | `<Dialog v-model="visible" @after-close="handleAfterClose">` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
-| content | 定义整个弹窗体，包括header，body，footer | `#content` | `<Dialog v-model="visible">
-  <template #content>
-    <!-- 完全自定义弹窗结构 -->
-  </template>
+| default | 弹窗主体内容（body区域） | `默认插槽` | `<Dialog v-model="visible">
+  <p>弹窗内容</p>
 </Dialog>` |
 | header | 扩展弹窗头部 | `#header` | `<Dialog v-model="visible">
   <template #header>
     <h2>自定义头部</h2>
   </template>
 </Dialog>` |
-| body | 扩展弹窗主体部分 | `#body` | - |
-| footer | 扩展弹窗底部 | `#footer` | `<Dialog v-model="visible">
+| footer | 扩展弹窗底部按钮区域 | `#footer` | `<Dialog v-model="visible">
   <template #footer>
     <Button @click="visible = false">关闭</Button>
     <Button type="primary" @click="handleSubmit">提交</Button>
   </template>
 </Dialog>` |
-| footerWrapper | 扩展弹窗整个底部，上述footer是它下面一个子扩展点 | `#footerWrapper` | - |
+| content | 定义整个弹窗体，包括header、body、footer | `#content` | `<Dialog v-model="visible">
+  <template #content>
+    <!-- 完全自定义弹窗结构 -->
+  </template>
+</Dialog>` |
+
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
+**header**
+
+- 参数结构: 无参数
+
+**footer**
+
+- 参数结构: 无参数
+
+**content**
+
+- 参数结构: 无参数
 
 ## 方法 (Methods)
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| show | 弹出弹窗 | `` | `Promise` |
-| close | 关闭弹窗 | `` | `void` |
-| showLoading | "确定"按钮变为加载状态 | `` | `void` |
-| hideLoading | "确定"按钮变为正常状态 | `` | `void` |
+| show | 弹出弹窗 | `props?: DialogProps` | `Promise` |
+| close | 关闭弹窗 | `-` | `void` |
+| showLoading | "确定"按钮变为加载状态 | `-` | `void` |
+| hideLoading | "确定"按钮变为正常状态 | `-` | `void` |
+
+### 方法参数说明
+**show**
+
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
+| --- | --- | --- | --- | --- |
+| props | `DialogProps` | 否 | - | 可选的临时弹窗配置，会在本次显示时覆盖标题、按钮文案或宽度等属性。 |
+
+调用示例:
+```typescript
+const dialogRef = ref<InstanceType<typeof Dialog>>();
+await dialogRef.value?.show();
+```
+
+### 方法调用示例
+**show**
+
+```typescript
+const dialogRef = ref<InstanceType<typeof Dialog>>();
+await dialogRef.value?.show();
+```
+
+**close**
+
+```typescript
+dialogRef.value?.close();
+```
+
+**showLoading**
+
+```typescript
+dialogRef.value?.showLoading();
+```
+
+**hideLoading**
+
+```typescript
+dialogRef.value?.hideLoading();
+```
 
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 静态方法调用时未正确导入Dialog
 > **错误用法**: `import { confirm } from '@king-design/vue';
 confirm({ title: '确认' });`
 > **正确写法**: `import { Dialog } from '@king-design/vue';
 Dialog.confirm({ title: '确认' });`
 > **说明**: confirm、success、warning、error是Dialog的静态方法，需要通过Dialog.xxx()调用
 
+### @ok事件中未关闭弹窗
 > **错误用法**: `const handleOk = () => {
   // 只处理业务逻辑，忘记关闭弹窗
   submitData();
@@ -130,6 +149,7 @@ Dialog.confirm({ title: '确认' });`
 };`
 > **说明**: 使用@ok事件时，弹窗不会自动关闭，需要在处理函数中手动设置visible为false
 
+### v-model语法错误
 > **错误用法**: `<Dialog :value="visible" @update:value="visible = $event">`
 > **正确写法**: `<Dialog v-model="visible">`
 > **说明**: Vue 3中应使用v-model语法糖，不需要手动拆分:value和@update:value

package/docs_for_llm/divider.doc.md

@@ -12,24 +12,31 @@ import { Divider } from '@king-design/vue';
 ```
 
 ## 属性 (Props)
-| 属性名 | 类型 | 默认值 | 必填 | 说明 | 示例 |
-| --- | --- | --- | --- | --- | --- |
-| borderType | `"solid" | "dashed" | "dotted" | "double"` | `"solid"` | 否 | 定义线的类型 | `<Divider borderType="dashed">虚线</Divider>` |
-| position | `"left" | "right" | "center"` | `"center"` | 否 | 定义文字位置 | `<Divider position="left">左侧文字</Divider>` |
-| type | `"vertical" | "horizontal"` | `"vertical"` | 否 | 定义排列方式（水平或垂直）。注意：'horizontal' 用于创建垂直分割线（水平排列），'vertical' 用于创建水平分割线（垂直排列）。 | `<Divider type="horizontal" />` |
-| theme | `"light" | "dark"` | `"light"` | 否 | 定义主题，适用于深/浅色背景 | `<Divider theme="dark" />` |
-| margin | `"large" | "default" | "small" | "none" | number` | `"default"` | 否 | 定义Divider上下（或左右）外边距 | `<Divider margin="large" />` |
+| 属性名 | 类型 | 默认值 | 必填 | 说明 | 标签 | 示例 |
+| --- | --- | --- | --- | --- | --- | --- |
+| borderType | `"solid" | "dashed" | "dotted" | "double"` | `"solid"` | 否 | 定义线的类型 | - | `<Divider borderType="dashed">虚线</Divider>` |
+| position | `"left" | "right" | "center"` | `"center"` | 否 | 定义文字位置 | - | `<Divider position="left">左侧文字</Divider>` |
+| type | `"vertical" | "horizontal"` | `"vertical"` | 否 | 定义排列方式（水平或垂直）。注意：'horizontal' 用于创建垂直分割线（水平排列），'vertical' 用于创建水平分割线（垂直排列）。 | - | `<Divider type="horizontal" />` |
+| theme | `"light" | "dark"` | `"light"` | 否 | 定义主题，适用于深/浅色背景 | - | `<Divider theme="dark" />` |
+| margin | `"large" | "default" | "small" | "none" | number` | `"default"` | 否 | 定义Divider上下（或左右）外边距 | - | `<Divider margin="large" />` |
 
 ## 插槽 (Slots)
 | 插槽名 | 说明 | 模板写法 | 示例 |
 | --- | --- | --- | --- |
 | default | 分割线中间的文字内容 | `#default` | `<Divider>文字内容</Divider>` |
 
+### 插槽参数说明
+**default**
+
+- 参数结构: 无参数
+
 ## 常见错误与正确用法 (Anti-Hallucination)
+### 混淆 vertical 和 horizontal 的含义
 > **错误用法**: `<Divider type="vertical" /> <!-- 想创建垂直分割线 -->`
 > **正确写法**: `<Divider type="horizontal" /> <!-- vertical是默认值(水平线)，horizontal才是垂直线 -->`
 > **说明**: Divider 的 type 属性指的是排列方式。vertical 表示垂直排列（即上下分隔，产生水平线），horizontal 表示水平排列（即左右分隔，产生垂直线）。
 
+### 自定义 margin 时未使用动态绑定
 > **错误用法**: `<Divider margin="20" />`
 > **正确写法**: `<Divider :margin="20" />`
 > **说明**: 如果传入的是数字类型的 margin，需要使用 v-bind 语法 (:margin)。