tntd 1.4.17 → 2.0.0-beta-1

package/es/business-components/tntd-layout/SideMenu.js

@@ -0,0 +1,399 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useEffect, useContext } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { Menu } from 'antd';
+import { get } from 'lodash';
+import ActionsContext from './ActionsContext';
+import { getSelectedMenuInfo, isGroupMenu, isNewTabMenu, openInNewTab, traverseTree, } from '../utils';
+import { setSideMenuStore } from './storage';
+import Iconfont from './Iconfont';
+const color = 'rgba(255,255,255,.85)';
+const compatibleColor = '#a1d7ff';
+const { SubMenu, Item: MenuItem } = Menu;
+const TNTMenu = styled(Menu) `
+  background: none !important;
+  &.ant-menu.ant-menu-root {
+    position: relative;
+    transition: none !important;
+    padding-top: 10px;
+    border-right: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: calc(100vh - ${(props) => `${props.theme.headerHeight}px`});
+    overflow-y: auto;
+    overflow-x: hidden;
+    .collapseIconPlacementBottom & {
+      padding-bottom: 36px;
+    }
+    .tnt-themeS1 & {
+      overflow-x: unset;
+      box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.1);
+      z-index: 2;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &::-moz-scrollbar {
+      display: none;
+    }
+
+    /** 一级结点是菜单样式开始 */
+    & > .ant-menu-item {
+      & > .tnt-icon:first-child {
+        font-size: 16px;
+      }
+    }
+
+    .ant-layout-sider-collapsed & {
+      & > .ant-menu-item {
+        & > .tnt-icon:first-child {
+          padding-left: 8px;
+        }
+        a {
+          visibility: hidden;
+        }
+      }
+    }
+    /** 一级结点是菜单样式结束 */
+
+    .ant-menu-item:active,
+    .ant-menu-submenu-title:active {
+      background: none;
+    }
+
+    .ant-menu-submenu .ant-menu-sub {
+      background: #212635;
+      border-radius: 0 0 2px 2px;
+      .compatible & {
+        background: #07408d !important;
+      }
+      .tnt-themeS1 & {
+        background: #fff !important;
+      }
+
+      // 蓝色系列 菜单展开区域颜色
+      .tnt-themeS3 & {
+        background: #07408d !important;
+      }
+    }
+    .ant-menu-submenu.ant-menu-submenu-active,
+    .ant-menu-submenu.ant-menu-submenu-selected {
+      background: rgba(47, 129, 247, 0.25) !important;
+      .tnt-themeS1 & {
+        background: ${(props) => props.theme.dividerColor} !important;
+      }
+
+      // 蓝色系 一级菜单的选中效果
+      .tnt-themeS3 & {
+        background: #204085 !important;
+      }
+    }
+    & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,
+    & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {
+      background: none !important;
+      .tnt-themeS1 & {
+        background: ${(props) => props.theme.dividerColor} !important;
+      }
+      // 蓝色系 子级菜单级的选中效果
+      .tnt-themeS3 & {
+        background: #204085 !important;
+      }
+    }
+    .ant-menu-item {
+      margin: 0;
+      font-size: 14px;
+      padding-left: 54px !important;
+      height: ${({ size }) => (size === 'large' ? '40px' : '36px')};
+      line-height: ${({ size }) => (size === 'large' ? '40px' : '36px')};
+    }
+
+    & > .ant-menu-item {
+      padding-left: 24px !important;
+      width: 100%;
+
+      & > .tnt-icon {
+        margin-right: 12px;
+      }
+      & > a {
+        display: inline-block;
+      }
+    }
+
+    .ant-menu-submenu-title {
+      position: relative;
+      color: ${(props) => (props.theme.compatible ? compatibleColor : color)};
+      .tnt-themeS1 & {
+        color: ${(props) => props.theme.primaryTextColor};
+      }
+      height: ${({ size }) => (size === 'large' ? '40px' : '36px')};
+      line-height: ${({ size }) => (size === 'large' ? '40px' : '36px')};
+      .tnt-icon {
+        .tnt-themeS1 & {
+          color: ${(props) => props.theme.lightIconColor};
+        }
+      }
+      & > .tnt-icon {
+        position: absolute;
+        right: 20px;
+        top: 1px;
+        font-size: 10px;
+      }
+
+      // 蓝色系主题
+      .tnt-themeS3 & {
+        color: #fff;
+      }
+      .tnt-icon {
+        .tnt-themeS3 & {
+          color: #fff;
+        }
+      }
+    }
+
+    & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-left: 54px !important;
+    }
+  }
+
+  &.ant-menu .menu-arrow-right {
+    color: ${(props) => (props.theme.compatible ? compatibleColor : color)};
+  }
+
+  .ant-menu-item,
+  .ant-menu-item > a {
+    color: ${(props) => (props.theme.compatible ? compatibleColor : color)};
+    .tnt-themeS1 & {
+      color: ${(props) => props.theme.primaryTextColor};
+    }
+    &:hover {
+      color: #fff;
+      .tnt-themeS1 & {
+        color: ${(props) => props.theme.primaryColor};
+      }
+    }
+
+    // 蓝色系列
+    .tnt-themeS3 & {
+      color: #fff;
+    }
+    &:hover {
+      .tnt-themeS3 & {
+        color: #fff;
+      }
+    }
+  }
+  & > .ant-menu-item.ant-menu-item-selected,
+  &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+    color: rgba(255, 255, 255, 0.85);
+    background-color: ${(props) => props.theme.primaryColor};
+    .compatible & {
+      background-color: #013479;
+    }
+    & > a {
+      .tnt-themeS1 & {
+        color: #fff;
+      }
+    }
+    .tnt-themeS1 & {
+      color: #fff;
+      background-color: ${(props) => props.theme.primaryColor};
+    }
+
+    // 蓝色系 子项选中颜色
+    .tnt-themeS3 & {
+      color: #fff;
+      background: #013479;
+      &::after {
+        content: '';
+        display: none;
+      }
+    }
+  }
+  .ant-menu-submenu.ant-menu-submenu-selected {
+    .tnt-themeS2 & {
+      background: #141825;
+    }
+    .tnt-themeS2.compatible & {
+      background: rgba(47, 129, 247, 0.25) !important;
+    }
+  }
+`;
+const MenuTitle = styled.span `
+  font-size: 14px;
+  .large-size & {
+    font-size: 15px;
+  }
+  color: rgba(255, 255, 255, 0.85);
+  .compatible & {
+    color: #a1d7ff;
+  }
+  .tnt-themeS1 & {
+    color: ${(props) => props.theme.primaryTextColor};
+  }
+  .tnt-icon {
+    margin-right: 12px;
+    font-size: 16px;
+    position: relative;
+    top: 1px;
+
+    .large-size & {
+      font-size: 18px;
+      top: auto;
+    }
+    .tnt-themeS1 & {
+      /* color: #7e8081; */
+      color: ${(props) => `${props.theme.iconColor}`};
+    }
+  }
+`;
+export default withTheme((props) => {
+    const actions = useContext(ActionsContext);
+    const { language, menus = [], formatMenuPath, changeRouter, selectedKey, openKeys, onSelect, onBeforeChange, onChange, onOpenChange, collapsed, } = props;
+    const { subMenu, parentMenus } = getSelectedMenuInfo(selectedKey, menus);
+    const [selectedKeys, setSelectedKeys] = useState([get(subMenu, 'code')]);
+    const onSelectMenu = (param) => {
+        const { subMenu, parentMenus } = getSelectedMenuInfo(param.key, menus) || {};
+        const params = Object.assign(Object.assign({}, param), { data: subMenu });
+        const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
+        const defaultSelect = ({ data }) => {
+            var _a;
+            const { path } = data || {};
+            const formatPath = formatMenuPath || ((path) => path);
+            if (isNewTabMenu(data)) {
+                openInNewTab(formatPath(data === null || data === void 0 ? void 0 : data.path, data));
+                return;
+            }
+            const routerPrefix = (_a = window.location.pathname.match(/(^\/[^\/]+)/i)) === null || _a === void 0 ? void 0 : _a[1];
+            if (path === null || path === void 0 ? void 0 : path.startsWith(routerPrefix)) {
+                const forwardPath = formatPath(path, data);
+                changeRouter
+                    ? changeRouter(forwardPath, data)
+                    : window.history.pushState(data, data === null || data === void 0 ? void 0 : data.name, forwardPath);
+            }
+            else {
+                window.location.href = formatPath(path, data);
+            }
+        };
+        const finalSelect = onSelect || defaultSelect;
+        if (param.key !== get(selectedKeys, '0')) {
+            const finalBeforeChange = onBeforeChange || defaultBeforeChange;
+            if (finalBeforeChange(params, get(selectedKeys, '0'))) {
+                // SideMenu菜单收起状态
+                if (collapsed) {
+                    const newOpenKeys = parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(({ code }) => code).reverse();
+                    onOpenChange(newOpenKeys);
+                    setSideMenuStore({
+                        openKeys: newOpenKeys,
+                        beforeOpenKeys: newOpenKeys,
+                    });
+                }
+                setSelectedKeys([param.key]);
+                onChange && onChange(params);
+            }
+        }
+        actions.setSelectedMenuKey(param.key);
+        setSelectedKeys([param.key]);
+        finalSelect(params);
+    };
+    const getExpandIcon = (code) => {
+        if (props.theme.compatible) {
+            return openKeys.includes(code) ? 'minus' : 'plus';
+        }
+        return openKeys.includes(code) ? 'up' : 'down';
+    };
+    const onOpenKeysChange = (keys) => {
+        const openKey = keys.find((key) => !openKeys.includes(key));
+        // const closeKey = openKeys.find(key => !keys.includes(key));
+        let newOpenKeys = keys;
+        const findParentGroupKey = (key, openKeys) => {
+            let parentGroupKey;
+            traverseTree(menus, (node, pnode) => {
+                if (node.code === key) {
+                    if (pnode && openKeys.includes(pnode === null || pnode === void 0 ? void 0 : pnode.code)) {
+                        parentGroupKey = pnode === null || pnode === void 0 ? void 0 : pnode.code;
+                    }
+                    return false;
+                }
+            });
+            return parentGroupKey;
+        };
+        // 展开openKey
+        if (openKey) {
+            // 父子关系展开
+            const parentGroupKey = findParentGroupKey(openKey, openKeys);
+            if (parentGroupKey) {
+                newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys;
+            }
+            else {
+                newOpenKeys = [openKey];
+            }
+        }
+        else {
+            // 收起closeKey
+            newOpenKeys = keys;
+        }
+        onOpenChange(newOpenKeys);
+    };
+    useEffect(() => {
+        setSelectedKeys([selectedKey]);
+        if (selectedKey && !collapsed && (parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.length)) {
+            onOpenChange(parentMenus === null || parentMenus === void 0 ? void 0 : parentMenus.map(({ code }) => code).reverse());
+        }
+        actions.setSelectedMenuKey(selectedKey);
+    }, [selectedKey]);
+    actions.off('menuSelect', onSelectMenu);
+    actions.on('menuSelect', onSelectMenu);
+    return (React.createElement(TNTMenu, { mode: "inline", defaultSelectedKeys: [], openKeys: openKeys, selectedKeys: selectedKeys, onOpenChange: onOpenKeysChange }, menus === null || menus === void 0 ? void 0 : menus.map((menu) => {
+        var _a;
+        const MenuLink = ({ menuName, enName, path }) => (React.createElement("a", { href: path, onClick: (evt) => evt.preventDefault() }, {
+            cn: menuName,
+            en: enName,
+        }[language]));
+        if (isGroupMenu(menu)) {
+            const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({
+                key: code,
+                title: (React.createElement(MenuTitle, { style: collapsed && isSubGroup ? { color: props.theme.primaryTextColor } : {} },
+                    !isSubGroup && React.createElement(Iconfont, { type: groupIcon }),
+                    collapsed && !isSubGroup
+                        ? ''
+                        : {
+                            cn: groupName,
+                            en: enName,
+                        }[language])),
+                expandIcon: collapsed ? null : React.createElement(Iconfont /*  */, { type: getExpandIcon(code) }),
+            });
+            return (React.createElement(SubMenu, Object.assign({}, getSubMenuProps(menu), { onClick: onSelectMenu }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map((menu) => {
+                var _a;
+                if (isGroupMenu(menu)) {
+                    return (React.createElement(SubMenu, Object.assign({}, getSubMenuProps(menu, true), { onClick: onSelectMenu }), (_a = menu === null || menu === void 0 ? void 0 : menu.children) === null || _a === void 0 ? void 0 : _a.map((_a) => {
+                        var { code } = _a, menu = __rest(_a, ["code"]);
+                        return (React.createElement(MenuItem, { key: code },
+                            React.createElement(MenuLink, Object.assign({}, menu, { style: { paddingLeft: '24px' } }))));
+                    })));
+                }
+                return (React.createElement(MenuItem, { key: menu === null || menu === void 0 ? void 0 : menu.code },
+                    React.createElement(MenuLink, Object.assign({}, menu))));
+            })));
+        }
+        return (React.createElement(MenuItem, { key: menu.code, onClick: onSelectMenu },
+            React.createElement(Iconfont, { type: menu.icon }),
+            React.createElement(MenuLink, Object.assign({}, menu))));
+    })));
+});
+//# sourceMappingURL=SideMenu.js.map

package/es/business-components/tntd-layout/SideMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideMenu.js","sourceRoot":"","sources":["../../../src/business-components/tntd-layout/SideMenu.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useContext } from 'react'\nimport styled, { withTheme } from 'styled-components'\nimport { Menu } from 'antd'\nimport { get } from 'lodash'\nimport ActionsContext from './ActionsContext'\nimport {\n  getSelectedMenuInfo,\n  isGroupMenu,\n  isNewTabMenu,\n  openInNewTab,\n  traverseTree,\n} from '../utils'\nimport { setSideMenuStore } from './storage'\nimport Iconfont from './Iconfont'\n\nconst color = 'rgba(255,255,255,.85)'\nconst compatibleColor = '#a1d7ff'\nconst { SubMenu, Item: MenuItem } = Menu\nconst TNTMenu = styled(Menu)`\n  background: none !important;\n  &.ant-menu.ant-menu-root {\n    position: relative;\n    transition: none !important;\n    padding-top: 10px;\n    border-right: none;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: calc(100vh - ${(props) => `${props.theme.headerHeight}px`});\n    overflow-y: auto;\n    overflow-x: hidden;\n    .collapseIconPlacementBottom & {\n      padding-bottom: 36px;\n    }\n    .tnt-themeS1 & {\n      overflow-x: unset;\n      box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.1);\n      z-index: 2;\n    }\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    &::-moz-scrollbar {\n      display: none;\n    }\n\n    /** 一级结点是菜单样式开始 */\n    & > .ant-menu-item {\n      & > .tnt-icon:first-child {\n        font-size: 16px;\n      }\n    }\n\n    .ant-layout-sider-collapsed & {\n      & > .ant-menu-item {\n        & > .tnt-icon:first-child {\n          padding-left: 8px;\n        }\n        a {\n          visibility: hidden;\n        }\n      }\n    }\n    /** 一级结点是菜单样式结束 */\n\n    .ant-menu-item:active,\n    .ant-menu-submenu-title:active {\n      background: none;\n    }\n\n    .ant-menu-submenu .ant-menu-sub {\n      background: #212635;\n      border-radius: 0 0 2px 2px;\n      .compatible & {\n        background: #07408d !important;\n      }\n      .tnt-themeS1 & {\n        background: #fff !important;\n      }\n\n      // 蓝色系列 菜单展开区域颜色\n      .tnt-themeS3 & {\n        background: #07408d !important;\n      }\n    }\n    .ant-menu-submenu.ant-menu-submenu-active,\n    .ant-menu-submenu.ant-menu-submenu-selected {\n      background: rgba(47, 129, 247, 0.25) !important;\n      .tnt-themeS1 & {\n        background: ${(props) => props.theme.dividerColor} !important;\n      }\n\n      // 蓝色系 一级菜单的选中效果\n      .tnt-themeS3 & {\n        background: #204085 !important;\n      }\n    }\n    & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-active,\n    & > .ant-menu-submenu .ant-menu-submenu.ant-menu-submenu-selected {\n      background: none !important;\n      .tnt-themeS1 & {\n        background: ${(props) => props.theme.dividerColor} !important;\n      }\n      // 蓝色系 子级菜单级的选中效果\n      .tnt-themeS3 & {\n        background: #204085 !important;\n      }\n    }\n    .ant-menu-item {\n      margin: 0;\n      font-size: 14px;\n      padding-left: 54px !important;\n      height: ${({ size }) => (size === 'large' ? '40px' : '36px')};\n      line-height: ${({ size }) => (size === 'large' ? '40px' : '36px')};\n    }\n\n    & > .ant-menu-item {\n      padding-left: 24px !important;\n      width: 100%;\n\n      & > .tnt-icon {\n        margin-right: 12px;\n      }\n      & > a {\n        display: inline-block;\n      }\n    }\n\n    .ant-menu-submenu-title {\n      position: relative;\n      color: ${(props) => (props.theme.compatible ? compatibleColor : color)};\n      .tnt-themeS1 & {\n        color: ${(props) => props.theme.primaryTextColor};\n      }\n      height: ${({ size }) => (size === 'large' ? '40px' : '36px')};\n      line-height: ${({ size }) => (size === 'large' ? '40px' : '36px')};\n      .tnt-icon {\n        .tnt-themeS1 & {\n          color: ${(props) => props.theme.lightIconColor};\n        }\n      }\n      & > .tnt-icon {\n        position: absolute;\n        right: 20px;\n        top: 1px;\n        font-size: 10px;\n      }\n\n      // 蓝色系主题\n      .tnt-themeS3 & {\n        color: #fff;\n      }\n      .tnt-icon {\n        .tnt-themeS3 & {\n          color: #fff;\n        }\n      }\n    }\n\n    & > .ant-menu-submenu .ant-menu-submenu .ant-menu-submenu-title {\n      margin-top: 0;\n      margin-bottom: 0;\n      padding-left: 54px !important;\n    }\n  }\n\n  &.ant-menu .menu-arrow-right {\n    color: ${(props) => (props.theme.compatible ? compatibleColor : color)};\n  }\n\n  .ant-menu-item,\n  .ant-menu-item > a {\n    color: ${(props) => (props.theme.compatible ? compatibleColor : color)};\n    .tnt-themeS1 & {\n      color: ${(props) => props.theme.primaryTextColor};\n    }\n    &:hover {\n      color: #fff;\n      .tnt-themeS1 & {\n        color: ${(props) => props.theme.primaryColor};\n      }\n    }\n\n    // 蓝色系列\n    .tnt-themeS3 & {\n      color: #fff;\n    }\n    &:hover {\n      .tnt-themeS3 & {\n        color: #fff;\n      }\n    }\n  }\n  & > .ant-menu-item.ant-menu-item-selected,\n  &.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {\n    color: rgba(255, 255, 255, 0.85);\n    background-color: ${(props) => props.theme.primaryColor};\n    .compatible & {\n      background-color: #013479;\n    }\n    & > a {\n      .tnt-themeS1 & {\n        color: #fff;\n      }\n    }\n    .tnt-themeS1 & {\n      color: #fff;\n      background-color: ${(props) => props.theme.primaryColor};\n    }\n\n    // 蓝色系 子项选中颜色\n    .tnt-themeS3 & {\n      color: #fff;\n      background: #013479;\n      &::after {\n        content: '';\n        display: none;\n      }\n    }\n  }\n  .ant-menu-submenu.ant-menu-submenu-selected {\n    .tnt-themeS2 & {\n      background: #141825;\n    }\n    .tnt-themeS2.compatible & {\n      background: rgba(47, 129, 247, 0.25) !important;\n    }\n  }\n`\nconst MenuTitle = styled.span`\n  font-size: 14px;\n  .large-size & {\n    font-size: 15px;\n  }\n  color: rgba(255, 255, 255, 0.85);\n  .compatible & {\n    color: #a1d7ff;\n  }\n  .tnt-themeS1 & {\n    color: ${(props) => props.theme.primaryTextColor};\n  }\n  .tnt-icon {\n    margin-right: 12px;\n    font-size: 16px;\n    position: relative;\n    top: 1px;\n\n    .large-size & {\n      font-size: 18px;\n      top: auto;\n    }\n    .tnt-themeS1 & {\n      /* color: #7e8081; */\n      color: ${(props) => `${props.theme.iconColor}`};\n    }\n  }\n`\n\nexport default withTheme((props) => {\n  const actions = useContext(ActionsContext)\n  const {\n    language,\n    menus = [],\n    formatMenuPath,\n    changeRouter,\n    selectedKey,\n    openKeys,\n    onSelect,\n    onBeforeChange,\n    onChange,\n    onOpenChange,\n    collapsed,\n  } = props\n  const { subMenu, parentMenus } = getSelectedMenuInfo(selectedKey, menus)\n  const [selectedKeys, setSelectedKeys] = useState([get(subMenu, 'code')])\n  const onSelectMenu = (param) => {\n    const { subMenu, parentMenus } = getSelectedMenuInfo(param.key, menus) || {}\n    const params = {\n      ...param,\n      data: subMenu,\n    }\n    const defaultBeforeChange = ({ data }) => !isNewTabMenu(data)\n    const defaultSelect = ({ data }) => {\n      const { path } = data || {}\n      const formatPath = formatMenuPath || ((path) => path)\n\n      if (isNewTabMenu(data)) {\n        openInNewTab(formatPath(data?.path, data))\n        return\n      }\n\n      const routerPrefix = window.location.pathname.match(/(^\\/[^\\/]+)/i)?.[1]\n\n      if (path?.startsWith(routerPrefix)) {\n        const forwardPath = formatPath(path, data)\n        changeRouter\n          ? changeRouter(forwardPath, data)\n          : window.history.pushState(data, data?.name, forwardPath)\n      } else {\n        window.location.href = formatPath(path, data)\n      }\n    }\n    const finalSelect = onSelect || defaultSelect\n\n    if (param.key !== get(selectedKeys, '0')) {\n      const finalBeforeChange = onBeforeChange || defaultBeforeChange\n\n      if (finalBeforeChange(params, get(selectedKeys, '0'))) {\n        // SideMenu菜单收起状态\n        if (collapsed) {\n          const newOpenKeys = parentMenus?.map(({ code }) => code).reverse()\n\n          onOpenChange(newOpenKeys)\n          setSideMenuStore({\n            openKeys: newOpenKeys,\n            beforeOpenKeys: newOpenKeys,\n          })\n        }\n        setSelectedKeys([param.key])\n        onChange && onChange(params)\n      }\n    }\n    actions.setSelectedMenuKey(param.key)\n    setSelectedKeys([param.key])\n\n    finalSelect(params)\n  }\n  const getExpandIcon = (code) => {\n    if (props.theme.compatible) {\n      return openKeys.includes(code) ? 'minus' : 'plus'\n    }\n\n    return openKeys.includes(code) ? 'up' : 'down'\n  }\n  const onOpenKeysChange = (keys) => {\n    const openKey = keys.find((key) => !openKeys.includes(key))\n    // const closeKey = openKeys.find(key => !keys.includes(key));\n    let newOpenKeys = keys\n\n    const findParentGroupKey = (key, openKeys) => {\n      let parentGroupKey\n\n      traverseTree(menus, (node, pnode) => {\n        if (node.code === key) {\n          if (pnode && openKeys.includes(pnode?.code)) {\n            parentGroupKey = pnode?.code\n          }\n\n          return false\n        }\n      })\n\n      return parentGroupKey\n    }\n\n    // 展开openKey\n    if (openKey) {\n      // 父子关系展开\n      const parentGroupKey = findParentGroupKey(openKey, openKeys)\n      if (parentGroupKey) {\n        newOpenKeys = keys.length > 2 ? [parentGroupKey, openKey] : keys\n      } else {\n        newOpenKeys = [openKey]\n      }\n    } else {\n      // 收起closeKey\n      newOpenKeys = keys\n    }\n\n    onOpenChange(newOpenKeys)\n  }\n\n  useEffect(() => {\n    setSelectedKeys([selectedKey])\n    if (selectedKey && !collapsed && parentMenus?.length) {\n      onOpenChange(parentMenus?.map(({ code }) => code).reverse())\n    }\n    actions.setSelectedMenuKey(selectedKey)\n  }, [selectedKey])\n\n  actions.off('menuSelect', onSelectMenu)\n  actions.on('menuSelect', onSelectMenu)\n\n  return (\n    <TNTMenu\n      mode=\"inline\"\n      defaultSelectedKeys={[]}\n      openKeys={openKeys}\n      selectedKeys={selectedKeys}\n      onOpenChange={onOpenKeysChange}\n    >\n      {menus?.map((menu) => {\n        const MenuLink = ({ menuName, enName, path }) => (\n          <a href={path} onClick={(evt) => evt.preventDefault()}>\n            {\n              {\n                cn: menuName,\n                en: enName,\n              }[language]\n            }\n          </a>\n        )\n\n        if (isGroupMenu(menu)) {\n          const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({\n            key: code,\n            title: (\n              <MenuTitle\n                style={collapsed && isSubGroup ? { color: props.theme.primaryTextColor } : {}}\n              >\n                {!isSubGroup && <Iconfont type={groupIcon} />}\n                {collapsed && !isSubGroup\n                  ? ''\n                  : {\n                      cn: groupName,\n                      en: enName,\n                    }[language]}\n              </MenuTitle>\n            ),\n            expandIcon: collapsed ? null : <Iconfont /*  */ type={getExpandIcon(code)} />,\n          })\n\n          return (\n            <SubMenu {...getSubMenuProps(menu)} onClick={onSelectMenu}>\n              {menu?.children?.map((menu) => {\n                if (isGroupMenu(menu)) {\n                  return (\n                    <SubMenu {...getSubMenuProps(menu, true)} onClick={onSelectMenu}>\n                      {menu?.children?.map(({ code, ...menu }) => (\n                        <MenuItem key={code}>\n                          <MenuLink {...menu} style={{ paddingLeft: '24px' }} />\n                        </MenuItem>\n                      ))}\n                    </SubMenu>\n                  )\n                }\n\n                return (\n                  <MenuItem key={menu?.code}>\n                    <MenuLink {...menu} />\n                  </MenuItem>\n                )\n              })}\n            </SubMenu>\n          )\n        }\n\n        return (\n          <MenuItem key={menu.code} onClick={onSelectMenu}>\n            <Iconfont type={menu.icon} />\n            <MenuLink {...menu} />\n          </MenuItem>\n        )\n      })}\n    </TNTMenu>\n  )\n})\n"]}

package/es/business-components/tntd-layout/Theme.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Popover } from 'antd';
+import Iconfont from './Iconfont';
+import images from './images';
+import { setThemeStore, getThemeStore } from './storage';
+const Theme = styled.li `
+  margin-left: 20px;
+  font-size: 20px;
+  .tnt-themeS1 & {
+    /* color: rgba(255,255,255,.85); */
+  }
+  .isInIframe & {
+    display: none;
+  }
+`;
+const ThemeSwitch = styled.div `
+  & > div {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    &:first-child {
+      margin-right: 10px;
+    }
+    &:last-child {
+      margin-left: 10px;
+    }
+    & > i,
+    & > .tnt-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+const ThemeContentWrapper = styled.div `
+  z-index: 1;
+  background-color: #fff;
+  border-radius: 4px;
+  width: 156px;
+`;
+const themes = [
+    { value: 'themeS1', img: images.themeSymbol1 },
+    { value: 'themeS2', img: images.themeSymbol2 },
+];
+const ThemeContent = (props) => {
+    const { onChange } = props;
+    const getTheme = () => {
+        let theme = getThemeStore() || props.theme || 'themeS2';
+        return themes.some(({ value }) => value === theme) ? theme : 'themeS2';
+    };
+    const [theme, setTheme] = useState(getTheme());
+    const changeTheme = (theme) => {
+        setTheme(theme);
+        setThemeStore(theme);
+        onChange(theme);
+    };
+    return (React.createElement(ThemeContentWrapper, null,
+        React.createElement(ThemeSwitch, null, themes.map(({ value, img }) => (React.createElement("div", { key: value, onClick: changeTheme.bind(this, value) },
+            React.createElement("img", { src: img }),
+            theme === value && React.createElement(Iconfont, { type: "check1" })))))));
+};
+export default (props) => {
+    return (React.createElement(Theme, null,
+        React.createElement(Popover, { placement: "bottomRight", title: null, content: React.createElement(ThemeContent, Object.assign({}, props)), trigger: "click" },
+            React.createElement(Iconfont, { type: "change-theme" }))));
+};
+//# sourceMappingURL=Theme.js.map

package/es/business-components/tntd-layout/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../../src/business-components/tntd-layout/Theme.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAC9B,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAExD,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;CAStB,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB7B,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAA;AAED,MAAM,MAAM,GAAG;IACb,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,CAAC,YAAY,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,CAAC,YAAY,EAAE;CAC/C,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,KAAK,GAAG,aAAa,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,SAAS,CAAA;QAEvD,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IACxE,CAAC,CAAA;IACD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC9C,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,EAAE;QAC5B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,aAAa,CAAC,KAAK,CAAC,CAAA;QACpB,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB;QAClB,oBAAC,WAAW,QACT,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAC9B,6BAAK,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;YACrD,6BAAK,GAAG,EAAE,GAAG,GAAI;YAChB,KAAK,KAAK,KAAK,IAAI,oBAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC1C,CACP,CAAC,CACU,CACM,CACvB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,CAAC,KAAK,EAAE,EAAE;IACvB,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,OAAO,IACN,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,oBAAC,YAAY,oBAAK,KAAK,EAAI,EACpC,OAAO,EAAC,OAAO;YAEf,oBAAC,QAAQ,IAAC,IAAI,EAAC,cAAc,GAAG,CACxB,CACJ,CACT,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport { Popover } from 'antd'\nimport Iconfont from './Iconfont'\nimport images from './images'\nimport { setThemeStore, getThemeStore } from './storage'\n\nconst Theme = styled.li`\n  margin-left: 20px;\n  font-size: 20px;\n  .tnt-themeS1 & {\n    /* color: rgba(255,255,255,.85); */\n  }\n  .isInIframe & {\n    display: none;\n  }\n`\n\nconst ThemeSwitch = styled.div`\n  & > div {\n    position: relative;\n    display: inline-block;\n    cursor: pointer;\n    &:first-child {\n      margin-right: 10px;\n    }\n    &:last-child {\n      margin-left: 10px;\n    }\n    & > i,\n    & > .tnt-icon {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n`\n\nconst ThemeContentWrapper = styled.div`\n  z-index: 1;\n  background-color: #fff;\n  border-radius: 4px;\n  width: 156px;\n`\n\nconst themes = [\n  { value: 'themeS1', img: images.themeSymbol1 },\n  { value: 'themeS2', img: images.themeSymbol2 },\n]\n\nconst ThemeContent = (props) => {\n  const { onChange } = props\n  const getTheme = () => {\n    let theme = getThemeStore() || props.theme || 'themeS2'\n\n    return themes.some(({ value }) => value === theme) ? theme : 'themeS2'\n  }\n  const [theme, setTheme] = useState(getTheme())\n  const changeTheme = (theme) => {\n    setTheme(theme)\n    setThemeStore(theme)\n    onChange(theme)\n  }\n\n  return (\n    <ThemeContentWrapper>\n      <ThemeSwitch>\n        {themes.map(({ value, img }) => (\n          <div key={value} onClick={changeTheme.bind(this, value)}>\n            <img src={img} />\n            {theme === value && <Iconfont type=\"check1\" />}\n          </div>\n        ))}\n      </ThemeSwitch>\n    </ThemeContentWrapper>\n  )\n}\n\nexport default (props) => {\n  return (\n    <Theme>\n      <Popover\n        placement=\"bottomRight\"\n        title={null}\n        content={<ThemeContent {...props} />}\n        trigger=\"click\"\n      >\n        <Iconfont type=\"change-theme\" />\n      </Popover>\n    </Theme>\n  )\n}\n"]}

package/es/business-components/tntd-layout/createActions.js

@@ -0,0 +1,31 @@
+import EventEmitter from 'eventemitter3';
+import { getText } from '../locale';
+export default (params) => {
+    const eventEmitter = new EventEmitter();
+    const data = {
+        language: (params === null || params === void 0 ? void 0 : params.language) || 'cn',
+        selectedMenuKey: null,
+    };
+    return {
+        setData: (key, val) => {
+            set(data, key, val);
+        },
+        setSelectedMenuKey: (menuKey) => {
+            data.selectedMenuKey = menuKey;
+        },
+        getSelectedMenuKey: () => data.selectedMenuKey,
+        getLanguage: () => data.language,
+        setLanguage: (language) => (data.language = language),
+        getText: (key, language = data.language) => getText(key, language),
+        on: (eventName, callback) => {
+            eventEmitter.on(eventName, callback);
+        },
+        emit: (...args) => {
+            eventEmitter.emit(...args);
+        },
+        off: (...args) => {
+            eventEmitter.removeListener(...args);
+        },
+    };
+};
+//# sourceMappingURL=createActions.js.map

package/es/business-components/tntd-layout/createActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createActions.js","sourceRoot":"","sources":["../../../src/business-components/tntd-layout/createActions.js"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,eAAe,CAAC,MAAM,EAAE,EAAE;IACxB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAA;IACvC,MAAM,IAAI,GAAG;QACX,QAAQ,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,KAAI,IAAI;QAClC,eAAe,EAAE,IAAI;KACtB,CAAA;IAED,OAAO;QACL,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;YACpB,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;QACrB,CAAC;QAED,kBAAkB,EAAE,CAAC,OAAO,EAAE,EAAE;YAC9B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAA;QAChC,CAAC;QACD,kBAAkB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe;QAE9C,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ;QAEhC,WAAW,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAErD,OAAO,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,QAAQ,CAAC;QAElE,EAAE,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE;YAC1B,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;QACtC,CAAC;QAED,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE;YAChB,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;QAC5B,CAAC;QAED,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE;YACf,YAAY,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAA;QACtC,CAAC;KACF,CAAA;AACH,CAAC,CAAA","sourcesContent":["import EventEmitter from 'eventemitter3'\nimport { getText } from '../locale'\n\nexport default (params) => {\n  const eventEmitter = new EventEmitter()\n  const data = {\n    language: params?.language || 'cn',\n    selectedMenuKey: null,\n  }\n\n  return {\n    setData: (key, val) => {\n      set(data, key, val)\n    },\n\n    setSelectedMenuKey: (menuKey) => {\n      data.selectedMenuKey = menuKey\n    },\n    getSelectedMenuKey: () => data.selectedMenuKey,\n\n    getLanguage: () => data.language,\n\n    setLanguage: (language) => (data.language = language),\n\n    getText: (key, language = data.language) => getText(key, language),\n\n    on: (eventName, callback) => {\n      eventEmitter.on(eventName, callback)\n    },\n\n    emit: (...args) => {\n      eventEmitter.emit(...args)\n    },\n\n    off: (...args) => {\n      eventEmitter.removeListener(...args)\n    },\n  }\n}\n"]}

package/es/business-components/tntd-layout/images/index.js

@@ -0,0 +1,63 @@
+import themeSymbol1 from './theme/theme1.svg';
+import themeSymbol2 from './theme/theme2.svg';
+import empty from './avatar/empty.png';
+import female1 from './avatar/female1.png';
+import female2 from './avatar/female2.png';
+import female3 from './avatar/female3.png';
+import female4 from './avatar/female4.png';
+import female5 from './avatar/female5.png';
+import female6 from './avatar/female6.png';
+import male1 from './avatar/male1.png';
+import male2 from './avatar/male2.png';
+import male3 from './avatar/male3.png';
+import male4 from './avatar/male4.png';
+import male5 from './avatar/male5.png';
+import male6 from './avatar/male6.png';
+import orion from './logo/orion.svg';
+import turing from './logo/turing.svg';
+import dataocean from './logo/dataocean.svg';
+import convert from './logo/convert.svg';
+import baldur from './logo/baldur.svg';
+import indicator from './logo/indicator.svg';
+import dispatch from './logo/dispatch.svg';
+import feature from './logo/model.svg';
+import model from './logo/model.svg';
+import storage from './logo/storage.svg';
+import bi from './logo/bi.svg';
+import logo from './logo/default.svg';
+export default {
+    // theme
+    themeSymbol1,
+    themeSymbol2,
+    // Avatar
+    empty,
+    female1,
+    female2,
+    female3,
+    female4,
+    female5,
+    female6,
+    male1,
+    male2,
+    male3,
+    male4,
+    male5,
+    male6,
+};
+export const defaultLogo = logo;
+export const logoImgMap = {
+    default: logo,
+    bridge: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDI0IDEwMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMTJEMDkzO3N0cm9rZS13aWR0aDoyMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cgkuc3Qxe2ZpbGw6I0ZGQTMwMDt9Cgkuc3Qye2ZpbGw6IzNDODFGRjt9Cgkuc3Qze2ZpbGw6IzBBQ0M4Njt9Cgkuc3Q0e2ZpbGw6IzNEREFGRjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTUxMiw1MTIiLz4KCTwvZz4KPC9nPgo8Zz4KCTxnPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01MTIsNTEyIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTEzLjQsNTQ0Yy0yOSwwLTU4LTExLjEtODAuMi0zMy4yYy00NC4zLTQ0LjMtNDQuMy0xMTYuMSwwLTE2MC40TDM1MC40LDMzLjJjNDQuMy00NC4zLDExNi4xLTQ0LjMsMTYwLjQsMAoJCQlzNDQuMywxMTYuMSwwLDE2MC40TDE5My42LDUxMC44QzE3MS40LDUzMywxNDIuNCw1NDQsMTEzLjQsNTQ0eiIvPgoJPC9nPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0MiIgZD0iTTIwMS40LDkzNi41Yy0yOSwwLTU4LTExLjEtODAuMi0zMy4yYy00NC4zLTQ0LjMtNDQuMy0xMTYuMSwwLTE2MC40bDYyMS43LTYyMS43CgkJCWM0NC4zLTQ0LjMsMTE2LjEtNDQuMywxNjAuNCwwYzQ0LjMsNDQuMyw0NC4zLDExNi4xLDAsMTYwLjRMMjgxLjYsOTAzLjNDMjU5LjQsOTI1LjQsMjMwLjQsOTM2LjUsMjAxLjQsOTM2LjV6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3QzIiBkPSJNNTkzLjQsMTAyNGMtMjksMC01OC0xMS4xLTgwLjItMzMuMmMtNDQuMy00NC4zLTQ0LjMtMTE2LjEsMC0xNjAuNGwzMTcuMi0zMTcuMgoJCQljNDQuMy00NC4zLDExNi4xLTQ0LjMsMTYwLjQsMGM0NC4zLDQ0LjMsNDQuMywxMTYuMSwwLDE2MC40TDY3My42LDk5MC44QzY1MS40LDEwMTIuOSw2MjIuNCwxMDI0LDU5My40LDEwMjR6Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBjbGFzcz0ic3Q0IiBkPSJNODI2LjQsMzEzLjRDNzYzLjgsMzEzLjQsNzEzLDI2Mi42LDcxMywyMDBWMTk4YzAtNjIuNiw1MC44LTExMy40LDExMy40LTExMy40UzkzOS44LDEzNS40LDkzOS44LDE5OHYxLjkKCQkJQzkzOS44LDI2Mi42LDg4OS4xLDMxMy40LDgyNi40LDMxMy40eiIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=',
+    orion,
+    turing,
+    dataocean,
+    convert,
+    baldur,
+    indicator,
+    dispatch,
+    feature,
+    model,
+    storage,
+    bi,
+};
+//# sourceMappingURL=index.js.map