@yeeyoon/library 2.2.1 → 2.2.5

package/lib/components/DefaultFooter/index.jsx

@@ -4,7 +4,7 @@ import { DefaultFooter } from '@ant-design/pro-layout';
 const CustomDefaultFooter = () => {
 	return (
 		<DefaultFooter
-			copyright={`${new Date().getFullYear()} 宜云信息`}
+			copyright={`${new Date().getFullYear()} 津ICP备20000674号-1`}
 			links={false}
 		/>
 	);

package/lib/components/Header/index.jsx

@@ -3,17 +3,16 @@ import PropTypes from 'prop-types';
 import _xorBy from 'lodash/xorBy';
 import { Menu, Dropdown, Tooltip, Avatar, Drawer, Modal, Divider } from 'antd';
 import {
-	BarsOutlined,
-	FundProjectionScreenOutlined,
 	UserOutlined,
 	SettingOutlined,
 	PoweroffOutlined,
-	MenuOutlined,
 } from '@ant-design/icons';
 import Notification from '../Notification/recent';
 import ProductListMenu from './components/ProductListMenu/';
 import PlatformModal from './components/PlatformModal/';
 
+import { IconTodo, IconConsole, IconMore } from '../Icons/';
+
 import {
 	fetchSystemToken,
 	fetchUserInfo,
@@ -40,6 +39,12 @@ let allProduct = [];
 let leftProduct = [];
 
 const CY_PLATFORM_ID = 'f12a71b6063611ecb0c00c42a1ff8370';
+const IconStyle = {
+	fontSize: '20px',
+	color: 'rgba(0, 0, 0, .85)',
+	marginRight: '8px',
+	display: 'inline-block',
+};
 
 const Header = (props) => {
 	const {
@@ -189,8 +194,8 @@ const Header = (props) => {
 			<div className={styles['comp-header']}>
 				<div className={styles['comp-header__left-content']}>
 					<Tooltip title="更多产品">
-						<MenuOutlined
-							style={{ fontSize: '20px', cursor: 'pointer' }}
+						<IconMore
+							style={{ fontSize: '22px', cursor: 'pointer' }}
 							onClick={() => {
 								setProductListMenuDrawerShow(true);
 							}}
@@ -224,29 +229,25 @@ const Header = (props) => {
 					</span>
 				</div>
 				<div className={styles['comp-header__right-content']}>
-					{/* <Tooltip title="工作台" className={styles['comp-header__icon']}> */}
-					<span className={styles['comp-header__icon']}>
-						<FundProjectionScreenOutlined
-							style={{ fontSize: '20px', color: 'rgba(0, 0, 0, .85)' }}
-							onClick={() => {
-								window.location.href = `${HOST_PROFILE_DASH_BOARD}?token=${token}`;
-							}}
-						/>
-						&nbsp;工作台
+					<span
+						className={styles['comp-header__icon']}
+						onClick={() => {
+							window.location.href = `${HOST_PROFILE_DASH_BOARD}?token=${token}`;
+						}}
+					>
+						<IconConsole style={IconStyle} />
+						工作台
 					</span>
-					{/* </Tooltip> */}
-					{/* <Tooltip title="任务中心" className={styles['comp-header__icon']}> */}
-					<span className={styles['comp-header__icon']}>
-						<BarsOutlined
-							style={{ fontSize: '20px', color: 'rgba(0, 0, 0, .85)' }}
-							onClick={() => {
-								setRedirectUrl(HOST_PROFILE_TASK);
-								setPlatformsModalShow(true);
-							}}
-						/>
-						&nbsp;任务中心
+					<span
+						className={styles['comp-header__icon']}
+						onClick={() => {
+							setRedirectUrl(HOST_PROFILE_TASK);
+							setPlatformsModalShow(true);
+						}}
+					>
+						<IconTodo style={IconStyle} />
+						任务中心
 					</span>
-					{/* </Tooltip> */}
 					{systemUserInfo && (
 						<Notification
 							customStyles={{

package/lib/components/Header/index.less

@@ -2,11 +2,12 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: 62px;
+	height: 56px;
 	padding: 0 18px;
-	line-height: 62px;
+	line-height: 56px;
 	background-color: #fff;
-	border-radius: 5px;
+	border-radius: 6px;
+	box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
 	&__logo {
 		margin-left: 10px;
 		cursor: pointer;
@@ -20,7 +21,7 @@
 	}
 
 	&__icon {
-		margin-right: 20px;
+		margin-right: 30px;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
@@ -35,7 +36,7 @@
 	}
 	&__right-content {
 		> div {
-			margin-right: 20px;
+			margin-right: 18px;
 		}
 		a {
 			color: rgba(0, 0, 0, .85);
@@ -47,7 +48,7 @@
 			.ant-divider-vertical {
 				border-color: rgba(0, 0, 0, .85);
 				height: 1em;
-				margin: 0 10px 0 0;
+				margin: 0 22px 0 12px;
 			}
 		}
 	}

package/lib/components/Icons/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const Icons = createFromIconfontCN({
+	scriptUrl: '//at.alicdn.com/t/font_2716486_dpnjwgvqpfn.js',
+});
+
+const IconBell = (args) => {
+	return <Icons type="icon-bell" {...args} />;
+};
+const IconTodo = (args) => {
+	return <Icons type="icon-todo" {...args} />;
+};
+const IconConsole = (args) => {
+	return <Icons type="icon-console" {...args} />;
+};
+const IconMore = (args) => {
+	return <Icons type="icon-more" {...args} />;
+};
+
+export { IconBell, IconTodo, IconConsole, IconMore };

package/lib/components/ModifyPassword/index.jsx

@@ -10,14 +10,16 @@ import Captcha from './Captcha';
 import styles from './universal.less';
 
 const Forget = (props) => {
-	const { reqCb } = props;
+	const { reqCb, hideTitle = false } = props;
 	const [step, setStep] = useState('captcha');
 	const [mobile, setMobile] = useState('');
 
 	return (
 		<>
 			<div className={styles['universal-login']}>
-				<h1 className={styles['universal-login__title']}>重置密码</h1>
+				{!hideTitle && (
+					<h1 className={styles['universal-login__title']}>重置密码</h1>
+				)}
 				<Card bordered={false} className={styles['universal-login__card']}>
 					<ProForm
 						submitter={false}
@@ -103,6 +105,7 @@ const Forget = (props) => {
 
 Forget.propTypes = {
 	reqCb: PropTypes.func.required,
+	hideTitle: PropTypes.bool,
 };
 
 export default Forget;

package/lib/components/Notification/index.less

@@ -10,7 +10,7 @@
 		align-items: center;
 	}
 	&__title {
-		margin-left: 3px;
+		margin-left: 10px;
 		color: rgba(0, 0, 0, 0.85);
 	}
 	&__list-container {

package/lib/components/Notification/recent.jsx

@@ -4,12 +4,12 @@ import moment from 'moment';
 import qs from 'qs';
 
 import { Badge, Button, notification } from 'antd';
-import { BellOutlined } from '@ant-design/icons';
 import ProList from '@ant-design/pro-list';
 
 import { io } from 'socket.io-client';
 import { getWsApiHost, getEnvVar, getMessageCenterRedirectUrl } from './env';
 import { queryLatestMessageList } from './service';
+import { IconBell } from '../Icons/';
 
 import styles from './index.less';
 
@@ -122,7 +122,7 @@ const RecentNotification = (props) => {
 				{/* <Tooltip title="消息中心"> */}
 				<div className={styles['notification-container__badge']}>
 					<Badge count={messageCount}>
-						<BellOutlined style={{ fontSize: '20px' }} />
+						<IconBell style={{ fontSize: '20px' }} />
 					</Badge>
 					{showLabel && (
 						<span className={styles['notification-container__title']}>

package/lib/components/TenantSelector/index.jsx

@@ -25,8 +25,9 @@ const TenantSelector = (props) => {
 
 	return (
 		<Select
+			showSearch
+			optionFilterProp="children"
 			bordered={false}
-			// size="large"
 			value={currentTenantId}
 			style={{ width: '200px' }}
 			onChange={(value) => {

package/lib/styles/design-system-overwrite.less

@@ -1,8 +1,52 @@
 @import '~antd/lib/style/themes/default.less';
 @import '~antd/dist/antd.less';
 
+:global {
+  .ant-pro-basicLayout {
+    .ant-layout-header {
+      &:first-child {
+        display: none;
+      }
+      left: 24px !important;
+      right: 24px !important;
+      width: auto !important;
+    }
+    .ant-layout-sider {
+      left: 24px !important;
+      top: 80px !important;
+      padding-top: 0 !important;
+    }
+    .ant-pro-basicLayout-content {
+      margin: 80px 24px 0 48px !important;
+    }
+    .ant-layout-footer {
+      background-color: @modal-header-bg !important;
+			.ant-pro-global-footer {
+				margin-left: 24px;
+				text-align: left;
+			}
+    }
+  }
+}
+
 body {
+	background-color: @modal-header-bg !important;
 	// :global {
+	// Scrollbar
+	::-webkit-scrollbar {
+		width: @border-radius-base;
+		height: @border-radius-base;
+	}
+	::-webkit-scrollbar-thumb {
+		background: @primary-color;
+		border-radius: @border-radius-base;
+	}
+	::-webkit-scrollbar-track {
+		border-radius: @border-radius-base;
+	}
+	::-webkit-scrollbar-corner {
+		background: transparent;
+	}
 	// Button
 	.ant-btn {
 		padding: 0 22px;
@@ -23,7 +67,7 @@ body {
 			background-color: fade(@primary-color, 65%);
 		}
 		&.gradient {
-			background: linear-gradient(45deg, @primary-color 0%, @primary-color-gradient 100%);
+			background: linear-gradient(45deg, #7367f0 0%, #9e95f5 100%);
 			border: none;
 		}
 	}
@@ -254,6 +298,9 @@ body {
 		line-height: 18px;
 		border: none;
 		border-radius: 4px;
+		&.pill {
+			border-radius: 17px;
+		}
 		&.secondary {
 			color: @default-color;
 		}
@@ -664,17 +711,24 @@ body {
 			color: @white !important;
 		}
 		&:hover {
-			background-color: #f8f8f8;
+			background-color: @modal-header-bg;
 		}
 	}
 	.ant-menu-light .ant-menu-item:hover {
 		color: @font-color;
 	}
+	.ant-menu-submenu-selected {
+		.ant-menu-submenu-title {
+			background-color: @modal-header-bg;
+			&:hover {
+				.ant-menu-submenu-arrow {
+					color: @font-paragraph-color;
+				}
+			}
+		}
+	}
 	.ant-menu-submenu-title {
-		// height: auto !important;
-		// line-height: normal !important;
-		color: @placeholder-color !important;
-		// font-size: @font-paragraph-small;
+		color: @font-color !important;
 		&:active {
 			background: transparent;
 		}
@@ -687,7 +741,7 @@ body {
 	}
 	.ant-menu-item-selected {
 		color: @white;
-		background: linear-gradient(46.62deg, @primary-color 0%, @primary-color-gradient 93.64%);
+		background: linear-gradient(46.62deg, #7367f0 0%, #9e95f5 93.64%);
 		&:hover {
 			color: @white !important;
 		}
@@ -830,7 +884,7 @@ body {
 	.ant-list-item {
 		color: @font-paragraph-color;
 		&:hover {
-			background-color: #f8f8f8;
+			background-color: @modal-header-bg;
 		}
 		p {
 			color: @placeholder-color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yeeyoon/library",
-  "version": "2.2.1",
+  "version": "2.2.5",
   "description": "宜云前端组件库和通用服务",
   "main": "index.js",
   "repository": {
@@ -20,6 +20,7 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^6.26.0",
     "@ant-design/pro-list": "^1.12.0",
     "antd": "^4.10.0",
     "dva": "^2.6.0-beta.6",

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,22 +1,24 @@
 import React from 'react';
 import Header from '../../lib/components/Header/';
 import TenantSelector from '../../lib/components/TenantSelector/';
+import CustomDefaultFooter from '../../lib/components/DefaultFooter/';
 
 // eslint-disable-next-line react/display-name
 export default function () {
 	return (
 		<>
-			<Header
+			{/* <Header
 				productName="profile"
 				tenantId="053a033a063711ecb0c00c42a1ff8370"
 				token="ZmI1YzU4NzEyOTdlNDM2MTg2YjI0N2IyZGQzOGI3NDg1NDE2MzI2MjU4NjMzNzY="
 				avatar="https://demo-yeeyoon-fm.oss-cn-zhangjiakou.aliyuncs.com/userCenter/userAvatar/user_avatar2.png"
 				userName="王甍"
-			/>
-			{/* <TenantSelector
+			/> */}
+			<TenantSelector
 				tenantId="14bfb5d71d1011eca9820c42a1f6bf88"
 				tenantIdChangeCb={(id) => console.log(id)}
-			/> */}
+			/>
+			{/* <CustomDefaultFooter /> */}
 		</>
 	);
 }