From e83fb0e2690706bec8ed44206c49b6841608a07c Mon Sep 17 00:00:00 2001 From: Jokul Date: Sun, 19 Jul 2026 18:02:53 +0800 Subject: [PATCH] =?UTF-8?q?style:=20About=20=E7=AA=97=E5=8F=A3=E6=94=B9?= =?UTF-8?q?=E7=94=A8=20DTK=20=E5=8E=9F=E7=94=9F=E9=A3=8E=E6=A0=BC=EF=BC=8C?= =?UTF-8?q?=E9=94=AE=E5=80=BC=E5=AF=B9=E4=BF=A1=E6=81=AF=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/components/AboutWindow.qml | 175 +++++++++++++++++++++-------- 1 file changed, 127 insertions(+), 48 deletions(-) diff --git a/package/components/AboutWindow.qml b/package/components/AboutWindow.qml index cd57167..43a908a 100644 --- a/package/components/AboutWindow.qml +++ b/package/components/AboutWindow.qml @@ -2,9 +2,10 @@ // // SPDX-License-Identifier: LGPL-3.0-or-later -// 关于窗口：独立顶层窗口，桌面居中弹出，展示插件信息 -// 从 networkview.qml 抽取，由父组件实例化并调用 show() 触发 -// 对外依赖：accentColor（关闭按钮 hover 高亮色），由父组件传入 +// 关于窗口：DTK 原生风格的独立顶层窗口，桌面居中弹出，展示插件信息 +// 设计要点：白色圆角卡片 + 键值对信息布局，信息标签使用 deepin 蓝（#0081FF）， +// 关闭按钮 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,78 +93,154 @@ Window { } } - // 内容区 + // 标题区上方间距 + Item { + Layout.preferredHeight: 12 + } + + // 标题区：插件中文名 + 英文名，整体居中 ColumnLayout { Layout.fillWidth: true - Layout.fillHeight: true - anchors.margins: 0 - spacing: 10 + spacing: 2 + + Text { + text: qsTr("网络速度监控") + font.pixelSize: 18 + font.weight: Font.Bold + color: "#333333" + Layout.alignment: Qt.AlignHCenter + } + + Text { + text: "JNetApplet" + font.pixelSize: 12 + color: "#999999" + Layout.alignment: Qt.AlignHCenter + } + } + + // 标题区下方间距 + Item { + Layout.preferredHeight: 12 + } + + // 分隔线：左右留 24px 边距，与信息区对齐 + Rectangle { + Layout.fillWidth: true Layout.leftMargin: 24 Layout.rightMargin: 24 - Layout.topMargin: 4 + Layout.preferredHeight: 1 + color: "#E8E8E8" + } - // 标题组：插件名 + 英文名紧凑排列 - ColumnLayout { - spacing: 2 - Layout.alignment: Qt.AlignHCenter + // 信息区上方间距 + Item { + Layout.preferredHeight: 12 + } + + // 信息区：键值对布局，左侧标签固定 56px 宽（deepin 蓝），右侧为值 + ColumnLayout { + Layout.fillWidth: true + Layout.leftMargin: 24 + Layout.rightMargin: 24 + spacing: 8 + + // 版本行 + RowLayout { + Layout.fillWidth: true + spacing: 0 Text { - text: qsTr("网络速度监控") - font.pixelSize: 18 - font.weight: Font.Bold + text: qsTr("版本") + font.pixelSize: 12 + color: "#0081FF" + Layout.preferredWidth: 56 + Layout.alignment: Qt.AlignTop + } + + Text { + text: "1.0" + font.pixelSize: 12 color: "#333333" - Layout.alignment: Qt.AlignHCenter - } - - Text { - text: "JNetApplet" - font.pixelSize: 12 - color: "#999999" - Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true } } - // 分隔线 - Rectangle { + // 作者行 + RowLayout { Layout.fillWidth: true - Layout.preferredHeight: 1 - color: "#e0e0e0" + spacing: 0 + + Text { + text: qsTr("作者") + font.pixelSize: 12 + color: "#0081FF" + Layout.preferredWidth: 56 + Layout.alignment: Qt.AlignTop + } + + Text { + text: "Jokul" + font.pixelSize: 12 + color: "#333333" + Layout.fillWidth: true + } } - // 信息行 - ColumnLayout { - spacing: 6 + // 描述行 + 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: qsTr("监控网络速度和流量") font.pixelSize: 12 - color: "#666666" - } - - Text { - text: qsTr("描述：监控网络速度和流量") - font.pixelSize: 12 - color: "#666666" + 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 + } } } }