diff --git a/electron/main/backend/submitter.ts b/electron/main/backend/submitter.ts index be559f3a..cbe523ac 100644 --- a/electron/main/backend/submitter.ts +++ b/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"), diff --git a/electron/main/index.ts b/electron/main/index.ts index ebf970b6..97f7451b 100644 --- a/electron/main/index.ts +++ b/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"; diff --git a/src/App.vue b/src/App.vue index 83240255..3c83aaa2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -73,7 +73,7 @@ :category-counts="categoryCounts" @select-category="selectSubCategory" /> -
+
{ return { ...tabCounts, all: allCounts.all }; } - const counts: Record = { all: apps.value.length }; + const counts: Record = { all: baseApps.value.length }; sourceApps.forEach((app) => { if (!counts[app.category]) counts[app.category] = 0; counts[app.category]++; diff --git a/src/assets/css/appstyle.css b/src/assets/css/appstyle.css index 00404431..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); @@ -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; } diff --git a/src/components/AppGrid.vue b/src/components/AppGrid.vue index be14e4aa..d75216ad 100644 --- a/src/components/AppGrid.vue +++ b/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) { diff --git a/src/components/InstalledAppsModal.vue b/src/components/InstalledAppsModal.vue index d4471c47..a7d28b32 100644 --- a/src/components/InstalledAppsModal.vue +++ b/src/components/InstalledAppsModal.vue @@ -100,7 +100,7 @@
@@ -34,7 +34,8 @@
-
+
+
+
@@ -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 diff --git a/src/components/WindowTitleBar.vue b/src/components/WindowTitleBar.vue index 9fb3c8bb..f2119fe0 100644 --- a/src/components/WindowTitleBar.vue +++ b/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" >
- + 星火应用商店 星火应用商店
diff --git a/src/components/update-center/UpdateCenterToolbar.vue b/src/components/update-center/UpdateCenterToolbar.vue index e6e9c9c6..acf9aa18 100644 --- a/src/components/update-center/UpdateCenterToolbar.vue +++ b/src/components/update-center/UpdateCenterToolbar.vue @@ -61,11 +61,13 @@