docs(site): update docs

antvis · Jun 4, 2024 · 5f025aa · 5f025aa
1 parent 38b3e48
commit 5f025aa
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html
@@ -16,14 +16,10 @@
         transition: all 0.5s;
       }
 
-      #app {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: flex-end;
-      }
-
       #panel {
         z-index: 1;
+        position: absolute;
+        right: 0;
       }
 
       #container {
@@ -49,9 +45,8 @@
   </head>
 
   <body style="font-family: Arial, Helvetica, sans-serif">
-    <div id="app">
-      <div id="panel"></div>
-    </div>
+    <div id="panel"></div>
+    <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>
 </html>
diff --git a/packages/site/docs/manual/feature-common/treeToGraphData.md b/packages/site/docs/manual/feature-common/treeToGraphData.md
@@ -39,6 +39,11 @@ createGraph(
       type: 'compact-box',
       direction: 'TB',
     },
+    node: {
+      style: {
+        ports: [{ placement: 'center' }],
+      },
+    },
     edge: {
       type: 'cubic-vertical',
     },

diff --git a/packages/site/docs/manual/feature.en.md b/packages/site/docs/manual/feature.en.md
@@ -3,13 +3,13 @@ title: Feature
 order: 1
 ---
 
-## 🏖️ Brand New Design Paradigm for Graphs
+## 🏖️ Brand New Design Specification for Graphs
 
-G6 version 5.0 has redesigned the Options paradigm. While ensuring comprehensive capabilities, it optimizes the options structure to be more intuitive and easier to understand.
+G6 version 5.0 has redesigned the Options specification. While ensuring comprehensive capabilities, it optimizes the options structure to be more intuitive and easier to understand.
 
 You only need to quickly grasp the basic [core concepts](/en/manual/core-concept/graph) to get started with G6 quickly and achieve graph visualization without delay.
 
-**😰 The 4.0 Paradigm** had a complex nested structure and was less semantically capable
+**😰 The 4.0 Options** had a complex nested structure and was less semantically capable
 
 ```typescript
 {
@@ -37,7 +37,7 @@ You only need to quickly grasp the basic [core concepts](/en/manual/core-concept
 }
 ```
 
-**😄 The 5.0 Paradigm** has a clear structure and is easy to understand
+**😄 The 5.0 Options** has a clear structure and is easy to understand
 
 ```typescript
 {
@@ -55,13 +55,13 @@ You only need to quickly grasp the basic [core concepts](/en/manual/core-concept
       }
     }
   },
-  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
+  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
 }
 ```
 
 ## 🔨 Brand New API Design
 
-G6 5.0 has redesigned its API, adopting a consistent naming convention.
+G6 5.0 features a cleaner, easy-to-use API design that is more in line with modern front-end frameworks.
 
 ## 🌲 Merging Graphs with Tree Graphs
 
@@ -113,6 +113,8 @@ const graph = new Graph({
 
 G6 5.0 comes with two built-in themes: light and dark, and allows for flexible customization based on the use case. For details, please refer to [Custom Theme](/en/manual/custom-extension/theme).
 
+<image width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gASzQbsbAaIAAAAAAAAAAAAADmJ7AQ/original"></image>
+
 ## 🌍 3D Large Graphs
 
 G6 5.0 provides 3D rendering, layout, interaction capabilities, and can be used by import 3d elements, renderer, and behaviors from `@antv/g6-extension-3D` registration, see: [Using 3D](/manual/further-reading/3d).

diff --git a/packages/site/docs/manual/feature.zh.md b/packages/site/docs/manual/feature.zh.md
@@ -3,13 +3,13 @@ title: 特性
 order: 1
 ---
 
-## 🏖️ 全新设计图范式
+## 🏖️ 全新设计图配置范式
 
-G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。
+G6 5.0 重新设计了图配置范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。
 
 仅需快速了解基本[核心概念](/manual/core-concept/graph)，即可快速上手 G6，快速实现图可视化。
 
-**😰 4.0 范式** 嵌套结构复杂，语义化能力较弱
+**😰 4.0 配置项** 嵌套结构复杂，语义化能力较弱
 
 ```typescript
 {
@@ -37,7 +37,7 @@ G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优
 }
 ```
 
-**😄 5.0 范式** 结构清晰，易于理解
+**😄 5.0 配置项** 结构清晰，易于理解
 
 ```typescript
 {
@@ -55,13 +55,13 @@ G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优
       }
     }
   },
-  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
+  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
 }
 ```
 
 ## 🔨 全新 API 设计
 
-G6 5.0 重新设计了 API，采用了一致的命名规范
+G6 5.0 采用了更加简洁、易用的 API 设计，更加符合现代前端框架的设计风格。
 
 ## 🌲 合并图与树图
 
@@ -134,6 +134,8 @@ const graph = new Graph({
 
 G6 5.0 内置了亮色、暗色两套主题，并可基于使用场景进行灵活定制，具体可参考[自定义主题](/manual/custom-extension/theme)。
 
+<image width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gASzQbsbAaIAAAAAAAAAAAAADmJ7AQ/original"></image>
+
 ## 🌍 3D 大图
 
 G6 5.0 提供了 3D 大图渲染、布局、交互能力，从 `@antv/g6-extension-3d` 中引入 3D 元素、渲染器、交互等注册即可使用，详见：[使用 3D](/manual/further-reading/3d)。