字号调整

frontend-web/src/components/font-scale.tsx

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