From fa41d620fd73ee5938b33b3f4d72e8c0738bf459 Mon Sep 17 00:00:00 2001 From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com> Date: Mon, 1 Jun 2026 22:17:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E5=8F=B7=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend-web/src/components/font-scale.tsx | 14 ++++++--- .../components/MessageBubble.tsx | 14 ++++----- .../components/MessageStepsCard.tsx | 14 ++++----- .../components/Step2Panel.tsx | 18 +++++------ .../styles/roundtable-planning.css | 5 ++- frontend-web/src/styles/globals.css | 31 +++++++++++++++++++ 6 files changed, 68 insertions(+), 28 deletions(-) diff --git a/frontend-web/src/components/font-scale.tsx b/frontend-web/src/components/font-scale.tsx index 7c051700..14c97c8e 100644 --- a/frontend-web/src/components/font-scale.tsx +++ b/frontend-web/src/components/font-scale.tsx @@ -6,8 +6,10 @@ import { useLocalSettings } from "@/core/settings"; /** * 基准字号 = 16px，对应《深蓝色 UI 规范》§2.1.2 后台系统正文字号（16px Regular）。 - * 用户在「外观 → 字号」里选择的倍数作用于 根元素的 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 }[] ]; /** - * 将用户选择的字号倍数应用到 根元素。挂在应用根部，保证刷新后即时生效、全局统一。 + * 把用户选择的字号倍数写到 的 `--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; diff --git a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx index 6f83fc62..f7f205ae 100644 --- a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx +++ b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx @@ -56,12 +56,12 @@ export function MessageBubble({ {senderName} {badge && ( - + {badge} )} - {time} + {time} {children} @@ -139,13 +139,13 @@ export const sharedMarkdownComponents = { const isBlock = /language-/.test(className ?? ""); if (isBlock) { return ( - 
+        
           {children}
         

       );
     }
     return (
-      
+      
         {children}
       
     );
@@ -161,7 +161,7 @@ export const sharedMarkdownComponents = {
     
   ),
   table: ({ children }: { children?: React.ReactNode }) => (
-    {children}

+    {children}

   ),
   th: ({ children }: { children?: React.ReactNode }) => (
     
@@ -254,7 +254,7 @@ export function ReasoningBlock({
       
@@ -580,17 +580,17 @@ function PresentFileCard({
       

         
         
           {filename}
         
       

       

-        
+        
           {typeLabel}
         
-        点击预览
+        点击预览
       

     
   );
diff --git a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
index 444d04db..2ebc6170 100644
--- a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
+++ b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
@@ -1,4 +1,7 @@
-@import "tailwindcss";
+/* 注意：不要在这里 `@import "tailwindcss"`。Tailwind 已由全局 globals.css 引入，
+ * 本文件被打进同一份样式表，再次 import 会把整套 theme/utilities 重复发一遍
+ * （CSS 体积翻倍，且重复发出的 --text-* 等主题变量会和全局覆盖打架）。
+ * 本文件只写圆桌页自己的作用域规则即可。 */
 
 /* 圆桌规划 — 浅色红色主题（对齐 docs/浅红色ui修改.md） */
 .roundtable-planning {
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index 7e8c0951..4ab3e054 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -820,3 +820,34 @@
   border-color: var(--border);
   outline-color: var(--ring);
 }
+
+/* ─── 全局字号缩放（只改字号，不动布局）──────────────────────────────────
+ * 用户在「设置 → 外观 → 字号」里选的倍数由 FontScaleApplier 写到
+ *  的 `--ui-font-scale`（默认 1）。这里只把 Tailwind 的 `--text-*`
+ * 字号 token 乘以该倍数 —— 间距 token（--spacing）原样不动，所以 padding /
+ * margin / gap / 宽高这些布局尺寸不随字号变化，避免放大字体把页面挤错位。
+ * 行高用 Tailwind 默认的无单位比值，会跟随字号等比变化（文字不会重叠）。
+ * 不在 @layer 内，优先级高于 Tailwind 的主题层变量，确保覆盖生效。 */
+:root {
+  --ui-font-scale: 1;
+
+  --text-xs: calc(0.75rem * var(--ui-font-scale, 1));
+  --text-sm: calc(0.875rem * var(--ui-font-scale, 1));
+  --text-base: calc(1rem * var(--ui-font-scale, 1));
+  --text-lg: calc(1.125rem * var(--ui-font-scale, 1));
+  --text-xl: calc(1.25rem * var(--ui-font-scale, 1));
+  --text-2xl: calc(1.5rem * var(--ui-font-scale, 1));
+  --text-3xl: calc(1.875rem * var(--ui-font-scale, 1));
+  --text-4xl: calc(2.25rem * var(--ui-font-scale, 1));
+  --text-5xl: calc(3rem * var(--ui-font-scale, 1));
+  --text-6xl: calc(3.75rem * var(--ui-font-scale, 1));
+  --text-7xl: calc(4.5rem * var(--ui-font-scale, 1));
+  --text-8xl: calc(6rem * var(--ui-font-scale, 1));
+  --text-9xl: calc(8rem * var(--ui-font-scale, 1));
+}
+
+/* 没有显式 text-* 类的元素（继承自 body 的默认正文）也跟随缩放。
+ * 只设 font-size，不影响任何盒模型尺寸。 */
+body {
+  font-size: calc(1rem * var(--ui-font-scale, 1));
+}