@yeeyoon/library 3.2.3 → 3.2.7

package/lib/components/AvatarPackaged/index.jsx

@@ -0,0 +1,97 @@
+import { Avatar, Popover } from 'antd';
+import React from 'react';
+import PropTypes from 'prop-types';
+import InfoCard from '../InfoCard';
+import styles from './style.less';
+
+const defaultHeadUrl =
+	'https://pro-yeeyoon-fm.oss-cn-zhangjiakou.aliyuncs.com/oidc/user_avatar3.png';
+const defaultUserStyle = { border: '1px solid #fff' };
+
+const AvatarInfo = ({
+	icon = defaultHeadUrl,
+	name,
+	placement = 'bottomRight',
+	showName = false,
+	shape,
+	style,
+	showInfo = true, // 是否展示信息卡片
+	size = 30,
+	...rest
+}) => {
+	const CustomAvatar = (
+		<span>
+			<Avatar
+				size={size}
+				shape={shape}
+				className={styles['user-avatar-scale']}
+				src={icon}
+				style={{ ...defaultUserStyle, ...style }}
+			/>
+			{showName && (
+				<span className={styles['user-avatar-name']}>{name || '-'}</span>
+			)}
+		</span>
+	);
+
+	return showInfo ? (
+		<Popover
+			placement={placement}
+			content={
+				<InfoCard
+					baseMsg={{
+						icon,
+						name,
+						...rest,
+					}}
+					style={{ width: 334, height: 382 }} // 给定宽高 防止Popover第一次出现时闪跳
+				/>
+			}
+		>
+			{CustomAvatar}
+		</Popover>
+	) : (
+		CustomAvatar
+	);
+};
+
+// data: {name, id, phone, icon} 或 [{name, id, phone, icon}]
+const AvatarPackaged = ({ data, maxCount = 5, maxStyle, ...rest }) => {
+	return Array.isArray(data) ? (
+		<Avatar.Group
+			maxCount={maxCount}
+			maxStyle={
+				maxStyle || {
+					color: '#5E5873',
+					backgroundColor: '#FFF',
+					marginBottom: '5px',
+				}
+			}
+		>
+			{data.map((x, i) => (
+				<AvatarInfo key={i} {...rest} {...x} />
+			))}
+		</Avatar.Group>
+	) : data ? (
+		<AvatarInfo {...rest} {...data} />
+	) : null;
+};
+
+AvatarInfo.propTypes = {
+	icon: PropTypes.string,
+	name: PropTypes.string,
+	showName: PropTypes.bool,
+	placement: PropTypes.string,
+	shape: PropTypes.string,
+	size: PropTypes.number,
+	style: PropTypes.object,
+	showInfo: PropTypes.bool,
+};
+
+AvatarPackaged.propTypes = {
+	data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+	maxCount: PropTypes.number,
+	maxStyle: PropTypes.object,
+};
+
+export default AvatarPackaged;

package/lib/components/AvatarPackaged/style.less

@@ -0,0 +1,20 @@
+.user-avatar-scale {
+	&:hover {
+		transform: scale(1.2);
+	}
+}
+.user-avatar-name {
+	color: #6e6b7b;
+	margin-left: 7px;
+	&:hover {
+		color: @primary-color;
+	}
+}
+:global {
+	.ant-list:not(.ant-list-lg):not(.ant-list-sm) .ant-list-item {
+		padding: 12px 0px !important;
+	}
+	.ant-progress-text {
+		font-size: 0.7em;
+	}
+}

package/lib/components/InfoCard/index.jsx

@@ -7,7 +7,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { queryOidcUserCardData } from './service';
 
 function InfoCart(props) {
-	const { baseMsg } = props;
+	const { baseMsg, ...rest } = props;
 	const reg = /^(\d{3})\d*(\d{4})$/;
 	const [cardData, setCardData] = useState({});
 	const [chartData, setChartData] = useState({});
@@ -70,7 +70,7 @@ function InfoCart(props) {
 		}
 	};
 	return (
-		<div className={styles['info-cart-content']}>
+		<div className={styles['info-cart-content']} {...rest}>
 			<div className={styles['info-cart-base']}>
 				<Image
 					width="50px"
@@ -120,7 +120,7 @@ function InfoCart(props) {
 						type="monotone"
 						dataKey="贡献数据数"
 						stroke="#7367F0"
-						strokeWidth="3"
+						strokeWidth="2"
 						dot={false}
 					/>
 					<Tooltip cursor={false} />

package/lib/utils/utils.js

@@ -1,3 +1,6 @@
+import React from 'react';
+import UserAvatar from '../components/AvatarPackaged/';
+
 export function mergeTableColumnCommonConfig(config) {
 	return config.map((item, index) => {
 		let commonConfig = [{ align: 'left' }, { ellipsis: true }];
@@ -68,6 +71,27 @@ export function mergeTableColumnCommonConfig(config) {
 					...[{ width: 300 }, { ellipsis: false }],
 				];
 				break;
+			case 'user':
+				commonConfig = [
+					...commonConfig,
+					...[
+						{ width: 150 },
+						{
+							// eslint-disable-next-line react/display-name
+							render: (_, record) => {
+								const key = item.dataIndex;
+								let data;
+								if (key === 'creator') {
+									data = record.creator;
+								} else if (key === 'updater') {
+									data = record.updater;
+								}
+								return <UserAvatar data={data} showName={true} />;
+							},
+						},
+					],
+				];
+				break;
 		}
 		commonConfig.forEach((value) => {
 			item = { ...item, ...value };

package/package.json

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

package/src/global.css

@@ -4,7 +4,7 @@ html, body, #root {
 
 body {
   margin: 0;
-	background-color: #000 !important;
+	/* background-color: #000 !important; */
 }
 
 body * {

package/src/pages/index.js

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