修复第一条通知不显示,通知组展开状态下新增通知没有背景色,左滑样式错误的bug

src/components/notification-group/notification-group.ts

@@ -80,6 +80,7 @@ export class StarNotificationGroup extends LitElement {
     super.connectedCallback()
     window.addEventListener('notification-delete', this)
     window.addEventListener('notification-touchmove', this)
+    window.addEventListener('notification-touchmove-right', this)
     window.addEventListener('resize', this.resize)
 
     // 用于监控自身高度变化, 用于第一时间设置自身高度
@@ -143,6 +144,8 @@ export class StarNotificationGroup extends LitElement {
         break
       // 左滑通知时，对未闭合操作按钮的其它通知进行闭合
       case 'notification-touchmove':
+        this.setAttribute('removeBackground', 'true')
+        this.style.setProperty('--single-noti-bgc', 'var(--notification-bgc)')
         let targetId = (event as any).detail.id
         if (this.slotElements.length > 1) {
           ;(this.slotElements as StarNotification[]).forEach(
@@ -154,6 +157,10 @@ export class StarNotificationGroup extends LitElement {
           )
         }
         break
+      case 'notification-touchmove-right':
+        this.setAttribute('removeBackground', 'false')
+        this.style.setProperty('--single-noti-bgc', 'transparent')
+        break
     }
   }
 
@@ -180,6 +187,7 @@ export class StarNotificationGroup extends LitElement {
           'group-with-one-notification'
         )
         this.show = false
+        this.contentOpacity = 1
         firstChild.withArrowUp = false
         firstChild.removeEventListener('notification-tap', allNotificationshown)
       } else if (slotLen > 1) {
@@ -187,11 +195,13 @@ export class StarNotificationGroup extends LitElement {
 
         if (this.show) {
           // 展开
+          this.addGroupHeight(this._singleHeight * this.slotElements.length)
           firstChild.setAttribute('radiusType', 'top-border-radius')
           firstChild.setAttribute('notificationType', 'more-notifiactions')
           firstChild.withArrowUp = true
         } else {
           // 折叠
+          this.addGroupHeight(0)
           firstChild.setAttribute('radiusType', 'border-radius')
           firstChild.setAttribute(
             'notificationType',
@@ -237,7 +247,6 @@ export class StarNotificationGroup extends LitElement {
   }
 
   allNotificationshown(event: Event) {
-    console.log('allNotificationshown')
     let firstChild = this.slotElements[0] as StarNotification
     if (firstChild !== event.target || this.slotElements.length == 1) {
       return
@@ -250,7 +259,6 @@ export class StarNotificationGroup extends LitElement {
     }
 
     let isShow = this.show
-    console.log('hellowq allNotificationshown isShow: ', isShow)
     if (isShow) {
       // 当前是展开状态，点击需折叠
       let self = this
@@ -358,6 +366,10 @@ export class StarNotificationGroup extends LitElement {
       --single-noti-bgc: transparent;
     }
 
+    :host([removeBackground='true']) {
+      background: unset !important;
+    }
+
     @media (prefers-color-scheme: dark) {
       :host {
         --notification-bgc: var(--opacity-black-25);

src/components/notification/notification.ts

@@ -122,13 +122,11 @@ export class StarNotification extends StarBaseElement {
   render(): HTMLTemplateResult | typeof nothing {
     switch (this.notificationType) {
       case NotificationType.ONE:
+      case NotificationType.MORE:
       case NotificationType.GROUP_ONE:
         return this.getone()
-      case NotificationType.MORE:
       case NotificationType.MORE_FIRST:
-        return html`
-          ${this.getmorefirst()} ${this.getone()}
-        `
+        return this.getmorefirst()
       case NotificationType.BLUETOOTH_TRANSFER:
         return this.getbluetoothtransfer()
       default:
@@ -391,6 +389,7 @@ export class StarNotification extends StarBaseElement {
           event.preventDefault()
           break
         case 'swipeleft':
+          event.stopPropagation()
           this.touchAction.last.clientX = event.detail.endTouch.clientX
           let touchPosX =
             this.touchAction.last.clientX - this.touchAction.start.clientX
@@ -456,6 +455,7 @@ export class StarNotification extends StarBaseElement {
           break
         case 'swiperight':
           event.preventDefault()
+          event.stopPropagation()
           this.notification.style.transform = 'translateX(' + 0 + 'px)'
           let tranEnd = () => {
             this.notification.removeEventListener('transitionend', tranEnd)
@@ -467,6 +467,16 @@ export class StarNotification extends StarBaseElement {
           }
           this.notification.addEventListener('transitionend', tranEnd)
           this.moveDirection = 'right'
+          this.dispatchEvent(
+            new CustomEvent('notification-touchmove-right', {
+              detail: {
+                id: this.id,
+                direction: this.moveDirection,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
           break
         case 'click':
           event.stopPropagation()

src/components/notification/notificationstyle.ts

@@ -113,6 +113,7 @@ export const sharedStyles: CSSResult = css`
   }
 
   .notification > div.title-container .title {
+    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     flex: none;
@@ -127,6 +128,7 @@ export const sharedStyles: CSSResult = css`
     line-height: 1;
     // font-size: 2.3vw;
     font-size: var(--auto-28px);
+    max-width: var(--auto-640px);
   }
 
   .notification > div.title-container .timestamp {
@@ -181,7 +183,7 @@ export const sharedStyles: CSSResult = css`
     // font-size: 2.2vw;
 
     font-size: var(--auto-26px);
-    max-width: var(--auro-640px);
+    max-width: var(--auto-640px);
     // width: 246px;
     // height: 11px;
     // font-size: 8px;
@@ -337,12 +339,17 @@ export const sharedStyles: CSSResult = css`
     //   line-height: 28px;
     //   font-size: 28px;
 
-    height: 18.4%;
-    line-height: 1;
+    // height: 18.4%;
+    // line-height: 1;
     // font-size: 1.45vh;
     // font-size: 2.3vw;
     font-size: var(--auto-28px);
     line-height: var(--auto-38px);
+    height: var(--auto-38px);
+    max-width: 40%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   /* 打开通知组动画过程中时 */