admin2 1.0.0

package/src/layouts/LeftMenu.jsx

@@ -0,0 +1,264 @@
+/**
+ * @file layouts/LeftMenu 左侧导航
+ * @author 邹家志
+ */
+
+import {useState, useEffect, useCallback} from 'react';
+import {Link, connect} from 'umi';
+import {Menu, Tooltip} from 'antd';
+import _ from 'lodash';
+
+import {MenuUnfoldOutlined, MenuFoldOutlined, createFromIconfontCN} from '@ant-design/icons';
+import AuthorityManage from '@/utils/AuthorityManage';
+import {Storage} from '@/utils/utils';
+import {useLanguage} from '@/hooks';
+import {LOCAL_STORAGE, SM_ACCOUNT} from '@/contants';
+import {SMIcon} from '@/components';
+
+import { useMenuContext } from './MenuContext';
+
+import styles from './TopSide.less';
+
+
+const { SubMenu } = Menu;
+const NEW = __ASSETS_PREFIX__ + '/new'; // 项目路由新增new;
+const MENU_HINT_TEXT = '支持语种：印尼语、泰语、马来语、越南语、菲律宾语、印地语、土耳其语、西班牙语、葡萄牙语、日语、韩语、德语、法语、意大利语、俄语';
+
+const LeftMenu = props => {
+    const {leftMenuList, settings, serviceIds, organization, iconfontUrl, dispatch, setIsModalOpen} = props;
+
+    const {t} = useLanguage();
+    const { menuOpenKeys, toggleMenuOpenKey } = useMenuContext();
+
+    const [collapsed, setCollapsed] = useState(false);
+    // const [menuOpenKeys, setMenuOpenKeys] = useState([]);
+    const [menuSelectedKeys, setMenuSelectedKeys] = useState([]);
+    const [menuList, setMenuList] = useState([]);
+
+    const defaultProps = collapsed ? {} : { openKeys: menuOpenKeys };
+
+    const info = Storage.get('sm_saas_info') || {};
+
+    const toggleCollapsed = useCallback(() => setCollapsed(!collapsed), [collapsed]);
+    const menuOpen = useCallback(e => toggleMenuOpenKey(e), []);
+
+    const titleRender = useCallback(name => {
+        const styleObj = {
+            display: 'inline-block',
+            width: 120,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            marginRight: 14,
+        };
+
+        if (name.includes('B类')) {
+            return (
+                <div style={{display: 'flex'}}>
+                    <span style={styleObj}>{t(name)}</span>
+                    <div className={styles['menu-icon']}>
+                        <Tooltip
+                            placement="left"
+                            title={`${t(name)}${t(MENU_HINT_TEXT)}`}
+                            trigger={'hover'}
+                        >
+                            <img className={styles['menu-img']} />
+                        </Tooltip>
+                    </div>
+                </div>
+
+            );
+        }
+        return <span>{t(name)}</span>;
+    }, []);
+
+    const renderMenuItem = useCallback(menuItem => {
+        const MyIcon = createFromIconfontCN({ scriptUrl: iconfontUrl });
+        if (_.size(menuItem) === 0) {
+            return null;
+        }
+        if (!menuItem.children || menuItem.children.length === 0 || menuItem.isMenuLeaves) {
+            return (
+                <Menu.Item key={menuItem.path} icon={menuItem.icon && <MyIcon type={menuItem.icon.toString()} />}>
+                    <Link to={menuItem.path} title={t(menuItem.name)}>{t(menuItem.name)}</Link>
+                </Menu.Item>
+            );
+        }
+        return (
+            <SubMenu
+                key={menuItem.path}
+                title={
+                    <span
+                        style={{width: 'calc(100% - 30px)', overflow: 'hidden', textOverflow: 'ellipsis'}}
+                        title={t(menuItem.name)}
+                    >{titleRender(menuItem.name)}
+                    </span>
+                }
+                icon={menuItem.icon && <MyIcon type={menuItem.icon.toString()} />}
+            >
+                {renderMenuList(menuItem.children)}
+            </SubMenu>
+        );
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    }, [renderMenuList, iconfontUrl, titleRender, t]);
+
+    // 获取左侧菜单
+    const getLeftMenuList = useCallback(async () => {
+        const result = await dispatch({
+            type: 'manage/getMenuList',
+            payload: {organization},
+        });
+        setMenuList(result);
+    }, [organization, dispatch]);
+
+    const menuDataRender = useCallback(menuList => {
+        // 海外试用用户 不展示名单呢内容
+        const isNa = info?.environment === 'web-na' && info?.isTrial === 1;
+        const result = menuList?.filter(item => {
+            if (isNa) {
+                return !['/new/tianjing/image/list'].includes(item.path);
+            }
+            return true;
+        }).map(item => {
+            const localItem = {
+                ...item,
+            };
+            if (item.children) {
+                localItem.children = menuDataRender(item.children);
+            }
+            return AuthorityManage.checkMenuPermit(localItem, serviceIds, organization);
+        });
+        return result;
+    }, [organization, serviceIds, info]);
+
+    const renderMenuList = useCallback(menulist => {
+        const newMenulist = menuDataRender(menulist);
+        return newMenulist?.map(menuItem => renderMenuItem(menuItem));
+    }, [renderMenuItem, menuDataRender]);
+
+    const getChildrenItem = useCallback((menuItem, item) => {
+        if (menuItem.children) {
+            const childrenList = getMenuChildren(item.children, menuItem.children);
+            item.children = childrenList.reduce((a, b) => a.concat(b));
+            item.routes = childrenList.reduce((a, b) => a.concat(b));
+        }
+
+        return item;
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    }, [getMenuChildren]);
+
+    // 私有化获取左边导航
+    const getMenuChildren = useCallback((leftMenuList, menuList) => {
+        return menuList.map(menuItem => {
+            return leftMenuList.filter(item => {
+                if ((NEW + menuItem.key) === item.key) {
+                    return getChildrenItem(menuItem, item);
+                }
+            });
+        });
+    }, [getChildrenItem]);
+
+    // 左侧显示的菜单
+    const getLeftVisibleMenu = useCallback((leftMenuList, menuList) => {
+        const newMenuList = _.cloneDeep(menuList);
+        const newLeftMenuList = _.cloneDeep(leftMenuList);
+        const list = [];
+        newLeftMenuList.forEach(item => {
+            newMenuList.forEach(menuItem => {
+                if ((NEW + menuItem.key) === item.key) {
+                    list.push({...getChildrenItem(menuItem, item)});
+                }
+            });
+        });
+
+        return list;
+    }, [getChildrenItem]);
+
+    const getList = useCallback(() => {
+        let newList = [];
+        if (organization !== SM_ACCOUNT) {
+            leftMenuList?.forEach(item => {
+                if (item.name !== '全局策略中心') {
+                    newList.push(item);
+                }
+            });
+        }
+        else {
+            newList = leftMenuList;
+        }
+        if (menuList && menuList.length) {
+            newList = getLeftVisibleMenu(newList, menuList);
+            Storage.set(LOCAL_STORAGE.PRIVATE_LEFT_MENU_LIST, newList);
+        }
+        else {
+            Storage.set(LOCAL_STORAGE.PRIVATE_LEFT_MENU_LIST, []);
+        }
+        // 私有化会返回
+        return newList;
+    }, [leftMenuList, organization, menuList, getLeftVisibleMenu]);
+
+    useEffect(() => {
+        getLeftMenuList();
+    }, [getLeftMenuList]);
+
+    useEffect(() => {
+        toggleMenuOpenKey(props.menuOpenKeys);
+        setMenuSelectedKeys(props.menuSelectedKeys);
+    }, [props.menuOpenKeys, props.menuSelectedKeys]);
+
+    return (
+        <div
+            className={`${styles['left-menu']}
+                    ${location.pathname.includes('/information') ? styles['left-heichan-menu'] : ''}`}
+            style={{minWidth: collapsed ? 50 : 255}}
+        >
+            <Menu
+                openKeys={menuOpenKeys}
+                selectedKeys={menuSelectedKeys}
+                mode="inline"
+                theme={settings.navTheme || 'dark'}
+                inlineCollapsed={collapsed}
+                style={{ width: collapsed ? 50 : 255 }}
+                {...defaultProps}
+                onOpenChange={menuOpen}
+            >
+                {renderMenuList(getList())}
+            </Menu>
+            <div
+                style={{ width: collapsed ? 50 : 255 }}
+                className={styles['collapsed-button']}
+                onClick={toggleCollapsed}
+            >
+                {collapsed ? (
+                    <MenuUnfoldOutlined className={styles['collapsed-button-icon']} />
+                ) : (
+                    <MenuFoldOutlined className={styles['collapsed-button-icon']} />
+                )}
+            </div>
+            {!collapsed && (
+                <div className={styles['collapsed-button-nav']}>
+                    <Tooltip
+                        placement="top"
+                        title={t('导航栏设置')}
+                        trigger={'hover'}
+                    >
+                        <SMIcon
+                            type="icon-a-riLine-settings-line1"
+                            onClick={() => setIsModalOpen && setIsModalOpen(true)}
+                        />
+                    </Tooltip>
+                </div>
+
+            )}
+
+        </div>
+    );
+};
+
+export default connect(({ settings, user, global }) => ({
+    settings,
+    collapsed: global.collapsed,
+    serviceIds: user.currentUser.serviceIds,
+    organization: user.currentUser.organization,
+    iconfontUrl: user.iconfontUrl,
+}))(LeftMenu);

