From 1bba97cfc535b7c73cbc34368aadc0e6afe0823f Mon Sep 17 00:00:00 2001
From: mutu <gegenhasi.gghs@antgroup.com>
Date: Mon, 22 Jul 2024 19:24:28 +0800
Subject: [PATCH] =?UTF-8?q?perf(GISDK):=20SDK=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=BC=A0=E5=85=A5=E9=A2=9D=E5=A4=96=E7=9A=84props?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/gi-sdk-app/src/index.tsx           |  8 +++++---
 packages/gi-sdk/src/GISDK.tsx               | 14 +++++++++++---
 packages/gi-sdk/src/hooks/useComponents.tsx |  6 +++++-
 packages/gi-sdk/src/typing.ts               |  4 ++++
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/gi-sdk-app/src/index.tsx b/packages/gi-sdk-app/src/index.tsx
index 5ffd8f5c1..5555e6610 100644
--- a/packages/gi-sdk-app/src/index.tsx
+++ b/packages/gi-sdk-app/src/index.tsx
@@ -42,11 +42,12 @@ export interface StudioProps {
   service: (id: string) => Promise<{ data: Project }>;
   loadingText?: string;
   loadingComponent?: React.ReactElement;
+  extraParams?: Record<string, any>;
 }
 
 const Studio: React.FunctionComponent<StudioProps> = props => {
   // @ts-ignore
-  const { id, service, loadingText = '正在加载图应用...', loadingComponent } = props;
+  const { id, service, loadingText = '正在加载图应用...', loadingComponent, extraParams } = props;
   const [state, setState] = React.useState({
     isReady: false,
     assets: null,
@@ -54,6 +55,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
     services: [],
     ThemeComponent: () => null,
     GISDK: () => <></>,
+    extraParams: {},
   });
 
   const startStudio = async () => {
@@ -118,7 +120,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
   }, []);
   const { assets, isReady, config, services, ThemeComponent, GISDK } = state;
   if (!isReady) {
-     // 支持传入自定义loading组件
+    // 支持传入自定义loading组件
     return loadingComponent ?? <Loading title={loadingText} />;
   }
 
@@ -127,7 +129,7 @@ const Studio: React.FunctionComponent<StudioProps> = props => {
       {/** @ts-ignore */}
       <ThemeComponent style={{ visibility: 'hidden', position: 'absolute' }} />
       {/** @ts-ignore */}
-      <GISDK config={config} assets={assets} services={services} id={`GI_STUDIO_${id}`} />
+      <GISDK config={config} assets={assets} services={services} id={`GI_STUDIO_${id}`} extraParams={extraParams} />
     </>
   );
 };
diff --git a/packages/gi-sdk/src/GISDK.tsx b/packages/gi-sdk/src/GISDK.tsx
index 8af38b829..795af0b2b 100644
--- a/packages/gi-sdk/src/GISDK.tsx
+++ b/packages/gi-sdk/src/GISDK.tsx
@@ -20,9 +20,8 @@ let updateHistoryTimer: number;
 const GISDK = (props: Props) => {
   const graphinRef = React.useRef<null | Graphin>(null);
   // @ts-ignore
-  const { children, assets, id, services, config, locales } = props;
+  const { children, assets, id, services, config, locales, extraParams = {} } = props;
   const { language = 'zh-CN', ...localeMessages } = locales || {};
-
   const GISDK_ID = React.useMemo(() => {
     if (!id) {
       const defaultId = `${Math.random().toString(36).substr(2)}`;
@@ -63,6 +62,7 @@ const GISDK = (props: Props) => {
     },
     //@ts-ignore
     GISDK_ID,
+    extraParams: {}
   });
 
   React.useEffect(() => {
@@ -71,6 +71,13 @@ const GISDK = (props: Props) => {
     });
   }, [props.config]);
 
+  // 更新参数
+  React.useEffect(() => {
+    updateState(draft => {
+      draft.extraParams = props.extraParams?.GISDK;
+    });
+  }, [props.extraParams]);
+
   const {
     layout: layoutCfg,
     components: componentsCfg = [],
@@ -361,8 +368,9 @@ const GISDK = (props: Props) => {
     return null;
   }
 
+  const { GISDK: GISDKExtraParams, ...componentExtraProps } = extraParams;
   const { renderComponents, InitializerComponent, InitializerProps, GICC_LAYOUT_COMPONENT, GICC_LAYOUT_PROPS } =
-    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets);
+    getComponents({ ...state, HAS_GRAPH }, config.components, ComponentAssets, componentExtraProps);
 
   const graphData = useMemo(() => {
     const nodeMap = {};
diff --git a/packages/gi-sdk/src/hooks/useComponents.tsx b/packages/gi-sdk/src/hooks/useComponents.tsx
index 3c7d4c29a..715262c7e 100644
--- a/packages/gi-sdk/src/hooks/useComponents.tsx
+++ b/packages/gi-sdk/src/hooks/useComponents.tsx
@@ -10,7 +10,7 @@ const DEFAULT_GICC_LAYOUT = {
   },
 };
 
-const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
+const useComponents = (state, propsComponentsCfg, ComponentAssets, componentExtraProps = {}) => {
   const { config, initializer, GICC_LAYOUT, components, GISDK_ID } = state;
   const { components: stateComponentsCfg } = config;
   const ComponentCfgMap = propsComponentsCfg.concat(stateComponentsCfg).reduce((acc, curr) => {
@@ -74,6 +74,9 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
         };
       }
 
+      // 传入的额外组件props
+      const extraProps = componentExtraProps?.[id] || {};
+
       return (
         <Component
           key={id}
@@ -82,6 +85,7 @@ const useComponents = (state, propsComponentsCfg, ComponentAssets) => {
           ComponentCfgMap={ComponentCfgMap}
           {...itemProps}
           {...GIProps}
+          {...extraProps}
         />
       );
     });
diff --git a/packages/gi-sdk/src/typing.ts b/packages/gi-sdk/src/typing.ts
index e0ddb59c4..e79caffc9 100644
--- a/packages/gi-sdk/src/typing.ts
+++ b/packages/gi-sdk/src/typing.ts
@@ -73,6 +73,8 @@ export interface State<
 
   /** 是否使用缓存的布局 */
   layoutCache: boolean;
+  /** 额外参数 */
+  extraParams: Record<string, any>;
 }
 
 export interface Props {
@@ -102,6 +104,8 @@ export interface Props {
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactChildren | JSX.Element | JSX.Element[];
+  /** 额外参数 */
+  extraParams?: Record<string, any>;
 }
 
 export type AssetType =