feat: adjust notification center UI styling and layout

1. Changed crystal theme background color from pure white to light gray
(240/255) for better visual comfort
2. Added text color handling for notification header using DStyle
control selectColor
3. Reduced content padding from 20 to 10 and adjusted window margins for
tighter layout
4. Removed left margin from content area and right margin from header
5. Updated blendColor function to use local blendColorAlpha instead of
dock.blendColorAlpha
6. Modified blur background colors and opacity values for better visual
integration
7. Added clipItems property to OverlapIndicator to control clipping
behavior
8. Adjusted close button position in NotifyItemContent (rightMargin:
-width/2 + 6)
9. Changed gradient background opacity from 1.0 to 0.5 for crystal theme
10. Reduced leftMargin in NotifyStyle from 20 to 10
11. Disabled drop shadow effect on DropShadowText for cleaner appearance

Log: Improved notification center visual design with adjusted colors,
spacing, and effects

Influence:
1. Verify notification center appearance in both light and dark themes
2. Test overlapping notifications display with new clipping behavior
3. Check close button positioning in notification items
4. Verify window margins and padding in different screen configurations
5. Test notification header text color in various theme conditions
6. Validate blur effect and transparency in crystal theme
7. Check notification item background opacity in overlap mode

feat: 调整通知中心UI样式和布局

1. 将水晶主题背景色从纯白色改为浅灰色(240/255)，提升视觉舒适度
2. 为通知标题添加使用DStyle控制选择颜色的文本颜色处理
3. 将内容内边距从20减少到10，调整窗口边距实现更紧凑的布局
4. 移除内容区域的左边距和标题的右边距
5. 更新混合颜色函数使用本地blendColorAlpha替代dock.blendColorAlpha
6. 修改模糊背景颜色和透明度值以实现更好的视觉融合
7. 为重叠指示器添加clipItems属性以控制裁剪行为
8. 调整通知项内容中关闭按钮的位置(rightMargin: -width/2 + 6)
9. 将渐变背景透明度从1.0改为0.5（水晶主题）
10. 将NotifyStyle中的左边距从20减少到10
11. 禁用DropShadowText的阴影效果以获得更简洁的外观

Log: 优化通知中心视觉设计，调整颜色、间距和效果

Influence:
1. 验证通知中心在浅色和深色主题下的外观
2. 测试重叠通知显示与新裁剪行为
3. 检查通知项中关闭按钮的定位
4. 验证不同屏幕配置下的窗口边距和内边距
5. 测试各种主题条件下通知标题文本颜色
6. 验证水晶主题下的模糊效果和透明度
7. 检查重叠模式下通知项背景透明度

Author: wjyrich

panels/notification/center/NormalNotify.qml

