feat: update studio

antvis · Jun 27, 2023 · 3d0154b · 3d0154b
1 parent 084832a
commit 3d0154b
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 15 deletions.
diff --git a/packages/gi-sdk/README.md b/packages/gi-sdk/README.md
@@ -1 +1,66 @@
-## G6VP 探索分析画布
+## GISDK 组件
+
+> WIP
+
+## Studio 组件
+
+通过接口，获得应用渲染的配置参数，从而让用户可以这么实现
+
+```jsx
+export default () => {
+  return <window.GISDK.Studio id="xxxxx" service={getProject} />;
+};
+```
+
+组件属性说明
+
+- id：studio 的 唯一 id，可以通过接口获得全部的配置参数
+
+- service： 第三方托管平台提供的接口，类型：`POST`
+
+```js
+// 入参
+const request = {
+  id: 'app-xxx',
+};
+// 出参
+const response = {
+  workbook: {
+    id: 'd3a818ea-f833-4229-85ea-a6670dae4a18',
+    name: 'GI',
+    activeAssetsKeys: {},
+    projectConfig: {
+      nodes: [],
+      edges: [],
+      components: [],
+    },
+    themes: [],
+  },
+  dataset: {
+    id: 'ds_f16fce61-aa3e-420d-a6cc-6b409f9aa37e',
+    engineContext: {
+      engineId: 'R+',
+      schemaData: {},
+    },
+    data: {},
+  },
+  deps: {
+    react: '17.x',
+    'react-dom': '17.x',
+    localforage: '1.10.0',
+    antd: '4.24.8',
+    '@antv/gi-theme-antd': '0.4.2',
+    '@antv/g6': '4.8.14',
+    '@antv/graphin': '2.7.16',
+    '@antv/gi-sdk': '2.3.5',
+  },
+  GI_ASSETS_PACKAGES: {
+    GI_ASSETS_BASIC: {
+      name: '@antv/gi-assets-basic',
+      version: '2.3.6',
+      url: 'https://gw.alipayobjects.com/os/lib/antv/gi-assets-basic/2.3.6/dist/index.min.js',
+      global: 'GI_ASSETS_BASIC',
+    },
+  },
+};
+```
diff --git a/packages/gi-sdk/src/components/Studio.tsx b/packages/gi-sdk/src/components/Studio.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import GISDK from '../GISDK';
 import { getCombineServices, loaderCombinedAssets } from '../process';
