代码代码修改

2026-06-01 19:54:45 +08:00
1 parent a5d877207e
commit 0c5938a5a3
@@ -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 }) {
          <ThemeProvider>
            <ChatProvider>
              <AuthSyncWatcher />
+              <FontScaleApplier />
              {children}
            </ChatProvider>
          </ThemeProvider>
@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { useLocalSettings } from "@/core/settings";
+
+/**
+ * 基准字号 = 16px，对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号（16px Regular）。
+ * 用户在「外观 → 字号」里选择的倍数作用于 <html> 根元素的 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 },
+  ];
+
+/**
+ * 将用户选择的字号倍数应用到 <html> 根元素。挂在应用根部，保证刷新后即时生效、全局统一。
+ * 不渲染任何 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;
+}
@@ -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() {

      <Separator />

+      <SettingsSection
+        title="字号"
+        description="调整界面整体字号，方便放大或缩小阅读。默认 16px（标准）。"
+      >
+        <div className="space-y-3">
+          <Select
+            value={String(settings.display.fontScale ?? 1)}
+            onValueChange={(value) => {
+              const scale = Number(value);
+              if (Number.isFinite(scale) && scale > 0) {
+                setSettings("display", { fontScale: scale });
+              }
+            }}
+          >
+            <SelectTrigger className="w-[220px]">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {FONT_SCALE_OPTIONS.map((item) => (
+                <SelectItem key={item.value} value={String(item.value)}>
+                  {item.label}（{item.px}px）
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <div className="text-muted-foreground rounded-lg border p-4 text-sm leading-relaxed">
+            预览：多智能体圆桌研讨 · The quick brown fox · 0123456789
+          </div>
+        </div>
+      </SettingsSection>
+
+      <Separator />
+
      <SettingsSection
        title={t.settings.appearance.languageTitle}
        description={t.settings.appearance.languageDescription}
@@ -217,16 +251,16 @@ export function AppearanceSettingsPage() {
                管理员配置。每行一个词或短句，参考文献卡片和详情弹框会自动移除这些广告词、导航词或免责声明。
              </p>
            </div>
-            <Textarea
-              value={cleanupWords.join("\n")}
-              onChange={(event) => {
-                const words = event.currentTarget.value
-                    .split(/\r?\n/)
-                    .map((item) => item.trim())
-                    .filter(Boolean);
-                setSettings("display", { citationCleanupWords: words });
-                updateCitationDisplay.mutate({ cleanup_words: words });
-              }}
+            <Textarea
+              value={cleanupWords.join("\n")}
+              onChange={(event) => {
+                const words = event.currentTarget.value
+                    .split(/\r?\n/)
+                    .map((item) => item.trim())
+                    .filter(Boolean);
+                setSettings("display", { citationCleanupWords: words });
+                updateCitationDisplay.mutate({ cleanup_words: words });
+              }}
              placeholder={"广告\n点击下载APP\n打开客户端\n免责声明\n责任编辑"}
              className="min-h-32 text-sm"
            />
@@ -4,11 +4,12 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
  notification: {
    enabled: true,
  },
-  display: {
-    streamSpeedMeterEnabled: true,
-    ragModeEnabled: false,
-    citationCleanupWords: [],
-  },
+  display: {
+    streamSpeedMeterEnabled: true,
+    ragModeEnabled: false,
+    citationCleanupWords: [],
+    fontScale: 1,
+  },
  context: {
    model_name: undefined,
    mode: undefined,
@@ -17,9 +18,9 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
  },
 };

-export const LOCAL_SETTINGS_KEY = "deerflow.local-settings";
-export const THREAD_MODEL_KEY_PREFIX = "deerflow.thread-model.";
-export const THREAD_RAG_MODE_KEY_PREFIX = "deerflow.thread-rag-mode.";
+export const LOCAL_SETTINGS_KEY = "deerflow.local-settings";
+export const THREAD_MODEL_KEY_PREFIX = "deerflow.thread-model.";
+export const THREAD_RAG_MODE_KEY_PREFIX = "deerflow.thread-rag-mode.";

 function isBrowser(): boolean {
  return typeof window !== "undefined";
@@ -40,13 +41,20 @@ export interface LocalSettings {
     * Global switch for skill result display adapters. When disabled, chat
     * messages render tool results with the legacy generic search UI only.
     */
-    ragModeEnabled: boolean;
-    /**
-     * Admin-maintained words or short phrases removed from reference snippets
-     * and dialogs, one entry per line in the settings UI.
-     */
-    citationCleanupWords: string[];
-  };
+    ragModeEnabled: boolean;
+    /**
+     * Admin-maintained words or short phrases removed from reference snippets
+     * and dialogs, one entry per line in the settings UI.
+     */
+    citationCleanupWords: string[];
+    /**
+     * Global UI font scale multiplier applied to the root <html> font-size.
+     * Base is 16px (deep-blue UI spec §2.1.2 body text), so `1` === 16px.
+     * The user picks a size from the appearance settings page; because the
+     * app sizes text/spacing in rem, the whole UI scales proportionally.
+     */
+    fontScale: number;
+  };
  context: Omit<
    AgentThreadContext,
    | "thread_id"
@@ -91,10 +99,10 @@ export function getThreadModelName(threadId: string): string | undefined {
  return localStorage.getItem(getThreadModelStorageKey(threadId)) ?? undefined;
 }

-export function saveThreadModelName(
-  threadId: string,
-  modelName: string | undefined,
-) {
+export function saveThreadModelName(
+  threadId: string,
+  modelName: string | undefined,
+) {
  if (!isBrowser()) {
    return;
  }
@@ -103,26 +111,26 @@ export function saveThreadModelName(
    localStorage.removeItem(key);
    return;
  }
-  localStorage.setItem(key, modelName);
-}
-
-function getThreadRagModeStorageKey(threadId: string): string {
-  return `${THREAD_RAG_MODE_KEY_PREFIX}${threadId}`;
-}
-
-export function isThreadRagModeLocked(threadId: string): boolean {
-  if (!isBrowser() || !threadId) {
-    return false;
-  }
-  return localStorage.getItem(getThreadRagModeStorageKey(threadId)) === "true";
-}
-
-export function lockThreadRagMode(threadId: string) {
-  if (!isBrowser() || !threadId) {
-    return;
-  }
-  localStorage.setItem(getThreadRagModeStorageKey(threadId), "true");
-}
+  localStorage.setItem(key, modelName);
+}
+
+function getThreadRagModeStorageKey(threadId: string): string {
+  return `${THREAD_RAG_MODE_KEY_PREFIX}${threadId}`;
+}
+
+export function isThreadRagModeLocked(threadId: string): boolean {
+  if (!isBrowser() || !threadId) {
+    return false;
+  }
+  return localStorage.getItem(getThreadRagModeStorageKey(threadId)) === "true";
+}
+
+export function lockThreadRagMode(threadId: string) {
+  if (!isBrowser() || !threadId) {
+    return;
+  }
+  localStorage.setItem(getThreadRagModeStorageKey(threadId), "true");
+}

 export function applyThreadModelOverride(
  settings: LocalSettings,