@yeeyoon/library 1.7.9 → 1.8.3

package/lib/components/Header/assets/bpm.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1631872777872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3042" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M621.4144 214.528a351.9488 351.9488 0 0 0-288.7168-98.304h-0.256C170.752 135.7824 40.96 268.8 22.272 433.5616l49.5616 5.7856L0 628.5312l49.408-7.8848c43.0592 101.0176 130.3552 177.92 236.2368 206.1824 23.6032 8.0384 48.8448 12.288 74.6496 12.288h421.632c135.1168 0 244.5312-112.7424 242.0224-251.1872v-0.1024a240.2304 240.2304 0 0 0-45.5168-136.704 236.6976 236.6976 0 0 0-39.4752-43.52 248.6784 248.6784 0 0 0-163.4816-61.3376v49.4592l-96.8192-176.128-21.1968 36.2496a384.1024 384.1024 0 0 0-35.6864-41.0112l-0.2048-0.1536-0.1536-0.2048zM152.576 604.0064l43.9808-7.0144-124.7744-157.696 49.6128 5.8368C134.7584 327.168 228.352 231.3216 344.064 217.2416a253.2864 253.2864 0 0 1 208.0256 70.4512c19.456 19.456 35.9424 41.3696 48.5376 65.28l-23.7568 40.6016 198.6048 3.072V448c37.2736 0 72.192 13.824 98.7136 37.0688l0.256 0.256 0.3072 0.2048c8.4992 7.2704 16.1792 15.7184 22.8864 25.2416l0.2048 0.256 0.1536 0.256c6.6048 9.1136 11.776 18.1248 15.36 27.136l0.2048 0.4096 0.1536 0.4096c6.4 15.1552 10.0864 32.1024 10.4448 50.6368 1.4848 81.2544-62.72 147.5072-142.2336 147.5072H360.2944c-15.4624 0-30.464-2.6112-44.2368-7.424l-1.8432-0.6656-1.8944-0.512a258.3552 258.3552 0 0 1-159.6928-124.7232z" fill="#3ED09C" p-id="3043"></path></svg>

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Card, Button, message, Image, Row, Col } from 'antd';
 
