fix: IPv6 地址错位 + 复制按钮颜色不明显

接口信息区改为三行对称结构：行1 接口名居中，行2/行3 为 IPv4/IPv6
地址行，用固定宽度标签对齐，两行结构对称不再随地址长度错位；
复制图标默认色从 tertiaryText 改为 primaryText，深色背景上清晰可见

.gitignore

@@ -15,6 +15,7 @@ cmake-build-*/
 *.so
 *.so.*
 *.dylib
+*.deb
 
 # Qt Creator
 *.pro.user

README.md

@@ -28,7 +28,7 @@ QML 前端渲染界面，实时显示当前网卡的上行/下行速率与累计
 构建需要以下开发包：
 
 ```sh
-sudo apt install build-essential cmake pkg-config qt6-base-dev qt6-declarative-dev libdtkcommon-dev libdde-shell-dev
+sudo apt install build-essential cmake pkg-config qt6-base-dev qt6-declarative-dev libdtkcommon-dev libdtk6gui-dev libxkbcommon-dev libdde-shell-dev
 ```
 
 各包与 CMake `find_package` 的对应关系：
@@ -36,8 +36,10 @@ sudo apt install build-essential cmake pkg-config qt6-base-dev qt6-declarative-d
 | 依赖包 | 提供 | 对应 CMake find_package |
 |---|---|---|
 | qt6-base-dev | Qt6 Core / DBus / Network | Qt6 Core DBus Network |
-| qt6-declarative-dev | Qt6 Quick | Qt6 Quick |
+| qt6-declarative-dev | Qt6 Quick / LinguistTools / Test | Qt6 Quick LinguistTools Test |
 | libdtkcommon-dev | Dtk6 Core | Dtk6 Core |
+| libdtk6gui-dev | Dtk6 Gui（DDEShell 间接依赖） | Dtk6Gui（由 DDEShellConfig.cmake find_dependency） |
+| libxkbcommon-dev | XKB（DDEShell 间接依赖） | XKB（由 DDEShellConfig.cmake find_dependency） |
 | libdde-shell-dev | DDEShell | DDEShell |
 
 > 运行时仅需 `dde-shell` 及 Qt6/Dtk6 运行库，上述 `-dev` 包仅构建时需要。

build-deb.sh

@@ -66,7 +66,7 @@ echo "[1/6] 检查构建依赖..."
 # 设计原因：用户 clone 后直接运行 build-deb.sh 经常因缺少 -dev 包导致
 # CMake 配置失败，但原脚本用 tail -3 吞掉关键错误，用户无法定位问题。
 # 在构建前主动预检可提前给出明确指引。
-DEPS=(qt6-base-dev qt6-declarative-dev libdtkcommon-dev libdde-shell-dev)
+DEPS=(qt6-base-dev qt6-declarative-dev libdtkcommon-dev libdtk6gui-dev libxkbcommon-dev libdde-shell-dev)
 MISSING=()
 for pkg in "${DEPS[@]}"; do
     if ! dpkg -s "$pkg" &> /dev/null 2>&1; then

docs/superpowers/plans/2026-08-08-popup-redesign.md

