feat: add FashionAlignment mode for dock panel

1. Implement new FashionAlignment enum value (2) for dock item alignment
2. Create FashionDockController QML component to manage fashion dock
layout and appearance
3. Add "Fashion Mode" menu item in dock context menu for easy mode
switching
4. Integrate fashion dock logic into main dock window: adjust width,
anchors, margins, window radius, and blur effects
5. Update showdesktop and taskmanager to be hidden or behave differently
in fashion mode
6. Ensure width animation when entering/exiting fashion mode
7. Add appropriate DTK blur and styling for fashion dock appearance
8. Update string conversion functions to support the new "fashion"
alignment
9. Hide left part and adjust spacing in fashion mode for a compact,
floating design

Log: Added new dock fashion alignment mode with floating UI and compact
layout

Influence:
1. Test switching between Center, Left, and Fashion alignment modes via
context menu
2. Verify fashion mode only enables on Bottom/Top positions and not in
column layout
3. Check that showdesktop widget is hidden in fashion mode
4. Verify dock width and margin adjustments in fashion mode (floating
margin, vertical padding)
5. Test taskmanager behavior in fashion mode (no remaining space
calculation, no text calculator)
6. Verify blur and color blending correctness in fashion mode for both
light and dark themes
7. Test width animation when enabling/disabling fashion mode
8. Verify dock exclusion zone includes floating margin in fashion mode
9. Test on different screen sizes and DPI settings
10. Validate that left part and its items are hidden in fashion mode

feat: 新增时尚模式对齐方式

1. 实现新的时尚模式对齐枚举值 (2)，用于 dock 面板的项目对齐
2. 创建 FashionDockController QML 组件，管理时尚模式布局和外观
3. 在 dock 右键菜单中添加 "时尚模式" 菜单项，便于模式切换
4. 将时尚模式逻辑集成到主 dock 窗口中：调整宽度、锚点、边距、窗口圆角和
模糊效果
5. 更新显示桌面和任务管理器，使其在时尚模式下隐藏或改变行为
6. 在进入/退出时尚模式时启用宽度动画
7. 为时尚模式外观添加合适的 DTK 模糊和样式
8. 更新字符串转换函数以支持新的 "fashion" 对齐方式
9. 在时尚模式下隐藏左侧部分并调整间距，实现紧凑浮动设计

Log: 新增时尚模式对齐方式，浮动UI和紧凑布局

Influence:
1. 通过右键菜单测试中心、左对齐和时尚模式之间的切换
2. 验证时尚模式仅在底部/顶部位置且非列布局时启用
3. 检查显示桌面小部件在时尚模式下是否隐藏
4. 验证时尚模式下的 dock 宽度和边距调整（浮动边距、垂直内边距）
5. 测试任务管理器在时尚模式下的行为（无剩余空间计算、无文本计算器）
6. 验证时尚模式下浅色和深色主题的模糊和颜色混合正确性
7. 测试启用/禁用时尚模式时的宽度动画
8. 验证时尚模式下 dock 排除区域包含浮动边距
9. 在不同屏幕尺寸和 DPI 设置下进行测试
10. 验证左侧部分及其项目在时尚模式下是否隐藏

Author: wjyrich

panels/dock/constants.h

@@ -1,6 +1,6 @@
 // Copyright (C) 2011 ~ 2018 Deepin Technology Co., Ltd.
 // SPDX-FileCopyrightText: 2018 - 2023 UnionTech Software Technology Co., Ltd.
