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

用户实测发现仅调字体到特大/超大时主页面卡片布局遮挡,且字体大小
与界面缩放功能效果高度重叠。故采用方案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
+1 -1
View File
@@ -1,4 +1,4 @@
spark-store (5.3.0.6) UNRELEASED; urgency=medium
spark-store (5.3.0.7-test) UNRELEASED; urgency=medium
* Initial release.
+2 -4
View File
@@ -344,7 +344,7 @@ import ReviewUserProfileModal from "./components/ReviewUserProfileModal.vue";
import WindowTitleBar from "./components/WindowTitleBar.vue";
import SubmitterWindow from "./components/SubmitterWindow.vue";
import { initTagPriorityStrategy } from "./global/tagPriority";
import { initFontSize, initUiScale } from "./global/displaySettings";
import { initUiScale } from "./global/displaySettings";
import {
FLARUM_BASE_URL,
FLARUM_REGISTER_URL,
@@ -1053,9 +1053,7 @@ onMounted(async () => {
// 应用启动即锁定标签优先显示策略的真实持久化值,避免依赖详情页挂载顺序
// 导致先读到内存默认值 "auto" 再懒加载的竞态窗口。
initTagPriorityStrategy();
// 恢复并应用持久化的字体大小档位(仅字号),避免渲染瞬间默认字号闪烁
initFontSize();
// 恢复并应用持久化的界面整体缩放(Electron setZoomFactor),与字号正交。
// 恢复并应用持久化的界面整体缩放(Electron setZoomFactor
void initUiScale();
initTheme();
updateCenterStore.bind();
+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;
+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>
+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;
+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;
}
+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>
+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>
+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>
-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();
}
},
+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'
+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>
@@ -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
+7 -83
View File
@@ -1,89 +1,13 @@
/**
* 显示设置:全局字体大小档位(仅字号,不含整体缩放/字体族)。
* 显示设置:界面整体缩放(Electron webContents.setZoomFactor
*
* 实现原理:Tailwind 4 的 `text-*` 字号类均为 rem 单位(如 text-sm = 0.875rem),
* 因此修改根元素 `html` 的 font-size 即可让全部 rem 字号类联动缩放。
* 取值范围:14px(小) ~ 18px(特大),默认 16px(标准)
* 通过 Electron 的 setZoomFactor 整体缩放渲染内容,连图标、间距、布局
* 一起等比放大/缩小(逻辑分辨率变化),不会破坏布局;与单纯改字号相比
* 更稳定,故本应用只提供此一种显示放大入口
*
* 持久化:localStorage key = "spark-store-font-size",存档位枚举字符串。
*/
export type FontSizeOption = "small" | "medium" | "large" | "xlarge" | "xxlarge";
interface FontSizeMeta {
/** 应用到 html 的 font-sizepx */
px: number;
label: string;
}
export const FONT_SIZE_OPTIONS: Array<{
value: FontSizeOption;
label: string;
}> = [
{ value: "small", label: "小" },
{ value: "medium", label: "标准" },
{ value: "large", label: "大" },
{ value: "xlarge", label: "特大" },
{ value: "xxlarge", label: "超大" },
];
// 各档位对应的根字号。medium 保持现状 16px,向上放大、向下略缩。
const FONT_SIZE_MAP: Record<FontSizeOption, FontSizeMeta> = {
small: { px: 15, label: "小" },
medium: { px: 16, label: "标准" },
large: { px: 17, label: "大" },
xlarge: { px: 18, label: "特大" },
xxlarge: { px: 20, label: "超大" },
};
const FONT_SIZE_STORAGE_KEY = "spark-store-font-size";
const DEFAULT_FONT_SIZE: FontSizeOption = "medium";
const isValidFontSize = (v: unknown): v is FontSizeOption =>
typeof v === "string" && v in FONT_SIZE_MAP;
/** 读取持久化的字号档位(无/非法时回退默认「标准」) */
export const getFontSize = (): FontSizeOption => {
try {
const raw = localStorage.getItem(FONT_SIZE_STORAGE_KEY);
if (isValidFontSize(raw)) return raw;
} catch {
// localStorage 不可用时忽略,使用默认
}
return DEFAULT_FONT_SIZE;
};
/** 将字号档位应用到根元素 html(写入 inline font-size */
export const applyFontSize = (option: FontSizeOption): void => {
const meta = FONT_SIZE_MAP[option] ?? FONT_SIZE_MAP[DEFAULT_FONT_SIZE];
document.documentElement.style.fontSize = `${meta.px}px`;
};
/** 选择并持久化字号档位,同时立即应用 */
export const setFontSize = (option: FontSizeOption): void => {
applyFontSize(option);
try {
localStorage.setItem(FONT_SIZE_STORAGE_KEY, option);
} catch {
// 持久化失败时仍已应用当前会话,忽略写入错误
}
};
/**
* 应用启动时初始化:从持久化恢复并使用,避免渲染瞬间闪烁。
* 应在 App.vue 的 onMounted 最前调用(与 initTagPriorityStrategy 同级)。
*/
export const initFontSize = (): void => {
applyFontSize(getFontSize());
};
/* ------------------------------------------------------------------ *
* 界面整体缩放(Electron webContents.setZoomFactor
*
* 与「字体大小」正交:字号只改 html font-sizerem 字号类),
* 而界面缩放会连图标、间距、布局一起等比放大/缩小(逻辑分辨率变化)。
* 实际缩放由主进程 setZoomFactor 执行;渲染端仅负责持久化档位偏好,
* 并在启动时把档位换算的系数通过 IPC 告知主进程。
* ------------------------------------------------------------------ */
*/
export type UiScaleOption = "90" | "100" | "110" | "125" | "150";
@@ -139,8 +63,8 @@ export const setUiScale = (option: UiScaleOption): void => {
/**
* 应用启动时初始化:从持久化恢复档位,并经 IPC 告知主进程应用缩放。
* 需在 App.vue onMounted 调用initFontSize 之后或同级均可),
* 主进程 createWindow 阶段已自有兜底(默认 1),此处确保渲染端偏好生效。
* 需在 App.vue onMounted 调用,主进程 createWindow 阶段已自有兜底(默认 1),
* 此处确保渲染端偏好生效。
*/
export const initUiScale = async (): Promise<void> => {
const factor = uiScaleToFactor(getUiScale());