spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-09-21 22:20:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): 将固定 px 字号改为 rem，让全局字体大小档位生效

Browse Source 
用户反馈首页红框区域（横幅标题/副标题）没随字号档位变大。
原因是多处使用了 Tailwind 固定 px 任意值（text-[10px]/[11px]/[12px]/[13px]/[15px]），
它们不随 html font-size 缩放。统一替换为等效 rem 任意值：
  10px → 0.625rem, 11px → 0.6875rem, 12px → 0.75rem, 13px → 0.8125rem, 15px → 0.9375rem
涉及 8 个 Vue 组件，保证字号档位全局联动（仍保持 16px 基准下的原视觉大小）。
vue-tsc 通过，打包成功；HomeView.vue 原有 emit 未使用 lint 错误未动。
This commit is contained in:
xiyidaiwa
2026-08-17 23:15:18 +08:00
parent 4dc1a1d7fe
commit 7b658e9dd1
9 changed files with 45 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InstalledAppsModal.vue
+11 -11
View File
@@ -48,15 +48,15 @@
<span
class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-400 to-orange-500 text-white shadow-sm shadow-amber-500/30"
>
<i class="fas fa-box-open text-[12px]"></i>
<i class="fas fa-box-open text-[0.75rem]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[15px] font-bold tabular-nums text-amber-700 dark:text-amber-300"
class="text-[0.9375rem] font-bold tabular-nums text-amber-700 dark:text-amber-300"
>{{ apmCount }}</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-amber-600/80 dark:text-amber-400/80"
class="text-[0.625rem] font-medium uppercase tracking-wider text-amber-600/80 dark:text-amber-400/80"
>APM</span
>
</div>
@@ -80,15 +80,15 @@
<span
class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-sky-400 to-blue-500 text-white shadow-sm shadow-sky-500/30"
>
<i class="fas fa-bolt text-[12px]"></i>
<i class="fas fa-bolt text-[0.75rem]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[15px] font-bold tabular-nums text-sky-700 dark:text-sky-300"
class="text-[0.9375rem] font-bold tabular-nums text-sky-700 dark:text-sky-300"
>{{ sparkCount }}</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-sky-600/80 dark:text-sky-400/80"
class="text-[0.625rem] font-medium uppercase tracking-wider text-sky-600/80 dark:text-sky-400/80"
>Spark</span
>
</div>
@@ -112,15 +112,15 @@
<span
class="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-slate-500 to-slate-700 text-white shadow-sm dark:from-slate-400 dark:to-slate-600"
>
<i class="fas fa-cubes text-[12px]"></i>
<i class="fas fa-cubes text-[0.75rem]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[15px] font-bold tabular-nums text-slate-900 dark:text-white"
class="text-[0.9375rem] font-bold tabular-nums text-slate-900 dark:text-white"
>{{ totalCount }}</span
>
<span
class="text-[10px] font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400"
class="text-[0.625rem] font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400"
>总数</span
>
</div>
@@ -259,7 +259,7 @@
:data-testid="
o === 'apm' ? 'origin-tag-apm' : 'origin-tag-spark'
"
class="rounded-md px-2 py-0.5 text-[11px] font-semibold"
class="rounded-md px-2 py-0.5 text-[0.6875rem] font-semibold"
:class="
o === 'apm'
? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400'
@@ -271,7 +271,7 @@
</span>
<span
v-if="app.isDependency"
class="rounded-md bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
class="rounded-md bg-rose-100 px-2 py-0.5 text-[0.6875rem] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
>
依赖项
</span>