tntd 1.4.17 → 2.0.0-beta

package/components/Layout/AppList.js

@@ -1,273 +0,0 @@
-import { useState, useEffect } from 'react';
-import styled, { withTheme } from 'styled-components';
-import { Dropdown, Menu, Input, Select, TreeSelect } from 'antd';
-import { get } from 'lodash';
-import Icon from '../Icon';
-import { getCurrentAppStore, setCurrentAppStore } from './storage';
-import { traverseTree } from '../utils';
-
-const { Option } = Select;
-const MenuList = styled(Menu)`
-    border-radius: 0;
-    min-width: 250px;
-    max-height: 350px;
-    overflow-y: auto;
-    border: 1px solid #ccc;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
-    .ant-dropdown-menu-item {
-        padding: 0 20px;
-        height: 44px;
-        line-height: 44px;
-        &:hover {
-            background: rgba(0, 0, 0, 0.1);
-        }
-        &.app-search-warp {
-            padding: 0;
-            &:hover {
-                background: none;
-            }
-            .ant-input-affix-wrapper {
-                height: 100%;
-            }
-            .ant-input {
-                border: none;
-                border-bottom: 1px dashed #dcdcdc;
-                box-shadow: none;
-                padding: 0 20px;
-            }
-        }
-        i {
-            margin-right: 0 !important;
-            margin-left: 6px !important;
-        }
-    }
-    .isInIframe & {
-        margin-left: 20px;
-    }
-`;
-
-// 新版UI
-const AppsSelect = styled(Select)`
-    min-width: 160px;
-    height: 28px;
-    line-height: 28;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    .ant-select-selection, .ant-select-selection__rendered {
-        line-height: 28px;
-        height: 28px;
-    }
-
-    .ant-select-selection {
-        .hasHeaderTabs & {
-            border-radius: 14px;
-            font-size: 12px;
-            // 去掉默认黑色
-            // background: #191D29;
-            // border: 1px solid rgba(186,189,197,0.60);
-            // color: rgba(255,255,255,.8);
-            // 统一为浅色调
-            background: #fff  !important;
-            border-color: #c9d2dd  !important;
-            color: #8b919e  !important;
-        }
-        // 统一色调
-        // .tnt-themeS1.hasHeaderTabs & {
-        //     /* background: #141825; */
-        //     /* color: rgba(255,255,255,.85); */
-        //     background: #fff;
-        //     border-color: #c9d2dd;
-        //     color: #8b919e;
-        // }
-
-        // .tnt-themeS3.hasHeaderTabs &{
-        //     background: ${props => `${props.theme.blueBgColor} !important`}; //#1D4295
-        //     color: rgba(255,255,255,0.8);
-        //     border-color: rgba(255,255,255,0.5);
-        // }
-    }
-
-    .ant-select-arrow {
-        .hasHeaderTabs & {
-            color: #B2BECD;
-        }
-        .tnt-themeS1 & {
-            /* color: rgba(255,255,255,.85); */
-        }
-    }
-
-    .tnt-themeS1 & {
-        border-radius: 2px;
-    }
-
-    .isInIframe & {
-        margin-left: 20px;
-    }
-`;
-
-const AppTreeSelect = styled(TreeSelect)`
-    min-width: 160px;
-    height: 28px;
-    line-height: 28;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-`;
-
-const SwitchAppMenu = styled.a`
-    display: block;
-    color: #666;
-    line-height: ${props => `${props.theme.headerHeight}px`};
-    font-size: ${props => `${props.theme.size === 'large' ? 16 : 14}px`};
-
-    .tnt-themeS1 & {
-        color: rgba(255,255,255,.85);
-    }
-    &:hover {
-        color: #666;
-    }
-    i {
-        margin-left: 12px;
-    }
-`;
-
-export default withTheme(
-    props => {
-        const { selectedKey, items = [], onChange } = props;
-        const getInitialSelectedApp = () => {
-            const currentAppStore = getCurrentAppStore();
-            const findAppByKey = selectedKey => {
-                let findApp;
-
-                traverseTree(items, item => {
-                    if (item.key === selectedKey) {
-                        findApp = item;
-                        return false;
-                    }
-                });
-
-                return findApp;
-            };
-            const currentApp = findAppByKey(selectedKey || get(currentAppStore, 'key'));
-
-            return currentApp || items[0];
-        };
-        const changeApp = app => {
-            setSelectedApp(app);
-            setCurrentAppStore(app);
-            onChange && onChange(app);
-        };
-
-        const [searchValue, setSearchValue] = useState();
-        const [selectedApp, setSelectedApp] = useState(getInitialSelectedApp());
-        const Menus = (
-            <MenuList selectedKeys={[get(selectedApp, 'key')]}>
-                <Menu.Item className="app-search-warp" key="search" disabled>
-                    <Input
-                        allowClear
-                        placeholder="输入关键词搜索"
-                        value={searchValue}
-                        onChange={evt => {
-                            setSearchValue(evt.target.value);
-                        }}
-                    />
-                </Menu.Item>
-                {
-                    items.filter(({ key, name } = {}) => {
-                        const regExp = new RegExp(searchValue, 'i');
-                        if (searchValue) {
-                            return regExp.test(key) || regExp.test(name);
-                        }
-                        return true;
-                    }).map(item => (
-                        <Menu.Item
-                            key={item.key}
-                            onClick={changeApp.bind(this, item)}
-                        >
-                            {item.name}
-                        </Menu.Item>
-                    ))
-                }
-            </MenuList>
-        );
-
-        useEffect(() => {
-            const newApp = getInitialSelectedApp();
-
-            if (newApp?.key !== selectedApp?.key) {
-                changeApp(newApp);
-            }
-        }, [items, selectedKey]);
-
-        if (!props.theme.compatible) {
-            if (items?.some(item => item.children?.length)) {
-                return (
-                    <AppTreeSelect
-                        placeholder="请选择"
-                        showSearch
-                        treeNodeFilterProp="title"
-                        treeDefaultExpandAll
-                        dropdownClassName="tnt-layout-header-app-tree-select"
-                        dropdownStyle={{ maxHeight: 560 }}
-                        value={get(selectedApp, 'key')}
-                        treeData={
-                            traverseTree(items, item => {
-                                item.title = item.name;
-                                item.value = item.key;
-                                item.selectable = !item.children;
-                                item.disabled = !!item.children;
-                            })
-                        }
-                        onChange={appKey => {
-                            let findItem;
-
-                            traverseTree(items, node => {
-                                if (node.key === appKey) {
-                                    findItem = node;
-                                    return false;
-                                }
-                            });
-                            changeApp(findItem);
-                        }}
-                        style={{ minWidth: 160, height: 28, lineHeight: 28 }}
-                    />
-                );
-            }
-
-            return (
-                <AppsSelect
-                    placeholder="请选择"
-                    showSearch
-                    optionFilterProp="children"
-                    value={get(selectedApp, 'key')}
-                    onChange={appKey => {
-                        changeApp(items.find(({ key }) => key === appKey));
-                    }}
-                    style={{ minWidth: 160, height: 28, lineHeight: 28 }}
-                >
-                    {
-                        items.map(({ key, name }) => (
-                            <Option key={key} value={key}>
-                                {name}
-                            </Option>
-                        ))
-                    }
-                </AppsSelect>
-            );
-        }
-
-        return (
-            <Dropdown overlay={Menus} trigger={['click']}>
-                <SwitchAppMenu>
-                    <span>
-                        {
-                            get(selectedApp, 'name', '请选择')
-                        }
-                    </span>
-                    <Icon type="caret-down" />
-                </SwitchAppMenu>
-            </Dropdown>
-        );
-    }
-);

