tntd 1.4.17 → 2.0.0-beta

package/components/Layout/SideMenu.js

@@ -1,453 +0,0 @@
-import { 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.10);
-            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,.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,.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,.25) !important;
-        }
-    }
-`;
-const MenuTitle = styled.span`
-    font-size: 14px;
-    .large-size & {
-        font-size: 15px;
-    }
-    color: rgba(255,255,255,.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 = {
-                ...param,
-                data: subMenu
-            };
-            const defaultBeforeChange = ({ data }) => !isNewTabMenu(data);
-            const defaultSelect = ({ data }) => {
-                const { path } = data || {};
-                const formatPath = formatMenuPath || (path => path);
-
-                if (isNewTabMenu(data)) {
-                    openInNewTab(formatPath(data?.path, data));
-                    return;
-                }
-
-                const routerPrefix = window.location.pathname.match(/(^\/[^\/]+)/i)?.[1];
-
-                if (path?.startsWith(routerPrefix)) {
-                    const forwardPath = formatPath(path, data);
-                    changeRouter ? changeRouter(forwardPath, data) : window.history.pushState(data, 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?.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?.code)) {
-                            parentGroupKey = 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?.length) {
-                onOpenChange(parentMenus?.map(({ code }) => code).reverse());
-            }
-            actions.setSelectedMenuKey(selectedKey);
-        }, [selectedKey]);
-
-        actions.off('menuSelect', onSelectMenu);
-        actions.on('menuSelect', onSelectMenu);
-
-        return (
-            <TNTMenu
-                mode="inline"
-                defaultSelectedKeys={[]}
-                openKeys={openKeys}
-                selectedKeys={selectedKeys}
-                onOpenChange={onOpenKeysChange}
-            >
-                {
-                    menus?.map(menu => {
-                        const MenuLink = ({ menuName, enName, path }) => (
-                            <a href={path} onClick={evt => evt.preventDefault()}>
-                                {
-                                    {
-                                        cn: menuName,
-                                        en: enName
-                                    }[language]
-                                }
-                            </a>
-                        );
-
-                        if (isGroupMenu(menu)) {
-                            const getSubMenuProps = ({ code, groupIcon, groupName, enName }, isSubGroup = false) => ({
-                                key: code,
-                                title: (
-                                    <MenuTitle style={(collapsed && isSubGroup) ? { color: props.theme.primaryTextColor } : {}}>
-                                        {!isSubGroup && <Iconfont type={groupIcon} />}
-                                        {
-                                            (collapsed && !isSubGroup) ? '' : {
-                                                cn: groupName,
-                                                en: enName
-                                            }[language]
-                                        }
-                                    </MenuTitle>
-                                ),
-                                expandIcon: collapsed ? null : (
-                                    <Iconfont/*  */ type={getExpandIcon(code)} />
-                                )
-                            });
-
-                            return (
-                                <SubMenu
-                                    {...getSubMenuProps(menu)}
-                                    onClick={onSelectMenu}
-                                >
-                                    {
-                                        menu?.children?.map(menu => {
-                                            if (isGroupMenu(menu)) {
-                                                return (
-                                                    <SubMenu
-                                                        {...getSubMenuProps(menu, true)}
-                                                        onClick={onSelectMenu}
-                                                    >
-                                                        {
-                                                            menu?.children?.map(({ code, ...menu }) => (
-                                                                <MenuItem key={code}>
-                                                                    <MenuLink {...menu} style={{ paddingLeft: '24px' }} />
-                                                                </MenuItem>
-                                                            ))
-                                                        }
-                                                    </SubMenu>
-                                                );
-                                            }
-
-                                            return (
-                                                <MenuItem key={menu?.code}>
-                                                    <MenuLink {...menu} />
-                                                </MenuItem>
-                                            );
-                                        })
-                                    }
-                                </SubMenu>
-                            );
-                        }
-
-                        return (
-                            <MenuItem key={menu.code} onClick={onSelectMenu}>
-                                <Iconfont type={menu.icon} />
-                                <MenuLink {...menu} />
-                            </MenuItem>
-                        );
-                    })
-                }
-            </TNTMenu>
-        );
-    }
-);

package/components/Layout/Theme.js

@@ -1,98 +0,0 @@
-import { 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 (
-        <ThemeContentWrapper>
-            <ThemeSwitch>
-                {
-                    themes.map(({ value, img }) => (
-                        <div key={value} onClick={changeTheme.bind(this, value)}>
-                            <img src={img} />
-                            {
-                                theme === value && (
-                                    <Iconfont type="check1" />
-                                )
-                            }
-                        </div>
-                    ))
-                }
-            </ThemeSwitch>
-        </ThemeContentWrapper>
-    );
-};
-
-export default props => {
-    return (
-        <Theme>
-            <Popover
-                placement="bottomRight"
-                title={null}
-                content={<ThemeContent {...props} />}
-                trigger="click"
-            >
-                <Iconfont type="change-theme" />
-            </Popover>
-        </Theme>
-    );
-};

package/components/Layout/createActions.js

@@ -1,39 +0,0 @@
-import EventEmitter from 'eventemitter3';
-import { getText } from '../locale';
-
-export default (params) => {
-    const eventEmitter = new EventEmitter();
-    const data = {
-        language: 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);
-        }
-    };
-};

package/components/Layout/images/index.js

@@ -1,68 +0,0 @@
-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
-};