251 lines
8.2 KiB
QML
251 lines
8.2 KiB
QML
// SPDX-FileCopyrightText: 2024 MyCompany
|
||
//
|
||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||
|
||
// 关于窗口：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
|
||
|
||
Window {
|
||
id: root
|
||
|
||
// 对外依赖：关闭按钮 hover 态文字高亮色，由父组件传入
|
||
// 默认值与 networkview.qml 中 root.accentRed 一致，确保独立可用
|
||
property color accentColor: Qt.rgba(220 / 255, 38 / 255, 38 / 255, 1)
|
||
|
||
width: 320
|
||
height: 260
|
||
visible: false
|
||
flags: Qt.FramelessWindowHint | Qt.Window
|
||
modality: Qt.NonModal
|
||
color: "transparent"
|
||
|
||
onVisibleChanged: {
|
||
if (visible) {
|
||
x = (Screen.width - width) / 2
|
||
y = (Screen.height - height) / 2
|
||
}
|
||
}
|
||
|
||
// 窗口主体：白色圆角卡片，1px 浅灰边框模拟 DTK 窗口描边
|
||
Rectangle {
|
||
anchors.fill: parent
|
||
color: "#FFFFFF"
|
||
radius: 12
|
||
border.width: 1
|
||
border.color: "#E8E8E8"
|
||
|
||
ColumnLayout {
|
||
anchors.fill: parent
|
||
spacing: 0
|
||
|
||
// 自定义标题栏：左侧"关于"标题 + 右侧圆形关闭按钮，整栏可拖动窗口
|
||
Rectangle {
|
||
Layout.fillWidth: true
|
||
Layout.preferredHeight: 44
|
||
color: "transparent"
|
||
|
||
// 拖动层：声明在关闭按钮之前（位于其下方），避免遮挡按钮点击与 hover
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
drag.target: root
|
||
}
|
||
|
||
Text {
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 16
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
text: qsTr("关于")
|
||
font.pixelSize: 15
|
||
font.weight: Font.Bold
|
||
color: "#333333"
|
||
}
|
||
|
||
// 关闭按钮：28x28 圆形，hover 时淡红底 + 红色 ×（颜色由 accentColor 决定）
|
||
Rectangle {
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 12
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
width: 28
|
||
height: 28
|
||
radius: 14
|
||
color: aboutCloseMouse.containsMouse ? Qt.rgba(220 / 255, 38 / 255, 38 / 255, 0.15) : "transparent"
|
||
|
||
Text {
|
||
anchors.centerIn: parent
|
||
text: "×"
|
||
font.pixelSize: 20
|
||
font.weight: Font.Bold
|
||
color: aboutCloseMouse.containsMouse ? accentColor : "#666666"
|
||
}
|
||
|
||
MouseArea {
|
||
id: aboutCloseMouse
|
||
anchors.fill: parent
|
||
hoverEnabled: true
|
||
cursorShape: Qt.PointingHandCursor
|
||
onClicked: root.hide()
|
||
}
|
||
}
|
||
}
|
||
|
||
// 标题区上方间距
|
||
Item {
|
||
Layout.preferredHeight: 12
|
||
}
|
||
|
||
// 标题区：插件中文名 + 英文名，整体居中
|
||
// 注意：用 Layout.fillWidth + horizontalAlignment 而非 Layout.alignment，
|
||
// 后者在 ColumnLayout 内对 Text 不可靠（实测会左对齐贴边）
|
||
ColumnLayout {
|
||
Layout.fillWidth: true
|
||
spacing: 2
|
||
|
||
Text {
|
||
text: qsTr("网络速度监控")
|
||
font.pixelSize: 18
|
||
font.weight: Font.Bold
|
||
color: "#333333"
|
||
Layout.fillWidth: true
|
||
horizontalAlignment: Text.AlignHCenter
|
||
}
|
||
|
||
Text {
|
||
text: "JNetApplet"
|
||
font.pixelSize: 12
|
||
color: "#999999"
|
||
Layout.fillWidth: true
|
||
horizontalAlignment: Text.AlignHCenter
|
||
}
|
||
}
|
||
|
||
// 标题区下方间距
|
||
Item {
|
||
Layout.preferredHeight: 12
|
||
}
|
||
|
||
// 分隔线：左右留 24px 边距，与信息区对齐
|
||
Rectangle {
|
||
Layout.fillWidth: true
|
||
Layout.leftMargin: 24
|
||
Layout.rightMargin: 24
|
||
Layout.preferredHeight: 1
|
||
color: "#E8E8E8"
|
||
}
|
||
|
||
// 信息区上方间距
|
||
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: 12
|
||
color: "#0081FF"
|
||
Layout.preferredWidth: 56
|
||
Layout.alignment: Qt.AlignTop
|
||
}
|
||
|
||
Text {
|
||
text: "1.0"
|
||
font.pixelSize: 12
|
||
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: "Jokul"
|
||
font.pixelSize: 12
|
||
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("仓库")
|
||
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.WrapAnywhere
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹性空间：吸收多余高度，保证底部内边距固定为 16px
|
||
Item {
|
||
Layout.fillHeight: true
|
||
}
|
||
|
||
// 底部内边距
|
||
Item {
|
||
Layout.preferredHeight: 16
|
||
}
|
||
}
|
||
}
|
||
}
|