Skip to content

fix(hotspot): improve edit button interaction and icon#582

Open
iCancely wants to merge 3 commits into
linuxdeepin:masterfrom
iCancely:fix/hotspot-edit-button
Open

fix(hotspot): improve edit button interaction and icon#582
iCancely wants to merge 3 commits into
linuxdeepin:masterfrom
iCancely:fix/hotspot-edit-button

Conversation

@iCancely

@iCancely iCancely commented Jul 24, 2026

Copy link
Copy Markdown

背景

PMS: https://pms.uniontech.com/bug-view-371257.html

个人热点页面的编辑按钮缺少悬浮/按下交互反馈,且使用的图标资源不正确,导致可操作性差且视觉不符合预期。

修改内容

  1. 为热点编辑按钮(dcc_network_edit)增加悬浮/按下背景:6px 圆角矩形,适配明暗主题调色板(hover rgba(0,0,0,0.1) / press rgba(0,0,0,0.2),暗色主题对应白底半透明)。
  2. 为编辑按钮设置明确的 30x30 首选尺寸(Layout.preferredWidth/Height),稳定布局。
  3. 替换 dcc_network_edit.dci 图标资源为正确图像(787 → 811 字节)。

影响范围

仅影响控制中心 → 个人热点页面「My Hotspot」标题行的编辑按钮交互与图标显示,不涉及其他页面或后端逻辑。

关联

PMS: BUG-371257

iCancely added 2 commits July 22, 2026 09:49
1. Set left label text to T6 font size on detail list items
2. Set right content text to T7 font size on detail list items

Log: Adjusted font sizes for labels and content on network details page
Influence: Detail page text follows design spec font sizes

fix(network): 调整网络详情页面字体大小

1. 将详情列表左侧标签文字字号设置为 T6
2. 将详情列表右侧内容文字字号设置为 T7

Log: 调整网络详情页面的标签和内容字体大小
PMS: BUG-370973
Influence: 详情页文字符合设计规范字号
…ails page

Replace IconLabel with ActionButton for better hover/pressed feedback.
Add 30x30px hover/pressed background with 6px radius.
Right-align the copy button in the header.
Update copy icon resource to match foreground color.

Log: Improved copy button UX on network details page
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: Network details page copy button interaction and appearance

fix(network): 优化网络详情页复制按钮交互和图标

将 IconLabel 替换为 ActionButton 以支持 hover/pressed 反馈。
添加 30x30px hover/pressed 背景,圆角 6px。
复制按钮在标题栏中右对齐。
更新 copy 图标资源以匹配前景色。

Log: 优化网络详情页复制按钮交互和外观
PMS: https://pms.uniontech.com/bug-view-370975.html
Influence: 网络详情页复制按钮的交互和外观

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @iCancely, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@deepin-ci-robot

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: iCancely

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

1. Add hover/pressed background to the hotspot edit button with 6px radius and proper light/dark palettes
2. Set explicit 30x30 preferred size for the edit button to stabilize layout
3. Replace the dcc_network_edit icon resource with the correct image

Log: Add hover/press feedback and fix the icon for the hotspot edit button
Influence: Improves edit button affordance and visual correctness

fix(hotspot): 完善热点编辑按钮交互与图标

1. 为热点编辑按钮增加悬浮/按下背景,6px 圆角并适配明暗主题调色板
2. 为编辑按钮设置明确的 30x30 首选尺寸以稳定布局
3. 替换 dcc_network_edit 图标资源为正确图像

Log: 为热点编辑按钮增加悬浮/按下反馈并修正图标
PMS: BUG-371257
Influence: 提升编辑按钮可操作性并修正视觉
@iCancely
iCancely force-pushed the fix/hotspot-edit-button branch from 4f59cb5 to b9d3826 Compare July 24, 2026 05:32
@deepin-ci-robot

Copy link
Copy Markdown

deepin pr auto review

★ 总体评分:75分

■ 【总体评价】

代码实现了UI组件的替换和交互样式的优化,但存在属性引用错误和大量重复代码。
逻辑存在属性绑定错误,且代码复用性差,因重复代码扣10分,属性引用错误扣15分。

■ 【详细分析】

  • 1.语法逻辑(存在错误)✕

