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

package/src/mqtt/index.ts

@@ -0,0 +1,121 @@
+import * as Sentry from '@sentry/react';
+import * as mqttClient from 'mqtt';
+import { api, URLS } from '@/api';
+
+function handleError(label: string, info: any) {
+  console.error(`---${label}---\n`, info);
+  if (window._SDF_CONFIG?.sentry?.ENABLE) {
+    Sentry.addBreadcrumb({
+      category: label,
+    });
+    Sentry.captureException(info);
+  }
+}
+
+interface IMessage {
+  data: any;
+  protocol: number;
+  t: number;
+  type: string;
+  v: number;
+}
+
+const SDF_PROTOCOL = 4099;
+let uid = '';
+let isInit = false;
+let micTopics = [];
+const mqtt = (() => {
+  const topicsMap = new Map();
+  let client;
+  const init = (cb) => {
+    api.get(URLS.MQTT).then((data) => {
+      const clientId = data.client_id;
+      const username = data.username;
+      const password = data.password;
+      uid = data.uid;
+
+      client = mqttClient.connect(data.ws_url, {
+        clientId,
+        username,
+        password,
+      });
+      client.on('connect', () => {
+        isInit = true;
+        cb && cb();
+      });
+
+      client.on('reconnect', function () {
+        client.end();
+        client = null;
+        init(() => {});
+      });
+
+      client.on('error', function (a) {
+        handleError('mqtt error', a);
+      });
+
+      // client.on('offline', function () {});
+
+      // client.on('close', function () {});
+
+      client.on('message', function (topic: string, message) {
+        const result = JSON.parse(message.toString()) as IMessage;
+        if (result?.protocol === SDF_PROTOCOL && topicsMap.has(topic)) {
+          dispatchTopic(topic, result.data);
+        }
+      });
+    });
+  };
+
+  const subscribeTopic = (
+    bizType: string,
+    cbFn: (msg: string) => void,
+    option: { isGlobal: boolean }
+  ) => {
+    const toSubscribe = () => {
+      const topic = `sdf/${uid}/${bizType}`;
+      client.subscribe(topic);
+      const cbFns = topicsMap.get(topic) || [];
+      topicsMap.set(topic, [...cbFns, cbFn]);
+      !option?.isGlobal && micTopics.push(topic);
+    };
+
+    if (isInit) {
+      toSubscribe();
+    } else {
+      init(() => {
+        toSubscribe();
+      });
+    }
+  };
+
+  const unsubscribeMicTopics = () => {
+    for (const topic of micTopics) {
+      client.unsubscribe(topic);
+      topicsMap.delete(topic);
+    }
+    micTopics = [];
+  };
+
+  const unsubscribeTopic = (bizType) => {
+    const topic = `sdf/${uid}/${bizType}`;
+    client.unsubscribe(topic);
+    topicsMap.delete(topic);
+    micTopics = micTopics.filter((t) => t !== topic);
+  };
+
+  const dispatchTopic = (topic: string, message: IMessage) => {
+    topicsMap.get(topic).forEach((cbFn) => {
+      cbFn(message);
+    });
+  };
+
+  return {
+    init,
+    subscribeTopic,
+    unsubscribeMicTopics,
+    unsubscribeTopic,
+  };
+})();
+
+export default mqtt;

package/src/pages/403.tsx

@@ -0,0 +1,18 @@
+import { Result, Empty } from '@tuya-sat/galaxy';
+
+const Page403 = () => {
+  return (
+    <Result
+      type={403}
+      icon={Empty.IMAGE_PERMISSION_COLORFUL}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 48px)',
+      }}
+    />
+  );
+};
+
+export default Page403;

package/src/pages/404.tsx

@@ -0,0 +1,17 @@
+import { Result, Empty } from '@tuya-sat/galaxy';
+const Page404 = () => {
+  return (
+    <Result
+      type={404}
+      icon={Empty.IMAGE_404_COLORFUL}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 'calc(100vh - 48px)',
+      }}
+    />
+  );
+};
+
+export default Page404;

package/src/pages/expiration.tsx

@@ -0,0 +1,23 @@
+import { ExpirationLogo } from '@/constant';
+import { useTranslation } from 'react-i18next';
+
+export default function Expiration() {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+      }}
+    >
+      <img width="500px" src={ExpirationLogo} />
+      <div style={{ fontSize: '18px', fontWeight: 'bold' }}>
+        {t('expirationPage')}
+      </div>
+    </div>
+  );
+}

package/src/pages/forgot.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import PForgot from '@/components/PForgot';
+import { RouteComponentProps } from 'react-router';
+
+const Forget: FC<RouteComponentProps> = () => {
+  return <PForgot />;
+};
+
+export default Forget;

package/src/pages/home/index.tsx

