From cca3d8eb41ac2be356d921d24bdf181b892df1ea Mon Sep 17 00:00:00 2001
From: fengxiangdebaozi <10845145+fengxiangdebaozi@user.noreply.gitee.com>
Date: Thu, 4 Jun 2026 20:49:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E4=BD=93=E5=A4=A7=E5=B0=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MessageBubble.tsx              |  8 +--
 .../components/markdown-components.tsx        | 67 ++++++++++++++-----
 .../pages/RoundtablePlanningPage.tsx          | 59 ++++++++--------
 .../styles/roundtable-planning.css            | 32 +++++++--
 frontend-web/src/styles/globals.css           |  5 +-
 5 files changed, 116 insertions(+), 55 deletions(-)

diff --git a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
index fd5fef4b..00470de6 100644
--- a/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
+++ b/frontend-web/src/roundtable-planning/components/MessageBubble.tsx
@@ -119,16 +119,16 @@ export const sharedMarkdownComponents = {
     <li className="leading-snug">{children}</li>
   ),
   h1: ({ children }: { children?: React.ReactNode }) => (
-    <h1 className="text-sm font-bold mt-2 mb-1">{children}</h1>
+    <h1 className="text-lg font-bold mt-2 mb-1">{children}</h1>
   ),
   h2: ({ children }: { children?: React.ReactNode }) => (
-    <h2 className="text-sm font-bold mt-2 mb-1">{children}</h2>
+    <h2 className="text-base font-bold mt-2 mb-1">{children}</h2>
   ),
   h3: ({ children }: { children?: React.ReactNode }) => (
-    <h3 className="text-sm font-bold mt-1.5 mb-0.5">{children}</h3>
+    <h3 className="roundtable-chat-message font-bold mt-1.5 mb-0.5">{children}</h3>
   ),
   h4: ({ children }: { children?: React.ReactNode }) => (
-    <h4 className="text-sm font-bold mt-1 mb-0.5">{children}</h4>
+    <h4 className="roundtable-chat-message font-bold mt-1 mb-0.5">{children}</h4>
   ),
   strong: ({ children }: { children?: React.ReactNode }) => (
     <strong className="font-bold text-slate-900">{children}</strong>
diff --git a/frontend-web/src/roundtable-planning/components/markdown-components.tsx b/frontend-web/src/roundtable-planning/components/markdown-components.tsx
index ca534ba6..81f6adab 100644
--- a/frontend-web/src/roundtable-planning/components/markdown-components.tsx
+++ b/frontend-web/src/roundtable-planning/components/markdown-components.tsx
@@ -1,44 +1,75 @@
 /**
- * 圆桌 Step 3 报告里 `react-markdown` 的紧凑渲染组件集（小字号、卡片内排版）。
+ * 圆桌 Step 3 报告里 `react-markdown` 的渲染组件集（卡片内排版）。
  * 抽到独立文件供 `HighFidelityReport` 与 `Step3ReportMode` 共用，避免两者互相 import
  * 形成循环依赖。
  */
 export const markdownComponents = {
-  p: ({ children }: any) => <p className="my-1.5 whitespace-pre-wrap leading-relaxed">{children}</p>,
-  ul: ({ children }: any) => <ul className="list-disc pl-5 my-1.5 space-y-1">{children}</ul>,
-  ol: ({ children }: any) => <ol className="list-decimal pl-5 my-1.5 space-y-1">{children}</ol>,
-  li: ({ children }: any) => <li className="leading-snug">{children}</li>,
-  h1: ({ children }: any) => <h1 className="text-sm font-bold mt-3 mb-1.5">{children}</h1>,
-  h2: ({ children }: any) => <h2 className="text-sm font-bold mt-3 mb-1.5">{children}</h2>,
-  h3: ({ children }: any) => <h3 className="text-xs font-bold mt-2 mb-1">{children}</h3>,
-  h4: ({ children }: any) => <h4 className="text-xs font-bold mt-1.5 mb-1">{children}</h4>,
-  strong: ({ children }: any) => <strong className="font-bold text-slate-900">{children}</strong>,
+  p: ({ children }: any) => (
+    <p className="roundtable-chat-message my-1.5 whitespace-pre-wrap">{children}</p>
+  ),
+  ul: ({ children }: any) => (
+    <ul className="roundtable-chat-message list-disc pl-5 my-1.5 space-y-1">{children}</ul>
+  ),
+  ol: ({ children }: any) => (
+    <ol className="roundtable-chat-message list-decimal pl-5 my-1.5 space-y-1">{children}</ol>
+  ),
+  li: ({ children }: any) => <li className="leading-relaxed">{children}</li>,
+  h1: ({ children }: any) => (
+    <h1 className="text-lg font-bold mt-3 mb-1.5">{children}</h1>
+  ),
+  h2: ({ children }: any) => (
+    <h2 className="text-base font-bold mt-3 mb-1.5">{children}</h2>
+  ),
+  h3: ({ children }: any) => (
+    <h3 className="roundtable-chat-message font-bold mt-2 mb-1">{children}</h3>
+  ),
+  h4: ({ children }: any) => (
+    <h4 className="roundtable-chat-message font-bold mt-1.5 mb-1">{children}</h4>
+  ),
+  strong: ({ children }: any) => (
+    <strong className="font-bold text-slate-900">{children}</strong>
+  ),
   em: ({ children }: any) => <em className="italic">{children}</em>,
   code: ({ children, className }: any) => {
     const isBlock = /language-/.test(className ?? "");
     if (isBlock) {
       return (
-        <pre className="bg-slate-100 text-slate-800 rounded-md p-2 my-1 overflow-x-auto text-[11px] font-mono">
+        <pre className="roundtable-chat-message bg-slate-100 text-slate-800 rounded-md p-2 my-1 overflow-x-auto font-mono">
           <code>{children}</code>
         </pre>
       );
     }
     return (
-      <code className="bg-slate-100 text-slate-800 rounded px-1 py-0.5 text-[11px] font-mono">{children}</code>
+      <code className="roundtable-chat-message bg-slate-100 text-slate-800 rounded px-1 py-0.5 font-mono">
+        {children}
+      </code>
     );
   },
   blockquote: ({ children }: any) => (
-    <blockquote className="border-l-2 border-slate-300 pl-2 my-1 text-slate-600 italic">{children}</blockquote>
+    <blockquote className="roundtable-chat-message border-l-2 border-slate-300 pl-2 my-1 text-slate-600 italic">
+      {children}
+    </blockquote>
   ),
   a: ({ children, href }: any) => (
-    <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary underline hover:opacity-80">
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary underline hover:opacity-80"
+    >
       {children}
     </a>
   ),
-  table: ({ children }: any) => <table className="my-2 border-collapse text-[11px]">{children}</table>,
-  th: ({ children }: any) => (
-    <th className="border border-slate-300 px-1.5 py-0.5 bg-slate-50 font-bold text-left">{children}</th>
+  table: ({ children }: any) => (
+    <table className="roundtable-chat-message my-2 border-collapse">{children}</table>
+  ),
+  th: ({ children }: any) => (
+    <th className="border border-slate-300 px-1.5 py-0.5 bg-slate-50 font-bold text-left">
+      {children}
+    </th>
+  ),
+  td: ({ children }: any) => (
+    <td className="border border-slate-200 px-1.5 py-0.5">{children}</td>
   ),
-  td: ({ children }: any) => <td className="border border-slate-200 px-1.5 py-0.5">{children}</td>,
   hr: () => <hr className="my-2 border-slate-200" />,
 };
diff --git a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
index ab993096..e2582397 100644
--- a/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
+++ b/frontend-web/src/roundtable-planning/pages/RoundtablePlanningPage.tsx
@@ -1528,17 +1528,17 @@ function HumanParticipationCard() {
         <Activity className="w-4 h-4 text-primary" strokeWidth={2.5} />
         <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">人工参与</h2>
       </div>
-      <div className="flex items-center justify-between p-2 rounded-xl bg-slate-50 border border-slate-100">
-        <div className="flex items-center gap-2.5">
-          <Man1Avatar size="h-7 w-7" />
-          <span className="text-xs font-bold text-slate-800">用户</span>
+      <div className="flex min-h-[56px] items-center justify-between gap-3 rounded-xl border border-slate-100 bg-slate-50 p-3">
+        <div className="flex min-w-0 items-center gap-3">
+          <Man1Avatar size="h-10 w-10" />
+          <span className="truncate text-sm font-bold leading-5 text-slate-800">用户</span>
         </div>
-        <div className="flex items-center gap-1.5">
+        <div className="flex shrink-0 items-center gap-1.5 rounded-full border border-white/70 bg-white/70 px-2 py-1">
           <span className="flex h-1.5 w-1.5 relative">
             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
             <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500"></span>
           </span>
-          <span className="text-[10px] font-bold text-emerald-600">在线</span>
+          <span className="whitespace-nowrap text-xs font-bold leading-none text-emerald-600">在线</span>
         </div>
       </div>
     </div>
@@ -1808,7 +1808,7 @@ function RoleRow({
   return (
     <div
       id={`role-item-${role.id}`}
-      className={`flex items-center justify-between p-2 rounded-xl transition ${
+      className={`flex min-h-[60px] items-center justify-between gap-3 rounded-xl p-3 transition ${
         isActive
           ? "bg-slate-50 border border-slate-100"
           : isBootingUp
@@ -1816,17 +1816,19 @@ function RoleRow({
             : "opacity-60"
       }`}
     >
-      <div className="flex items-center gap-2.5">
-        <RoleAvatarBadge role={role} agentNameToRole={agentNameToRole} />
-        <div className="flex flex-col">
-          <span className="text-xs font-bold text-slate-800 tracking-tight">{role.name}</span>
+      <div className="flex min-w-0 items-center gap-3">
+        <RoleAvatarBadge role={role} agentNameToRole={agentNameToRole} size="h-10 w-10" />
+        <div className="flex min-w-0 flex-col gap-0.5">
+          <span className="truncate text-sm font-bold leading-5 tracking-tight text-slate-800">
+            {role.name}
+          </span>
           {role.type === "agent" && (
-            <span className="text-[9px] text-primary font-medium leading-none">AI 智能体</span>
+            <span className="text-[11px] text-primary font-medium leading-4">AI 智能体</span>
           )}
         </div>
       </div>
 
-      <div className="flex items-center gap-1.5 shrink-0">
+      <div className="flex shrink-0 items-center gap-1.5 rounded-full border border-white/70 bg-white/70 px-2 py-1">
         {isOngoing ? (
           <span className="flex h-1.5 w-1.5 relative">
             <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/60 opacity-75"></span>
@@ -1845,7 +1847,7 @@ function RoleRow({
           <span className="h-1.5 w-1.5 rounded-full bg-slate-300" />
         )}
         <span
-          className={`text-[10px] font-semibold ${
+          className={`whitespace-nowrap text-xs font-semibold leading-none ${
             isOngoing
               ? "text-[var(--brand-900)]"
               : role.status === "在线"
@@ -1908,23 +1910,26 @@ function RightSidebar({
           <h2 className="text-xs font-bold text-slate-900 uppercase tracking-widest">澄清记录</h2>
         </div>
 
-        <div className="flex-1 overflow-y-auto pr-1 space-y-4 font-normal custom-scrollbar">
-          <div className="relative pl-4 border-l border-red-50 space-y-4 ml-2 pt-1.5 pb-2">
+        <div className="flex-1 overflow-y-auto pr-1 font-normal custom-scrollbar">
+          <div className="relative ml-2 space-y-4 border-l border-red-50 pb-2 pl-4 pt-1.5">
             {timelineEntries.map((entry) => (
-              <div key={entry.id} className="relative">
-                <div className="absolute -left-[20.5px] top-0.5 h-3 w-3 rounded-full bg-primary border-2 border-white ring-2 ring-[var(--brand-200)]" />
-                <div className="space-y-0.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] text-slate-400 font-mono tracking-tight shrink-0">
-                      {entry.time}
-                    </span>
-                    <h4 className="text-[11.5px] font-bold text-slate-800 tracking-tight leading-none">
+              <div
+                key={entry.id}
+                className="relative rounded-lg px-1.5 py-1 transition-colors hover:bg-slate-50/80"
+              >
+                <div className="absolute -left-[20.5px] top-2 h-3 w-3 rounded-full bg-primary border-2 border-white ring-2 ring-[var(--brand-200)]" />
+                <div className="grid grid-cols-[68px_minmax(0,1fr)] gap-x-2">
+                  <span className="font-mono text-xs leading-5 tracking-tight text-slate-400">
+                    {entry.time}
+                  </span>
+                  <div className="min-w-0">
+                    <h4 className="break-words text-sm font-bold leading-5 tracking-tight text-slate-800">
                       {entry.title}
                     </h4>
+                    <p className="mt-1 break-words text-xs leading-5 text-slate-500">
+                      {entry.desc}
+                    </p>
                   </div>
-                  <p className="text-[11px] text-slate-500 leading-normal pl-0.5 mt-0.5 font-sans">
-                    {entry.desc}
-                  </p>
                 </div>
               </div>
             ))}
diff --git a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
index b16247a0..a248d43a 100644
--- a/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
+++ b/frontend-web/src/roundtable-planning/styles/roundtable-planning.css
@@ -10,12 +10,13 @@
   --rt-primary-active: var(--brand-950, #a8071a);
   --rt-primary-soft: var(--brand-200, #feeded);
   --rt-page-bg: #fef6f6;
-  /* 消息列表正文字号 —— 与右侧沙箱 CodeEditor / Markdown 预览的 text-sm 对齐 */
-  --roundtable-chat-font-size: var(--text-sm, 0.875rem);
-  --roundtable-chat-meta-font-size: var(--text-xs, 0.75rem);
+  /* 圆桌全页最小可读字号（含 Step 3 方案展示 / 结果绘制） */
+  --roundtable-chat-font-size: 16px;
+  --roundtable-chat-meta-font-size: 16px;
+  font-size: 16px;
 }
 
-/* 会商对话区：气泡正文、步骤卡、Markdown 块统一继承 */
+/* 会商对话区：气泡正文、步骤卡、Markdown 块 */
 .roundtable-chat-message {
   font-size: var(--roundtable-chat-font-size);
   line-height: 1.625;
@@ -23,6 +24,29 @@
 
 .roundtable-chat-meta {
   font-size: var(--roundtable-chat-meta-font-size);
+  line-height: 1.5;
+}
+
+/*
+ * 抬升页内显式写死的小字号类（text-xs / text-sm / text-[10–14px] / calc），
+ * 避免 Step 3、侧栏、按钮条等遗漏逐文件改 class。text-base 及以上标题保持不变。
+ */
+.roundtable-planning :where(.text-xs, .text-sm) {
+  font-size: 16px;
+}
+
+.roundtable-planning :where(
+  [class*="text-[9px"],
+  [class*="text-[10px"],
+  [class*="text-[10.5px"],
+  [class*="text-[11px"],
+  [class*="text-[11.5px"],
+  [class*="text-[12px"],
+  [class*="text-[13px"],
+  [class*="text-[14px"],
+  [class*="text-[calc"]
+):not(.w-5) {
+  font-size: 16px;
 }
 
 .roundtable-planning ::-webkit-scrollbar-thumb {
diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css
index cb36f5ea..947e290a 100644
--- a/frontend-web/src/styles/globals.css
+++ b/frontend-web/src/styles/globals.css
@@ -72,8 +72,9 @@
 
 @theme {
   --font-sans:
-    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+    "Noto Sans S Chinese", "Noto Sans SC", "Source Han Sans SC", "思源黑体",
+    "Microsoft YaHei", "PingFang SC", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   --animate-fade-in: fade-in 1.1s;
   @keyframes fade-in {