vue模拟微信聊天界面和机器人左右两侧对话的代码且内容上方都有时间显示

好的，下面是一个简单的Vue聊天界面的示例代码，内容左右两侧分别是机器人和用户的对话，上方有时间显示：

<template>
  <div class="chat-container">
    <div class="chat-content">
      <div v-for="message in messages" :key="message.id" class="chat-item" :class="{'chat-item-right': message.isMe}">
        <div class="chat-message">{{ message.content }}</div>
        <div class="chat-time">{{ formatDate(message.time) }}</div>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" class="chat-text" v-model="inputText" @keydown.enter="sendMessage">
      <button class="chat-send" @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputText: ''
    }
  },
  methods: {
    sendMessage() {
      const content = this.inputText.trim();
      if (content) {
        const time = new Date();
        const message = {
          id: this.messages.length + 1,
          content,
          time,
          isMe: true
        };
        this.messages.push(message);
        this.inputText = '';
        this.replyMessage();
      }
    },
    replyMessage() {
      const content = '这是机器人的回复';
      const time = new Date();
      const message = {
        id: this.messages.length + 1,
        content,
        time,
        isMe: false
      };
      setTimeout(() => {
        this.messages.push(message);
      }, 1000);
    },
    formatDate(time) {
      const date = new Date(time);
      const hours = date.getHours();
      const minutes = date.getMinutes();
      return `${hours}:${minutes}`;
    }
  }
}
</script>

<style>
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-content {
  flex: 1;
  overflow-y: scroll;
  padding: 10px;
}

.chat-item {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.chat-item-right {
  align-items: flex-end;
}

.chat-message {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
  max-width: 60%;
}

.chat-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.chat-input {
  display: flex;
  margin-top: 10px;
}

.chat-text {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.chat-send {
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
}
</style>

在这个代码中，我们使用了一个 messages 数组来存储所有的聊天消息。每次用户发送一条消息，会在该数组中新增一条消息对象，包含消息的内容、发送时间以及是否为用户发送的消息标识。同时，也会调用 replyMessage 方法来模拟机器人的回复，该方法会在一秒钟后向 messages 数组中新增一条机器人回复的消息对象。

在模板中，我们使用 v-for 指令来遍历 messages 数组，并根据消息对象的 isMe 属性来判断消息是来自用户还是机器人，并设置相应的样式。同时，也使用了 formatDate 方法来格式化时间，将时间对象转换为格式为"小时:分钟"的字符串。

在样式中，我们设置了消息框的样式以及输入框的样式。整个聊天界面是一个 flex 布局，消息框和输入框都是 flex 子项，可以根据需要进行伸缩。