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

refactor(display): 移除字体大小设置，仅保留界面整体缩放

Browse Source 
用户实测发现仅调字体到特大/超大时主页面卡片布局遮挡，且字体大小
与界面缩放功能效果高度重叠。故采用方案1：删除字体大小入口，放大
统一由 Electron setZoomFactor 处理（整体等比缩放，不破坏布局）。

- displaySettings.ts：移除 FontSizeOption/FONT_SIZE_OPTIONS/applyFontSize/
  setFontSize/initFontSize 等全部字体相关导出，仅保留界面缩放
- App.vue：移除 initFontSize 导入与调用
- SettingsModal.vue：删除「字体大小」卡片及所有相关逻辑，仅留「界面缩放」
- 还原 8 个组件中当初为字体联动改写的 rem 为原始 px（10/11/12/13/15px），
  消除对 html font-size 的依赖，卡片布局不再因字号变化溢出
This commit is contained in:
xiyidaiwa
2026-08-18 00:15:24 +08:00
parent ede1a1269f
commit 81567f8351
14 changed files with 53 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AccountQuickMenu.vue
+3 -3
View File
@@ -52,10 +52,10 @@ const emit = defineEmits<{
display: flex;
width: 100%;
align-items: center;
gap: 0.75rem;
gap: 12px;
min-width: 0;
border-radius: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: 12px;
padding: 10px 12px;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
src/components/AppCard.vue
+5 -5
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-[0.625rem] 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-[10px] 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-[0.625rem] 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-[10px] 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-[0.625rem] 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-[10px] 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-[0.625rem] text-slate-400 dark:text-slate-500"
class="ml-auto shrink-0 text-[10px] 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-[0.6875rem]' : 'text-xs'"
:class="compact ? 'text-[11px]' : 'text-xs'"
>
{{ description || "\u00A0" }}
</div>
src/components/AppSidebar.vue
+3 -3
View File
@@ -161,10 +161,10 @@ const emitSidebarAction = (action: "list" | "update" | "submit") => {
display: flex;
width: 100%;
align-items: center;
gap: 0.75rem;
gap: 12px;
border: 1px solid transparent;
border-radius: 0.75rem;
padding: 0.625rem 0.875rem;
border-radius: 12px;
padding: 10px 0.875rem;
text-align: left;
font-size: 0.875rem;
font-weight: 500;
src/components/CategoryBar.vue
+3 -3
View File
@@ -71,7 +71,7 @@ const selectCategory = (category: string) => {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 0;
padding: 12px 0;
}
.category-pill {
@@ -81,7 +81,7 @@ const selectCategory = (category: string) => {
white-space: nowrap;
padding: 0.375rem 0.875rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-size: 13px;
font-weight: 500;
color: #64748b;
background: #f1f5f9;
@@ -126,7 +126,7 @@ const selectCategory = (category: string) => {
}
.category-pill-count {
font-size: 0.6875rem;
font-size: 11px;
font-weight: 600;
opacity: 0.75;
}
src/components/HomeView.vue
+4 -4
View File
@@ -62,7 +62,7 @@
storeFilter === "apm" ? "星火应用商店 (Amber PM)" : "星火应用商店"
}}
</h1>
<p class="text-[0.625rem] text-slate-500 dark:text-slate-400 mt-0.5">
<p class="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">
探索丰富的应用，发现更多精彩内容
</p>
</div>
@@ -108,12 +108,12 @@
</div>
<div class="mt-1.5 px-1">
<div
class="text-[0.8125rem] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
class="text-[13px] font-semibold text-slate-900 dark:text-white group-hover:text-brand dark:group-hover:text-brand transition-colors"
>
{{ link.name }}
</div>
<div
class="text-[0.6875rem] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"
class="text-[11px] text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-1"
>
{{ link.more }}
</div>
@@ -192,7 +192,7 @@ const onLinkClick = (link: HomeLink) => {
@media (max-width: 640px) {
.auto-fit-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.75rem;
gap: 12px;
}
}
</style>
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-[0.75rem]"></i>
<i class="fas fa-box-open text-[12px]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[0.9375rem] font-bold tabular-nums text-amber-700 dark:text-amber-300"
class="text-[15px] font-bold tabular-nums text-amber-700 dark:text-amber-300"
>{{ apmCount }}</span
>
<span
class="text-[0.625rem] font-medium uppercase tracking-wider text-amber-600/80 dark:text-amber-400/80"
class="text-[10px] 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-[0.75rem]"></i>
<i class="fas fa-bolt text-[12px]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[0.9375rem] font-bold tabular-nums text-sky-700 dark:text-sky-300"
class="text-[15px] font-bold tabular-nums text-sky-700 dark:text-sky-300"
>{{ sparkCount }}</span
>
<span
class="text-[0.625rem] font-medium uppercase tracking-wider text-sky-600/80 dark:text-sky-400/80"
class="text-[10px] 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-[0.75rem]"></i>
<i class="fas fa-cubes text-[12px]"></i>
</span>
<div class="flex flex-col leading-tight">
<span
class="text-[0.9375rem] font-bold tabular-nums text-slate-900 dark:text-white"
class="text-[15px] font-bold tabular-nums text-slate-900 dark:text-white"
>{{ totalCount }}</span
>
<span
class="text-[0.625rem] font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400"
class="text-[10px] 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-[0.6875rem] font-semibold"
class="rounded-md px-2 py-0.5 text-[11px] 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-[0.6875rem] 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-[11px] font-semibold text-rose-600 dark:bg-rose-500/20 dark:text-rose-400"
>
依赖项
</span>
src/components/RankingAppRow.vue
+3 -3
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-[0.625rem] 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-[10px] 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-[0.625rem] 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-[10px] 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-[0.625rem] text-slate-400 dark:text-slate-500"
class="ml-auto shrink-0 text-[10px] text-slate-400 dark:text-slate-500"
>{{ formatDownloads(downloadCount) }}</span
>
</div>
src/components/SettingsModal.vue
-71
View File
@@ -164,56 +164,6 @@
</div>
</div>
<!-- 字体大小（字号档位：小 / 标准 / 大 / 特大） -->
<div
class="rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-4 dark:border-slate-800/60 dark:bg-slate-800/50"
>
<div class="flex items-start gap-3">
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-xl bg-pink-100 text-pink-600 dark:bg-pink-900/30 dark:text-pink-400"
>
<i class="fas fa-font"></i>
</div>
<div class="min-w-0 flex-1">
<p
class="text-sm font-medium text-slate-800 dark:text-slate-200"
>
字体大小
</p>
<p class="text-xs text-slate-500 dark:text-slate-400">
调整全局界面字体大小（仅字号）
</p>
<div
class="mt-3 inline-flex w-full overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700"
role="radiogroup"
aria-label="字体大小"
>
<button
v-for="opt in fontSizeOptions"
:key="opt.value"
type="button"
role="radio"
:aria-checked="fontSize === opt.value"
class="flex-1 px-2 py-1.5 text-xs font-medium transition-colors"
:class="
fontSize === opt.value
? 'bg-brand text-white'
: 'bg-white text-slate-500 hover:bg-slate-100 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-slate-600'
"
@click="selectFontSize(opt.value)"
>
{{ opt.label }}
</button>
</div>
<p
class="mt-2 text-[0.6875rem] text-slate-400 dark:text-slate-500"
>
预览：星火应用商店 Spark Store 123
</p>
</div>
</div>
</div>
<!-- 界面缩放（整体缩放：图标 / 间距 / 布局等比变化） -->
<div
class="rounded-2xl border border-slate-200/60 bg-slate-50/50 px-4 py-4 dark:border-slate-800/60 dark:bg-slate-800/50"
@@ -281,10 +231,6 @@ import {
type TagPriorityStrategy,
} from "../global/tagPriority";
import {
getFontSize,
setFontSize,
FONT_SIZE_OPTIONS,
type FontSizeOption,
getUiScale,
setUiScale,
uiScaleToFactor,
@@ -312,9 +258,6 @@ const strategyOptions: Array<{ value: TagPriorityStrategy; label: string }> = [
{ value: "apm", label: "APM 优先" },
];
// 字体大小档位选项（小 / 标准 / 大 / 特大）
const fontSizeOptions = FONT_SIZE_OPTIONS;
// 界面缩放档位选项（90% / 100% / 110% / 125% / 150%）
const uiScaleOptions = UI_SCALE_OPTIONS;
@@ -331,19 +274,6 @@ const selectStrategy = (value: TagPriorityStrategy) => {
setTagPriorityStrategy(value);
};
// 字体大小档位（仅字号，不含整体缩放/字体族）
const fontSize = ref<FontSizeOption>("medium");
const loadFontSize = () => {
fontSize.value = getFontSize();
};
// 选择并保存字号档位（立即应用到 html，全局 rem 字号类联动）
const selectFontSize = (value: FontSizeOption) => {
fontSize.value = value;
setFontSize(value);
};
// 界面整体缩放档位（Electron setZoomFactor，连图标/间距/布局等比变化）
const uiScale = ref<UiScaleOption>("100");
@@ -422,7 +352,6 @@ watch(
if (newVal) {
loadSettings();
loadTagPriority();
loadFontSize();
loadUiScale();
}
},
src/components/SourceLabel.vue
+1 -1
View File
@@ -8,7 +8,7 @@
"
>
<span
class="rounded px-1.5 py-0.5 text-[0.625rem] font-bold uppercase"
class="rounded px-1.5 py-0.5 text-[10px] font-bold uppercase"
:class="
origin === 'spark'
? '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="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)]"
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)]"
>社区版</span
>
</div>
src/components/update-center/UpdateCenterItem.vue
+9 -9
View File
@@ -42,25 +42,25 @@
{{ item.displayName }}
</p>
<span
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"
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"
>
{{ sourceLabel }}
</span>
<span
v-if="item.ignored === true"
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"
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"
>
已忽略
</span>
<span
v-else-if="item.held === true && !forced"
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"
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"
>
已锁定
</span>
<span
v-else-if="item.held === true && forced"
class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[0.625rem] font-semibold text-white dark:bg-amber-500"
class="shrink-0 rounded-full bg-amber-500 px-2 py-0.5 text-[10px] font-semibold text-white dark:bg-amber-500"
>
将强制
</span>
@@ -84,16 +84,16 @@
class="flex shrink-0 flex-col items-end gap-0.5"
>
<span
class="text-[0.6875rem] font-semibold text-brand dark:text-amber-300"
class="text-[11px] font-semibold text-brand dark:text-amber-300"
>{{ timeLabel }}</span
>
<span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
<span class="text-[10px] text-slate-400">{{ sizeLabel }}</span>
</div>
<div v-else-if="!task" class="flex shrink-0 flex-col items-end gap-0.5">
<span class="text-[0.6875rem] font-semibold text-slate-400">{{
<span class="text-[11px] font-semibold text-slate-400">{{
timeLabel
}}</span>
<span class="text-[0.625rem] text-slate-400">{{ sizeLabel }}</span>
<span class="text-[10px] text-slate-400">{{ sizeLabel }}</span>
</div>
<!-- 强制安装开关：仅对被系统锁定（held）的包显示 -->
@@ -116,7 +116,7 @@
:class="forced ? 'translate-x-[16px]' : 'translate-x-[2px]'"
></span>
</button>
<span class="text-[0.625rem] text-slate-400">强制</span>
<span class="text-[10px] text-slate-400">强制</span>
</div>
<button