diff --git a/package/components/NetCommon.qml b/package/components/NetCommon.qml index c8d9ed3..e9d5edf 100644 --- a/package/components/NetCommon.qml +++ b/package/components/NetCommon.qml @@ -79,4 +79,49 @@ QtObject { return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB" } } + + // 根据接口名返回类型图标（Unicode 符号），用于网络接口列表和弹窗接口信息区 + // 设计原因：项目未引入图标库，用 Text 渲染 Unicode 符号（与 ↓↑ 一致）； + // 所选符号均为 DejaVu/Noto 等常见字体覆盖的单色字形，避免彩色 emoji 破坏浅色主题观感 + function interfaceIcon(name) { + if (name === "lo") return "↻" // 本地回环：循环箭头 + if (name === "Meta") return "▢" // 虚拟接口：空心方块 + if (/^enp|^eth/.test(name)) return "⇄" // 有线网络：双向链路 + if (/^wlp|^wlan/.test(name)) return "∿" // 无线网络：信号波形 + if (/^docker|^veth/.test(name)) return "▣" // 容器网络：盒中盒 + if (/^br/.test(name)) return "⋈" // 桥接：连接 + if (/^tun|^tap/.test(name)) return "⚿" // VPN：钥匙 + if (/^virbr/.test(name)) return "⋈" // 虚拟桥接：同桥接 + return "◉" // 其他：通用网络节点 + } + + // 根据接口名返回类型描述，用于设置窗口网络接口列表和弹窗 tooltip + // 设计原因：用户面对多个网口时难以仅凭 enp3s0/wlp3s0 等命名判断用途， + // 加一行类型说明（有线/无线/VPN 等）降低认知负担 + function interfaceDescription(name) { + if (name === "lo") return qsTr("Loopback") + if (name === "Meta") return qsTr("Virtual Interface") + if (/^enp|^eth/.test(name)) return qsTr("Wired Network") + if (/^wlp|^wlan/.test(name)) return qsTr("Wireless Network") + if (/^docker|^veth/.test(name)) return qsTr("Container Network") + if (/^br/.test(name)) return qsTr("Bridge") + if (/^tun|^tap/.test(name)) return qsTr("VPN") + if (/^virbr/.test(name)) return qsTr("Virtual Bridge") + return qsTr("Other") + } + + // 拆分速度字符串为数值部分：formatSpeed 返回 "4.11 KB/s"，本函数返回 "4.11" + // 设计原因：弹窗速度区需将数值（大号粗体）与单位（小号）拆分显示以增强层次感 + function formatSpeedValue(bytesPerSec) { + var str = formatSpeed(bytesPerSec) + var idx = str.indexOf(' ') + return idx < 0 ? str : str.substring(0, idx) + } + + // 拆分速度字符串为单位部分：formatSpeed 返回 "4.11 KB/s"，本函数返回 "KB/s" + function formatSpeedUnit(bytesPerSec) { + var str = formatSpeed(bytesPerSec) + var idx = str.indexOf(' ') + return idx < 0 ? "" : str.substring(idx + 1) + } } diff --git a/package/components/NetworkPopup.qml b/package/components/NetworkPopup.qml index 9f3b157..9c93887 100644 --- a/package/components/NetworkPopup.qml +++ b/package/components/NetworkPopup.qml @@ -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,13 +22,15 @@ import "." Control { id: popup - // 公共颜色与格式化函数：集中定义于同目录 NetCommon.qml， - // 与 networkview.qml、TrafficChartWindow 共享同一份实现，消除跨组件重复定义 - NetCommon { id: common } - // C++ 后端对象，提供速度/接口/IP 等所有数据 property var applet: null + // 公共颜色与格式化函数：由 networkview.qml 传入 dock 上下文的 NetCommon 实例 + // 设计原因：PanelPopup 是独立窗口上下文，在此上下文求值 DTK.palette.windowText + // 深色模式下返回深色文字（与 dock 面板上下文不同），导致深底深字； + // 传入 dock 上下文的 common 实例，颜色在 dock 面板上下文求值，深色模式正确返回浅色文字 + property var common: 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 @@ -38,25 +43,35 @@ 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(Qt.color(userTextColor).r, Qt.color(userTextColor).g, Qt.color(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 + + // 复制反馈状态：记录刚复制的字段（"ipv4"/"ipv6"/""），用于图标切换为 ✓ + property string copiedField: "" + // 排序后的接口列表：物理网卡在前，虚拟网卡在后，各自按名称排序 // 设计原因：保持稳定排序，活动接口不再移到最前，避免切换网卡时 chip 顺序跳动； // 活动 chip 若被截断，由 chipFlickable 自动滚动露出完整样式； @@ -80,390 +95,498 @@ Control { chipFlickable.scrollToActiveChip(animated) } - padding: 16 + // 一键复制：用隐藏 TextEdit 的 selectAll()+copy() 写入系统剪贴板 + // QML 无直接剪贴板 API，此为项目既定模式（SettingsWindow/AboutWindow 同模式） + function copyToClipboard(text) { + clipboardHelper.text = text + clipboardHelper.selectAll() + clipboardHelper.copy() + } + + padding: 12 contentItem: ColumnLayout { - spacing: 12 + spacing: 10 - // 标题栏：标题在上，网卡名+IP 在卡片底色背景内 - Item { - Layout.fillWidth: true - Layout.preferredHeight: 72 + // ==================== 占位态：未检测到接口 ==================== + // 占位时只显示警告图标+文字，不显示其他分区和分隔线 + ColumnLayout { + Layout.alignment: Qt.AlignHCenter + Layout.preferredHeight: 80 + spacing: 6 + visible: !popup.ready - ColumnLayout { - anchors.centerIn: parent - spacing: 6 - - Text { - text: qsTr("Network Speed Monitor") - 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 - } - } - } - } + Text { + text: "⚠" + font.pixelSize: Math.round(40 * popup.fontScale) + color: popup.tertiaryText + 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("Download") - font.pixelSize: 11 - color: popup.secondaryText - Layout.alignment: Qt.AlignHCenter - } - - Text { - text: common.formatSpeed(popup.downloadSpeed) - font.pixelSize: 18 - 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 - } - - // 上传半区（右半） - 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("Upload") - font.pixelSize: 11 - color: popup.secondaryText - Layout.alignment: Qt.AlignHCenter - } - - Text { - text: common.formatSpeed(popup.uploadSpeed) - font.pixelSize: 18 - font.weight: Font.Bold - color: popup.uploadValueColor - Layout.alignment: Qt.AlignHCenter - } - } - } + Text { + text: qsTr("No network interface detected") + font.pixelSize: Math.round(14 * popup.fontScale) + color: popup.secondaryText + 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 + // ==================== 分区1：接口信息 ==================== + // 类型图标 + 接口名 + IPv4 一行，IPv6 截断显示一行 + // 外层 Item 固定高度 + 内层 ColumnLayout anchors.centerIn： + // 无 IP 地址时内容在区域内垂直居中，避免单行内容贴顶导致网卡名偏上 + Item { + Layout.fillWidth: true + // preferredHeight 40 为无 IP 时的最小高度；有 IP/IPv6 时内容自然撑高 + Layout.preferredHeight: Math.max(40, ifaceCol.implicitHeight) + visible: popup.ready + ColumnLayout { + id: ifaceCol + anchors.centerIn: parent + width: parent.width + spacing: 4 + + // 行1：类型图标 + 接口名 + · + IPv4 + // 拆分为独立 Text 元素，使接口名用 primaryText 跟随用户 textColor， + // 图标和 IPv4 保持系统主题色（tertiaryText/secondaryText），层次分明 RowLayout { - anchors.fill: parent - anchors.margins: 12 - spacing: 8 - - Item { Layout.fillWidth: true } + Layout.alignment: Qt.AlignHCenter + spacing: 4 + // 网卡类型图标：与设置窗口列表图标一致，次要色不抢速度区焦点 Text { - text: qsTr("Total") - font.pixelSize: 11 - font.weight: Font.Bold - color: popup.secondaryText + text: common.interfaceIcon(popup.activeInterface) + font.pixelSize: Math.round(12 * popup.fontScale) + color: popup.tertiaryText } + // 接口名：跟随用户 textColor（primaryText），Spec 5.1 节要求 Text { - text: "↓ " + common.formatTotal(popup.totalDownload) - font.pixelSize: 12 + text: popup.activeInterface + font.pixelSize: Math.round(13 * popup.fontScale) color: popup.primaryText } - Text { - text: "↑ " + common.formatTotal(popup.totalUpload) - font.pixelSize: 12 - color: popup.primaryText - } + // IPv4 地址 + 分隔点 + 复制图标 + RowLayout { + spacing: 4 + visible: popup.ipAddress !== "" - Item { Layout.fillWidth: true } - } - } + Text { + text: "·" + font.pixelSize: Math.round(13 * popup.fontScale) + color: popup.tertiaryText + } - // 接口切换 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 + Text { + text: popup.ipAddress + font.pixelSize: Math.round(13 * popup.fontScale) + color: popup.secondaryText + } - // 平滑滚动动画：直接赋值 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 - } + // 一键复制图标：点击复制 IPv4 到剪贴板，复制后短暂显示 ✓ + Text { + text: popup.copiedField === "ipv4" ? "✓" : "⧉" + font.pixelSize: Math.round(11 * popup.fontScale) + color: popup.copiedField === "ipv4" + ? popup.accentGreen + : (ipv4CopyMouse.containsMouse ? popup.accentBlue : popup.tertiaryText) MouseArea { - id: chipMouse + id: ipv4CopyMouse anchors.fill: parent cursorShape: Qt.PointingHandCursor hoverEnabled: true onClicked: { - if (popup.applet) popup.applet.setActiveInterface(modelData) + popup.copyToClipboard(popup.ipAddress) + popup.copiedField = "ipv4" + copyFeedbackTimer.restart() } } } } } - // 自定义滚动条样式：默认 ScrollBar 在面板配色下可能不可见， - // 用 contentItem 显式绘制，颜色派生自 basePalette 适配深浅主题 - ScrollBar.horizontal: ScrollBar { - id: chipScrollBar - policy: ScrollBar.AsNeeded - interactive: true + // 行2：IPv6 地址 + 复制图标（超长截断 + hover tooltip 显示完整地址） + RowLayout { + Layout.alignment: Qt.AlignHCenter + Layout.maximumWidth: 320 + spacing: 4 + visible: popup.ipv6Address !== "" - contentItem: Rectangle { - implicitHeight: 4 - radius: 2 - // 按压时加深、悬停时中等、默认稍淡，保证滚动条在深浅主题下均可见 - color: chipScrollBar.pressed ? popup.secondaryText - : (chipScrollBar.hovered ? popup.secondaryText : popup.tertiaryText) + Text { + text: qsTr("IPv6: ") + popup.ipv6Address + font.pixelSize: Math.round(12 * popup.fontScale) + color: popup.tertiaryText + elide: Text.ElideRight + Layout.fillWidth: true + horizontalAlignment: Text.AlignRight + + ToolTip.text: popup.ipv6Address + ToolTip.visible: ipv6Mouse.containsMouse && popup.ipv6Address !== "" + ToolTip.delay: 300 + + MouseArea { + id: ipv6Mouse + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.IBeamCursor + } + } + + // 一键复制图标：点击复制 IPv6 到剪贴板，复制后短暂显示 ✓ + Text { + text: popup.copiedField === "ipv6" ? "✓" : "⧉" + font.pixelSize: Math.round(11 * popup.fontScale) + color: popup.copiedField === "ipv6" + ? popup.accentGreen + : (ipv6CopyMouse.containsMouse ? popup.accentBlue : popup.tertiaryText) + + MouseArea { + id: ipv6CopyMouse + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onClicked: { + popup.copyToClipboard(popup.ipv6Address) + popup.copiedField = "ipv6" + copyFeedbackTimer.restart() + } + } } } } + } - // 未检测到接口占位 - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 80 - color: popup.cardBackground - radius: 12 - border.width: 1 - border.color: popup.cardBorder - visible: !popup.ready + // 分隔线1 + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 1 + color: popup.cardBorder + visible: popup.ready + } + + // ==================== 分区2：实时速度（视觉锚点） ==================== + // 双栏等宽，下载左半区、上传右半区，中间靠留白区分无竖线 + Item { + Layout.fillWidth: true + Layout.preferredHeight: 60 + visible: popup.ready + + // 下载半区（左半） + Item { + id: downloadHalf + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + width: parent.width / 2 ColumnLayout { anchors.centerIn: parent - spacing: 6 + spacing: 2 + // 下载标签 Text { - text: "⚠" - font.pixelSize: 24 + text: qsTr("Download") + font.pixelSize: Math.round(12 * popup.fontScale) color: popup.secondaryText Layout.alignment: Qt.AlignHCenter } - Text { - text: qsTr("No network interface detected") - font.pixelSize: 12 - color: popup.secondaryText + // 箭头 + 数值（大号粗体）+ 单位（小号） + RowLayout { + spacing: 2 Layout.alignment: Qt.AlignHCenter + + Text { + text: "↓" + font.pixelSize: Math.round(24 * popup.fontScale) + font.weight: Font.Bold + color: common.downloadValueColor(popup.downloadSpeed) + } + + 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 + } } } } - Item { Layout.fillHeight: true } + // 上传半区（右半） + Item { + id: uploadHalf + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + width: parent.width / 2 + + ColumnLayout { + anchors.centerIn: parent + spacing: 2 + + // 上传标签 + Text { + text: qsTr("Upload") + font.pixelSize: Math.round(12 * popup.fontScale) + color: popup.secondaryText + Layout.alignment: Qt.AlignHCenter + } + + // 箭头 + 数值（大号粗体）+ 单位（小号） + RowLayout { + spacing: 2 + Layout.alignment: Qt.AlignHCenter + + Text { + text: "↑" + font.pixelSize: Math.round(24 * popup.fontScale) + font.weight: Font.Bold + color: popup.uploadValueColor + } + + 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: 1 + color: popup.cardBorder + visible: popup.ready + } + + // ==================== 分区3：累计流量 ==================== + // 单行紧凑：总计标签 + 下载箭头/数值 + 上传箭头/数值 + RowLayout { + Layout.fillWidth: true + spacing: 8 + visible: popup.ready + + Item { Layout.fillWidth: true } + + Text { + text: qsTr("Total") + font.pixelSize: Math.round(12 * popup.fontScale) + color: popup.tertiaryText + } + + Text { + 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: "↑" + 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 + } + + // ==================== 分区4：接口切换 chip 列表 ==================== + // 水平滚动，物理网卡在前、虚拟网卡在后，顺序稳定不随切换变化 + // chip 少时分散撑满一行；chip 多超出宽度时固定宽度 + 水平滚动 + // 活动 chip 不在可视区域或被截断时，自动滚动露出完整样式（见 scrollToActiveChip） + Flickable { + id: chipFlickable + Layout.fillWidth: true + // 高度需容纳 chip（28px）+ 水平滚动条（~6px）+ 上下间距 + 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 + // 选中态：蓝色填充+蓝边框；未选中态：透明背景+cardBorder 边框 + // hover 态：边框变蓝、文字变蓝，提供清晰交互反馈 + color: modelData === popup.activeInterface + ? popup.accentBlue + : "transparent" + border.width: 1 + border.color: modelData === popup.activeInterface + ? popup.accentBlue + : (chipMouse.containsMouse ? popup.accentBlue : popup.cardBorder) + + Text { + id: chipText + anchors.centerIn: parent + text: modelData + font.pixelSize: Math.round(12 * popup.fontScale) + font.weight: modelData === popup.activeInterface ? Font.Bold : Font.Normal + color: modelData === popup.activeInterface + ? "white" + : (chipMouse.containsMouse ? popup.accentBlue : 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) + } + } + } + + // 填充剩余空间，将内容推至顶部 + Item { Layout.fillHeight: true } + } + + // 隐藏的 TextEdit 用于复制 IP 地址到剪贴板 + // QML 没有直接剪贴板 API，用 TextEdit.selectAll()+copy() 实现 + //（与 SettingsWindow/AboutWindow 中 clipboardHelper 同模式） + TextEdit { + id: clipboardHelper + visible: false + text: "" + } + + // 复制反馈定时器：2 秒后将 copiedField 清空，图标从 ✓ 恢复为 ⧉ + Timer { + id: copyFeedbackTimer + interval: 2000 + onTriggered: popup.copiedField = "" + } } diff --git a/package/components/SettingsWindow.qml b/package/components/SettingsWindow.qml index cc0eece..fb561af 100644 --- a/package/components/SettingsWindow.qml +++ b/package/components/SettingsWindow.qml @@ -13,10 +13,15 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQuick.Window 2.15 +import "." Window { id: root + // 公共函数：interfaceIcon/interfaceDescription 已从本文件迁移至 NetCommon.qml， + // 与 NetworkPopup 共享同一份实现，消除跨组件重复定义 + NetCommon { id: common } + // 对外依赖：C++ 后端对象，用于获取/设置接口、字体颜色等 property var applet: null @@ -66,37 +71,6 @@ Window { // 窗口透明：让圆角外的区域不显示，由内部 Rectangle 提供可见背景 color: "transparent" - // 根据接口名返回类型描述，用于设置窗口网络接口列表 - // 设计原因：用户面对多个网口时难以仅凭 enp3s0/wlp3s0 等命名判断用途， - // 加一行类型说明（有线/无线/VPN 等）降低认知负担 - function interfaceDescription(name) { - if (name === "lo") return qsTr("Loopback") - if (name === "Meta") return qsTr("Virtual Interface") - if (/^enp|^eth/.test(name)) return qsTr("Wired Network") - if (/^wlp|^wlan/.test(name)) return qsTr("Wireless Network") - if (/^docker|^veth/.test(name)) return qsTr("Container Network") - if (/^br/.test(name)) return qsTr("Bridge") - if (/^tun|^tap/.test(name)) return qsTr("VPN") - if (/^virbr/.test(name)) return qsTr("Virtual Bridge") - return qsTr("Other") - } - - // 根据接口名返回类型图标（Unicode 符号），用于网络接口列表每行左侧 - // 设计原因：项目未引入图标库，用 Text 渲染 Unicode 符号（与 networkview.qml 的 ↓↑ 一致）； - // 所选符号均为 DejaVu/Noto 等常见字体覆盖的单色字形，避免彩色 emoji 破坏浅色主题观感， - // 匹配规则与 interfaceDescription 保持一致 - function interfaceIcon(name) { - if (name === "lo") return "↻" // 本地回环：循环箭头 - if (name === "Meta") return "▢" // 虚拟接口：空心方块 - if (/^enp|^eth/.test(name)) return "⇄" // 有线网络：双向链路 - if (/^wlp|^wlan/.test(name)) return "∿" // 无线网络：信号波形 - if (/^docker|^veth/.test(name)) return "▣" // 容器网络：盒中盒 - if (/^br/.test(name)) return "⋈" // 桥接：连接（蝴蝶结形） - if (/^tun|^tap/.test(name)) return "⚿" // VPN：钥匙 - if (/^virbr/.test(name)) return "⋈" // 虚拟桥接：同桥接 - return "◉" // 其他：通用网络节点 - } - // 显示时居中到当前屏幕（任务栏所在屏幕） onVisibleChanged: { if (visible) { @@ -291,7 +265,7 @@ Window { Layout.alignment: Qt.AlignVCenter Layout.preferredWidth: 20 horizontalAlignment: Text.AlignHCenter - text: interfaceIcon(modelData) + text: common.interfaceIcon(modelData) font.pixelSize: 14 color: ifaceRow.isActive ? ifaceRow.activeColor : root.iconGray } @@ -333,7 +307,7 @@ Window { // 接口类型描述：右对齐显示，与接口名分居两侧 Text { Layout.alignment: Qt.AlignVCenter - text: interfaceDescription(modelData) + text: common.interfaceDescription(modelData) font.pixelSize: 12 color: root.textTertiary } diff --git a/package/networkview.qml b/package/networkview.qml index 408948b..4cc8b68 100644 --- a/package/networkview.qml +++ b/package/networkview.qml @@ -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 @@ -280,6 +280,7 @@ AppletItem { NetworkPopup { id: popupContent applet: root.applet + common: common anchors.fill: parent }