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

用户反馈首页红框区域(横幅标题/副标题)没随字号档位变大。
原因是多处使用了 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
+5 -4
View File
@@ -34,17 +34,17 @@
</div>
<span
v-if="app.origin === 'spark'"
class="rounded-md bg-orange-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
class="rounded-md bg-orange-100 px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider text-orange-600 dark:bg-orange-900/30 dark:text-orange-400"
>Spark</span
>
<span
v-else
class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
class="rounded-md bg-blue-100 px-1.5 py-0.5 text-[0.625rem] font-bold uppercase tracking-wider text-blue-600 dark:bg-blue-900/30 dark:text-blue-400"
>APM</span
>
<span
v-if="showDownload && 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>
@@ -77,7 +77,8 @@ const iconFailed = ref(false);
const iconPath = computed(() => {
const arch = window.apm_store.arch || "amd64";
const finalArch = props.app.origin === "spark" ? `${arch}-store` : `${arch}-apm`;
const finalArch =
props.app.origin === "spark" ? `${arch}-store` : `${arch}-apm`;
return `${APM_STORE_BASE_URL}/${finalArch}/${props.app.category}/${props.app.pkgname}/icon.png`;
});