+import { loader } from '../process/loaderAssets';
 
 export interface Project {
   dataset: {
@@ -19,7 +20,12 @@ export interface Project {
     themes: {};
   };
   deps: {
-    [pkgName: string]: string;
+    [key: string]: {
+      global: string;
+      name: string;
+      url: string;
+      version: string;
+    };
   };
   GI_ASSETS_PACKAGES: {
     [key: string]: {
@@ -47,9 +53,11 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
   const starStudio = async () => {
     try {
       const { data } = await service(id);
-      const { dataset, workbook, GI_ASSETS_PACKAGES } = data;
+      const { dataset, workbook, GI_ASSETS_PACKAGES, deps } = data;
       const { projectConfig } = workbook;
       const { engineContext } = dataset;
+      // 请求依赖资源包
+      await loader(Object.values(deps));
       // 根据包名，请求资产
       const assets = await loaderCombinedAssets(Object.values(GI_ASSETS_PACKAGES));
       // 设置引擎上下文

diff --git a/packages/gi-sdk/src/process/loaderAssets.tsx b/packages/gi-sdk/src/process/loaderAssets.tsx
@@ -5,7 +5,7 @@ export interface AssetPackage {
   version: string;
 }
 
-const loadCss = options => {
+export const loadCss = options => {
   const link = document.createElement('link');
   link.type = 'text/css';
   link.href = options.id || options.url;
@@ -15,7 +15,7 @@ const loadCss = options => {
   document.head.append(link);
 };
 
-const loadJS = async (options: AssetPackage) => {
+export const loadJS = async (options: AssetPackage) => {
   return new Promise(resolve => {
     // load js
     const script = document.createElement('script');
@@ -41,7 +41,7 @@ const loadJS = async (options: AssetPackage) => {
   });
 };
 
-const loader = async (options: AssetPackage[]) => {
+export const loader = async (options: AssetPackage[]) => {
   return Promise.all([
     ...options.map(opt => {
       const asset = window[opt.global];

diff --git a/packages/gi-site/src/components/Navbar/ExportSdk.tsx b/packages/gi-site/src/components/Navbar/ExportSdk.tsx
@@ -2,7 +2,7 @@ import { CodeOutlined } from '@ant-design/icons';
 import { Alert, Button, Col, Modal, Row } from 'antd';
 import React from 'react';
 import { useImmer } from 'use-immer';
-import { ANTD_VERSION, G6_VERSION, GI_THEME_ANTD_VERSION, GI_VERSION, GRAPHIN_VERSION } from '../../../.umirc';
+import { ANTD_VERSION, G2PLOT_VERSION, G6_VERSION, GI_VERSION, GRAPHIN_VERSION } from '../../../.umirc';
 import { useCodeSandbox, useHtml, useNodeModule } from '../../hooks';
 import { useContext } from '../../pages/Analysis/hooks/useContext';
 import { saveAs } from '../utils';
@@ -54,14 +54,54 @@ const SdkContent = () => {
       data: { transData: data },
     },
     deps: {
-      react: '17.x',
-      'react-dom': '17.x',
-      localforage: '1.10.0',
-      antd: ANTD_VERSION,
-      '@antv/gi-theme-antd': GI_THEME_ANTD_VERSION,
-      '@antv/g6': G6_VERSION,
-      '@antv/graphin': GRAPHIN_VERSION,
-      '@antv/gi-sdk': GI_VERSION,
+      React: {
+        url: 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+        name: 'react-dom',
+        version: '17.0.2',
+        global: 'React',
+      },
+      ReactDOM: {
+        url: 'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
+        name: 'react-dom',
+        version: '17.0.2',
+        global: 'ReactDOM',
+      },
+      antd: {
+        url: `https://gw.alipayobjects.com/os/lib/antd/${ANTD_VERSION}/dist/antd.min.js`,
+        name: 'antd',
+        version: ANTD_VERSION,
+        global: 'antd',
+      },
+      G6: {
+        url: `https://gw.alipayobjects.com/os/lib/antv/g6/${G6_VERSION}/dist/g6.min.js`,
+        name: '@antv/g6',
+        version: G6_VERSION,
+        global: 'G6',
+      },
+      Graphin: {
+        url: `https://gw.alipayobjects.com/os/lib/antv/graphin/${GRAPHIN_VERSION}/dist/graphin.min.js`,
+        name: '@antv/graphin',
+        version: GRAPHIN_VERSION,
+        global: 'Graphin',
+      },
+      GISDK: {
+        name: '@antv/gi-sdk',
+        version: GI_VERSION,
+        url: `https://gw.alipayobjects.com/os/lib/antv/gi-sdk/${GI_VERSION}/dist/index.min.js`,
+        global: 'GISDK',
+      },
+      G2Plot: {
+        url: `https://gw.alipayobjects.com/os/lib/antv/g2plot/${G2PLOT_VERSION}/dist/g2plot.min.js`,
+        name: '@antv/g2plot',
+        version: G2PLOT_VERSION,
+        global: 'G2Plot',
+      },
+      // '@antv/gi-theme-antd': {
+      //   name: '@antv/gi-sdk',
+      //   version: GI_THEME_ANTD_VERSION,
+      //   url: '',
+      //   global: '@antv/gi-theme-antd',
+      // },
     },
     GI_ASSETS_PACKAGES: JSON.parse(localStorage.getItem('GI_ASSETS_PACKAGES') || '{}'),
   };