mirror of
https://gitee.com/spark-store-project/spark-store
synced 2026-08-09 22:04:06 +08:00
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。 - 更新中心:搜索框对齐主页样式(左侧图标、统一圆角与配色)。
This commit is contained in:
@@ -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"),
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,6 +34,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -747,6 +748,7 @@
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user