package/components/Layout/Application.js

@@ -1,121 +0,0 @@
-import { useState } from 'react';
-import styled from 'styled-components';
-import cn from 'classnames';
-import { Popover } from 'antd';
-import { get } from 'lodash';
-import { systemMap as applicationsMap } from '@tntx/logo-icon';
-import Iconfont from './Iconfont';
-import { defaultLogo } from './images';
-
-const App = styled.li`
-    margin-left: 20px;
-    font-size: 20px;
-    cursor: pointer;
-    .tnt-icon {
-        color: #17233d99;
-        .tnt-themeS1 & {
-            color: rgba(255,255,255,.85);
-        }
-    }
-`;
-
-const AppList = styled.ul`
-    list-style: none;
-    width: 264px;
-    margin: 0;
-    padding: 0;
-`;
-
-const AppItem = styled.li`
-    position: relative;
-    width: 88px;
-    padding: 8px 0;
-    cursor: pointer;
-    display: inline-block;
-    text-align: center;
-    &:hover, &.active {
-        background: #eee;
-    }
-    &.active:after {
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-width: 5px 10px 0 0;
-        border-color: #333;
-        border-style: solid;
-        z-index: 9;
-    }
-    img {
-        width: 44px;
-        height: 44px;
-        margin-bottom: 6px;
-    }
-    div {
-        line-height: 20px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-`;
-
-const AppContentWrapper = styled.div`
-    background-color: #fff;
-    border-radius: 4px;
-    z-index: 1;
-`;
-
-const AppContent = props => {
-    const { language, apps, onChange } = props;
-    const [appKey, setAppKey] = useState(props.appKey);
-    const changeApp = appKey => {
-        setAppKey(appKey);
-        onChange && onChange(appKey);
-    };
-
-    return (
-        <AppContentWrapper>
-            <AppList>
-                {
-                    apps.sort(
-                        (a, b) => get(applicationsMap, `${a.appKey}.sort`, 1) - get(applicationsMap, `${b.appKey}.sort`, 1)
-                    ).map(({ appKey: key }) => (
-                        <AppItem
-                            key={key}
-                            className={cn({ active: appKey === key })}
-                            onClick={changeApp.bind(this, key)}
-                        >
-                            <img
-                                src={get(applicationsMap, `${key}.logo`, defaultLogo)}
-                                onError={e => {
-                                    e.target.onerror = null;
-                                    e.target.src = defaultLogo;
-                                }}
-                            />
-                            <div>
-                                {
-                                    get(applicationsMap, `${key}.${{
-                                        cn: 'name',
-                                        en: 'enName'
-                                    }[language || 'cn']}`, key)
-                                }
-                            </div>
-                        </AppItem>
-                    ))
-                }
-            </AppList>
-        </AppContentWrapper>
-    );
-};
-
-export default props => (
-    <App>
-        <Popover
-            placement="bottomRight"
-            title={null}
-            content={<AppContent {...props} />}
-            trigger="click"
-        >
-            <Iconfont type="application" />
-        </Popover>
-    </App>
-);

