feat(settings): 新增字体大小设置(仅字号档位,不含整体缩放/字体族)

- 新增 src/global/displaySettings.ts:small/medium/large/xlarge 四档 → html 15/16/17/18px,
  localStorage(spark-store-font-size) 持久化,applyFontSize 写 html font-size 全局联动 rem 字号类
- App.vue onMounted 最前 initFontSize()(与 initTagPriorityStrategy 同级,防字号闪烁)
- SettingsModal.vue 新增「字体大小」卡片(4 档分段按钮 + 预览),selectFontSize 即时应用+持久化
- 用户确认范围:仅字号档位,整体缩放与字体族切换本期不做
- vue-tsc/lint/打包均通过
This commit is contained in:
xiyidaiwa
2026-08-17 23:00:14 +08:00
parent e4540252b3
commit 4dc1a1d7fe
4 changed files with 152 additions and 1 deletions
+73
View File
@@ -163,6 +163,56 @@
</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"
>
<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-[11px] text-slate-400 dark:text-slate-500"
>
预览星火应用商店 Spark Store 123
</p>
</div>
</div>
</div>
</div>
<!-- 底部提示 -->
@@ -185,6 +235,12 @@ import {
setTagPriorityStrategy,
type TagPriorityStrategy,
} from "../global/tagPriority";
import {
getFontSize,
setFontSize,
FONT_SIZE_OPTIONS,
type FontSizeOption,
} from "../global/displaySettings";
const props = defineProps<{
show: boolean;
@@ -206,6 +262,9 @@ const strategyOptions: Array<{ value: TagPriorityStrategy; label: string }> = [
{ value: "apm", label: "APM 优先" },
];
// 字体大小档位选项(小 / 标准 / 大 / 特大)
const fontSizeOptions = FONT_SIZE_OPTIONS;
const tagPriorityStrategy = ref<TagPriorityStrategy>("auto");
// 加载标签优先显示策略(从持久化读取)
@@ -219,6 +278,19 @@ 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);
};
const settings = ref<Settings>({
enableUpdateCheck: true,
enableCreateDesktop: true,
@@ -279,6 +351,7 @@ watch(
if (newVal) {
loadSettings();
loadTagPriority();
loadFontSize();
}
},
);