feat(site):update docs

packages/graphin-site/docs/manual/getting-started.en.md

@@ -21,9 +21,9 @@ Here is a simple example to show the usage of Graphin. Visit http://u.ant.design
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
 ></iframe>
 
-### 01. Rendering data 
+### 01. Rendering data
 
-There is no difference between Graphin and typical React components. It has a required props `data` which will be checked internally. There are some requirements of data. For details, see: [Main Concepts/Data].
+There is no difference between Graphin and typical React components. It has a required props `data` which will be checked internally. There are some requirements of data. For details, see: [Main Concepts/Data](main-concepts/data).
 
 Graphin provides a Mock function to help us generate some graph data quickly, let us have a try:
 
@@ -61,7 +61,7 @@ For example, we want nodes to be arranged in a concentric order:
 
 ### 03. Using components
 
-Graphin provides two official components, Toolbar and ContextMenu. you can get more detail about them in the [Main-concepts/Components].
+Graphin provides two official components, Toolbar and ContextMenu. you can get more detail about them in the [Main-concepts/Components](main-concepts/components).
 
 we take Toolbar as an example:
 
@@ -101,7 +101,7 @@ we can experience Toolbar component in codesandbox:
 -   zoomIn/out
 -   fullscreen
 
-### 04. Monitoring event 
+### 04. Monitoring event
 
 There are a lot of events in Graph analysis. If we want to monitor events, what should we do?
 
@@ -165,8 +165,7 @@ Through the above, we can know that design of Graphin fully complies with React'
 
 > The change of layout will lead to different layout effects to meet people's analytical needs with the same data.
 
-
-Graphin is a React component, the change of  `props.layout` will lead to diffrent layout effect, so we need to combine layouts and change `props.layout` every time.
+Graphin is a React component, the change of `props.layout` will lead to diffrent layout effect, so we need to combine layouts and change `props.layout` every time.
 
 -   1. Interface of `LayoutSelector` component
 
@@ -195,7 +194,7 @@ Graphin provides a number of APIs to the user which are some internal states or
 
 -   3.  How to get API?
 
-Graphin provides two ways to get the apis interface. The first is to pass the component's props, that is, all the components wrapped inside the Graphin component will get the apis property. The second way is through the ref instance, see [Advanced Guide/GraphRef] (advanced-guides/graphRef). The first one is suitable for user-defined components, so it is very convenient to get the required interface. The second way is more flexible, and you can use the information provided by Graphin in the outer layer of Graphin, which is often used in complex scenes.
+Graphin provides two ways to get the apis interface. The first is to pass the component's props, that is, all the components wrapped inside the Graphin component will get the apis property. The second way is through the ref instance, see [Advanced Guide/GraphRef](advanced-guides/graphRef). The first one is suitable for user-defined components, so it is very convenient to get the required interface. The second way is more flexible, and you can use the information provided by Graphin in the outer layer of Graphin, which is often used in complex scenes.
 
 -   4. The complete code is as follows:
 
@@ -213,8 +212,8 @@ Graphin provides two ways to get the apis interface. The first is to pass the co
 
 Node Diffusion" is a typical function in graph analysis. Under normal circumstances, node operations in the canvas, such as adding nodes, deleting nodes, we will consider many problems, such as changing from 1 node to 10 nodes, how does the canvas change? Where will the new 9 nodes be placed? When using Graphin, we don't need to think about it. Just remember that it is data-driven. We don't need to care about the internal implementation. Just tell Graphin what data you need to render. Adding nodes does not use `graph.add(node)`, deleting nodes does not need to call `graph.remove(node)`, everything is changed data `props.data`.
 
