mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-09 22:04:06 +08:00
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:
+17
-10
@@ -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);
|
||||
}
|
||||
|
||||
/* 完全隐藏滚动条 */
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user