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
debian/changelog
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
spark-store (5.3.0.2-test) UNRELEASED; urgency=medium spark-store (5.3.0.3-test) UNRELEASED; urgency=medium
* Initial release. * Initial release.
src/components/AppCard.vue
+7 -9
View File
@@ -39,20 +39,20 @@
<div class="flex shrink-0 gap-1"> <div class="flex shrink-0 gap-1">
<span <span
v-if="showMergedBadge" 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 SPARK/APM
</span> </span>
<template v-else> <template v-else>
<span <span
v-if="showSparkBadge" 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 Spark
</span> </span>
<span <span
v-if="showApmBadge" 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 APM
</span> </span>
@@ -60,7 +60,7 @@
</div> </div>
<span <span
v-if="downloadCount" 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 >{{ formatDownloads(downloadCount) }}</span
> >
</div> </div>
@@ -72,7 +72,7 @@
</div> </div>
<div <div
class="truncate leading-tight text-slate-500 dark:text-slate-400" 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" }} {{ description || "\u00A0" }}
</div> </div>
@@ -153,12 +153,10 @@ const formatDownloads = (n?: number): string => {
// 排名徽标配色（前 3 名金/银/铜，其余灰色） // 排名徽标配色（前 3 名金/银/铜，其余灰色）
const rankClass = computed(() => { const rankClass = computed(() => {
if (props.rank === 1) if (props.rank === 1) return "bg-amber-400 text-white shadow-amber-400/40";
return "bg-amber-400 text-white shadow-amber-400/40";
if (props.rank === 2) if (props.rank === 2)
return "bg-slate-300 text-slate-700 shadow-slate-400/40"; return "bg-slate-300 text-slate-700 shadow-slate-400/40";
if (props.rank === 3) if (props.rank === 3) return "bg-amber-600 text-white shadow-amber-600/40";
return "bg-amber-600 text-white shadow-amber-600/40";
return "bg-slate-500/90 text-white shadow-slate-500/30"; return "bg-slate-500/90 text-white shadow-slate-500/30";
}); });
src/components/HomeView.vue
+3 -3
View File
@@ -62,7 +62,7 @@
storeFilter === "apm" ? "星火应用商店 (Amber PM)" : "星火应用商店" storeFilter === "apm" ? "星火应用商店 (Amber PM)" : "星火应用商店"
}} }}
</h1> </h1>
<p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5"> <p class="text-[0.625rem] text-slate-500 dark:text-slate-400 mt-0.5">
探索丰富的应用，发现更多精彩内容 探索丰富的应用，发现更多精彩内容
</p> </p>
</div> </div>
@@ -108,12 +108,12 @@
</div> </div>
<div class="mt-1.5 px-1"> <div class="mt-1.5 px-1">
<div <div
class="text-[13px] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors" class="text-[0.8125rem] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
> >
{{ link.name }} {{ link.name }}
</div> </div>
<div <div
class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1" class="text-[0.6875rem] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"
> >
{{ link.more }} {{ link.more }}
</div> </div>
src/components/InstalledAppsModal.vue
+11 -11
View File
@@ -48,15 +48,15 @@
<span <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" 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> </span>
<div class="flex flex-col leading-tight"> <div class="flex flex-col leading-tight">
<span <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 >{{ apmCount }}</span
> >
<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 >APM</span
> >
</div> </div>
@@ -80,15 +80,15 @@
<span <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" 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> </span>
<div class="flex flex-col leading-tight"> <div class="flex flex-col leading-tight">
<span <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 >{{ sparkCount }}</span
> >
<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 >Spark</span
> >
</div> </div>
@@ -112,15 +112,15 @@
<span <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" 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> </span>
<div class="flex flex-col leading-tight"> <div class="flex flex-col leading-tight">
<span <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 >{{ totalCount }}</span
> >
<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 >总数</span
> >
</div> </div>
@@ -259,7 +259,7 @@
:data-testid=" :data-testid="
o === 'apm' ? 'origin-tag-apm' : 'origin-tag-spark' 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=" :class="
o === 'apm' o === 'apm'
? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400' ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400'
@@ -271,7 +271,7 @@
</span> </span>
<span <span
v-if="app.isDependency" 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> </span>
src/components/RankingAppRow.vue
+5 -4
View File
@@ -34,17 +34,17 @@
</div> </div>
<span <span
v-if="app.origin === 'spark'" 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 >Spark</span
> >
<span <span
v-else 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 >APM</span
> >
<span <span
v-if="showDownload && downloadCount" 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 >{{ formatDownloads(downloadCount) }}</span
> >
</div> </div>
@@ -77,7 +77,8 @@ const iconFailed = ref(false);
const iconPath = computed(() => { const iconPath = computed(() => {
const arch = window.apm_store.arch || "amd64"; 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`; return `${APM_STORE_BASE_URL}/${finalArch}/${props.app.category}/${props.app.pkgname}/icon.png`;
}); });
src/components/SettingsModal.vue
+1 -1
View File
@@ -206,7 +206,7 @@
</button> </button>
</div> </div>
<p <p
class="mt-2 text-[11px] text-slate-400 dark:text-slate-500" class="mt-2 text-[0.6875rem] text-slate-400 dark:text-slate-500"
> >
预览：星火应用商店 Spark Store 123 预览：星火应用商店 Spark Store 123
</p> </p>
src/components/SourceLabel.vue
+1 -1
View File
@@ -8,7 +8,7 @@
" "
> >
<span <span
class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase" class="rounded px-1.5 py-0.5 text-[0.625rem] font-bold uppercase"
:class=" :class="
origin === 'spark' origin === 'spark'
? 'bg-orange-100 dark:bg-orange-900/30' ? 'bg-orange-100 dark:bg-orange-900/30'
src/components/WindowTitleBar.vue
+1 -1
View File
@@ -20,7 +20,7 @@
/> />
<span class="truncate text-base font-semibold">星火应用商店</span> <span class="truncate text-base font-semibold">星火应用商店</span>
<span <span
class="rounded-full border border-orange-400 bg-orange-50 px-2 py-0.5 text-[10px] font-semibold text-orange-600 dark:border-amber-400/70 dark:bg-amber-400/10 dark:text-amber-300 dark:shadow-[0_0_8px_rgba(251,191,36,0.4)]" class="rounded-full border border-orange-400 bg-orange-50 px-2 py-0.5 text-[0.625rem] font-semibold text-orange-600 dark:border-amber-400/70 dark:bg-amber-400/10 dark:text-amber-300 dark:shadow-[0_0_8px_rgba(251,191,36,0.4)]"
>社区版</span >社区版</span
> >
</div> </div>
src/components/update-center/UpdateCenterItem.vue
+15 -16
View File
@@ -42,25 +42,25 @@
{{ item.displayName }} {{ item.displayName }}
</p> </p>
<span <span
class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200" class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[0.625rem] font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-200"
> >
{{ sourceLabel }} {{ sourceLabel }}
</span> </span>
<span <span
v-if="item.ignored === true" v-if="item.ignored === true"
class="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-[10px] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300" class="shrink-0 rounded-full bg-slate-200 px-2 py-0.5 text-[0.625rem] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300"
> >
已忽略 已忽略
</span> </span>
<span <span
v-else-if="item.held === true && !forced" v-else-if="item.held === true && !forced"
class="shrink-0 rounded-full bg-amber-200 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-500/20 dark:text-amber-200" class="shrink-0 rounded-full bg-amber-200 px-2 py-0.5 text-[0.625rem] font-semibold text-amber-700 dark:bg-amber-500/20 dark:text-amber-200"
> >
已锁定 已锁定
</span> </span>
<span <span
v-else-if="item.held === true && forced" v-else-if="item.held === true && forced"
class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-semibold text-white dark:bg-amber-500" class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[0.625rem] font-semibold text-white dark:bg-amber-500"
> >
将强制 将强制
</span> </span>
@@ -83,19 +83,17 @@
v-if="item.ignored !== true && !task" v-if="item.ignored !== true && !task"
class="flex shrink-0 flex-col items-end gap-0.5" class="flex shrink-0 flex-col items-end gap-0.5"
> >
<span class="text-[11px] font-semibold text-brand dark:text-amber-300">{{ <span
timeLabel class="text-[0.6875rem] font-semibold text-brand dark:text-amber-300"
}}</span> >{{ timeLabel }}</span
<span class="text-[10px] text-slate-400">{{ sizeLabel }}</span> >
<span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
</div> </div>
<div <div v-else-if="!task" class="flex shrink-0 flex-col items-end gap-0.5">
v-else-if="!task" <span class="text-[0.6875rem] font-semibold text-slate-400">{{
class="flex shrink-0 flex-col items-end gap-0.5"
>
<span class="text-[11px] font-semibold text-slate-400">{{
timeLabel timeLabel
}}</span> }}</span>
<span class="text-[10px] text-slate-400">{{ sizeLabel }}</span> <span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
</div> </div>
<!-- 强制安装开关：仅对被系统锁定（held）的包显示 --> <!-- 强制安装开关：仅对被系统锁定（held）的包显示 -->
@@ -118,7 +116,7 @@
:class="forced ? 'translate-x-[16px]' : 'translate-x-[2px]'" :class="forced ? 'translate-x-[16px]' : 'translate-x-[2px]'"
></span> ></span>
</button> </button>
<span class="text-[10px] text-slate-400">强制</span> <span class="text-[0.625rem] text-slate-400">强制</span>
</div> </div>
<button <button
@@ -181,7 +179,8 @@ defineEmits<{
// 被锁定且未强制时，复选框禁用（与「已忽略」一样不可被选中） // 被锁定且未强制时，复选框禁用（与「已忽略」一样不可被选中）
const isSelectionLocked = computed( const isSelectionLocked = computed(
() => props.item.ignored === true || (props.item.held === true && !props.forced), () =>
props.item.ignored === true || (props.item.held === true && !props.forced),
); );
const normalizeIconSrc = (icon: string): string => { const normalizeIconSrc = (icon: string): string => {