leo-projects/claude-code-cchui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(聊天): 统一消息气泡和输入框圆角样式

Browse Source 
- 将输入框圆角从 rounded-[18px] 改为 rounded-md
- 将用户消息气泡圆角从 rounded-[18px] 改为 rounded-md
- 将助手消息气泡圆角从 rounded-2xl 改为 rounded-md
- 保持界面风格一致性
This commit is contained in:
gaoziman 2025-12-21 01:15:19 +08:00
parent 1c114a764e
commit 372946de9d
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/features/ChatInput.tsx
View File

@ -88,7 +88,7 @@ export function ChatInput({
<div className={cn('w-full max-w-[var(--input-max-width)] mx-auto', className)}> <div className={cn('w-full max-w-[var(--input-max-width)] mx-auto', className)}>
<div <div
className={cn( className={cn(
'relative flex flex-col bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-[18px] p-4 shadow-[var(--shadow-input)]', 'relative flex flex-col bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-md p-4 shadow-[var(--shadow-input)]',
'transition-all duration-150', 'transition-all duration-150',
'focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-input-focus)]', 'focus-within:border-[var(--color-border-focus)] focus-within:shadow-[var(--shadow-input-focus)]',
isDragging && 'border-[var(--color-primary)] border-2 bg-[var(--color-primary)]/5' isDragging && 'border-[var(--color-primary)] border-2 bg-[var(--color-primary)]/5'
@ -100,7 +100,7 @@ export function ChatInput({
> >
{/* 拖拽覆盖层 */} {/* 拖拽覆盖层 */}
{isDragging && ( {isDragging && (
<div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--color-bg-primary)]/90 rounded-[18px] border-2 border-dashed border-[var(--color-primary)]"> <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-[var(--color-bg-primary)]/90 rounded-md border-2 border-dashed border-[var(--color-primary)]">
<Upload className="w-8 h-8 text-[var(--color-primary)] mb-2" /> <Upload className="w-8 h-8 text-[var(--color-primary)] mb-2" />
<p className="text-sm font-medium text-[var(--color-primary)]"> <p className="text-sm font-medium text-[var(--color-primary)]">
释放以添加文件 释放以添加文件

4
src/components/features/MessageBubble.tsx
View File

@ -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-[18px] text-base leading-relaxed"> <div className="bg-[var(--color-message-user)] text-[var(--color-text-primary)] px-4 py-3 rounded-md text-base leading-relaxed">
{message.content || ((uploadedImages && uploadedImages.length > 0) || (uploadedDocuments && uploadedDocuments.length > 0) ? '(附件)' : '')} {message.content || ((uploadedImages && uploadedImages.length > 0) || (uploadedDocuments && uploadedDocuments.length > 0) ? '(附件)' : '')}
</div> </div>
{/* 悬停显示复制按钮 */} {/* 悬停显示复制按钮 */}
@ -233,7 +233,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
)} )}
{/* 主要内容 */} {/* 主要内容 */}
<div className="bg-[var(--color-message-assistant-bg)] border border-[var(--color-message-assistant-border)] rounded-2xl 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-sm text-[var(--color-text-primary)] leading-[1.75]">
{message.content ? ( {message.content ? (
<MarkdownRenderer content={message.content} /> <MarkdownRenderer content={message.content} />