你用vue写一个带有会话列表并且可以选择用户的微信聊天页,用户有头像、昵称、发送消息的时间,会话列表中有数字角标

以下是一个基于Vue.js的简单示例，用于创建微信聊天页面。它包括一个会话列表和一个聊天窗口。在会话列表中，每个会话都有一个头像、昵称、发送消息的时间和一个数字角标，以表示未读消息数量。

HTML代码：

<div id="app">
  <div class="sidebar">
    <div class="header">
      <h3>微信聊天</h3>
    </div>
    <ul class="chat-list">
      <li v-for="(chat, index) in chats" :key="index" @click="selectChat(index)" :class="{ active: activeChat === index }">
        <div class="avatar">
          <img :src="chat.avatar" alt="头像">
          <span v-if="chat.unread" class="badge">{{ chat.unread }}</span>
        </div>
        <div class="content">
          <div class="name">{{ chat.name }}</div>
          <div class="last-message">{{ chat.lastMessage }}</div>
          <div class="time">{{ chat.time }}</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="chat-window">
    <div class="header">
      <div class="avatar">
        <img :src="activeChatData.avatar" alt="头像">
      </div>
      <div class="name">{{ activeChatData.name }}</div>
    </div>
    <ul class="message-list">
      <li v-for="(message, index) in activeChatData.messages" :key="index" :class="{ me: message.isMe }">
        <div class="avatar">
          <img :src="message.avatar" alt="头像">
        </div>
        <div class="content">
          <div class="name">{{ message.name }}</div>
          <div class="text">{{ message.text }}</div>
          <div class="time">{{ message.time }}</div>
        </div>
      </li>
    </ul>
    <div class="input-box">
      <input type="text" v-model="newMessage" placeholder="输入消息...">
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</div>

CSS代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex: 0 0 300px;
  background-color: #f2f2f2;
  border-right: 1px solid #ddd;
  overflow-y: scroll;
}

.sidebar .header {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}

.sidebar .header h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.chat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chat-list li {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

.chat-list li:hover {
  background-color: #fff;
}

.chat-list li.active {
  background-color: #fff;
  font-weight: bold;
}

.chat-list li .avatar {
  position: relative;
  margin-right: 20px;
}

.chat-list li .avatar img {
  width: 50px;
  height