From 4eab17155e4a285ed46225d19c5ca513623aedd9 Mon Sep 17 00:00:00 2001
From: gaoziman <2942894660@qq.com>
Date: Sun, 21 Dec 2025 02:47:13 +0800
Subject: [PATCH] =?UTF-8?q?style(=E5=AD=97=E4=BD=93):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E7=B3=BB=E7=BB=9F=E4=BD=BF=E7=94=A8=E7=9B=B8?=
 =?UTF-8?q?=E5=AF=B9=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 ChatInput 和 MessageBubble 中的固定字体大小类
- MarkdownRenderer 标题和内容使用 em 相对单位
- 表格字体大小改为相对单位保持比例
- 聊天输入框添加 z-20 层级避免被代码块遮挡
---
 src/app/chat/[id]/page.tsx                   |  2 +-
 src/components/features/ChatInput.tsx        |  2 +-
 src/components/features/MessageBubble.tsx    |  8 ++++----
 src/components/markdown/MarkdownRenderer.tsx | 20 ++++++++++----------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index a8c482b..8c98a30 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -490,7 +490,7 @@ export default function ChatPage({ params }: PageProps) {
 
         {/* 固定底部输入框 */}
         <div
-          className="sticky bottom-0 pt-4"
+          className="sticky bottom-0 pt-4 z-20"
           style={{
             background: `linear-gradient(to top, var(--color-bg-secondary) 0%, var(--color-bg-secondary) 80%, transparent 100%)`
           }}
diff --git a/src/components/features/ChatInput.tsx b/src/components/features/ChatInput.tsx
index 588c5c6..db22ed2 100644
--- a/src/components/features/ChatInput.tsx
+++ b/src/components/features/ChatInput.tsx
@@ -127,7 +127,7 @@ export function ChatInput({
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             placeholder={files.length > 0 ? '添加描述（可选）...' : placeholder}
-            className="w-full border-none outline-none text-base text-[var(--color-text-primary)] bg-transparent py-2 placeholder:text-[var(--color-text-placeholder)]"
+            className="w-full border-none outline-none text-[var(--color-text-primary)] bg-transparent py-2 placeholder:text-[var(--color-text-placeholder)]"
           />
         </div>
 
diff --git a/src/components/features/MessageBubble.tsx b/src/components/features/MessageBubble.tsx
index cc9e810..90dc2be 100644
--- a/src/components/features/MessageBubble.tsx
+++ b/src/components/features/MessageBubble.tsx
@@ -152,7 +152,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
               })}
             </div>
           )}
-          <div className="bg-[var(--color-message-user)] text-[var(--color-text-primary)] px-4 py-3 rounded-md text-base leading-relaxed">
+          <div className="bg-[var(--color-message-user)] text-[var(--color-text-primary)] px-4 py-3 rounded-md leading-relaxed">
             {message.content || ((uploadedImages && uploadedImages.length > 0) || (uploadedDocuments && uploadedDocuments.length > 0) ? '(附件)' : '')}
           </div>
           {/* 悬停显示复制按钮 */}