@@ -0,0 +1,744 @@
+# 左键弹窗重新设计 实现计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 重新设计 NetworkPopup 左键弹窗布局，采用通透分区方案，适配用户字体颜色和网卡图标，预留字号缩放扩展点。
+
+**Architecture:** 去掉自绘卡片背景，用分隔线+留白划分四个区域（接口信息/实时速度/累计流量/接口切换），速度数字放大为视觉锚点。将 SettingsWindow 的 interfaceIcon/interfaceDescription 提取到 NetCommon 共享，NetworkPopup 接入用户 textColor 和 fontScale。
+
+**Tech Stack:** QML 2.15 + QtQuick.Controls 2.15 + DTK 1.0 + dde-shell PanelPopup
+
+## Global Constraints
+
+- 项目无测试/lint/CI 目标，验证为手动：`cmake --build build` + `sudo cmake --install build` + `systemctl --user restart dde-shell@DDE`
+- QML 文件保留 SPDX 头（`SPDX-FileCopyrightText: 2026 Jokul` + `SPDX-License-Identifier: LGPL-3.0-or-later`）
+- 注释语言统一使用中文，字段/函数上方必须添加中文注释
+- `NetCommon.qml` 的现有颜色定义和格式化函数不变，仅新增函数
+- C++ 后端本次不改（fontScale 预留扩展点，后续再加）
+- Commit message 使用中文，格式遵循 conventional commits
+
+---
+
+## File Structure
+
+| 文件 | 职责 | 本次改动 |
+|---|---|---|
+| `package/components/NetCommon.qml` | 公共颜色与格式化函数 | 新增 `interfaceIcon`、`interfaceDescription`、`formatSpeedValue`、`formatSpeedUnit` 四个函数 |
+| `package/components/SettingsWindow.qml` | 设置窗口 | 删除本地 `interfaceIcon`/`interfaceDescription`，改为调用 `common.xxx` |
+| `package/components/NetworkPopup.qml` | 弹窗内容组件 | 完全重写布局 |
+| `package/networkview.qml` | 主入口 | 仅改 `PanelPopup` 的 width/height |
+
+---
+
+### Task 1: 提取共享函数到 NetCommon.qml + 更新 SettingsWindow.qml
+
+**Files:**
+- Modify: `package/components/NetCommon.qml`（在 `formatTotal` 函数后、闭合 `}` 前新增四个函数）
+- Modify: `package/components/SettingsWindow.qml`（删除本地 interfaceIcon/interfaceDescription，新增 import 和 common 实例，替换调用处）
+
+**Interfaces:**
+- Produces: `common.interfaceIcon(name)` 返回 Unicode 符号字符串；`common.interfaceDescription(name)` 返回翻译后的类型描述字符串；`common.formatSpeedValue(bytesPerSec)` 返回速度数值部分（如 `"4.11"`）；`common.formatSpeedUnit(bytesPerSec)` 返回速度单位部分（如 `"KB/s"`）
+
+- [ ] **Step 1: 在 NetCommon.qml 新增四个函数**
+
+在 `NetCommon.qml` 的 `formatTotal` 函数闭合 `}` 之后、文件最终闭合 `}` 之前，插入以下代码：
+
+```qml
+
+    // 根据接口名返回类型图标（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)
+    }
+```
+
+- [ ] **Step 2: 在 SettingsWindow.qml 添加 import 和 NetCommon 实例**
+
+在 `SettingsWindow.qml` 的 import 块末尾（`import QtQuick.Window 2.15` 之后）添加：
+
+```qml
+import "."
+```
+
+在 `Window { id: root` 之后、`property var applet: null` 之前添加：
+
+```qml
+    // 公共函数：interfaceIcon/interfaceDescription 已从本文件迁移至 NetCommon.qml，
+    // 与 NetworkPopup 共享同一份实现，消除跨组件重复定义
+    NetCommon { id: common }
+```
+
+- [ ] **Step 3: 删除 SettingsWindow.qml 的本地 interfaceIcon 和 interfaceDescription 函数**
+
+删除 `SettingsWindow.qml` 中 `interfaceDescription` 函数（当前第 72-82 行）和 `interfaceIcon` 函数（当前第 88-98 行）的完整定义，包括函数上方的注释。
+
+- [ ] **Step 4: 替换 SettingsWindow.qml 中的函数调用处**
+
+将 `SettingsWindow.qml` 中所有 `interfaceIcon(modelData)` 替换为 `common.interfaceIcon(modelData)`，将 `interfaceDescription(modelData)` 替换为 `common.interfaceDescription(modelData)`。
+
+涉及两处（均在接口列表 Repeater 的 delegate 内）：
+- 图标 Text 的 `text: interfaceIcon(modelData)` -> `text: common.interfaceIcon(modelData)`
+- 描述 Text 的 `text: interfaceDescription(modelData)` -> `text: common.interfaceDescription(modelData)`
+
+- [ ] **Step 5: 构建**
+
+Run: `cmake --build build`
+Expected: 编译成功，无错误
+
+- [ ] **Step 6: 安装并重启 dde-shell**
+
+Run: `sudo cmake --install build && systemctl --user restart dde-shell@DDE`
+Expected: 安装成功，dde-shell 重启
+
+- [ ] **Step 7: 手动验证设置窗口**
+
+验证清单：
+1. 右键任务栏网络监控图标 -> 点击"设置"
+2. 设置窗口打开，网络接口列表每行左侧仍显示类型图标（∿/⇄/▢ 等）
+3. 每行右侧仍显示类型描述（"无线网络"/"有线网络"/"虚拟接口" 等）
+4. 图标和描述与改动前完全一致
+
+- [ ] **Step 8: 提交**
+
+```bash
+git add package/components/NetCommon.qml package/components/SettingsWindow.qml
+git commit -m "refactor: 提取 interfaceIcon/interfaceDescription 到 NetCommon 共享
+
+将 SettingsWindow 的接口图标和描述函数迁移到 NetCommon.qml，
+消除与 NetworkPopup 的重复定义；新增 formatSpeedValue/formatSpeedUnit
+为弹窗速度数值与单位拆分显示做准备"
+```
+
+---
+
+### Task 2: 重写 NetworkPopup.qml + 更新 networkview.qml 弹窗尺寸
+
+**Files:**
+- Modify: `package/networkview.qml:267-268`（PanelPopup 的 width/height）
+- Rewrite: `package/components/NetworkPopup.qml`（完整重写布局）
+
+**Interfaces:**
+- Consumes: `common.interfaceIcon(name)`（Task 1 产出）、`common.formatSpeedValue(bytesPerSec)`、`common.formatSpeedUnit(bytesPerSec)`
+- Produces: `popup.primaryText`（支持用户 textColor 覆盖）、`popup.fontScale`（预留字号缩放）
+
+- [ ] **Step 1: 更新 networkview.qml 的 PanelPopup 尺寸**
+
+将 `networkview.qml` 第 267-268 行：
+
+```qml
+        width: 360
+        height: 320
+```
+
+改为：
+
+```qml
+        width: 330
+        height: 250
+```
+
+- [ ] **Step 2: 完整重写 NetworkPopup.qml**
+
+将 `package/components/NetworkPopup.qml` 全文替换为以下内容：
+
+```qml
+// SPDX-FileCopyrightText: 2026 Jokul
+//
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+// 网络速度监控弹窗内容组件
+// 通透分区布局：去掉自绘卡片背景，用分隔线+留白划分四个区域
+// （接口信息 / 实时速度 / 累计流量 / 接口切换），速度数字放大为视觉锚点
+// 由 networkview.qml 的 PanelPopup 实例化，传入 applet 属性
+// 毛玻璃背景、圆角、阴影由 PanelPopup 自动提供，本组件不自绘背景
+// 颜色与格式化函数统一取自同目录 NetCommon.qml（common.xxx），数据由 applet 提供
+// 可配置适配：primaryText 跟随用户 textColor、fontScale 预留字号缩放扩展点
+// 设计原因：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
+import "."
+
+Control {
+    id: popup
+
+    // 公共颜色与格式化函数：集中定义于同目录 NetCommon.qml
+    NetCommon { id: common }
+
+    // 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 || []) : []
+
+    // 用户自定义字体色：非空时覆盖 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 cardBorder: common.cardBorder
+
+    // 强调色：下载蓝、上传绿，是面板的主视觉区分
+    readonly property color accentBlue: common.accentBlue
+    readonly property color accentGreen: common.accentGreen
+
+    // 上传值颜色：固定绿色，不做高速警示
+    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 自动滚动露出完整样式；
+    // 物理网卡判断逻辑共用 common.isPhysicalIf（与 C++ isPhysicalInterface 一致）
+    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 (common.isPhysicalIf(name)) physical.push(name)
+            else virtual.push(name)
+        }
+        physical.sort()
+        virtual.sort()
+        return physical.concat(virtual)
+    }
+
+    // 供外部调用：popup 打开时滚动到活动 chip
+    function scrollToActiveChip(animated) {
+        chipFlickable.scrollToActiveChip(animated)
+    }
+
+    padding: 12
+
+    contentItem: ColumnLayout {
+        spacing: 10
+
+        // ==================== 占位态：未检测到接口 ====================
+        // 占位时只显示警告图标+文字，不显示其他分区和分隔线
+        ColumnLayout {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredHeight: 80
+            spacing: 6
+            visible: !popup.ready
+
+            Text {
+                text: "⚠"
+                font.pixelSize: Math.round(40 * popup.fontScale)
+                color: popup.tertiaryText
+                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
+            }
+        }
+
+        // ==================== 分区1：接口信息 ====================
+        // 类型图标 + 接口名 + IPv4 一行，IPv6 截断显示一行
+        ColumnLayout {
+            Layout.fillWidth: true
+            spacing: 4
+            visible: popup.ready
+
+            // 行1：类型图标 + 接口名 + · + IPv4
+            Text {
+                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 {
+                Layout.alignment: Qt.AlignHCenter
+                Layout.fillWidth: true
+                Layout.maximumWidth: 300
+                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: Math.round(12 * popup.fontScale)
+                color: popup.tertiaryText
+                visible: popup.ipv6Address !== ""
+                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
+                }
+            }
+        }
+
+        // 分隔线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: 2
+
+                    // 下载标签
+                    Text {
+                        text: qsTr("Download")
+                        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: 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 {
+                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 }
+    }
+}
+```
+
+- [ ] **Step 3: 构建**
+
+Run: `cmake --build build`
+Expected: 编译成功，无错误
+
+- [ ] **Step 4: 安装并重启 dde-shell**
+
+Run: `sudo cmake --install build && systemctl --user restart dde-shell@DDE`
+Expected: 安装成功，dde-shell 重启
+
+- [ ] **Step 5: 手动验证弹窗布局**
+
+验证清单：
+1. 左键点击任务栏网络监控图标，弹窗打开
+2. **无卡片背景**：毛玻璃通透，无 6% 透明度色块，四个区域用分隔线划分
+3. **接口信息区**：显示类型图标（如 ∿）+ 接口名 + · + IPv4 地址，居中
+4. **IPv6 截断**：IPv6 地址超长时末尾显示 `…`，hover 显示完整地址 tooltip
+5. **速度区**：下载/上传标签在上（小字），箭头+数值 24px 粗体在下，单位 KB/s 小号
+6. **下载阈值变色**：下载速度 >1MB/s 时数值变橙，>10MB/s 变红，否则蓝色
+7. **累计流量区**：单行显示"总计 ↓ 4.85 GB ↑ 134 MB"，紧凑居中
+8. **chip 未选中态**：透明背景 + 边框，清晰可辨
+9. **chip hover**：边框变蓝，文字变蓝
+10. **chip 选中态**：蓝色填充 + 白字
+11. **chip 滚动**：接口多时可水平滚动，活动 chip 自动滚入可视区
+12. **无冗余标题**：弹窗顶部无"网络速度监控"标题
+
+- [ ] **Step 6: 手动验证深浅主题**
+
+验证清单：
+1. 切换系统到深色模式：弹窗毛玻璃深色底，文字浅色，对比度良好
+2. 切换系统到浅色模式：弹窗毛玻璃浅色底，文字深色，对比度良好
+3. 各分区文字层次清晰：速度数值 > 标签/接口名 > IPv6/总计标签
+
+- [ ] **Step 7: 手动验证字体颜色适配**
+
+验证清单：
+1. 右键任务栏图标 -> 设置 -> 字体颜色 -> 选择红色
+2. 左键打开弹窗：接口名、速度数值（未超阈值时）、累计数值、chip 未选中文字变红
+3. 标签（下载/上传/总计）、IPv6、蓝绿箭头仍保持系统主题色，不跟随
+4. 设置 -> 字体颜色 -> 选择"跟随系统"：弹窗恢复 DTK 调色板派生色
+
+- [ ] **Step 8: 手动验证网卡切换**
+
+验证清单：
+1. 弹窗底部点击不同 chip，接口信息区更新为对应网卡的图标、名称、IP
+2. 速度数值切换到对应网卡的数据
+3. chip 选中态正确跟随切换
+
+- [ ] **Step 9: 手动验证占位态**
+
+验证清单：
+1. （如条件允许）断开所有网络接口或模拟无接口状态
+2. 左键打开弹窗：显示 ⚠ 图标 + "未检测到网络接口"文字，无其他分区
+
+- [ ] **Step 10: 提交**
+
+```bash
+git add package/networkview.qml package/components/NetworkPopup.qml
+git commit -m "feat: 重新设计左键弹窗布局
+
+采用通透分区方案，去掉自绘卡片背景改用分隔线+留白划分四区：
+接口信息（含类型图标）/ 实时速度（24px 锚点）/ 累计流量 / 接口切换
+速度数值与单位拆分显示，chip 未选中态改透明+边框
+适配用户 textColor（仅主要文字跟随）、预留 fontScale 字号缩放扩展点"
+```
+
+---
+
+## 验证总结
+
+本计划无自动化测试，验证完全依赖手动构建+安装+视觉检查：
+- Task 1 验证设置窗口接口图标/描述不受影响（函数迁移无行为变化）
+- Task 2 验证弹窗新布局、深浅主题、字体颜色跟随、网卡切换、占位态
+
+若构建或运行时报错，优先检查：
+- QML import 路径是否正确（`import "."` 在 SettingsWindow.qml 中）
+- NetCommon.qml 新增函数的 `qsTr()` 在 QtObject 内是否正常（应正常，qsTr 是全局函数）
+- RowLayout 内 `Layout.alignment: Qt.AlignBaseline` 是否被正确解析

