@tuya-sat/sdf-main-sdk 0.0.1-beta.1

package/src/qiankun/index.ts

@@ -0,0 +1,174 @@
+import {
+  registerMicroApps,
+  start,
+  addGlobalUncaughtErrorHandler,
+  initGlobalState,
+  MicroAppStateActions,
+} from 'qiankun';
+import * as Sentry from '@sentry/react';
+import globalState from './globalState';
+
+import { modifySelectedMenu } from '@/components/BLayout/components/Menu';
+import { microThemeControl } from '@/micro-script/theme';
+
+import mqtt from '@/mqtt';
+import { processHtmlInTheme } from '@/micro-script/theme/util';
+import { skyReportFirstLoadApp, skyReportLoadApp } from '@/sky';
+import { curMicroAppCode } from '@/utils';
+import { themeSubscribe } from '@/utils/theme/store';
+import { getLangResource } from '@/lang/utils';
+import {
+  isSupportMobileWithFallback,
+  resourcePrefix,
+  tyLang,
+  permission,
+  region,
+  processLoadAssetInCss,
+} from './utils';
+import { gMainConfig } from '@/index';
+
+export let setGlobalState;
+export const micState: any = {};
+
+let apps = [];
+
+export const runQiankun = (props) => {
+  const { appList, ...microProps } = props;
+
+  apps = appList
+    .filter((item) => item.isAuth)
+    .map((item) => {
+      const app = {
+        name: item.oem_micro_app_id,
+        entry: item.resource,
+        container: '#container',
+        activeRule: item.active_rule,
+        props: {
+          ...microProps,
+          base: item.active_rule,
+          hasPermission: permission(item.oem_micro_app_id),
+          isSupportMobile: isSupportMobileWithFallback(),
+          resourcePrefix: resourcePrefix(item.resource),
+          tyLang,
+          langResource: getLangResource(item.oem_micro_app_id),
+          region,
+          modifySelectedMenu,
+          themeSubscribe,
+          mqtt: {
+            subscribeTopic: mqtt.subscribeTopic,
+            unsubscribeTopic: mqtt.unsubscribeTopic,
+          },
+          customConfig: item.micro_app_config,
+        },
+        // loader: renderLoader,
+      };
+      window._SDF_CONFIG &&
+        window._SDF_CONFIG?.sentry?.ENABLE &&
+        (app.props = {
+          ...app.props,
+          sentry: {
+            captureEvent: Sentry.captureEvent,
+            captureMessage: Sentry.captureMessage,
+            captureException: Sentry.captureException,
+          },
+        });
+      return app;
+    });
+
+  console.log('runQiankun');
+
+  const setLoading = (loading: boolean) => {
+    if (window._SDF_CONFIG?.features.is_edgecloud) {
+      props.setLoading(loading);
+    }
+  };
+
+  registerMicroApps(apps, {
+    beforeLoad: async () => {
+      setLoading(true);
+    },
+    beforeMount: async (app) => {
+      microThemeControl.beforeMount(app);
+    },
+    afterMount: async (app) => {
+      setLoading(false);
+      performance.mark(`${app.name}-end`);
+      performance.measure(app.name, `${app.name}-start`, `${app.name}-end`);
+      const measures = performance.getEntriesByName(app.name);
+      if (measures.length == 1) {
+        skyReportFirstLoadApp(curMicroAppCode(), measures[0].duration);
+      } else {
+        skyReportLoadApp(
+          curMicroAppCode(),
+          measures[measures.length - 1].duration
+        );
+      }
+    },
+    beforeUnmount: async (app) => {},
+    afterUnmount: async (app) => {
+      //取消订阅
+      mqtt.unsubscribeMicTopics();
+    },
+  });
+
+  const orgOpts = {
+    sandbox: { experimentalStyleIsolation: true },
+    singular: true,
+    fetch: async (url, ...args) => {
+      if (typeof url === 'string' && url.endsWith('.html')) {
+        return processHtmlInTheme(url, apps);
+      }
+      if (typeof url === 'string' && url.endsWith('.css')) {
+        return processLoadAssetInCss(apps, url, args);
+      }
+      return window.fetch(url, ...args);
+    },
+    getTemplate: (tpl) => {
+      return microThemeControl.getTemplate(tpl);
+    },
+    excludeAssetFilter: (url) => {
+      if (microThemeControl.cannotExclude(url)) {
+        return false;
+      }
+      if (url.includes('at.alicdn.com')) {
+        return false;
+      }
+      if (
+        !url.includes('micro_app_lazy') &&
+        (url.includes('baidu.com') ||
+          url.includes('googleapis.com') ||
+          url.includes('static1.tuyacn.com') ||
+          url.includes('static1.tuyaus.com') ||
+          url.includes('static1-we.tuyaeu.com') ||
+          url.includes('static1-ue.tuyaus.com') ||
+          url.includes('static1.tuyaeu.com') ||
+          url.includes('static1.tuyain.com') ||
+          url.includes('/static/apps/'))
+      ) {
+        return true;
+      }
+      return false;
+    },
+  };
+
+  const opts = gMainConfig?.hooks?.qiankunHook && {
+    ...orgOpts,
+    ...gMainConfig?.hooks?.qiankunHook(),
+  };
+
+  start(opts);
+  addGlobalUncaughtErrorHandler((error) => {
+    window._SDF_CONFIG &&
+      window._SDF_CONFIG?.sentry?.ENABLE &&
+      Sentry.captureException(error);
+  });
+  //主应用与微应用 微应用与微应用 之间相互通信
+  const actions: MicroAppStateActions = initGlobalState(globalState);
+
+  actions.onGlobalStateChange((state, prev) => {
+    Object.assign(micState, state);
+  }, true);
+  setGlobalState = (state) => {
+    actions.setGlobalState({ ...state });
+  };
+};

