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

package/src/index.tsx

@@ -0,0 +1,105 @@
+import './index.css';
+import './utils/gt.js';
+import './public-path.js';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { initialPlugins } from './plugins';
+import reportWebVitals from './reportWebVitals';
+import { initSky } from './sky';
+import App from './App';
+
+console.log('sdf-main-sdk');
+import './sentry';
+export { runQiankun } from './qiankun';
+export { apiIntercept } from './qiankun/xhook';
+export { isSupportMobileWithFallback } from './qiankun/utils';
+export { getMicroAppId, curMicroAppName, curMicroAppCode } from './utils';
+
+export { api, URLS } from './api';
+
+export { default as i18n } from './lang';
+export {
+  dynamicHeaderMenu,
+  switchLang,
+  langList,
+  gLang,
+  oemSaasAy,
+  getMenus,
+} from './lang/utils';
+
+export {
+  WhitePathList,
+  EVENT_NOTICE,
+  CHARGE_STATUS,
+  TENANT_ID_REGEXP,
+  US_TELE_REGEXP,
+  EMAIL_REGEXP,
+  ExpirationLogo,
+  SafePath,
+} from './constant';
+
+export { default as Page403 } from './pages/403';
+export { default as Page404 } from './pages/404';
+export { default as Expiration } from './pages/expiration';
+export { default as ReLogin } from './pages/relogin';
+export { default as Forget } from './pages/forgot';
+export { default as Register } from './pages/register';
+export { default as Login } from './pages/login';
+export { default as Home } from './pages/home';
+export { default as Setting } from './pages/home/setting';
+
+export { default as pages } from './pages';
+
+export { useSaasInfo, micApps, permissions, apis } from './hooks';
+
+export interface IHooks {
+  enterAppHook: () => void;
+  httpHook: () => void;
+  unLoginSaaSHook: (saas) => void;
+  loginApiHook: () => void;
+  beforeLoginApiHook: () => void;
+  afterLoginApiHook: () => void;
+  beforeHomeHook: () => void;
+  qiankunHook: () => void;
+  enterBeforeMenuHook: () => void;
+  enterNavMenuhook: () => void;
+  enterBeforeBdbHook: () => void;
+}
+
+export interface IMainConfig {
+  pages?: {
+    [key: string]: {
+      name: string;
+      component: React.FC;
+    };
+  };
+  lang?: {
+    zh: Object;
+    en: Object;
+  };
+  hooks: IHooks;
+}
+
+export let gMainConfig;
+
+export const bootStrapSDF = async (mainConfig: IMainConfig) => {
+  console.log('bootStrapSDF');
+  window._SDF?.saas?.skyEyeEnable && initSky();
+  console.log('mainConfig', mainConfig);
+  gMainConfig = mainConfig;
+  mainConfig?.hooks?.enterAppHook && (await mainConfig.hooks.enterAppHook());
+  await initialPlugins();
+  mainConfig?.hooks?.unLoginSaaSHook &&
+    (await mainConfig.hooks.unLoginSaaSHook(window._SDF.saas));
+  await initialPlugins();
+  ReactDOM.render(
+    <BrowserRouter basename={window.location.pathname.match(/\/g\/\d*/)?.[0]}>
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    </BrowserRouter>,
+    document.getElementById('root')
+  );
+  reportWebVitals();
+};

package/src/lang/en.json

