Jokul/JNetApplet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: 重新设计左键弹窗布局

Browse Source 
采用通透分区方案，去掉自绘卡片背景改用分隔线+留白划分四区：
接口信息（含类型图标）/ 实时速度（24px 锚点）/ 累计流量 / 接口切换
速度数值与单位拆分显示，chip 未选中态改透明+边框
适配用户 textColor（仅主要文字跟随）、预留 fontScale 字号缩放扩展点
This commit is contained in:
Jokul
2026-08-08 20:15:01 +08:00
parent d1b222486b
commit 483c0f2ee6
2 changed files with 373 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/components/NetworkPopup.qml
+184 -172
View File
@@ -3,9 +3,12 @@
// SPDX-License-Identifier: LGPL-3.0-or-later
// 网络速度监控弹窗内容组件
// 展示实时速度、总量统计、网卡切换 chip 列表；
// 由 networkview.qml 的 PanelPopup 实例化，传入 applet 属性；
// 通透分区布局：去掉自绘卡片背景，用分隔线+留白划分四个区域
// （接口信息 / 实时速度 / 累计流量 / 接口切换），速度数字放大为视觉锚点
// 由 networkview.qml 的 PanelPopup 实例化，传入 applet 属性
// 毛玻璃背景、圆角、阴影由 PanelPopup 自动提供，本组件不自绘背景
// 颜色与格式化函数统一取自同目录 NetCommon.qml（common.xxx），数据由 applet 提供
// 可配置适配：primaryText 跟随用户 textColor、fontScale 预留字号缩放扩展点
// 设计原因：PanelPopup 是 dock 上下文类型，不能作为独立组件根元素，
// 因此本组件用 Control 作为根，由 networkview.qml 的 PanelPopup 包裹
@@ -19,8 +22,7 @@ import "."
Control {
id: popup
// 公共颜色与格式化函数：集中定义于同目录 NetCommon.qml，
// 与 networkview.qml、TrafficChartWindow 共享同一份实现，消除跨组件重复定义
// 公共颜色与格式化函数：集中定义于同目录 NetCommon.qml
NetCommon { id: common }
// C++ 后端对象，提供速度/接口/IP 等所有数据
@@ -38,25 +40,32 @@ Control {
readonly property string ipv6Address: applet ? (applet.ipv6Address || "") : ""
readonly property var networkInterfaces: applet ? (applet.networkInterfaces || []) : []
// 弹窗颜色别名：转发 common 的公共颜色（派生自 DTK 系统调色板 windowText，
// 主题适配的设计原因见 NetCommon.qml 文件头注释），保持下游 popup.xxx 引用不变
readonly property color primaryText: common.primaryText
// 用户自定义字体色：非空时覆盖 primaryText，空串回退 DTK 调色板派生
// 仅作用于主要文字（接口名、速度数值、累计数值、chip 未选中文字）
// secondaryText/tertiaryText/强调色不跟随，保持系统主题层次不崩
readonly property string userTextColor: applet ? (applet.textColor || "") : ""
readonly property color primaryText: userTextColor.length > 0
? Qt.rgba(userTextColor.r, userTextColor.g, userTextColor.b, 0.95)
: common.primaryText
// 次要/三级文字与卡片边框仍从 common 取 DTK 派生值，不跟随用户色
readonly property color secondaryText: common.secondaryText
readonly property color tertiaryText: common.tertiaryText
readonly property color cardBackground: common.cardBackground
readonly property color cardBorder: common.cardBorder
// 强调色别名：下载蓝、上传绿，是面板的主视觉区分
// 强调色：下载蓝、上传绿，是面板的主视觉区分
readonly property color accentBlue: common.accentBlue
readonly property color accentBlueLight: common.accentBlueLight
readonly property color accentGreen: common.accentGreen
readonly property color accentGreenLight: common.accentGreenLight
// 上传值颜色：固定绿色，不做高速警示
// 下载值颜色带阈值逻辑（>10MB/s 红、>1MB/s 橙、否则蓝），已提取为
// common.downloadValueColor(speed) 函数，在使用处直接传入 downloadSpeed 调用
readonly property color uploadValueColor: common.uploadValueColor
// 字号缩放因子：默认 1.0，后续 C++ 后端新增 applet.fontScale 后自动绑定
// 所有字号 = 基准字号 × fontScale，实现全局字号调节
// 当前 applet.fontScale 尚不存在，恒为 1.0，视觉无变化
readonly property real fontScale: (applet && applet.fontScale !== undefined)
? applet.fontScale : 1.0
// 排序后的接口列表：物理网卡在前，虚拟网卡在后，各自按名称排序
// 设计原因：保持稳定排序，活动接口不再移到最前，避免切换网卡时 chip 顺序跳动；
// 活动 chip 若被截断，由 chipFlickable 自动滚动露出完整样式；
@@ -80,82 +89,95 @@ Control {
chipFlickable.scrollToActiveChip(animated)
}
padding: 16
padding: 12
contentItem: ColumnLayout {
spacing: 12
// 标题栏：标题在上，网卡名+IP 在卡片底色背景内
Item {
Layout.fillWidth: true
Layout.preferredHeight: 72
spacing: 10
// ==================== 占位态：未检测到接口 ====================
// 占位时只显示警告图标+文字，不显示其他分区和分隔线
ColumnLayout {
anchors.centerIn: parent
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: 80
spacing: 6
visible: !popup.ready
Text {
text: qsTr("Network Speed Monitor")
font.pixelSize: 15
font.weight: Font.Bold
color: popup.primaryText
text: "⚠"
font.pixelSize: Math.round(40 * popup.fontScale)
color: popup.tertiaryText
Layout.alignment: Qt.AlignHCenter
}
// 网卡名 + IP 地址卡片背景
Rectangle {
Text {
text: qsTr("No network interface detected")
font.pixelSize: Math.round(14 * popup.fontScale)
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: 300
// 有 IPv6 时增高以容纳第三行；无 IPv6 时保持原 40px
Layout.preferredHeight: popup.ipv6Address ? 54 : 40
color: popup.cardBackground
radius: 8
border.width: 1
border.color: popup.cardBorder
}
}
// ==================== 分区1：接口信息 ====================
// 类型图标 + 接口名 + IPv4 一行，IPv6 截断显示一行
ColumnLayout {
Layout.fillWidth: true
spacing: 4
visible: popup.ready
ColumnLayout {
anchors.centerIn: parent
spacing: 0
// 行1：类型图标 + 接口名 + · + IPv4
Text {
text: popup.activeInterface
font.pixelSize: 11
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Math.round(13 * popup.fontScale)
color: popup.secondaryText
text: {
var icon = common.interfaceIcon(popup.activeInterface)
var parts = icon + " " + popup.activeInterface
if (popup.ipAddress) parts += " · " + popup.ipAddress
return parts
}
}
// 行2：IPv6 地址（超长截断 + hover tooltip 显示完整地址）
Text {
text: popup.ipAddress ? qsTr("IPv4: ") + popup.ipAddress : ""
font.pixelSize: 13
color: popup.secondaryText
visible: popup.ipAddress !== ""
Layout.alignment: Qt.AlignHCenter
}
// IPv6 全球地址行，无 IPv6 时隐藏不占位
Text {
text: popup.ipv6Address ? qsTr("IPv6: ") + popup.ipv6Address : ""
font.pixelSize: 13
color: popup.secondaryText
Layout.fillWidth: true
Layout.maximumWidth: 300
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Math.round(12 * popup.fontScale)
color: popup.tertiaryText
visible: popup.ipv6Address !== ""
Layout.alignment: Qt.AlignHCenter
}
}
text: popup.ipv6Address ? qsTr("IPv6: ") + popup.ipv6Address : ""
elide: Text.ElideRight
ToolTip.text: popup.ipv6Address
ToolTip.visible: ipv6Mouse.containsMouse && popup.ipv6Address !== ""
ToolTip.delay: 300
MouseArea {
id: ipv6Mouse
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
}
}
}
// 实时速度卡片：双列布局，每列内容在各自半区内水平垂直居中
// 设计原因：用显式 anchor 分两个等宽半区，比 RowLayout+fillWidth 更可靠，
// 确保下载/上传内容各自在左/右半区正中显示
// 分隔线1
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 110
color: popup.cardBackground
radius: 12
border.width: 1
border.color: popup.cardBorder
Layout.preferredHeight: 1
color: popup.cardBorder
visible: popup.ready
}
// ==================== 分区2：实时速度（视觉锚点） ====================
// 双栏等宽，下载左半区、上传右半区，中间靠留白区分无竖线
Item {
Layout.fillWidth: true
Layout.preferredHeight: 60
visible: popup.ready
// 下载半区（左半）
Item {
@@ -163,55 +185,47 @@ Control {
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.leftMargin: 12
width: (parent.width - 1) / 2 - 12
width: parent.width / 2
ColumnLayout {
anchors.centerIn: parent
spacing: 4
Rectangle {
width: 32
height: 32
radius: 16
color: popup.accentBlueLight
Layout.alignment: Qt.AlignHCenter
Text {
anchors.centerIn: parent
text: "↓"
font.pixelSize: 18
font.weight: Font.Bold
color: popup.accentBlue
}
}
spacing: 2
// 下载标签
Text {
text: qsTr("Download")
font.pixelSize: 11
font.pixelSize: Math.round(12 * popup.fontScale)
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
}
// 箭头 + 数值（大号粗体）+ 单位（小号）
RowLayout {
spacing: 2
Layout.alignment: Qt.AlignHCenter
Text {
text: common.formatSpeed(popup.downloadSpeed)
font.pixelSize: 18
text: "↓"
font.pixelSize: Math.round(24 * popup.fontScale)
font.weight: Font.Bold
color: common.downloadValueColor(popup.downloadSpeed)
Layout.alignment: Qt.AlignHCenter
}
}
}
// 中间分隔线
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 12
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
width: 1
color: popup.cardBorder
Text {
text: common.formatSpeedValue(popup.downloadSpeed)
font.pixelSize: Math.round(24 * popup.fontScale)
font.weight: Font.Bold
color: common.downloadValueColor(popup.downloadSpeed)
}
Text {
text: common.formatSpeedUnit(popup.downloadSpeed)
font.pixelSize: Math.round(13 * popup.fontScale)
color: common.downloadValueColor(popup.downloadSpeed)
Layout.alignment: Qt.AlignBaseline
}
}
}
}
// 上传半区（右半）
@@ -220,95 +234,118 @@ Control {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.rightMargin: 12
width: (parent.width - 1) / 2 - 12
width: parent.width / 2
ColumnLayout {
anchors.centerIn: parent
spacing: 4
Rectangle {
width: 32
height: 32
radius: 16
color: popup.accentGreenLight
Layout.alignment: Qt.AlignHCenter
Text {
anchors.centerIn: parent
text: "↑"
font.pixelSize: 18
font.weight: Font.Bold
color: popup.accentGreen
}
}
spacing: 2
// 上传标签
Text {
text: qsTr("Upload")
font.pixelSize: 11
font.pixelSize: Math.round(12 * popup.fontScale)
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
}
// 箭头 + 数值（大号粗体）+ 单位（小号）
RowLayout {
spacing: 2
Layout.alignment: Qt.AlignHCenter
Text {
text: common.formatSpeed(popup.uploadSpeed)
font.pixelSize: 18
text: "↑"
font.pixelSize: Math.round(24 * popup.fontScale)
font.weight: Font.Bold
color: popup.uploadValueColor
Layout.alignment: Qt.AlignHCenter
}
Text {
text: common.formatSpeedValue(popup.uploadSpeed)
font.pixelSize: Math.round(24 * popup.fontScale)
font.weight: Font.Bold
color: popup.uploadValueColor
}
Text {
text: common.formatSpeedUnit(popup.uploadSpeed)
font.pixelSize: Math.round(13 * popup.fontScale)
color: popup.uploadValueColor
Layout.alignment: Qt.AlignBaseline
}
}
}
}
}
// 总量统计：单行紧凑
// 分隔线2
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 44
color: popup.cardBackground
radius: 12
border.width: 1
border.color: popup.cardBorder
Layout.preferredHeight: 1
color: popup.cardBorder
visible: popup.ready
}
// ==================== 分区3：累计流量 ====================
// 单行紧凑：总计标签 + 下载箭头/数值 + 上传箭头/数值
RowLayout {
anchors.fill: parent
anchors.margins: 12
Layout.fillWidth: true
spacing: 8
visible: popup.ready
Item { Layout.fillWidth: true }
Text {
text: qsTr("Total")
font.pixelSize: 11
font.weight: Font.Bold
color: popup.secondaryText
font.pixelSize: Math.round(12 * popup.fontScale)
color: popup.tertiaryText
}
Text {
text: "↓ " + common.formatTotal(popup.totalDownload)
font.pixelSize: 12
text: "↓"
font.pixelSize: Math.round(12 * popup.fontScale)
font.weight: Font.Bold
color: popup.accentBlue
}
Text {
text: common.formatTotal(popup.totalDownload)
font.pixelSize: Math.round(13 * popup.fontScale)
color: popup.primaryText
}
Text {
text: "↑ " + common.formatTotal(popup.totalUpload)
font.pixelSize: 12
text: "↑"
font.pixelSize: Math.round(12 * popup.fontScale)
font.weight: Font.Bold
color: popup.accentGreen
}
Text {
text: common.formatTotal(popup.totalUpload)
font.pixelSize: Math.round(13 * popup.fontScale)
color: popup.primaryText
}
Item { Layout.fillWidth: true }
}
// 分隔线3
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: popup.cardBorder
visible: popup.ready
}
// 接口切换 chip 列表：水平滚动，物理网卡在前、虚拟网卡在后，顺序稳定不随切换变化
// ==================== 分区4：接口切换 chip 列表 ====================
// 水平滚动，物理网卡在前、虚拟网卡在后，顺序稳定不随切换变化
// chip 少时分散撑满一行；chip 多超出宽度时固定宽度 + 水平滚动
// 活动 chip 不在可视区域或被截断时，自动滚动露出完整样式（见 scrollToActiveChip）
Flickable {
id: chipFlickable
Layout.fillWidth: true
// 高度需容纳 chip（28px）+ 水平滚动条（~6px）+ 上下间距，
// 此前 32px 仅剩 4px 给滚动条，导致滚动条无法正常显示
// 高度需容纳 chip（28px）+ 水平滚动条（~6px）+ 上下间距
Layout.preferredHeight: 40
visible: popup.ready && popup.networkInterfaces.length > 1
contentWidth: Math.max(chipRow.width, width)
@@ -387,21 +424,25 @@ Control {
width: Math.max(chipFlickable.equalChipWidth, chipText.implicitWidth + 24)
height: 28
radius: 8
// 选中态：蓝色填充+蓝边框；未选中态：透明背景+cardBorder 边框
// hover 态：边框变蓝、文字变蓝，提供清晰交互反馈
color: modelData === popup.activeInterface
? popup.accentBlue
: (chipMouse.containsMouse ? popup.accentBlueLight : popup.cardBackground)
: "transparent"
border.width: 1
border.color: modelData === popup.activeInterface
? popup.accentBlue
: popup.cardBorder
: (chipMouse.containsMouse ? popup.accentBlue : popup.cardBorder)
Text {
id: chipText
anchors.centerIn: parent
text: modelData
font.pixelSize: 11
font.pixelSize: Math.round(12 * popup.fontScale)
font.weight: modelData === popup.activeInterface ? Font.Bold : Font.Normal
color: modelData === popup.activeInterface ? "white" : popup.primaryText
color: modelData === popup.activeInterface
? "white"
: (chipMouse.containsMouse ? popup.accentBlue : popup.primaryText)
}
MouseArea {
@@ -434,36 +475,7 @@ Control {
}
}
// 未检测到接口占位
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 80
color: popup.cardBackground
radius: 12
border.width: 1
border.color: popup.cardBorder
visible: !popup.ready
ColumnLayout {
anchors.centerIn: parent
spacing: 6
Text {
text: "⚠"
font.pixelSize: 24
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
}
Text {
text: qsTr("No network interface detected")
font.pixelSize: 12
color: popup.secondaryText
Layout.alignment: Qt.AlignHCenter
}
}
}
// 填充剩余空间，将内容推至顶部
Item { Layout.fillHeight: true }
}
}
package/networkview.qml
+2 -2
View File
@@ -264,8 +264,8 @@ AppletItem {
// 弹窗内容由 NetworkPopup.qml 提供，传入 applet，内部自行派生颜色和数据
PanelPopup {
id: networkPopup
width: 360
height: 320
width: 330
height: 250
popupX: DockPanelPositioner.x
popupY: DockPanelPositioner.y