chore(TabBar): 优化 TabBar 关闭按钮 hover 样式#157
Conversation
There was a problem hiding this comment.
Pull request overview
本 PR 旨在优化工作区 TabBar 中关闭按钮的 hover 视觉效果，以提升交互反馈的一致性与可用性。
Changes:
- 调整 TabBar 关闭按钮 hover 样式（为 iconfont 的
::before增加 padding/背景/圆角）。 - 顺带对
TabBar.vue的脚本与模板做了较大范围的格式化变更（引号、分号、换行等）。 - 细微调整
cubic-bezier(...)参数写法（数值规范化）。
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .closeIcon:hover { | ||
|
|
||
| span { | ||
| color: var(--text-color-1); | ||
|
|
||
| &::before { |
There was a problem hiding this comment.
.closeIcon:hover span { color: var(--text-color-1) } is effectively overridden when the tab is hovered because the later &:hover .closeIcon span { color: var(--text-color-2) } selector is more specific and appears later in the file. If the intent is to change the close icon color on close-button hover, increase selector specificity (e.g. &:hover .closeIcon:hover span) and/or move the override after the tab hover block so it wins in the cascade.
| import { onMounted, onUnmounted, ref } from "vue"; | ||
| import { vDraggable } from "vue-draggable-plus"; | ||
| import useFile from "@/renderer/hooks/useFile"; | ||
| import useTab from "@/renderer/hooks/useTab"; |
There was a problem hiding this comment.
This PR is described as a hover-style tweak, but the script section also introduces broad non-functional reformatting (quote style + semicolons). Consider reverting unrelated formatting-only changes so the diff stays focused and easier to review/blame in the future.
| window.addEventListener("keydown", handleCloseTabShortcut); | ||
|
|
There was a problem hiding this comment.
window.addEventListener('keydown', ...) is registered at setup evaluation time (outside onMounted). To avoid listeners being attached before mount (and to reduce leak risk if setup ever errors), register the handler inside onMounted and keep the corresponding removal in onUnmounted.
| window.addEventListener("keydown", handleCloseTabShortcut); | |
| onMounted(() => { | |
| window.addEventListener("keydown", handleCloseTabShortcut); | |
| }); | |
| onUnmounted(() => { | |
| window.removeEventListener("keydown", handleCloseTabShortcut); | |
| }); |
| createNewFile(); | ||
| } | ||
|
|
||
| async function handleCloseTab(id: string, event: Event) { |
There was a problem hiding this comment.
handleCloseTab is marked async but doesn't await anything. This returns a Promise unnecessarily and can be misleading; consider removing async (or await the confirm/close call if it is actually asynchronous).
| async function handleCloseTab(id: string, event: Event) { | |
| function handleCloseTab(id: string, event: Event) { |
|
🎉 Thank you for your contribution! If you have not yet joined our community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您对此项目非常感兴趣，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。
|
优化 TabBar 关闭按钮 hover 样式