docs/superpowers/specs/2026-08-08-popup-redesign-design.md

@@ -0,0 +1,268 @@
+# 左键弹窗重新设计
+
+> 日期：2026-08-08
+> 状态：已批准，待制定实现计划
+> 涉及文件：`NetworkPopup.qml`、`NetCommon.qml`、`SettingsWindow.qml`、`networkview.qml`
+
+## 背景与问题
+
+当前左键弹窗（`NetworkPopup.qml`）存在以下设计问题（基于截图分析 + 代码阅读）：
+
+1. **深色模式下文字对比度极低**：卡片背景 `cardBackground` 仅 6% 透明度，在 PanelPopup 自动提供的毛玻璃上几乎不可见，导致区域"糊"在一起，且遮挡了原生通透感。
+2. **IPv6 地址拥挤**：长 IPv6 地址撑满接口信息卡片，破坏平衡。
+3. **底部 chip 未选中态过弱**：未选中 chip 用 `cardBackground` 填充几乎不可见，缺乏交互暗示。
+4. **箭头图标风格不统一**：速度区用圆形底色块 + 文本箭头，累计区用纯文本箭头。
+5. **冗余标题**：弹窗本身就是网络监控，标题"网络速度监控"浪费空间且字号小发闷。
+6. **字号层次不足**：速度数值 18px 不够突出，与标签层次差距小。
+
+### 关键技术发现（librarian 研究）
+
+`PanelPopup`（dde-shell 源码实测）已自动提供：
+- **毛玻璃背景**（`enableBlurWindow: true`，透明度跟随系统外观设置）
+- **圆角**（跟随系统 `windowRadius`，fallback 4px）
+- **阴影**（偏移 `(0, 25)`，深色 50% 黑 / 浅色 20% 黑）
+
+官方参考（`PanelPluginPage.qml`）：内容区宽度 330px，内边距 10px，元素间距 10px。DTK 字号表 T3=24px、T6=14px、T7=13px、T8=12px。
+
+**结论：弹窗内不应自绘背景卡片，应让 PanelPopup 的毛玻璃直接透出，用分隔线 + 留白划分区域。**
+
+## 设计目标
+
+- 重新设计布局结构（非仅视觉微调）
+- 速度与接口信息并重（用户第一眼需求）
+- Deepin 原生风格（毛玻璃通透、DTK 字号、系统调色板）
+- 适配用户配置：字体颜色、网卡类型图标、预留字号缩放
+
+## 设计方案
+
+选定方案 A：**通透分区，速度为锚点**。去掉所有自绘卡片背景，用分隔线 + 留白划分区域，速度数字放大为视觉锚点。
+
+### 第 1 节：整体布局结构
+
+**容器调整**（`networkview.qml`）：
+- `PanelPopup` 宽度从 360 -> **330px**（对齐官方 `PanelPluginPage` 参考值）
+- 高度从固定 320 -> **跟随内容**（预估约 230px，若 PanelPopup 不支持自动高度则 fallback 固定 230）
+- padding 从 16 -> **12px**，区域间 spacing 12 -> **10px**
+
+**纵向布局**（4 个分区 + 3 条分隔线，自上而下）：
+
+```
+┌───────────────────────────────┐
+│  接口信息区  (次要)            │   行1: ∿ wlp3s0 · 192.168.3.83
+│                               │   行2: IPv6 截断显示 + tooltip
+│ ───────────────────────────── │ ← 分隔线1
+│  速度区  (锚点, 最大视觉权重)  │   ↓ 4.11 KB/s    ↑ 3.55 KB/s
+│ ───────────────────────────── │ ← 分隔线2
+│  累计流量区  (紧凑)            │   总计 ↓ 4.85 GB  ↑ 134 MB
+│ ───────────────────────────── │ ← 分隔线3
+│  接口切换 chip 区              │   [enp2s0] [wlp3s0] [Meta]
+└───────────────────────────────┘
+```
+
+**关键变化**：
+- 去掉冗余标题"网络速度监控"
+- 移除所有自绘卡片 `Rectangle` 背景填充，毛玻璃直接透出
+- 分隔线用 `cardBorder` 色（0.10 透明度）1px 横线，替代原来的卡片边界
+
+### 第 2 节：配色与字体层次
+
+保留 `NetCommon.qml` 的颜色定义和格式化函数不变（networkview.qml 和 TrafficChartWindow 共享），仅改 `NetworkPopup.qml` 内的使用方式。
+
+| 元素 | 颜色 | 字号(DTK) | 字重 |
+|---|---|---|---|
+| 接口名 `wlp3s0` | `primaryText`(用户色或0.95) | T7(13px) | Normal |
+| 接口类型图标 `∿` | `tertiaryText`(0.65) | T8(12px) | Normal |
+| IPv4 地址 | `secondaryText`(0.80) | T7(13px) | Normal |
+| IPv6 地址 | `tertiaryText`(0.65) | T8(12px) | Normal |
+| 下载/上传标签 `下载` | `secondaryText`(0.80) | T8(12px) | Normal |
+| **速度数值** `4.11` | **蓝/绿强调色**(下载带阈值变色) | **T3(24px)** | **Bold** |
+| 速度单位 `KB/s` | 强调色(同数值) | T7(13px) | Normal |
+| `总计` 标签 | `tertiaryText`(0.65) | T8(12px) | Normal |
+| 累计数值 | `primaryText`(用户色或0.95) | T7(13px) | Normal |
+| 累计箭头 `↓↑` | 蓝/绿强调色 | T8(12px) | Bold |
+| chip 选中文字 | white | T8(12px) | Bold |
+| chip 未选中文字 | `primaryText`(用户色或0.95) | T8(12px) | Normal |
+| 分隔线 | `cardBorder`(0.10) | - | - |
+
+**关键变化**：
+1. 速度数字从 18px -> 24px(T3)，成为绝对视觉锚点
+2. 箭头图标统一为文本符号（去掉速度区的 32x32 圆形底色块），速度区和累计区风格一致
+3. 速度数值和单位拆分显示：`4.11` 大号粗体 + `KB/s` 小号
+4. 下载值保留阈值变色逻辑（>10MB/s 红、>1MB/s 橙、否则蓝），上传固定绿
+
+### 第 3 节：各分区内部布局细节
+
+#### 3.1 接口信息区（顶部）
+
+```
+│  ∿ wlp3s0 · 192.168.3.83              │   行1: 类型图标 + 接口名 + 中点 + IPv4
+│  IPv6 2408:823c:9c12:a69:...:3      │   行2: IPv6 截断显示
+```
+
+- 行1：接口类型图标 + 接口名 + `·` + IPv4，用 `secondaryText`/`tertiaryText`，T7 13px
+- 行2：`IPv6` 标签 + 地址。地址超长时截断显示，末尾加 `…`，hover 显示完整地址 tooltip
+- 整体水平居中，垂直间距 4px
+- 无 IPv6 时只显示行1
+
+#### 3.2 速度区（锚点）
+
+```
+│     ↓ 4.11 KB/s      ↑ 3.55 KB/s    │
+```
+
+- 双栏等宽，中间无竖线（靠留白区分）
+- 每栏内部布局：
+  ```
+  下载          (T8 12px, secondaryText, 居中)
+  ↓ 4.11 KB/s   (↓+数值 T3 24px Bold 强调色, KB/s T7 13px)
+  ```
+- 下载/上传标签在上方居中小字，下方是箭头 + 大号数值 + 小号单位
+
+#### 3.3 累计流量区
+
+```
+│  总计  ↓ 4.85 GB  ↑ 134 MB          │
+```
+
+- 单行紧凑，水平居中
+- `总计` 标签 tertiaryText，箭头蓝/绿强调色 Bold，数值 primaryText
+
+#### 3.4 接口切换 chip 区
+
+```
+│  [enp2s0]  [wlp3s0]  [Meta]         │
+```
+
+- chip 样式重做：
+  - **选中态**：蓝色填充背景 `accentBlue` + 白字 + 蓝色边框（保持不变）
+  - **未选中态**：**透明背景** + `cardBorder` 边框 + primaryText 文字（原来是 cardBackground 填充几乎不可见）
+  - hover：边框变 `accentBlue`，文字变 `accentBlue`
+- 宽度逻辑、滚动逻辑、`scrollToActiveChip`、`sortedInterfaces`、`Connections` 全部保留不变
+
+#### 3.5 分隔线
+
+- 3 条横线，分别在：接口区下方、速度区下方、累计区下方
+- 颜色 `cardBorder`(0.10 透明度)，高度 1px，撑满 padding 内宽度
+
+### 第 4 节：错误态与尺寸约束
+
+#### 4.1 未检测到接口的占位态
+
+```
+┌───────────────────────────────┐
+│            ⚠                  │   (T1 40px, tertiaryText)
+│   未检测到网络接口             │   (T6 14px, secondaryText)
+└───────────────────────────────┘
+```
+
+- 去掉卡片背景填充，直接在毛玻璃上居中
+- 警告图标从 24px -> 40px(T1)，更醒目
+- 占位态时不显示分隔线、速度区、累计区、chip 区
+
+#### 4.2 尺寸与高度自适应
+
+- 宽度固定 330px（`networkview.qml` 的 `PanelPopup` 设置）
+- 高度跟随内容（预估约 230px）。各分区预估高度：
+  - 接口区：~40px（两行）
+  - 分隔线：1px + 上下 10px spacing
+  - 速度区：~60px（标签 + 大号数值）
+  - 累计区：~30px
+  - chip 区：40px
+  - padding 上下各 12px
+  - 合计：~213px
+- 若 PanelPopup 不支持自动高度，fallback 为固定 `height: 230`
+
+### 第 5 节：可配置适配
+
+#### 5.1 字体颜色适配（仅主要文字跟随用户色）
+
+`NetworkPopup.qml` 新增属性覆盖：
+
+```qml
+// 用户自定义字体色（来自 C++ 后端 applet.textColor，持久化到 settings.ini）
+// 非空时覆盖 primaryText，空串时回退到 DTK 调色板派生（保持自适应）
+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
+```
+
+**跟随范围**（用 `popup.primaryText` 的元素）：
+- 接口名 `wlp3s0`
+- 速度数值 `4.11`（注意：下载值有阈值变色逻辑，用户色不覆盖蓝/橙/红阈值色，仅覆盖"未超阈值"时的回退色）
+- 累计数值 `4.85 GB`
+- chip 未选中文字
+
+**不跟随**（仍从 `common` 取 DTK 派生）：
+- `secondaryText`（IPv4、标签）
+- `tertiaryText`（IPv6、总计标签）
+- 蓝绿强调色（下载/上传箭头、chip 选中态）
+
+> 用户选了红色时，弹窗的接口名、数值、chip 文字变红，但标签和辅助信息仍保持系统主题色，层次不崩。
+
+#### 5.2 网卡类型图标（接口信息区）
+
+**提取公共函数**：将 `SettingsWindow.qml` 中的 `interfaceIcon(name)` 和 `interfaceDescription(name)` 提取到 `NetCommon.qml`，消除重复定义。
+
+**弹窗接口信息区布局更新**：
+- 接口名前加类型图标，与设置窗口列表的图标一致
+- 图标颜色 `tertiaryText`（次要，不抢速度区焦点）
+- 图标字号 T8(12px)，与接口名行对齐
+
+#### 5.3 字号缩放预留（fontScale）
+
+`NetworkPopup.qml` 新增属性：
+
+```qml
+// 字号缩放因子：默认 1.0，后续 C++ 后端新增 applet.fontScale 后绑定
+// 所有字号 = 基准字号 × fontScale，实现全局字号调节
+readonly property real fontScale: (applet && applet.fontScale !== undefined)
+    ? applet.fontScale : 1.0
+```
+
+**所有 `font.pixelSize` 改为缩放形式**：
+
+| 元素 | 基准字号 | 缩放后 |
+|---|---|---|
+| 速度数值 | 24 | `Math.round(24 * fontScale)` |
+| 速度单位 | 13 | `Math.round(13 * fontScale)` |
+| 接口名/IPv4 | 13 | `Math.round(13 * fontScale)` |
+| IPv6/标签/箭头 | 12 | `Math.round(12 * fontScale)` |
+| chip 文字 | 12 | `Math.round(12 * fontScale)` |
+| 占位图标 | 40 | `Math.round(40 * fontScale)` |
+| 占位文字 | 14 | `Math.round(14 * fontScale)` |
+
+**当前状态**：`applet.fontScale` 尚不存在，`fontScale` 恒为 1.0，视觉无变化。后续 C++ 后端加属性 + 设置窗口加选项后即可生效，弹窗代码无需再改。
+
+## 影响范围
+
+| 文件 | 改动 |
+|---|---|
+| `NetCommon.qml` | 新增 `interfaceIcon`/`interfaceDescription` 公共函数（从 SettingsWindow 迁移） |
+| `NetworkPopup.qml` | 重写布局（主体工作）+ 新增 `userTextColor`/`fontScale`/`primaryText` 覆盖 |
+| `SettingsWindow.qml` | `interfaceIcon`/`interfaceDescription` 改为调用 `common.xxx`（消除本地重复定义） |
+| `networkview.qml` | 仅改 `PanelPopup` 的 width/height 两个数值 |
+| C++ 后端 | **本次不改**（fontScale 预留扩展点，后续再加） |
+
+## 保持不变的部分
+
+- `NetCommon.qml` 的颜色定义和格式化函数（networkview.qml 和 TrafficChartWindow 共享）
+- chip 滚动逻辑、`scrollToActiveChip`、`sortedInterfaces`、`Connections`
+- `TrafficChartWindow.qml`、`AboutWindow.qml`
+- C++ 后端
+- 深浅主题适配机制（颜色派生自 `DTK.palette.windowText`，自动切换）
+
+## 验证方式
+
+本项目无测试/lint/CI 目标，验证为手动：
+1. `cmake -B build && cmake --build build && sudo cmake --install build`
+2. `systemctl --user restart dde-shell@DDE`
+3. 左键点击任务栏网络监控图标，检查弹窗：
+   - 毛玻璃通透，无卡片填充色块
+   - 速度数字 24px 为视觉锚点
+   - 接口信息区显示类型图标
+   - chip 未选中态有清晰边框
+   - 分隔线划分四个区域
+4. 深色/浅色模式切换，检查文字对比度
+5. 设置窗口选字体颜色，检查弹窗主要文字是否跟随
+6. 切换网卡，检查 chip 滚动和接口信息更新

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)
+    }
 }

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，
+    // 用户自定义字体色：非空时覆盖 primaryText，空串回退 DTK 调色板派生
-    // 主题适配的设计原因见 NetCommon.qml 文件头注释），保持下游 popup.xxx 引用不变
+    // 仅作用于主要文字（接口名、速度数值、累计数值、chip 未选中文字）
-    readonly property color primaryText: common.primaryText
+    // 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,531 @@ 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
+        ColumnLayout {
-                Layout.preferredHeight: 72
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredHeight: 80
+            spacing: 6
+            visible: !popup.ready
 
-                ColumnLayout {
+            Text {
-                    anchors.centerIn: parent
+                text: "⚠"
-                    spacing: 6
+                font.pixelSize: Math.round(40 * popup.fontScale)
+                color: popup.tertiaryText
+                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
+            }
+        }
+
+        // ==================== 分区1：接口信息 ====================
+        // 三行对称结构：行1 接口名（居中），行2 IPv4 地址行，行3 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：类型图标 + 接口名（居中）
+                RowLayout {
+                    Layout.alignment: Qt.AlignHCenter
+                    spacing: 4
+
+                    // 网卡类型图标：与设置窗口列表图标一致，次要色不抢速度区焦点
                     Text {
-                        text: qsTr("Network Speed Monitor")
+                        text: common.interfaceIcon(popup.activeInterface)
-                        font.pixelSize: 15
+                        font.pixelSize: Math.round(12 * popup.fontScale)
-                        font.weight: Font.Bold
+                        color: popup.tertiaryText
-                        color: popup.primaryText
-                        Layout.alignment: Qt.AlignHCenter
                     }
 
-                    // 网卡名 + IP 地址卡片背景
+                    // 接口名：跟随用户 textColor（primaryText），Spec 5.1 节要求
-                    Rectangle {
+                    Text {
-                        Layout.alignment: Qt.AlignHCenter
+                        text: popup.activeInterface
-                        Layout.preferredWidth: 300
+                        font.pixelSize: Math.round(13 * popup.fontScale)
-                        // 有 IPv6 时增高以容纳第三行；无 IPv6 时保持原 40px
+                        color: popup.primaryText
-                        Layout.preferredHeight: popup.ipv6Address ? 54 : 40
+                    }
-                        color: popup.cardBackground
+                }
-                        radius: 8
-                        border.width: 1
-                        border.color: popup.cardBorder
-                        visible: popup.ready
 
-                        ColumnLayout {
+                // 行2：IPv4 标签 + 地址 + 复制图标
-                            anchors.centerIn: parent
+                // 与行3 结构对称：标签固定宽度左对齐，地址左对齐，复制图标在右
-                            spacing: 0
+                RowLayout {
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.maximumWidth: 320
+                    spacing: 6
+                    visible: popup.ipAddress !== ""
 
-                            Text {
+                    // IPv4 标签：固定宽度，与 IPv6 标签列对齐
-                                text: popup.activeInterface
+                    Text {
-                                font.pixelSize: 11
+                        text: qsTr("IPv4")
-                                color: popup.secondaryText
+                        font.pixelSize: Math.round(12 * popup.fontScale)
-                                Layout.alignment: Qt.AlignHCenter
+                        color: popup.tertiaryText
+                        Layout.preferredWidth: 32
+                        horizontalAlignment: Text.AlignLeft
+                    }
+
+                    // IPv4 地址：超长截断 + hover tooltip
+                    Text {
+                        text: popup.ipAddress
+                        font.pixelSize: Math.round(13 * popup.fontScale)
+                        color: popup.secondaryText
+                        elide: Text.ElideRight
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignLeft
+
+                        ToolTip.text: popup.ipAddress
+                        ToolTip.visible: ipv4Mouse.containsMouse && popup.ipAddress !== ""
+                        ToolTip.delay: 300
+
+                        MouseArea {
+                            id: ipv4Mouse
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.IBeamCursor
+                        }
+                    }
+
+                    // 一键复制图标：点击复制 IPv4 到剪贴板，复制后短暂显示 ✓
+                    // 默认态用 primaryText 保证深色背景上清晰可见，hover 变蓝
+                    Text {
+                        text: popup.copiedField === "ipv4" ? "✓" : "⧉"
+                        font.pixelSize: Math.round(12 * popup.fontScale)
+                        color: popup.copiedField === "ipv4"
+                               ? popup.accentGreen
+                               : (ipv4CopyMouse.containsMouse ? popup.accentBlue : popup.primaryText)
+
+                        MouseArea {
+                            id: ipv4CopyMouse
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            hoverEnabled: true
+                            onClicked: {
+                                popup.copyToClipboard(popup.ipAddress)
+                                popup.copiedField = "ipv4"
+                                copyFeedbackTimer.restart()
                             }
+                        }
+                    }
+                }
 
-                            Text {
+                // 行3：IPv6 标签 + 地址 + 复制图标
-                                text: popup.ipAddress ? qsTr("IPv4: ") + popup.ipAddress : ""
+                // 与行2 结构对称：标签固定宽度左对齐，地址左对齐，复制图标在右
-                                font.pixelSize: 13
+                RowLayout {
-                                color: popup.secondaryText
+                    Layout.alignment: Qt.AlignHCenter
-                                visible: popup.ipAddress !== ""
+                    Layout.maximumWidth: 320
-                                Layout.alignment: Qt.AlignHCenter
+                    spacing: 6
-                            }
+                    visible: popup.ipv6Address !== ""
 
-                            // IPv6 全球地址行，无 IPv6 时隐藏不占位
+                    // IPv6 标签：固定宽度，与 IPv4 标签列对齐
-                            Text {
+                    Text {
-                                text: popup.ipv6Address ? qsTr("IPv6: ") + popup.ipv6Address : ""
+                        text: qsTr("IPv6")
-                                font.pixelSize: 13
+                        font.pixelSize: Math.round(12 * popup.fontScale)
-                                color: popup.secondaryText
+                        color: popup.tertiaryText
-                                visible: popup.ipv6Address !== ""
+                        Layout.preferredWidth: 32
-                                Layout.alignment: Qt.AlignHCenter
+                        horizontalAlignment: Text.AlignLeft
+                    }
+
+                    // IPv6 地址：超长截断 + hover tooltip 显示完整地址
+                    Text {
+                        text: popup.ipv6Address
+                        font.pixelSize: Math.round(12 * popup.fontScale)
+                        color: popup.tertiaryText
+                        elide: Text.ElideRight
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignLeft
+
+                        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 到剪贴板，复制后短暂显示 ✓
+                    // 默认态用 primaryText 保证深色背景上清晰可见，hover 变蓝
+                    Text {
+                        text: popup.copiedField === "ipv6" ? "✓" : "⧉"
+                        font.pixelSize: Math.round(12 * popup.fontScale)
+                        color: popup.copiedField === "ipv6"
+                               ? popup.accentGreen
+                               : (ipv6CopyMouse.containsMouse ? popup.accentBlue : popup.primaryText)
+
+                        MouseArea {
+                            id: ipv6CopyMouse
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            hoverEnabled: true
+                            onClicked: {
+                                popup.copyToClipboard(popup.ipv6Address)
+                                popup.copiedField = "ipv6"
+                                copyFeedbackTimer.restart()
                             }
                         }
                     }
                 }
             }
+        }
 
-            // 实时速度卡片：双列布局，每列内容在各自半区内水平垂直居中
+        // 分隔线1
-            // 设计原因：用显式 anchor 分两个等宽半区，比 RowLayout+fillWidth 更可靠，
+        Rectangle {
-            // 确保下载/上传内容各自在左/右半区正中显示
+            Layout.fillWidth: true
-            Rectangle {
+            Layout.preferredHeight: 1
-                Layout.fillWidth: true
+            color: popup.cardBorder
-                Layout.preferredHeight: 110
+            visible: popup.ready
-                color: popup.cardBackground
+        }
-                radius: 12
-                border.width: 1
-                border.color: popup.cardBorder
 
-                // 下载半区（左半）
+        // ==================== 分区2：实时速度（视觉锚点） ====================
-                Item {
+        // 双栏等宽，下载左半区、上传右半区，中间靠留白区分无竖线
-                    id: downloadHalf
+        Item {
-                    anchors.left: parent.left
+            Layout.fillWidth: true
-                    anchors.top: parent.top
+            Layout.preferredHeight: 60
-                    anchors.bottom: parent.bottom
+            visible: popup.ready
-                    anchors.leftMargin: 12
-                    width: (parent.width - 1) / 2 - 12
 
-                    ColumnLayout {
+            // 下载半区（左半）
-                        anchors.centerIn: parent
+            Item {
-                        spacing: 4
+                id: downloadHalf
+                anchors.left: parent.left
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                width: parent.width / 2
 
-                        Rectangle {
+                ColumnLayout {
-                            width: 32
+                    anchors.centerIn: parent
-                            height: 32
+                    spacing: 2
-                            radius: 16
-                            color: popup.accentBlueLight
-                            Layout.alignment: Qt.AlignHCenter
 
-                            Text {
+                    // 下载标签
-                                anchors.centerIn: parent
+                    Text {
-                                text: "↓"
+                        text: qsTr("Download")
-                                font.pixelSize: 18
+                        font.pixelSize: Math.round(12 * popup.fontScale)
-                                font.weight: Font.Bold
+                        color: popup.secondaryText
-                                color: popup.accentBlue
+                        Layout.alignment: Qt.AlignHCenter
-                            }
+                    }
-                        }
+
+                    // 箭头 + 数值（大号粗体）+ 单位（小号）
+                    RowLayout {
+                        spacing: 2
+                        Layout.alignment: Qt.AlignHCenter
 
                         Text {
-                            text: qsTr("Download")
+                            text: "↓"
-                            font.pixelSize: 11
+                            font.pixelSize: Math.round(24 * popup.fontScale)
-                            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")
+                            text: common.formatSpeedValue(popup.downloadSpeed)
-                            font.pixelSize: 11
+                            font.pixelSize: Math.round(24 * popup.fontScale)
-                            color: popup.secondaryText
-                            Layout.alignment: Qt.AlignHCenter
-                        }
-
-                        Text {
-                            text: common.formatSpeed(popup.uploadSpeed)
-                            font.pixelSize: 18
                             font.weight: Font.Bold
-                            color: popup.uploadValueColor
+                            color: common.downloadValueColor(popup.downloadSpeed)
-                            Layout.alignment: Qt.AlignHCenter
+                        }
+
+                        Text {
+                            text: common.formatSpeedUnit(popup.downloadSpeed)
+                            font.pixelSize: Math.round(13 * popup.fontScale)
+                            color: common.downloadValueColor(popup.downloadSpeed)
+                            Layout.alignment: Qt.AlignBaseline
                         }
                     }
                 }
             }
 
-            // 总量统计：单行紧凑
+            // 上传半区（右半）
-            Rectangle {
+            Item {
-                Layout.fillWidth: true
+                id: uploadHalf
-                Layout.preferredHeight: 44
+                anchors.right: parent.right
-                color: popup.cardBackground
+                anchors.top: parent.top
-                radius: 12
+                anchors.bottom: parent.bottom
-                border.width: 1
+                width: parent.width / 2
-                border.color: popup.cardBorder
-                visible: popup.ready
-
-                RowLayout {
-                    anchors.fill: parent
-                    anchors.margins: 12
-                    spacing: 8
-
-                    Item { Layout.fillWidth: true }
-
-                    Text {
-                        text: qsTr("Total")
-                        font.pixelSize: 11
-                        font.weight: Font.Bold
-                        color: popup.secondaryText
-                    }
-
-                    Text {
-                        text: "↓ " + common.formatTotal(popup.totalDownload)
-                        font.pixelSize: 12
-                        color: popup.primaryText
-                    }
-
-                    Text {
-                        text: "↑ " + common.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
+                    spacing: 2
 
+                    // 上传标签
                     Text {
-                        text: "⚠"
+                        text: qsTr("Upload")
-                        font.pixelSize: 24
+                        font.pixelSize: Math.round(12 * popup.fontScale)
                         color: popup.secondaryText
                         Layout.alignment: Qt.AlignHCenter
                     }
 
-                    Text {
+                    // 箭头 + 数值（大号粗体）+ 单位（小号）
-                        text: qsTr("No network interface detected")
+                    RowLayout {
-                        font.pixelSize: 12
+                        spacing: 2
-                        color: popup.secondaryText
                         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)
+                            }
+                        }
                     }
                 }
             }
 
-            Item { Layout.fillHeight: true }
+            // 自定义滚动条样式：默认 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 = ""
+    }
 }

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
                                             }

package/networkview.qml

@@ -264,8 +264,8 @@ AppletItem {
     // 弹窗内容由 NetworkPopup.qml 提供，传入 applet，内部自行派生颜色和数据
     PanelPopup {
         id: networkPopup
-        width: 360
+        width: 330
-        height: 320
+        height: 250
         popupX: DockPanelPositioner.x
         popupY: DockPanelPositioner.y
 
@@ -280,6 +280,7 @@ AppletItem {
         NetworkPopup {
             id: popupContent
             applet: root.applet
+            common: common
             anchors.fill: parent
         }