@yeeyoon/library 3.6.4 → 3.6.5

package/lib/components/Header/components/NewVersion/index.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ls from 'local-storage';
+import PropTypes from 'prop-types';
+import styles from './styles.less';
+
+const NewVersion = (props) => {
+	const { onClose, data, toVersionCenter } = props;
+
+	const handleToVersionCenter = () => {
+		ls.set('Yyun-Version', data.version);
+		toVersionCenter();
+		onClose();
+	};
+
+	return (
+		<div className={styles.container}>
+			<img
+				alt="rocket"
+				className={styles.rocket}
+				src="https://prod-yeeyoon-oss.oss-cn-zhangjiakou.aliyuncs.com/newbie/version-rocket.png"
+			/>
+			<div className={styles.title}>{data.title}</div>
+			<div className={styles.mark}>{data.mark}</div>
+			<div className={styles.footer}>
+				更多功能更新，请前往
+				<a onClick={() => handleToVersionCenter()}>版本中心</a>
+				查看
+			</div>
+		</div>
+	);
+};
+
+NewVersion.propTypes = {
+	data: PropTypes.object,
+	onClose: PropTypes.func,
+	toVersionCenter: PropTypes.func,
+};
+
+export default NewVersion;

package/lib/components/Header/components/NewVersion/styles.less

@@ -0,0 +1,37 @@
+.container {
+	padding: 40px 125px;
+	text-align: center;
+	min-height: 440px;
+}
+
+.rocket {
+	width: 170px;
+	height: 170px;
+}
+
+.title {
+	margin-top: 32px;
+	font-weight: 500;
+	font-size: 15px;
+	line-height: 24px;
+	color: #4b4b4b;
+}
+
+.mark {
+	margin-top: 16px;
+	white-space: pre-line;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 21px;
+	text-align: center;
+	color: #6e6b7b;
+}
+
+.footer {
+	margin-top: 32px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 14px;
+	text-align: center;
+	color: #b9b9c3;
+}

package/lib/components/Header/index.jsx

@@ -2,7 +2,16 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import _xorBy from 'lodash/xorBy';
 import ls from 'local-storage';
