feat(platform): add amap route

Author: xiejay97

package.json

@@ -25,6 +25,8 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@amap/amap-jsapi-types": "^0.0.8",
     "@ant-design/icons-svg": "^4.2.1",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",

packages/hooks/src/useForkRef.ts

@@ -1,7 +1,7 @@
 import { isFunction, isObject } from 'lodash';
 import { useCallback } from 'react';
 
-function setRef(ref: any, value: any): void {
+export function setRef(ref: any, value: any): void {
   if (isFunction(ref)) {
     ref(value);
   } else if (isObject(ref) && 'current' in ref) {

packages/platform/src/app/Routes.tsx

@@ -17,7 +17,7 @@ import AppExceptionRoute from './routes/exception/Exception';
 import AppLayout from './routes/layout/Layout';
 import AppLoginRoute from './routes/login/Login';
 
-const AppAMapRoute = React.lazy(() => import('./routes/dashboard/AMap'));
+const AppAMapRoute = React.lazy(() => import('./routes/dashboard/amap/AMap'));
 const AppEChartsRoute = React.lazy(() => import('./routes/dashboard/echarts/ECharts'));
 
 const AppACLRoute = React.lazy(() => import('./routes/test/acl/ACL'));

packages/platform/src/app/components/amap/AMap.tsx

@@ -0,0 +1,83 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { isNull, isUndefined } from 'lodash';
+import React, { useCallback, useRef } from 'react';
+
+import { setRef } from '@react-devui/hooks/useForkRef';
+import { getClassName } from '@react-devui/utils';
+
+const CONFIG: {
+  key?: string;
+  securityJsCode?: string | null;
+  version?: string;
+} = {
+  version: '2.0',
+};
+
+export interface AppAMapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  aKey?: string;
+  aSecurityJsCode?: string | null;
+  aVersion?: string;
+  aPlugins?: string[];
+  aOptions?: AMap.MapOptions;
+}
+
+function AMap(props: AppAMapProps, ref: React.ForwardedRef<AMap.Map>): JSX.Element | null {
+  const {
+    aKey = CONFIG.key,
+    aSecurityJsCode = CONFIG.securityJsCode,
+    aVersion = CONFIG.version,
+    aPlugins,
+    aOptions,
+
+    ...restProps
+  } = props;
+
+  //#region Ref
+  const elRef = useRef<HTMLDivElement>(null);
+  //#endregion
+
+  const instanceRef = useRef<AMap.Map | null>(null);
+  const containerRef = useCallback(
+    (el: HTMLElement | null) => {
+      instanceRef.current?.destroy();
+      instanceRef.current = null;
+      setRef(ref, instanceRef.current);
+
+      if (el) {
+        if (isUndefined(aKey) || isUndefined(aSecurityJsCode) || isUndefined(aVersion)) {
+          throw new Error('Configs of amap is required!');
+        }
+
+        if (!isNull(aSecurityJsCode)) {
+          window['_AMapSecurityConfig'] = {
+            // serviceHost: 'http://1.1.1.1:80/_AMapService',
+
+            securityJsCode: aSecurityJsCode,
+          };
+        }
+
+        AMapLoader.load({
+          key: aKey,
+          version: aVersion,
+          plugins: aPlugins,
+        })
+          .then((AMap) => {
+            instanceRef.current = new AMap.Map(el, aOptions);
+            setRef(ref, instanceRef.current);
+          })
+          .catch((e) => {
+            console.error(e);
+          });
+      }
+    },
+    [aKey, aOptions, aPlugins, aSecurityJsCode, aVersion, ref]
+  );
+
+  return (
+    <div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-amap')}>
+      <div ref={containerRef} className="app-amap__container"></div>
+    </div>
+  );
+}
+
+export const AppAMap = React.forwardRef(AMap);

packages/platform/src/app/components/amap/index.ts

@@ -0,0 +1 @@
+export * from './AMap';

packages/platform/src/app/components/chart/Chart.tsx

@@ -0,0 +1,76 @@
+import type { AppTheme } from '../../App';
+
+import * as echarts from 'echarts';
+import { cloneDeep, merge } from 'lodash';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useAsync, useResize, useStorage } from '@react-devui/hooks';
+import { setRef } from '@react-devui/hooks/useForkRef';
+import { getClassName } from '@react-devui/utils';
+
+import { STORAGE_KEY } from '../../../config/storage';
+import chartTheme from './theme.json';
+
+echarts.registerTheme('light', chartTheme.light);
+echarts.registerTheme('dark', merge(cloneDeep(chartTheme.light), chartTheme.dark));
+
+export interface AppEChartsProps<O extends echarts.EChartsOption> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  aOption: O | null;
+}
+
+function ECharts<O extends echarts.EChartsOption>(props: AppEChartsProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null {
+  const {
+    aOption,
+
+    ...restProps
+  } = props;
+
+  //#region Ref
+  const elRef = useRef<HTMLDivElement>(null);
+  //#endregion
+
+  const dataRef = useRef<{
+    clearTid?: () => void;
+  }>({});
+
+  const async = useAsync();
+
+  const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
+
+  const [instance, setInstance] = useState<echarts.ECharts | null>(null);
+  const containerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setInstance((draft) => {
+        draft?.dispose();
+        const instance = el ? echarts.init(el, themeStorage.value, { renderer: 'svg' }) : null;
+        setRef(ref, instance);
+        return instance;
+      });
+    },
+    [ref, themeStorage.value]
+  );
+
+  useEffect(() => {
+    if (instance && aOption) {
+      instance.setOption(aOption);
+    }
+  }, [aOption, instance]);
+
+  useResize(elRef, () => {
+    if (instance) {
+      dataRef.current.clearTid?.();
+      dataRef.current.clearTid = async.setTimeout(() => {
+        dataRef.current.clearTid = undefined;
+        instance.resize({ animation: { duration: 200 } });
+      }, 100);
+    }
+  });
+
+  return (
+    <div {...restProps} ref={elRef} className={getClassName(restProps.className, 'app-echarts')}>
+      <div ref={containerRef} className="app-echarts__container"></div>
+    </div>
+  );
+}
+
+export const AppECharts = React.forwardRef(ECharts);

packages/platform/src/app/components/chart/index.ts

@@ -0,0 +1 @@
+export * from './ECharts';

packages/platform/src/app/components/echarts/ECharts.tsx

@@ -154,6 +154,11 @@
       "breadcrumb": {
         "itemStyle": {
           "color": "var(--d-color-icon-decorator)"
+        },
+        "emphasis": {
+          "itemStyle": {
+            "color": "var(--d-color-primary-lighter)"
+          }
         }
       }
     },
@@ -283,7 +288,7 @@
       },
       "emphasis": {
         "iconStyle": {
-          "borderColor": "var(--d-text-color)"
+          "borderColor": "var(--d-color-primary-lighter)"
         }
       }
     },