refactor: 拆分弹窗到独立组件 NetworkPopup.qml
将 networkview.qml 中 PanelPopup 弹窗内容提取到独立组件 package/components/NetworkPopup.qml，减少主文件约 400 行。 PanelPopup 是 dock 上下文类型，不能作为独立组件根元素，因此 NetworkPopup.qml 用 Control 作为根（只含弹窗内容），由 networkview.qml 的 PanelPopup 壳包裹，定位和可见性管理在壳层处理。
This commit is contained in:
@@ -0,0 +1,503 @@
|
|||||||
|
// SPDX-FileCopyrightText: 2024 MyCompany
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||||
|
|
||||||
|
// 网络速度监控弹窗内容组件
|
||||||
|
// 展示实时速度、总量统计、网卡切换 chip 列表；
|
||||||
|
// 由 networkview.qml 的 PanelPopup 实例化，传入 applet 属性，内部自行派生颜色和数据
|
||||||
|
// 设计原因：PanelPopup 是 dock 上下文类型，不能作为独立组件根元素，
|
||||||
|
// 因此本组件用 Control 作为根，由 networkview.qml 的 PanelPopup 包裹
|
||||||
|
|
||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
import org.deepin.ds.dock 1.0
|
||||||
|
import org.deepin.dtk 1.0
|
||||||
|
|
||||||
|
Control {
|
||||||
|
id: popup
|
||||||
|
|
||||||
|
// C++ 后端对象，提供速度/接口/IP 等所有数据
|
||||||
|
property var applet: null
|
||||||
|
|
||||||
|
readonly property bool ready: applet ? applet.ready : false
|
||||||
|
readonly property real downloadSpeed: applet ? applet.downloadSpeed : 0
|
||||||
|
readonly property real uploadSpeed: applet ? applet.uploadSpeed : 0
|
||||||
|
readonly property real totalDownload: applet ? applet.totalDownload : 0
|
||||||
|
readonly property real totalUpload: applet ? applet.totalUpload : 0
|
||||||
|
readonly property string activeInterface: applet ? (applet.activeInterface || "") : ""
|
||||||
|
// 活动接口的 IPv4 地址，由 C++ 后端 detectIpAddress 持续更新
|
||||||
|
readonly property string ipAddress: applet ? (applet.ipAddress || "") : ""
|
||||||
|
// 活动接口的 IPv6 全球地址，由 C++ 后端 detectIpAddress 持续更新
|
||||||
|
readonly property string ipv6Address: applet ? (applet.ipv6Address || "") : ""
|
||||||
|
readonly property var networkInterfaces: applet ? (applet.networkInterfaces || []) : []
|
||||||
|
|
||||||
|
// 弹窗的颜色全部派生自 DockPalette.iconTextPalette，与任务栏颜色独立
|
||||||
|
// 设计原因：PanelPopup 不继承 AppletItem 的颜色属性，需要自行派生
|
||||||
|
property Palette basePalette: DockPalette.iconTextPalette
|
||||||
|
readonly property color primaryText: Qt.rgba(basePalette.r, basePalette.g, basePalette.b, 0.95)
|
||||||
|
readonly property color secondaryText: Qt.rgba(basePalette.r, basePalette.g, basePalette.b, 0.80)
|
||||||
|
readonly property color tertiaryText: Qt.rgba(basePalette.r, basePalette.g, basePalette.b, 0.65)
|
||||||
|
readonly property color cardBackground: Qt.rgba(basePalette.r, basePalette.g, basePalette.b, 0.06)
|
||||||
|
readonly property color cardBorder: Qt.rgba(basePalette.r, basePalette.g, basePalette.b, 0.10)
|
||||||
|
|
||||||
|
// 强调色：下载蓝、上传绿，是面板的主视觉区分
|
||||||
|
readonly property color accentBlue: Qt.rgba(20 / 255, 80 / 255, 160 / 255, 1)
|
||||||
|
readonly property color accentBlueLight: Qt.rgba(20 / 255, 80 / 255, 160 / 255, 0.12)
|
||||||
|
readonly property color accentGreen: Qt.rgba(22 / 255, 163 / 255, 74 / 255, 1)
|
||||||
|
readonly property color accentGreenLight: Qt.rgba(22 / 255, 163 / 255, 74 / 255, 0.12)
|
||||||
|
|
||||||
|
// 高速警示色：下载速度超过阈值时由蓝转橙再转红
|
||||||
|
readonly property color accentOrange: Qt.rgba(245 / 255, 158 / 255, 11 / 255, 1)
|
||||||
|
readonly property color accentRed: Qt.rgba(220 / 255, 38 / 255, 38 / 255, 1)
|
||||||
|
|
||||||
|
// 下载值颜色：保留原有阈值逻辑（>10MB/s 红、>1MB/s 橙、否则蓝），仅作用于下载值
|
||||||
|
readonly property color downloadValueColor: {
|
||||||
|
if (downloadSpeed > 10 * 1024 * 1024) return accentRed
|
||||||
|
if (downloadSpeed > 1 * 1024 * 1024) return accentOrange
|
||||||
|
return accentBlue
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传值颜色：固定绿色，不做高速警示
|
||||||
|
readonly property color uploadValueColor: accentGreen
|
||||||
|
|
||||||
|
// 判断是否为物理网卡（QML 侧排序用，与 C++ isPhysicalInterface 逻辑一致）
|
||||||
|
function isPhysicalIf(name) {
|
||||||
|
return name.startsWith("wlp") || name.startsWith("wlan")
|
||||||
|
|| name.startsWith("enp") || name.startsWith("eth")
|
||||||
|
}
|
||||||
|
|
||||||
|
// 排序后的接口列表：物理网卡在前，虚拟网卡在后，各自按名称排序
|
||||||
|
// 设计原因：保持稳定排序，活动接口不再移到最前，避免切换网卡时 chip 顺序跳动；
|
||||||
|
// 活动 chip 若被截断，由 chipFlickable 自动滚动露出完整样式
|
||||||
|
readonly property var sortedInterfaces: {
|
||||||
|
if (!popup.ready || popup.networkInterfaces.length === 0) return []
|
||||||
|
var physical = []
|
||||||
|
var virtual = []
|
||||||
|
for (var i = 0; i < popup.networkInterfaces.length; i++) {
|
||||||
|
var name = popup.networkInterfaces[i]
|
||||||
|
if (popup.isPhysicalIf(name)) physical.push(name)
|
||||||
|
else virtual.push(name)
|
||||||
|
}
|
||||||
|
physical.sort()
|
||||||
|
virtual.sort()
|
||||||
|
return physical.concat(virtual)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化速度显示（带单位，用于弹出面板，信息更完整）
|
||||||
|
// 最小单位为 KB，与 formatSpeedShort 保持一致；所有级别保留 2 位小数
|
||||||
|
function formatSpeed(bytesPerSec) {
|
||||||
|
if (bytesPerSec < 1024 * 1024) {
|
||||||
|
return (bytesPerSec / 1024).toFixed(2) + " KB/s"
|
||||||
|
} else if (bytesPerSec < 1024 * 1024 * 1024) {
|
||||||
|
return (bytesPerSec / (1024 * 1024)).toFixed(2) + " MB/s"
|
||||||
|
} else {
|
||||||
|
return (bytesPerSec / (1024 * 1024 * 1024)).toFixed(2) + " GB/s"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化总量显示（用于弹出面板的累计统计）
|
||||||
|
function formatTotal(bytes) {
|
||||||
|
if (bytes < 1024) {
|
||||||
|
return bytes.toFixed(0) + " B"
|
||||||
|
} else if (bytes < 1024 * 1024) {
|
||||||
|
return (bytes / 1024).toFixed(1) + " KB"
|
||||||
|
} else if (bytes < 1024 * 1024 * 1024) {
|
||||||
|
return (bytes / (1024 * 1024)).toFixed(1) + " MB"
|
||||||
|
} else {
|
||||||
|
return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 供外部调用：popup 打开时滚动到活动 chip
|
||||||
|
function scrollToActiveChip(animated) {
|
||||||
|
chipFlickable.scrollToActiveChip(animated)
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 16
|
||||||
|
|
||||||
|
contentItem: ColumnLayout {
|
||||||
|
spacing: 12
|
||||||
|
|
||||||
|
// 标题栏：标题在上，网卡名+IP 在卡片底色背景内
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: 72
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: 6
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: qsTr("网络速度监控")
|
||||||
|
font.pixelSize: 15
|
||||||
|
font.weight: Font.Bold
|
||||||
|
color: popup.primaryText
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
// 网卡名 + IP 地址卡片背景
|
||||||
|
Rectangle {
|
||||||
|
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
|
||||||
|
visible: popup.ready
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: popup.activeInterface
|
||||||
|
font.pixelSize: 11
|
||||||
|
color: popup.secondaryText
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
visible: popup.ipv6Address !== ""
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 实时速度卡片：双列布局，每列内容在各自半区内水平垂直居中
|
||||||
|
// 设计原因：用显式 anchor 分两个等宽半区，比 RowLayout+fillWidth 更可靠，
|
||||||
|
// 确保下载/上传内容各自在左/右半区正中显示
|
||||||
|
Rectangle {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: 110
|
||||||
|
color: popup.cardBackground
|
||||||
|
radius: 12
|
||||||
|
border.width: 1
|
||||||
|
border.color: popup.cardBorder
|
||||||
|
|
||||||
|
// 下载半区（左半）
|
||||||
|
Item {
|
||||||
|
id: downloadHalf
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.leftMargin: 12
|
||||||
|
width: (parent.width - 1) / 2 - 12
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: qsTr("下载")
|
||||||
|
font.pixelSize: 11
|
||||||
|
color: popup.secondaryText
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: popup.formatSpeed(popup.downloadSpeed)
|
||||||
|
font.pixelSize: 18
|
||||||
|
font.weight: Font.Bold
|
||||||
|
color: popup.downloadValueColor
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传半区（右半）
|
||||||
|
Item {
|
||||||
|
id: uploadHalf
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.rightMargin: 12
|
||||||
|
width: (parent.width - 1) / 2 - 12
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: qsTr("上传")
|
||||||
|
font.pixelSize: 11
|
||||||
|
color: popup.secondaryText
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: popup.formatSpeed(popup.uploadSpeed)
|
||||||
|
font.pixelSize: 18
|
||||||
|
font.weight: Font.Bold
|
||||||
|
color: popup.uploadValueColor
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 总量统计：单行紧凑
|
||||||
|
Rectangle {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: 44
|
||||||
|
color: popup.cardBackground
|
||||||
|
radius: 12
|
||||||
|
border.width: 1
|
||||||
|
border.color: popup.cardBorder
|
||||||
|
visible: popup.ready
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
anchors.fill: parent
|
||||||
|
anchors.margins: 12
|
||||||
|
spacing: 8
|
||||||
|
|
||||||
|
Item { Layout.fillWidth: true }
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: qsTr("总计")
|
||||||
|
font.pixelSize: 11
|
||||||
|
font.weight: Font.Bold
|
||||||
|
color: popup.secondaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "↓ " + popup.formatTotal(popup.totalDownload)
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: popup.primaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "↑ " + popup.formatTotal(popup.totalUpload)
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: popup.primaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
Item { Layout.fillWidth: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 接口切换 chip 列表：水平滚动，物理网卡在前、虚拟网卡在后，顺序稳定不随切换变化
|
||||||
|
// chip 少时分散撑满一行；chip 多超出宽度时固定宽度 + 水平滚动
|
||||||
|
// 活动 chip 不在可视区域或被截断时，自动滚动露出完整样式（见 scrollToActiveChip）
|
||||||
|
Flickable {
|
||||||
|
id: chipFlickable
|
||||||
|
Layout.fillWidth: true
|
||||||
|
// 高度需容纳 chip（28px）+ 水平滚动条（~6px）+ 上下间距，
|
||||||
|
// 此前 32px 仅剩 4px 给滚动条，导致滚动条无法正常显示
|
||||||
|
Layout.preferredHeight: 40
|
||||||
|
visible: popup.ready && popup.networkInterfaces.length > 1
|
||||||
|
contentWidth: Math.max(chipRow.width, width)
|
||||||
|
contentHeight: chipRow.height
|
||||||
|
flickableDirection: Flickable.HorizontalFlick
|
||||||
|
clip: true
|
||||||
|
|
||||||
|
// 平滑滚动动画：直接赋值 contentX 会被 Flickable 的拖拽/回弹行为覆盖，
|
||||||
|
// 用 NumberAnimation 驱动 contentX 实现自动滚动，平滑且不冲突
|
||||||
|
NumberAnimation {
|
||||||
|
id: chipScrollAnim
|
||||||
|
target: chipFlickable
|
||||||
|
property: "contentX"
|
||||||
|
duration: 200
|
||||||
|
easing.type: Easing.OutCubic
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户开始拖拽/滑动时停止自动滚动，避免动画与用户操作争抢
|
||||||
|
onMovementStarted: chipScrollAnim.stop()
|
||||||
|
|
||||||
|
// 自动滚动使活动接口的 chip 完整可见：
|
||||||
|
// 列表顺序稳定后活动 chip 可能位于可视区域外或被截断，
|
||||||
|
// 切换接口或 popup 打开时调用，将其滚动露出完整样式。
|
||||||
|
// animated=false 用于 popup 刚打开时立即定位，跳过滚动过程
|
||||||
|
function scrollToActiveChip(animated) {
|
||||||
|
if (!visible || width <= 0) return
|
||||||
|
var idx = popup.sortedInterfaces.indexOf(popup.activeInterface)
|
||||||
|
if (idx < 0) return
|
||||||
|
var chip = chipRepeater.itemAt(idx)
|
||||||
|
if (!chip) return
|
||||||
|
var targetX = contentX
|
||||||
|
if (chip.x < contentX) {
|
||||||
|
// chip 在可视区左侧之外：回滚使 chip 左边缘与可视区左缘对齐
|
||||||
|
targetX = chip.x
|
||||||
|
} else if (chip.x + chip.width > contentX + width) {
|
||||||
|
// chip 在可视区右侧之外或被截断：滚动使 chip 右边缘与可视区右缘对齐
|
||||||
|
targetX = chip.x + chip.width - width
|
||||||
|
}
|
||||||
|
// 钳制到合法滚动范围 [0, contentWidth - width]，避免触发边界回弹
|
||||||
|
targetX = Math.max(0, Math.min(targetX, Math.max(0, contentWidth - width)))
|
||||||
|
if (Math.abs(targetX - contentX) < 1) return
|
||||||
|
chipScrollAnim.stop()
|
||||||
|
if (animated) {
|
||||||
|
chipScrollAnim.to = targetX
|
||||||
|
chipScrollAnim.start()
|
||||||
|
} else {
|
||||||
|
contentX = targetX
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 活动接口变化时（用户点击 chip 或后端自动切换）自动滚动露出活动 chip
|
||||||
|
Connections {
|
||||||
|
target: popup
|
||||||
|
function onActiveInterfaceChanged() {
|
||||||
|
chipFlickable.scrollToActiveChip(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 等宽分配宽度：假设所有 chip 等宽撑满时的单个宽度
|
||||||
|
readonly property real equalChipWidth: popup.sortedInterfaces.length > 0
|
||||||
|
? (width - 6 * (popup.sortedInterfaces.length - 1)) / popup.sortedInterfaces.length
|
||||||
|
: 0
|
||||||
|
|
||||||
|
Row {
|
||||||
|
id: chipRow
|
||||||
|
spacing: 6
|
||||||
|
|
||||||
|
Repeater {
|
||||||
|
id: chipRepeater
|
||||||
|
model: popup.sortedInterfaces
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
// 宽度取等宽和自然宽度的较大值：
|
||||||
|
// chip 少时 equalChipWidth > 自然宽度 -> 分散撑满一行
|
||||||
|
// chip 多时 自然宽度 > equalChipWidth -> 固定宽度 + 水平滚动
|
||||||
|
width: Math.max(chipFlickable.equalChipWidth, chipText.implicitWidth + 24)
|
||||||
|
height: 28
|
||||||
|
radius: 8
|
||||||
|
color: modelData === popup.activeInterface
|
||||||
|
? popup.accentBlue
|
||||||
|
: (chipMouse.containsMouse ? popup.accentBlueLight : popup.cardBackground)
|
||||||
|
border.width: 1
|
||||||
|
border.color: modelData === popup.activeInterface
|
||||||
|
? popup.accentBlue
|
||||||
|
: popup.cardBorder
|
||||||
|
|
||||||
|
Text {
|
||||||
|
id: chipText
|
||||||
|
anchors.centerIn: parent
|
||||||
|
text: modelData
|
||||||
|
font.pixelSize: 11
|
||||||
|
font.weight: modelData === popup.activeInterface ? Font.Bold : Font.Normal
|
||||||
|
color: modelData === popup.activeInterface ? "white" : popup.primaryText
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: chipMouse
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
hoverEnabled: true
|
||||||
|
onClicked: {
|
||||||
|
if (popup.applet) popup.applet.setActiveInterface(modelData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 自定义滚动条样式：默认 ScrollBar 在面板配色下可能不可见，
|
||||||
|
// 用 contentItem 显式绘制，颜色派生自 basePalette 适配深浅主题
|
||||||
|
ScrollBar.horizontal: ScrollBar {
|
||||||
|
id: chipScrollBar
|
||||||
|
policy: ScrollBar.AsNeeded
|
||||||
|
interactive: true
|
||||||
|
|
||||||
|
contentItem: Rectangle {
|
||||||
|
implicitHeight: 4
|
||||||
|
radius: 2
|
||||||
|
// 按压时加深、悬停时中等、默认稍淡，保证滚动条在深浅主题下均可见
|
||||||
|
color: chipScrollBar.pressed ? popup.secondaryText
|
||||||
|
: (chipScrollBar.hovered ? popup.secondaryText : popup.tertiaryText)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未检测到接口占位
|
||||||
|
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("未检测到网络接口")
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: popup.secondaryText
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item { Layout.fillHeight: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
+7
-394
@@ -301,7 +301,8 @@ AppletItem {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 弹出窗口
|
// 弹出窗口：PanelPopup 壳在此处（dock 上下文类型不能作为独立组件根元素），
|
||||||
|
// 弹窗内容由 NetworkPopup.qml 提供，传入 applet，内部自行派生颜色和数据
|
||||||
PanelPopup {
|
PanelPopup {
|
||||||
id: networkPopup
|
id: networkPopup
|
||||||
width: 360
|
width: 360
|
||||||
@@ -310,405 +311,17 @@ AppletItem {
|
|||||||
popupY: DockPanelPositioner.y
|
popupY: DockPanelPositioner.y
|
||||||
|
|
||||||
onPopupVisibleChanged: {
|
onPopupVisibleChanged: {
|
||||||
// 仅控制 tooltip 关闭，不触发 refresh。
|
|
||||||
// C++ 后端 m_refreshTimer 持续更新，popup 通过属性绑定自动显示最新数据。
|
|
||||||
if (popupVisible) {
|
if (popupVisible) {
|
||||||
toolTip.close()
|
toolTip.close()
|
||||||
// popup 打开时确保活动 chip 完整可见：直接定位不播放动画，避免看到打开瞬间的滚动；
|
// popup 打开时确保活动 chip 完整可见
|
||||||
// Qt.callLater 等待首次打开时 Repeater 完成实例化与布局后再计算位置
|
Qt.callLater(function() { popupContent.scrollToActiveChip(false) })
|
||||||
Qt.callLater(function() { chipFlickable.scrollToActiveChip(false) })
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Control {
|
NetworkPopup {
|
||||||
id: popupContainer
|
id: popupContent
|
||||||
|
applet: root.applet
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
padding: 16
|
|
||||||
|
|
||||||
contentItem: ColumnLayout {
|
|
||||||
spacing: 12
|
|
||||||
|
|
||||||
// 标题栏：标题在上，网卡名+IP 在卡片底色背景内
|
|
||||||
Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: 72
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 6
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: qsTr("网络速度监控")
|
|
||||||
font.pixelSize: 15
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.primaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
// 网卡名 + IP 地址卡片背景
|
|
||||||
Rectangle {
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
// 有 IPv6 时增高以容纳第三行；无 IPv6 时保持原 40px
|
|
||||||
Layout.preferredHeight: root.ipv6Address ? 54 : 40
|
|
||||||
color: root.cardBackground
|
|
||||||
radius: 8
|
|
||||||
border.width: 1
|
|
||||||
border.color: root.cardBorder
|
|
||||||
visible: root.ready
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 0
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.activeInterface
|
|
||||||
font.pixelSize: 11
|
|
||||||
color: root.secondaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.ipAddress ? qsTr("IPv4：") + root.ipAddress : ""
|
|
||||||
font.pixelSize: 13
|
|
||||||
color: root.secondaryText
|
|
||||||
visible: root.ipAddress !== ""
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
// IPv6 全球地址行，无 IPv6 时隐藏不占位
|
|
||||||
Text {
|
|
||||||
text: root.ipv6Address ? qsTr("IPv6：") + root.ipv6Address : ""
|
|
||||||
font.pixelSize: 13
|
|
||||||
color: root.secondaryText
|
|
||||||
visible: root.ipv6Address !== ""
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 实时速度卡片：双列布局，每列内容在各自半区内水平垂直居中
|
|
||||||
// 设计原因：用显式 anchor 分两个等宽半区，比 RowLayout+fillWidth 更可靠，
|
|
||||||
// 确保下载/上传内容各自在左/右半区正中显示
|
|
||||||
Rectangle {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: 110
|
|
||||||
color: root.cardBackground
|
|
||||||
radius: 12
|
|
||||||
border.width: 1
|
|
||||||
border.color: root.cardBorder
|
|
||||||
|
|
||||||
// 下载半区（左半）
|
|
||||||
Item {
|
|
||||||
id: downloadHalf
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.leftMargin: 12
|
|
||||||
width: (parent.width - 1) / 2 - 12
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 4
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
width: 32
|
|
||||||
height: 32
|
|
||||||
radius: 16
|
|
||||||
color: root.accentBlueLight
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
|
|
||||||
Text {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: "↓"
|
|
||||||
font.pixelSize: 18
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.accentBlue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: qsTr("下载")
|
|
||||||
font.pixelSize: 11
|
|
||||||
color: root.secondaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.formatSpeed(root.downloadSpeed)
|
|
||||||
font.pixelSize: 18
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.downloadValueColor
|
|
||||||
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: root.cardBorder
|
|
||||||
}
|
|
||||||
|
|
||||||
// 上传半区（右半）
|
|
||||||
Item {
|
|
||||||
id: uploadHalf
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.rightMargin: 12
|
|
||||||
width: (parent.width - 1) / 2 - 12
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 4
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
width: 32
|
|
||||||
height: 32
|
|
||||||
radius: 16
|
|
||||||
color: root.accentGreenLight
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
|
|
||||||
Text {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: "↑"
|
|
||||||
font.pixelSize: 18
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.accentGreen
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: qsTr("上传")
|
|
||||||
font.pixelSize: 11
|
|
||||||
color: root.secondaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: root.formatSpeed(root.uploadSpeed)
|
|
||||||
font.pixelSize: 18
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.uploadValueColor
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 总量统计：单行紧凑
|
|
||||||
Rectangle {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: 44
|
|
||||||
color: root.cardBackground
|
|
||||||
radius: 12
|
|
||||||
border.width: 1
|
|
||||||
border.color: root.cardBorder
|
|
||||||
visible: root.ready
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: 12
|
|
||||||
spacing: 8
|
|
||||||
|
|
||||||
Item { Layout.fillWidth: true }
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: qsTr("总计")
|
|
||||||
font.pixelSize: 11
|
|
||||||
font.weight: Font.Bold
|
|
||||||
color: root.secondaryText
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: "↓ " + root.formatTotal(root.totalDownload)
|
|
||||||
font.pixelSize: 12
|
|
||||||
color: root.primaryText
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: "↑ " + root.formatTotal(root.totalUpload)
|
|
||||||
font.pixelSize: 12
|
|
||||||
color: root.primaryText
|
|
||||||
}
|
|
||||||
|
|
||||||
Item { Layout.fillWidth: true }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 接口切换 chip 列表：水平滚动，物理网卡在前、虚拟网卡在后，顺序稳定不随切换变化
|
|
||||||
// chip 少时分散撑满一行；chip 多超出宽度时固定宽度 + 水平滚动
|
|
||||||
// 活动 chip 不在可视区域或被截断时，自动滚动露出完整样式（见 scrollToActiveChip）
|
|
||||||
Flickable {
|
|
||||||
id: chipFlickable
|
|
||||||
Layout.fillWidth: true
|
|
||||||
// 高度需容纳 chip（28px）+ 水平滚动条（~6px）+ 上下间距，
|
|
||||||
// 此前 32px 仅剩 4px 给滚动条，导致滚动条无法正常显示
|
|
||||||
Layout.preferredHeight: 40
|
|
||||||
visible: root.ready && root.networkInterfaces.length > 1
|
|
||||||
contentWidth: Math.max(chipRow.width, width)
|
|
||||||
contentHeight: chipRow.height
|
|
||||||
flickableDirection: Flickable.HorizontalFlick
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
// 平滑滚动动画：直接赋值 contentX 会被 Flickable 的拖拽/回弹行为覆盖，
|
|
||||||
// 用 NumberAnimation 驱动 contentX 实现自动滚动，平滑且不冲突
|
|
||||||
NumberAnimation {
|
|
||||||
id: chipScrollAnim
|
|
||||||
target: chipFlickable
|
|
||||||
property: "contentX"
|
|
||||||
duration: 200
|
|
||||||
easing.type: Easing.OutCubic
|
|
||||||
}
|
|
||||||
|
|
||||||
// 用户开始拖拽/滑动时停止自动滚动，避免动画与用户操作争抢
|
|
||||||
onMovementStarted: chipScrollAnim.stop()
|
|
||||||
|
|
||||||
// 自动滚动使活动接口的 chip 完整可见：
|
|
||||||
// 列表顺序稳定后活动 chip 可能位于可视区域外或被截断，
|
|
||||||
// 切换接口或 popup 打开时调用，将其滚动露出完整样式。
|
|
||||||
// animated=false 用于 popup 刚打开时立即定位，跳过滚动过程
|
|
||||||
function scrollToActiveChip(animated) {
|
|
||||||
if (!visible || width <= 0) return
|
|
||||||
var idx = root.sortedInterfaces.indexOf(root.activeInterface)
|
|
||||||
if (idx < 0) return
|
|
||||||
var chip = chipRepeater.itemAt(idx)
|
|
||||||
if (!chip) return
|
|
||||||
var targetX = contentX
|
|
||||||
if (chip.x < contentX) {
|
|
||||||
// chip 在可视区左侧之外：回滚使 chip 左边缘与可视区左缘对齐
|
|
||||||
targetX = chip.x
|
|
||||||
} else if (chip.x + chip.width > contentX + width) {
|
|
||||||
// chip 在可视区右侧之外或被截断：滚动使 chip 右边缘与可视区右缘对齐
|
|
||||||
targetX = chip.x + chip.width - width
|
|
||||||
}
|
|
||||||
// 钳制到合法滚动范围 [0, contentWidth - width]，避免触发边界回弹
|
|
||||||
targetX = Math.max(0, Math.min(targetX, Math.max(0, contentWidth - width)))
|
|
||||||
if (Math.abs(targetX - contentX) < 1) return
|
|
||||||
chipScrollAnim.stop()
|
|
||||||
if (animated) {
|
|
||||||
chipScrollAnim.to = targetX
|
|
||||||
chipScrollAnim.start()
|
|
||||||
} else {
|
|
||||||
contentX = targetX
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 活动接口变化时（用户点击 chip 或后端自动切换）自动滚动露出活动 chip
|
|
||||||
Connections {
|
|
||||||
target: root
|
|
||||||
function onActiveInterfaceChanged() {
|
|
||||||
chipFlickable.scrollToActiveChip(true)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 等宽分配宽度：假设所有 chip 等宽撑满时的单个宽度
|
|
||||||
readonly property real equalChipWidth: root.sortedInterfaces.length > 0
|
|
||||||
? (width - 6 * (root.sortedInterfaces.length - 1)) / root.sortedInterfaces.length
|
|
||||||
: 0
|
|
||||||
|
|
||||||
Row {
|
|
||||||
id: chipRow
|
|
||||||
spacing: 6
|
|
||||||
|
|
||||||
Repeater {
|
|
||||||
id: chipRepeater
|
|
||||||
model: root.sortedInterfaces
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
// 宽度取等宽和自然宽度的较大值：
|
|
||||||
// chip 少时 equalChipWidth > 自然宽度 -> 分散撑满一行
|
|
||||||
// chip 多时 自然宽度 > equalChipWidth -> 固定宽度 + 水平滚动
|
|
||||||
width: Math.max(chipFlickable.equalChipWidth, chipText.implicitWidth + 24)
|
|
||||||
height: 28
|
|
||||||
radius: 8
|
|
||||||
color: modelData === root.activeInterface
|
|
||||||
? root.accentBlue
|
|
||||||
: (chipMouse.containsMouse ? root.accentBlueLight : root.cardBackground)
|
|
||||||
border.width: 1
|
|
||||||
border.color: modelData === root.activeInterface
|
|
||||||
? root.accentBlue
|
|
||||||
: root.cardBorder
|
|
||||||
|
|
||||||
Text {
|
|
||||||
id: chipText
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: modelData
|
|
||||||
font.pixelSize: 11
|
|
||||||
font.weight: modelData === root.activeInterface ? Font.Bold : Font.Normal
|
|
||||||
color: modelData === root.activeInterface ? "white" : root.primaryText
|
|
||||||
}
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: chipMouse
|
|
||||||
anchors.fill: parent
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
hoverEnabled: true
|
|
||||||
onClicked: {
|
|
||||||
if (root.applet) root.applet.setActiveInterface(modelData)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 自定义滚动条样式：默认 ScrollBar 在面板配色下可能不可见，
|
|
||||||
// 用 contentItem 显式绘制，颜色派生自 basePalette 适配深浅主题
|
|
||||||
ScrollBar.horizontal: ScrollBar {
|
|
||||||
id: chipScrollBar
|
|
||||||
policy: ScrollBar.AsNeeded
|
|
||||||
interactive: true
|
|
||||||
|
|
||||||
contentItem: Rectangle {
|
|
||||||
implicitHeight: 4
|
|
||||||
radius: 2
|
|
||||||
// 按压时加深、悬停时中等、默认稍淡，保证滚动条在深浅主题下均可见
|
|
||||||
color: chipScrollBar.pressed ? root.secondaryText
|
|
||||||
: (chipScrollBar.hovered ? root.secondaryText : root.tertiaryText)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 未检测到接口占位
|
|
||||||
Rectangle {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: 80
|
|
||||||
color: root.cardBackground
|
|
||||||
radius: 12
|
|
||||||
border.width: 1
|
|
||||||
border.color: root.cardBorder
|
|
||||||
visible: !root.ready
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 6
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: "⚠"
|
|
||||||
font.pixelSize: 24
|
|
||||||
color: root.secondaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
text: qsTr("未检测到网络接口")
|
|
||||||
font.pixelSize: 12
|
|
||||||
color: root.secondaryText
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Item { Layout.fillHeight: true }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component.onCompleted: {
|
Component.onCompleted: {
|
||||||
|
|||||||
Reference in New Issue
Block a user