style: About 窗口改用 DTK 原生风格，键值对信息布局

package/components/AboutWindow.qml

@@ -2,9 +2,10 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-// 关于窗口：独立顶层窗口，桌面居中弹出，展示插件信息
+// 关于窗口：DTK 原生风格的独立顶层窗口，桌面居中弹出，展示插件信息
-// 从 networkview.qml 抽取，由父组件实例化并调用 show() 触发
+// 设计要点：白色圆角卡片 + 键值对信息布局，信息标签使用 deepin 蓝（#0081FF），
-// 对外依赖：accentColor（关闭按钮 hover 高亮色），由父组件传入
+// 关闭按钮 hover 高亮色由父组件通过 accentColor 传入（红色）
+// 对外依赖：accentColor，由 networkview.qml 实例化时传入，触发方式为 show()/raise()/requestActivate()
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Window 2.15
@@ -17,7 +18,7 @@ Window {
     property color accentColor: Qt.rgba(220 / 255, 38 / 255, 38 / 255, 1)
 
     width: 320
-    height: 230
+    height: 260
     visible: false
     flags: Qt.FramelessWindowHint | Qt.Window
     modality: Qt.NonModal
@@ -30,24 +31,25 @@ Window {
         }
     }
 
+    // 窗口主体：白色圆角卡片，1px 浅灰边框模拟 DTK 窗口描边
     Rectangle {
         anchors.fill: parent
-        color: "#f5f5f5"
+        color: "#FFFFFF"
         radius: 12
         border.width: 1
-        border.color: "#e0e0e0"
+        border.color: "#E8E8E8"
 
         ColumnLayout {
             anchors.fill: parent
-            anchors.margins: 0
             spacing: 0
 
-            // 自定义标题栏（可拖动）
+            // 自定义标题栏：左侧"关于"标题 + 右侧圆形关闭按钮，整栏可拖动窗口
             Rectangle {
                 Layout.fillWidth: true
                 Layout.preferredHeight: 44
                 color: "transparent"
 
+                // 拖动层：声明在关闭按钮之前（位于其下方），避免遮挡按钮点击与 hover
                 MouseArea {
                     anchors.fill: parent
                     drag.target: root
@@ -63,6 +65,7 @@ Window {
                     color: "#333333"
                 }
 
+                // 关闭按钮：28x28 圆形，hover 时淡红底 + 红色 ×（颜色由 accentColor 决定）
                 Rectangle {
                     anchors.right: parent.right
                     anchors.rightMargin: 12
@@ -70,7 +73,7 @@ Window {
                     width: 28
                     height: 28
                     radius: 14
-                    color: aboutCloseMouse.containsMouse ? Qt.rgba(220/255, 38/255, 38/255, 0.15) : "transparent"
+                    color: aboutCloseMouse.containsMouse ? Qt.rgba(220 / 255, 38 / 255, 38 / 255, 0.15) : "transparent"
 
                     Text {
                         anchors.centerIn: parent
@@ -90,20 +93,15 @@ Window {
                 }
             }
 
-            // 内容区
+            // 标题区上方间距
+            Item {
+                Layout.preferredHeight: 12
+            }
+
+            // 标题区：插件中文名 + 英文名，整体居中
             ColumnLayout {
                 Layout.fillWidth: true
-                Layout.fillHeight: true
-                anchors.margins: 0
-                spacing: 10
-                Layout.leftMargin: 24
-                Layout.rightMargin: 24
-                Layout.topMargin: 4
-
-                // 标题组：插件名 + 英文名紧凑排列
-                ColumnLayout {
                 spacing: 2
-                    Layout.alignment: Qt.AlignHCenter
 
                 Text {
                     text: qsTr("网络速度监控")
@@ -121,47 +119,128 @@ Window {
                 }
             }
 
-                // 分隔线
+            // 标题区下方间距
+            Item {
+                Layout.preferredHeight: 12
+            }
+
+            // 分隔线：左右留 24px 边距，与信息区对齐
             Rectangle {
                 Layout.fillWidth: true
+                Layout.leftMargin: 24
+                Layout.rightMargin: 24
                 Layout.preferredHeight: 1
-                    color: "#e0e0e0"
+                color: "#E8E8E8"
             }
 
-                // 信息行
+            // 信息区上方间距
+            Item {
+                Layout.preferredHeight: 12
+            }
+
+            // 信息区：键值对布局，左侧标签固定 56px 宽（deepin 蓝），右侧为值
             ColumnLayout {
-                    spacing: 6
                 Layout.fillWidth: true
+                Layout.leftMargin: 24
+                Layout.rightMargin: 24
+                spacing: 8
+
+                // 版本行
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
 
                     Text {
-                        text: qsTr("版本：1.0")
+                        text: qsTr("版本")
                         font.pixelSize: 12
-                        color: "#666666"
+                        color: "#0081FF"
+                        Layout.preferredWidth: 56
+                        Layout.alignment: Qt.AlignTop
                     }
 
                     Text {
-                        text: qsTr("作者：Jokul")
+                        text: "1.0"
                         font.pixelSize: 12
-                        color: "#666666"
+                        color: "#333333"
+                        Layout.fillWidth: true
+                    }
+                }
+
+                // 作者行
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
+
+                    Text {
+                        text: qsTr("作者")
+                        font.pixelSize: 12
+                        color: "#0081FF"
+                        Layout.preferredWidth: 56
+                        Layout.alignment: Qt.AlignTop
                     }
 
                     Text {
-                        text: qsTr("描述：监控网络速度和流量")
+                        text: "Jokul"
                         font.pixelSize: 12
-                        color: "#666666"
+                        color: "#333333"
+                        Layout.fillWidth: true
+                    }
+                }
+
+                // 描述行
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
+
+                    Text {
+                        text: qsTr("描述")
+                        font.pixelSize: 12
+                        color: "#0081FF"
+                        Layout.preferredWidth: 56
+                        Layout.alignment: Qt.AlignTop
+                    }
+
+                    Text {
+                        text: qsTr("监控网络速度和流量")
+                        font.pixelSize: 12
+                        color: "#333333"
                         Layout.fillWidth: true
                         wrapMode: Text.WordWrap
                     }
+                }
+
+                // 仓库行：URL 无空格，需 WrapAnywhere 才能在窄宽度下正确折行
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 0
 
                     Text {
-                        text: qsTr("仓库：git.jokul.space/Jokul/JNetApplet")
+                        text: qsTr("仓库")
+                        font.pixelSize: 12
+                        color: "#0081FF"
+                        Layout.preferredWidth: 56
+                        Layout.alignment: Qt.AlignTop
+                    }
+
+                    Text {
+                        text: "git.jokul.space/Jokul/JNetApplet"
                         font.pixelSize: 11
                         color: "#999999"
                         Layout.fillWidth: true
-                        wrapMode: Text.WordWrap
+                        wrapMode: Text.WrapAnywhere
                     }
                 }
             }
+
+            // 弹性空间：吸收多余高度，保证底部内边距固定为 16px
+            Item {
+                Layout.fillHeight: true
+            }
+
+            // 底部内边距
+            Item {
+                Layout.preferredHeight: 16
+            }
         }
     }
 }