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:
xiyidaiwa
2026-07-22 01:19:52 +08:00
parent e857ce67b3
commit df8c2d7eaa
9 changed files with 78 additions and 9 deletions
+8 -3
View File
@@ -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