package/src/qiankun/utils/index.ts

@@ -0,0 +1,69 @@
+import Cookies from 'js-cookie';
+
+export const gPermissions = () => window?._SDF?.saasInfo?.permissions || {};
+
+export const isSupportMobileWithFallback = () => {
+  return (
+    window._SDF_CONFIG?.saas?.TOP_MOBLE_ENABLE !== false &&
+    window._SDF.saas.is_support_mobile !== false
+  );
+};
+
+export const resourcePrefix = (resource) => {
+  // 移除文件名或结尾的 /。比如：/static/light.1da6e61d.html ===> /static
+  return resource.replace(/\/([^/]+\.\w+)?$/, '');
+};
+
+export const tyLang = Cookies.get('main-i18next');
+
+export const permission = (appId) => {
+  return (permissionCode) => {
+    return gPermissions()
+      [appId].map((item) => item.permission_group)
+      .includes(permissionCode);
+  };
+};
+
+export const region = window._SDF?.region;
+
+const replacePathInCSS = (css, mapFn) => {
+  const hasQuote = /^\s*('|")/;
+  return [
+    /(@import\s+)(')(.+?)(')/gi,
+    /(@import\s+)(")(.+?)(")/gi,
+    /(url\s*\()(\s*')([^']+?)(')/gi,
+    /(url\s*\()(\s*")([^"]+?)(")/gi,
+    /(url\s*\()(\s*)([^\s'")].*?)(\s*\))/gi,
+  ].reduce((css, reg, index) => {
+    return css.replace(reg, (all, lead, quote1, path, quote2) => {
+      const ret = mapFn(path, quote1);
+      if (hasQuote.test(ret) && hasQuote.test(quote1)) quote1 = quote2 = '';
+      return lead + quote1 + ret + quote2;
+    });
+  }, css);
+};
+
+const isUrlReg = /^(data:|https?:|\/\/)/i;
+export const processLoadAssetInCss = (apps, url, args) => {
+  return {
+    async text() {
+      const res = await window.fetch(url, ...args);
+      let css = await res.text();
+      let baseUrl = '';
+      apps.forEach((app) => {
+        if (url.includes(app.props.resourcePrefix)) {
+          baseUrl = app.props.resourcePrefix;
+        }
+      });
+      if (baseUrl) {
+        css = replacePathInCSS(css, (path) => {
+          if (isUrlReg.test(path)) {
+            return path;
+          }
+          return baseUrl + '/' + path;
+        });
+      }
+      return css;
+    },
+  } as any;
+};

package/src/qiankun/xhook/index.ts

@@ -0,0 +1,193 @@
+import xhook from 'xhook';
+import * as Sentry from '@sentry/react';
+import { saasApis } from '@/utils';
+import { getI18n } from 'react-i18next';
+import { getMicroAppId, curMicroAppCode } from '@/utils';
+import { gMainConfig } from '@/index';
+
+let history;
+
+const processException = (req, code) => {
+  let isToLogin = false;
+  if (isCurHostHttp(req)) {
+    const {
+      location: { pathname },
+    } = history;
+    switch (code) {
+      case 1010:
+      case 111:
+        isToLogin = true;
+        window.location.replace(
+          `/application/relogin?from=${encodeURIComponent(pathname)}`
+        );
+
+        break;
+    }
+  }
+  return isToLogin;
+};
+
+const reportException = (res, data) => {
+  if (!data.success) {
+    const exception = { msg: data.msg, code: data.code };
+    data.t && (exception['t'] = data.t);
+    res.finalUrl && (exception['url'] = res.finalUrl);
+    Sentry.addBreadcrumb({ message: '接口请求异常', data: exception });
+    Sentry.captureException(new Error('接口请求异常'));
+  }
+};
+
+const transformMsg = (data) => {
+  switch (data.code) {
+    case 1106:
+      data.msg = getI18n().language.includes('zh')
+        ? '暂无权限，请联系管理员添加'
+        : 'No permission, please contact the administrator';
+      break;
+    default:
+      break;
+  }
+};
+
+const processXMLHttpRequest = (req, res, cb) => {
+  if (res.headers['content-type'].includes('application/json')) {
+    const data = JSON.parse(res.data);
+    transformMsg(data);
+    window._SDF_CONFIG &&
+      window._SDF_CONFIG?.sentry?.ENABLE &&
+      reportException(res, data);
+    const isToLogin = processException(req, data.code);
+    if (!isToLogin) cb(res);
+  } else {
+    cb(res);
+  }
+};
+
+const processFetch = (req, res, cb) => {
+  if (res.headers.get('content-type').includes('application/json')) {
+    res.json().then(function (data) {
+      transformMsg(data);
+      window._SDF_CONFIG &&
+        window._SDF_CONFIG?.sentry?.ENABLE &&
+        reportException(res, data);
+      const isToLogin = processException(req, data.code);
+      if (!isToLogin) cb(new Response(JSON.stringify(data)));
+    });
+  } else {
+    cb(res);
+  }
+};
+
+const isCurHostHttp = (req) => {
+  return new URL(req.url, window.location.origin).origin?.includes(
+    window.location.hostname
+  );
+};
+
+function guardApi<
+  T extends { method: string; path: string },
+  U extends T & Record<string, any>
+>(
+  apiInfo: T,
+  allowApis: Array<U>,
+  additionalValidator?: (api: U) => boolean
+): boolean {
+  const { method, path } = apiInfo;
+
+  /**
+   * 动态 api 路径可能存在的形式
+   * 1. /v1.0/assets/:asset_id/list
+   * 2. /v1.0/assets/tree/{asset_id}
+   * 3. /v1.0/assets/tree/${asset_id}
+   */
+  const apiPathMatchReg = /\/(:[^/]+|\$?{[^/]+})/g;
+  let isLegal = false;
+
+  allowApis.forEach((api) => {
+    if (isLegal) {
+      return;
+    }
+
+    if (api.method !== method) {
+      return;
+    }
+
+    isLegal = new RegExp(
+      `^${api.path.replace(apiPathMatchReg, '/[^/]+')}/?$`
+    ).test(path);
+
+    // 在匹配 `method`、`path` 的前提下，再使用 `additionalValidator()` 进行校验
+    if (isLegal && additionalValidator) {
+      isLegal = additionalValidator(api);
+    }
+  });
+
+  return isLegal;
+}
+
+const getMicroIdByReq = (req) => {
+  if (typeof req.url === 'string') {
+    const url = new URL(
+      req.url.replace(/^\s*\/(custom-api|open-api)/, ''),
+      window.location.origin
+    );
+
+    const currentApiInfo = {
+      method: req.method,
+      path: url.pathname,
+    };
+
+    const currentAppId = getMicroAppId();
+    const appIds = [
+      currentAppId,
+      ...Object.keys(saasApis).filter((id) => id !== currentAppId),
+    ];
+
+    for (const id of appIds) {
+      if (saasApis[id] && guardApi(currentApiInfo, saasApis[id])) {
+        return id;
+        break;
+      }
+    }
+  }
+
+  return 'main-app';
+};
+
+export const apiIntercept = ({ mainHistory }) => {
+  history = mainHistory;
+  const _csrf = window.csrf;
+  xhook.before((req) => {
+    if (isCurHostHttp(req)) {
+      if (!req.headers['micro-app-id']?.includes('main-app')) {
+        req.headers && (req.headers['micro-app-id'] = getMicroIdByReq(req));
+        req.headers && (req.headers['micro-app-code'] = curMicroAppCode());
+      }
+      _csrf &&
+        req.headers &&
+        !req.headers['csrf-token'] &&
+        (req.headers['csrf-token'] = _csrf);
+
+      if (gMainConfig?.hooks?.httpHook?.before) {
+        gMainConfig?.hooks?.httpHook?.before(req);
+      }
+    }
+  });
+
+  xhook.after((req, res, cb) => {
+    if (gMainConfig?.hooks?.httpHook?.after) {
+      gMainConfig?.hooks?.httpHook?.after(res, cb);
+    }
+
+    try {
+      const isFetch = !res.data;
+      if (isFetch) {
+        processFetch(req, res, cb);
+      } else {
+        processXMLHttpRequest(req, res, cb);
+      }
+    } catch (error) {
+      cb(res);
+    }
+  });
+};

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/sentry/index.ts

@@ -0,0 +1,33 @@
+import * as Sentry from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
+import { getMicroAppId, curMicroAppName } from '@/utils';
+
+if (window._SDF_CONFIG && window._SDF_CONFIG?.sentry?.ENABLE) {
+  Sentry.init({
+    dsn: window._SDF_CONFIG.sentry.DSN,
+    integrations: [new Integrations.BrowserTracing()],
+    tracesSampleRate: window._SDF_CONFIG.sentry.TRACES_SAMPLE_RATE,
+    environment: window._SDF_CONFIG.sentry.ENVIRONMENT,
+    release: window._SDF_CONFIG.release,
+    beforeSend(event) {
+      const saasInfo = JSON.parse(localStorage.getItem('SAAS_INFO'));
+      const userInfo = JSON.parse(localStorage.getItem('USER_INFO'));
+
+      saasInfo &&
+        (event.tags = {
+          ...event.tags,
+          ...{
+            saasname: (saasInfo as any).saas_name,
+            saasid: (saasInfo as any).saas_id,
+            micappname: curMicroAppName(),
+            micappid: getMicroAppId() || 'main-id',
+          },
+        });
+
+      userInfo &&
+        (event.user = { username: userInfo.username, uid: userInfo.uid });
+
+      return event;
+    },
+  });
+}

package/src/sky/index.ts

@@ -0,0 +1,57 @@
+import { browserType } from '@/utils';
+export const initSky = () => {
+  window.TPM?.push(['setAppId', 'sdf']);
+  window.TPM?.push(['setVersion', window._SDF.runtime]);
+};
+
+export const skyReport = (microCode: string) => {
+  window._SDF?.saas?.skyEyeEnable &&
+    window.TPM?.push([
+      'uaTrack',
+      'ty_l3xrz9m9y5gujut7u8ss3ky08c4hajxa',
+      {
+        domain: window.location.hostname,
+        micro_code: microCode,
+        env: curEnv(),
+        browser: browserType(),
+      },
+    ]);
+};
+
+export const skyReportFirstLoadApp = (microCode: string, time: number) => {
+  window._SDF?.saas?.skyEyeEnable &&
+    window.TPM?.push([
+      'uaTrack',
+      'ty_ys4az0dsmmvmmnc4idzm8l7fqbx2y16d',
+      {
+        micro_code: microCode,
+        env: curEnv(),
+        browser: browserType(),
+        first_load_timing: time,
+      },
+    ]);
+};
+
+export const skyReportLoadApp = (microCode: string, time: number) => {
+  window._SDF?.saas?.skyEyeEnable &&
+    window.TPM?.push([
+      'uaTrack',
+      'ty_ys4az0dsmmvmmnc4idzm8l7fqbx2y16d',
+      {
+        micro_code: microCode,
+        env: curEnv(),
+        browser: browserType(),
+        load_timing: time,
+      },
+    ]);
+};
+
+export const curEnv = () => {
+  if (window.location.hostname.includes('fast-daily')) {
+    return 'daily';
+  } else if (window.location.hostname.includes('fast-cn')) {
+    return 'pre';
+  } else {
+    return 'prod';
+  }
+};

package/src/theme/custom-dark.less

@@ -0,0 +1,64 @@
+@import './custom-light.less';
+@pageBgc: #191c29;
+@cardBgc: #282c3b;
+@navBgc: #2c303f;
+
+@splitBgc: rgba(255, 255, 255, 0.12);
+@borderBgc: rgba(255, 255, 255, 0.06);
+@selectBgc: rgba(24, 144, 255, 0.2); // select选择框边框色
+
+@select-border-color: rgba(255, 255, 255, 0.2);
+@table-bg: @navBgc;
+@table-header-bg: @cardBgc;
+// @table-border-color:rgba (255, 255, 255, 0.06);
+// 表格边框色
+@border-color-split: rgba(255, 255, 255, 0.06);
+@checkbox-color: rgba(255, 255, 255, 0.06);
+// checkbox 边框色
+@border-color-base: rgba(255, 255, 255, 0.2);
+// 表格hover色
+@table-row-hover-bg: #282c3b;
+@component-background: @navBgc;
+@main-menu-item-selected-color: rgba(255, 255, 255, 0.65);
+@main-menu-item-selected-color-hover: rgb(255, 255, 255);
+@main-menu-background-color: @navBgc;
+
+// 分组下 标题背景
+@main-menu-collapsed-title-background: @navBgc;
+// 分组下 hover背景
+@mani-menu-collapsed-item: @selectBgc;
+@main-app-setting-top: @splitBgc;
+
+@main-app-layout-header-bottom: @item-hover-bg;
+@popover-bg: @navBgc;
+@layout-header-background: @cardBgc;
+// 菜单栏
+@layout-sider-background: @navBgc;
+// 分组下 菜单背景
+@mani-menu-collapsed-background: @navBgc;
+
+@layout-header-background: @cardBgc;
+@select-dropdown-bg: @navBgc;
+@select-item-selected-bg: @primary-color;
+
+@body-background: @pageBgc;
+
+@menu-item-active-bg: #1f2333;
+
+@main-app-scrollbar-thumb-bg: #56606d;
+@main-app-scrollbar-track-bg: #293846;
+
+@svg-containter-hover-color: @primary-color;
+@svg-containter-line-hover-color: @primary-color;
+@main-menu-item-icon-bg: rgba(255, 255, 255, 0.5);
+
+@main-app-menu-collapsed: #1f2333;
+@text-color-describe: rgba(255, 255, 255, 0.45);
+
+@svg-containter-line-color: rgba(255, 255, 255, 0.12);
+
+@svg-containter-content-color: #fff;
+
+@svg-containter-bg-color: @navBgc;
+
+@main-static-color: rgba(255, 255, 255, 0.3);

package/src/theme/custom-light.less

@@ -0,0 +1,48 @@
+@pageBgc: #f5f5f5;
+@cardBgc: #f1f1f1;
+
+@navBgc: @component-background;
+
+@splitBgc: @item-hover-bg;
+@borderBgc: @item-hover-bg;
+@select-border-color: #d9d9d9;
+
+@table-row-hover-bg: #fafafa;
+@main-menu-item-selected-color: @text-color;
+@main-menu-item-selected-color-hover: @menu-highlight-color;
+@main-menu-background-color: @component-background;
+@main-layout-background-color: @item-hover-bg;
+
+@mani-menu-collapsed-background: @component-background;
+
+// 分组下 标题背景
+@main-menu-collapsed-title-background: @component-background;
+
+// 分组下 hover背景
+@mani-menu-collapsed-item: @item-hover-bg;
+@main-app-setting-top: #eef0f3;
+
+@main-app-layout-header-bottom: @item-hover-bg;
+@layout-header-background: #fff;
+
+@main-app-scrollbar-thumb-bg: #cccdcc;
+@main-app-scrollbar-track-bg: #ededed;
+
+@svg-containter-hover-color: @primary-color;
+
+@svg-containter-line-hover-color: @primary-color;
+@main-menu-item-icon-bg: rgba(0, 0, 0, 0);
+
+@main-app-drop-down-hover-color: @item-hover-bg;
+
+@text-color-describe: rgba(0, 0, 0, 0.45);
+
+@main-app-menu-collapsed: @primary-1;
+
+@svg-containter-line-color: #f5f5f5;
+
+@svg-containter-content-color: #000;
+
+@svg-containter-bg-color: #e6e9ea;
+
+@main-static-color: rgba(0, 0, 0, 0.25);