From 3d28010797e6aef45af3cbf4b80899c746a7f547 Mon Sep 17 00:00:00 2001
From: xiyidaiwa <g17729830615@163.com>
Date: Wed, 22 Jul 2026 01:39:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=20PR=20=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E6=84=8F=E8=A7=81=EF=BC=88=E5=89=AF=E4=BD=9C=E7=94=A8?=
 =?UTF-8?q?=E6=B8=85=E7=90=86=E3=80=81=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=88=86?=
 =?UTF-8?q?=E5=B1=82=E4=B8=8E=E5=8F=98=E9=87=8F=E5=8C=96=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 全局样式。
---
 src/assets/css/appstyle.css        | 27 +++++++++++++++++----------
 src/components/SubmitterWindow.vue | 11 +++++++++--
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/appstyle.css b/src/assets/css/appstyle.css
index 19fe0f55..f8affd3f 100644
--- a/src/assets/css/appstyle.css
+++ b/src/assets/css/appstyle.css
@@ -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);
   }
 
   /* 完全隐藏滚动条 */
diff --git a/src/components/SubmitterWindow.vue b/src/components/SubmitterWindow.vue
index 50570652..2fcb9476 100644
--- a/src/components/SubmitterWindow.vue
+++ b/src/components/SubmitterWindow.vue
@@ -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