docs: improve documentation for element/edge configuration (#6861)

* docs: improve documentation/element/edge configuration

* docs: improve the edge of defaultValue

---------

Co-authored-by: whf01206399 <[email protected]>

Author: Whf0403

packages/site/docs/manual/element/edge/build-in/BaseEdge.zh.md

@@ -2,24 +2,38 @@
 title: Cubic 三次贝塞尔曲线
 ---
 
-<embed src="@/common/api/elements/edges/cubic.md"></embed>
+## 概述
 
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+三次贝塞尔曲线是一种通用的平滑曲线，其控制点可以自由分布，适合连接任意方向的节点。
+
+使用场景：
+
+- 适用于任意布局的图，如网络图、关系图。
 
-## style.controlPoints
+- 当需要平滑连接节点且无特定方向要求时使用。
 
-> _[**[number, number] \| [number, number, number] \| Float32Array**,_ _[number, number] \| [number, number, number] \| Float32Array\_\_]_
+## 在线体验
 
-控制点数组，用于定义曲线的形状。如果不指定，将会通过 `curveOffset` 和 `curvePosition` 来计算控制点
+<embed src="@/common/api/elements/edges/cubic.md"></embed>
+
+## 样式配置
+
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
 
-## style.curveOffset
+| 属性          | 描述                                                                                               | 类型                               | 默认值 | 必选 |
+| ------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |
+| controlPoints | 控制点数组，用于定义曲线的形状。如果不指定，将会通过 `curveOffset` 和 `curvePosition` 来计算控制点 | [[Point](#point), [Point](#point)] | -      |      |
+| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1`                                                        | number &#124; number[]             | 0.5    |      |
+| curveOffset   | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度                                               | number &#124; number[]             | 20     |      |
 
-> _number \| [number, number]_ **Default:** `20`
+#### Point
 
-控制点距离两端点连线的距离，可理解为控制边的弯曲程度
+```typescript
+type Point = [number, number] | [number, number, number] | Float32Array;
+```
 
-## style.curvePosition
+## 示例
 
-> _number \| [number, number]_ **Default:** `0.5`
+### 内置三次贝塞尔曲线边效果
 
-控制点在两端点连线上的相对位置，范围为`0-1`
+<Playground path="element/edge/demo/cubic.js" rid="default-cubic-edge" height='520px'></Playground>

packages/site/docs/manual/element/edge/build-in/Cubic.zh.md

@@ -2,20 +2,33 @@
 title: CubicHorizontal 水平三次贝塞尔曲线
 ---
 
+## 概述
+
+水平三次贝塞尔曲线是一种平滑的曲线，其控制点主要沿水平方向分布，适合在水平方向上连接节点。
+
+使用场景：
+
+- 适用于水平布局的图，如流程图、层次结构图。
+
+- 当需要强调水平方向的连接关系时使用。
+
 > 特别注意，计算控制点时主要考虑 x 轴上的距离，忽略 y 轴的变化
 
-<embed src="@/common/api/elements/edges/cubic-horizontal.md"></embed>
+## 在线体验
 
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+<embed src="@/common/api/elements/edges/cubic-horizontal.md"></embed>
 
-## style.curveOffset
+## 样式配置
 
-> _number \| [number, number]_ **Default:** `[0, 0]`
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
 
-控制点距离两端点连线的距离，可理解为控制边的弯曲程度
+| 属性          | 描述                                                 | 类型                   | 默认值    | 必选 |
+| ------------- | ---------------------------------------------------- | ---------------------- | --------- | ---- |
+| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1`          | number &#124; number[] | [0.5,0.5] |      |
+| curveOffset   | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number &#124; number[] | [0,0]     |      |
 
-## style.curvePosition
+## 示例
 
-> _number \| [number, number]_ **Default:** `[0.5, 0.5]`
+### 内置水平三次贝塞尔曲线边效果
 
-控制点在两端点连线上的相对位置，范围为`0-1`
+<Playground path="element/edge/demo/horizontal-cubic.js" rid="default-cubic-horizontal-edge" height='520px'></Playground>

packages/site/docs/manual/element/edge/build-in/CubicHorizontal.zh.md

@@ -2,20 +2,33 @@
 title: CubicVertical 垂直三次贝塞尔曲线
 ---
 
-特别注意，计算控制点时主要考虑 y 轴上的距离，忽略 x 轴的变化
+## 概述
 
-<embed src="@/common/api/elements/edges/cubic-vertical.md"></embed>
+垂直三次贝塞尔曲线是一种平滑的曲线，其控制点主要沿垂直方向分布，适合在垂直方向上连接节点。
 
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+使用场景：
+
+- 适用于垂直布局的图，如组织结构图、树状图。
+
+- 当需要强调垂直方向的连接关系时使用。
+
+**特别注意，计算控制点时主要考虑 y 轴上的距离，忽略 x 轴的变化**
 
-## style.curveOffset
+## 在线体验
 
-> _number \| [number, number]_ **Default:** `[0, 0]`
+<embed src="@/common/api/elements/edges/cubic-vertical.md"></embed>
+
+## 样式配置
+
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
 
-控制点距离两端点连线的距离，可理解为控制边的弯曲程度
+| 属性          | 描述                                                 | 类型                   | 默认值    | 必选 |
+| ------------- | ---------------------------------------------------- | ---------------------- | --------- | ---- |
+| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1`          | number &#124; number[] | [0.5,0.5] |      |
+| curveOffset   | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number &#124; number[] | [0,0]     |      |
 
-## style.curvePosition
+## 示例
 
-> _number \| [number, number]_ **Default:** `[0.5, 0.5]`
+### 内置垂直三次贝塞尔曲线边效果
 
-控制点在两端点连线上的相对位置，范围为`0-1`
+<Playground path="element/edge/demo/vertical-cubic.js" rid="default-vertical-cubic-edge" height='520px'></Playground>

packages/site/docs/manual/element/edge/build-in/CubicRadial.zh.md

@@ -2,6 +2,26 @@
 title: Line 直线
 ---
 
+## 概述
+
+直线是最简单的边类型，直接连接两个节点，没有任何弯曲。
+
+使用场景：
+
+- 适用于简单的图，如拓扑图、流程图。
+
+- 当需要快速绘制且无需复杂视觉效果时使用。
+
+## 在线体验
+
 <embed src="@/common/api/elements/edges/line.md"></embed>
 
+## 样式配置
+
 > 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+
+## 示例
+
+### 内置直线边效果
+
+<Playground path="element/edge/demo/line.js" rid="default-line-edge" height='520px'></Playground>

packages/site/docs/manual/element/edge/build-in/CubicVertical.en.md

@@ -2,27 +2,29 @@
 title: Polyline 折线
 ---
 
-<embed src="@/common/api/elements/edges/polyline.md"></embed>
-
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+## 概述
 
-## style.controlPoints
+折线是由多条直线段组成的边，适合在复杂布局中绕过障碍物连接节点。
 
-> _[number, number] \| [number, number, number] \| Float32Array\_\_[]_
+使用场景：
 
-控制点数组
+- 适用于复杂布局的图，如电路图、管道图。
 
-## style.radius
+- 当需要绕过其他节点或障碍物时使用。
 
-> _number_ **Default:** `0`
+## 在线体验
 
-圆角半径
+<embed src="@/common/api/elements/edges/polyline.md"></embed>
 
-## style.router
+## 样式配置
 
-> _false \| [OrthRouter](#orthrouter) \| [ShortestPathRouter](#shortestpathrouter)_ **Default:** `false`
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
 
-是否启用路由，默认开启且 controlPoints 会自动计入
+| 属性          | 描述                             | 类型                                                                                    | 默认值 | 必选 |
+| ------------- | -------------------------------- | --------------------------------------------------------------------------------------- | ------ | ---- |
+| controlPoints | 控制点数组，用于定义折线的转折点 | [Point](#point)[]                                                                       | []     |      |
+| radius        | 转折点圆角半径                   | number                                                                                  | 0      |      |
+| router        | 是否启用路由                     | false &#124; [OrthRouter](#orthrouter) &#124; [ShortestPathRouter](#shortestpathrouter) | false  |      |
 
 ### OrthRouter
 
@@ -64,3 +66,9 @@ type Point = [number, number] | [number, number, number] | Float32Array;
 ```typescript
 type Padding = number | [number, number] | [number, number, number, number];
 ```
+
+## 示例
+
+### 内置折线边效果
+
+<Playground path="element/edge/demo/polyline.js" rid="default-polyline-edge" height='520px'></Playground>

packages/site/docs/manual/element/edge/build-in/CubicVertical.zh.md

@@ -2,24 +2,38 @@
 title: Quadratic 二次贝塞尔曲线
 ---
 
-<embed src="@/common/api/elements/edges/quadratic.md"></embed>
+## 概述
 
-> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
+二次贝塞尔曲线是一种平滑的曲线，其形状由起点、终点和一个控制点决定。
+
+使用场景：
+
+- 适用于中等复杂度的图，如关系图、网络图。
 
-## style.controlPoint
+- 当需要平滑连接节点且计算资源有限时使用。
 
-> _[number, number] \| [number, number, number] \| Float32Array_
+## 在线体验
 
-控制点，用于定义曲线的形状。如果不指定，将会通过`curveOffset`和`curvePosition`来计算控制点
+<embed src="@/common/api/elements/edges/quadratic.md"></embed>
+
+## 样式配置
+
+> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseEdge](./BaseEdge.zh.md)
 
-## style.curveOffset
+| 属性          | 描述                                                                                               | 类型            | 默认值 | 必选 |
+| ------------- | -------------------------------------------------------------------------------------------------- | --------------- | ------ | ---- |
+| controlPoints | 控制点数组，用于定义曲线的形状。如果不指定，将会通过 `curveOffset` 和 `curvePosition` 来计算控制点 | [Point](#point) | -      |      |
+| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1`                                                        | number          | 0.5    |      |
+| curveOffset   | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度                                               | number          | 30     |      |
 
-> _number_ **Default:** `30`
+#### Point
 
-控制点距离两端点连线的距离，可理解为控制边的弯曲程度
+```typescript
+type Point = [number, number] | [number, number, number] | Float32Array;
+```
 
-## style.curvePosition
+## 示例
 
-> _number_ **Default:** `0.5`
+### 内置二次贝塞尔曲线边效果
 
-控制点在两端点连线上的相对位置，范围为`0-1`
+<Playground path="element/edge/demo/quadratic.js" rid="default-quadratic-edge" height='520px'></Playground>