feat: update

.umirc.js

@@ -90,11 +90,15 @@ export default {
     ['zh-CN', '中文'],
     ['en-US', 'English'],
   ],
-  links: ['https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css'],
+  links: [
+    'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd.css',
+    'https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.4.36/dist/index.css',
+  ],
   scripts: [
     'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js',
     'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js',
     'https://gw.alipayobjects.com/os/lib/antd/4.6.6/dist/antd-with-locales.js',
+
     /** G6 **/
     'http://127.0.0.1:9001/g6.min.js',
 

packages/gi-sdk/docs/Testing.md

@@ -0,0 +1,14 @@
+---
+title: 本地测试
+order: 1
+group:
+  path: /quick-start
+  title: 快速开始
+  order: 3
+nav:
+  title: GISDK
+  path: /sdk
+  order: 1
+---
+
+GISDK_TESTING 介绍

packages/gi-sdk/docs/index.tsx → 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',
+        serviceId: 'GI/GI_SERVICE_INTIAL_GRAPH_1',
         schemaServiceId: 'GI/GI_SERVICE_SCHEMA',
         GI_INITIALIZER: true,
         aggregate: false,

packages/gi-sdk/docs/gi-sdk.md

@@ -0,0 +1,26 @@
+---
+title: 基本介绍
+order: 1
+group:
+  path: /quick-start
+  title: 快速开始
+  order: 3
+nav:
+  title: GISDK
+  path: /sdk
+  order: 1
+---
+
+## 使用场景
+
+GISDK 是构建 G6VP 产品的技术底座，它由 Graphin 组件封装而成，旨在通过提供统一的配置文件`config`,资产包`assets`，配合开放多源的服务`services` 即可渲染出一个图分析应用。
+
+大多数情况下，用户在 G6VP 产品上选择数据源，配置分析参数，导出代码即可得到这么一个可运行的 GISDK，无缝嵌入到自己的应用中。如下图所示
+
+<code src='./demos/gi-sdk.tsx'>
+
+但是在少部分情况下，我们需要脱离 G6VP 产品，直接以「写代码」的方式集成。如下图所示：
+
+<code src='./demos/gi-sdk.tsx'>
+
+## 属性解释

packages/gi-sdk/docs/index.en-US.md

@@ -0,0 +1,46 @@
+---
+title: Graphin - Graph Insight
+order: 0
+sidebar: false
+banner:
+  title: G6VP - GraphInsight
+  desc: G6VP takes its name from AntV G6 Visualization Platform and was formerly known as AntV/GraphInsight. It is an online visual analysis tool for graphs and a low-code tool for building graph applications.
+  image: https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*Gix7Rry3-5wAAAAAAAAAAABkARQnAQ
+  actions:
+    - text: Quick Start →
+      link: /graphin/quick-start/overview
+      type: primary
+  notifications:
+    - type: Heavy Released
+      title: AntV graph visual analysis solution is coming～
+      date: 2020.11.22
+      link: https://www.yuque.com/antv/g6/solution
+    - type: First Try
+      title: Graphin 1.0.0 has been published!
+      date: 2019.11.22
+      link: https://github.com/antvis/graphin
+ideas:
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9ziitmp/13668549-b393-42a2-97c3-a6365ba87ac2_w96_h96.png
+    title: Out-Of-The-Box Features
+    description: Built-in graph elements, interaction, layout, components, the basic graph visual analysis capabilities you need are ready!
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9ziik0f/487a2685-8f68-4c34-824f-e34c171d0dfd_w96_h96.png
+    title: Business Precipitation
+    description: node expand, sub-graph layout, algorithm analysis, optimization strategy, the demand for graph products you meet are ready!
+
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9zij2bh/67f75d56-0d62-47d6-a8a5-dbd0cb79a401_w96_h96.png
+    title: Good Development Experience
+    description: G6 + TypeScript + React, provide a complete type definition file, in line with your React development experience
+
+cases:
+  - logo: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*gOfZTJLVLwwAAAAAAAAAAAAAARQnAQ'
+    title: Motif Graph
+    description: Motif Graph is an online graph analysis platform built by Singapore Cylynx company based on Graphin graph visual analysis capabilities and AI graph intelligence technology. It supports risk monitoring to combat financial fraud and understands activities on the virtual asset chain through cross-chain analysis.
+    image: https://user-images.githubusercontent.com/28362229/108028838-6b5afe80-7067-11eb-9889-f67ab5e54ea0.png
+    link: https://www.cylynx.io/motif
+
+  - logo: 'https://img.alicdn.com/tfs/TB1rh1xy7T2gK0jSZFkXXcIQFXa-128-128.svg'
+    title: Graph Studio
+    description: Graph Studio is a one-stop graph development platform built by the Alibaba Cloud Dataworks Team based on Graph Compute. The graph analysis which is based on Graphin in this platform provides common graph analysis capabilities such as data retrieval, relationship diffusion, layout switching, node selection, association highlighting, and sharing, which can help users quickly complete related analysis work.
+    image: https://img.alicdn.com/tfs/TB1laWQyVT7gK0jSZFpXXaTkpXa-600-600.gif
+    link: https://gs-share-cn-shanghai.aliyuncs.com/index8b5ab67a3e754e02a77aae7871465031.html#/?mock=true&source=graphin'
+---

packages/gi-sdk/docs/index.md

@@ -0,0 +1,50 @@
+---
+title: G6VP | 图可视分析与应用研发工具
+sidebar: false
+order: 0
+banner:
+  title: G6VP 图可视分析工具
+  desc: G6VP 取名意为 AntV G6 Visualization Platform，曾用名 `AntV/GraphInsight`，它是一款在线图可视分析产品，也是一款图应用的低代码搭建工具。
+  image: https://gw.alipayobjects.com/mdn/rms_00edcb/afts/img/A*Gix7Rry3-5wAAAAAAAAAAABkARQnAQ
+  actions:
+    - text: 快速开始 →
+      link: /graphin/quick-start/overview
+      type: primary
+  notifications:
+    - type: 新产品
+      title: 图应用低代码搭建：GraphInsight
+      date: 2022.06.06
+      link: https://github.com/antvis/GraphInsight
+    - type: 重磅推出
+      title: AntV图可视分析解决方案，来啦～
+      date: 2020.11.22
+      link: https://www.yuque.com/antv/g6/solution
+    - type: 小试牛刀
+      title: Graphin 1.0.0 全新发布！
+      date: 2019.11.22
+      link: https://github.com/antvis/graphin
+ideas:
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9ziitmp/13668549-b393-42a2-97c3-a6365ba87ac2_w96_h96.png
+    title: 开箱即用
+    description: 内置图元素，交互，布局，组件，你要的基础图可视分析能力都在这里！
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9ziik0f/487a2685-8f68-4c34-824f-e34c171d0dfd_w96_h96.png
+    title: 业务沉淀
+    description: 关系扩散，子图布局，算法分析，优化策略，你所遇到的图产品需求都在这里！
+
+  - icon: https://gw.alipayobjects.com/os/q/cms/images/k9zij2bh/67f75d56-0d62-47d6-a8a5-dbd0cb79a401_w96_h96.png
+    title: 开发福音
+    description: G6 + TypeScript + React，提供完整的类型定义文件，符合你的React开发体验
+
+cases:
+  - logo: 'https://gw.alipayobjects.com/mdn/rms_402c1a/afts/img/A*gOfZTJLVLwwAAAAAAAAAAAAAARQnAQ'
+    title: Motif Graph
+    description: Motif Graph 是新加坡 Cylynx 公司，基于 Graphin 图可视分析能力 与 AI 图智能技术构建的一款在线图分析平台,支持的风险监控来打击财务欺诈，通过跨链分析了解虚拟资产链上的活动。
+    image: https://user-images.githubusercontent.com/28362229/108028838-6b5afe80-7067-11eb-9889-f67ab5e54ea0.png
+    link: https://www.cylynx.io/motif
+
+  - logo: 'https://img.alicdn.com/tfs/TB1rh1xy7T2gK0jSZFkXXcIQFXa-128-128.svg'
+    title: Graph Studio
+    description: Graph Studio 是阿里云Dataworks团队围绕Graph Compute引擎打造的一站式图开发平台。其中基于Graphin开发的图分析平台提供了数据检索、关系扩散、布局切换、节点筛选、关联高亮、分享等常用图分析能力，能够帮助用户快速完成相关分析工作
+    image: https://img.alicdn.com/tfs/TB1laWQyVT7gK0jSZFpXXaTkpXa-600-600.gif
+    link: https://gs-share-cn-shanghai.aliyuncs.com/index8b5ab67a3e754e02a77aae7871465031.html#/?mock=true&source=graphin'
+---

packages/gi-sdk/src/GISDK.tsx

@@ -22,7 +22,7 @@ export type SDKProps = {
   /** 注册的全局数据服务 */
   services: GIService[];
   style?: React.CSSProperties;
-  className?: string;
+
   children?: React.ReactNode[];
 };
 

packages/gi-sdk/src/GISDK_TEST.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { data, edgesCfg as defaultEdgesCfg, nodesCfg as defaultNodesCfg, schemaData } from '../docs/const';
+import { data, edgesCfg as defaultEdgesCfg, nodesCfg as defaultNodesCfg, schemaData } from '../docs/demos/const';
 import GISDK from './GISDK';
 import MetaConfig from './components/MetaConfig';
 import { getComponentsByAssets } from './process/getComponentsByAssets';

packages/gi-sdk/src/components/GIAC.tsx

@@ -19,10 +19,9 @@ const WrapTooltip = props => {
 export interface GIAComponentProps {
   GIAC: IGIAC;
   onClick?: () => void;
-
   className?: string;
 }
-const GIAComponent = (props: GIAComponentProps) => {
+const GIAComponent: React.FunctionComponent<GIAComponentProps> = props => {
   const { GIAC, onClick, className, ...others } = props;
   const {
     tooltip,