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-light: #ffffff;
--color-card-dark: #151c2c; --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-glass: 0 10px 30px rgba(15,23,42,0.08);
--shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45); --shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45);
@@ -46,18 +49,20 @@
#app { #app {
min-height: 100vh; min-height: 100vh;
} }
}
@layer utilities { /* 全局滚动条基础几何:置于 base,使 utilities 中的 .scrollbar-muted/.scrollbar-nowidth 可覆盖 */
/* 必须先声明 ::-webkit-scrollbar 并禁用 overlay 滚动条,才能使自定义颜色生效 */
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
} }
*::-webkit-scrollbar-track {
background: transparent;
}
/* 亮色滚动条:与暗色保持相同几何(透明边距),确保亮/暗滚动块大小一致 */ /* 亮色滚动条:与暗色保持相同几何(透明边距),确保亮/暗滚动块大小一致 */
html ::-webkit-scrollbar-thumb { html ::-webkit-scrollbar-thumb {
background-color: #94a3b8; background-color: var(--color-scrollbar-thumb-light);
border-radius: 9999px; border-radius: 9999px;
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
@@ -67,11 +72,11 @@
background: transparent; background: transparent;
} }
/* 暗色滚动条:挂在 html.dark 上(root),与主界面 surface 同色 (#0b1220),加极淡描边以便可抓取。 /* 暗色滚动条:挂在 html.dark 上(root), surface 略亮以保留可辨识反差 (#15203b),
注意:必须用 html.dark 而非 .dark *,因为经典滚动条只作用于滚动容器自身, 注意:必须用 html.dark 而非 .dark *,因为经典滚动条只作用于滚动容器自身,
.dark * 在亮色模式不命中会导致回退到原生宽度,亮/暗宽度不一致。 */ .dark * 在亮色模式不命中会导致回退到原生宽度,亮/暗宽度不一致。 */
html.dark ::-webkit-scrollbar-thumb { html.dark ::-webkit-scrollbar-thumb {
background-color: #15203b; background-color: var(--color-scrollbar-thumb-dark);
border-radius: 9999px; border-radius: 9999px;
border: 2px solid transparent; border: 2px solid transparent;
background-clip: padding-box; background-clip: padding-box;
@@ -81,11 +86,13 @@
html.dark ::-webkit-scrollbar-track { html.dark ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
}
@layer utilities {
/* 弱化滚动条 */ /* 弱化滚动条 */
.scrollbar-muted { .scrollbar-muted {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #94a3b8 transparent; scrollbar-color: var(--color-scrollbar-thumb-light) transparent;
} }
.scrollbar-muted::-webkit-scrollbar { .scrollbar-muted::-webkit-scrollbar {
@@ -97,16 +104,16 @@
} }
.scrollbar-muted::-webkit-scrollbar-thumb { .scrollbar-muted::-webkit-scrollbar-thumb {
background-color: #94a3b8; background-color: var(--color-scrollbar-thumb-light);
border-radius: 9999px; border-radius: 9999px;
} }
html.dark .scrollbar-muted { html.dark .scrollbar-muted {
scrollbar-color: #0b1220 transparent; scrollbar-color: var(--color-surface-dark) transparent;
} }
html.dark .scrollbar-muted::-webkit-scrollbar-thumb { 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"); window.ipcRenderer.send("close-submitter-window");
}; };
import { onMounted, nextTick } from "vue"; import { onMounted, onUnmounted, nextTick } from "vue";
const getGitInfo = async () => { const getGitInfo = async () => {
try { try {
@@ -1910,9 +1910,16 @@ const getGitInfo = async () => {
onMounted(async () => { onMounted(async () => {
console.log("[Submitter] Component mounted, loading categories and tags"); 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.documentElement.style.backgroundColor = "transparent";
document.body.style.backgroundColor = "transparent"; document.body.style.backgroundColor = "transparent";
onUnmounted(() => {
document.documentElement.style.backgroundColor = prevHtmlBg;
document.body.style.backgroundColor = prevBodyBg;
});
// 先等待分类列表加载完成,避免后续竞态 // 先等待分类列表加载完成,避免后续竞态
await Promise.all([loadCategoriesList(), loadTagsList()]); await Promise.all([loadCategoriesList(), loadTagsList()]);
// 尝试从 git 配置读取 name 和 email,填入 contributor 和 mail // 尝试从 git 配置读取 name 和 email,填入 contributor 和 mail