tntd 1.4.17 → 2.0.0-beta-1

package/components/Layout/Layout.js

@@ -1,274 +0,0 @@
-import { useState, useEffect } from 'react';
-import styled, { withTheme } from 'styled-components';
-import cn from 'classnames';
-import { isUndefined } from 'lodash';
-import { Layout } from 'antd';
-import Icon from '../Icon';
-import Header from './Header';
-import Logo from './Logo';
-import SideMenu from './SideMenu';
-import {
-    getSideMenuStore, setSideMenuStore,
-    getLanguageStore, getThemeStore
-} from './storage';
-
-const { Content, Sider } = Layout;
-const TNTLayout = styled(Layout)`
-    position: relative;
-    .tnt-layout-sider {
-        overflow-x: hidden;
-        background: #191D29;
-    }
-    .tnt-layout-menu-collapse {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        line-height: 36px;
-        background: #191D29;
-        box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%);
-        color: #fff;
-        width: 100%;
-        padding-left: 24px;
-        font-size: 14px;
-        cursor: pointer;
-    }
-    &.isInIframe, &.isEmptyLayout {
-        .tnt-layout-sider {
-            display: none;
-        }
-    }
-    &.compatible .tnt-layout-sider {
-        background: linear-gradient(#213f83, #0f75d6) !important;
-    }
-    &.tnt-themeS1 {
-        .tnt-layout-sider {
-            background: #fff !important;
-            overflow-x: unset;
-        }
-        .tnt-layout-menu-collapse {
-            z-index: 3;
-            background: #fff;
-            color: ${props => props.theme.primaryTextColor};
-        }
-    }
-    // 蓝色系列
-    &.tnt-themeS3 {
-        .tnt-layout-sider {
-            background-image: linear-gradient(180deg, #213F83 0%, #0F75D6 100%) !important;
-            overflow-x: unset;
-        }
-        .tnt-layout-menu-collapse {
-            background: #207AD4;
-            color: #fff;
-        }
-    }
-    & > .ant-layout-content {
-        background-color: ${props => props.theme.lightBgColor};
-        & > div:nth-child(2) {
-            height: calc(100vh - 50px);
-            overflow: auto;
-        }
-    }
-    &.large-size > .ant-layout-content {
-        & > div:nth-child(2) {
-            height: calc(100vh - 60px);
-        }
-    }
-`;
-
-export default withTheme(
-    props => {
-        const {
-            logo,
-            name,
-            enName,
-            selectedOrgKey,
-            orgAppShow,
-            orgList,
-            orgAppList,
-            onOrgChange,
-            selectedAppKey,
-            appList,
-            selectedMenuKey,
-            menuAlignMode = 'side',
-            collapseIconPlacement = 'right',
-            menus = [],
-            formatMenuPath,
-            changeRouter,
-            headerTabs,
-            orgTreeConfig,
-            headerNavs,
-            extraHeaderActions,
-            isInIframe,
-            isEmptyLayout,
-            onLogoClick = () => null,
-            onCollapseChange,
-            onThemeChange,
-            onLanguageChange,
-            onBeforeMenuChange,
-            onMenuChange,
-            onMenuSelect,
-            onAppChange,
-            onPersonalSetting,
-            onChangePassword,
-            onLogout,
-            config,
-            extendMap = {},
-            AvatarCustom // 右上角用户信息自定义
-        } = props;
-        let {
-            collapsed: storeCollapsed,
-            openKeys = []
-        } = getSideMenuStore();
-        const [collapsed, setCollapsed] = useState(isUndefined(storeCollapsed) ? props.collapsed : storeCollapsed);
-        const [openMenuKeys, setOpenMenuKeys] = useState((() => {
-            openKeys = collapsed ? [] : openKeys;
-            openKeys = openKeys instanceof Array ? openKeys : [];
-            return openKeys;
-        })(openKeys));
-        const [userInfo, setUserInfo] = useState(props.userInfo || {});
-        let theme = getThemeStore() || extendMap?.defaultTheme || userInfo.theme || 'themeS2';
-        const language = getLanguageStore() || userInfo.lang || 'cn';
-        theme = theme === 'default' ? 'themeS2' : theme;
-
-        const collapseChangeHandle = () => {
-            const { beforeOpenKeys = [] } = getSideMenuStore();
-            const newCollapsed = !collapsed;
-
-            // 菜单收起：记住当前展开子菜单到store，并收起子菜单
-            if (newCollapsed) {
-                setSideMenuStore({
-                    collapsed: newCollapsed,
-                    beforeOpenKeys: openMenuKeys
-                });
-                setOpenMenuKeys([]);
-            } else { // 菜单展开：恢复子菜单展开项，并更新到store
-                setSideMenuStore({
-                    collapsed: newCollapsed,
-                    openKeys: beforeOpenKeys
-                });
-                setOpenMenuKeys(beforeOpenKeys);
-            }
-
-            setCollapsed(newCollapsed);
-            onCollapseChange && onCollapseChange(newCollapsed);
-        };
-
-        useEffect(() => {
-            setUserInfo(props.userInfo);
-        }, [props.userInfo]);
-
-        return (
-            <TNTLayout className={cn(
-                `tnt-layout tnt-${theme} ${props.className || ''}`,
-                {
-                    'large-size': props.theme.size === 'large',
-                    compatible: props.theme.compatible,
-                    isInIframe,
-                    isEmptyLayout,
-                    noAppList: !appList,
-                    hasHeaderTabs: !!headerTabs,
-                    layoutMenusCollapsed: collapsed,
-                    collapseIconPlacementBottom: collapseIconPlacement === 'bottom'
-                }
-            )}>
-                <Sider
-                    collapsible
-                    breakpoint="md"
-                    className="tnt-layout-sider"
-                    collapsed={collapsed}
-                    width={220}
-                    trigger={null}
-                >
-                    <Logo
-                        language={language}
-                        logo={logo}
-                        name={name}
-                        enName={enName}
-                        collapsed={collapsed}
-                        onClick={onLogoClick}
-                    />
-                    <SideMenu
-                        language={language}
-                        selectedKey={selectedMenuKey}
-                        menuAlignMode={menuAlignMode}
-                        menus={menus}
-                        collapsed={collapsed}
-                        openKeys={openMenuKeys}
-                        onOpenChange={keys => {
-                            if (!collapsed) {
-                                setSideMenuStore({
-                                    openKeys: keys,
-                                    beforeOpenKeys: keys
-                                });
-                            }
-
-                            setOpenMenuKeys(keys);
-                        }}
-                        formatMenuPath={formatMenuPath}
-                        changeRouter={changeRouter}
-                        onBeforeChange={onBeforeMenuChange}
-                        onChange={onMenuChange}
-                        onSelect={onMenuSelect}
-                    />
-                    {
-                        collapseIconPlacement === 'bottom' && (
-                            <div
-                                className="tnt-layout-menu-collapse"
-                                onClick={collapseChangeHandle}
-                            >
-                                <Icon type={`menu-${collapsed ? 'unfold' : 'fold'}`} />
-                            </div>
-                        )
-                    }
-                </Sider>
-                <Content>
-                    <Header
-                        userInfo={userInfo}
-                        config={config}
-                        collapsed={collapsed}
-                        collapseIconPlacement={collapseIconPlacement}
-                        orgAppShow={orgAppShow}
-                        orgList={orgList}
-                        orgTreeConfig={orgTreeConfig}
-                        orgAppList={orgAppList}
-                        onOrgChange={onOrgChange}
-                        selectedOrgKey={selectedOrgKey}
-                        selectedAppKey={selectedAppKey}
-                        appList={appList}
-                        menus={menus}
-                        headerTabs={headerTabs}
-                        extraActions={extraHeaderActions}
-                        onAppChange={onAppChange}
-                        onCollapseChange={collapseChangeHandle}
-                        AvatarCustom={AvatarCustom}
-                        onThemeChange={
-                            theme => {
-                                setUserInfo({
-                                    ...userInfo,
-                                    theme
-                                });
-                                onThemeChange && onThemeChange(theme);
-                            }
-                        }
-                        onLanguageChange={
-                            lang => {
-                                setUserInfo({
-                                    ...userInfo,
-                                    lang
-                                });
-                                onLanguageChange && onLanguageChange(lang);
-                            }
-                        }
-                        onPersonalSetting={onPersonalSetting}
-                        onChangePassword={onChangePassword}
-                        onLogout={onLogout}
-                    >
-                        {headerNavs}
-                    </Header>
-                    {props.children}
-                </Content>
-            </TNTLayout>
-        );
-    }
-);