@@ -0,0 +1,172 @@
+import BLayout from '@/components/BLayout';
+import { useState, useEffect } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { useSaasInfo } from '@/hooks';
+import { runQiankun } from '@/qiankun';
+import { getMenus } from '@/lang/utils';
+
+import { Spin } from 'antd';
+import Header, {
+  useHeader,
+  initHeaderInfoWithRouterChange,
+} from '@/components/MicroComponent/Header';
+
+//声明一个全局的变量，作为一些setBreadcrumb的代码挂载
+const dynamicProps = {
+  setBreadcrumb: null,
+};
+
+const getEntries = (entryInfo) => {
+  const { entry_mode, entries } = entryInfo;
+  if (entry_mode === 'normal') {
+    return entries;
+  } else if (entry_mode === 'group') {
+    return entries.reduce((total, cur) => {
+      const { entry_type, sub_entry_list } = cur;
+      if (entry_type === 'group') {
+        return total.concat(sub_entry_list);
+      } else if (entry_type === 'entry') {
+        return total.concat(cur);
+      }
+      return total;
+    }, []);
+  }
+};
+
+export let mainHistory;
+const Home = () => {
+  const [height, setHeight] = useState('0px');
+  const { pathname } = useLocation();
+
+  const history = useHistory();
+  const { entryInfo, appIds, apps, saasIdInfoList } = useSaasInfo();
+  const { headerInfo, setBreadcrumb, prevMicroAppInfo } = useHeader();
+  const [isMicroApp, setIsMicroApp] = useState<boolean>(true);
+  const [loading, setLoading] = useState(false);
+  dynamicProps.setBreadcrumb = setBreadcrumb;
+
+  mainHistory = {
+    ...history,
+    push: (path, state?) => {
+      const uuid = state?.universal_id;
+      const appId =
+        saasIdInfoList.find((item) => item.universal_id === uuid)
+          ?.oem_micro_app_id || '';
+      if (appId) {
+        history.push(`/apps/${appId}${path}`, state);
+      } else {
+        history.push(path, state);
+      }
+    },
+    replace: (path, state?) => {
+      const uuid = state?.universal_id;
+      const appId =
+        saasIdInfoList.find((item) => item.universal_id === uuid)
+          ?.oem_micro_app_id || '';
+      if (appId) {
+        history.replace(`/apps/${appId}${path}`, state);
+      } else {
+        history.replace(path, state);
+      }
+    },
+    go: (n: number) => {
+      history.go(n);
+    },
+    goBack: () => {
+      history.goBack();
+    },
+    goForward: () => {
+      history.goForward();
+    },
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      runQiankun({
+        mainHistory,
+        appList: apps,
+        getOwnMenu: () => {
+          return getEntries(entryInfo).find(({ path }) =>
+            window.location.pathname.includes(path)
+          );
+        },
+        setLoading,
+        dynamicProps: dynamicProps,
+      });
+    });
+  }, [saasIdInfoList, entryInfo]);
+
+  useEffect(() => {
+    if (pathname && apps.length > 0) {
+      const paths = pathname.split('/');
+      if (paths.length > 2) {
+        const cur_oem_micro_app_id = paths[2];
+        if (
+          !apps
+            .map((item) => item.oem_micro_app_id)
+            .includes(cur_oem_micro_app_id) &&
+          appIds.includes(cur_oem_micro_app_id)
+        ) {
+          console.log('403');
+          history.push('/403');
+        }
+      }
+    }
+  }, [apps, pathname]);
+
+  useEffect(() => {
+    const entries = getEntries(entryInfo);
+    if (entries && entries.length > 0) {
+      if (
+        pathname.includes('/apps') &&
+        appIds.includes(pathname.split('/')[2])
+      ) {
+        setHeight('calc(100vh - 48px)');
+        setIsMicroApp(true);
+      } else {
+        setHeight('0px');
+        setIsMicroApp(false);
+      }
+      if (pathname === '/application/setting') {
+        setIsMicroApp(true);
+      }
+      initHeaderInfoWithRouterChange(
+        pathname,
+        prevMicroAppInfo,
+        entries.find(({ path }) => window.location.pathname.includes(path)),
+        setBreadcrumb
+      );
+    }
+  }, [pathname, entryInfo, appIds]);
+
+  return (
+    <BLayout
+      entryInfo={getMenus(entryInfo)}
+      isMicroApp={isMicroApp}
+      apps={apps}
+    >
+      <Spin spinning={loading}>
+        <div
+          style={{
+            height: height,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          <Header headerInfo={headerInfo} style={{ flex: '0 0 auto' }} />
+          <div
+            id="container"
+            className="main-app-containter"
+            style={{
+              flex: '1 1 auto',
+              height: '100%',
+              overflowY: 'auto',
+            }}
+          />
+        </div>
+      </Spin>
+    </BLayout>
+  );
+};
+
+export default Home;

package/src/pages/home/setting/index.tsx

@@ -0,0 +1,7 @@
+import PSetting from '@/components/PSetting';
+
+const Setting = () => {
+  return <PSetting />;
+};
+
+export default Setting;

package/src/pages/index.ts

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import { RouteComponentProps } from 'react-router';
+import HomePage from './home';
+import LoginPage from './login';
+import ForgotPage from './forgot';
+import RegisterPage from './register';
+import Page404 from './404';
+import ReLogin from './relogin';
+import { gMainConfig } from '@/index';
+
+interface Props {
+  backPath?: string;
+}
+
+export interface IPage {
+  name: string;
+  path: string;
+  exact: boolean;
+  page: FC<Props | RouteComponentProps>;
+}
+
+const index: IPage[] = [
+  { name: '登录页', path: '/login', exact: true, page: LoginPage },
+  {
+    name: '登录页',
+    path: '/application/relogin',
+    exact: true,
+    page: ReLogin,
+  },
+  { name: '忘记密码', path: '/forgot', exact: true, page: ForgotPage },
+  {
+    name: '注册',
+    path: '/register',
+    exact: true,
+    page:
+      window._SDF.saas.tenant_type === 'MULTI_TENANT' ? RegisterPage : Page404,
+  },
+  { name: '首页', path: '/', exact: false, page: HomePage },
+].map((item) => {
+  if (
+    gMainConfig?.pages &&
+    Object.keys(gMainConfig?.pages).includes(item.name)
+  ) {
+    return { ...item, page: gMainConfig.pages[item.name] };
+  } else {
+    return item;
+  }
+});
+
+export default index;

package/src/pages/login.tsx

@@ -0,0 +1,46 @@
+import { FC, useEffect, useState } from 'react';
+import PLogin from '@/components/PLogin';
+import { RouteComponentProps } from 'react-router';
+import { hookFirst } from '@tuya-fe/sdf-plugin-runtime';
+import { getPlugins } from '@/plugins';
+import { useTranslation } from 'react-i18next';
+
+function getParams(key: string) {
+  const searchParams = new URLSearchParams(window.location.search);
+  return searchParams.get(key);
+}
+
+const Login: FC<RouteComponentProps> = () => {
+  const { t } = useTranslation();
+  const [initial, setInitial] = useState(false);
+  const [err, setErr] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      const plugins = getPlugins();
+      const result = await hookFirst(plugins, 'thirdLogin');
+      if (result) {
+        const from = getParams('from');
+        from && window.location.replace(from);
+      } else {
+        setInitial(true);
+      }
+    })().catch((err) => {
+      setInitial(true);
+      setErr(err);
+      return Promise.reject(err);
+    });
+  }, []);
+
+  if (!initial) {
+    return <div></div>;
+  }
+
+  if (err) {
+    return <div>{t('login.thirdLoginError')}</div>;
+  }
+
+  return <PLogin />;
+};
+
+export default Login;