在 PageDetails.qml 和 PageHotspot.qml 的 background Rectangle 中,color 属性绑定为 parent.pressed ? D.ColorSelector.pressedColor : (parent.hovered ? D.ColorSelector.hoveredColor : "transparent")。但 pressedColorhoveredColor 是定义在 Rectangle 内部的自定义 property,并非 D.ColorSelector 的属性,使用 D.ColorSelector.pressedColor 会导致运行时取值为 undefined,无法正确显示颜色。
潜在问题:颜色绑定失效导致按钮背景无法正常显示悬停和按下效果
建议:将 D.ColorSelector.pressedColor 修改为 pressedColor.color,或者使用 DTK 提供的标准颜色选择机制

  • 2.代码质量(一般)✕

PageDetails.qml 和 PageHotspot.qml 中关于 background 的实现代码完全一致,包括 pressedColor、hoveredColor 的定义以及 color 的绑定逻辑,违反了 DRY 原则。
潜在问题:后续修改交互样式时需要多处同步修改,维护成本高且容易遗漏
建议:将 background 的样式提取为独立的自定义组件,或在公共文件中定义可复用的样式属性

  • 3.代码性能(无性能问题)✓

代码仅涉及 UI 组件的静态渲染和事件绑定,没有引入复杂的计算逻辑或高频的定时器,不会对系统性能造成负面影响。
建议:保持现有实现方式,注意避免在 onClicked 等高频触发的信号中执行耗时操作

  • 4.代码安全(存在0个安全漏洞)✓

漏洞对比统计:新增漏洞 0 个,减少漏洞 0 个,持平 0 个
本次代码变更仅涉及 UI 层的组件替换、样式调整和剪贴板操作,未引入任何外部输入处理、网络请求或系统命令执行,不存在安全攻击面。
建议:无需额外安全修复

■ 【改进建议代码示例】

--- a/dcc-network/qml/PageDetails.qml
+++ b/dcc-network/qml/PageDetails.qml
@@ -60,28 +60,42 @@ DccObject {
                             text: dccObj.displayName
                             elide: Text.ElideMiddle
                         }
-                        D.IconLabel {
+                        D.ActionButton {
                             property bool clipboard: false
-                            Layout.alignment: Qt.AlignRight
+                            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                            Layout.preferredWidth: 30
+                            Layout.preferredHeight: 30
                             icon {
                                 name: "copy"
-                                palette: D.DTK.makeIconPalette(palette)
+                                width: 16
+                                height: 16
                             }
                             D.ToolTip {
                                 id: tip
                                 palette: parent.palette
                             }
-                            MouseArea {
+                            hoverEnabled: true
+                            background: Rectangle {
                                 anchors.fill: parent
-                                acceptedButtons: Qt.LeftButton
-                                onClicked: {
-                                    let text = [infoItem.name]
-                                    for (let i in infoItem.details) {
-                                        text.push(infoItem.details[i][0] + "\t" + infoItem.details[i][1])
-                                    }
-                                    dccData.setClipboard(text.join("\n"))
-                                    tip.show(qsTr("Details has been copied"), 2000)
+                                property D.Palette pressedColor: D.Palette {
+                                    normal: Qt.rgba(0, 0, 0, 0.2)
+                                    normalDark: Qt.rgba(1, 1, 1, 0.25)
+                                }
+                                property D.Palette hoveredColor: D.Palette {
+                                    normal: Qt.rgba(0, 0, 0, 0.1)
+                                    normalDark: Qt.rgba(1, 1, 1, 0.1)
+                                }
+                                radius: 6
+                                color: parent.pressed ? pressedColor.color : (parent.hovered ? hoveredColor.color : "transparent")
+                            }
+                            focusPolicy: Qt.StrongFocus
+                            onClicked: {
+                                let text = [infoItem.name]
+                                for (let i in infoItem.details) {
+                                    text.push(infoItem.details[i][0] + "\t" + infoItem.details[i][1])
                                 }
+                                dccData.setClipboard(text.join("\n"))
+                                tip.show(qsTr("Details has been copied"), 2000)
                             }
                         }
                     }

@deepin-bot

deepin-bot Bot commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

TAG Bot

New tag: 2.0.98
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #583

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants