feat: update docs

package.json

@@ -4,8 +4,9 @@
     "pnpm": "^8"
   },
   "scripts": {
-    "preinstall": "npx only-allow pnpm && npm run check-gitmodules",
-    "check-gitmodules": "test -d packages/graphin/.git || git clone -b v3 https://github.com/antvis/Graphin.git packages/graphin",
+    "preinstall": "npx only-allow pnpm && npm run add-gitmodule-graphin",
+    "add-gitmodule-graphin": "test -d packages/graphin/.git || git clone -b v3 https://github.com/antvis/Graphin.git packages/graphin",
+    "setup:tugraph-db": "node scripts/setupProject.js https://github.com/TuGraph-family/gi-assets-tugraph-db.git packages/gi-assets-tugraph-db",
     "build:all:es": "turbo run build:es",
     "build:all:umd": "turbo run build:umd --no-cache",
     "start": "cd packages/gi-site && npm run start",

packages/gi-sdk/docs/Testing.md

@@ -1,14 +1,102 @@
 ---
-title: 本地测试
+title: 组件测试
 order: 1
 group:
-  path: /quick-start
-  title: 快速开始
-  order: 3
+  path: /gi-sdk
+  title: GISDK
+  order: 0
 nav:
   title: GISDK
   path: /sdk
   order: 1
 ---
 
-GISDK_TESTING 介绍
+`@antv/gi-sdk` 提供了 `GISDK_TEST` 组件，用于组件的本地测试，而无需在 G6VP 站点中研发。相比 GISDK 而言，它不用写繁琐的 Config 配置，而是通过资产包的 `registerMeta` 信息自动生成初始化配置，再配合「Setting」的按钮，可视化调整配置，模拟资产在 G6VP 产品中的表现。如下图所示
+
+```jsx
+import * as React from 'react';
+import { GISDK_TEST } from '@antv/gi-sdk';
+import * as Assets from '@antv/gi-assets-basic';
+
+const services = [
+  {
+    id: `GI/PropertiesPanel`,
+    service: params => {
+      const { data } = params;
+      return new Promise(resolve => {
+        return resolve(data);
+      });
+    },
+  },
+];
+
+const App = () => {
+  return (
+    <div>
+      <GISDK_TEST
+        assets={Assets}
+        activeAssets={[
+          { id: 'FilterPanel', type: 'GIAC_CONTENT' },
+          { id: 'PropertiesPanel', type: 'AUTO' },
+          { id: 'LassoSelect', type: 'GIAC' },
+          { id: 'ZoomIn', type: 'GIAC' },
+          { id: 'ZoomOut', type: 'GIAC' },
+        ]}
+        services={services}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## 详细解析
+
+组件拥有 3 个属性，`assets`和 `services` 和 GISDK 的属性保持一致。`activeAssets` 用于告知需要哪些激活的资产，这对于资产的单独测试很有帮助。
+
+| 属性           | 类型                      | 描述       |
+| -------------- | ------------------------- | ---------- |
+| `assets`       | `GIAssets`                | 资产包     |
+| `activeAssets` | `{id:string;type:string}` | 激活的资产 |
+| `services`     | `string`                  | 资产服务   |
+
+如代码所示
+
+```jsx | pure
+import * as React from 'react';
+import { GISDK_TEST } from '@antv/gi-sdk';
+import * as Assets from '@antv/gi-assets-basic';
+
+const services = [
+  {
+    id: `GI/PropertiesPanel`,
+    service: params => {
+      const { data } = params;
+      return new Promise(resolve => {
+        return resolve(data);
+      });
+    },
+  },
+];
+
+const App = () => {
+  return (
+    <div>
+      <GISDK_TEST
+        assets={Assets}
+        activeAssets={[
+          { id: 'FilterPanel', type: 'GIAC_CONTENT' },
+          { id: 'PropertiesPanel', type: 'AUTO' },
+          { id: 'LassoSelect', type: 'GIAC' },
+          { id: 'ZoomIn', type: 'GIAC' },
+          { id: 'ZoomOut', type: 'GIAC' },
+        ]}
+        services={services}
+      />
+    </div>
+  );
+};
+
+export default App;
+```

packages/gi-sdk/docs/demos/gi-export.tsx

@@ -0,0 +1,188 @@
+import * as BaiscAssets from '@antv/gi-assets-basic';
+import GISDK from '@antv/gi-sdk';
+import * as React from 'react';
+import { data, edgesCfg as defaultEdgesCfg, nodesCfg as defaultNodesCfg, schemaData } from '../demos/const';
+import type { GIComponentAssets, GIService } from './typing';
+
+const defaultServices: GIService[] = [
+  {
+    name: '初始化查询',
+    method: 'GET',
+    id: 'GI/GI_SERVICE_INTIAL_GRAPH',
+    service: async () => {
+      return new Promise(resolve => {
+        resolve(data);
+      });
+    },
+  },
+  {
+    name: '查询图模型',
+    method: 'GET',
+    id: 'GI/GI_SERVICE_SCHEMA',
+    service: async () => {
+      return new Promise(resolve => {
+        resolve(schemaData);
+      });
+    },
+  },
+];
+
+const appendAssets = assets => {
+  return {
+    ...assets,
+    components: {
+      ...assets.components,
+      ...BaiscAssets.components,
+    },
+  };
+};
+const calcProps = props => {
+  const {
+    activeAssets: activeAssetsInfo,
+
+    nodes = defaultNodesCfg,
+    edges = defaultEdgesCfg,
+  } = props;
+  const services = [...(props.services || []), ...defaultServices];
+  const activeAssetsKey = activeAssetsInfo.map(item => item.id);
+  const assets = appendAssets(props.assets);
+  /** 得到资产的运行时配置 */
+  const CMPS_CONFIG = getComponentsByAssets(
+    assets.components as GIComponentAssets,
+    { nodes: [], edges: [] },
+    services,
+    //@ts-ignore
+    {},
+    { nodes: [], edges: [] },
+    'GI',
+  );
+
+  /** 根据清单，拆分不同类型的资产 */
+  const KEYS_LAYOUT: string[] = [];
+  const KEYS_ELEMENTS: string[] = [];
+  const KEYS_COMPONENTS: string[] = [];
+
+  const KEYS_GICC_LAYOUT: string[] = []; //布局容器
+  const KEYS_GICC_MENU: string[] = []; //右键菜单容器
+  const KEYS_GICC: string[] = []; //内容容器
+
+  const KEYS_GIAC_CONTENT: string[] = []; //内容原子资产
+  const KEYS_GIAC_MENU: string[] = []; //菜单原子资产
+  const KEYS_GIAC: string[] = []; //原子资产
+
+  activeAssetsInfo.forEach(item => {
+    const { type, id } = item;
+    if (type === 'NODE' || type === 'EDGE') {
+      KEYS_ELEMENTS.push(id);
+      return;
+    }
+    if (type === 'LAYOUT') {
+      KEYS_LAYOUT.push(id);
+      return;
+    }
+    /** 剩下的都是分析组件 */
+    KEYS_COMPONENTS.push(id);
+
+    if (type === 'GICC_LAYOUT') {
+      KEYS_GICC_LAYOUT.push(id);
+    }
+    if (type === 'GICC_MENU') {
+      KEYS_GICC_MENU.push(id);
+    }
+    if (type === 'GICC') {
+      KEYS_GICC.push(id);
+    }
+    if (type === 'GIAC') {
+      KEYS_GIAC.push(id);
+    }
+    if (type === 'GIAC_MENU') {
+      KEYS_GIAC_MENU.push(id);
+    }
+    if (type === 'GIAC_CONTENT') {
+      KEYS_GIAC_CONTENT.push(id);
+    }
+  });
+
+  const activeAssetsKeys = {
+    /** 追加默认必须存在的资产，防止用户漏选而导致运行报错 */
+    components: [
+      ...new Set([
+        ...KEYS_COMPONENTS,
+        'MetaConfig',
+        'Initializer',
+        'CanvasSetting',
+        'SegmentedLayout',
+        'Toolbar',
+        'ContextMenu',
+      ]),
+    ],
+
+    layouts: [...new Set([...KEYS_LAYOUT, 'Force'])],
+    elements: [...new Set([...KEYS_ELEMENTS, 'SimpleNode', 'SimpleEdge'])],
+  };
+
+  let GICC_LAYOUT; // 容器资产的配置详情
+  const components: any[] = [];
+  CMPS_CONFIG.forEach(c => {
+    if (!c) return;
+    const item = {
+      id: c.id,
+      mame: c.name,
+      info: c.info,
+      props: c.props,
+    };
+    if (item && activeAssetsKeys.components.indexOf(item.id) !== -1) {
+      components.push(item);
+      const { type } = item.info;
+      if (type === 'GICC_LAYOUT') GICC_LAYOUT = item;
+    }
+  });
+
+  try {
+    // 手动集成「布局容器」「画布容器」的原子资产
+    GICC_LAYOUT.props.containers[0].GI_CONTAINER = KEYS_GIAC_CONTENT;
+    components.forEach(item => {
+      if (item.id === 'ContextMenu') {
+        item.props.GI_CONTAINER = KEYS_GIAC_MENU;
+      }
+      if (item.id === 'Toolbar') {
+        item.props.GI_CONTAINER = KEYS_GIAC;
+      }
+      if (item.id === 'MetaConfig') {
+        item.props = { activeIds: activeAssetsKey };
+      }
+    });
+  } catch (error) {
+    console.log(error);
+  }
+
+  return {
+    config: {
+      components,
+      layout: {
+        // id: activeAssetsKeys.layouts[0],
+        id: 'Force2',
+        props: {
+          type: 'force',
+          presetLayout: {},
+        },
+      },
+      nodes: nodes,
+      edges: edges,
+      pageLayout: GICC_LAYOUT,
+    },
+    assets,
+    services,
+  };
+};
+const GISDK_TEST: React.FunctionComponent<GISDK_TESTProps> = props => {
+  const { config, assets, services } = calcProps(props);
+
+  return (
+    <div>
+      <GISDK config={config} assets={assets} services={services}></GISDK>
+    </div>
+  );
+};
+
+export default GISDK_TEST;

packages/gi-sdk/docs/demos/gi-sdk.tsx

@@ -194,7 +194,7 @@ const config: GIConfig = {
       type: 'INITIALIZER',
       name: '初始化器',
       props: {
-        serviceId: 'GI/GI_SERVICE_INTIAL_GRAPH_1',
+        serviceId: 'GI/GI_SERVICE_INTIAL_GRAPH',
         schemaServiceId: 'GI/GI_SERVICE_SCHEMA',
         GI_INITIALIZER: true,
         aggregate: false,