package/components/Layout/Logo.js

@@ -1,145 +0,0 @@
-/**
- * @file Logo
- * @author zhangyou
- */
-import styled, { withTheme } from 'styled-components';
-import { logoImgMap } from './images';
-
-const Logo = styled.div`
-    height: ${props => `${props.theme.headerHeight}px`};
-    line-height: ${props => `${props.theme.headerHeight}px`};
-    padding-left: 15px;
-    width: 220px;
-    background: #191D29;
-    font-size: ${props => `${props.fontSize}px`};
-    color: rgba(226, 237, 255, .9);
-    letter-spacing: 0;
-    position: relative;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    &:after {
-        position: absolute;
-        bottom: -12px;
-        left: 0;
-        background-image: linear-gradient(0deg, #191D29 23%, #151924 93%);
-        content: "";
-        width: 100%;
-        height: 12px;
-    }
-
-    .ant-layout-sider-collapsed & {
-        padding-left: 26px;
-    }
-
-    .compatible & {
-        background: #213F83;
-        color: #A1D7FF;
-        box-shadow: 0 1px 8px 0 rgba(0,0,0,0.30);
-        &:after {
-            display: none;
-        }
-    }
-    cursor: pointer;
-    font-weight: 400;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    .tnt-themeS1 & {
-        background: #FFFFFF !important;
-        box-shadow: 2px 3px 8px -1px rgba(0,0,0,0.15);
-        color: #17233D;
-        &:after {
-            display: none;
-        }
-    }
-
-    .tnt-themeS1.compatible & {
-        background: #323b4a;
-    }
-
-    // 蓝色主题
-    .tnt-themeS3 & {
-        background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295 !important;
-        box-shadow: 2px 3px 8px -1px rgba(0,0,0,0.15);
-        color: #FFFFFF;
-        &:after {
-            display: none;
-        }
-    }
-
-    img {
-        position: relative;
-        top: -1px;
-        width: 23px;
-        height: 23px;
-        margin-right: 12px;
-        .large-size & {
-            width: 28px;
-            height: 28px;
-        }
-    }
-`;
-
-// JS判断字符串长度（英文占1个字符，中文汉字占2个字符）
-const getStrLen = (str = '') => {
-    let len = 0;
-
-    for (let i = 0; i < str.length; i++) {
-        let c = str.charCodeAt(i);
-        let chartLength = 2;
-
-        //单字节加1
-        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
-            chartLength = 1;
-        }
-
-        len += chartLength;
-    }
-
-    return len;
-};
-
-export default withTheme(
-    props => {
-        const { logo, name, enName, language, collapsed, theme: { size } } = props;
-        const productNameLen = getStrLen(language === 'cn' ? name : enName);
-        const fontSize = {
-            12: 19,
-            13: 18,
-            14: 17,
-            15: 16,
-            16: 15
-        }[Math.max(12, Math.min(productNameLen, 16))] + (size === 'large' ? 1 : 0);
-        const LogoImg = props => (
-            <img
-                onError={e => {
-                    e.target.onerror = null;
-                    e.target.src = logoImgMap.default;
-                }}
-                {...props}
-            />
-        );
-
-        return (
-            <Logo {...props} fontSize={fontSize}>
-                {
-                    typeof logo === 'string' ? (
-                        <LogoImg src={logoImgMap[logo] || logoImgMap.default} />
-                    ) : (
-                        (logo && logo.type === 'img') ? (
-                            <LogoImg {...logo.props} src={logo.props?.src || logoImgMap.default} />
-                        ) : logo
-                    )
-                }
-                {
-                    collapsed ? '' : {
-                        cn: name,
-                        en: enName
-                    }[language]
-                }
-            </Logo>
-        );
-    }
-);