docs: update site docs (#6456)

* docs: update site docs * chore: use site data news --------- Co-authored-by: antv <[email protected]>
antvis · Oct 30, 2024 · 81eaa54 · 81eaa54
1 parent 98f7d39
commit 81eaa54
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 50 deletions.
diff --git a/packages/g6/src/types/edge.ts b/packages/g6/src/types/edge.ts
@@ -54,9 +54,13 @@ export interface EdgeLabelStyleProps extends LabelStyleProps {
    */
   autoRotate?: boolean;
   /**
-   * <zh/> 文本的最大宽度，超出部分会用省略号代替
+   * <zh/> 标签最大宽度（需要 [prefix]WordWrap 为 true）
+   * - string: 表示以相对于边长度的百分比形式定义最大宽度。例如 `"50%"` 表示标签宽度不超过边长度的一半
+   * - number: 表示以像素值为单位定义最大宽度。例如 `100` 表示标签的最大宽度为 100 像素
    *
-   * <en/> maxWidth of label text, the overflow part will be replaced by an ellipsis
+   * <en/> The maximum width of the label(need [prefix]WordWrap to be true)
+   * - string: When set to a string, it defines the maximum width as a percentage of the edge length. For example, `"50%"` means the label width does not exceed half of the edge length
+   * - number: When set to a number, it defines the maximum width in pixels. For example, `100` means the maximum width of the label is 100 pixels
    * @defaultValue '80%'
    */
   maxWidth?: string | number;

diff --git a/packages/g6/src/types/node.ts b/packages/g6/src/types/node.ts
@@ -34,11 +34,11 @@ export interface NodeLabelStyleProps extends LabelStyleProps {
    */
   placement?: DirectionalPlacement;
   /**
-   * <zh/> 标签最大宽度
+   * <zh/> 标签最大宽度（需要 [prefix]WordWrap 为 true）
    * - string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `"50%"` 表示标签宽度不超过节点宽度的一半
    * - number: 表示以像素值为单位定义最大宽度。例如 `100` 表示标签的最大宽度为 100 像素
    *
-   * <en/> The maximum width of the label
+   * <en/> The maximum width of the label(need [prefix]WordWrap to be true)
    * - string: When set to a string, it defines the maximum width as a percentage of the node width. For example, `"50%"` means the label width does not exceed half of the node width
    * - number: When set to a number, it defines the maximum width in pixels. For example, `100` means the maximum width of the label is 100 pixels
    * @defaultValue '200%'

diff --git a/packages/site/.dumi/app.tsx b/packages/site/.dumi/app.tsx
@@ -1,6 +1,3 @@
-import { notification } from 'antd';
-import React from 'react';
-
 if (typeof window !== 'undefined') {
   window.onresize = () => {
     const { graph, container, widthOffset = 0, heightOffset = 0 } = window as any;
@@ -10,20 +7,3 @@ if (typeof window !== 'undefined') {
     graph.setSize([container.scrollWidth + widthOffset, container.scrollHeight + heightOffset]);
   };
 }
-
-notification.info({
-  message: '提示',
-  description: (
-    <>
-      您目前访问的是 G6 最新版本，旧版已迁移至:
-      <a href="https://g6-v4.antv.vision" target="_blank">
-        g6-v4.antv.vision
-      </a>
-    </>
-  ),
-  placement: 'topRight',
-  duration: 30,
-  style: {
-    margin: 0,
-  },
-});
diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts
@@ -344,32 +344,7 @@ export default defineConfig({
       ],
     },
     /** 新闻公告，优先选择配置的，如果没有配置则使用远程的！ */
-    news: [
-      {
-        type: {
-          zh: '推荐',
-          en: 'News',
-        },
-        title: {
-          zh: 'G6 5.0-beta 闪亮登场',
-          en: 'G6 5.0-beta is released!',
-        },
-        date: '2023.08.31',
-        link: 'https://zhuanlan.zhihu.com/p/653709725?',
-      },
-      {
-        type: {
-          zh: '推荐',
-          en: 'News',
-        },
-        title: {
-          zh: '图可视分析与搭建平台 GraphInsight 开源',
-          en: 'GraphInsight is opened source!',
-        },
-        date: '2022.11.22',
-        link: 'https://www.yuque.com/antv/blog/nyl5bkhdkicgm7v8',
-      },
-    ],
+    // news: [] // 统一使用 site-data 配置
     /** 首页特性介绍 */
     features: [
       {

diff --git a/packages/site/docs/manual/getting-started/integration/vue.en.md b/packages/site/docs/manual/getting-started/integration/vue.en.md
@@ -3,6 +3,10 @@ title: vue
 order: 1
 ---
 
+:::warning
+Please do not pass Vue reactive data directly to the G6 instance, which may cause G6 to fail to render correctly, or even cause the page to crash.
+:::
+
 Refer to the example below, you can use G6 in Vue, and you can also view the [Live Example](https://codesandbox.io/p/sandbox/g6-vue-xzf7pg)。
 
 <embed src="@/common/vue-snippet"></embed>
diff --git a/packages/site/docs/manual/getting-started/integration/vue.zh.md b/packages/site/docs/manual/getting-started/integration/vue.zh.md
@@ -3,6 +3,10 @@ title: 在 Vue 中使用
 order: 1
 ---
 
+:::warning{title=注意}
+请不要将 Vue 响应式数据直接传递给 G6 实例，这可能会导致 G6 无法正确渲染，甚至导致页面崩溃。
+:::
+
 参考下面的示例，你可以在 Vue 中使用 G6，也可以查看 [在线示例](https://codesandbox.io/p/sandbox/g6-vue-xzf7pg)。
 
 <embed src="@/common/vue-snippet"></embed>