-// SPDX-FileCopyrightText: 2023 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2023 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 // SPDX-License-Identifier: LGPL-3.0-or-later
@@ -36,6 +36,7 @@ enum IndicatorStyle {
 enum ItemAlignment {
     CenterAlignment      = 0,
     LeftAlignment        = 1,
+    FashionAlignment      = 2,
 };
 
 enum ColorTheme {

panels/dock/docksettings.cpp

@@ -85,6 +85,8 @@ static QString itemAlignment2String(const ItemAlignment& alignment)
             return "left";
         case ItemAlignment::CenterAlignment:
             return "center";
+        case ItemAlignment::FashionAlignment:
+            return "fashion";
     }
 
     return "center";
@@ -111,6 +113,8 @@ static ItemAlignment string2ItenAlignment(const QString& alignmentStr)
         return ItemAlignment::LeftAlignment;
     else if (alignmentStr == "center")
         return ItemAlignment::CenterAlignment;
+    else if (alignmentStr == "fashion")
+        return ItemAlignment::FashionAlignment;
 
     return ItemAlignment::CenterAlignment;
 }

panels/dock/package/FashionDockController.qml

@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: 2026 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+
+import org.deepin.ds 1.0
+import org.deepin.ds.dock 1.0
+import org.deepin.dtk.style 1.0 as DStyle
+
+QtObject {
+    id: root
+
+    property bool useColumnLayout: false
+    property int itemAlignment: Dock.CenterAlignment
+    property int position: Dock.Bottom
+    property int hideState: Dock.Show
+    property real dockSize: 0
+    property real dockItemIconSize: 0
+    property real devicePixelRatio: 1
+    property int screenWidth: 0
+    property int colorTheme: Dock.Light
+    property bool dragging: false
+    property var gridLayout: null
+    property var rightPart: null
+
+    readonly property bool enabled: !useColumnLayout
+        && itemAlignment === Dock.FashionAlignment
+        && (position === Dock.Bottom || position === Dock.Top)
+    readonly property bool topMode: enabled && position === Dock.Top
+    readonly property bool bottomMode: enabled && position === Dock.Bottom
+    readonly property int floatingMargin: 8
+    readonly property int verticalPadding: Math.max(6, Math.round(dockSize * 0.16))
+    readonly property int surfaceThickness: useColumnLayout ? dockSize : dockSize + verticalPadding * 2 
+    readonly property int backgroundRadius: Math.round(surfaceThickness / 4)
+    readonly property real gridDisplayedWidth: enabled && gridLayout
+        ? gridLayout.implicitWidth
+        : 0
+    readonly property real gridDisplayedHeight: enabled && gridLayout
+        ? gridLayout.implicitHeight
+        : 0
+    readonly property real contentWidth: {
+        if (!enabled) {
+            return 0
+        }
+
+        let width = gridDisplayedWidth
+        if (rightPart && rightPart.visible) {
+            if (width > 0) {
+                width += gridLayout.columnSpacing
+            }
+            width += rightPart.implicitWidth
+        }
+        return width
+    }
+    readonly property bool widthAnimationEnabled: enabled && !dragging
+
+    function effectiveShellWidth() {
+        if (!enabled) {
+            return 0
+        }
+
+        return Math.min(contentWidth, screenWidth)
+    }
+}

panels/dock/package/main.qml

@@ -13,19 +13,42 @@ import Qt.labs.platform as LP
 import org.deepin.ds 1.0
 import org.deepin.ds.dock 1.0
 import org.deepin.dtk 1.0 as D
