🐛 fix(vscode): 悬停提示不用原生 title,webview 统一用自绘提示框,代码阅读的种类图标停上去能看到种类名

VS Code 1.139 带的 Electron 43 在 macOS 上只在鼠标压着带 title 的元素自身边缘时才弹原生提示,
停在它里面的图标、文字上不弹(electron/electron#49843,Electron 38 起)。种类图标 20px 的框
几乎被 16px 的图形占满,所以基本看不到种类名;块右上角按钮同样受影响。页面上核对过:图标中心点
命中的是图标里的线条,没有盖在上面的东西。

- components/ui/tooltip.tsx 改成整页只挂一次的 TooltipHost:元素只写 data-tooltip,事件统一交给它;
  样子照 VS Code 悬停框(editorHoverWidget 那组变量、widget-shadow 阴影),停 500ms 才弹、弹着时换元素
  立刻换,移开 / 按下 / 按键 / 滚动收起;键盘聚焦立刻弹,提示不是元素自己的名字时挂 aria-describedby
- 代码阅读里所有 title(种类图标、块按钮、筛选栏、问答区、中文名的「原名」)改成 data-tooltip;
  SelectMenu 的 title 属性改名 tooltip;看板工单详情原来包一层的 Tooltip 也改成 data-tooltip
- 何时弹 / 收的规则抽成纯函数加测试;更新代码阅读 spec
This commit is contained in:
cruldra committed 2026-09-27 21:21:13 +08:00
1 parent 15790ce7c8
commit ec34ace7cf
17 files changed
+399 -187

No files matched your search

@@ -53,7 +53,7 @@ describe('页面上的中文名', () => {
{ text: 'ADMIN', role: 'variable', offset: 130 },
], [USE, ADMIN])
expect(html.replace(/<[^>]*>/g, '')).toBe('如果 当前用户.role 不等于 UserRole.管理员')
expect(html).toContain('<span class="cr-role-variable" data-offset="90" data-name="当前用户" title="原名 current_user">当前用户</span>')
expect(html).toContain('<span class="cr-role-variable" data-offset="90" data-name="当前用户" data-tooltip="原名 current_user">当前用户</span>')
expect(html).toContain('<span class="cr-role-variable" data-offset="103">role</span>')
expect(html).not.toContain('cr-original')
})
@@ -63,8 +63,8 @@ describe('页面上的中文名', () => {
{ text: 'current_user', role: 'variable', offset: 40 },
{ style: 'iteration', label: '列表', segments: [{ text: 'ADMIN', role: 'variable', offset: 130 }] },
], [CURRENT_USER, ADMIN])
expect(html).toContain('data-offset="40" data-name="当前用户" title="原名 current_user">当前用户<span class="cr-original">current_user</span></span>')
expect(html).toContain('data-offset="130" data-name="管理员" title="原名 ADMIN">管理员</span>')
expect(html).toContain('data-offset="40" data-name="当前用户" data-tooltip="原名 current_user">当前用户<span class="cr-original">current_user</span></span>')
expect(html).toContain('data-offset="130" data-name="管理员" data-tooltip="原名 ADMIN">管理员</span>')
})
it('单击显示成中文名的名字:筛选栏写中文名,当前那一处按点中的下标认', () => {