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

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@tuya-sat/sdf-main-sdk",
+  "version": "0.0.1-beta.1",
+  "main": "./dist/main.bundle.js",
+  "types": "./index.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "dev": "webpack watch ",
+    "ts": "tsc --emitDeclarationOnly ",
+    "lint": "eslint *.ts*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@sentry/tracing": "^6.13.3",
+    "@types/js-cookie": "^3.0.2",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router": "^5.1.19",
+    "@types/react-router-dom": "^5.1.7",
+    "autoprefixer": "^10.4.13",
+    "babel-loader": "^9.1.0",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "core-js": "^3.26.1",
+    "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^7.32.0",
+    "file-loader": "^6.2.0",
+    "less": "^4.1.1",
+    "less-loader": "^8.1.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "postcss": "^8.4.19",
+    "postcss-loader": "^7.0.1",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.5.2",
+    "typescript-declaration-webpack-plugin": "^0.2.2",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.6.1",
+    "webpack-cli": "^4.10.0"
+  },
+  "dependencies": {
+    "@ant-design/colors": "^6.0.0",
+    "@ant-design/icons": "^4.7.0",
+    "@ctrl/tinycolor": "^3.4.1",
+    "@sentry/react": "^6.13.3",
+    "@tuya-fe/sdf-plugin-runtime": "1.0.12",
+    "@tuya-sat/galaxy": "^1.0.8",
+    "antd": "4.19.5",
+    "axios": "^0.21.1",
+    "classnames": "^2.3.1",
+    "events": "^3.3.0",
+    "i18next": "^20.2.2",
+    "i18next-browser-languagedetector": "^6.1.0",
+    "js-cookie": "^3.0.1",
+    "js-sha256": "^0.9.0",
+    "mqtt": "^4.3.7",
+    "process": "^0.11.10",
+    "pubsub-js": "^1.9.4",
+    "qiankun": "github:tuya-sat/qiankun#86d94a0",
+    "qrcode.react": "^1.0.1",
+    "rc-util": "^5.24.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.18.6",
+    "react-router-dom": "5.2.0",
+    "url": "^0.11.0",
+    "web-vitals": "^1.0.1",
+    "xhook": "^1.4.9"
+  }
+}

package/scripts/gen-localize-file.mjs

@@ -0,0 +1,56 @@
+import fs from 'fs';
+import path from 'path';
+
+function normalizeLang(langKey, content) {
+  let obj = {};
+
+  function attachTo(prev, next) {
+    return `${prev === '' ? '' : prev + '.'}${next}`;
+  }
+
+  function toSingleKey(lang, prevKey = '') {
+    Object.keys(lang).forEach((key) => {
+      let oneLevelKey = attachTo(prevKey, key);
+      if (typeof lang[key] !== 'object') {
+        obj[oneLevelKey] = lang[key];
+      } else {
+        toSingleKey(lang[key], oneLevelKey);
+      }
+    });
+  }
+
+  toSingleKey(content);
+
+  obj = {
+    [langKey]: obj,
+  };
+  return obj;
+}
+
+(function run() {
+  const dir = './src/lang/';
+
+  const nowTime = new Date().valueOf();
+
+  const files = fs
+    .readdirSync(dir)
+    .filter((filename) => !filename.endsWith('.ts'));
+
+  let outputLang = {};
+
+  files.forEach(async (file) => {
+    const abosultePath = path.resolve(dir, file);
+    const basename = path.basename(file, '.json');
+    console.log(abosultePath, basename);
+    const content = JSON.parse(fs.readFileSync(abosultePath, 'utf-8'));
+    const lang = normalizeLang(basename, content);
+    outputLang = {
+      ...outputLang,
+      ...lang,
+    };
+  });
+  fs.writeFileSync(
+    `lang_${nowTime}.json`,
+    JSON.stringify(outputLang, undefined, 2),
+  );
+})();

package/src/App.less