@@ -216,7 +216,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
             </button>
             {thinkingExpanded && (
               <div className="mt-2 p-4 bg-purple-50 border border-purple-200 rounded-lg">
-                <pre className="text-sm text-purple-800 whitespace-pre-wrap font-mono">
+                <pre className="text-purple-800 whitespace-pre-wrap font-mono">
                   {thinkingContent}
                 </pre>
               </div>
@@ -228,13 +228,13 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
         {error && (
           <div className="mb-3 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
             <AlertCircle size={20} className="text-red-500 flex-shrink-0 mt-0.5" />
-            <div className="text-sm text-red-700">{error}</div>
+            <div className="text-red-700">{error}</div>
           </div>
         )}
 
         {/* 主要内容 */}
         <div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-md px-5 py-4 shadow-sm">
-          <div className="text-sm text-[var(--color-text-primary)] leading-[1.75]">
+          <div className="text-[var(--color-text-primary)] leading-[1.75]">
             {message.content ? (
               <MarkdownRenderer content={message.content} />
             ) : isStreaming ? (
diff --git a/src/components/markdown/MarkdownRenderer.tsx b/src/components/markdown/MarkdownRenderer.tsx
index 191a500..a185c70 100644
--- a/src/components/markdown/MarkdownRenderer.tsx
+++ b/src/components/markdown/MarkdownRenderer.tsx
@@ -48,31 +48,31 @@ const markdownComponents = {
     );
   },
 
-  // 标题
+  // 标题 - 使用相对单位保持与全局字体的比例
   h1({ children }: { children?: React.ReactNode }) {
     return (
-      <h1 className="text-lg font-bold mt-5 mb-3 text-[var(--color-text-primary)]">
+      <h1 className="text-[1.25em] font-bold mt-5 mb-3 text-[var(--color-text-primary)]">
         {children}
       </h1>
     );
   },
   h2({ children }: { children?: React.ReactNode }) {
     return (
-      <h2 className="text-base font-bold mt-4 mb-2 text-[var(--color-text-primary)]">
+      <h2 className="text-[1.125em] font-bold mt-4 mb-2 text-[var(--color-text-primary)]">
         {children}
       </h2>
     );
   },
   h3({ children }: { children?: React.ReactNode }) {
     return (
-      <h3 className="text-sm font-semibold mt-3 mb-2 text-[var(--color-text-primary)]">
+      <h3 className="text-[1em] font-semibold mt-3 mb-2 text-[var(--color-text-primary)]">
         {children}
       </h3>
     );
   },
   h4({ children }: { children?: React.ReactNode }) {
     return (
-      <h4 className="text-sm font-semibold mt-2 mb-1 text-[var(--color-text-primary)]">
+      <h4 className="text-[1em] font-semibold mt-2 mb-1 text-[var(--color-text-primary)]">
         {children}
       </h4>
     );
@@ -95,7 +95,7 @@ const markdownComponents = {
   },
   li({ children }: { children?: React.ReactNode }) {
     return (
-      <li className="leading-relaxed text-sm">
+      <li className="leading-relaxed">
         {children}
       </li>
     );
@@ -136,7 +136,7 @@ const markdownComponents = {
   // 引用
   blockquote({ children }: { children?: React.ReactNode }) {
     return (
-      <blockquote className="border-l-3 border-[var(--color-primary)] pl-3 my-3 italic text-sm text-[var(--color-text-secondary)]">
+      <blockquote className="border-l-3 border-[var(--color-primary)] pl-3 my-3 italic text-[var(--color-text-secondary)]">
         {children}
       </blockquote>
     );
@@ -153,7 +153,7 @@ const markdownComponents = {
   table({ children }: { children?: React.ReactNode }) {
     return (
       <div className="overflow-x-auto my-3">
-        <table className="min-w-full border border-[var(--color-border)] rounded-lg overflow-hidden text-sm">
+        <table className="min-w-full border border-[var(--color-border)] rounded-lg overflow-hidden text-[0.9em]">
           {children}
         </table>
       </div>
@@ -182,14 +182,14 @@ const markdownComponents = {
   },
   th({ children }: { children?: React.ReactNode }) {
     return (
-      <th className="px-3 py-1.5 text-left text-xs font-semibold text-[var(--color-text-primary)]">
+      <th className="px-3 py-1.5 text-left text-[0.85em] font-semibold text-[var(--color-text-primary)]">
         {children}
       </th>
     );
   },
   td({ children }: { children?: React.ReactNode }) {
     return (
-      <td className="px-3 py-1.5 text-xs text-[var(--color-text-secondary)]">
+      <td className="px-3 py-1.5 text-[0.85em] text-[var(--color-text-secondary)]">
         {children}
       </td>
     );