tntd 1.4.17 → 2.0.0-beta

package/components/Layout/HeaderActions.js

@@ -1,136 +0,0 @@
-import styled, { withTheme } from "styled-components";
-import { Divider } from "antd";
-import GlobalNavigation from "./GlobalNavigation";
-import Language from "./Language";
-import Theme from "./Theme";
-import LanguageTheme from "./CompatibleLanguage";
-import Application from "./Application";
-import Avatar from "./Avatar";
-
-const Actions = styled.ul`
-    list-style: none;
-    display: inline-block;
-    line-height: ${(props) => `${props.theme.headerHeight}px`};
-    margin: 0 0 0 20px;
-    .hasHeaderTabs & {
-        margin: 0;
-    }
-    padding: 0;
-    white-space: nowrap;
-
-    .isInIframe & {
-        display: none;
-    }
-
-    & > li {
-        height: 100%;
-        display: inline-block;
-        vertical-align: top;
-        cursor: pointer;
-        font-size: 20px;
-        margin: 0 7.5px;
-        color: ${(props) => `${props.theme.headerActionsColor}`};
-        .large-size & {
-            margin: 0 10px;
-        }
-        .tnt-themeS1 & {
-            /* color: rgba(255,255,255,.85); */
-        }
-        &:last-of-type {
-            margin-right: 0;
-        }
-        .hasHeaderTabs & {
-            color: #455064;
-        }
-        // 删除色系区分 统一色调
-        // .hasHeaderTabs:not(.tnt-themeS1) & {
-        //     color: rgba(255,255,255,.8);
-        // }
-        .hasHeaderTabs:not(.tnt-themeS1) & {
-            color: #455064 !important;
-        }
-    }
-`;
-
-export default withTheme((props) => {
-    const {
-        config: {
-            theme = true,
-            avatar = true,
-            language = true,
-            application = false,
-            globalNavigation = false,
-        } = {},
-        theme: { compatible },
-        userInfo = {},
-        menus,
-        apps,
-        extraActions,
-        headerRef,
-        onLanguageChange,
-        onThemeChange,
-        onApplicationChange,
-        onAppChange,
-        onCollapseChange,
-        onPersonalSetting,
-        onChangePassword,
-        onLogout,
-        onLogoClick,
-        AvatarCustom,
-        ...rest
-    } = props;
-
-    return (
-        <Actions {...rest}>
-            {extraActions}
-            {globalNavigation && <GlobalNavigation headerRef={headerRef} menus={menus} />}
-            {!compatible ? (
-                <>
-                    {language && <Language language={userInfo.lang} onChange={onLanguageChange} />}
-                    {theme && <Theme theme={userInfo.theme} onChange={onThemeChange} />}
-                </>
-            ) : (
-                <LanguageTheme
-                    config={props.config}
-                    language={userInfo.lang}
-                    theme={userInfo.theme}
-                    onLanguageChange={onLanguageChange}
-                    onThemeChange={onThemeChange}
-                />
-            )}
-            {application && (
-                <Application language={userInfo.lang} apps={apps} onChange={onApplicationChange} />
-            )}
-            {avatar && (
-                <>
-                    <Divider type="vertical" />
-                    {AvatarCustom ? (
-                        <AvatarCustom
-                            userInfo={userInfo}
-                            onPersonalSetting={onPersonalSetting}
-                            onChangePassword={onChangePassword}
-                            onLogout={onLogout}
-                            onThemeChange={onThemeChange}
-                            config={{
-                                theme,
-                                language,
-                            }}
-                        />
-                    ) : (
-                        <Avatar
-                            userInfo={userInfo}
-                            onPersonalSetting={onPersonalSetting}
-                            onChangePassword={onChangePassword}
-                            onLogout={onLogout}
-                            onThemeChange={onThemeChange}
-                            config={{
-                                theme,
-                                language,
-                            }}
-                        />
-                    )}
-                </>
-            )}
-        </Actions>
-    );
-});

package/components/Layout/HeaderNavs.js