@@ -0,0 +1,156 @@
+@import 'antd/dist/antd.variable.less';
+@import './theme/index.less';
+
+.main-pro-menu-item {
+  height: 30px !important;
+}
+
+.main-pro-global-header-logo a h1 {
+  color: #000;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.main-menu-inline-collapsed .main-pro-menu-item-title {
+  opacity: 0;
+}
+.main-form h3 {
+  margin: 0;
+}
+.init-loading {
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+}
+
+.main-primary-hover:hover {
+  color: @primary-color-hover;
+}
+
+@main-variable-prefix: main-app;
+
+// js会默认往dom里面嵌入css变量，所以不需要在less里重复写一份
+// html {
+//   // 主菜单
+//   --@{main-variable-prefix}-menu-bg: #fff; //底色
+//   --@{main-variable-prefix}-menu-text: rgba(0, 0, 0, 0.85); //文案&icon色值
+//   --@{main-variable-prefix}-menu-bg-expand: #fff; //展开底色
+//   --@{main-variable-prefix}-menu-text-expand: rgba(
+//     0,
+//     0,
+//     0,
+//     0.85
+//   ); //展开文案&icon色值
+//   --@{main-variable-prefix}-menu-bg-actived: #e6f6ff; //选中底色
+//   --@{main-variable-prefix}-menu-text-actived: @primary-color; //选中文案&icon色值
+//   // 分组菜单
+//   --@{main-variable-prefix}-menu-slide-bg: #fff;
+//   --@{main-variable-prefix}-menu-slide-text: rgba(0, 0, 0, 0.85);
+//   --@{main-variable-prefix}-menu-slide-bg-actived: #e6f6ff;
+//   --@{main-variable-prefix}-menu-slide-text-actived: @primary-color;
+//   --@{main-variable-prefix}-menu-slide-boundary: #f0f0f0;
+//   // 顶部导航
+//   --@{main-variable-prefix}-navigate-bg: #fff;
+//   --@{main-variable-prefix}-navigate-text: rgba(0, 0, 0, 0.85);
+//   --@{main-variable-prefix}-navigate-text-hover: @primary-color;
+//   --@{main-variable-prefix}-navigate-boundary: #f0f0f0;
+// }
+@menu-text: ~'var(--@{main-variable-prefix}-menu-text)';
+@menu-slide-bg: ~'var(--@{main-variable-prefix}-menu-slide-bg)';
+@nav-text-color: ~'var(--@{main-variable-prefix}-navigate-text)';
+@nav-text-color-hover:~ 'var(--@{main-variable-prefix}-navigate-text-hover)';
+
+//导航栏改写
+.main-app-layout-header {
+  color: @nav-text-color !important;
+  background-color: ~'var(--@{main-variable-prefix}-navigate-bg)' !important;
+  border-bottom: 1px solid ~'var(--@{main-variable-prefix}-navigate-boundary)' !important;
+}
+
+.main-app-custom-nav-navItem {
+  color: @nav-text-color !important;
+  &:hover {
+    color: @nav-text-color-hover !important;
+  }
+}
+
+.main-nav-title {
+  color: @nav-text-color;
+}
+
+.main-nav-text-color {
+  color: @nav-text-color !important;
+  &:hover {
+    color: @nav-text-color-hover !important;
+  }
+}
+
+//分组菜单改写
+.main-group-cover {
+  background: @menu-slide-bg;
+  border-right: 1px solid ~'var(--@{main-variable-prefix}-menu-slide-boundary)';
+}
+
+.main-group-item {
+  color: ~'var(--@{main-variable-prefix}-menu-slide-text)' !important;
+  background-color: @menu-slide-bg !important;
+}
+
+.main-group-active,
+.main-group-item:hover {
+  color: ~'var(--@{main-variable-prefix}-menu-slide-text-actived)' !important;
+  background-color: ~'var(--@{main-variable-prefix}-menu-slide-bg-actived)' !important;
+}
+
+//菜单改写
+.main-app-menu-group-mode,
+.main-menu {
+  color: @menu-text !important;
+  background-color: ~'var(--@{main-variable-prefix}-menu-bg)' !important;
+}
+
+.main-menu-item {
+  color: @menu-text;
+  a {
+    color: @menu-text;
+  }
+}
+
+.main-menu-sub.main-menu-inline {
+  color: ~'var(--@{main-variable-prefix}-menu-text-expand)';
+  background-color: ~'var(--@{main-variable-prefix}-menu-bg-expand)';
+  .main-menu-item {
+    color: ~'var(--@{main-variable-prefix}-menu-text-expand)';
+    a {
+      color: ~'var(--@{main-variable-prefix}-menu-text-expand)';
+    }
+  }
+}
+
+.main-app-menu-group-mode > .main-menu {
+  border-top: 1px solid ~'var(--@{main-variable-prefix}-menu-slide-boundary)';
+}
+
+.main-menu-item:hover,
+.main-menu-item:hover a,
+.main-menu-item-selected,
+.main-menu-item-selected a {
+  color: ~'var(--@{main-variable-prefix}-menu-text-actived)' !important;
+  background-color: ~'var(--@{main-variable-prefix}-menu-bg-actived)' !important;
+}
+
+.main-menu-submenu-selected,
+.main-menu-submenu-selected .main-menu-submenu-arrow,
+.main-menu-light .main-menu-submenu-title:hover,
+.main-menu-submenu:hover > .main-menu-submenu-title > .main-menu-submenu-arrow {
+  color: ~'var(--@{main-variable-prefix}-menu-text-actived)' !important;
+}
+
+.main-menu-submenu-arrow {
+  color: ~'var(--@{main-variable-prefix}-menu-text)' !important;
+}
+
+.main-menu-submenu-selected .main-menu-submenu-arrow,
+.main-menu-submenu:hover .main-menu-submenu-arrow {
+  color: ~'var(--@{main-variable-prefix}-menu-text-actived)' !important;
+}