-import org.deepin.dtk.style 1.0 as DStyle
 
 Window {
     id: dock
     property int positionForAnimation: Panel.position
     property bool useColumnLayout: positionForAnimation % 2
+
+    FashionDockController {
+        id: fashionDockController
+        useColumnLayout: dock.useColumnLayout
+        itemAlignment: Panel.itemAlignment
+        position: dock.positionForAnimation
+        hideState: Panel.hideState
+        dockSize: dock.dockSize
+        dockItemIconSize: dock.dockItemIconSize
+        devicePixelRatio: Panel.devicePixelRatio > 0 ? Panel.devicePixelRatio : Screen.devicePixelRatio
+        screenWidth: Screen.width
+        colorTheme: Panel.colorTheme
+        dragging: dock.isDragging
+        gridLayout: gridLayout
+        rightPart: dockRightPart
+    }
+
+    property alias fashionDock: fashionDockController
     property int dockCenterPartCount: dockCenterPartModel.count
 
     readonly property int dockRawCenterSpace: {
         if (useColumnLayout) {
             return Screen.height - dockLeftPart.implicitHeight - dockRightPart.implicitHeight;
         } else {
-            return Screen.width - dockLeftPart.implicitWidth - dockRightPart.implicitWidth;
+            let space = Screen.width - dockLeftPart.implicitWidth - dockRightPart.implicitWidth;
+            if (fashionDock.enabled && gridLayout) {
+                // 时尚模式下，dockRightPart 在 gridLayout 右侧，之间需要扣除 dockSpacing
+                // 这是为了确保 gridLayout 的宽度 + dockSpacing + rightPart 宽度 <= screenWidth
+                space -= Math.ceil(gridLayout.columnSpacing);
+            }
+            return Math.max(0, space);
         }
     }
 
@@ -45,7 +68,13 @@ Window {
     property real dockItemIconSize: dockItemMaxSize * 9 / 14
 
     // NOTE: -1 means not set its size, follow the platform size
-    width: positionForAnimation === Dock.Top || positionForAnimation === Dock.Bottom ? -1 : dockSize
+    width: {
+        if (fashionDock.enabled) {
+            return Math.max(1, fashionDock.effectiveShellWidth())
+        }
+
+        return positionForAnimation === Dock.Top || positionForAnimation === Dock.Bottom ? -1 : dockSize
+    }
     height: positionForAnimation === Dock.Left || positionForAnimation === Dock.Right ? -1 : dockSize
     color: "transparent"
     flags: Qt.WindowDoesNotAcceptFocus
@@ -65,14 +94,21 @@ Window {
         MenuHelper.openMenu(dockMenuLoader.item)
     }
 
-    DLayerShellWindow.anchors: position2Anchors(positionForAnimation)
+    DLayerShellWindow.anchors: fashionDock.enabled
+        ? (fashionDock.topMode ? DLayerShellWindow.AnchorTop : DLayerShellWindow.AnchorBottom)
+        : position2Anchors(positionForAnimation)
+    DLayerShellWindow.topMargin: fashionDock.topMode ? fashionDock.floatingMargin : 0
+
+    DLayerShellWindow.bottomMargin: fashionDock.bottomMode ? fashionDock.floatingMargin : 0
     DLayerShellWindow.layer: DLayerShellWindow.LayerTop
-    DLayerShellWindow.exclusionZone: Panel.hideMode === Dock.KeepShowing ? Applet.dockSize : 0
+    DLayerShellWindow.exclusionZone: Panel.hideMode === Dock.KeepShowing
+        ? Applet.dockSize + (fashionDock.enabled ? fashionDock.floatingMargin : 0)
+        : 0
     DLayerShellWindow.scope: "dde-shell/dock"
     DLayerShellWindow.keyboardInteractivity: DLayerShellWindow.KeyboardInteractivityOnDemand
 
     D.DWindow.enabled: true
-    D.DWindow.windowRadius: 0
+    D.DWindow.windowRadius: fashionDock.enabled ? fashionDock.backgroundRadius : 0
     //TODO：由于windoweffect处理有BUG，导致动画结束后一致保持无阴影，无borderwidth状态。 无法恢复到最初的阴影和边框
     //D.DWindow.windowEffect: hideShowAnimation.running ? D.PlatformHandle.EffectNoShadow | D.PlatformHandle.EffectNoBorder : 0
 
@@ -89,12 +125,21 @@ Window {
     D.ColorSelector.family: D.Palette.CrystalColor
 
     onDockSizeChanged: {
-        if (dock.dockSize === Dock.MIN_DOCK_SIZE) {
+        if (fashionDock.enabled) {
+            Panel.indicatorStyle = Dock.Fashion
+        } else if (dock.dockSize === Dock.MIN_DOCK_SIZE) {
             Panel.indicatorStyle = Dock.Efficient
         } else {
             Panel.indicatorStyle = Dock.Fashion
         }
     }
+    Behavior on width {
+        enabled: fashionDock.widthAnimationEnabled
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.OutQuad
+        }
+    }
 
     Binding on itemIconSizeBase {
         when: !isDragging
@@ -326,6 +371,11 @@ Window {
                     prop: "itemAlignment"
                     value: Dock.CenterAlignment
                 }
+                EnumPropertyMenuItem {
+                    name: qsTr("Fashion Mode")
+                    prop: "itemAlignment"
+                    value: Dock.FashionAlignment
+                }
             }
             MutuallyExclusiveMenu {
                 title: qsTr("Position")
@@ -401,7 +451,7 @@ Window {
         D.StyledBehindWindowBlur {
             control: parent
             anchors.fill: parent
-            cornerRadius: 0
+            cornerRadius: fashionDock.enabled ? fashionDock.backgroundRadius : 0
             blendColor: {
                 if (valid) {
                     return DStyle.Style.control.selectColor(undefined,
@@ -476,7 +526,7 @@ Window {
         //此处为边距区域的点击实践特殊处理。
         MouseArea {                                                                                                                                     
             id: leftMarginArea                                                                                                                          
-            width: useColumnLayout ? parent.width : gridLayout.columnSpacing                                                                            
+            width: useColumnLayout ? parent.width : (fashionDock.enabled ? 0 : gridLayout.columnSpacing)                                                                            
             height: useColumnLayout ? gridLayout.rowSpacing : parent.height                                                                             
             anchors.left: parent.left
             anchors.top: parent.top
@@ -505,13 +555,14 @@ Window {
 
             Item {
                 id: leftMargin
+                visible: !fashionDock.enabled
                 implicitWidth: 0
                 implicitHeight: 0
             }
 
             Item {
                 id: dockLeftPart
-                visible: dockLeftPartModel.count > 0
+                visible: !fashionDock.enabled && dockLeftPartModel.count > 0
                 implicitWidth: leftLoader.implicitWidth
                 implicitHeight: leftLoader.implicitHeight
                 OverflowContainer {
@@ -534,7 +585,7 @@ Window {
                 Layout.maximumHeight: useColumnLayout ? dockRawCenterSpace : -1
                 onXChanged: dockCenterPartPosChanged()
                 onYChanged: dockCenterPartPosChanged()
-                Layout.leftMargin: !useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
+                Layout.leftMargin: !useColumnLayout && !fashionDock.enabled && Panel.itemAlignment === Dock.CenterAlignment ?
                     Math.max(0, (dock.width - dockCenterPart.implicitWidth) / 2 - (dockLeftPart.implicitWidth + 20) + Math.min((dock.width - dockCenterPart.implicitWidth) / 2 - (dockRightPart.implicitWidth + 20), 0)) : 0
                 Layout.topMargin: useColumnLayout && Panel.itemAlignment === Dock.CenterAlignment ?
                     Math.max(0, (dock.height - dockCenterPart.implicitHeight) / 2 - (dockLeftPart.implicitHeight + 20) + Math.min((dock.height - dockCenterPart.implicitHeight) / 2 - (dockRightPart.implicitHeight + 20), 0)) : 0
@@ -569,8 +620,9 @@ Window {
             }
 
             Item {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+                Layout.fillWidth: !fashionDock.enabled
+                Layout.fillHeight: !fashionDock.enabled
+                visible: !fashionDock.enabled
             }
         }
 

panels/dock/showdesktop/package/showdesktop.qml

@@ -1,4 +1,4 @@
-// SPDX-FileCopyrightText: 2023 UnionTech Software Technology Co., Ltd.
+// SPDX-FileCopyrightText: 2023 - 2026 UnionTech Software Technology Co., Ltd.
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
@@ -13,11 +13,13 @@ AppletItem {
     id: showdesktop
     readonly property int showDesktopWidth: 10
     property bool useColumnLayout: Panel.position % 2
+    readonly property bool fashionMode: Panel.rootObject && Panel.rootObject.fashionDock && Panel.rootObject.fashionDock.enabled
     property int dockSize: Panel.rootObject.dockItemMaxSize
     property int dockOrder: 30
-    property bool shouldVisible: Applet.visible
-    implicitWidth: useColumnLayout ? Panel.rootObject.dockSize : showDesktopWidth
-    implicitHeight: useColumnLayout ? showDesktopWidth : Panel.rootObject.dockSize
+    property bool shouldVisible: Applet.visible && !fashionMode
+    visible: shouldVisible
+    implicitWidth: shouldVisible ? (useColumnLayout ? Panel.rootObject.dockSize : showDesktopWidth) : 0
+    implicitHeight: shouldVisible ? (useColumnLayout ? showDesktopWidth : Panel.rootObject.dockSize) : 0
 
     PanelToolTip {
         id: toolTip

panels/dock/taskmanager/package/TaskManager.qml

@@ -14,14 +14,18 @@ ContainmentItem {
     id: taskmanager
     property bool useColumnLayout: Panel.rootObject.useColumnLayout
     property int dockOrder: 16
+    readonly property bool fashionMode: Panel.rootObject && Panel.rootObject.fashionDock && Panel.rootObject.fashionDock.enabled
+    readonly property bool horizontalFashionMode: fashionMode && !useColumnLayout
 
     function calcRemainingSpace(baseSize) {
         const otherCount = Panel.rootObject.dockCenterPartCount - 1;
         const otherOccupied = otherCount > 0 ? otherCount * baseSize * multitaskViewIconRatio : 0;
         return Panel.rootObject.dockRawCenterSpace - otherOccupied;
     }
 
-    readonly property real remainingSpacesForTaskManager: calcRemainingSpace(Panel.rootObject.dockItemMaxSize)
+    property real remainingSpacesForTaskManager: fashionMode
+        ? 0
+        : calcRemainingSpace(Panel.rootObject.dockItemMaxSize)
     readonly property int appTitleSpacing: Math.max(10, Math.round(Panel.rootObject.dockItemMaxSize * 9 / 14) / 3)
     // Start padding for the app container so that the visual gap
     // (multitask icon right edge → first app icon left edge) = appTitleSpacing.
@@ -37,12 +41,14 @@ ContainmentItem {
     readonly property real startPadding: Math.max(0, appTitleSpacing - (Panel.rootObject.dockItemMaxSize * (multitaskViewIconRatio - iconWidthToMaxSizeRatio) / 2))
 
     implicitWidth: {
+        if (horizontalFashionMode) return appContainer.implicitWidth + (useColumnLayout ? 0 : startPadding)
         let extra = useColumnLayout ? 0 : startPadding
         let w = appContainer.implicitWidth + extra
         let maxW = Panel.itemAlignment === Dock.LeftAlignment ? Math.max(remainingSpacesForTaskManager, w) : Math.min(remainingSpacesForTaskManager, w)
         return useColumnLayout ? Panel.rootObject.dockSize : maxW
     }
     implicitHeight: {
+        if (fashionMode && useColumnLayout) return appContainer.implicitHeight + (useColumnLayout ? startPadding : 0)
         let extra = useColumnLayout ? startPadding : 0
         let h = appContainer.implicitHeight + extra
         let maxH = Panel.itemAlignment === Dock.LeftAlignment ? Math.max(remainingSpacesForTaskManager, h) : Math.min(remainingSpacesForTaskManager, h)
@@ -81,7 +87,7 @@ ContainmentItem {
 
     TextCalculator {
         id: textCalculator
-        enabled: taskmanager.Applet.windowSplit && (Panel.position == Dock.Bottom || Panel.position == Dock.Top)
+        enabled: !fashionMode && taskmanager.Applet.windowSplit && (Panel.position == Dock.Bottom || Panel.position == Dock.Top)
         dataModel: taskmanager.Applet.dataModel
         iconSize: Panel.rootObject.dockSize * 9 / 14
         spacing: Math.max(10, Math.round(textCalculator.iconSize) / 3)