山东大学项目实训（五）——AI对话框功能完善

在经过前几周的学习、编写代码之后，本项目的前端已经基本搭建完成。接下来是相关功能的添加、修改和完善。本次记录的是在AI智能对话页面的一些布局调整。

如图所示是目前的AI对话界面：

可以看到在目前的页面中，头像位置固定在右上方，并且在发送消息时，并不会呈现出常规对话APP那样头像跟着对话框一起出现的情形（如QQ）因此我们需要修改代码，实现上述功能的同时使得界面更加美观

为了实现头像跟随对话框出现，设置了如下几点：

• 使用 .message_container 类来包裹每条消息和头像，确保它们在同一行显示。
• .chat_avatar 类用于设置头像的样式和位置。
• 调整了输入框和发送按钮的样式，使它们在一行中对齐

修改代码之后，再次运行界面发现此时虽然满足了＂头像跟随对话框出现＂这一要求，但是此时头像出现在了对话框的左边,不符合常规对话app中头像在右边的布局,且此时对话框出现在中间,布局不合理,因此再次调整代码

为了确保每条消息的头像显示在消息的左边，需要调整 .message_container 和 .chat_avatar 类的布局,并且调整页边间距至一个合理位置

以下是详细的修改说明:

1.模板部分：

• 将头像和消息框放在同一个容器中：在 v-for 循环中，每条消息和对应的头像都放在一个 div 中，并且这个 div 使用了 right_layout_myselfChat 类。
• 调整头像和消息框的布局：添加了 user_img 类，用于头像的 div

2.样式部分：

• right_layout_myselfChat：
  • 使用 display: flex 使消息框和头像在同一水平线上。
  • justify-content: flex-end 使头像和消息框都靠右对齐。
  • align-items: center 使消息框和头像在垂直方向上居中对齐。
  • 添加 margin-top: 20px 和 margin-right: 20px，调整消息框和头像与上边界和右边界的距离。
• user_img：
  • margin-left: 10px 确保消息框和头像之间有一定的间距。
• my_chat：
  • max-width: 300px 限制消息框的最大宽度。
  • min-height: 40px 确保消息框有最小高度。
  • word-break: break-all 使长单词在消息框中换行。
  • overflow: hidden 确保消息框内容不溢出。
  • padding: 10px 20px 设置消息框内边距。
  • border-radius: 10px 设置消息框圆角。
  • background-color: #7ae1b6 设置消息框背景颜色。
  • opacity: 0.8 设置消息框透明度。
  • margin-right: 10px 确保消息框和头像之间有一定的间距。

.right_layout_myselfChat {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 20px; /* 调整距离上边界的距离 */
  margin-right: 20px; /* 调整距离右边界的距离 */
}

.user_img {
  margin-left: 10px;
}

.my_chat {
  max-width: 300px;
  min-height: 40px;
  word-break: break-all;
  overflow: hidden;
  padding: 10px 20px;
  border-radius: 10px;
  background-color: #7ae1b6;
  opacity: 0.8;
  margin-right: 10px;
}
修改后的页面效果如下: