📝 feat: yuyan pipeline demo

docs/useDocs/baseInrro.md

@@ -25,12 +25,24 @@ ProFlow 中的节点是一个 React 组件。这意味着它可以渲染您喜
 
 `Handle` 可以翻译为 “**句柄**” 或者 “**端口**”，是边缘连接到节点的位置。`Handle`可以放置在任何地方。
 
-可以用 `import { FlowView, Handle, Position } from '@ant-design/pro-flow';` 的方式引入 `Handle` 与 `Position`。来自定义 `Handle` 在节点中的位置。
+可以用以下方式式引入 `Handle` 与 `Position`，来自定义 `Handle` 在节点中的位置。
+
+```ts
+import { Handle, type Position } from '@ant-design/pro-flow';
+```
 
 <code src="./demos/CoreHandle.tsx"></code>
 
 ### Edges
 
-一条 Edge 连接两个节点。每个边缘都需要一个`source` 和 一个`target`。 ProFlow 内置了 'straight', 'step','smoothstep','bezier','radius' 五种边缘类型。FlowView 组件把 'smoothstep' 设置为默认类型。 你也可以自定义边缘类型。
+一条 Edge 连接两个节点。每个边缘都需要一个`source` 和 一个`target`。 ProFlow 内置了五种边缘类型：
+
+- 'straight'
+- 'step'
+  -'smoothstep'
+  -'bezier'
+- 'radius' 。
+
+FlowView 把 `smoothstep` 设置为默认类型。 你也可以自定义边缘类型。
 
 <code src="./demos/CoreEdge.tsx"></code>

docs/useDocs/demos/CoreNode.tsx

@@ -1,3 +1,6 @@
+/**
+ * compact: true
+ */
 import { FlowView } from '@ant-design/pro-flow';
 import styled from 'styled-components';
 
@@ -23,6 +26,6 @@ function App() {
 export default App;
 
 const Container = styled.div`
-  width: 800px;
+  width: 100%;
   height: 300px;
 `;

docs/useDocs/demos/index.less

@@ -0,0 +1,109 @@
+.pipeNodeWrap {
+  width: 260px;
+  min-height: 100px;
+  background-color: #f6f8fa;
+  padding: 16px;
+  box-sizing: border-box;
+  border-radius: 8px;
+
+  .handle {
+    top: 0;
+  }
+
+  .stepTitle {
+    overflow: hidden;
+    color: #8c8c8c;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .pipeNode {
+    margin-top: 10px;
+    width: 232px;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+
+    .mainBox {
+      width: 100%;
+      padding: 12px;
+      height: 70px;
+      background-color: white;
+      display: flex;
+      border-bottom: none;
+      border-radius: 8px;
+      box-sizing: border-box;
+      .logo {
+        img {
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+      }
+      .wrap {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        .title {
+          color: #000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          white-space: nowrap;
+        }
+        .des {
+          margin-top: 8px;
+          color: #00000073;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  .children {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 10px;
+
+    .childrenBox {
+      width: 200px;
+      padding: 12px;
+      height: 70px;
+      background-color: white;
+      display: flex;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      box-sizing: border-box;
+      margin-top: 10px;
+
+      .logo {
+        img {
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+        }
+      }
+      .wrap {
+        margin-left: 8px;
+        display: flex;
+        flex-direction: column;
+        .title {
+          color: #000;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          white-space: nowrap;
+        }
+        .des {
+          margin-top: 8px;
+          color: #00000073;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  height: 600px;
+}