package/src/layouts/MenuContext.js

@@ -0,0 +1,22 @@
+// MenuContext.js
+import React, { createContext, useContext, useState } from 'react';
+
+const MenuContext = createContext();
+
+const MenuProvider = ({ children }) => {
+    const [menuOpenKeys, setMenuOpenKeys] = useState([]);
+    const toggleMenuOpenKey = targetKey => {
+        const targetKeys = Array.isArray(targetKey) ? targetKey : [targetKey];
+        setMenuOpenKeys(targetKeys);
+    };
+
+    return (
+        <MenuContext.Provider value={{ menuOpenKeys, toggleMenuOpenKey }}>
+            {children}
+        </MenuContext.Provider>
+    );
+};
+
+const useMenuContext = () => useContext(MenuContext);
+
+export { MenuProvider, useMenuContext };

package/src/layouts/SecurityLayout.jsx

@@ -0,0 +1,329 @@
+import React, { useCallback } from 'react';
+import {SMModal} from 'sm-antd';
+import {connect, history} from 'umi';
+import _ from 'lodash';
+import * as Sentry from '@sentry/react';
+
+import PageLoading from '@/components/PageLoading';
+import {Cookie, setIcon, Storage} from '@/utils/utils';
+import RemindPage from '@/components/RemindPage';
+import {Login, IntlLogin, DemoLogin} from '@/pages/account';
+import ForgetPwd from '@/pages/account/forgetPwd';
+import IntlForgetPwd from '@/pages/account/intlForgetPwd';
+import IntlResetPwd from '@/pages/account/intlResetPwd';
+import ResetPwd from '@/pages/account/resetPwd';
+import AuthorityManage from '@/utils/AuthorityManage';
+import {
+    LOCAL_STORAGE,
+    LOCAL_STORAGE_DOMAIN,
+    REQUEST_CODE,
+    SM_DOCUMENT_TITLE,
+    SM_ACCOUNT,
+    SENTRY_DNS,
+    SAAS_DOMAINS,
+    LOGIN_MODE,
+    STORAGE_LIST_NAME,
+    LOCALE_TYPE,
+} from '@/contants';
+import {API} from '@/configure';
+import {getLogo} from '@/services/system';
+import {getLoginMode} from '@/services/login';
+import {sendVerifyEmail, getSelectList} from '@/services/user';
+
+import { MenuProvider } from './MenuContext';
+
+import styles from './TopSide.less';
+
+import withIntlComponents from '@/hoc/withIntlComponents';
+
+
+const { ModalRoot } = SMModal;
+
+// sentry需要尽快初始化
+Sentry.init({
+    // 决定错误以及性能相关信息是否要上报到sentry，比如我只希望生产环境上报，这里你就能写一个表达式。
+    // 国内和海外地址
+    enabled: window.location.hostname === SAAS_DOMAINS.ONLINE || window.location.hostname === SAAS_DOMAINS.ONLINE_NA,
+    // 上报到sentry的关键凭证，比如你在sentry后台创建了多个项目，那么每个项目都会提供给你一个独一无二的dns，有它sentry才知道上报的信息属于哪个项目。
+    dsn: SENTRY_DNS.ONLINE,
+    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+    // 事务上报频率 现在是100%
+    tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
+});
+
+class SecurityLayout extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            isReady: false,
+            isShow: false,
+            account: '',
+            userId: '',
+            isIntl: false,
+            isLoginModeComplete: false,
+            isInitComplete: false,
+        };
+        this.rootRef = null;
+    }
+
+    UNSAFE_componentWillMount = async () => {
+        await this.initLoginMode();
+        if (Cookie.get(LOCAL_STORAGE.SAAS_TOKENID)) {
+            Cookie.set(LOCAL_STORAGE.SM_SAAS_TOKENID, Cookie.get(LOCAL_STORAGE.SAAS_TOKENID));
+            Cookie.remove(LOCAL_STORAGE.SAAS_TOKENID, LOCAL_STORAGE_DOMAIN); // sso登录清除saas tokenId
+            Cookie.remove(LOCAL_STORAGE.SAAS_TOKENID);
+        }
+
+        if (Cookie.get(LOCAL_STORAGE.TOKENID)) {
+            Cookie.set(LOCAL_STORAGE.SM_SAAS_TOKENID, Cookie.get(LOCAL_STORAGE.TOKENID));
+            Cookie.remove(LOCAL_STORAGE.TOKENID);
+            Cookie.remove(LOCAL_STORAGE.TOKENID, LOCAL_STORAGE_DOMAIN);
+        }
+
+        const tokenId = Cookie.get('sm_saas_tokenId'); // 'undefined' //Cookie.get("sm_saas_tokenId");
+        const isLogin = !!(tokenId && tokenId !== 'undefined');// !!tokenId;
+        if (isLogin) {
+            await this.getRouterList();
+            await this.getUserInfo();
+            this.getMessage();
+            this.getGlobalModalMessage();
+            this.setState({ isInitComplete: true });
+        }
+    };
+
+    componentDidMount = () => {
+        window.addEventListener('resize', _.debounce(this.resizeUpdate, 500));
+    };
+
+    async getRouterList() {
+        try {
+            const result = await getSelectList();
+            if (result?.code === 1100) {
+                AuthorityManage.initAuthority(result?.content);
+                Storage.set('sm-saas-router-list', result?.content);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    async getUserInfo() {
+        const { dispatch } = this.props;
+        if (dispatch) {
+            let userInfo
+                = (await dispatch({
+                    type: 'user/fetchUserInfo',
+                })) || {};
+            // 没有激活的账号发送邮件 需要客户重新激活
+            // if (userInfo.isVerified === 1) { // 海外官网 已经用webflow 这逻辑不需要
+            //     const result = await sendVerifyEmail({account: userInfo.account});
+            //     if (result.code === 1100) {
+            //         window.location = `https://intl.ishumei.com/apply/confirmPage?email=${userInfo.account}`;
+            //     }
+            // }
+
+            Cookie.set('sm_saas_roleId', _.map(userInfo.roles, 'name'));
+            Cookie.set('sm_saas_openUpdatePassword', userInfo.openUpdatePassword);
+            Storage.set('sm_saas_info', userInfo);
+            this.setState({
+                account: userInfo.account,
+                isShow: userInfo.showUpdatePassword,
+                userId: userInfo.userId,
+            });
+            if (userInfo.organization !== SM_ACCOUNT) {
+                this.getApps(userInfo);
+            }
+            const organization = _.get(userInfo, 'organization');
+            // 数美公司不允许右键点击 且非开发环境
+            if (organization === SM_ACCOUNT && process.env.NODE_ENV !== 'development') {
+                document.addEventListener('contextmenu', function (event) {
+                    event.preventDefault();
+                });
+            }
+            this.setSystemConfig(organization);
+        }
+    }
+
+    setSystemConfig = async organization => {
+        const {t} = this.props;
+
+        setIcon(`${API.PAGE_SETUP.FAVICON}?organization=${organization}`);
+        const { code, content } = await getLogo({
+            organization,
+        });
+        if (code === REQUEST_CODE.SUCCESS) {
+            const documentTitle = _.get(content, 'config.title', SM_DOCUMENT_TITLE);
+            document.title = t(documentTitle);
+        }
+    };
+
+    async getApps(userInfo) {
+        const { dispatch, t } = this.props;
+        const { organization } = userInfo || {};
+        Cookie.set('currentOrg', organization);
+        let defaultValue = [
+            {
+                appName: t('全部'),
+                appId: 'all',
+            },
+        ];
+        if (dispatch) {
+            let appList = await dispatch({
+                type: 'user/fetchApps',
+                payload: {
+                    organization: organization,
+                    offset: 0,
+                    count: 1000,
+                },
+            });
+            let newAppList = defaultValue.concat(appList);
+            Storage.set('sm_appId_list', newAppList);
+        }
+    }
+
+    getMessage() {
+        const { dispatch } = this.props;
+
+        if (dispatch) {
+            dispatch({
+                type: 'user/fetchMessage',
+            });
+        }
+    }
+
+    getGlobalModalMessage() {
+        const { dispatch } = this.props;
+
+        if (dispatch) {
+            dispatch({
+                type: 'user/fetchGlobalModalMessage',
+            });
+        }
+    }
+
+    initLoginMode = async () => {
+        try {
+            const {code, content} = await this.props.dispatch({type: 'login/getLoginMode' }) || {};
+            /**
+             * 跟设计确认逻辑修改
+             * 1: 国内ip访问默认中文
+             * 2: 国外ip访问默认英文
+             * 3: 如果手动设置中、英文显示已手动设置为主
+            */
+            if (code === REQUEST_CODE.SUCCESS) {
+                let isIntl = content.isIntl;
+                let languageType = localStorage.getItem(STORAGE_LIST_NAME.UMI_LOCALE);
+
+                if (languageType) {
+                    isIntl = languageType === LOCALE_TYPE.EN;
+                } else {
+                    languageType = isIntl ? LOCALE_TYPE.EN : LOCALE_TYPE.ZH;
+                }
+
+                this.setState({isIntl, isLoginModeComplete: true});
+                localStorage.setItem(STORAGE_LIST_NAME.UMI_LOCALE, languageType);
+            } else {
+                this.setState({isLoginModeComplete: true});
+            }
+        } catch (error) {
+            console.error(error);
+            this.setState({isLoginModeComplete: true});
+        }
+    };
+
+    resizeUpdate = () => {
+        const screenWidth = window.innerWidth;
+        let getScale = 1;
+        const pageWidth = 1440;
+        if (screenWidth < pageWidth) {
+            getScale = screenWidth / pageWidth  < 0.8 ? 0.8 : screenWidth / pageWidth;
+        }
+        try {
+            this.rootRef.style.transform = `scale(${getScale})`;
+            this.rootRef.style.transformOrigin = '0px 0px';
+            const newHight = `${(window.innerHeight - 50) / getScale}px`;
+            const leftContent =  document.getElementsByClassName('left-menu___3qzmE')[0];
+            const rightContentRef =  document.getElementById('top-left-layout-content');
+
+            if (leftContent) {
+                leftContent.style.height = newHight;
+            }
+            if (rightContentRef) {
+                rightContentRef.style.height = newHight;
+            }
+            this.rootRef.style.height = `${window.innerHeight / getScale}px`;
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    render() {
+        const {
+            isLoginModeComplete,
+            isInitComplete,
+            account,
+            userId,
+            isShow,
+            isIntl,
+        } = this.state;
+        const { children } = this.props; // You can replace it to your authentication rule (such as check token exists)
+        // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
+        const tokenId = Cookie.get('sm_saas_tokenId');
+        const isLogin = !!(tokenId && tokenId !== 'undefined');
+        if (history.location.pathname.indexOf('/account/forgetPwd') > -1) {
+            return <ForgetPwd />;
+        }
+        if (history.location.pathname.indexOf('/account/resetPwd') > -1) {
+            return <ResetPwd />;
+        }
+        if (history.location.pathname.indexOf('/account/intlForgetPwd') > -1) {
+            return <IntlForgetPwd />;
+        }
+        if (history.location.pathname.indexOf('/account/intlResetPwd') > -1) {
+            return <IntlResetPwd />;
+        }
+
+        if (!isLogin && isLoginModeComplete) { // 获取登录模式结果之后，在显示显示登录界面，解决海外登录页面调用二次验证产生的bug
+            return isIntl ? <IntlLogin /> : <Login />;
+        }
+
+        const canRenderMainContent = isLoginModeComplete && isInitComplete;
+        if (!canRenderMainContent) {
+            return <PageLoading />;
+        }
+
+        return (
+            <div
+                className={styles.root}
+                ref={el => {
+                    if (el && !this.rootRef) {
+                        this.rootRef = el;
+                        this.resizeUpdate();
+                    }
+                }}
+            >
+                <MenuProvider>
+                    {children}
+                </MenuProvider>
+                <ModalRoot
+                    ref={ele => {
+                        global.modal = ele;
+                    }}
+                />
+                {isShow && (
+                    <RemindPage
+                        userName={account}
+                        userId={userId}
+                        closable={() => {
+                            this.setState({ isShow: false });
+                        }}
+                    />
+                )}
+            </div>
+        );
+    }
+}
+
+export default withIntlComponents(connect(({ user }) => ({
+    currentUser: user.currentUser,
+}))(SecurityLayout));