package/components/Layout/Avatar.js

@@ -1,144 +0,0 @@
-import { useContext } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { Popover, Button } from 'antd';
-import deleteAllCookiesFactory from 'delete-all-cookies';
-import { get } from 'lodash';
-import images from './images';
-import ActionsContext from './ActionsContext';
-
-const Avatar = styled.li`
-    margin-right: 0;
-    font-size: 0;
-    img {
-        width: 26px;
-        height: 26px;
-        border-radius: 50%;
-        cursor: pointer;
-        .large-size & {
-            width: 32px;
-            height: 32px;
-        }
-    }
-`;
-
-const GlobalStyle = createGlobalStyle`
-    .tnt-layout-personal-popover {
-        .ant-popover-inner-content {
-            padding: 0;
-        }
-    }
-`;
-
-const UserInfoWrapper = styled.div`
-    min-width: 235px;
-    z-index: 1;
-    background-color: #fff;
-    border-radius: 4px;
-
-    .isInIframe & {
-        display: none;
-    }
-    
-    .user-info-body {
-        padding: 30px 20px 20px 24px;
-        line-height: 16px;
-        .user-info-body-username {
-            margin-top: 0px;
-            font-size: 16px;
-            color: #333;
-            font-weight: normal;
-            margin-bottom: 10px;
-            line-height: 16px;
-        }
-        .user-info-body-account {
-            margin-top: 0px;
-            color: #666;
-            margin-bottom: 14px;
-            line-height: 16px;
-        }
-        a {
-            margin-right: 16px;
-        }
-    }
-    .user-info-footer {
-        border-top: 1px solid #ccc;
-        background-color: #f5f5f5;
-        padding: 8px 20px;
-        text-align: right;
-        .user-info-footer-signout:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
-            border-color: #d9d9d9;
-            color: rgba(0, 0, 0, 0.65);
-        }
-    }
-`;
-
-const UserInfoContent = props => {
-    const { userInfo, onLogout, onChangePassword = () => true, onPersonalSetting = () => true } = props;
-    const { getText } = useContext(ActionsContext);
-
-    return (
-        <UserInfoWrapper className="user-info-setting-wrap">
-            <div className="user-info-body">
-                <p className="user-info-body-username">
-                    {userInfo.userName || '暂无昵称'}
-                </p>
-                <p className="user-info-body-account">
-                    {userInfo.account}
-                </p>
-                <a onClick={onPersonalSetting} href="/bridge/userCenter?currentTab=1">{getText('personalSettings')}</a>
-                <a onClick={onChangePassword} href="/bridge/userCenter?currentTab=2">{getText('changePwd')}</a>
-            </div>
-            <div className="user-info-footer">
-                <Button
-                    className="user-info-footer-signout"
-                    onClick={() => {
-                        if (onLogout) {
-                            onLogout();
-                            deleteAllCookiesFactory(window)();
-                        } else {
-                            deleteAllCookiesFactory(window)();
-                            window.location.href = `/user/login?callbackUrl=${window.encodeURI(location.href)}`;
-                        }
-                    }}
-                >
-                    <a>{getText('signOut')}</a>
-                </Button>
-            </div>
-        </UserInfoWrapper>
-    );
-};
-
-export default props => {
-    const {
-        userInfo = {}
-    } = props;
-    const { avatar } = userInfo;
-
-    return (
-        <Avatar>
-            <Popover
-                popupClassName="tnt-layout-personal-popover"
-                placement="bottomRight"
-                title={null}
-                content={<UserInfoContent {...props} />}
-                trigger="click"
-            >
-                {
-                    avatar ? (
-                        <img
-                            src={avatar.indexOf('base64') > 0 ? avatar : get(images[avatar], 'default', images[avatar])}
-                            onError={e => {
-                                e.target.onerror = null;
-                                e.target.src = images.empty?.default || images.empty;
-                            }}
-                        />
-                    ) : (
-                        <img src={images.empty?.default || images.empty} />
-                    )
-                }
-            </Popover>
-            <GlobalStyle />
-        </Avatar>
-    );
-};