46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
import { useLocalSettings } from "@/core/settings";
|
|
|
|
/**
|
|
* 基准字号 = 16px，对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号（16px Regular）。
|
|
* 用户在「外观 → 字号」里选择的倍数通过 CSS 变量 `--ui-font-scale` 生效：globals.css
|
|
* 只把 Tailwind 的 `--text-*` 字号 token 乘以该倍数，**不动间距 token**，所以放大 / 缩小
|
|
* 的只有文字本身，padding / margin / 宽高等布局尺寸保持不变，不会把页面挤错位。
|
|
* `fontScale === 1` 即默认 16px。
|
|
*/
|
|
export const BASE_FONT_PX = 16;
|
|
|
|
export const FONT_SCALE_OPTIONS: { value: number; label: string; px: number }[] =
|
|
[
|
|
{ value: 0.875, label: "小", px: 14 },
|
|
{ value: 1, label: "标准", px: 16 },
|
|
{ value: 1.125, label: "大", px: 18 },
|
|
{ value: 1.25, label: "特大", px: 20 },
|
|
];
|
|
|
|
/**
|
|
* 把用户选择的字号倍数写到 <html> 的 `--ui-font-scale` CSS 变量。挂在应用根部，
|
|
* 保证刷新后即时生效、全局统一。只设变量、不直接改 font-size，因此布局不受影响。
|
|
* 不渲染任何 DOM。
|
|
*/
|
|
export function FontScaleApplier() {
|
|
const [settings] = useLocalSettings();
|
|
const { fontScale } = settings.display;
|
|
|
|
useEffect(() => {
|
|
const scale =
|
|
typeof fontScale === "number" && Number.isFinite(fontScale) && fontScale > 0
|
|
? fontScale
|
|
: 1;
|
|
const root = document.documentElement;
|
|
root.style.setProperty("--ui-font-scale", String(scale));
|
|
// 清掉旧实现可能残留的根级 font-size 内联样式（旧版用它做整页缩放）。
|
|
root.style.removeProperty("font-size");
|
|
}, [fontScale]);
|
|
|
|
return null;
|
|
}
|