fix: 处理 PR 评审意见(副作用清理、滚动条分层与变量化)

- SubmitterWindow: onMounted 修改 body/html 背景后,在 onUnmounted 中恢复原始值,避免副作用泄漏。
- appstyle.css: 全局滚动条基础几何/颜色移至 @layer base,使 .scrollbar-muted/.scrollbar-nowidth 工具类优先级更高;
  暗色 thumb 改用专用变量 --color-scrollbar-thumb-dark (#15203b),保留比 surface 略亮的可辨识反差(未改用 --color-surface-dark)。
- 评审建议"margin 改 padding"与"改用 .scrollbar-muted"经分析不成立:padding 不会内移滚动条、无法避开圆角,margin 才能把容器连同滚动条推离圆角;
  .scrollbar-muted 为 0.4rem 细条,与其他页面 0.75rem 全局不一致,故保持 mr-4 mb-4 全局样式。
This commit is contained in:
xiyidaiwa
2026-07-22 01:39:52 +08:00
parent df8c2d7eaa
commit 3d28010797
2 changed files with 26 additions and 12 deletions
+17 -10
View File
@@ -13,6 +13,9 @@
--color-card-light: #ffffff;
--color-card-dark: #151c2c;
--color-scrollbar-thumb-light: #94a3b8;
--color-scrollbar-thumb-dark: #15203b;
--shadow-glass: 0 10px 30px rgba(15,23,42,0.08);
--shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45);
@@ -46,18 +49,20 @@
#app {
min-height: 100vh;
}
}
@layer utilities {
/* 必须先声明 ::-webkit-scrollbar 并禁用 overlay 滚动条,才能使自定义颜色生效 */
/* 全局滚动条基础几何:置于 base,使 utilities 中的 .scrollbar-muted/.scrollbar-nowidth 可覆盖 */
*::-webkit-scrollbar {
width: 0.75rem;
height: 0.75rem;
}
*::-webkit-scrollbar-track {
background: transparent;
}
/* 亮色滚动条:与暗色保持相同几何(透明边距),确保亮/暗滚动块大小一致 */
html ::-webkit-scrollbar-thumb {
background-color: #94a3b8;
background-color: var(--color-scrollbar-thumb-light);
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
@@ -67,11 +72,11 @@
background: transparent;
}
/* 暗色滚动条:挂在 html.dark 上(root),与主界面 surface 同色 (#0b1220),加极淡描边以便可抓取。
/* 暗色滚动条:挂在 html.dark 上(root), surface 略亮以保留可辨识反差 (#15203b),
注意:必须用 html.dark 而非 .dark *,因为经典滚动条只作用于滚动容器自身,
.dark * 在亮色模式不命中会导致回退到原生宽度,亮/暗宽度不一致。 */
html.dark ::-webkit-scrollbar-thumb {
background-color: #15203b;
background-color: var(--color-scrollbar-thumb-dark);
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
@@ -81,11 +86,13 @@
html.dark ::-webkit-scrollbar-track {
background: transparent;
}
}
@layer utilities {
/* 弱化滚动条 */
.scrollbar-muted {
scrollbar-width: thin;
scrollbar-color: #94a3b8 transparent;
scrollbar-color: var(--color-scrollbar-thumb-light) transparent;
}
.scrollbar-muted::-webkit-scrollbar {
@@ -97,16 +104,16 @@
}
.scrollbar-muted::-webkit-scrollbar-thumb {
background-color: #94a3b8;
background-color: var(--color-scrollbar-thumb-light);
border-radius: 9999px;
}
html.dark .scrollbar-muted {
scrollbar-color: #0b1220 transparent;
scrollbar-color: var(--color-surface-dark) transparent;
}
html.dark .scrollbar-muted::-webkit-scrollbar-thumb {
background-color: #0b1220;
background-color: var(--color-surface-dark);
}
/* 完全隐藏滚动条 */
+9 -2
View File
@@ -1866,7 +1866,7 @@ const closeWindow = () => {
window.ipcRenderer.send("close-submitter-window");
};
import { onMounted, nextTick } from "vue";
import { onMounted, onUnmounted, nextTick } from "vue";
const getGitInfo = async () => {
try {
@@ -1910,9 +1910,16 @@ const getGitInfo = async () => {
onMounted(async () => {
console.log("[Submitter] Component mounted, loading categories and tags");
// 透明窗口:让 body/html 背景透明,圆角才能透出,否则四角是方角
// 透明窗口:让 body/html 背景透明,圆角才能透出,否则四角是方角
// 保存原始值,在 onUnmounted 中恢复,避免副作用泄漏到其它视图。
const prevHtmlBg = document.documentElement.style.backgroundColor;
const prevBodyBg = document.body.style.backgroundColor;
document.documentElement.style.backgroundColor = "transparent";
document.body.style.backgroundColor = "transparent";
onUnmounted(() => {
document.documentElement.style.backgroundColor = prevHtmlBg;
document.body.style.backgroundColor = prevBodyBg;
});
// 先等待分类列表加载完成,避免后续竞态
await Promise.all([loadCategoriesList(), loadTagsList()]);
// 尝试从 git 配置读取 name 和 email,填入 contributor 和 mail