@@ -0,0 +1,266 @@
+{
+  "translation": {
+    "login": {
+      "title": "SaaS Framework Demo",
+      "tabs": {
+        "tele": "Phone Number",
+        "email": "Email"
+      },
+      "form": {
+        "username": {
+          "label": "Account",
+          "validate": {
+            "require": "Please input account",
+            "pattern": "Please enter the correct mobile number or email",
+            "emailPattern": "Email address format is incorrect",
+            "phonePattern": "Phone number format is incorrect"
+          },
+          "placeholder": "Please enter e-mail/phone number"
+        },
+        "password": {
+          "label": "Password",
+          "validate": {
+            "require": "Please input password",
+            "pattern": "Password length is 8-20 and contains at least three character types (numbers, uppercase letters, lowercase letters and English symbols)"
+          },
+          "placeholder": "Please enter password"
+        },
+        "newPassword": {
+          "label": "New Password"
+        },
+        "phone": {
+          "label": "Phone number",
+          "phonePattern": "Phone number format is incorrect"
+        },
+        "code": {
+          "require": "Confirmation code",
+          "requireAccount": "Please enter the address to receive the verification code",
+          "placeholder": "confirmation code",
+          "getCode": "verification code",
+          "len": "Please enter the 6-digit verification code",
+          "countdown": "after "
+        },
+        "tenantId": {
+          "label": "Tenant ID",
+          "placeholder": "Please enter tenant ID",
+          "require": "Please enter tenant ID",
+          "pattern": "The tenant ID is 4-16 characters long and must start with a lowercase letter (lowercase letters, numbers, and hyphens are supported)"
+        }
+      },
+      "signIn": "Sign In",
+      "forgot": "Forgot password?",
+      "back2login": "Back to login",
+      "resetPwd": "Reset Password",
+      "resetPwdSuccess": "Password changed successfully, please use the new password to log in",
+      "text": "Agree to ",
+      "service": "Terms of Use",
+      "legal": "Legal Statement",
+      "privacy": "Privacy Policy",
+      "admin_account_login": "Admin Login",
+      "sub_account_login": "User Login",
+      "lang": "English",
+      "thirdLoginError": "Third-party login failed"
+    },
+    "menu": {
+      "title": {
+        "default": "SaaS Framework Demo",
+        "assets": "Asset Management",
+        "devices": "Device Management",
+        "setting": "Account Settings",
+        "permission": "Role & Permission",
+        "account": "Users"
+      },
+      "edition": {
+        "preview": "PREVIEW",
+        "latest": "LATEST",
+        "stable": "STABLE",
+        "trial": "TRIAL"
+      },
+      "logout": "Sign out"
+    },
+    "setting": {
+      "title": "Settings",
+      "account": "User Account",
+      "phone": "Phone Number",
+      "email": "Mail",
+      "bind": "Bind",
+      "unBind": "Unbind",
+      "bindPhone": "Bind Phone Number",
+      "bindEmail": "Bind Email Address",
+      "modify": "Modify",
+      "modifyPhone": "Modify",
+      "modifyEmail": "Modify",
+      "phoneLable": "Enter the mobile number.",
+      "emailLable": "Enter your email address.",
+      "accountLable": "User Account (Login Account)",
+      "name": "Name",
+      "username": "Username",
+      "password": "Password",
+      "role": "",
+      "modifyPwd": "Change Password",
+      "language": "Language",
+      "form": {
+        "oldPassword": {
+          "label": "Old password",
+          "validate": {
+            "require": "Please enter the old password",
+            "pattern": "Password length is 8-20 and contains at least three character types (numbers, uppercase letters, lowercase letters and English symbols)"
+          }
+        },
+        "newPassword": {
+          "label": "New password",
+          "validate": {
+            "require": "Please enter a new password",
+            "pattern": "Password length is 8-20 and contains at least three character types (numbers, uppercase letters, lowercase letters and English symbols)"
+          }
+        },
+        "confirm": {
+          "label": "Confirm new password",
+          "validate": {
+            "require": "Please enter the new password again",
+            "pattern": "Password length is 8-20 and contains at least three character types (numbers, uppercase letters, lowercase letters and English symbols)",
+            "unanimous": "The two password entries are inconsistent"
+          }
+        }
+      },
+      "modifySuccess": "Password successfully changed"
+    },
+    "notice": {
+      "title": "Message Details",
+      "typeSelect": {
+        "placeholder": " Type",
+        "all": "All",
+        "message": "Message Notification",
+        "alert": "Alarm Message"
+      },
+      "originSelect": {
+        "placeholder": "Source",
+        "all": "All",
+        "center": "Message Center",
+        "app": "App Push",
+        "short": "SMS",
+        "email": "Email",
+        "telephone": "Voice"
+      },
+      "StatusSelect": {
+        "placeholder": "Status",
+        "all": "All",
+        "readed": "Read",
+        "unread": "Unread"
+      },
+      "badge": {
+        "title": "Message Notifications",
+        "type": "Notification Types",
+        "message": "View all messages"
+      },
+      "tools": {
+        "button": {
+          "read": "Mark as Read",
+          "unread": "Mark as Unread",
+          "delete": "Delete",
+          "allRead": "Mark All as Read"
+        },
+        "checkbox": {
+          "onlyViewUnread": "Unread Only"
+        },
+        "select": {
+          "all": "All",
+          "system": "System Notification",
+          "device": "Device Message",
+          "work": "Business Message"
+        },
+        "popconfirm": {
+          "title": "Are you sure to delete the selected message(s)?",
+          "content": "Unrecoverable after deletion",
+          "cancel": "Cancel",
+          "ok": "OK"
+        },
+        "selectedAllContent": "Everything in message has been selected",
+        "itemsNums": "All {{num}} message on this page are selected",
+        "totalNums": "Select all {{num}} messages ",
+        "cancelSelect": "Cancel",
+        "pread": "Mark as read",
+        "punread": "Mark as unread",
+        "pdelete": "Delete"
+      },
+      "table": {
+        "column": {
+          "content": "Message Content",
+          "status": "Message Status",
+          "type": "Message Type",
+          "source": "Message Source",
+          "time": "Time"
+        },
+        "render": {
+          "status": {
+            "read": "Read",
+            "unread": "Unread"
+          }
+        },
+        "hover": {
+          "read": "Mark as read",
+          "unread": "Mark as unread",
+          "del": "Delete"
+        },
+        "delTip": "Are you sure to delete？"
+      }
+    },
+    "httpCodeText": {
+      "400": "Request error",
+      "401": "Unauthorized, please log in again",
+      "403": "access denied",
+      "404": "Request error",
+      "408": "Request timed out",
+      "500": "Server Error",
+      "501": "Service not implemented",
+      "502": "Network Error",
+      "503": "service is not available",
+      "504": "network timeout",
+      "505": "HTTP version is not supported",
+      "default": "Service exception({{status}})",
+      "timeout": "Request timed out",
+      "abort": "Connection failed",
+      "callBack": "Network exception"
+    },
+    "appHint1": "Scan the QR code with Smart Industry App",
+    "appHint2": "explorer more features",
+    "backLoginPage": "Back to Page Login",
+    "backHome": "Back Home",
+    "pageError": "Sorry, you are not authorized to access this page.",
+    "page404": "Sorry, the page you visited does not exist.",
+    "page500": "System error, try again later",
+    "emptyPage": "No authority, please contact the administrator to add permissions",
+    "expirationPage": "The SaaS experience service has expired, please contact the developer to pay",
+    "trial": "Trial Version",
+    "admin": "Administrator",
+    "forgot": {
+      "title": "Retrive password",
+      "resetPwd": "Reset Password",
+      "tenantRole": "Tenant user",
+      "managerRole": "Tanant admin",
+      "noAccount": "No account yet?",
+      "toRegister": "Tenant register"
+    },
+    "register": {
+      "form": {
+        "enterprise": {
+          "label": "Name of organization",
+          "validate": {
+            "require": "Please enter name of organization"
+          },
+          "placeholder": "Please enter name of organization"
+        },
+        "username": {
+          "label": "Tanant admin"
+        }
+      },
+      "register": "Register",
+      "registerSuccess": "Tenant registered"
+    },
+    "relogin": {
+      "tip": "The account has been logged in on another device (browser) or has expired",
+      "btn": "Re-Login",
+      "pwd": "If it is not your operation, it is recommended to go to the account settings to change the password"
+    }
+  }
+}

