tms-auth 1.3.26

package/src/layouts/HeaderLeft.tsx

@@ -0,0 +1,145 @@
+import React, { useReducer, useState } from 'react';
+import { Col, Dropdown, Menu, Row, ConfigProvider } from 'antd';
+import DynamicIcon from '@salesforce/design-system-react/components/dynamic-icon';
+import logo from './logo.svg';
+import Tms from '@/utils/sdk';
+import { useSelector, useDispatch } from 'react-redux';
+
+const env = process.env.NODE_ENV;
+const IS_DEV = window.location.hostname == 'localhost';
+
+export default (props: any) => {
+  const lang = useSelector((state) => state.language.text);
+  const isEnglish = lang == 'en';
+
+  const appConfig = Tms.getConfig();
+  const TmsStorage = Tms.getStorage();
+  // const isEnglish = appConfig.lang == 'en'; //localStorage.LANG === 'en';
+
+  const systemMenuArr = (props.appMenus || []).filter((m: object) => m.showFlag !== '1'); // 0是可以显示且跳转至新页面，1为不显示, 2为可展示且在当前页面切换
+  const systemMenu = (
+    <Menu>
+      <Row
+        justify="start"
+        wrap={true}
+        style={{ margin: '5px 10px', overflowY: 'auto', maxHeight: '50vh' }}
+      >
+        {systemMenuArr.map((item, index) => {
+          return (
+            <Menu.Item key={item.id}>
+              <Col
+                span={24}
+                key={index}
+                onClick={() => {
+                  if (item.showFlag === '0') {
+                    if (IS_DEV) {
+                      TmsStorage.setItem(appConfig.curAppKey, JSON.stringify(item));
+                      Tms.updateDocumentIcon(item.icon);
+                      Tms.updateDocumentTitle(
+                        isEnglish
+                          ? item.appEnName || item.appName + (IS_DEV ? 'en' : '')
+                          : item.appName,
+                      );
+                      window.location.reload();
+                    } else {
+                      const appDomain = `${item.appDomain || item.defaultDomain}${
+                        item.appPath || item.defaultPath || ''
+                      }`;
+
+                      Tms.openWindow({ link: appDomain });
+
+                      props.callbackToAPPSystem &&
+                        props.callbackToAPPSystem({
+                          eventName: 'tms-click-app',
+                          isSuccess: true,
+                          data: item,
+                        });
+                    }
+                  } else if (item.showFlag === '2') {
+                    TmsStorage.setItem(appConfig.curAppKey, JSON.stringify(item));
+                    Tms.updateDocumentIcon(item.icon);
+                    Tms.updateDocumentTitle(
+                      isEnglish
+                        ? item.appEnName || item.appName + (IS_DEV ? 'en' : '')
+                        : item.appName,
+                    );
+                    window.location.reload();
+                    props.callbackToAPPSystem &&
+                      props.callbackToAPPSystem({
+                        eventName: 'tms-click-app',
+                        isSuccess: true,
+                        data: item,
+                      });
+                  } else {
+                    console.log(`暂未配置showFlag为${item.showFlag}的跳转模式`);
+                    props.callbackToAPPSystem &&
+                      props.callbackToAPPSystem({
+                        eventName: 'tms-click-app',
+                        isSuccess: false,
+                        data: null,
+                      });
+                  }
+                }}
+                style={{
+                  margin: '10px',
+                  textAlign: 'center',
+                  cursor: 'pointer',
+                  width: '85px',
+                }}
+              >
+                <img
+                  src={item.icon}
+                  style={{
+                    height: '50px',
+                    width: '50px',
+                    marginBottom: '5px',
+                    cursor: 'pointer',
+                  }}
+                ></img>
+                <div
+                  className="system-menu-title simple-ellipsis2"
+                  style={{
+                    textAlign: 'center',
+                    width: '100%',
+                    fontSize: '10px',
+                    lineHeight: 1.2,
+                    height: '30px',
+                    wordBreak: 'normal',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {isEnglish ? item.appEnName || item.appName + (IS_DEV ? 'en' : '') : item.appName}
+                </div>
+              </Col>
+            </Menu.Item>
+          );
+        })}
+      </Row>
+    </Menu>
+  );
+
+  return (
+    <ConfigProvider prefixCls="ant-tms">
+      <div>
+        <Dropdown
+          overlayClassName="left-head-dropdown"
+          overlay={systemMenu}
+          overlayStyle={{ width: '350px' }}
+        >
+          <div
+            style={{
+              display: 'inline',
+              marginRight: '27px',
+              position: 'relative',
+              top: '6px',
+              left: '10px',
+            }}
+          >
+            <DynamicIcon isPaused title="Open App Launcher" variant="waffle" />
+          </div>
+        </Dropdown>
+        <img style={{ width: 100, height: 30 }} src={logo} />
+      </div>
+    </ConfigProvider>
+  );
+};

package/src/layouts/HeaderRight.tsx

@@ -0,0 +1,152 @@
+import { prompt, PromptContainer } from './Prompt/index';
+import SfAvatar from '@salesforce/design-system-react/components/avatar';
+import Button from '@salesforce/design-system-react/components/button';
+import { Dropdown, Menu, ConfigProvider, Radio } from 'antd';
+import React, { useEffect, useState, useContext } from 'react';
+import { history } from 'umi';
+import Tms from '@/utils/sdk';
+import { useSelector, useDispatch } from 'react-redux';
+
+const LANGUAGE_TEXT = {
+  tip: { cn: '提示', en: 'Tip' },
+  logoutTitle: { cn: '退出登录', en: 'Log out' },
+  logoutQuestion: { cn: '确定退出登录?', en: 'Are you sure you want to log out?' },
+  sure: { cn: '确定', en: 'Yes' },
+};
+
+export default function GlobalHeader(props: any) {
+  const appConfig = Tms.getConfig();
+  const TmsStorage = Tms.getStorage();
+  const langState = useSelector((state) => state.language.text);
+
+  const tokenStr = TmsStorage.getItem(appConfig.tokenKey) || '{}';
+  const tokenObj = JSON.parse(tokenStr);
+  const user = tokenObj || {};
+  // const dispatch = useContext(ReducerContext);
+
+  const tms_logout = () => {
+    Tms.logout()
+      .then(() => {
+        history.replace(appConfig.loginPath);
+        props.callbackToAPPSystem &&
+          props.callbackToAPPSystem({ eventName: 'tms-logout', isSuccess: true, data: null });
+      })
+      .catch((err) => {
+        history.replace(appConfig.loginPath);
+        props.callbackToAPPSystem &&
+          props.callbackToAPPSystem({ eventName: 'tms-logout', isSuccess: false, data: null });
+      });
+  };
+
+  // 语言变更
+  const langOptions = [
+    { label: '中文', value: 'cn' },
+    { label: 'English', value: 'en' },
+  ];
+  const [lang, setLang] = useState(langState || appConfig.lang || 'cn');
+
+  useEffect(() => {
+    props?.langChange?.(lang);
+  }, [lang]);
+  const onLangChange = ({ target: { value } }: RadioChangeEvent) => {
+    setLang(value);
+    Tms.updateLanguage(value);
+    props.callbackToAPPSystem &&
+      props.callbackToAPPSystem({ eventName: 'tms-update-language', isSuccess: true, data: value });
+  };
+
+  const menu = (
+    <Menu>
+      <Menu.Item
+        key="logout"
+        onClick={() => {
+          prompt({
+            title: LANGUAGE_TEXT['tip'][lang],
+            content: LANGUAGE_TEXT['logoutQuestion'][lang],
+            confirmText: LANGUAGE_TEXT['sure'][lang],
+          }).then((res) => {
+            tms_logout();
+          });
+        }}
+      >
+        <div style={{ display: 'flex' }}>
+          <SfAvatar
+            variant="user"
+            imgSrc={user?.avatar ?? ''}
+            label={user?.nick_name?.substr(0, 1)}
+          />
+          <div style={{ width: '12rem', marginLeft: '1rem' }}>
+            <div>{user?.nick_name ?? '用户'}</div>
+            <div>{user?.username ?? ''}</div>
+            <div style={{ display: 'flex' }}>
+              <Button
+                label={LANGUAGE_TEXT['logoutTitle'][lang]}
+                onClick={(e) => {
+                  prompt({
+                    title: LANGUAGE_TEXT['tip'][lang],
+                    content: LANGUAGE_TEXT['logoutQuestion'][lang],
+                    confirmText: LANGUAGE_TEXT['sure'][lang],
+                  }).then((res) => {
+                    tms_logout();
+                  });
+                }}
+                variant="base"
+              />
+            </div>
+          </div>
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <ConfigProvider prefixCls="ant-tms">
+      <div className="slds-global-header__item">
+        <ul className="slds-global-actions" style={{ display: 'flex', alignItems: 'center' }}>
+          {!props.hiddenLanguage && (
+            <li className="slds-global-actions__item">
+              <Radio.Group
+                className="tms-language"
+                options={langOptions}
+                onChange={onLangChange}
+                value={lang}
+                optionType="button"
+                buttonStyle="solid"
+              />
+            </li>
+          )}
+          <li className="slds-global-actions__item">
+            <div
+              className="slds-dropdown-trigger slds-dropdown-trigger_click"
+              style={{ display: 'inline-block' }}
+            >
+              <Dropdown overlay={menu} arrow>
+                <button
+                  className="slds-button slds-button_icon slds-global-actions__avatar slds-global-actions__item-action"
+                  id="header-profile-popover-id"
+                  title="Art Vandelay"
+                  type="button"
+                  aria-haspopup="true"
+                >
+                  <span
+                    className="slds-avatar slds-avatar_circle slds-avatar_medium"
+                    style={{ position: 'relative', overflow: 'inherit' }}
+                  >
+                    {/* {user.headImgUrl ? <Avatar src={user.headImgUrl} /> : <SfAvatar variant="user" />} */}
+                    <SfAvatar
+                      variant="user"
+                      imgSrc={user?.avatar ?? ''}
+                      label={user?.nick_name?.substr(0, 1)}
+                    />
+                  </span>
+                </button>
+              </Dropdown>
+            </div>
+          </li>
+        </ul>
+
+        <PromptContainer />
+      </div>
+    </ConfigProvider>
+  );
+}

package/src/layouts/Ifame/index.less

@@ -0,0 +1,7 @@
+.iframe-page {
+  width: 100%;
+  height: calc(88vh);
+  background-color: #fff;
+  border-width: 0;
+  border-radius: 5px;
+}

package/src/layouts/Ifame/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useMemo } from 'react';
+import './index.less';
+import Tms from '../../utils/sdk';
+import { history } from 'umi';
+
+export default (props: any) => {
+  useEffect(() => {
+    Tms.getAuthApp().catch((err: any) => {
+      const tmsConfig = Tms.getConfig();
+      if (err.httpStatus == 511) {
+        Tms.logout().finally(() => {
+          history.replace(tmsConfig.loginPath);
+        });
+      }
+    });
+  }, [props.src]);
+
+  const getIframeUrl = () => {
+    if (props.src.includes('?')) {
+      return props.src + '&lang=' + props.lang;
+    } else {
+      return props.src + '?lang=' + props.lang;
+    }
+  };
+
+  return <iframe className={'iframe-page'} id="iframe-page" src={getIframeUrl()}></iframe>;
+};

package/src/layouts/Loading/index.less

@@ -0,0 +1,22 @@
+.wrap {
+  position: relative;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.spin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/layouts/Loading/index.tsx

@@ -0,0 +1,44 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import cx from 'classnames';
+import Animate from 'rc-animate';
+import Spinner from '@salesforce/design-system-react/components/spinner';
+
+import styles from './index.less';
+
+interface Props {
+  children?: ReactNode;
+  loading: boolean;
+  className?: string;
+  overlayClassName?: string;
+  style?: CSSProperties;
+  overlayStyle?: CSSProperties;
+}
+
+const Loading: React.FC<Props> = ({
+  children,
+  className,
+  overlayClassName,
+  style,
+  overlayStyle,
+  loading,
+}) => {
+  return (
+    <div className={cx(styles.wrap, className)} style={style}>
+      <Animate component="" transitionName="fade">
+        {loading ? (
+          <div className={cx(styles.overlay, overlayClassName)} style={overlayStyle}>
+            <Spinner
+              className={styles.spin}
+              size="small"
+              variant="base"
+              assistiveText={{ label: 'Loading...' }}
+            />
+          </div>
+        ) : null}
+      </Animate>
+      {children}
+    </div>
+  );
+};
+
+export default Loading;

package/src/layouts/NavigationBar.tsx

@@ -0,0 +1,49 @@
+import GlobalNavigationBar from '@salesforce/design-system-react/components/global-navigation-bar';
+import GlobalNavigationBarRegion from '@salesforce/design-system-react/components/global-navigation-bar/region';
+import React from 'react';
+import Tms from '@/utils/sdk';
+import NavigationBarWithAntd from './NavigationBarWithAntd';
+import { useSelector, useDispatch } from 'react-redux';
+
+const env = process.env.NODE_ENV;
+const IS_TMS_DEV = env === 'development';
+const IS_DEV = window.location.hostname == 'localhost';
+
+const NavigationBar = (props: any) => {
+  const appConfig = Tms.getConfig();
+  const TmsStorage = Tms.getStorage();
+  const currentApp_str = TmsStorage.getItem(appConfig.curAppKey);
+  const currentApp = currentApp_str ? JSON.parse(currentApp_str) : '';
+  // const isEnglish = appConfig.lang == 'en'; //localStorage.LANG === 'en';
+
+  const lang = useSelector((state) => state.language.text);
+  const isEnglish = lang == 'en';
+
+  return (
+    <div style={{ height: '40px' }}>
+      <GlobalNavigationBar>
+        <GlobalNavigationBarRegion region="primary" key="1">
+          <div className="slds-context-bar__primary">
+            <div className="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
+              <div className="slds-context-bar__icon-action">
+                {currentApp && (
+                  <div style={{ fontWeight: 'bold' }}>
+                    {IS_TMS_DEV ? 'TMS Local ' : ''}
+                    {isEnglish
+                      ? currentApp.appEnName || currentApp.appName + (IS_DEV ? 'en' : '')
+                      : currentApp.appName}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </GlobalNavigationBarRegion>
+        <GlobalNavigationBarRegion region="secondary" navigation key="2">
+          <NavigationBarWithAntd {...props} />
+        </GlobalNavigationBarRegion>
+      </GlobalNavigationBar>
+    </div>
+  );
+};
+
+export default NavigationBar;

package/src/layouts/NavigationBarWithAntd.tsx

@@ -0,0 +1,165 @@
+import { Menu, ConfigProvider } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { history } from 'umi';
+import Tms from '@/utils/sdk';
+
+const IS_DEV = window.location.hostname == 'localhost';
+const getDefaultMenu = (list: any[], path: string) => {
+  let menu: Object | undefined;
+  list?.forEach((item = {}) => {
+    if (Array.isArray(item.children)) {
+      const subMenu = getDefaultMenu(item.children, path);
+      if (subMenu) {
+        menu = { ...subMenu, parentMenu: item };
+      }
+    } else if (item.path === path) {
+      menu = item;
+    }
+  });
+  return menu;
+};
+
+const NavigationBar = (props: any) => {
+  const tmsConfig = Tms.getConfig();
+  const TmsStorage = Tms.getStorage();
+  const lang = useSelector((state) => state.language.text);
+  const isEnglish = lang == 'en'; // tmsConfig.lang == 'en'; //localStorage.LANG === 'en';
+  const { pathname } = history.location;
+  const [current, setCurrent] = useState();
+
+  useEffect(() => {
+    const menu = getDefaultMenu(props.allMenus.home, window.location.pathname);
+    if (menu) {
+      recordCurrentMenu(menu);
+    }
+  }, []);
+
+  const renderMenu = (list: any[] = [], parent?: Object) => {
+    return list.map((item) => {
+      if (Array.isArray(item.children)) {
+        return (
+          <Menu.SubMenu
+            key={item.id}
+            title={isEnglish ? item.enName || item.label + (IS_DEV ? 'en' : '') : item.label}
+            popupOffset={[-12, 0]}
+          >
+            {renderMenu(item.children, { ...parent, ...item })}
+          </Menu.SubMenu>
+        );
+      }
+
+      return (
+        <Menu.Item key={item.id} data={{ ...item, parentMenu: parent }}>
+          {isEnglish ? item.enName || item.label + (IS_DEV ? 'en' : '') : item.label}
+        </Menu.Item>
+      );
+    });
+  };
+
+  const getAppDomain = (appid: string) => {
+    const appMenu = props.allMenus.app || [];
+    const appIndex = appMenu.findIndex((item: object) => item.appId == appid);
+    return appIndex == -1 ? '' : appMenu[appIndex].appDomain || appMenu[appIndex].defaultDomain;
+  };
+
+  const handleMenuSelect = (e) => {
+    const {
+      key,
+      item: {
+        props: { data: menuData },
+      },
+    } = e; // data字段是自定义的，从Menu组件那里传入
+
+    const useExtAppid = menuData.extAppId && menuData.extAppId !== menuData.appId;
+    const appDomain = useExtAppid ? getAppDomain(menuData.extAppId) : getAppDomain(menuData.appId);
+    const iframeUrl = encodeURIComponent(`${appDomain + menuData.path}?showWithoutMenu=true`);
+    const routePath = useExtAppid
+      ? `/tmsiframe?showAsIframe=true&path=${iframeUrl}`
+      : menuData.path;
+    const active = pathname === routePath;
+
+    recordCurrentMenu(menuData);
+
+    console.log(useExtAppid, 'useExtAppid');
+    if (useExtAppid) {
+      localStorage.setItem('tms-iframe-random', new Date().getTime().toString(26));
+      history.push(routePath);
+    } else {
+      !active && history.push(routePath);
+    }
+
+    props.callbackToAPPSystem &&
+      props.callbackToAPPSystem({ eventName: 'tms-click-menu', isSuccess: true, data: menuData });
+  };
+
+  const recordCurrentMenu = (menu: object) => {
+    // if (menu.id != current) {
+    //   setCurrent(menu.id);
+    // }
+
+    Tms.getStorage().setItem(tmsConfig.curMenuKey, JSON.stringify(menu));
+    showMenuName(menu);
+  };
+
+  const showMenuName = (menuData: object) => {
+    let parentName = '',
+      childName = '',
+      appName = '';
+    if (menuData.parentMenu) {
+      const parent = menuData.parentMenu;
+      parentName = isEnglish ? parent.enName || parent.name + (IS_DEV ? 'en' : '') : parent.name;
+    }
+    childName = isEnglish ? menuData.enName || menuData.name + (IS_DEV ? 'en' : '') : menuData.name;
+
+    const currentApp_str = TmsStorage.getItem(tmsConfig.curAppKey);
+    let currentApp = currentApp_str ? JSON.parse(currentApp_str) : '';
+    if (currentApp)
+      appName = isEnglish
+        ? currentApp.appEnName || currentApp.appName + (IS_DEV ? 'en' : '')
+        : currentApp.appName;
+
+    setTimeout(() => {
+      // 放在跳转页面后重置title，否则会被重置
+      Tms.updateDocumentTitle(
+        [childName, parentName, appName, 'ChatLabs'].filter((text) => !!text).join(' - '),
+      );
+    }, 300);
+  };
+
+  const getCurrenId: any = (list: any[]) => {
+    for (let i = 0; i < list.length; i++) {
+      let item = list[i];
+      if (item?.children?.length) {
+        let res = getCurrenId(item.children);
+        if (res) {
+          return res;
+        }
+      } else if (item.path === pathname) {
+        return item.id;
+      }
+    }
+  };
+
+  useEffect(() => {
+    console.log(pathname, 'history', props.allMenus.home, getCurrenId(props.allMenus.home));
+    setCurrent(getCurrenId(props.allMenus.home));
+  }, [pathname]);
+
+  return (
+    <ConfigProvider prefixCls="ant-tms">
+      <div style={{ width: '100%' }}>
+        <Menu
+          className="global-navigate-menu"
+          mode="horizontal"
+          selectedKeys={current ? [current] : []}
+          onClick={handleMenuSelect}
+        >
+          {renderMenu(props.allMenus.home)}
+        </Menu>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default NavigationBar;

package/src/layouts/Prompt/index.less

@@ -0,0 +1,6 @@
+.content {
+  min-height: 50px;
+  padding: 16px;
+  color: #3e3e3c;
+  font-size: 16px;
+}