diff --git a/frontend-web/src/App.tsx b/frontend-web/src/App.tsx index ea03c986..5649c323 100644 --- a/frontend-web/src/App.tsx +++ b/frontend-web/src/App.tsx @@ -2,6 +2,7 @@ import { useMemo } from "react"; import { Navigate, Route, Routes } from "react-router-dom"; import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { FontScaleApplier } from "@/components/font-scale"; import { QueryClientProvider } from "@/components/query-client-provider"; import { AuthSyncWatcher } from "@/core/auth/sync"; import { I18nProvider } from "@/core/i18n/context"; @@ -39,6 +40,7 @@ function AppProviders({ children }: { children: React.ReactNode }) { + {children} diff --git a/frontend-web/src/components/font-scale.tsx b/frontend-web/src/components/font-scale.tsx new file mode 100644 index 00000000..7c051700 --- /dev/null +++ b/frontend-web/src/components/font-scale.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { useEffect } from "react"; + +import { useLocalSettings } from "@/core/settings"; + +/** + * 基准字号 = 16px,对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号(16px Regular)。 + * 用户在「外观 → 字号」里选择的倍数作用于 根元素的 font-size;由于 Tailwind + * 的字号 / 间距基于 rem,整套界面会随之按比例放大 / 缩小。`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 }, + ]; + +/** + * 将用户选择的字号倍数应用到 根元素。挂在应用根部,保证刷新后即时生效、全局统一。 + * 不渲染任何 DOM。 + */ +export function FontScaleApplier() { + const [settings] = useLocalSettings(); + const { fontScale } = settings.display; + + useEffect(() => { + const scale = + typeof fontScale === "number" && Number.isFinite(fontScale) && fontScale > 0 + ? fontScale + : 1; + document.documentElement.style.fontSize = `${BASE_FONT_PX * scale}px`; + }, [fontScale]); + + return null; +} diff --git a/frontend-web/src/components/workspace/settings/appearance-settings-page.tsx b/frontend-web/src/components/workspace/settings/appearance-settings-page.tsx index 5970d17e..5720df7c 100644 --- a/frontend-web/src/components/workspace/settings/appearance-settings-page.tsx +++ b/frontend-web/src/components/workspace/settings/appearance-settings-page.tsx @@ -6,6 +6,7 @@ import { toast } from "sonner"; import { useTheme } from "@/contexts/ThemeContext"; +import { FONT_SCALE_OPTIONS } from "@/components/font-scale"; import { Button } from "@/components/ui/button"; import { Select, @@ -21,12 +22,12 @@ import { getStoredAuth } from "@/core/auth"; import { enUS, isLocale, zhCN, type Locale } from "@/core/i18n"; import { useI18n } from "@/core/i18n/hooks"; import { useLocalSettings } from "@/core/settings"; -import { - useAppearanceSettings, - useCitationDisplaySettings, - useUpdateAppearanceSettings, - useUpdateCitationDisplaySettings, -} from "@/core/system-settings/hooks"; +import { + useAppearanceSettings, + useCitationDisplaySettings, + useUpdateAppearanceSettings, + useUpdateCitationDisplaySettings, +} from "@/core/system-settings/hooks"; import { cn } from "@/lib/utils"; import { SettingsSection } from "./settings-section"; @@ -42,13 +43,13 @@ export function AppearanceSettingsPage() { const currentTheme = theme; const [settings, setSettings] = useLocalSettings(); const isAdmin = getStoredAuth()?.system_role === "admin"; - const { data: appearance } = useAppearanceSettings(); - const updateAppearance = useUpdateAppearanceSettings(); - const { data: citationDisplay } = useCitationDisplaySettings(); - const updateCitationDisplay = useUpdateCitationDisplaySettings(); - const globalDefault = appearance?.default_theme ?? "light"; - const cleanupWords = - citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? []; + const { data: appearance } = useAppearanceSettings(); + const updateAppearance = useUpdateAppearanceSettings(); + const { data: citationDisplay } = useCitationDisplaySettings(); + const updateCitationDisplay = useUpdateCitationDisplaySettings(); + const globalDefault = appearance?.default_theme ?? "light"; + const cleanupWords = + citationDisplay?.cleanup_words ?? settings.display.citationCleanupWords ?? []; const handleSetGlobalDefault = async (value: "light" | "dark") => { if (value === globalDefault) return; @@ -147,6 +148,39 @@ export function AppearanceSettingsPage() { + +
+ +
+ 预览:多智能体圆桌研讨 · The quick brown fox · 0123456789 +
+
+
+ + + -