!407 style: 统一滚动条外观并将投稿应用窗口改为圆角

Merge pull request !407 from xiyidaiwa/Erotica

electron/main/backend/submitter.ts

@@ -448,6 +448,7 @@ export function registerSubmitterHandlers(
         width: 800,
         height: 900,
         frame: false,
+        transparent: true,
         show: false,
         autoHideMenuBar: true,
         icon: path.join(process.env.VITE_PUBLIC!, "favicon.ico"),

electron/main/index.ts

@@ -72,6 +72,13 @@ if (!app.requestSingleInstanceLock()) {
 import "./backend/install-manager.js";
 import "./handle-url-scheme.js";
 
+// 关闭 Linux 的覆盖式（overlay）滚动条，强制使用经典滚动条，
+// 否则 GTK overlay 滚动条会忽略渲染进程的 ::-webkit-scrollbar 颜色，
+// 导致暗色模式下滚动条始终是原生灰色。必须在 app ready 前设置。
+if (process.platform === "linux") {
+  app.commandLine.appendSwitch("disable-features", "OverlayScrollbar");
+}
+
 const logger = pino({ name: "index.ts" });
 const FLARUM_TOKEN_URL = "https://bbs.spark-app.store/api/token";
 

src/App.vue

@@ -73,7 +73,7 @@
           :category-counts="categoryCounts"
           @select-category="selectSubCategory"
         />
-        <div class="flex min-h-0 flex-1 flex-col px-4 py-6 lg:px-10">
+        <div class="flex min-h-0 flex-1 flex-col overflow-hidden px-4 py-6 lg:px-10">
           <FavoriteFolderManager
             v-if="currentView === 'favorites'"
             :folders="favoriteFolders"
@@ -613,7 +613,7 @@ const categoryCounts = computed(() => {
     return { ...tabCounts, all: allCounts.all };
   }
 
-  const counts: Record<string, number> = { all: apps.value.length };
+  const counts: Record<string, number> = { all: baseApps.value.length };
   sourceApps.forEach((app) => {
     if (!counts[app.category]) counts[app.category] = 0;
     counts[app.category]++;

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);
 
@@ -22,6 +25,14 @@
 @variant dark (&:where(.dark, .dark *));
 
 @layer base {
+  html {
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
   body {
     font-family: var(--font-sans);
     background-color: var(--color-surface-light);
@@ -38,12 +49,50 @@
   #app {
     min-height: 100vh;
   }
+
+  /* 全局滚动条基础几何：置于 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: var(--color-scrollbar-thumb-light);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  html ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* 暗色滚动条：挂在 html.dark 上（root），比 surface 略亮以保留可辨识反差 (#15203b)，
+     注意：必须用 html.dark 而非 .dark *，因为经典滚动条只作用于滚动容器自身，
+     .dark * 在亮色模式不命中会导致回退到原生宽度，亮/暗宽度不一致。 */
+  html.dark ::-webkit-scrollbar-thumb {
+    background-color: var(--color-scrollbar-thumb-dark);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+  }
+
+  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 {
@@ -55,10 +104,19 @@
   }
 
   .scrollbar-muted::-webkit-scrollbar-thumb {
-    background-color: #94a3b8;
+    background-color: var(--color-scrollbar-thumb-light);
     border-radius: 9999px;
   }
 
+  html.dark .scrollbar-muted {
+    scrollbar-color: var(--color-surface-dark) transparent;
+  }
+
+  html.dark .scrollbar-muted::-webkit-scrollbar-thumb {
+    background-color: var(--color-surface-dark);
+  }
+
+  /* 完全隐藏滚动条 */
   .scrollbar-nowidth {
     scrollbar-width: none;
   }

src/components/AppGrid.vue

@@ -205,7 +205,6 @@ const gridRows = computed(() => {
   flex: 1;
   box-sizing: border-box;
   overflow-x: hidden;
-  overflow-y: auto;
 }
 
 :deep(.vue-recycle-scroller__item-view) {

src/components/InstalledAppsModal.vue

@@ -100,7 +100,7 @@
         </div>
 
         <div
-          class="flex-1 overflow-y-auto overscroll-contain scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 p-6 space-y-4"
+          class="flex-1 overflow-y-auto overscroll-contain p-6 space-y-4 mr-4 mb-4"
         >
           <div
             v-if="syncMessage"

src/components/SubmitterWindow.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="h-screen overflow-y-auto bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100"
+    class="flex h-screen flex-col overflow-hidden rounded-3xl shadow-2xl bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100"
   >
     <div
-      class="submitter-titlebar sticky top-0 z-30 border-b border-slate-200/70 bg-white px-4 py-3 dark:border-slate-800/70 dark:bg-slate-900"
+      class="submitter-titlebar shrink-0 z-30 border-b border-slate-200/70 bg-white px-4 py-3 dark:border-slate-800/70 dark:bg-slate-900"
     >
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -34,7 +34,8 @@
       </div>
     </div>
 
-    <div class="p-6 max-w-2xl mx-auto">
+    <div class="flex-1 overflow-y-auto mr-4 mb-4">
+      <div class="p-6 max-w-2xl mx-auto">
       <div class="space-y-6">
         <div>
           <label
@@ -746,6 +747,7 @@
         </div>
       </div>
     </Teleport>
+    </div>
   </div>
 </template>
 
@@ -1864,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 {
@@ -1908,6 +1910,16 @@ const getGitInfo = async () => {
 
 onMounted(async () => {
   console.log("[Submitter] Component mounted, loading categories and tags");
+  // 透明窗口：让 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

src/components/WindowTitleBar.vue

@@ -3,7 +3,11 @@
     class="window-titlebar sticky top-0 z-20 flex h-10 shrink-0 items-center justify-between border-b border-slate-200/70 bg-white px-3 text-slate-700 dark:border-slate-800/70 dark:bg-slate-950 dark:text-slate-200"
   >
     <div class="flex min-w-0 items-center gap-2">
-      <span class="h-3 w-3 rounded-full bg-[#2b7fff]"></span>
+      <img
+        src="../assets/imgs/spark-store.svg"
+        class="h-5 w-5 flex-shrink-0"
+        alt="星火应用商店"
+      />
       <span class="truncate text-sm font-semibold">星火应用商店</span>
     </div>
 

src/components/update-center/UpdateCenterToolbar.vue

@@ -61,11 +61,13 @@
 
     <label class="block relative">
       <span class="sr-only">搜索更新</span>
+      <i
+        class="fas fa-search pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"
+      ></i>
       <input
         :value="searchQuery"
-        type="search"
         placeholder="搜索应用或包名"
-        class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-brand/60 focus:bg-white dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:bg-slate-900"
+        class="w-full rounded-2xl border border-slate-200/70 bg-white/80 py-3 pl-12 pr-20 text-sm text-slate-700 shadow-sm outline-none transition placeholder:text-slate-400 focus:border-brand/50 focus:ring-4 focus:ring-brand/10 dark:border-slate-800/70 dark:bg-slate-900/60 dark:text-slate-200"
         @input="handleInput"
       />
       <button