-import { Menu, Dropdown, Tooltip, Avatar, Drawer, Modal, Divider } from 'antd';
+import {
+	Menu,
+	Dropdown,
+	Tooltip,
+	Avatar,
+	Drawer,
+	Modal,
+	Divider,
+	Badge,
+} from 'antd';
 import {
 	UserOutlined,
 	SettingOutlined,
@@ -11,6 +20,7 @@ import {
 // import Notification from '../Notification/recent';
 import ProductListMenu from './components/ProductListMenu/';
 import PlatformModal from './components/PlatformModal/';
+import { openVersionModal } from './utils';
 
 import {
 	IconTodo,
@@ -44,6 +54,7 @@ import LogoBpm from './assets/bpm.svg';
 import LogoWms from './assets/mms.svg';
 
 import styles from './index.less';
+import { getVersionData } from './utils';
 
 let currentProduct = [];
 let allProduct = [];
@@ -83,6 +94,7 @@ const Header = (props) => {
 	const [platformsModalShow, setPlatformsModalShow] = useState(false);
 	const [avatarProps, setAvatarProps] = useState({});
 	const [redirectUrl, setRedirectUrl] = useState('');
+	const [hasNewVersion, setHasNewVersion] = useState(false);
 
 	const menu = (
 		<Menu>
@@ -121,8 +133,20 @@ const Header = (props) => {
 		</Menu>
 	);
 
-	useEffect(() => {
+	useEffect(async () => {
 		getUserInfo();
+		const [hasNew, newData] = await getVersionData(productName);
+
+		setHasNewVersion(hasNew);
+		if (hasNew) {
+			openVersionModal({
+				centered: true,
+				width: 510,
+				data: newData,
+				setHasNewVersion,
+				toVersionCenter,
+			});
+		}
 	}, []);
 
 	useEffect(() => {
@@ -241,6 +265,20 @@ const Header = (props) => {
 		}
 	};
 
+	const toVersionCenter = () => {
+		setHasNewVersion(false);
+		let system = '';
+		switch (productName) {
+			case 'bpm':
+				system = 'bpm';
+				break;
+			case 'wms':
+				system = 'wms';
+				break;
+		}
+		window.location.href = `${HOST_OFFICIAL}/version?system=${system}&token=${token}`;
+	};
+
 	return (
 		<div className={styles['comp-header-wrapper']}>
 			<div className={styles['comp-header']}>
@@ -311,21 +349,15 @@ const Header = (props) => {
 						productName === 'profile') && (
 						<span
 							className={styles['comp-header__icon']}
-							onClick={() => {
-								let system = '';
-								switch (productName) {
-									case 'bpm':
-										system = 'bpm';
-										break;
-									case 'wms':
-										system = 'wms';
-										break;
-								}
-								window.location.href = `${HOST_OFFICIAL}/version?system=${system}&token=${token}`;
-							}}
+							onClick={() => toVersionCenter()}
 						>
-							<IconVersion style={IconStyle} />
-							版本中心
+							<Badge
+								className={styles['comp-header__badge']}
+								count={hasNewVersion ? 'new' : null}
+							>
+								<IconVersion style={IconStyle} />
+								版本中心
+							</Badge>
 						</span>
 					)}
 					{/* {systemUserInfo && (

package/lib/components/Header/index.less

@@ -20,7 +20,7 @@
 		&__logo__name {
 			font-size: 24px;
 			margin-left: 5px;
-			color: rgba(0, 0, 0, .85);
+			color: rgba(0, 0, 0, 0.85);
 		}
 
 		&__icon {
@@ -42,14 +42,14 @@
 				margin-right: 18px;
 			}
 			a {
-				color: rgba(0, 0, 0, .85);
+				color: rgba(0, 0, 0, 0.85);
 				&:hover {
 					color: #3ed09c;
 				}
 			}
 			:global {
 				.ant-divider-vertical {
-					border-color: rgba(0, 0, 0, .85);
+					border-color: rgba(0, 0, 0, 0.85);
 					height: 1em;
 					margin: 0 22px 0 12px;
 				}
@@ -58,5 +58,15 @@
 		&__slot {
 			margin-left: 25px;
 		}
+
+		&__badge {
+			:global {
+				.ant-badge-count {
+					color: #ff4d4f;
+					background: transparent;
+					box-shadow: none;
+				}
+			}
+		}
 	}
 }

package/lib/components/Header/utils.js

@@ -0,0 +1,56 @@
+/*
+ * @Author: Erlin
+ * @Date: 2022-06-24 11:33:21
+ * @LastEditors: Erlin
+ * @LastEditTime: 2022-06-24 13:37:54
+ * @Description:
+ */
+import React from 'react';
+import { Modal } from 'antd';
+import lodash from 'lodash';
+import ls from 'local-storage';
+import request from '.././../utils/request';
+import NewVersion from './components/NewVersion';
+
+export const openVersionModal = async (props) => {
+	const { width, data, setHasNewVersion, toVersionCenter, ...reset } = props;
+	const modal = Modal.warning({
+		title: null,
+		icon: null,
+		closable: true,
+		keyboard: false,
+		maskClosable: false,
+		width: width,
+		okButtonProps: { style: { display: 'none' } },
+		bodyStyle: { padding: 0 },
+		content: (
+			<NewVersion
+				modal={modal}
+				data={data}
+				toVersionCenter={toVersionCenter}
+				onClose={() => modal.destroy()}
+			/>
+		),
+		onCancel: () => {
+			setHasNewVersion(false);
+			ls.set('Yyun-Version', data.version);
+		},
+		...reset,
+	});
+};
+
+export const getVersionData = async (productName) => {
+	const systems = ['bpm', 'wms', 'bee'];
+	if (systems.indexOf(productName) > -1) {
+		const oldData = ls.get('Yyun-Version');
+		const res = await request(
+			'https://prod-yeeyoon-oss.oss-cn-zhangjiakou.aliyuncs.com/formily/bpm/officialweb/common/default/default/officialweb-officialweb@v0.0.1.json',
+			{ prefix: '' }
+		);
+		const items = lodash.find(res, (item) => item.key == productName);
+		const newData = items?.content?.[0] || {};
+		const hasNew = oldData !== newData?.version;
+		return [hasNew, newData];
+	}
+	return [false, {}];
+};

package/lib/components/TenantSelector/index.jsx

@@ -28,7 +28,7 @@ const TenantSelector = (props) => {
 			if (appId) {
 				tenants = tenants.filter((item) => {
 					const { applications } = item;
-					return applications.filter((item) => item.id === appId).length;
+					return applications?.filter((item) => item.id === appId).length;
 				});
 			}
 			if (!tenants.length) {

package/lib/config/env.js

@@ -1,4 +1,4 @@
-// const REACT_APP_ENV = REACT_APP_ENV || 'prod';
+// const REACT_APP_ENV = REACT_APP_ENV || 'dev';
 
 const envApi = {
 	// IAM

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yeeyoon/library",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "description": "宜云前端组件库和通用服务",
   "main": "index.js",
   "repository": {