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

- 滚动条：主进程对 Linux 关闭 overlay 滚动条
  (disable-features=OverlayScrollbar)，使 CSS ::-webkit-scrollbar 自定义生效；
  全局统一定义亮色 #94a3b8 / 暗色 #15203b（带极淡描边），宽度 0.75rem，亮暗一致。
- 投稿页：修复滚动条贯穿整个窗口、侵入标题栏（改为 flex 分栏，
  标题栏 shrink-0，内容区单独滚动）。
- 应用管理页：移除 scrollbar-nowidth 隐藏与 scrollbar-thumb-* 覆盖色，
  改由全局规则统一，与其他页面一致。
- 圆角页面：投稿页与已安装应用页滚动容器内缩 (mr-4 mb-4)，
  避免滚动条滚入圆角被裁切。
- 投稿应用窗口：独立窗口改为透明圆角窗口 (transparent + rounded-3xl + shadow-2xl)，
  与弹框风格统一；挂载时 body 背景透明以露出圆角。
- 标题栏：左上角蓝色圆点替换为软件图标 spark-store.svg。
- 更新中心：搜索框对齐主页样式（左侧图标、统一圆角与配色）。

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"

src/assets/css/appstyle.css

@@ -22,6 +22,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);
@@ -41,6 +49,40 @@
 }
 
 @layer utilities {
+  /* 必须先声明 ::-webkit-scrollbar 并禁用 overlay 滚动条，才能使自定义颜色生效 */
+  *::-webkit-scrollbar {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  /* 亮色滚动条：与暗色保持相同几何（透明边距），确保亮/暗滚动块大小一致 */
+  html ::-webkit-scrollbar-thumb {
+    background-color: #94a3b8;
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  html ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  /* 暗色滚动条：挂在 html.dark 上（root），与主界面 surface 同色 (#0b1220)，加极淡描边以便可抓取。
+     注意：必须用 html.dark 而非 .dark *，因为经典滚动条只作用于滚动容器自身，
+     .dark * 在亮色模式不命中会导致回退到原生宽度，亮/暗宽度不一致。 */
+  html.dark ::-webkit-scrollbar-thumb {
+    background-color: #15203b;
+    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;
+  }
+
+  /* 弱化滚动条 */
   .scrollbar-muted {
     scrollbar-width: thin;
     scrollbar-color: #94a3b8 transparent;
@@ -59,6 +101,15 @@
     border-radius: 9999px;
   }
 
+  html.dark .scrollbar-muted {
+    scrollbar-color: #0b1220 transparent;
+  }
+
+  html.dark .scrollbar-muted::-webkit-scrollbar-thumb {
+    background-color: #0b1220;
+  }
+
+  /* 完全隐藏滚动条 */
   .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>
 
@@ -1908,6 +1910,9 @@ const getGitInfo = async () => {
 
 onMounted(async () => {
   console.log("[Submitter] Component mounted, loading categories and tags");
+  // 透明窗口：让 body/html 背景透明，圆角才能透出，否则四角是方角
+  document.documentElement.style.backgroundColor = "transparent";
+  document.body.style.backgroundColor = "transparent";
   // 先等待分类列表加载完成，避免后续竞态
   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