style(字体): 优化字体系统使用相对单位
- 移除 ChatInput 和 MessageBubble 中的固定字体大小类 - MarkdownRenderer 标题和内容使用 em 相对单位 - 表格字体大小改为相对单位保持比例 - 聊天输入框添加 z-20 层级避免被代码块遮挡
This commit is contained in:
parent
470e34e7a8
commit
4eab17155e
@ -490,7 +490,7 @@ export default function ChatPage({ params }: PageProps) {
|
|||||||
|
|
||||||
{/* 固定底部输入框 */}
|
{/* 固定底部输入框 */}
|
||||||
<div
|
<div
|
||||||
className="sticky bottom-0 pt-4"
|
className="sticky bottom-0 pt-4 z-20"
|
||||||
style={{
|
style={{
|
||||||
background: `linear-gradient(to top, var(--color-bg-secondary) 0%, var(--color-bg-secondary) 80%, transparent 100%)`
|
background: `linear-gradient(to top, var(--color-bg-secondary) 0%, var(--color-bg-secondary) 80%, transparent 100%)`
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -127,7 +127,7 @@ export function ChatInput({
|
|||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
onPaste={handlePaste}
|
onPaste={handlePaste}
|
||||||
placeholder={files.length > 0 ? '添加描述(可选)...' : placeholder}
|
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>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -152,7 +152,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
|
|||||||
})}
|
})}
|
||||||
</div>
|
</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) ? '(附件)' : '')}
|
{message.content || ((uploadedImages && uploadedImages.length > 0) || (uploadedDocuments && uploadedDocuments.length > 0) ? '(附件)' : '')}
|
||||||
</div>
|
</div>
|
||||||
{/* 悬停显示复制按钮 */}
|
{/* 悬停显示复制按钮 */}
|
||||||
@ -216,7 +216,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
|
|||||||
</button>
|
</button>
|
||||||
{thinkingExpanded && (
|
{thinkingExpanded && (
|
||||||
<div className="mt-2 p-4 bg-purple-50 border border-purple-200 rounded-lg">
|
<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}
|
{thinkingContent}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
@ -228,13 +228,13 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
|
|||||||
{error && (
|
{error && (
|
||||||
<div className="mb-3 p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3">
|
<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" />
|
<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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 主要内容 */}
|
{/* 主要内容 */}
|
||||||
<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="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 ? (
|
{message.content ? (
|
||||||
<MarkdownRenderer content={message.content} />
|
<MarkdownRenderer content={message.content} />
|
||||||
) : isStreaming ? (
|
) : isStreaming ? (
|
||||||
|
|||||||
@ -48,31 +48,31 @@ const markdownComponents = {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 标题
|
// 标题 - 使用相对单位保持与全局字体的比例
|
||||||
h1({ children }: { children?: React.ReactNode }) {
|
h1({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</h1>
|
</h1>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
h2({ children }: { children?: React.ReactNode }) {
|
h2({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</h2>
|
</h2>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
h3({ children }: { children?: React.ReactNode }) {
|
h3({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</h3>
|
</h3>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
h4({ children }: { children?: React.ReactNode }) {
|
h4({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</h4>
|
</h4>
|
||||||
);
|
);
|
||||||
@ -95,7 +95,7 @@ const markdownComponents = {
|
|||||||
},
|
},
|
||||||
li({ children }: { children?: React.ReactNode }) {
|
li({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<li className="leading-relaxed text-sm">
|
<li className="leading-relaxed">
|
||||||
{children}
|
{children}
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
@ -136,7 +136,7 @@ const markdownComponents = {
|
|||||||
// 引用
|
// 引用
|
||||||
blockquote({ children }: { children?: React.ReactNode }) {
|
blockquote({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</blockquote>
|
</blockquote>
|
||||||
);
|
);
|
||||||
@ -153,7 +153,7 @@ const markdownComponents = {
|
|||||||
table({ children }: { children?: React.ReactNode }) {
|
table({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className="overflow-x-auto my-3">
|
<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}
|
{children}
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@ -182,14 +182,14 @@ const markdownComponents = {
|
|||||||
},
|
},
|
||||||
th({ children }: { children?: React.ReactNode }) {
|
th({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</th>
|
</th>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
td({ children }: { children?: React.ReactNode }) {
|
td({ children }: { children?: React.ReactNode }) {
|
||||||
return (
|
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}
|
{children}
|
||||||
</td>
|
</td>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user