@yeeyoon/library 3.6.3 → 3.6.6

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,44 @@
+.container {
+	padding: 32px 50px 24px;
+	text-align: center;
+}
+
+.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: left;
+	color: #6e6b7b;
+}
+
+.footer {
+	margin-top: 56px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 14px;
+	text-align: center;
+	color: #b9b9c3;
+}
+
+.modal {
+	:global {
+		.ant-modal-content {
+			border-radius: 6px;
+		}
+	}
+}

package/lib/components/Header/index.jsx

@@ -11,6 +11,7 @@ import {
 // import Notification from '../Notification/recent';
 import ProductListMenu from './components/ProductListMenu/';
 import PlatformModal from './components/PlatformModal/';
+import { openVersionModal } from './utils';
 
 import {
 	IconTodo,
@@ -18,6 +19,7 @@ import {
 	IconMore,
 	IconQunZuGuanLi,
 	IconVersion,
+	IconNew,
 } from '../Icons/';
 
 import {
@@ -44,6 +46,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 +86,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 +125,17 @@ const Header = (props) => {
 		</Menu>
 	);
 
-	useEffect(() => {
+	useEffect(async () => {
 		getUserInfo();
+		const [hasNew, newData] = await getVersionData(productName);
+		setHasNewVersion(hasNew);
+		if (hasNew) {
+			openVersionModal({
+				data: newData,
+				setHasNewVersion,
+				toVersionCenter,
+			});
+		}
 	}, []);
 
 	useEffect(() => {
@@ -241,6 +254,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 +338,17 @@ 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} />
-							版本中心
+							<div className={styles['comp-header__badge']}>
+								版本中心
+								{hasNewVersion && (
+									<div className={styles['comp-header__new']}>
+										<IconNew />
+									</div>
+								)}
+							</div>
 						</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,17 @@
 		&__slot {
 			margin-left: 25px;
 		}
+
+		&__badge {
+			position: relative;
+		}
+
+		&__new {
+			width: 21px;
+			height: 10.5px;
+			position: absolute;
+			right: -21px;
+			top: -6px;
+		}
 	}
 }

package/lib/components/Header/utils.js

@@ -0,0 +1,59 @@
+/*
+ * @Author: Erlin
+ * @Date: 2022-06-24 11:33:21
+ * @LastEditors: Erlin
+ * @LastEditTime: 2022-06-24 17:34:39
+ * @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';
+import styles from './components/NewVersion/styles.less';
+
+export const openVersionModal = async (props) => {
+	const { data, setHasNewVersion, toVersionCenter, ...reset } = props;
+	const modal = Modal.warning({
+		centered: true,
+		width: 400,
+		title: null,
+		icon: null,
+		closable: true,
+		keyboard: false,
+		maskClosable: false,
+		okButtonProps: { style: { display: 'none' } },
+		bodyStyle: { padding: 0 },
+		className: styles.modal,
+		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/newbie/version-center.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/Icons/index.jsx

@@ -38,6 +38,22 @@ const IconQunZuGuanLi = (args) => {
 const IconVersion = (args) => {
 	return <Icons type="icon-tag" {...args} />;
 };
+const IconNew = () => {
+	return (
+		<svg
+			width="21"
+			height="11"
+			viewBox="0 0 21 11"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M19.0908 0.25H1.90908C0.859068 0.25 0 1.10914 0 2.15912V8.8409C0 9.89091 0.859068 10.75 1.90908 10.75H19.0908C20.1409 10.75 21 9.89091 21 8.8409V2.15912C21 1.10914 20.1409 0.25 19.0908 0.25ZM6.68181 7.40909C6.68181 7.60941 6.54817 7.79092 6.35726 7.85789C6.30969 7.87704 6.25243 7.88641 6.20453 7.88641C6.06152 7.88641 5.9182 7.80999 5.82271 7.68609L3.81817 5.03247V7.40913C3.81817 7.66705 3.60814 7.88645 3.34089 7.88645C3.07363 7.88645 2.86365 7.66705 2.86365 7.40913V3.61004C2.86365 3.40979 2.99729 3.22829 3.1882 3.16124C3.38882 3.09457 3.59881 3.16124 3.72275 3.33312C4.39094 4.21459 5.0591 5.09614 5.72729 5.97733V3.61004C5.72729 3.35249 5.93728 3.14217 6.20457 3.14217C6.47186 3.14217 6.68185 3.35249 6.68185 3.61004L6.68181 7.40909ZM10.0227 5.0228C10.29 5.0228 10.5 5.23275 10.5 5.50005C10.5 5.76734 10.29 5.97729 10.0227 5.97729H8.5909V6.93185H10.0227C10.29 6.93185 10.5 7.14187 10.5 7.40913C10.5 7.67642 10.29 7.88645 10.0227 7.88645H8.11362C7.84636 7.88645 7.63634 7.67642 7.63634 7.40913V3.59096C7.63634 3.32371 7.84633 3.11372 8.11362 3.11372H10.0227C10.29 3.11372 10.5 3.32367 10.5 3.59096C10.5 3.85825 10.29 4.06824 10.0227 4.06824H8.5909V5.02284L10.0227 5.0228ZM17.9836 3.7152C17.5126 4.96243 17.0417 6.20971 16.5709 7.45702C16.5379 7.54689 16.4781 7.62443 16.3996 7.67909C16.321 7.73374 16.2275 7.76286 16.1318 7.76247C15.9409 7.76247 15.7597 7.63823 15.6927 7.45702C15.3682 6.59796 15.0436 5.73882 14.7191 4.87945C14.3945 5.73885 14.07 6.59796 13.7455 7.45702C13.6118 7.81974 13.0009 7.81974 12.8673 7.45702C12.3965 6.20971 11.9256 4.96243 11.4545 3.7152C11.3688 3.47639 11.4833 3.2091 11.7315 3.11368C11.9797 3.01823 12.247 3.14213 12.3327 3.39031C12.6572 4.24971 12.9818 5.10881 13.3064 5.96792C13.6309 5.10873 13.9555 4.24953 14.28 3.39031C14.4136 3.0276 15.0245 3.0276 15.1581 3.39031C15.4827 4.24971 15.8073 5.10881 16.1318 5.96792C16.4563 5.10881 16.7809 4.24971 17.1054 3.39031C17.1915 3.14213 17.4681 3.0276 17.7069 3.11368C17.9551 3.19973 18.0791 3.46702 17.9836 3.7152Z"
+				fill="#EA5455"
+			/>
+		</svg>
+	);
+};
 
 export {
 	IconBell,
@@ -49,4 +65,5 @@ export {
 	IconTuijianchanpin,
 	IconQunZuGuanLi,
 	IconVersion,
+	IconNew,
 };

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