spark-store-project/spark-store
15
0
Fork 0
mirror of https://gitee.com/spark-store-project/spark-store synced 2026-09-20 21:50:11 +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/AppCard.vue
+7 -9
View File
@@ -39,20 +39,20 @@
<div class="flex shrink-0 gap-1">
<span
v-if="showMergedBadge"
class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400"
>
SPARK/APM
</span>
<template v-else>
<span
v-if="showSparkBadge"
class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
>
Spark
</span>
<span
v-if="showApmBadge"
class="rounded-md px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider shadow-sm bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
class="rounded-md px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider shadow-sm bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
>
APM
</span>
@@ -60,7 +60,7 @@
</div>
<span
v-if="downloadCount"
class="ml-auto shrink-0 text-[10px] text-slate-400 dark:text-slate-500"
class="ml-auto shrink-0 text-[0.625rem] text-slate-400 dark:text-slate-500"
>{{ formatDownloads(downloadCount) }}</span
>
</div>
@@ -72,7 +72,7 @@
</div>
<div
class="truncate leading-tight text-slate-500 dark:text-slate-400"
:class="compact ? 'text-[11px]' : 'text-xs'"
:class="compact ? 'text-[0.6875rem]' : 'text-xs'"
>
{{ description || "\u00A0" }}
</div>
@@ -153,12 +153,10 @@ const formatDownloads = (n?: number): string => {
// 排名徽标配色（前 3 名金/银/铜，其余灰色）
const rankClass = computed(() => {
if (props.rank === 1)
return "bg-amber-400 text-white shadow-amber-400/40";
if (props.rank === 1) return "bg-amber-400 text-white shadow-amber-400/40";
if (props.rank === 2)
return "bg-slate-300 text-slate-700 shadow-slate-400/40";
if (props.rank === 3)
return "bg-amber-600 text-white shadow-amber-600/40";
if (props.rank === 3) return "bg-amber-600 text-white shadow-amber-600/40";
return "bg-slate-500/90 text-white shadow-slate-500/30";
});