package/src/App.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState, useLayoutEffect } from 'react';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  useHistory,
+  useLocation,
+} from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import enUS from 'antd/lib/locale/en_US';
+import zhCN from 'antd/lib/locale/zh_CN';
+import { skyReport } from '@/sky';
+import { apiIntercept } from '@/qiankun/xhook';
+import { getMicroAppId, curMicroAppCode } from '@/utils';
+import { WhitePathList } from '@/constant';
+import i18n from '@/lang';
+import './App.less';
+import pages from './pages';
+import { auth, getCurrentUser } from '@/utils/common';
+import { initalTheme } from './utils/theme';
+import { GalaxyProvider } from '@tuya-sat/galaxy';
+
+export const thirdLoginUrl = '';
+
+const App = () => {
+  const mainHistory = useHistory();
+  const location = useLocation();
+  const currentUser = getCurrentUser();
+  const needAuth = !WhitePathList.includes(mainHistory.location.pathname);
+  const isOem = window?._SDF.saas?.saas_id;
+  const [isThemeOK, setIsThemeOK] = useState(true);
+
+  let appId = '';
+
+  useEffect(() => {
+    if (appId !== getMicroAppId()) {
+      performance.mark(`${getMicroAppId()}-start`);
+      appId = getMicroAppId();
+    }
+  }, [location.pathname]);
+
+  useEffect(() => {
+    apiIntercept({ mainHistory });
+  }, [mainHistory]);
+
+  useEffect(() => {
+    skyReport(curMicroAppCode());
+  }, [location.pathname]);
+
+  useLayoutEffect(() => {
+    initalTheme(() => {
+      setIsThemeOK(true);
+      if (needAuth && isOem) {
+        // 非例外布局，均需校验登录状态
+        if (!Boolean(currentUser)) {
+          auth(mainHistory);
+        }
+      }
+    });
+  }, []);
+
+  return (
+    <ConfigProvider
+      locale={i18n.language === 'zh' ? zhCN : enUS}
+      prefixCls="main"
+    >
+      <GalaxyProvider
+        globalPrefixCls="main"
+        lang={i18n.language.includes('zh') ? 'zh' : 'en'}
+      >
+        {isThemeOK && (
+          <Switch>
+            {pages.map((item) => {
+              return (
+                <Route key={item.name} {...item}>
+                  <item.page />
+                </Route>
+              );
+            })}
+          </Switch>
+        )}
+      </GalaxyProvider>
+    </ConfigProvider>
+  );
+};
+
+export default App;

package/src/api/index.ts

