🚩 add layout demo

packages/graphin-site/examples/layout/demo/Force.jsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable no-undef */
+
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+// import Graphin from '@antv/graphin';
+// import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+
+const Graphin = window.Graphin.default;
+const { Utils } = window.Graphin;
+// console.log(ReactDOM, window.ReactDOM);
+
+const data = Utils.mock(100)
+    .random(0.3)
+    .graphin();
+
+const App = () => {
+    return (
+        <div>
+            <Graphin data={data} layout={{ name: 'force' }} />
+        </div>
+    );
+};
+const rootElement = document.getElementById('container');
+window.ReactDOM.render(<App />, rootElement);

packages/graphin-site/examples/layout/demo/ForceWithCentripetal.jsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable no-undef */
+
+// import React from 'react';
+// import ReactDOM from 'react-dom';
+// import Graphin from '@antv/graphin';
+// import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
+
+const Graphin = window.Graphin.default;
+const { Utils } = window.Graphin;
+
+const data = Utils.mock(100)
+    .random(0.3)
+    .graphin();
+
+const App = () => {
+    return (
+        <div>
+            <Graphin
+                data={data}
+                layout={{
+                    name: 'force',
+                    options: {
+                        centripetalOptions: {
+                            single: 100, // 给孤立节点设置原来 （100/2）倍的向心力
+                            center: (node, degree) => {
+                                // 根据不同的节点与度数设置不同的向心力的中心点
+                                return {
+                                    x: 100,
+                                    y: 100,
+                                };
+                            },
+                        },
+                    },
+                }}
+            />
+        </div>
+    );
+};
+const rootElement = document.getElementById('container');
+ReactDOM.render(<App />, rootElement);

packages/graphin-site/examples/layout/demo/meta.json

@@ -0,0 +1,18 @@
+{
+    "title": {
+        "zh": "中文分类",
+        "en": "Category"
+    },
+    "demos": [
+        {
+            "filename": "ForceWithCentripetal.jsx",
+            "title": "自定义向心力",
+            "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+        },
+        {
+            "filename": "Force.jsx",
+            "title": "力导布局",
+            "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*nBhpT5HbGOAAAAAAAAAAAABkARQnAQ"
+        }
+    ]
+}

packages/graphin-site/examples/layout/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 内置布局
+order: 1
+---
+
+Graphin 内置了 6 款布局，且支持自定义布局