-- 1. Perform a data mock on the selected node.
-- 2. The Click event triggers a change to `state.data`.
+-   1. Perform a data mock on the selected node.
+-   2. The Click event triggers a change to `state.data`.
 
 ```tsx
 import React from 'react';
@@ -281,4 +280,4 @@ const App = () => {
 
 ### 03. Summary and guidance
 
-These are the quick start guides for Graphin. I believe you have seen the ease of use of Graphin. In fact, there are a lot of ideas about the use of Graphin. For example, what happens when the layout and data change together? You can have a try. if you want to get a deeper understanding of Graphin, you can continue to read the contents of [main-concepts]() and [advanced guides]().
+These are the quick start guides for Graphin. I believe you have seen the ease of use of Graphin. In fact, there are a lot of ideas about the use of Graphin. For example, what happens when the layout and data change together? You can have a try. if you want to get a deeper understanding of Graphin, you can continue to read the contents of [main-concepts](main-concepts/data) and [advanced guides](advanced-guides/extend).

packages/graphin-site/docs/manual/getting-started.zh.md

@@ -276,4 +276,4 @@ const App = () => {
    ></iframe>
 ### 03. 总结与引导
 
-以上就是 Graphin 的快速入门指南，相信大家已经看到了 Graphin 的简单易用之处。其实关于 Graphin 的使用，还有可以有很多开脑洞的想法。比如布局和数据一起改变会发生什么？大家不妨自己试试。想要深入地了解 Graphin，可以继续阅读 [核心概念]() 和 [进阶指导]() 两部分的内容
+以上就是 Graphin 的快速入门指南，相信大家已经看到了 Graphin 的简单易用之处。其实关于 Graphin 的使用，还有可以有很多开脑洞的想法。比如布局和数据一起改变会发生什么？大家不妨自己试试。想要深入地了解 Graphin，可以继续阅读 [核心概念](main-concepts/data) 和 [进阶指导](advanced-guides/extend) 两部分的内容

packages/graphin-site/docs/manual/introduction.en.md

@@ -18,7 +18,7 @@ Graphin means Graph Insight (analysis of graphs). It is a library of React compo
 
 ## Product Positioning
 
-Graph visualization can be layered into "graph analysis" and "graph editing" in the application field. The background introduction(#Background) above is actually about the graph analysis.
+Graph visualization can be layered into "graph analysis" and "graph editing" in the application field. The [background](#Background) above is actually about the graph analysis.
 
 -   graph analysis: layout analysis and visual exploration of the graph. Typical product: [cambridge-intelligence](https://cambridge-intelligence.com/)，[TigerGraph](https://testdrive.tigergraph.com)，[Linkurio](https://crunchbase.linkurio.us/demo/)，[Gephi](https://gephi.org/) ，[Palantir](https://www.palantir.com/)，[Neo4j](https://neo4j.com/product/)。
 -   graph editing: Editing, wiring, process management of the graph. Typical product: [draw.io](https://www.draw.io/)，[mxGraph](https://github.com/jgraph/mxgraph)，[ggEditor](http://ggeditor.com/)。
@@ -44,7 +44,6 @@ Take advantage of the React framework features to map from data to canvas render
 -   Incremental data addition: Graphin adds data dynamically according to the pre-layout to achieve node diffusion, relationship discovery and other effects.
 -   Full data rendering: Graphin supports full data rendering to Meet the requirements of saving, importing, exporting, etc.
 
-
 <img style='width:100%;box-shadow: 0 2px 8px #f0f1f2;padding:40px;'  src = 'https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*PM7yTr_-O0gAAAAAAAAAAABkARQnAQ'/>
 
 ### 02.Layout Switching
@@ -71,4 +70,4 @@ Support node diffusion, finding edge relationships and other basic analysis meth
 
 ### 06.Advanced Analysis
 
-time analysis (Timebar), geographic analysis (Map mode) and other advanced analysis methods are in the planning.
+time analysis (Timebar), geographic analysis (Map mode) and other advanced analysis methods are in the planning.

packages/graphin-site/site/pages/GraphinStudio.zh.tsx

@@ -7,7 +7,15 @@ const IndexPage = () => {
     return (
         <>
             <SEO title={t('蚂蚁数据可视化')} lang={i18n.language} />
-            <div style={{ margin: '0 auto', padding: '0', height: 'calc(100vh - 64px)' }}>
+            <div
+                style={{
+                    margin: '0 auto',
+                    padding: '0',
+                    height: 'calc(100vh - 64px)',
+                    background:
+                        'url(https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*ZW9RSYTyEDcAAAAAAAAAAABkARQnAQ) center center no-repeat',
+                }}
+            >
                 <iframe
                     src="https://antvis.github.io/graphin-studio-site/#/graphin-studio"
                     title="graphin-studio"