|
|
@@ -0,0 +1,78 @@
|
|
|
+<template>
|
|
|
+ <div class="flex h-screen">
|
|
|
+ <!-- 侧边栏 -->
|
|
|
+ <div class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
+ <div class="p-4 text-center font-bold text-2xl">应用标题</div>
|
|
|
+ <ul class="flex-1 overflow-auto">
|
|
|
+ <li v-for="(contact, index) in contacts" :key="index"
|
|
|
+ :class="{'bg-[#2F197F]': selectedContact === contact, 'hover:bg-[#3D26A3]': true}"
|
|
|
+ @click="selectContact(contact)">
|
|
|
+ <div class="flex items-center p-2">
|
|
|
+ <img :src="contact.avatar" alt="avatar" class="w-8 h-8 rounded-full mr-2"/>
|
|
|
+ <span>{{ contact.name }}</span>
|
|
|
+ <span class="ml-auto text-sm">{{ contact.lastMessageTime }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 对话区域 -->
|
|
|
+ <div class="flex-1 bg-gray-100 flex flex-col">
|
|
|
+ <div class="flex-1 p-4 overflow-y-auto">
|
|
|
+ <div v-for="(message, index) in messages" :key="index"
|
|
|
+ :class="{'bg-purple-100 float-right rounded-l-lg rounded-br-lg': message.sender === 'me', 'bg-gray-200 float-left rounded-r-lg rounded-bl-lg': message.sender !== 'me'}"
|
|
|
+ class="max-w-xs p-2 my-2">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="p-4 border-t border-gray-200 flex items-center">
|
|
|
+ <button class="bg-purple-500 text-white px-4 py-2 rounded-l-lg">发送</button>
|
|
|
+ <input type="text" v-model="newMessage" placeholder="输入消息..." class="flex-1 px-2 py-1 ml-2 rounded-r-lg" @keyup.enter="sendMessage" />
|
|
|
+ <label for="fileUpload" class="bg-purple-500 text-white px-4 py-2 rounded-full ml-2 cursor-pointer">上传文件
|
|
|
+ <input id="fileUpload" type="file" style="display: none;" @change="handleFileChange" />
|
|
|
+ </label>
|
|
|
+ <span v-if="selectedFile" class="ml-2 text-sm">{{ selectedFile.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'ChatView',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contacts: [
|
|
|
+ { name: '张三', avatar: '/assets/img/avatar.png', lastMessageTime: '10分钟前' },
|
|
|
+ // 更多联系人...
|
|
|
+ ],
|
|
|
+ selectedContact: null,
|
|
|
+ messages: [],
|
|
|
+ newMessage: '',
|
|
|
+ selectedFile: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectContact(contact) {
|
|
|
+ this.selectedContact = contact;
|
|
|
+ },
|
|
|
+ sendMessage() {
|
|
|
+ if (this.newMessage.trim()) {
|
|
|
+ this.messages.push({ content: this.newMessage, sender: 'me' });
|
|
|
+ this.newMessage = '';
|
|
|
+ // 自动滚动到底部
|
|
|
+ setTimeout(() => {
|
|
|
+ const chatContainer = document.querySelector('.overflow-y-auto');
|
|
|
+ chatContainer.scrollTop = chatContainer.scrollHeight;
|
|
|
+ }, 10);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFileChange(event) {
|
|
|
+ this.selectedFile = event.target.files[0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 添加自定义样式 */
|
|
|
+</style>
|
genlitex