feat: add blur background to notification center

panels/notification/center/NormalNotify.qml

@@ -60,6 +60,17 @@ NotifyItem {
             contentIcon: root.contentIcon
             contentRowCount: root.contentRowCount
             indexInGroup: root.indexInGroup
+            background: NotifyItemBackground {
+                backgroundColor: Palette {
+                    normal {
+                        common: ("transparent")
+                        crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7)
+                    }
+                    normalDark {
+                        crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7)
+                    }
+                }
+            }
 
             onRemove: function () {
                 root.remove()

panels/notification/center/OverlapNotify.qml

@@ -120,6 +120,18 @@ NotifyItem {
                 }
                 onGotoNextItem: root.gotoNextItem()
                 onGotoPrevItem: root.gotoPrevItem()
+
+                background: NotifyItemBackground {
+                    backgroundColor: Palette {
+                        normal {
+                            common: ("transparent")
+                            crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7)
+                        }
+                        normalDark {
+                            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7)
+                        }
+                    }
+                }
             }
 
             OverlapIndicator {
@@ -134,6 +146,29 @@ NotifyItem {
                 }
                 z: -1
                 count: root.count
+                background: NotifyItemBackground {
+                    backgroundColor: Palette {
+                        normal {
+                            common: ("transparent")
+                            crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.7)
+                        }
+                        normalDark {
+                            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7)
+                        }
+                    }
+                    borderColor: Palette {
+                        normal {
+                            common: ("transparent")
+                            crystal: Qt.rgba(0, 0, 0, 0.1)
+                        }
+                        normalDark {
+                            crystal: Qt.rgba(0, 0, 0, 0.6)
+                        }
+                    }
+                    insideBorderColor: null
+                    outsideBorderColor: null
+                    dropShadowColor: null
+                }
             }
         }
 

panels/notification/center/package/main.qml

@@ -6,6 +6,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import org.deepin.dtk 1.0
+import org.deepin.dtk.style 1.0 as DStyle
 import org.deepin.ds 1.0
 import org.deepin.ds.notification
 import org.deepin.ds.notificationcenter
@@ -96,13 +97,12 @@ Window {
     palette: DTK.palette
     ColorSelector.family: Palette.CrystalColor
     // DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
-    // DWindow.windowRadius: DTK.platformTheme.windowRadius
-    // DWindow.enableSystemResize: false
-    // DWindow.enableSystemMove: false
-    // DWindow.windowRadius: 0
-    // DWindow.enabled: false
+    DWindow.windowRadius: DTK.platformTheme.windowRadius
+    DWindow.enableSystemResize: false
+    DWindow.enableSystemMove: false
+    DWindow.enabled: true
     color: "transparent"
-    // DWindow.enableBlurWindow: true
+    DWindow.enableBlurWindow: true
     // 修复：通知中心屏幕跟随任务栏屏幕，而不是硬编码为第一个屏幕
     screen: getDockScreen()
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
@@ -135,6 +135,24 @@ Window {
         }
     }
 
+    // only add blendColor effect when DWindow.enableBlurWindow is true,
+    // avoid to updating blur area frequently.--
+    StyledBehindWindowBlur {
+        control: parent
+        anchors.fill: parent
+        cornerRadius: 0
+        blendColor: {
+            if (valid) {
+                return DStyle.Style.control.selectColor(undefined,
+                                                    Qt.rgba(235 / 255.0, 235 / 255.0, 235 / 255.0, dock.blendColorAlpha(0.6)),
+                                                    Qt.rgba(10 / 255, 10 / 255, 10 /255, dock.blendColorAlpha(85 / 255)))
+            }
+            return DStyle.Style.control.selectColor(undefined,
+                                                DStyle.Style.behindWindowBlur.lightNoBlurColor,
+                                                DStyle.Style.behindWindowBlur.darkNoBlurColor)
+        }
+    }
+
     Item {
         id: view
         // clear focus when NotificationCenter is closed.

panels/notification/plugin/NotifyItemBackground.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2024 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
@@ -12,6 +12,11 @@ Control {
     padding: radius / 2
 
     property int radius: 12
+    property Palette borderColor: Palette {
+        normal {
+            common: ("transparent")
+        }
+    }
     property Palette backgroundColor: Palette {
         normal {
             common: ("transparent")
@@ -73,6 +78,7 @@ Control {
             anchors.fill: parent
             radius: control.radius
             color: control.ColorSelector.backgroundColor
+            border.color: control.ColorSelector.borderColor
         }
 
         Loader {

panels/notification/plugin/NotifyItemContent.qml

@@ -21,6 +21,7 @@ NotifyItem {
     property bool enableDismissed: true
     property alias clearButton: clearLoader.sourceComponent
     readonly property alias clearButtonItem: clearLoader.item
+    property alias background: impl.background
 
     signal gotoNextItem()  // Signal to navigate to next notify item
     signal gotoPrevItem()  // Signal to navigate to previous notify item

panels/notification/plugin/OverlapIndicator.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2024 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
@@ -18,36 +18,44 @@ Item {
 
     implicitHeight: layout.height
     implicitWidth: 360
+    property Component background: NotifyItemBackground {
+                        radius: parent ? parent.radius : root.radius
+                        opacity: 0
+                    }
+
     ColumnLayout {
         id: layout
-        spacing: 0
+        spacing: -1
         Repeater {
             model: root.count
             delegate: Item {
                 id: item
                 readonly property int realIndex: revert ? count - index - 1 : index
-                Layout.preferredHeight: overlapHeight + 2
-                Layout.preferredWidth: root.width - (realIndex) * radius *2
+                Layout.preferredHeight: root.radius
+                Layout.preferredWidth: root.width - (realIndex) * radius * 2
                 Layout.alignment: Qt.AlignHCenter
                 z: -realIndex
+                clip: true
 
-                NotifyItemBackground {
-                    id: background
-                    radius: root.radius
+                Loader {
+                    id: contentLoader
                     width: parent.width
-                    height: radius * 2
+                    height: root.radius * 2
+                    property int overlapHeight: root.overlapHeight
+                    property int radius: root.radius
+                    property alias realIndex: item.realIndex
+                    property bool revert: root.revert
                     anchors {
-                        top: revert ? undefined : parent.top
-                        topMargin: revert ? undefined : -(height - overlapHeight)
-                        bottomMargin: revert ? -(height - overlapHeight) : undefined
+                        top: revert ? parent.top : undefined
+                        bottom: revert ? undefined : parent.bottom
                     }
-                    opacity: 0
+                    sourceComponent: root.background
 
-                    Component.onCompleted: {
+                    onLoaded: function() {
                         if (root.enableAnimation) {
                             fadeInAnimation.start()
                         } else {
-                            opacity = 1
+                            contentLoader.item.opacity = 1
                         }
                     }
 
@@ -60,7 +68,7 @@ Item {
 
                         ParallelAnimation {
                             NumberAnimation {
-                                target: background
+                                target: contentLoader.item
                                 property: "opacity"
                                 from: 0
                                 to: 1