fix: 消息提醒他弹框新增收缩按钮

src/components/MessageReminder/Simple/index.jsx

@@ -12,9 +12,15 @@ import styles from './index.less';
 import { CHANNEL_ID } from '@/utils/constants';
 
 const Horn = props => {
-  const { count, toggle, animationClass } = props;
+  const { count, toggle, animationClass, stowClass, onStow } = props;
   return (
-    <div className={classNames(styles.horn, styles[animationClass])} onClick={toggle}>
+    <div
+      className={classNames(styles.horn, styles[animationClass], styles[stowClass])}
+      onClick={toggle}
+    >
+      <span className={styles['horn--btn']} onClick={e => onStow(e)}>
+        {stowClass ? '<' : '>'}
+      </span>
       <Badge count={count}>
         <div className={styles['horn--num']}>消息提醒</div>
       </Badge>
@@ -23,7 +29,17 @@ const Horn = props => {
 };
 
 const Message = props => {
-  const { toggle, animationClass, messageData, openComplex, onMark, loading, viewDetail } = props;
+  const {
+    toggle,
+    animationClass,
+    messageData,
+    openComplex,
+    onMark,
+    loading,
+    viewDetail,
+    onStow,
+    stowClass,
+  } = props;
 
   const ReminderItem = args => {
     const { item } = args;
@@ -102,6 +118,7 @@ const Simple = props => {
   const [count, setCount] = useState(0);
   const [hornClass, setHornClass] = useState('');
   const [messageClass, setMessageClass] = useState('');
+  const [stowClass, setStowClass] = useState('');
 
   const [messageData, setMessageData] = useState([]);
 
@@ -166,6 +183,16 @@ const Simple = props => {
     toggle();
   };
 
+  const onStow = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (stowClass) {
+      setStowClass('');
+    } else {
+      setStowClass('stow');
+    }
+  };
+
   // 标记已读信息
   const onMark = idsList => {
     if (!idsList.length) {
@@ -204,8 +231,10 @@ const Simple = props => {
 
   const hornProps = {
     animationClass: hornClass,
+    stowClass,
     toggle,
     count,
+    onStow,
   };
 
   const messageProps = {

src/components/MessageReminder/Simple/index.less

@@ -7,7 +7,7 @@
   // height: 50px;
   color: #fff;
   background: #2d8cf0;
-  transform: translateY(0);
+  transform: translate(0, 0);
   cursor: pointer;
   opacity: 1;
   transition: 0.2s ease-in;
@@ -16,6 +16,24 @@
     opacity: 0;
     transition: 0.2s ease-out;
   }
+  &.stow {
+    transform: translateX(142px);
+    transition: 0.2s ease-out;
+  }
+  &--btn {
+    display: inline-block;
+    width: 20px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    vertical-align: top;
+    background: #006ad9;
+    border-right: 1px solid #2479d3;
+    &:hover {
+      background: #2479d3;
+      transition: 0.2s ease-out;
+    }
+  }
   &--num {
     width: 112px;
     height: 50px;