@@ -1,93 +0,0 @@
-import { useState, useEffect } from 'react';
-import styled, { withTheme } from 'styled-components';
-import cn from 'classnames';
-import { get } from 'lodash';
-
-const Navs = styled.ul`
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-align: right;
-`;
-const NavItem = styled.li`
-    position: relative;
-    margin: 0;
-    padding: 0 20px;
-    cursor: pointer;
-    display: inline-block;
-    line-height: ${props => props.theme.size === 'large' ? '60px' : '50px'};
-    transition: background-color .5;
-
-    a {
-        font-size: 14px;
-        color: ${props => props.theme.secondaryTextColor};
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        .tnt-themeS1 & {
-            color: rgba(255,255,255,.8);
-        }
-    }
-
-    &:hover, &.active {
-        a {
-            color: ${props => props.theme.primaryColor};
-            .tnt-themeS1 & {
-                color: #418AFF;
-            }
-        }
-    }
-    &.active {
-        &:after {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 100%;
-            height: 3px;
-            background: ${props => props.theme.primaryColor};
-            display: inline-block;
-            content: "";
-            .tnt-themeS1 & {
-                background: #418AFF;
-            }
-        }
-    }
-`;
-
-export const HeaderNavs = withTheme(
-    ({ theme, navs = [], onChange, onSelect, ...props }) => {
-        const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(navs, '0.key'));
-        const onClickNav = nav => {
-            setSelectedKey(nav.key);
-            onSelect && onSelect(nav);
-    
-            if (selectedKey !== nav.key) {
-                onChange && onChange(nav);
-                setSelectedKey(nav.key);
-            }
-        };
-    
-        useEffect(() => {
-            setSelectedKey(props.selectedKey || get(navs, '0.key'));
-        }, [navs, props.selectedKey]);
-    
-        return (
-            <Navs {...props}>
-                {
-                    navs.map(nav => (
-                        <NavItem
-                            key={nav.key}
-                            theme={theme}
-                            className={cn({ active: selectedKey === nav.key })}
-                            onClick={() => onClickNav(nav)}
-                        >
-                            <a href={nav.key} onClick={evt => evt.preventDefault()}>{nav.name}</a>
-                        </NavItem>
-                    ))
-                }
-            </Navs>
-        );
-    }
-);
-
-export default HeaderNavs;

package/components/Layout/HeaderTabs.js

