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

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

@@ -0,0 +1,38 @@
+const OpenSvg = () => {
+  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"
+      />
+      <g clip-path="url(#clip0_253_94238)">
+        <path
+          d="M4.26078 16.5698C4.02867 16.3377 3.65236 16.3377 3.42026 16.5698V16.5698C3.18817 16.8019 3.18816 17.1782 3.42025 17.4103L6.14554 20.1357L3.42025 22.8612C3.18816 23.0933 3.18817 23.4696 3.42026 23.7017V23.7017C3.65236 23.9338 4.02867 23.9338 4.26077 23.7017L7.40646 20.556C7.62634 20.3361 7.63792 19.9868 7.44118 19.7533L7.40646 19.7155L4.26078 16.5698Z"
+          fill="white"
+        />
+        <path
+          d="M7.82669 16.5698C7.59459 16.3377 7.21828 16.3377 6.98618 16.5698V16.5698C6.75408 16.8019 6.75408 17.1782 6.98617 17.4103L9.71146 20.1357L6.98617 22.8612C6.75408 23.0933 6.75408 23.4696 6.98618 23.7017V23.7017C7.21828 23.9338 7.59459 23.9338 7.82669 23.7017L10.9724 20.556C11.1923 20.3361 11.2038 19.9868 11.0071 19.7533L10.9724 19.7155L7.82669 16.5698Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_253_94238">
+          <rect
+            width="10"
+            height="10"
+            fill="white"
+            transform="translate(12 25) rotate(-180)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default OpenSvg;

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

@@ -0,0 +1,38 @@
+const OpenDefaultSvg = () => {
+  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="#E6E9EA"
+      />
+      <g clip-path="url(#clip0_253_94229)">
+        <path
+          d="M4.26076 16.5698C4.02866 16.3377 3.65235 16.3377 3.42025 16.5698V16.5698C3.18815 16.8019 3.18815 17.1782 3.42024 17.4103L6.14553 20.1357L3.42024 22.8612C3.18815 23.0933 3.18815 23.4696 3.42025 23.7017V23.7017C3.65235 23.9338 4.02866 23.9338 4.26076 23.7017L7.40645 20.556C7.62633 20.3361 7.6379 19.9868 7.44116 19.7533L7.40645 19.7155L4.26076 16.5698Z"
+          fill="black"
+        />
+        <path
+          d="M7.82669 16.5698C7.59459 16.3377 7.21828 16.3377 6.98618 16.5698V16.5698C6.75408 16.8019 6.75408 17.1782 6.98617 17.4103L9.71146 20.1357L6.98617 22.8612C6.75408 23.0933 6.75408 23.4696 6.98618 23.7017V23.7017C7.21828 23.9338 7.59459 23.9338 7.82669 23.7017L10.9724 20.556C11.1923 20.3361 11.2038 19.9868 11.0071 19.7533L10.9724 19.7155L7.82669 16.5698Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_253_94229">
+          <rect
+            width="10"
+            height="10"
+            fill="white"
+            transform="translate(12 25) rotate(-180)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default OpenDefaultSvg;

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

@@ -0,0 +1,125 @@
+.group {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+
+  .title {
+    width: 100%;
+    line-height: 48px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: normal;
+  }
+
+  .menu {
+    flex: 1;
+    border-right: none;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      width: 6px;
+    }
+    // :global {
+    //   .main-menu-sub.main-menu-inline {
+    //     background: inherit;
+    //   }
+    // }
+    .menu-li {
+      margin: 4px 0;
+      // 去除菜单选中时右侧boder
+      &::after {
+        display: none;
+      }
+    }
+  }
+  :global {
+    .main-menu-inline-collapsed {
+      overflow-y: overlay;
+      background: inherit;
+      &::-webkit-scrollbar {
+        display: none !important;
+      }
+      &:hover {
+        &::-webkit-scrollbar {
+          display: inherit !important;
+        }
+      }
+    }
+  }
+  .group-normal {
+    :global {
+      .main-menu-item-only-child > .main-menu-title-content {
+        padding-left: 5px;
+      }
+    }
+  }
+  .collapsedBar {
+    height: 40px;
+    line-height: 40px;
+    padding-left: 16px;
+    span {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}
+
+.preview {
+  margin-left: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0 8px;
+  height: 22px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.trial {
+  margin-left: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 0px 8px;
+  height: 22px;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+
+.latest {
+  margin-left: 10px;
+  font-size: 12px;
+  line-height: 20px;
+  height: 22px;
+  padding: 0px 8px;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.collapsed {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0px;
+  height: 100%;
+  .line {
+    position: absolute;
+    right: -1px;
+    top: 0;
+    width: 1px;
+    height: 100%;
+  }
+  .svgContainer {
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    width: 20px;
+    height: 60px;
+    transform: translate(100%, -50%);
+    cursor: pointer;
+    & > svg {
+      margin-top: 10px;
+    }
+  }
+}

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

@@ -0,0 +1,244 @@
+import { useEffect, useState, useRef } from 'react';
+import { Menu } from 'antd';
+import { NavLink, useLocation } from 'react-router-dom';
+import MenuIcon from '../MenuIcon';
+import { findEntry } from '@/utils/common';
+import cx from 'classnames';
+import styles from './index.module.less';
+import { useTranslation } from 'react-i18next';
+
+export enum MenuType {
+  GROUP = 'group',
+  NORMAL = 'normal',
+}
+
+const { SubMenu, Item } = Menu;
+
+const Icon = ({ icon, mode }) => {
+  return (
+    <span className="anticon">
+      <MenuIcon mode={mode} src={icon} />
+    </span>
+  );
+};
+
+export interface IMenu {
+  entry_id: string;
+  entry_name: string;
+  entry_type: 'entry' | 'group';
+  icon: string;
+  path: string;
+  sub_entry_list: IMenu[];
+  tag_code: 'STABLE' | 'LATEST' | 'PREVIEW' | 'TRIAL';
+  [k: string]: any;
+}
+
+interface IMenuProps {
+  name?: string;
+  menus: Array<IMenu>;
+  showCollapsed?: boolean;
+  mode?: MenuType;
+  collapsed: boolean;
+}
+
+let qkSetSelectedKeys = null;
+let qkSetKeys = null;
+
+export const modifySelectedMenu = (path: string) => {
+  const paths = window.location.pathname.split('/').filter((item) => !!item);
+  if (paths.length >= 2) {
+    const basePath = `/${paths[0]}/${paths[1]}`;
+    const pathname = `/${basePath}${path}`;
+    qkSetSelectedKeys([pathname]);
+    qkSetKeys([basePath]);
+  }
+};
+
+export const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default ({
+  name,
+  menus,
+  showCollapsed,
+  collapsed,
+  mode,
+}: IMenuProps) => {
+  const { pathname } = useLocation();
+  const [openKeys, setKeys] = useState<Array<string>>([]);
+  const prePathname = usePrevious(pathname);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const { t } = useTranslation();
+
+  qkSetSelectedKeys = setSelectedKeys;
+  qkSetKeys = setKeys;
+
+  const searchSelectPath = (menus, pathname, paths) => {
+    const entry = findEntry(menus, pathname);
+    if (entry) {
+      if (
+        window.location.pathname.split('/')?.filter((item) => !!item)
+          ?.length === 4
+      ) {
+        setSelectedKeys([window.location.pathname]);
+      } else {
+        setSelectedKeys([entry.path]);
+      }
+    } else {
+      if (paths.length > 2) {
+        const zPahts = paths.slice(0, paths.length - 1);
+        searchSelectPath(
+          menus,
+          zPahts.reduce((pre, cur) => pre + '/' + cur, ''),
+          zPahts,
+        );
+      } else if (paths.length === 2) {
+        if (menus.filter((item) => item.path === pathname).length > 0) {
+          setSelectedKeys([pathname]);
+        } else {
+          setSelectedKeys([prePathname]);
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (pathname !== '/') {
+      const paths = pathname.split('/').filter((item) => !!item);
+      searchSelectPath(menus, pathname, paths);
+    }
+  }, [pathname, menus]);
+
+  useEffect(() => {
+    const keys = pathname.split('/').slice(0, 3).join('/');
+    setKeys([keys]);
+  }, [pathname]);
+  const onOpenKeys = (openKeys) => {
+    setKeys(openKeys);
+  };
+
+  /**
+   *
+   * @param entry  菜单名称
+   * @param tag 菜单所属tag
+   * @param isSubMenu 是否有子菜单
+   * @returns
+   */
+  const tag = (entry, tag, isSubMenu) => {
+    const menuWidth = tag === 'STABLE' ? '100%' : `calc(100% - 68px)`;
+    return (
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+        <span
+          style={{
+            maxWidth: menuWidth,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {entry}
+        </span>
+        {tag === 'STABLE' ? null : !isSubMenu ? (
+          <span
+            className={
+              tag === 'PREVIEW'
+                ? cx(styles['preview'], 'main-app-tag-priview')
+                : tag === 'TRIAL'
+                ? cx(styles['trial'], 'main-app-tag-trial')
+                : cx(styles['latest'], 'main-app-tag-latest')
+            }
+          >
+            {tag === 'PREVIEW'
+              ? t('menu.edition.preview')
+              : tag === 'TRIAL'
+              ? t('menu.edition.trial')
+              : t('menu.edition.latest')}
+          </span>
+        ) : null}
+      </div>
+    );
+  };
+  const renderMenu = (entries, isSubmenu, hasSubMenu = false) => {
+    return entries?.map((entry) => {
+      const subMenu = entry.sub_entry_list && entry.sub_entry_list.length;
+      const tagLabel = tag(
+        entry.entry_name,
+        entry.tag_code ? entry.tag_code : 'STABLE',
+        hasSubMenu,
+      );
+      if (subMenu) {
+        return (
+          <SubMenu
+            title={tagLabel}
+            key={entry.path}
+            className={cx(
+              styles['menu-submenu'],
+              mode === 'normal' &&
+                collapsed &&
+                selectedKeys[0].indexOf(entry.path) !== -1
+                ? 'main-app-menu-collapsed-selected'
+                : null,
+            )}
+            icon={
+              !!entry.icon && showCollapsed ? (
+                <Icon mode={mode} icon={entry.icon} />
+              ) : null
+            }
+          >
+            {renderMenu(entry.sub_entry_list, true, true)}
+          </SubMenu>
+        );
+      }
+      const isIcon = !!entry.icon && showCollapsed && !isSubmenu;
+      return (
+        <Item
+          title={entry.entry_name}
+          className={styles['menu-li']}
+          key={entry.path}
+          icon={isIcon ? <Icon mode={mode} icon={entry.icon} /> : null}
+        >
+          <NavLink to={entry.path}>{tagLabel}</NavLink>
+        </Item>
+      );
+    });
+  };
+
+  return (
+    <div
+      className={cx(
+        styles.group,
+        'main-app-menu-group',
+        mode === 'normal' ? null : 'main-app-menu-group-mode',
+      )}
+    >
+      {name && (
+        <div className={cx(styles['title'], 'main-app-menu-group-title')}>
+          <span style={{ marginLeft: '16px' }}> {name}</span>
+        </div>
+      )}
+      <Menu
+        className={cx(
+          {
+            [styles.menu]: true,
+            [styles['group-normal']]: mode === MenuType.NORMAL,
+          },
+          'main-app-menu-group-menu',
+        )}
+        mode="inline"
+        selectedKeys={selectedKeys}
+        openKeys={openKeys}
+        inlineIndent={mode === MenuType.GROUP ? 16 : 17}
+        inlineCollapsed={collapsed}
+        onOpenChange={onOpenKeys}
+      >
+        {renderMenu(menus, false)}
+      </Menu>
+    </div>
+  );
+};

package/src/components/BLayout/components/MenuIcon.module.less

@@ -0,0 +1,5 @@
+.main-menu-item-icon {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}

package/src/components/BLayout/components/MenuIcon.tsx

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import { CSSProperties } from 'react';
+import { MenuType } from './Menu';
+import styled from './MenuIcon.module.less';
+interface IconProps {
+  src: string;
+  style?: CSSProperties;
+  mode?: MenuType;
+}
+
+const iconUrlReg = /^((https?:)?\/\/|\/)/;
+const MenuIcon = ({ src, mode, style = {} }: IconProps) => {
+  const isUrl = iconUrlReg.test(src);
+  const iconStyle = {
+    width: 16,
+    height: 16,
+    marginTop: isUrl ? -2 : 1,
+    ...style,
+  };
+  return (
+    <span
+      className={cx(styled['main-menu-item-icon'], 'main-menu-icon')}
+      style={
+        mode === 'normal'
+          ? { height: '40px' }
+          : { height: '16px', margin: '0 0 4px' }
+      }
+    >
+      {isUrl ? (
+        <img src={src} alt="" style={iconStyle} />
+      ) : (
+        <svg
+          style={iconStyle}
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+        >
+          <path d={src} />
+        </svg>
+      )}
+    </span>
+  );
+};
+
+export default MenuIcon;

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

@@ -0,0 +1,104 @@
+@group-with: 80px;
+
+.sider {
+  height: calc(100vh - 48px);
+  background-color: #fff;
+  z-index: 100;
+  /**
+  * cover antd style -s
+  */
+  flex: 0 0 auto !important;
+  width: auto !important;
+  max-width: 400px !important;
+  min-width: 0px !important;
+  /**
+  * cover antd style -e
+  */
+  :global {
+    .main-layout-sider-children {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+  .menuContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: all 0.3s;
+  }
+  .group {
+    padding-top: 16px;
+    height: 100%;
+    padding-left: 0;
+    overflow-y: overlay;
+    min-width: @group-with;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+    .group-menu {
+      margin: 4px 0;
+    }
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      width: 6px;
+    }
+    .fakeMenu182 {
+      width: 182px;
+    }
+
+    .fakeMenu156 {
+      width: 156px;
+    }
+
+    .fakeMenu132 {
+      width: 132px;
+    }
+    .fakeMenu {
+      position: absolute;
+      top: 0;
+      left: @group-with;
+      height: 100%;
+      transform: translate(-100%, 0);
+      transition: all 0.3s;
+      transition-delay: 0.2s;
+      // background-color: #fff;
+      z-index: 1;
+      &:hover {
+        transform: translate(0, 0);
+        z-index: 2;
+      }
+    }
+    .groupCover {
+      position: absolute;
+      z-index: 3;
+      left: 0;
+      top: 0;
+      width: @group-with;
+      height: 100%;
+    }
+    .groupItem {
+      width: @group-with - 1px;
+      height: 42px;
+      cursor: pointer;
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: space-around;
+      align-items: center;
+      padding: 11px 0;
+      box-sizing: content-box;
+      .groupName {
+        text-align: center;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &:hover + .fakeMenu {
+        transform: translateX(0);
+        z-index: 2;
+      }
+    }
+  }
+}