@@ -64,7 +64,7 @@ NotifyItem {
                 backgroundColor: Palette {
                     normal {
                         common: ("transparent")
-                        crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7)
+                        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)

panels/notification/center/NotifyHeaderTitleText.qml

@@ -1,15 +1,18 @@
-// SPDX-FileCopyrightText: 2025 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2025 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import QtQuick
 import Qt5Compat.GraphicalEffects
-import org.deepin.dtk 1.0
+import org.deepin.dtk 1.0 
 import org.deepin.ds.notification
 import org.deepin.ds.notificationcenter
 
 DropShadowText {
     property font tFont: DTK.fontManager.t4
+    color: DTK.themeType === ApplicationHelper.DarkType ?
+        Qt.rgba(255, 255, 255, 0.7) :
+        Qt.rgba(0, 0, 0, 0.75)
     font {
         pixelSize: tFont.pixelSize
         family: tFont.family

panels/notification/center/OverlapNotify.qml

@@ -125,7 +125,7 @@ NotifyItem {
                     backgroundColor: Palette {
                         normal {
                             common: ("transparent")
-                            crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.7)
+                            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)
@@ -137,6 +137,7 @@ NotifyItem {
             OverlapIndicator {
                 id: indicator
                 enableAnimation: root.ListView.view.panelShown
+                clipItems: true
                 anchors {
                     bottom: parent.bottom
                     left: parent.left
@@ -147,6 +148,7 @@ NotifyItem {
                 z: -1
                 count: root.count
                 background: NotifyItemBackground {
+                    opacity: realIndex === 0 ? 0.6 : 0.4
                     backgroundColor: Palette {
                         normal {
                             common: ("transparent")

panels/notification/center/package/main.qml

@@ -67,7 +67,7 @@ Window {
         switch (position) {
             case 0: { // DOCK_TOP
                 let visibleHeight = Math.max(0, dockGeometry.y + dockGeometry.height - screenGeometry.y)
-                return Math.min(visibleHeight, dockGeometry.height)
+                return Math.min(visibleHeight, dockGeometry.height) 
             }
             case 1: { // DOCK_RIGHT
                 let visibleWidth = Math.max(0, screenGeometry.x + screenGeometry.width - dockGeometry.x)
@@ -84,14 +84,14 @@ Window {
     visible: Panel.visible
     flags: Qt.Tool
 
-    property int contentPadding: 20
-    width: NotifyStyle.contentItem.width + NotifyStyle.leftMargin +contentPadding * 2
+    property int contentPadding: 10
+    width: NotifyStyle.contentItem.width + contentPadding * 2
     // height: 800
     DLayerShellWindow.layer: DLayerShellWindow.LayerOverlay
     DLayerShellWindow.anchors: DLayerShellWindow.AnchorRight | DLayerShellWindow.AnchorTop | DLayerShellWindow.AnchorBottom
-    DLayerShellWindow.topMargin: windowMargin(0)
-    DLayerShellWindow.rightMargin: windowMargin(1)
-    DLayerShellWindow.bottomMargin: windowMargin(2)
+    DLayerShellWindow.topMargin: windowMargin(0) + contentPadding
+    DLayerShellWindow.rightMargin: windowMargin(1) + contentPadding
+    DLayerShellWindow.bottomMargin: windowMargin(2) + contentPadding
     DLayerShellWindow.exclusionZone: -1
     DLayerShellWindow.keyboardInteractivity: DLayerShellWindow.KeyboardInteractivityOnDemand
     palette: DTK.palette
@@ -103,6 +103,8 @@ Window {
     DWindow.enabled: true
     color: "transparent"
     DWindow.enableBlurWindow: true
+    DWindow.borderColor: DTK.themeType === ApplicationHelper.DarkType ? Qt.rgba(0, 0, 0, 0.8) : Qt.rgba(0, 0, 0, 0.06)
+
     // 修复：通知中心屏幕跟随任务栏屏幕，而不是硬编码为第一个屏幕
     screen: getDockScreen()
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
@@ -135,17 +137,32 @@ Window {
         }
     }
 
+
+    function blendColorAlpha(fallback) {
+        var appearance = DS.applet("org.deepin.ds.dde-appearance")
+        if (!appearance || appearance.opacity < 0)
+            return fallback
+        return appearance.opacity
+    }
+
     // only add blendColor effect when DWindow.enableBlurWindow is true,
     // avoid to updating blur area frequently.--
     StyledBehindWindowBlur {
+        InsideBoxBorder {
+            anchors.fill: parent
+            radius: DTK.platformTheme.windowRadius
+            color: DTK.themeType === ApplicationHelper.DarkType ?
+                Qt.rgba(1, 1, 1, 0.1) :
+                Qt.rgba(0, 0, 0, 0.1)
+        }
         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)))
+                                                    Qt.rgba(238 / 255.0, 238 / 255.0, 238 / 255.0, blendColorAlpha(0.8)),
+                                                    Qt.rgba(20 / 255, 20 / 255, 20 /255, blendColorAlpha(0.8)))
             }
             return DStyle.Style.control.selectColor(undefined,
                                                 DStyle.Style.behindWindowBlur.lightNoBlurColor,
@@ -161,7 +178,6 @@ Window {
             top: parent.top
             topMargin: contentPadding
             left: parent.left
-            leftMargin: contentPadding
             right: parent.right
             bottom: parent.bottom
         }
@@ -172,7 +188,6 @@ Window {
                 top: parent.top
                 left: parent.left
                 right: parent.right
-                rightMargin: contentPadding
             }
             // Tab navigation: staging -> header
             onGotoHeaderFirst: notifyCenter.focusHeaderFirst()

panels/notification/plugin/DropShadowText.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2025 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2025 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
@@ -9,11 +9,4 @@ import org.deepin.ds.notificationcenter
 
 Text {
     color: Qt.rgba(1, 1, 1, 1)
-    layer.enabled: true
-    layer.effect: DropShadow {
-        color: Qt.rgba(0, 0, 0, 0.6)
-        radius: 4
-        samples: 9
-        verticalOffset: 1
-    }
 }

panels/notification/plugin/NotifyItemBackground.qml

@@ -11,6 +11,7 @@ Control {
 
     padding: radius / 2
 
+    property int realIndex: 0
     property int radius: 12
     property Palette borderColor: Palette {
         normal {

panels/notification/plugin/NotifyItemContent.qml

@@ -104,7 +104,7 @@ NotifyItem {
                 top: parent.top
                 topMargin: -height / 2
                 right: parent.right
-                rightMargin: -width / 2
+                rightMargin: -width / 2 + 6
             }
             width: 20
             height: 20
@@ -149,12 +149,10 @@ NotifyItem {
                         color1: Palette {
                             normal {
                                 common: ("transparent")
-                                // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
-                                crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1.0)
+                                crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
                             }
                             normalDark {
-                                // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
-                                crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1.0)
+                                crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.5)
                             }
                         }
                         color2: color1

panels/notification/plugin/NotifyStyle.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
 
@@ -15,5 +15,5 @@ QtObject {
         property int width: 360
     }
     property int scrollBarPadding: 2
-    property int leftMargin: 20
+    property int leftMargin: 10
 }

panels/notification/plugin/OverlapIndicator.qml

@@ -15,6 +15,7 @@ Item {
     property int overlapHeight: 8
     property bool revert: false
     property bool enableAnimation: false
+    property bool clipItems: false
 
     implicitHeight: layout.height
     implicitWidth: 360
@@ -35,7 +36,7 @@ Item {
                 Layout.preferredWidth: root.width - (realIndex) * radius * 2
                 Layout.alignment: Qt.AlignHCenter
                 z: -realIndex
-                clip: true
+                clip: root.clipItems
 
                 Loader {
                     id: contentLoader
@@ -52,6 +53,7 @@ Item {
                     sourceComponent: root.background
 
                     onLoaded: function() {
+                        contentLoader.item.realIndex = Qt.binding(function() { return item.realIndex; })
                         if (root.enableAnimation) {
                             fadeInAnimation.start()
                         } else {

panels/notification/plugin/SettingActionButton.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
 
@@ -36,12 +36,10 @@ ActionButton {
         color1: Palette {
             normal {
                 common: ("transparent")
-                // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
-                crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1.0)
+                crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
             }
             normalDark {
-                // TODO crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.5)
-                crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1.0)
+                crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.5)
             }
         }