@@ -6,8 +6,7 @@ import { fetchSystemToken } from '../../service';
 
 const PlatformModal = (props) => {
 	const { platforms, redirectUrl } = props;
-	const [plat, setPlat] = useState({});
-	const enterProductDetail = (token, userInfo) => {
+	const enterProductDetail = (token, userInfo, plat) => {
 		if (redirectUrl) {
 			window.open(`${redirectUrl}?token=${token}&userId=${userInfo.userId}`);
 		} else if (plat.forwardDomainName) {
@@ -22,12 +21,11 @@ const PlatformModal = (props) => {
 		}
 	};
 	const getSystemToken = async (item) => {
-		setPlat(item);
 		const resp = await fetchSystemToken({ platformId: item.id });
 		const { success, data } = resp;
 		if (success) {
 			const { token, ...rest } = data;
-			enterProductDetail(token, rest);
+			enterProductDetail(token, rest, item);
 		}
 	};
 	return (

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

@@ -1,21 +1,54 @@
-import React, { useState } from 'react';
-import { Menu, Image } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Menu, Image, Modal } from 'antd';
 import { AppstoreOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
+import PlatformModal from '../PlatformModal';
+import { getCollabRedirectUrl } from '../../env';
+import ls from 'local-storage';
+import styles from './index.less';
 
 const { SubMenu } = Menu;
 
 const ProductListMenu = (props) => {
 	const { productList, recommendProductList } = props;
 	const [openKeys] = useState(['sub1', 'sub2']);
+	const [platModal, setPlatModal] = useState(false);
+	const [platforms, setPlatforms] = useState([]);
+	const [newProductList, setNewProductList] = useState([]);
+	useEffect(() => {
+		setNewProductList([
+			{
+				code: 200000729,
+				description: '团队协作，任务分配一站式敏捷开发',
+				domainName: null,
+				icon:
+					'https://demo-yeeyoon-fm.oss-cn-zhangjiakou.aliyuncs.com/userCenter/productLogo/yiyunxietong.png',
+				id: '9f4f6e1a063711ecb0c00c42a1ff8370',
+				isClose: 0,
+				level: 1,
+				name: '宜云协同',
+				parentId: null,
+				tenants: null,
+			},
+			...productList,
+		]);
+	}, [productList]);
+	const enterDetail = (item) => {
+		if (item.code == 200000729) {
+			window.open(`${getCollabRedirectUrl()}?token=${ls.get('X-Auth-Token')}`);
+		} else {
+			setPlatModal(true);
+			setPlatforms(item.platforms);
+		}
+	};
 	return (
-		<>
+		<div className={styles['product-menu']}>
 			<Menu mode="inline" openKeys={openKeys} style={{ width: 256 }}>
 				<SubMenu key="sub1" icon={<AppstoreOutlined />} title="我的产品">
-					{productList.length ? (
-						productList.map((item, index) => {
+					{newProductList.length ? (
+						newProductList.map((item) => {
 							return (
-								<Menu.Item key={index}>
+								<Menu.Item key={item.code} onClick={() => enterDetail(item)}>
 									<div style={{ display: 'flex', alignItems: 'center' }}>
 										<Image
 											src={item.icon}
@@ -37,9 +70,9 @@ const ProductListMenu = (props) => {
 				</SubMenu>
 				<SubMenu key="sub2" icon={<AppstoreOutlined />} title="推荐产品">
 					{recommendProductList.length ? (
-						recommendProductList.map((item, index) => {
+						recommendProductList.map((item) => {
 							return (
-								<Menu.Item key={index}>
+								<Menu.Item key={item.code}>
 									<div style={{ display: 'flex', alignItems: 'center' }}>
 										<Image
 											src={item.icon}
@@ -60,7 +93,15 @@ const ProductListMenu = (props) => {
 					)}
 				</SubMenu>
 			</Menu>
-		</>
+			<Modal
+				visible={platModal}
+				title="请选择平台"
+				footer={null}
+				onCancel={() => setPlatModal(false)}
+			>
+				<PlatformModal platforms={platforms} />
+			</Modal>
+		</div>
 	);
 };
 

package/lib/components/Header/components/ProductListMenu/index.less

@@ -0,0 +1,7 @@
+.product-menu {
+	:global {
+		.ant-menu-submenu-arrow {
+			display: none;
+		}
+	}
+}

package/lib/components/Header/env.js

@@ -87,3 +87,17 @@ export function getOfficialSiteRedirectUrl(sysName) {
 	}
 	window.location.href = url;
 }
+
+export function getCollabRedirectUrl() {
+	switch (host) {
+		case 'localhost:8003':
+		case 'localhost:8000':
+		case 'testing-profile.yeeyoon.com':
+			return 'https://testing-collab.yeeyoon.com';
+		case 'staging-profile.yeeyoon.com':
+			return 'https://staging-collab.yeeyoon.com';
+		case 'profile.yeeyoon.com':
+		default:
+			return 'https://collab.yeeyoon.com';
+	}
+}

package/lib/components/Header/index.jsx

@@ -14,7 +14,12 @@ import Notification from '../Notification/recent';
 import ProductListMenu from './components/ProductListMenu/';
 import PlatformModal from './components/PlatformModal/';
 
-import { fetchUserInfo, fetchProductList, logout } from './service';
+import {
+	fetchSystemToken,
+	fetchUserInfo,
+	fetchProductList,
+	logout,
+} from './service';
 import {
 	getProfileRedirectUrl,
 	getIamRedirectUrl,
@@ -23,6 +28,7 @@ import {
 
 import LogoProfile from './assets/profile.svg';
 import LogoCollab from './assets/collab.svg';
+import LogoBpm from './assets/bpm.svg';
 
 import styles from './index.less';
 
@@ -34,6 +40,7 @@ const Header = (props) => {
 	const { token, tenantId = '', productName = 'profile' } = props;
 	const [platforms, setPlatforms] = useState([]);
 	const [userInfo, setUserInfo] = useState(null);
+	const [systemUserInfo, setSystemUserInfo] = useState(null);
 	const [tenants, setTenants] = useState([]);
 	const [userId, setUserId] = useState([]);
 	const [productListMenuDrawerShow, setProductListMenuDrawerShow] =
@@ -52,7 +59,7 @@ const Header = (props) => {
 					)}?token=${token}`;
 				}}
 			>
-				个人资料
+				个人中心
 			</Menu.Item>
 			<Menu.Item
 				icon={<SettingOutlined />}
@@ -70,12 +77,13 @@ const Header = (props) => {
 					doLogout(userId);
 				}}
 			>
-				登出
+				退出登录
 			</Menu.Item>
 		</Menu>
 	);
 
 	useEffect(() => {
+		getCySystemToken();
 		getUserInfo();
 	}, []);
 
@@ -84,8 +92,10 @@ const Header = (props) => {
 			const tId = tenantId === '' ? tenants[0].id : tenantId;
 			return item.id === tId;
 		});
-		currentProduct = tenant.applications;
-		leftProduct = _xorBy(allProduct, currentProduct, 'id');
+		if (tenant.length) {
+			currentProduct = tenant[0].applications;
+			leftProduct = _xorBy(allProduct, currentProduct, 'id');
+		}
 	}, [tenantId]);
 
 	const backToIam = () => {
@@ -94,6 +104,17 @@ const Header = (props) => {
 		}`;
 	};
 
+	const getCySystemToken = async () => {
+		const resp = await fetchSystemToken({
+			platformId: 'f12a71b6063611ecb0c00c42a1ff8370',
+		});
+		const { success, data } = resp;
+		if (success) {
+			const { token, userId } = data;
+			setSystemUserInfo({ token, userId });
+		}
+	};
+
 	const getUserInfo = async () => {
 		const resp = await fetchUserInfo();
 		const { success, data } = resp;
@@ -110,7 +131,7 @@ const Header = (props) => {
 			getProductList(id);
 		} else {
 			setTimeout(() => {
-				backToIam();
+				// backToIam();
 			}, 4500);
 		}
 	};
@@ -143,6 +164,11 @@ const Header = (props) => {
 					logo: LogoCollab,
 					name: '宜云协同',
 				};
+			case 'bpm':
+				return {
+					logo: LogoBpm,
+					name: '智慧项目',
+				};
 		}
 	};
 
@@ -150,12 +176,14 @@ const Header = (props) => {
 		<>
 			<div className={styles['comp-header']}>
 				<div className={styles['comp-header__left-content']}>
-					<MoreOutlined
-						style={{ fontSize: '24px', cursor: 'pointer' }}
-						onClick={() => {
-							setProductListMenuDrawerShow(true);
-						}}
-					/>
+					<Tooltip title="更多产品">
+						<MoreOutlined
+							style={{ fontSize: '24px', cursor: 'pointer' }}
+							onClick={() => {
+								setProductListMenuDrawerShow(true);
+							}}
+						/>
+					</Tooltip>
 					<img
 						src={getSysBrandConfig().logo}
 						className={styles['comp-header__logo']}
@@ -189,13 +217,16 @@ const Header = (props) => {
 							}}
 						/>
 					</Tooltip>
-					<Notification
-						showLabel={false}
-						customStyles={{
-							icon: { height: '62px', display: 'flex' },
-							list: { top: '44px' },
-						}}
-					/>
+					{systemUserInfo && (
+						<Notification
+							showLabel={false}
+							customStyles={{
+								icon: { height: '62px', display: 'flex' },
+								list: { top: '44px' },
+							}}
+							userInfo={systemUserInfo}
+						/>
+					)}
 					<Tooltip title="控制台" className={styles['comp-header__icon']}>
 						<FundProjectionScreenOutlined
 							style={{ fontSize: '20px', color: 'rgba(0, 0, 0, .85)' }}

package/lib/components/Notification/recent.jsx

@@ -22,16 +22,19 @@ let messageList = [];
 let initTotalMsgCount = 0;
 
 const RecentNotification = (props) => {
-	const { showLabel = true, customStyles = {} } = props;
+	const { showLabel = true, customStyles = {}, userInfo = {} } = props;
 	const [messageCount, setMessageCount] = useState(0);
 	const [msgList, setMsgList] = useState([]);
 	const [msgListShow, setMsgListShow] = useState(false);
 
 	useEffect(async () => {
-		const response = await queryLatestMessageList({
-			current_page: 1,
-			each_page: 5,
-		});
+		const response = await queryLatestMessageList(
+			{
+				current_page: 1,
+				each_page: 5,
+			},
+			userInfo
+		);
 		const { data, total_data } = response;
 		messageList = data || [];
 		setMsgList([...messageList]);
@@ -176,6 +179,7 @@ const RecentNotification = (props) => {
 RecentNotification.propTypes = {
 	showLabel: PropTypes.bool,
 	customStyles: PropTypes.object,
+	userInfo: PropTypes.object,
 };
 
 export default RecentNotification;

package/lib/components/Notification/service.js

@@ -1,9 +1,17 @@
 import request from '../../utils/request';
 import { getApiHost } from './env';
 
-export async function queryLatestMessageList(params) {
-	return request('/v1/notification', {
+export async function queryLatestMessageList(params, userInfo) {
+	let data = {
 		prefix: getApiHost(),
 		params,
-	});
+	};
+	if (userInfo) {
+		const { token, userId } = userInfo;
+		data.headers = {
+			'X-Auth-Token': token,
+			'X-Auth-Id': userId,
+		};
+	}
+	return request('/v1/notification', data);
 }

package/package.json

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

package/src/pages/index.js

@@ -1,7 +1,14 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Header from '../../lib/components/Header/';
 
 // eslint-disable-next-line react/display-name
 export default function () {
-	return <Header productName="collab" />;
+	const [tenantId, setTenantId] = useState('');
+	useEffect(() => {
+		setTimeout(() => {
+			setTenantId('053a033a063711ecb0c00c42a1ff8370');
+			// setTenantId('f12a71b6063611ecb0c00c42a1ff8370');
+		}, 3000);
+	}, []);
+	return <Header productName="bpm" tenantId={tenantId} />;
 }