山东大学项目实训（五）——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

<template>
  <div class="body">
    <!-- 其他部分不变 -->

    <div class="right_layout">
      <div class="right_layout_son">
        <!-- 用户发送的聊天记录 -->
        <div
          v-for="(message, index) in chatHistory"
          :key="index"
          class="right_layout_myselfChat"
        >
          <div class="my_chat">
            {{ message }}
          </div>
          <div class="user_img">
            <div class="flase_img_son" style="width: 40px; height: 40px"></div>
          </div>
        </div>

        <!-- 机器人回复内容块 -->
        <div v-if="showRobotReply" class="left_layout_myselfChat">
          <div style="flex: 2; font-size: 13px; color: lightgray">
            {{ datetime }}
          </div>
          <div class="left_img_son" style="width: 40px; height: 40px"></div>
          <div>
            <div
              v-for="(message, index) in robot"
              :key="index"
              class="chat_message"
            >
              <div class="robot_chat" style="margin-top: 10px">
                {{ message }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 问题发送框 -->
      <div class="right_layout_son_ipt">
        <input
          class="ipt"
          type="text"
          placeholder="来说点什么吧..."
          v-model="inputText"
        />
        <button class="btn" @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>
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;
}
修改后的页面效果如下: