Aura
/
aura-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 调整聊天窗口样式 - 名字更浅更小，AGENT气泡白底，修正AGENT用户布局位置

main
sp mac bookpro 2605 2026-06-08 01:06:38 +08:00
parent 32cb1c9d92
commit 6378159406
3 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/chat/components/ChatBody.tsx
View File

@ -94,9 +94,9 @@ export default function ChatBody(props: {
marginBottom: 6
}}>
<span style={{
fontSize: 13,
fontWeight: 500,
color: 'var(--color-text)'
fontSize: 12,
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
{streamingAgent.name}
</span>

70
src/pages/chat/components/messages/MessageItem.tsx
View File

@ -50,9 +50,39 @@ export default function MessageItem(props: {
transition: 'background 0.4s, padding 0.4s'
}}
>
{message.role === 'assistant' ? (
{message.role === 'user' ? (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
{/* 用户: 头像在右侧，内容在左侧（靠右对齐） */}
<div style={{ flex: 1, minWidth: 0, maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
marginBottom: 6
}}>
<span style={{
fontSize: 12,
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
我
</span>
</div>
<div className={`bubble ${message.role}`}>
{message.content.includes('![image](') ? (
<Markdown>{message.content}</Markdown>
) : (
<span dangerouslySetInnerHTML={{
__html: message.content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>')
}} />
)}
</div>
</div>
<Avatar style={{ flexShrink: 0, marginTop: 2, backgroundColor: '#1890ff' }} size={36}>我</Avatar>
</div>
) : (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
{/* AGENT: 头像在左侧 */}
{/* AGENT: 头像在左侧，内容在右侧（靠左对齐） */}
{hasAnswerAgent && (
<Avatar src={answerAgent!.avatar} size={36} style={{ flexShrink: 0, marginTop: 2 }} />
)}
@ -65,9 +95,9 @@ export default function MessageItem(props: {
marginBottom: 6
}}>
<span style={{
fontSize: 13,
fontWeight: 500,
color: 'var(--color-text)'
fontSize: 12,
fontWeight: 400,
color: 'var(--color-text-secondary)'
}}>
{answerAgent!.name}
</span>
@ -121,36 +151,6 @@ export default function MessageItem(props: {
)}
</div>
</div>
) : (
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: 'flex-end' }}>
<div style={{ flex: 1, minWidth: 0, maxWidth: '78%', display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 8,
marginBottom: 6
}}>
<span style={{
fontSize: 13,
fontWeight: 500,
color: 'var(--color-text)'
}}>
我
</span>
</div>
<div className={`bubble ${message.role}`}>
{message.content.includes('![image](') ? (
<Markdown>{message.content}</Markdown>
) : (
<span dangerouslySetInnerHTML={{
__html: message.content.replace(/@([^\s]+)/g, '<span class="mention">@$1</span>')
}} />
)}
</div>
</div>
{/* 用户: 头像在右侧 */}
<Avatar style={{ flexShrink: 0, marginTop: 2, backgroundColor: '#1890ff' }} size={36}>我</Avatar>
</div>
)}
</div>
);

2
src/styles.css
View File

@ -645,7 +645,7 @@ body {
}
.bubble.assistant {
background: var(--color-surface);
background: #ffffff;
color: var(--color-text);
border: 1px solid var(--color-border);
border-bottom-left-radius: 5px;