Chat 聊天消息组件演示 💬

本文展示 Chat 聊天消息组件的各种功能和用法。这个组件可以：

• 显示聊天对话样式
• 支持系统消息
• 支持自定义用户消息
• 显示时间戳
• 支持撤回消息提示

基本用法

时间戳

系统消息

普通消息

用户消息

右侧消息（自己）

带名字的消息

左侧消息（他人）

完整对话示例

更多场景

多人对话

系统通知

撤回消息

组件使用方式

在 MDX 文件中导入并使用：

import Chat from '../../components/post/Chat.astro';

<!-- 时间戳 -->
<Chat timestamp="2024-11-09 23:39:30" />

<!-- 系统消息 -->
<Chat system>
  系统通知内容
</Chat>

<!-- 自己的消息（右侧） -->
<Chat user="用户名" myself>
  消息内容
</Chat>

<!-- 他人的消息（左侧） -->
<Chat user="用户名">
  消息内容
</Chat>

Props 属性说明

属性	类型	默认值	说明
user	string	-	发送消息的用户名
myself	boolean	false	是否为自己的消息，设置为 true 时显示在右侧
system	boolean	false	是否为系统消息，居中显示
timestamp	string	-	时间戳，显示在消息上方

样式说明

消息类型

1. 系统消息

   • 居中显示
   • 半透明效果
   • 用于显示撤回、加入等系统通知

2. 用户消息（右侧）

   • 显示在右侧
   • 使用主题色背景
   • 显示用户名
   • 圆角在右上角

3. 普通消息（左侧）

   • 显示在左侧
   • 使用普通背景色
   • 可选显示用户名
   • 圆角在左上角

视觉效果

• 消息气泡采用圆角设计
• 用户名半透明显示
• 时间戳使用等宽字体
• 最大宽度限制为 90%

暗色模式适配

Chat 组件完全适配暗色模式：

• 消息气泡颜色自动调整
• 用户名和时间戳透明度保持一致
• 主题色背景在暗色模式下更柔和

使用场景

你可以在以下场景使用 Chat 组件：

• 教程文章：模拟对话形式讲解知识点
• 案例分析：展示真实的聊天记录
• 产品演示：展示聊天功能效果
• 故事叙述：用对话形式讲述故事
• FAQ：以问答形式呈现常见问题

结语

Chat 组件让博客中的对话内容更加生动直观，通过模拟真实的聊天界面，让读者更容易理解和代入。

你可以在文章中使用 Chat 组件来：

• 展示对话内容
• 模拟客服聊天
• 呈现用户反馈
• 演示产品功能
• 讲述故事情节

让博客内容更加丰富多彩！🎉