[ Request ] 关于 头像、昵称、气泡 的建议
Closed this issue · 1 comments
W4ddl3 commented
1、 去掉头像(匿名聊天头像也是不重要的)
2、昵称使用不同颜色来区分
3、对话气泡纯粹一点
图片的代码
import React from 'react';
const AnonymousChatUI = () => {
const users = {
'Alice': 'text-blue-600',
'Bob': 'text-green-600',
'Charlie': 'text-purple-600',
'Diana': 'text-red-600'
};
const messages = [
{ id: 1, sender: 'Alice', content: '大家好!我们来讨论一下今天的话题吧。', time: '10:00' },
{ id: 2, sender: 'Bob', content: '好的,你想讨论什么?', time: '10:02' },
{ id: 3, sender: 'Charlie', content: '我们可以谈谈最近的新闻事件。', time: '10:05' },
{ id: 4, sender: 'Diana', content: '听起来不错,我最近看到了一篇关于人工智能的有趣文章。', time: '10:07' },
{ id: 5, sender: 'Alice', content: '人工智能确实是个热门话题,你们怎么看待它对未来的影响?', time: '10:10' },
];
return (
<div className="flex flex-col h-screen bg-gray-100">
{/* 在线用户列表 */}
<div className="bg-white p-2 text-xs text-gray-500 border-b border-gray-200">
在线用户:Alice, Bob, Charlie, Diana
</div>
{/* 聊天记录 */}
<div className="flex-1 overflow-y-auto p-4">
{messages.map((message) => (
<div key={message.id} className={`mb-4 flex ${message.sender === 'Alice' ? 'justify-end' : 'justify-start'}`}>
<div className={`max-w-[70%] flex flex-col ${message.sender === 'Alice' ? 'items-end' : 'items-start'}`}>
<div className={`font-semibold mb-1 ${users[message.sender]}`}>
{message.sender}
</div>
<div className={`rounded-lg p-3 ${
message.sender === 'Alice' ? 'bg-blue-100' : 'bg-gray-200'
}`}>
<p className="text-gray-800">{message.content}</p>
</div>
</div>
</div>
))}
</div>
{/* 输入框 */}
<div className="bg-white border-t border-gray-200 p-4">
<div className="flex items-center">
<input
type="text"
placeholder="输入消息..."
className="flex-1 bg-gray-100 border border-gray-300 rounded-full py-2 px-4 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>
</div>
);
};
export default AnonymousChatUI;
byebyehair commented
版本已更新,界面焕新,使用了ddiu.io制作的某项目页面作为基板,比之前精致不少,感谢小伙伴提出的页面美化建议!谢谢!🙏