@@ -1,348 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import styled, { withTheme } from "styled-components";
-import cn from "classnames";
-import { get } from "lodash";
-import Icon from "../Icon";
-
-const TabsContainer = styled.div`
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    margin-right: 12px;
-    margin-left: 4px;
-
-    .tnt-layout-header-tabs-arrows {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        font-size: 16px;
-        line-height: 36px;
-        height: 36px;
-        background: #fff !important;
-        color: rgba(255,255,255,.8)  !important;
-        .tnt-icon {
-            cursor: pointer;
-            color: rgba(139,145,158,1);
-            &[disabled] {
-                color: rgba(139, 145, 158, .5);
-                pointer-events: none;
-                cursor: not-allowed;
-            }
-        }
-        // background: #191D29;
-        // .tnt-icon {
-        //     cursor: pointer;
-        //     &[disabled] {
-        //         color: rgba(139, 145, 158, .5);
-        //         pointer-events: none;
-        //         cursor: not-allowed;
-        //     }
-        // }
-        // .tnt-themeS1 & {
-        //     background: #fff;
-        //     .tnt-icon {
-        //         color: rgba(139,145,158,1);
-        //     }
-        // }
-        // 多签页的箭头样式
-        // .tnt-themeS3 & {
-        //     background: ${props => `${props.theme.blueBgColor}`}; //#1D4295;
-        //     .tnt-icon {
-        //         color: rgba(255, 255, 255, .5);
-        //         &[disabled] {
-        //             color: rgba(139, 145, 158, .5);
-        //             pointer-events: none;
-        //             cursor: not-allowed;
-        //         }
-        //     }
-        // }
-    }
-`;
-const Tabs = styled.ul`
-    margin: 14px 0 0;
-    padding: 0;
-    list-style: none;
-    text-align: left;
-    height: 36px;
-    line-height: 36px;
-    flex: 1;
-    white-space: nowrap;
-    padding-right: 40px;
-    transition: transform 0.25s linear;
-    position: absolute;
-`;
-const TabItem = styled.li`
-    position: relative;
-    margin: 0;
-    padding: 0 20px 0 10px;
-    cursor: pointer;
-    display: inline-block;
-    line-height: ${props => (props.theme.size === "large" ? "46px" : "36px")};
-    /* transition: background-color .5; */
-    width: 130px;
-    color: rgba(255,255,255,.6);
-
-    .tnt-icon[type=close] {
-        display: none;
-        position: absolute;
-        right: 0;
-        top: 0;
-        font-size: 10px;
-        padding: 0 10px;
-        cursor: pointer;
-        z-index: 1;
-    }
-
-    &:not(:last-child):after {
-        position: absolute;
-        content: "";
-        right: 0;
-        top: 6px;
-        height: 24px;
-        width: 1px;
-        // opacity: .5;
-        // background: #fff;
-        background: #E1E6EE;
-        opacity: .5;
-        // .tnt-themeS1 & {
-        //     background: #E1E6EE;
-        //     opacity: 1;
-        // }
-    }
-
-    &.active,
-    &.activeTabPreSibling {
-        &:after {
-            display: none;
-        }
-    }
-
-    a {
-        font-size: 14px;
-        color: ${props => props.theme.headerActionsColor};//rgba(255,255,255,.6);
-        text-rendering: optimizeLegibility;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        transition: none;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        line-height: 36px;
-        width: 100%;
-        // &:hover {
-        //     color: rgba(255,255,255,.8);
-        // }
-        // .tnt-themeS1 & {
-        //     color: ${props => props.theme.headerActionsColor};
-        // }
-    }
-
-    &:hover,
-    &.active {
-        .tnt-icon[type=close] {
-            display: unset;
-            color: #455064;
-            // .tnt-themeS1 & {
-            //     color: #455064;
-            // }
-        }
-    }
-
-    &.active {
-        background: #F1F2F5;
-        border-radius: 2px 2px 0 0;
-        color: ${props => props.theme.primaryTextColor};
-        font-weight: 600;
-
-        a {
-            color: ${props => props.theme.primaryTextColor};
-        }
-    }
-`;
-
-export const HeaderTabs = withTheme(
-    ({
-        theme,
-        className,
-        tabs = [],
-        onTabChange,
-        onTabSelect,
-        onTabClose,
-        appListVisible,
-        orgListVisible,
-        orgAppListVisible,
-        language,
-        ...props
-    }) => {
-        const [selectedKey, setSelectedKey] = useState(props.selectedKey || get(tabs, "0.key"));
-        const [tabItems, setTabItems] = useState(tabs || []);
-        const [arrowVisible, setArrowVisible] = useState(false);
-        const [tabsPositionFlags, setTabsPositionFlags] = useState({ start: true, end: true });
-        const tabsRef = useRef();
-
-        const getTabsDom = () => tabsRef.current;
-
-        const onTabClick = (tab, index) => {
-            setSelectedKey(tab.key);
-            onTabSelect?.(tab);
-
-            if (selectedKey !== tab.key) {
-                onTabChange?.(tab);
-            }
-        };
-        const closeTabHandle = (tab, index, evt) => {
-            evt.stopPropagation();
-            const newTabItems = tabItems.filter(({ key }) => key !== tab.key);
-            let newSelectedKey = selectedKey;
-
-            setTabItems(newTabItems);
-            if (tab.key === selectedKey) {
-                newSelectedKey = index === 0 ? newTabItems[0]?.key : newTabItems[index - 1]?.key;
-                setSelectedKey(newSelectedKey);
-            }
-            onTabClose?.(
-                tab,
-                newTabItems,
-                newTabItems.find(({ key }) => key === newSelectedKey)
-            );
-        };
-        const onMoveToLeft = () => {
-            const tabsDom = getTabsDom();
-            const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-            const parentWidth = parentBBox.width - 32;
-            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
-            const index = Math.ceil(x / 130);
-            const trueX = index * 130;
-            let newX = Math.min(0, -(trueX - parentWidth));
-            tabsDom.style.transform = `translateX(${newX}px)`;
-
-            const width = tabItems.length * 130;
-            setTabsPositionFlags({
-                start: newX < 0,
-                end: Math.abs(newX) < width - parentWidth,
-            });
-        };
-        const onMoveToRight = () => {
-            const tabsDom = getTabsDom();
-            const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-            const parentWidth = parentBBox.width - 32;
-            const width = tabItems.length * 130;
-
-            let x = Math.abs(+tabsDom.style.transform.replace(/[^\d.-]/g, ""));
-            const index = Math.floor(x / 130);
-            const trueX = index * 130;
-            let newX = Math.max(-(width - parentWidth), -(trueX + parentWidth));
-            tabsDom.style.transform = `translateX(${newX}px)`;
-
-            setTabsPositionFlags({
-                start: newX < 0,
-                end: Math.abs(newX) < width - parentWidth,
-            });
-        };
-
-        const translateTabsDom = (tabs, selectedKey) => {
-            if (!selectedKey) return;
-            const index = tabs.indexOf(tabs.find(({ key }) => key === selectedKey));
-            if (index === -1) return;
-            const tabsDom = getTabsDom();
-            let x = -+tabsDom.style.transform.replace(/[^\d.-]/g, "");
-            const bbox = {
-                left: index * 130,
-                right: (index + 1) * 130,
-            };
-            const parentBBox = tabsDom.parentNode.getBoundingClientRect();
-            const parentWidth = parentBBox.width - 36;
-            const width = tabItems.length * 130;
-
-            let tailX = x + parentWidth; //当前滑动窗口尾部坐标
-            let newX = -x;
-            if (bbox.left < x) {
-                newX = -bbox.left;
-            } else if (bbox.right >= tailX) {
-                newX = parentWidth - bbox.right;
-            }
-            if (newX + width < parentWidth) {
-                newX = -(width - parentWidth);
-            }
-            newX = Math.min(0, newX);
-            tabsDom.style.transform = `translateX(${newX}px)`;
-
-            setTabsPositionFlags({
-                start: newX < 0,
-                end: Math.abs(newX) < width - parentWidth,
-            });
-        };
-
-        useEffect(() => {
-            setSelectedKey(props.selectedKey || get(tabs, "0.key"));
-            // const t = [{'code':'tagdata','enName':'tagdata','icon':'layer-color','menuName':'打标数据管理打标数据管理打标数据管理','path':'/orion/tag/datalist','key':'tagdata','name':'打标数据管理打标数据管理打标数据管理'},{'code':'taglist','enName':'taglist','icon':'home','menuName':'标签管理','path':'http://baidu.com/orion/tag/list','key':'taglist','name':'标签管理'},{'code':'relation1','enName':'dadicasesearch1','icon':'home','menuName':'案件检索1','path':'/orion/case/relation1','key':'relation1','name':'案件检索1'},{'code':'dadicasesearch-0','enName':'dadicasesearch','icon':'home','menuName':'案件检索-0','path':'/orion/case/relation0','key':'dadicasesearch-0','name':'案件检索-0'},{'code':'dadicasesearch-1','enName':'dadicasesearch','icon':'home','menuName':'案件检索-1','path':'/orion/case/relation1','key':'dadicasesearch-1','name':'案件检索-1'},{'code':'dadicasesearch-2','enName':'dadicasesearch','icon':'home','menuName':'案件检索-2','path':'/orion/case/relation2','key':'dadicasesearch-2','name':'案件检索-2'},{'code':'dadicasesearch-3','enName':'dadicasesearch','icon':'home','menuName':'案件检索-3','path':'/orion/case/relation3','key':'dadicasesearch-3','name':'案件检索-3'},{'code':'dadicasesearch-4','enName':'dadicasesearch','icon':'home','menuName':'案件检索-4','path':'/orion/case/relation4','key':'dadicasesearch-4','name':'案件检索-4'},{'code':'dadicasesearch-5','enName':'dadicasesearch','icon':'home','menuName':'案件检索-5','path':'/orion/case/relation5','key':'dadicasesearch-5','name':'案件检索-5'},{'code':'dadicasesearch-6','enName':'dadicasesearch','icon':'home','menuName':'案件检索-6','path':'/orion/case/relation6','key':'dadicasesearch-6','name':'案件检索-6'},{'code':'dadicasesearch-7','enName':'dadicasesearch','icon':'home','menuName':'案件检索-7','path':'/orion/case/relation7','key':'dadicasesearch-7','name':'案件检索-7'},{'code':'dadicasesearch-8','enName':'dadicasesearch','icon':'home','menuName':'案件检索-8','path':'/orion/case/relation8','key':'dadicasesearch-8','name':'案件检索-8'}] ;
-            setTabItems(tabs);
-        }, [tabs, props.selectedKey]);
-
-        useEffect(() => {}, [props.orgAppListVisible]);
-
-        useEffect(() => {
-            const tabsDom = getTabsDom();
-
-            setArrowVisible(tabsDom.offsetWidth - tabsDom.parentNode.offsetWidth > 0);
-        }, [tabItems]);
-
-        useEffect(() => {
-            translateTabsDom(tabItems, selectedKey);
-        }, [tabItems, selectedKey, appListVisible, orgListVisible, orgAppListVisible]);
-
-        return (
-            <TabsContainer
-                {...props}
-                className={cn("tnt-layout-header-tabs", { [className]: className })}
-            >
-                <Tabs className="tnt-layout-header-tabs-content" ref={tabsRef}>
-                    {tabItems.map((tab, index) => (
-                        <TabItem
-                            key={tab.key}
-                            theme={theme}
-                            className={cn({
-                                active: selectedKey === tab.key,
-                                activeTabPreSibling: tabItems[index + 1]?.key === selectedKey,
-                            })}
-                            onClick={() => onTabClick(tab, index)}
-                        >
-                            <a href={tab.key} onClick={evt => evt.preventDefault()}>
-                                {
-                                    {
-                                        cn: tab.name,
-                                        en: tab.enName || tab.name,
-                                    }[language || "cn"]
-                                }
-                            </a>
-                            {tab.closable !== false && tabItems.length > 1 && (
-                                <Icon
-                                    type="close"
-                                    onClick={closeTabHandle.bind(null, tab, index)}
-                                />
-                            )}
-                        </TabItem>
-                    ))}
-                </Tabs>
-                {arrowVisible && (
-                    <div className="tnt-layout-header-tabs-arrows">
-                        <Icon
-                            type="left"
-                            onClick={onMoveToLeft}
-                            disabled={!tabsPositionFlags.start}
-                        />
-                        <Icon
-                            type="right"
-                            onClick={onMoveToRight}
-                            disabled={!tabsPositionFlags.end}
-                        />
-                    </div>
-                )}
-            </TabsContainer>
-        );
-    }
-);
-
-export default HeaderTabs;

