Skip to content

[Bug] 列表模式:鼠标悬停行的选中背景不可见(选中底色弱于 hover 底色) #680

Description

@leqq00

🐛 Bug 描述

在任意「列表模式」插件(uTools 兼容的 window.exports list 模式)中,鼠标停留在列表某一行不动时,用键盘 ↑/↓ 移动选中项,鼠标所在的那一行(即当前键盘选中行)看不出选中背景——视觉上只剩 hover 的灰色底,像选中态被 hover 覆盖。

📋 复现步骤

  1. 进入任意 list 模式插件(uTools 兼容 window.exports;我用 jet-plugin 复现,其它 list 模式插件同样)
  2. 鼠标停在列表中某一行不动(期间不要移动鼠标)
  3. 用键盘 ↑/↓ 移动选中项,让选中项落在/经过鼠标所在行
  4. 观察鼠标所在行:该行已是选中行,但看不到选中背景(只有 hover 底色)

✅ 预期行为

选中态优先级应高于 hover:鼠标悬停在选中行时,该行仍显示「选中底色」,且选中底色与 hover 底色有可辨识的对比度。

❌ 实际行为

鼠标所在行的选中背景看不出来(深色主题下尤其明显):hover 底色比选中底色更醒目,视觉上像选中被 hover 顶掉。

📸 截图

现象需要「鼠标悬停 + 键盘移动」的连续动作,静态截图不好体现;需要的话我可以补一段录屏/GIF。

💻 环境信息

  • OS: macOS 27.0(26A428,arm64)
  • ZTools 版本: 3.2.0
  • Node.js 版本: 不需要(非源码运行)
  • 主题: 深色

📝 错误日志

无报错。

🔍 额外信息

从 3.2.0 的 app.asar 解出的前端资源看,列表项的 hover / 选中样式如下(问题在宿主侧,插件不参与 UI 渲染,只提供列表数据):

out/renderer/assets/index-BhAPifQy.css

.list-item[data-v-0cd6391a]:hover {
  background: var(--hover-bg);
}

.list-item.selected[data-v-0cd6391a] {
  background: var(--primary-light-bg);
}

out/renderer/assets/super-panel--mjvnP20.css

.list-item[data-v-930cc67d]:hover,
.list-item.selected[data-v-930cc67d] {
  background: var(--hover-bg);
}

.list-item.selected[data-v-930cc67d] {
  background: var(--active-bg);
}

选中态绑定(renderer JS):normalizeClass(["list-item", { selected: index === __props.selectedIndex }])(另有 app-item、push-item list-item 两处同款);列表内只有 onMousedown、没有 mouseenter/mousemove,说明悬停完全由 CSS 决定。

相关变量(深色主题取值):

  • --hover-bg: #374151(另有 rgba(255, 255, 255, 0.05)、color-mix(in srgb, var(--primary-color) 5%, #303133))
  • --primary-light-bg: color-mix(in srgb, var(--primary-color), transparent 92%) —— 仅 8% 主色,深色底上几乎不可见
  • --active-bg: color-mix(in srgb, var(--primary-color) 12%, #303133) / rgba(255, 255, 255, 0.08)

.list-item:hover 与 .list-item.selected 的优先级相同(class + 属性选择器 + 伪类),归属只由书写顺序决定;同时选中底色明显弱于 hover 底色。

建议修复方向(任选其一):

  1. 让 hover 不作用于选中行:.list-item:hover:not(.selected),并确保 .list-item.selected 规则书写在 hover 之后;
  2. 提高深色主题下选中底色的对比度:--primary-light-bg 的 8% 主色偏弱,建议改用 --active-bg 或提高混合比例。

影响范围:所有 list 模式(uTools 兼容 window.exports)插件均可见,非单个插件问题。

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions