docs: 官网文案和demo优化

Author: fanyang

sites/docs/docs/api/nodeModelApi.en-US.md

@@ -34,7 +34,7 @@ The data attributes of a node are the data that the LogicFlow diagram data is us
 | type       | String     | ✅       | Node type    |
 | x          | number     | ✅       | Node center x-axis coordinate  |
 | y          | number     | ✅       | Node center y-axis coordinates  |
-| text       | TextObject |          | Node Text          |
+| text       | TextObject/String |          | Node Text          |
 | properties | Object     |          | Node Business Custom Attributes |
 
 **TextObject**

sites/docs/docs/api/nodeModelApi.md

@@ -34,7 +34,7 @@ nodeModel 上节点属性有很多，由于用途不一样，我们对其进行
 | type       | String     | ✅    | 节点类型       |
 | x          | number     | ✅    | 节点中心 x 轴坐标 |
 | y          | number     | ✅    | 节点中心 y 轴坐标 |
-| text       | TextObject |      | 节点文本       |
+| text       | TextObject/String |      | 节点文本       |
 | properties | Object     |      | 包含节点样式、形状属性和业务自定义属性  |
 
 **TextObject**

sites/docs/docs/tutorial/basic-class.en-US.md

@@ -42,68 +42,12 @@ Inside LogicFlow, we think of a flowchart as a graph consisting of nodes and edg
 
 `edges`: Contains all edges, connecting two nodes through `sourceNodeId` and `targetNodeId`. Each edge's data attributes are detailed in the <a href="../api/edgeModelApi.en-US.md#DataAttributes">EdgeModel</a>.
 
-<!-- ```jsx | pure
-const graphData = {
-  nodes: [
-    {
-      id: "node_id_1",
-      type: "rect",
-      x: 100,
-      y: 100,
-      text: { x: 100, y: 100, value: '节点1' },
-      properties: {}
-    },
-    {
-      id: "node_id_2",
-      type: "circle",
-      x: 200,
-      y: 300,
-      text: { x: 300, y: 300, value: '节点2' },
-      properties: {}
-    }
-  ],
-  edges: [
-    {
-      id: "edge_id",
-      type: "polyline",
-      sourceNodeId: "node_id_1",
-      targetNodeId: "node_id_2",
-      text: { x: 139, y: 200, value: "连线" },
-      startPoint: { x: 100, y: 140 },
-      endPoint: { x: 200, y: 250 },
-      pointsList: [ { x: 100, y: 140 }, { x: 100, y: 200 }, { x: 200, y: 200 }, { x: 200, y: 250 } ],
-      properties: {}
-    }
-  ]
-}
-```
-- Why does node text need to have coordinates, can't we just use the node's coordinates directly?
-
-  `text` can be used directly as a string, at this time, if it is the text of a node, we will automatically adopt the node coordinates as the node text coordinates, if it is the text of a connection, we will calculate a suitable coordinate as the node coordinates based on the different types of connections.
-  In some application scenarios, our text can be dragged, in order to keep the consistency, our LogicFlow exported text data will take the coordinates with it.
-
-
-- Why are the connecting `startPoint`, `endPoint` data and `pointsList` duplicated?
 
-  Currently, LogicFlow has built-in `line`, `polyline`, and `bezier` lines, which all have `startPoint` and `endPoint` data. But the data exported by `line` will not take `pointsList` with it. For `polyline`, `pointsList` represents all points of the polyline. For `bezier`, `pointsList` represents `['start point', 'first control point', 'second control point', 'end point']`.
-
-
-- What is `properties` used for?
-
-  The LogicFlow of `properties` is reserved for data used in specific business scenarios.
-  For example, in an approval flow scenario, we define a certain node, which passes, the node is green, and does not pass the node is red. Then the data description of the node could be.
-  ```jsx | pure
-  {
-    type: 'apply',
-    properties: {
-      isPass: true
-    }
-  }
-  ```
+`type`: Indicates the type of node or edge, which can be a basic type built into LogicFlow such as `rect` or `polyline`, or a custom type defined by users based on these basic types.
 
-- What is `type`?
+`text`: `text` can represent either node text or edge text. For node text, the node coordinates are automatically used as the text coordinates. For edge text, an appropriate coordinate is computed based on the type of edge. In some scenarios, text positions can be adjusted and dragged. Therefore, our text data in LogicFlow provides coordinate attributes.
 
-  The `type` represents the type of the node or line, which can be not only LogicFlow's built-in base type such as `rect`, `polyline`, but also user-defined type based on the base type. -->
+`properties`: Each node and edge has properties including node style, shape attributes, and business-specific properties reserved for particular business scenarios. Examples include node shape attributes like `width` and `height`, `style` attributes, and business-specific properties like `isPass`.
 
 ## Diagram Rendering
 

sites/docs/docs/tutorial/basic-class.md

@@ -39,38 +39,15 @@ const lf = new LogicFlow({
 
 <code id="graphData" src="../../src/tutorial/basic/instance/graphData"></code>
 
-`nodes`: 包含所有的节点。每个节点的数据属性参见 <a href="../api/nodeModelApi.md#数据属性">nodeModel</a> 。
+`nodes`: 包含所有的节点。每个节点的数据属性详见 <a href="../api/nodeModelApi.md#数据属性">nodeModel</a> 。
 
-`edges`: 包含所有的边，通过起始 `sourceNodeId` 和 `targetNodeId` 将两个节点相连。每个节点的数据属性参见  <a href="../api/edgeModelApi.md#数据属性">EdgeModel</a>。
+`edges`: 包含所有的边，通过起始 `sourceNodeId` 和 `targetNodeId` 将两个节点相连。每个边的数据属性详见  <a href="../api/edgeModelApi.md#数据属性">edgeModel</a>。
 
-<!-- - 为什么节点文本还要有坐标，直接用节点的坐标不行吗？
+`type`: 表示节点或者边的类型，这里的类型不仅可以是`rect`,`polyline`这种LogicFlow内置的基础类型，也可以是用户基于基础类型自定义的类型。
 
-  `text`可以是节点文本，也可以是连线文本，如果是节点文本，默认自动采用节点坐标作为节点文本坐标，如果是连线文本，我们会基于不同的连线类型计算一个合适的坐标作为节点坐标。
-  
-  在有些应用场景下，我们的文本位置是可以改变的和拖动的，基于此，我们LogicFlow的文本数据提供坐标属性。
+`text`: `text`可以是节点文本，也可以是连线文本，如果是节点文本，默认自动采用节点坐标作为节点文本坐标，如果是连线文本，我们会基于不同的连线类型计算一个合适的坐标作为节点坐标。在有些应用场景下，我们的文本位置是可以改变的和拖动的，基于此，我们LogicFlow的文本数据提供坐标属性。
 
-
-- 连线`startPoint`、`endPoint`数据和`pointsList`为什么是重复的？
-
-  目前，在LogicFlow内部内置了`line`, `polyline`, `bezier`三种基础连线，这三种连线都有`startPoint`、`endPoint`数据。但是其中`line`连线是不会带上`pointsList`。对于`polyline`, `pointsList`表示折线所有的点。对于`bezier`，`pointsList`表示`['起点', '第一个控制点'，'第二个控制点', '终点']`。
-
-
-- `properties`是用来做什么的？
-
-  `properties`是LogicFlow保留给具体业务场景使用的数据。
-  例如：在审批流场景，我们定义某个节点，这个节点通过了，节点为绿色，不通过节点为红色。那么节点的数据描述可以为:
-  ```jsx | pure
-  {
-    type: 'apply',
-    properties: {
-      isPass: true
-    }
-  }
-  ```
-
-- `type`是什么？
-
-  `type`表示节点或者连线的类型，这里的类型不仅可以是`rect`,`polyline`这种LogicFlow内置的基础类型，也可以是用户基于基础类型自定义的类型。 -->
+`properties`: 每个节点和边都有properties属性，包含节点样式、形状属性和业务自定义属性（保留给具体业务场景使用的数据），比如节点自身的形状属性`width`,`height`,样式属性`style`和业务自定义属性`isPass`等。
 
 ## 图渲染
 

sites/docs/src/tutorial/basic/instance/graphData/index.tsx

@@ -13,15 +13,22 @@ const graphData = {
       x: 50,
       y: 50,
       text: { x: 100, y: 100, value: '节点1' }, // 节点文本
-      properties: {}, // 每个节点和边都有properties属性，后续会介绍到
+      properties: {
+        width: 80,
+        height: 80,
+        style: {
+          stroke: 'blue',
+        },
+        isPass: 'true', //例如：在审批流场景，我们定义某个节点，这个节点通过了，节点为绿色，不通过节点为红色。
+      },
     },
     // 节点2
     {
       id: 'node_id_2',
       type: 'circle',
       x: 200,
       y: 300,
-      text: { x: 300, y: 300, value: '节点2' }, // 节点文本
+      text: { x: 300, y: 300, value: '节点2' },
       properties: {},
     },
   ],