package/src/lang/index.ts

@@ -0,0 +1,44 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Cookies from 'js-cookie';
+import { getLangResourceForMain, initLang } from './utils';
+import en from './en.json';
+import zh from './zh.json';
+import { gMainConfig } from '@/index';
+
+const rLang = getLangResourceForMain();
+
+let lang;
+if (gMainConfig?.lang) {
+  lang = {
+    en: {
+      translation: { ...en.translation, ...gMainConfig.lang.en },
+    },
+    zh: {
+      translation: { ...zh.translation, ...gMainConfig.lang.zh },
+    },
+  };
+} else {
+  lang = { en, zh };
+}
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    lng: Cookies.get('main-i18next'),
+    detection: {
+      order: ['cookie'],
+      lookupCookie: 'main-i18next',
+    },
+    resources: rLang || lang,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+initLang();
+
+export default i18n;

package/src/lang/utils.ts

@@ -0,0 +1,285 @@
+import Cookies from 'js-cookie';
+
+export const switchLang = (lang: string, reload = true) => {
+  if (Cookies.get('main-i18next') !== lang) {
+    // 登录三要素：服务条款，法律声明，隐藏政策，多语言支持
+    Cookies.remove('gTyPlatLang', { path: '/' });
+    Cookies.set('gTyPlatLang', lang, { expires: 365 });
+
+    // 利用 i18n ，通过修改 cookie 实现语言切换
+    Cookies.set('main-i18next', lang, { expires: 365 });
+
+    // 利用 i18n ，通过修改 cookie 兼容微应用语言切换
+    Cookies.set('i18next', lang === 'zh' ? 'zh-CN' : 'en-US', { expires: 365 });
+    localStorage.setItem('i18nextLng', lang === 'zh' ? 'zh-CN' : 'en-US');
+    localStorage.setItem('main-i18next', lang === 'zh' ? 'zh-CN' : 'en-US');
+    reload && window.location.reload();
+    modifyHtmlLang(lang);
+  }
+};
+
+export const initLang = () => {
+  // 多语言初始化，兼容微应用多语言
+  const lang = Cookies.get('main-i18next') === 'zh' ? 'zh-CN' : 'en-US';
+  Cookies.set('i18next', lang, { expires: 365 });
+  localStorage.setItem('i18nextLng', lang);
+  //多窗口语言同步
+  window.addEventListener('storage', function (ev) {
+    if (ev.key === 'main-i18next') {
+      window.location.reload();
+    }
+  });
+  modifyHtmlLang(Cookies.get('main-i18next'));
+};
+
+function modifyHtmlLang(lang: string) {
+  window.document.getElementsByTagName('html')[0].setAttribute('lang', lang);
+}
+
+// 获取当前微应用的语言包
+export function getLangResource(id: string) {
+  const langCollection = window._SDF.saas.saas_locales;
+  if (!langCollection) return;
+  const langkey =
+    Object.keys(langCollection).find((key) => key.includes(id)) || '';
+
+  const microLang = langCollection[langkey];
+  const microUiLang = getLangFromPrefix(microLang);
+  return normalizeLang(microUiLang);
+}
+
+export function getLangResourceForMain() {
+  const langCollection = window._SDF.saas.saas_locales;
+  if (!langCollection) return;
+  const id = Object.keys(langCollection).find((key) =>
+    key.startsWith('main-app_')
+  );
+  const macroLang = langCollection[id];
+  if (!macroLang || Object.keys(macroLang).length === 0) return;
+  return normalizeLang(macroLang, 'translation');
+}
+
+function getLangFromPrefix(
+  lang: Record<string, Record<LangKey, string>>,
+  prefix = 'ui.'
+) {
+  const expectLang = {};
+  Object.entries(lang).forEach(([key, value]) => {
+    if (!key.startsWith(prefix)) {
+      return null;
+    }
+    const [_, realKey] = key.split(prefix);
+    expectLang[realKey] = value;
+  });
+  return expectLang;
+}
+
+function normalizeLang(
+  langResource: Record<string, Record<LangKey, string>>,
+  namespace?: string
+) {
+  const wrapNamespace = (
+    obj: Record<string, any>,
+    key: string,
+    value: string
+  ) => {
+    if (namespace) {
+      key = key.replace(new RegExp(`^${namespace}\\.`), '');
+
+      if (!obj[namespace]) {
+        obj[namespace] = {};
+      }
+
+      obj = obj[namespace];
+    }
+
+    obj[key] = value;
+  };
+
+  return Object.entries(langResource).reduce((result, [key, langInfo]) => {
+    Object.entries(langInfo).forEach(([langType, text]) => {
+      if (!result[langType]) {
+        result[langType] = {};
+      }
+      wrapNamespace(result[langType], key, text);
+    });
+    return result;
+  }, {});
+}
+
+export const langList = () => {
+  const supported_language = window._SDF?.saas?.supported_language;
+  if (supported_language) {
+    return Object.keys(supported_language).map((key) => {
+      return {
+        label: supported_language[key],
+        value: key,
+      };
+    }) as any;
+  } else {
+    return [
+      {
+        label: '简体中文',
+        value: 'zh',
+      },
+      {
+        label: 'English',
+        value: 'en',
+      },
+    ];
+  }
+};
+
+export const gLang = () => {
+  const supportedLanguages = langList();
+  const langKeys = supportedLanguages.map((item) => item.value);
+  const cookieLang = Cookies.get('main-i18next');
+
+  if (langKeys.includes(cookieLang)) {
+    return cookieLang;
+  } else {
+    switchLang('en', false);
+    return 'en';
+  }
+};
+
+export const oemSaasAy = () => {
+  const lang = gLang();
+
+  let oemSaasLang;
+  if (window._SDF?.saas?.saas_locales) {
+    const key = Object.keys(window._SDF?.saas?.saas_locales).find((k) =>
+      k.includes(`oem-saas_${window._SDF?.saas?.saas_id}`)
+    );
+    oemSaasLang = window._SDF?.saas?.saas_locales[key];
+    const getProperty = (property) => {
+      const langVal =
+        oemSaasLang[property] &&
+        (oemSaasLang[property][lang] || oemSaasLang[property]['en']);
+      return langVal;
+    };
+    return {
+      background_image:
+        getProperty('OEM-SAAS-BG_IMAGE') || window._SDF?.saas?.background_image,
+      logo: getProperty('OEM-SAAS-LOGO') || window._SDF?.saas?.logo,
+      title: getProperty('OEM-SAAS-TITLE') || window._SDF?.saas?.title,
+      legal_notice:
+        getProperty('LEGAL_STATEMENT') || window._SDF?.saas?.legal_notice,
+      privacy_policy:
+        getProperty('PRIVACY_POLICY') || window._SDF?.saas?.privacy_policy,
+      service_terms:
+        getProperty('TERMS_OF_USE') || window._SDF?.saas?.service_terms,
+    };
+  }
+  return {
+    background_image: window._SDF?.saas?.background_image,
+    logo: window._SDF?.saas?.logo,
+    title: window._SDF?.saas?.title,
+    legal_notice: window._SDF?.saas?.legal_notice,
+    privacy_policy: window._SDF?.saas?.privacy_policy,
+    service_terms: window._SDF?.saas?.service_terms,
+  };
+};
+
+export const dynamicHeaderMenu = () => {
+  const lang = gLang();
+  const saasLocales = window._SDF?.saas?.saas_locales || {};
+  const key = Object.keys(saasLocales).find((k) =>
+    k.includes(`oem-saas_${window._SDF?.saas?.saas_id}`)
+  );
+  const oemSaasLang = saasLocales[key];
+
+  const getNameLang = (v) => {
+    if (!oemSaasLang) {
+      return lang === 'zh' ? v.text_zh : v.text_en;
+    }
+
+    if (oemSaasLang[v.sub_menu_text_lang_key]) {
+      if (oemSaasLang[v.sub_menu_text_lang_key][lang]) {
+        return oemSaasLang[v.sub_menu_text_lang_key][lang];
+      } else {
+        return oemSaasLang[v.sub_menu_text_lang_key]['en'] || v.text_en;
+      }
+    } else {
+      return v.text_en;
+    }
+  };
+
+  const getOptionsLang = (options) => {
+    return options.map((item) => {
+      return {
+        ...item,
+        name: getNameLang(item),
+      };
+    });
+  };
+
+  const result =
+    window._SDF.saas.custom_configs
+      ?.find((u) => u.config_key === 'dynamic_header_menu')
+      ?.config_value?.map((v) => {
+        if (v.type === 'text' || v.type === 'icon_text') {
+          return {
+            ...v,
+            name: getNameLang(v),
+          };
+        } else if (v.type === 'icon_text_select' || v.type === 'text_select') {
+          return {
+            ...v,
+            options: getOptionsLang(v.options),
+            name: getNameLang(v),
+          };
+        } else {
+          return v;
+        }
+      }) || [];
+
+  return result;
+};
+
+const walkEntrys = (entrys) => {
+  const lang = gLang();
+
+  const localLang = (v) => {
+    return lang === 'zh' ? v.entry_name_zh : v.entry_name_en;
+  };
+
+  const getNameLang = (v) => {
+    if (v['lang_package_biz_id'] && v.entry_name_lang_key) {
+      if (window._SDF?.saas?.saas_locales) {
+        const oemSaasLang =
+          window._SDF?.saas?.saas_locales[v['lang_package_biz_id']];
+        if (oemSaasLang[v.entry_name_lang_key]) {
+          if (oemSaasLang[v.entry_name_lang_key][lang]) {
+            return oemSaasLang[v.entry_name_lang_key][lang];
+          } else {
+            return localLang(v);
+          }
+        } else {
+          return localLang(v);
+        }
+      } else {
+        return localLang(v);
+      }
+    } else {
+      return localLang(v);
+    }
+  };
+
+  return entrys.map((entry) => {
+    const name = getNameLang(entry);
+    return {
+      ...entry,
+      name,
+      sub_entry_list: walkEntrys(entry.sub_entry_list),
+    };
+  });
+};
+
+export const getMenus = (entry_info) => {
+  entry_info &&
+    entry_info.entries &&
+    (entry_info.entries = walkEntrys(entry_info.entries));
+
+  return entry_info;
+};