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

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

@@ -0,0 +1,172 @@
+import { Layout } from 'antd';
+import { CSSProperties, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import MenuIcon from '../MenuIcon';
+import { useLocation, useHistory } from 'react-router-dom';
+import Menu, { IMenu, MenuType } from '../Menu';
+import { getDeepestPath } from '@/utils/common';
+import styles from './index.module.less';
+import { useTranslation } from 'react-i18next';
+import { checkMenuVersion } from '@/utils';
+import CollapseButton from '../Menu/collapse';
+interface Noop {
+  (): void;
+}
+
+const { Sider } = Layout;
+
+const Group = ({
+  name,
+  icon,
+  style = {},
+  isActive,
+  onActive,
+  onHover,
+}: {
+  name: string;
+  icon: string;
+  style?: CSSProperties;
+  isActive: boolean;
+  onActive: Noop;
+  onHover: Noop;
+}) => {
+  let timer = null;
+
+  return (
+    <li
+      style={style}
+      className={cx({
+        [styles['groupItem']]: true,
+        'main-group-item': true,
+        'main-group-active': isActive,
+      })}
+      onClick={onActive}
+      onMouseEnter={() => {
+        timer = setTimeout(onHover, 100);
+      }}
+      onMouseLeave={() => clearTimeout(timer)}
+    >
+      <MenuIcon src={icon} style={{ width: 16, height: 16, marginTop: 0 }} />
+      <div className={styles['groupName']}>{name}</div>
+    </li>
+  );
+};
+
+const findGroupByPath = (menus, pathname) => {
+  return menus.find(({ sub_entry_list }) => {
+    return sub_entry_list.some(({ path }) => pathname.includes(path));
+  });
+};
+
+export default function MultiSider({ menus }: { menus: Array<IMenu> }) {
+  const { pathname } = useLocation();
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [subMenus, setSubMenus] = useState<Array<IMenu>>([]);
+  const [groupName, setGroupName] = useState<string>();
+  const [groupId, setGroupId] = useState<string>();
+  const activeMenus = useRef<Array<IMenu>>();
+  const activeName = useRef<string>();
+
+  const history = useHistory();
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    if (menus.length) {
+      let group = null;
+      if (pathname !== '/') {
+        group = findGroupByPath(menus, pathname) || menus[0];
+      }
+      setSubMenus(group.sub_entry_list);
+      setGroupName(group.entry_name);
+      setGroupId(group.entry_id);
+      activeMenus.current = group.sub_entry_list;
+      activeName.current = group.entry_name;
+    }
+  }, [menus, pathname]);
+
+  const handleGroupActive = (group: IMenu) => {
+    const { entry_id, entry_name, sub_entry_list } = group;
+    if (entry_id !== groupId) {
+      setGroupName(entry_name);
+      setSubMenus(sub_entry_list);
+      setGroupId(entry_id);
+      activeMenus.current = sub_entry_list;
+      activeName.current = entry_name;
+      setCollapsed(false);
+      history.push(getDeepestPath(sub_entry_list[0]));
+    }
+  };
+
+  const toggleCollapsed = () => {
+    setCollapsed((pre) => !pre);
+  };
+
+  return (
+    <Sider className={styles.sider}>
+      <ul className={cx(styles.group, 'main-group')}>
+        {menus.map((group, index) => {
+          const { entry_id, entry_name, icon, sub_entry_list } = group;
+          return (
+            <div key={index} className={styles['group-menu']}>
+              <Group
+                style={{ position: 'relative', zIndex: 4 }}
+                key={entry_id}
+                name={entry_name}
+                icon={icon}
+                isActive={groupId === entry_id}
+                onActive={() => handleGroupActive(group)}
+                onHover={() => {}}
+              />
+              {groupId !== entry_id && (
+                <div
+                  className={cx(
+                    styles.fakeMenu,
+                    checkMenuVersion(menus)
+                      ? styles.fakeMenu182
+                      : i18n.language === 'zh'
+                      ? styles.fakeMenu132
+                      : styles.fakeMenu156,
+                    'main-fake-menu',
+                  )}
+                >
+                  <Menu
+                    name={entry_name}
+                    menus={sub_entry_list}
+                    mode={MenuType.GROUP}
+                    showCollapsed={false}
+                    collapsed={false}
+                  />
+                </div>
+              )}
+              <div className={cx(styles.groupCover, 'main-group-cover')}></div>
+            </div>
+          );
+        })}
+      </ul>
+      <div
+        className={cx(styles.menuContainer, 'main-app-menu-containter')}
+        style={{
+          width: collapsed
+            ? 0
+            : checkMenuVersion(menus)
+            ? 182
+            : i18n.language === 'zh'
+            ? 132
+            : 156,
+        }}
+      >
+        <Menu
+          name={groupName}
+          menus={subMenus}
+          mode={MenuType.GROUP}
+          showCollapsed={false}
+          collapsed={false}
+        />
+        <CollapseButton
+          collapsed={collapsed}
+          toggleCollapsed={toggleCollapsed}
+        />
+      </div>
+    </Sider>
+  );
+}

