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

package/src/components/BHeaderUser/index.module.less

@@ -0,0 +1,105 @@
+@menuWidth: 250px;
+
+.wrap {
+  margin-right: 16px;
+  display: flex;
+  justify-content: flex-end;
+  height: 48px;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+  .wrap-icon {
+    margin-left: 24px;
+    height: 24px;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    cursor: pointer;
+    color: #555;
+    &:hover {
+      color: rgb(24, 144, 255);
+    }
+  }
+}
+
+.qrTitle {
+  // color: #262626;
+  font-weight: bold;
+  font-size: 14px;
+  text-align: center;
+}
+
+.hintImage {
+  height: 200px;
+  margin-left: -10px;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.menu {
+  width: 250px;
+  // height: 122px;
+  margin: -12px -16px;
+  .menuTop {
+    // height: 74px;
+    padding: 16px 8px 8px 12px;
+    .menu-top-user {
+      display: flex;
+      justify-content: space-between;
+      height: 22px;
+      margin-bottom: 8px;
+      .account {
+        font-size: 14px;
+        // color: #000;
+        font-weight: 400;
+        overflow: hidden;
+        width: @menuWidth - 12px - 54px - 8px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .link {
+        // color: #1890ff;
+        cursor: pointer;
+      }
+    }
+
+    .account-info {
+      // overflow: hidden;
+      // white-space: nowrap;
+      // text-overflow: ellipsis;
+      // height: 22px;
+      // line-height: 22px;
+      max-width: @menuWidth - 24px;
+      color: #979797;
+      .role {
+        max-width: @menuWidth - 24px;
+        color: #979797;
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
+  .menu-bottom {
+    padding-left: 12px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: start-end;
+    cursor: pointer;
+    overflow: hidden;
+    .menu-bottom-logout {
+      margin-right: 10px;
+    }
+  }
+}
+
+.rightMenu {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  & > div {
+    margin: 0 12px;
+  }
+}

package/src/components/BHeaderUser/index.tsx

@@ -0,0 +1,261 @@
+import { Popover, Row, Col, Spin, Tag, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useHistory, useLocation } from 'react-router-dom';
+import IconFont from '@/components/IconFont';
+import { api, URLS } from '@/api';
+import QRCode from 'qrcode.react';
+import appImgEn from './app-scan-en.png';
+import appImgZh from './app-scan-zh.png';
+import styles from './index.module.less';
+import { useState, useEffect } from 'react';
+import { isMessageCt, isSupportMultiLang, safeLogout } from '@/utils/common';
+import { isSupportMobileWithFallback } from '@/qiankun/utils';
+import Badge from './components/Badge';
+import cx from 'classnames';
+import BSwitchLang from './components/BSwitchLang';
+import { switchLang } from '@/lang/utils';
+import BCustomNav from '../BCustomNav';
+import LogoutSvg from './logout';
+import { isSupportLightDarkSwitch, LIGHT } from '@/utils/theme/base';
+import { useTheme } from '@/utils/theme';
+import { eventEmiter, eventNames } from '@/utils';
+
+const logout = (history) => {
+  safeLogout(history);
+};
+
+const { Text } = Typography;
+const UserInfoMenu = () => {
+  const { t, i18n } = useTranslation();
+  const history = useHistory();
+  const { pathname } = useLocation();
+
+  const [visible, setVisible] = useState(false);
+  const [userName, setUserName] = useState('');
+  const [roles, setRoles] = useState([]);
+
+  // 控制主题图标切换
+  const { theme, changeTheme } = useTheme();
+  const [QRUrl, setQR] = useState('');
+
+  useEffect(() => {
+    // eventEmiter.addListener(eventNames.USER_NAME, (val) => {
+    //   setUserName(val);
+    // });
+    api.get(URLS.USER_INFO).then((res) => {
+      setUserName(res.user_nick_name || res.user_name);
+      setRoles(
+        res.roles.map((role) => {
+          return {
+            ...role,
+            role_name: role.role_name === 'admin' ? t('admin') : role.role_name,
+          };
+        })
+      );
+      window._SDF.user = {
+        user_name: res.user_name,
+        user_nick_name: res.user_nick_name,
+        roles: res.roles,
+        mobile: res.mobile,
+        email: res.email,
+        country_code: res.country_code,
+      };
+    });
+  }, []);
+
+  const mainConfig = () => {
+    console.log('micro_app_config', window._SDF.saas?.main_app_config);
+    if (window._SDF.saas?.main_app_config) {
+      return JSON.parse(window._SDF.saas?.main_app_config);
+    } else {
+      return undefined;
+    }
+  };
+
+  const QRTitle = () => {
+    const qrcodeDoc = mainConfig()?.qrcodeDoc || '';
+    if (qrcodeDoc) {
+      return (
+        <Row justify="center">
+          <Col>
+            <div
+              className={cx(styles.qrTitle, 'main-app-qrTitle')}
+              dangerouslySetInnerHTML={{ __html: qrcodeDoc }}
+            ></div>
+          </Col>
+        </Row>
+      );
+    } else {
+      return (
+        <>
+          <Row justify="center">
+            <Col>
+              <div className={cx(styles.qrTitle, 'main-app-qrTitle')}>
+                {t('appHint1')}
+              </div>
+            </Col>
+          </Row>
+          <Row justify="center">
+            <Col>
+              <div className={cx(styles.qrTitle, 'main-app-qrTitle')}>
+                {t('appHint2')}
+              </div>
+            </Col>
+          </Row>
+        </>
+      );
+    }
+  };
+
+  const QrImg = () => {
+    const qrcodeUrl = mainConfig()?.qrcodeUrl || '';
+    if (qrcodeUrl) {
+      return (
+        <Row justify="center" style={{ width: 430 }}>
+          <img className={styles.hintImage} alt="" src={qrcodeUrl} />
+        </Row>
+      );
+    } else {
+      return (
+        <Row justify="center" style={{ width: 430 }}>
+          <Col span={12}>
+            <QRCode id="qrcode" includeMargin size={200} value={QRUrl} />
+          </Col>
+          <Col span={12}>
+            <div
+              className={styles.hintImage}
+              style={{
+                backgroundImage: `url("${
+                  i18n.language.includes('zh') ? appImgZh : appImgEn
+                }")`,
+              }}
+            />
+            {/* <img className={styles.hintImage} alt="" src={appImg} /> */}
+          </Col>
+        </Row>
+      );
+    }
+  };
+
+  const qrCode = () => {
+    return (
+      <Spin spinning={!QRUrl}>
+        <QRTitle />
+        <QrImg />
+      </Spin>
+    );
+  };
+
+  const goSetting = () => {
+    setVisible(false);
+    if (pathname === '/application/setting') {
+      return;
+    }
+    if (pathname === '/application/notification') {
+      history.replace('/application/setting');
+    } else {
+      history.push('/application/setting');
+    }
+  };
+
+  const menu = (
+    <div className={styles.menu}>
+      <div className={cx(styles.menuTop, 'main-app-setting-top')}>
+        <div className={styles['menu-top-user']}>
+          <span
+            className={cx(styles.account, 'main-app-account')}
+            title={userName}
+          >
+            {userName}
+          </span>
+          <span
+            className={cx(styles.link, 'main-app-link')}
+            onClick={goSetting}
+          >
+            {t('setting.title')}
+          </span>
+        </div>
+        <div className={styles['account-info']}>
+          {roles.map((item) => (
+            <Tag style={{ marginBottom: '5px' }} key={item.role_name}>
+              <Text ellipsis style={{ maxWidth: '210px' }}>
+                {item.role_name}
+              </Text>
+            </Tag>
+          ))}
+        </div>
+      </div>
+      <div
+        className={cx(styles['menu-bottom'], 'main-app-setting-bottom')}
+        onClick={() => logout(history)}
+      >
+        <LogoutSvg
+          className={cx(
+            styles['menu-bottom-logout'],
+            'main-app-setting-bottom-img'
+          )}
+        />
+        <span>{t('menu.logout')}</span>
+      </div>
+    </div>
+  );
+
+  const onVisibleChange = (visible) => {
+    if (visible && !QRUrl) {
+      api.get<string, string>(URLS.QRCODE).then((res) => {
+        setQR(res);
+      });
+    }
+  };
+
+  const onVisibleChangeSetting = (visible) => {
+    setVisible(visible);
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <BCustomNav />
+      {isSupportMultiLang() && <BSwitchLang toChangeLang={switchLang} />}
+      {isMessageCt() && <Badge />}
+      {isSupportLightDarkSwitch() && (
+        <div className={styles['wrap-icon']} onClick={changeTheme}>
+          <IconFont
+            type={theme === LIGHT ? 'icon-qianse' : 'icon-shense'}
+            className={cx(styles.icon, 'main-nav-text-color')}
+          />
+        </div>
+      )}
+      {isSupportMobileWithFallback() && (
+        <Popover
+          content={qrCode}
+          placement="bottomRight"
+          arrowPointAtCenter
+          onVisibleChange={onVisibleChange}
+        >
+          <div className={styles['wrap-icon']}>
+            <IconFont
+              type="icon-mobile1"
+              className={cx(styles.icon, 'main-nav-text-color')}
+            />
+          </div>
+        </Popover>
+      )}
+      <Popover
+        content={menu}
+        visible={visible}
+        placement="bottomRight"
+        onVisibleChange={onVisibleChangeSetting}
+        arrowPointAtCenter
+      >
+        <div className={styles['wrap-icon']}>
+          <IconFont
+            type="icon-xingzhuangjiehe"
+            className={cx(styles.icon, 'main-nav-text-color')}
+          />
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
+export default UserInfoMenu;

package/src/components/BHeaderUser/logout.tsx

@@ -0,0 +1,26 @@
+const LogoutSvg = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.83334 1.99992C7.83334 2.36811 7.53487 2.66659 7.16668 2.66659H4.66668C3.95261 2.66659 3.36965 3.22791 3.33498 3.93337L3.33334 3.99992L3.33334 11.6666C3.33334 12.3807 3.89467 12.9636 4.60013 12.9983L4.66668 12.9999H7.16668C7.53487 12.9999 7.83334 13.2984 7.83334 13.6666C7.83334 14.0348 7.53487 14.3333 7.16668 14.3333H4.66668C3.22171 14.3333 2.04516 13.184 2.00128 11.7496L2.00001 11.6666L2.00001 3.99992C2.00001 2.55495 3.14929 1.3784 4.58362 1.33452L4.66668 1.33325L7.16668 1.33325C7.53487 1.33325 7.83334 1.63173 7.83334 1.99992Z"
+        fill="#595959"
+      />
+      <path
+        d="M10.5 4.77614C10.2397 4.51578 10.2397 4.09368 10.5001 3.83333C10.7604 3.57298 11.1825 3.57298 11.4429 3.83333L14.1953 6.58578C14.9764 7.36682 14.9764 8.63316 14.1953 9.4142L11.4429 12.1667C11.1825 12.427 10.7604 12.427 10.5001 12.1667C10.2397 11.9063 10.2397 11.4842 10.5 11.2238L13.7237 7.99999L10.5 4.77614Z"
+        fill="#595959"
+      />
+      <path
+        d="M6.66635 7.99996C6.66635 7.63177 6.96483 7.33329 7.33302 7.33329H13.9997C14.3679 7.33329 14.6664 7.63177 14.6664 7.99996C14.6664 8.36815 14.3679 8.66663 13.9997 8.66663H7.33302C6.96483 8.66663 6.66635 8.36815 6.66635 7.99996Z"
+        fill="#595959"
+      />
+    </svg>
+  );
+};
+export default LogoutSvg;

package/src/components/BLayout/components/Header/index.module.less

@@ -0,0 +1,27 @@
+.header {
+  height: 48px;
+  min-height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  width: 100%;
+  // background-color: #fff !important;
+  // border-bottom: 1px solid #eee;
+  .logo {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    min-width: fit-content;
+
+    h1 {
+      font-size: 18px;
+      font-weight: 700;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 0 0 12px;
+    }
+  }
+}

package/src/components/BLayout/components/Header/index.tsx

@@ -0,0 +1,36 @@
+import { Layout, Tag } from 'antd';
+import cx from 'classnames';
+import HeaderUser from '@/components/BHeaderUser';
+import Logo from '../Logo';
+import styles from './index.module.less';
+import { useTranslation } from 'react-i18next';
+import { oemSaasAy } from '@/lang/utils';
+import { CHARGE_STATUS } from '@/constant';
+
+const { Header } = Layout;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default ({ onHeaderClick }) => {
+  const { title } = oemSaasAy();
+  const { t } = useTranslation();
+
+  return (
+    <Header className={cx('main-app-layout-header', styles.header)}>
+      <div className={styles.logo} onClick={onHeaderClick}>
+        <Logo />
+        {window._SDF_CONFIG?.saas?.LOGO_INSTEAD_OF_TITLE !== true && (
+          <h1 className="main-nav-title">{title}</h1>
+        )}
+      </div>
+      {window?._SDF.saas.charge_status === CHARGE_STATUS.TRIAL && (
+        <Tag
+          color="yellow"
+          style={{ borderRadius: '10px', marginLeft: '10px' }}
+        >
+          {t('trial')}
+        </Tag>
+      )}
+      <HeaderUser />
+    </Header>
+  );
+};

package/src/components/BLayout/components/Layout/empty.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+import emptyPage from './emptyPage.png';
+
+const EmptyPage = () => {
+  const { t } = useTranslation();
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          style={{ width: '384px', height: '254px' }}
+          src={emptyPage}
+          alt="当前账号无权限"
+        />
+        <span>{t('emptyPage')}</span>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyPage;

package/src/components/BLayout/components/Layout/index.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { Layout } from 'antd';
+import { useHistory, Switch, Route } from 'react-router-dom';
+import Header from '../Header';
+import { MenuType } from '../Menu';
+import SingleSider from '../Sider';
+import MultiSider from '../MultiSider';
+import { IMenu } from '../Menu';
+import Notice from '@/components/BHeaderUser/components/Badge/components/Notice';
+import SettingPage from '@/pages/home/setting';
+import { getDeepestPath } from '@/utils/common';
+import EmptyPage from '@/components/BLayout/components/Layout/empty';
+import { CHARGE_STATUS } from '@/constant';
+import Expiration from '@/pages/expiration';
+
+export interface ILayoutProps {
+  mode: MenuType;
+  menus: Array<IMenu>;
+  entries: string[];
+  children: ReactNode | HTMLElement;
+}
+
+const { Content } = Layout;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (props: ILayoutProps) => {
+  const { mode, menus, children, entries } = props;
+  const history = useHistory();
+  const handleHeaderClick = () => {
+    if (menus.length === 0) {
+      history.push('/403');
+      return;
+    }
+    const path = getDeepestPath(menus[0]);
+    history.push(path);
+  };
+
+  return (
+    <Layout style={{ height: '100vh' }}>
+      <Header onHeaderClick={handleHeaderClick} />
+
+      <Content style={{ height: 'calc(100vh - 48px)' }}>
+        <Switch>
+          <Route path="/application/setting" exact>
+            <SettingPage />
+          </Route>
+          <Route path="/application/notification" exact>
+            <Notice />
+          </Route>
+          <Route path="*">
+            {entries ? (
+              entries.length === 0 ? (
+                <EmptyPage />
+              ) : window._SDF.saas.charge_status === CHARGE_STATUS.EXPIRED ? (
+                <Expiration />
+              ) : (
+                <Layout>
+                  {mode === MenuType.GROUP ? (
+                    <MultiSider menus={menus} />
+                  ) : (
+                    <SingleSider menus={menus} />
+                  )}
+                  <Content>{children}</Content>
+                </Layout>
+              )
+            ) : null}
+          </Route>
+        </Switch>
+      </Content>
+    </Layout>
+  );
+};

package/src/components/BLayout/components/Logo.tsx

@@ -0,0 +1,6 @@
+import { oemSaasAy } from '@/lang/utils';
+const Logo = () => {
+  const { logo } = oemSaasAy();
+  return <img src={logo} alt="" style={{ height: 30 }} />;
+};
+export default Logo;

package/src/components/BLayout/components/Menu/collapse.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import cx from 'classnames';
+import OpenDefaultSvg from './image/opendefault';
+import OpenSvg from './image/open';
+import CloseSvg from './image/close';
+import CloseDefaultSvg from './image/closedefault';
+import styles from './index.module.less';
+
+const CollapseButton = ({ collapsed, toggleCollapsed }) => {
+  const [mouseHover, setMouseHover] = useState(false);
+
+  return (
+    <div className={styles.collapsed}>
+      <div
+        className={cx(styles.svgContainer, 'main-svg-container')}
+        onClick={toggleCollapsed}
+        onMouseEnter={() => {
+          setMouseHover(true);
+        }}
+        onMouseLeave={() => {
+          setMouseHover(false);
+        }}
+      >
+        {collapsed ? (
+          mouseHover ? (
+            <OpenSvg />
+          ) : (
+            <OpenDefaultSvg />
+          )
+        ) : mouseHover ? (
+          <CloseSvg />
+        ) : (
+          <CloseDefaultSvg />
+        )}
+      </div>
+      <div className={cx(styles.line, 'main-collapsed-line')}></div>
+    </div>
+  );
+};
+
+export default CollapseButton;

package/src/components/BLayout/components/Menu/image/close.tsx

@@ -0,0 +1,26 @@
+const CloseSvg = () => {
+  return (
+    <svg
+      width="14"
+      height="40"
+      viewBox="0 0 14 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 0L10.7032 1.91128C12.6109 2.25194 14 3.9111 14 5.84899V34.151C14 36.0889 12.6109 37.7481 10.7032 38.0887L0 40V0Z"
+        fill="#1890FF"
+      />
+      <path
+        d="M10.2929 23.3535C10.4881 23.5487 10.8047 23.5487 11 23.3535C11.1952 23.1582 11.1952 22.8416 11 22.6464L8.70722 20.3535L11 18.0606C11.1952 17.8653 11.1952 17.5487 11 17.3535C10.8047 17.1582 10.4881 17.1582 10.2929 17.3535L7.64642 19.9999C7.46143 20.1849 7.4517 20.4788 7.61721 20.6752L7.64642 20.707L10.2929 23.3535Z"
+        fill="white"
+      />
+      <path
+        d="M7.29286 23.3535C7.48812 23.5487 7.80471 23.5487 7.99997 23.3535C8.19524 23.1582 8.19524 22.8416 7.99998 22.6464L5.70722 20.3535L7.99998 18.0606C8.19524 17.8653 8.19524 17.5487 7.99997 17.3535C7.80471 17.1582 7.48812 17.1582 7.29286 17.3535L4.64642 19.9999C4.46143 20.1849 4.4517 20.4788 4.61721 20.6752L4.64642 20.707L7.29286 23.3535Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default CloseSvg;

package/src/components/BLayout/components/Menu/image/closedefault.tsx

@@ -0,0 +1,26 @@
+const CloseDefaultSvg = () => {
+  return (
+    <svg
+      width="15"
+      height="40"
+      viewBox="0 0 15 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.5 0L11.2032 1.91128C13.1109 2.25194 14.5 3.9111 14.5 5.84899V34.151C14.5 36.0889 13.1109 37.7481 11.2032 38.0887L0.5 40V0Z"
+        fill="#E6E9EA"
+      />
+      <path
+        d="M10.2929 23.3535C10.4881 23.5487 10.8047 23.5487 11 23.3535C11.1952 23.1582 11.1952 22.8416 11 22.6464L8.70722 20.3535L11 18.0606C11.1952 17.8653 11.1952 17.5487 11 17.3535C10.8047 17.1582 10.4881 17.1582 10.2929 17.3535L7.64642 19.9999C7.46143 20.1849 7.4517 20.4788 7.61721 20.6752L7.64642 20.707L10.2929 23.3535Z"
+        fill="black"
+      />
+      <path
+        d="M7.29286 23.3535C7.48812 23.5487 7.80471 23.5487 7.99997 23.3535C8.19524 23.1582 8.19524 22.8416 7.99998 22.6464L5.70722 20.3535L7.99998 18.0606C8.19524 17.8653 8.19524 17.5487 7.99997 17.3535C7.80471 17.1582 7.48812 17.1582 7.29286 17.3535L4.64642 19.9999C4.46143 20.1849 4.4517 20.4788 4.61721 20.6752L4.64642 20.707L7.29286 23.3535Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default CloseDefaultSvg;