@@ -0,0 +1,52 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import req from './req';
+import res from './res';
+
+export { URLS } from './urls';
+
+export interface ResData<T> {
+  code: number;
+  msg?: string;
+  result?: T;
+  [keys: string]: any;
+}
+
+// see: https://github.com/axios/axios/issues/1510
+export interface IAxiosInstance extends AxiosInstance {
+  request<T = any, R = ResData<T>>(config: AxiosRequestConfig): Promise<R>;
+  get<T = any, R = ResData<T>>(
+    url: string,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+  delete<T = any, R = ResData<T>>(
+    url: string,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+  head<T = any, R = ResData<T>>(
+    url: string,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+  post<T = any, R = ResData<T>>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+  put<T = any, R = ResData<T>>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+  patch<T = any, R = ResData<T>>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<R>;
+}
+
+export const api: IAxiosInstance = axios.create();
+
+//请求拦截
+api.interceptors.request.use(req.onFulfilled, req.onRejected);
+
+//响应拦截
+api.interceptors.response.use(res.onFulfilled, res.onRejected);

package/src/api/req.ts

@@ -0,0 +1,23 @@
+import { AxiosRequestConfig } from 'axios';
+import { UNLOGIN_APIS } from './urls';
+
+const onFulfilled = (config: AxiosRequestConfig) => {
+  config.headers = {
+    ...config.headers,
+    'micro-app-id': 'main-app',
+    'Content-Type': 'application/json;charset=utf-8',
+  };
+  if (Object.values(UNLOGIN_APIS).includes(config.url)) {
+    config.headers = {
+      ...config.headers,
+      'skip-sdf-check-token': true,
+    };
+  }
+  return config;
+};
+
+const onRejected = (error) => Promise.reject(error);
+
+const req = { onFulfilled, onRejected };
+
+export default req;

package/src/api/res.ts

@@ -0,0 +1,29 @@
+import { AxiosResponse } from 'axios';
+// import { message } from 'antd';
+import { ResData } from 'src/api';
+import { getErrorMsg } from './utils';
+import { URLS } from './urls';
+
+const isShowMsg = (url) => {
+  return ![URLS.LOGOUT].includes(url);
+};
+
+const onFulfilled = (response: AxiosResponse<ResData<any>>) => {
+  const res = response.data;
+  //统一业务异常处理（主要根据错误码）
+  if (!res.success && isShowMsg(response.config.url)) {
+    // message.error(res.msg);
+    return Promise.reject(res);
+  }
+  return res.result;
+};
+
+const onRejected = (error) => {
+  // const msg = getErrorMsg(error);
+  // msg && message.error(msg);
+  return Promise.reject(error);
+};
+
+const res = { onFulfilled, onRejected };
+
+export default res;

package/src/api/urls.ts

@@ -0,0 +1,30 @@
+const LOGIN_APIS = {
+  RESET_PWD: '/open-api/v1.0/user/password',
+  SAAS_INFO: '/api/saas-info',
+  QRCODE: '/open-api/v1.0/device/app/qrcode/account/set',
+  MQTT: '/open-api/v1.0/mqtt',
+  ModifyPhoneAndEmail: '/open-api/v1.0/users/self',
+  USER_INFO: '/open-api/v1.0/current/user',
+  USER_INFO_V1: '/open-api/v1.1/current/user',
+  NOTICE_QUERY_LIST_GET: '/open-api/v1.0/notifications/messages',
+  NOTICE_HANDLE_READ_PUT: '/open-api/v1.0/notifications/messages/action/read',
+  NOTICE_DELETE_DELETE: '/open-api/v1.0/notifications/messages?message_ids=',
+  NOTICE_UNREAD_COUNT_GET:
+    '/open-api/v1.0/notifications/messages/unread/counts',
+};
+
+export const UNLOGIN_APIS = {
+  FORGET_PWD: '/open-api/v1.0/user/password/reset',
+  CODE: '/open-api/v1.0/user/password/reset/captcha',
+  TENANDCODE: '/open-api/v1.0/tenant/register/captcha',
+  REGISTER: '/open-api/v1.0/tenant/register',
+  CAPTCHA: '/open-api/v1.0/captcha',
+  SAAS: '/open-api/v1.0/saas', //未登录白名单
+};
+
+export const URLS = {
+  LOGIN: '/api/login',
+  LOGOUT: '/api/logout',
+  ...LOGIN_APIS,
+  ...UNLOGIN_APIS,
+};

package/src/api/utils.ts

@@ -0,0 +1,41 @@
+import i18n from 'i18next';
+import Cookies from 'js-cookie';
+
+const httpCodeHasTextSet = new Set([
+  400, 401, 403, 404, 408, 500, 501, 502, 503, 504, 505,
+]);
+
+const langRange = ['en', 'zh'];
+
+export const getLangKey = () => {
+  const currentLng = Cookies.get('main-i18next');
+  const langKey = langRange.includes(currentLng) ? currentLng : langRange[0];
+  return langKey;
+};
+
+export const getErrorMsg = (error) => {
+  const { response, message, code, __CANCEL__ } = error || {};
+  const langKey = getLangKey();
+  const { httpCodeText } = i18n.getDataByLanguage(langKey).translation;
+  let msg = '';
+  if (__CANCEL__) {
+    //不处理cancellation
+    return msg;
+  }
+  if (response) {
+    const { status, data } = response;
+    msg =
+      data?.msg ||
+      (httpCodeHasTextSet.has(status)
+        ? httpCodeText[status]
+        : httpCodeText['default'].replace('{{status}}', status));
+  } else if (['ECONNABORTED', 'ETIMEDOUT'].includes(code)) {
+    msg =
+      message === 'Request aborted'
+        ? httpCodeText['abort']
+        : httpCodeText['timeout'];
+  } else {
+    msg = httpCodeText['callBack'];
+  }
+  return msg;
+};