package/src/components/BLayout/components/Sider/index.less

@@ -0,0 +1,64 @@
+.sider {
+  height: calc(100vh - 56px);
+  background-color: #fff !important;
+  :global {
+    .ant-layout-sider-children {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+  .group {
+    height: 100%;
+    padding: 8px 0;
+    border-right: 1px solid #f0f2f5;
+    overflow-y: auto;
+    min-width: 84px;
+    overflow-x: hidden;
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 3px 3px #c1c1c1;
+      border: solid 2px transparent;
+      background: #fff;
+      &:hover {
+        box-shadow: inset 0 0 3px 3px #7d7d7d;
+      }
+    }
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+    &::-webkit-scrollbar-track {
+      width: 7px;
+      background: #fff;
+    }
+    .groupItem {
+      width: 84px;
+      height: 60px;
+      cursor: pointer;
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-around;
+      align-items: center;
+      padding: 6px 0;
+      box-sizing: content-box;
+      &:not(:last-child) {
+        margin-bottom: 8px;
+      }
+      .groupName {
+        text-align: center;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:hover {
+        color: #1890ff;
+      }
+    }
+    .groupActive {
+      background-color: #e6f7ff;
+      .groupName {
+        color: #1890ff;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.sider {
+  height: calc(100vh - 48px);
+  background-color: #fff;
+  z-index: 9;
+  :global {
+    .main-layout-sider-children {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+}
+.group {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: all 0.3s;
+}

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

@@ -0,0 +1,34 @@
+import { Layout } from 'antd';
+import { useState, useEffect } from 'react';
+import Menu, { IMenu, MenuType } from '../Menu';
+import CollapseButton from '../Menu/collapse';
+import styles from './index.module.less';
+
+const { Sider } = Layout;
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default function SingleSider({ menus }: { menus: Array<IMenu> }) {
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+
+  const toggleCollapsed = () => {
+    setCollapsed((pre) => !pre);
+  };
+
+  return (
+    <Sider
+      width={208}
+      collapsed={collapsed}
+      collapsedWidth={48}
+      className={styles.sider}
+    >
+      <Menu
+        menus={menus}
+        mode={MenuType.NORMAL}
+        showCollapsed={true}
+        collapsed={collapsed}
+      />
+
+      <CollapseButton collapsed={collapsed} toggleCollapsed={toggleCollapsed} />
+    </Sider>
+  );
+}

package/src/components/BLayout/index.tsx

@@ -0,0 +1,78 @@
+import ILayout from './components/Layout';
+import { useEffect, useState } from 'react';
+import { Spin } from 'antd';
+import { useHistory, useLocation, Switch, Route } from 'react-router-dom';
+import { getDeepestPath, findEntry } from '@/utils/common';
+import { MenuType } from './components/Menu';
+import { oemSaasAy } from '@/lang/utils';
+import Page403 from '@/pages/403';
+import Page404 from '@/pages/404';
+
+//过滤小程序菜单
+const fileterMinApp = (entryInfo, apps) => {
+  const { entry_mode, entries } = entryInfo;
+  if (entry_mode === MenuType.GROUP) {
+    return entries.map((group) => {
+      const { sub_entry_list, ...others } = group;
+      return {
+        ...others,
+        sub_entry_list: filtor(sub_entry_list, apps),
+      };
+    });
+  } else if (entry_mode === MenuType.NORMAL) {
+    return filtor(entries, apps);
+  }
+};
+
+const filtor = (entries, apps) => {
+  return entries?.filter((menu) => {
+    const { oem_micro_app_id } = menu;
+    const { ext_info } = apps.find(
+      ({ oem_micro_app_id: id }) => id === oem_micro_app_id
+    );
+    if (!ext_info || !ext_info['sdf.main-app.menu.hide_in_menu']) {
+      return menu;
+    }
+  });
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default ({ entryInfo, isMicroApp, apps, children }) => {
+  const { entry_mode, entries } = entryInfo;
+  const [entry, setEntry] = useState([]);
+  const { pathname } = useLocation();
+  const history = useHistory();
+  const { title } = oemSaasAy();
+  useEffect(() => {
+    if (entries && apps.length) {
+      const entry = fileterMinApp(entryInfo, apps) || [];
+      setEntry(entry);
+      if (entry.length > 0 && pathname === '/') {
+        history.replace(getDeepestPath(entry[0]));
+      }
+    }
+  }, [entries, apps]);
+
+  useEffect(() => {
+    if (entries?.length) {
+      const entry = findEntry(entries, pathname);
+      if (entry) {
+        document.title = `${entry.entry_name} - ${title}`;
+      }
+    }
+  }, [entries, pathname]);
+
+  return (
+    <Spin spinning={!entry_mode} style={{ marginTop: 100 }}>
+      <ILayout entries={entries} mode={entry_mode} menus={entry}>
+        {children}
+        <Switch>
+          <Route path="/403" exact>
+            <Page403 />
+          </Route>
+          <Route path="*">{isMicroApp ? null : <Page404 />}</Route>
+        </Switch>
+      </ILayout>
+    </Spin>
+  );
+};

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

@@ -0,0 +1,65 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100vh;
+  min-width: 1200px;
+  overflow: auto;
+  position: relative;
+  .left {
+    width: 60%;
+    flex: 1;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center right;
+    background-size: cover;
+  }
+  .right {
+    width: 40%;
+    display: flex;
+    justify-content: center;
+    .login {
+      position: relative;
+      width: 70%;
+      min-width: 400px;
+      max-width: 500px;
+      .loading {
+        position: absolute;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .top-container {
+    position: absolute;
+    top: 20px;
+    right: 40px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  :global {
+    .main-select-selection-search {
+      left: auto !important;
+    }
+
+    .main-select-selection-search-input {
+      width: auto !important;
+      text-align: right;
+    }
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .container {
+    min-height: 760px;
+  }
+}
+@media screen and (min-width: 1920px) {
+  .container {
+    min-height: 870px;
+  }
+}

package/src/components/BLayoutLogin/index.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Select } from 'antd';
+import BSwitchLang from '@/components/BHeaderUser/components/BSwitchLang';
+import { COUNTRY_LIST } from '@/constant';
+import { getI18n } from 'react-i18next';
+import styles from './index.module.less';
+import { switchLang, oemSaasAy } from '@/lang/utils';
+
+const BLayoutLogin = (props) => {
+  const [region, setRegionCode] = useState('86');
+  const { background_image: bg } = oemSaasAy();
+
+  const handleRegionChange = (value: string) => {
+    setRegionCode(value);
+    localStorage.setItem('regionCode', value);
+  };
+
+  const toChangeLang = (lang) => {
+    switchLang(lang);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.left}
+        style={{ backgroundImage: `url("${bg}")` }}
+      />
+      <div className={styles.right}>
+        <div className={styles.login}>{props.children}</div>
+      </div>
+      <div className={styles['top-container']}>
+        {window._SDF_CONFIG?.saas?.PHONE_REGION_NUM_ENABLE !== false && (
+          <Select
+            showSearch
+            className="countryCode"
+            value={region}
+            labelInValue={false}
+            bordered={false}
+            optionFilterProp="children"
+            dropdownMatchSelectWidth={false}
+            dropdownAlign={{
+              points: ['tr', 'br'],
+            }}
+            dropdownClassName={styles.selectOptionsWrap}
+            style={{ width: 'auto', minWidth: 100 }}
+            onChange={handleRegionChange}
+          >
+            {COUNTRY_LIST.map((country) => (
+              <Select.Option
+                key={country.countryCode}
+                value={country.countryCode}
+              >
+                {getI18n().language === 'zh' ? country.cnName : country.enName}
+                (+
+                {country.countryCode})
+              </Select.Option>
+            ))}
+          </Select>
+        )}
+        {window._SDF_CONFIG?.saas?.MULTI_LANG.ENABLE !== false && (
+          <BSwitchLang toChangeLang={toChangeLang} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BLayoutLogin;

package/src/components/BLogin/component/Clause/index.module.less

@@ -0,0 +1,25 @@
+.wrap {
+  padding-top: 8px;
+  .clause_check {
+    height: 22px;
+    line-height: 22px;
+  }
+  .clause_text {
+    height: 22px;
+    line-height: 22px;
+    margin-left: 8px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .clause {
+    margin-left: 8px;
+
+    height: 22px;
+    line-height: 22px !important;
+    padding: 0;
+    span {
+      height: 22px;
+      line-height: 22px;
+    }
+  }
+}

package/src/components/BLogin/component/Clause/index.tsx

@@ -0,0 +1,58 @@
+import { Button, Checkbox, Row } from 'antd';
+import { useTranslation } from 'react-i18next';
+import styles from './index.module.less';
+import { oemSaasAy } from '@/lang/utils';
+// @link-color
+const Clause = ({
+  toggleAgreed,
+}: {
+  toggleAgreed: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const { t } = useTranslation();
+  const { legal_notice, privacy_policy, service_terms } = oemSaasAy();
+
+  return (
+    <Row className={styles.wrap}>
+      <Checkbox
+        id="agree"
+        className={styles.clause_check}
+        defaultChecked={true}
+        onChange={(e) => toggleAgreed(e.target.checked)}
+      />
+      <label className={styles.clause_text} htmlFor={'agree'}>
+        {t('login.text')}
+      </label>
+      {!!service_terms && (
+        <Button
+          className={styles.clause}
+          type="link"
+          target="blank"
+          href={service_terms}
+        >
+          {`${t('login.service')}`}
+        </Button>
+      )}
+      {!!legal_notice && (
+        <Button
+          className={styles.clause}
+          type="link"
+          target="blank"
+          href={legal_notice}
+        >
+          {`${t('login.legal')}`}
+        </Button>
+      )}
+      {!!privacy_policy && (
+        <Button
+          className={styles.clause}
+          type="link"
+          target="blank"
+          href={privacy_policy}
+        >
+          {`${t('login.privacy')}`}
+        </Button>
+      )}
+    </Row>
+  );
+};
+export default Clause;

package/src/components/BLogin/component/ForgotBtn/index.module.less

@@ -0,0 +1,9 @@
+.wrap {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 22px;
+  line-height: 22px;
+  margin-top: 8px;
+}

package/src/components/BLogin/component/ForgotBtn/index.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import styles from './index.module.less';
+// eslint-disable-next-line import/no-anonymous-default-export
+export default ({ showRegister = true }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.wrap}>
+      <Link to={{ pathname: '/forgot' }}>{t('login.forgot')}</Link>
+      {showRegister && (
+        <div>
+          {t('forgot.noAccount')}
+          <Link to="/register">{t('forgot.toRegister')}</Link>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/BLogin/component/Password/index.tsx

@@ -0,0 +1,39 @@
+import { Form, Input } from 'antd';
+import { LockOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import { checkPassWord } from '@/utils/checkPass';
+
+// 首页登录和忘记密码
+const Password = ({ isHide = false, name = 'login' }) => {
+  const { t } = useTranslation();
+  return (
+    <Form.Item
+      name="password"
+      label={t('login.form.password.label')}
+      required={false}
+      rules={[
+        {
+          required: true,
+          message: t('login.form.password.validate.require'),
+        },
+        name === 'password' &&
+          (() => ({
+            validator(_, value) {
+              const result = checkPassWord(value);
+              if (result) return Promise.resolve();
+              const tip = t('login.form.password.validate.pattern');
+              return Promise.reject(new Error(tip));
+            },
+          })),
+      ]}
+    >
+      <Input.Password
+        size="large"
+        prefix={<LockOutlined className="site-form-item-icon" />}
+        placeholder={t('login.form.password.placeholder')}
+      />
+    </Form.Item>
+  );
+};
+
+export default Password;

package/src/components/BLogin/component/SubmitBtn/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from 'antd';
+
+interface ISubmitProps {
+  top: number;
+  loading?: boolean;
+  disabled?: boolean;
+  btTx: string;
+}
+const SubmitBtn = ({
+  top,
+  loading = false,
+  disabled = true,
+  btTx,
+}: ISubmitProps) => {
+  return (
+    <Button
+      type="primary"
+      loading={loading}
+      htmlType="submit"
+      size="large"
+      block
+      disabled={!disabled}
+      style={{ marginTop: `${top}px` }}
+    >
+      {btTx}
+    </Button>
+  );
+};
+export default SubmitBtn;