style: About 窗口改用 DTK 原生风格，键值对信息布局
This commit is contained in:
@@ -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
|
||||
@@ -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,46 +119,127 @@ 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user