package/components/Layout/Iconfont.js

@@ -1,3 +0,0 @@
-import Icon from '../Icon';
-
-export default props => <Icon {...props} />;

package/components/Layout/Language.js

@@ -1,66 +0,0 @@
-import { useState } from 'react';
-import styled, { withTheme } from 'styled-components';
-import { get } from 'lodash';
-import Iconfont from './Iconfont';
-import { setLanguageStore, getLanguageStore } from './storage';
-
-const languages = [
-    { value: 'cn', name: '中文' },
-    { value: 'en', name: ' EN ' }
-];
-const languagesMap = languages.reduce((acc, cur) => {
-    acc[cur.value] = cur;
-    return acc;
-}, {});
-
-const Language = styled.li`
-    font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
-    .tnt-icon {
-        font-size: ${({ theme: { size } }) => size === 'large' ? '24px' : '20px'};
-        margin-right: 4px;
-    }
-    span {
-        position: relative;
-        font-size: ${({ theme: { size } }) => size === 'large' ? '14px' : '12px'};
-        top: ${({ theme: { size } }) => size === 'large' ? '-3px' : '-2px'};
-        font-family: auto;
-        .tnt-themeS1 & {
-            /* color: rgba(255,255,255,.85); */
-        }
-    }
-    .isInIframe & {
-        display: none;
-    }
-`;
-
-export default withTheme(
-    props => {
-        const {
-            onChange
-        } = props;
-        const getLanguage = () => {
-            let lang = getLanguageStore() || props.language;
-    
-            if (!languagesMap[lang]) {
-                lang = get(languages, '0.value');
-            }
-            
-            return lang;
-        };
-        const [language = 'cn', setLanguage] = useState(getLanguage());
-        const switchLanguage = () => {
-            const lang = language === 'cn' ? 'en' : 'cn';
-
-            setLanguage(lang);
-            setLanguageStore(lang);
-            onChange && onChange(lang);
-        };
-    
-        return (
-            <Language onClick={switchLanguage}>
-                <Iconfont type={`flag-${language}`} />
-                <span>{get(languagesMap[language], 'name')}</span>
-            </Language>
-        );
-    }
-);