package/src/pages/register.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import PRegister from '@/components/PRegister';
+import { RouteComponentProps } from 'react-router';
+
+const Register: FC<RouteComponentProps> = () => {
+  return <PRegister />;
+};
+
+export default Register;

package/src/pages/relogin/index.tsx

@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import ReLoginLogo from '@/assets/imgs/reLogin.png';
+import { Button, Typography } from 'antd';
+import { useHistory } from 'react-router-dom';
+import { auth } from '@/utils/common';
+import { useEffect } from 'react';
+
+const { Text } = Typography;
+
+export default function ReLogin() {
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (window._SDF.user) {
+    }
+  });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100vh',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <img src={ReLoginLogo} width="490" style={{ marginTop: '115px' }} />
+      <Text
+        style={{
+          fontSize: '18px',
+          lineHeight: '25px',
+          marginTop: '16px',
+          fontWeight: '400',
+        }}
+      >
+        {t('relogin.tip')}
+      </Text>
+      <Button
+        type="primary"
+        style={{ width: '320px', marginTop: '37px', marginBottom: '16px' }}
+        onClick={() => {
+          auth(history);
+        }}
+      >
+        {t('relogin.btn')}
+      </Button>
+      <Text style={{ fontSize: '14px', lineHeight: '20px' }} type="secondary">
+        {t('relogin.pwd')}
+      </Text>
+    </div>
+  );
+}

package/src/plugins/index.ts

@@ -0,0 +1,11 @@
+import { creatPlugin } from '@tuya-fe/sdf-plugin-runtime';
+
+let plugins = [];
+
+export function getPlugins() {
+  return plugins;
+}
+
+export async function initialPlugins() {
+  plugins = await creatPlugin();
+}

package/src/public-path.js

@@ -0,0 +1,8 @@
+/* eslint-disable no-undef */
+if (window.__MAIN_APP_PUBLIC_PATH) {
+  if (process.env.NODE_ENV === 'development' && !process.env.SDF) {
+    __webpack_public_path__ = '/';
+  } else {
+    __webpack_public_path__ = window.__MAIN_APP_PUBLIC_PATH;
+  }
+}

package/src/qiankun/globalState.ts

@@ -0,0 +1,6 @@
+const globalState = {
+  isLogin: false,
+  lang: 'zh',
+};
+
+export default globalState;