|
|
@@ -1,12 +1,94 @@
|
|
|
<template>
|
|
|
- <div class="h-screen w-screen flex justify-center items-center">
|
|
|
- <h2>欢迎使用Prototype Design, 请您根据您的需要设计您的Prototype</h2>
|
|
|
+ <div class="min-h-screen bg-gray-100 flex flex-col">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-[#08002E] text-white h-16 flex items-center justify-center">
|
|
|
+ <span class="text-2xl font-bold">应用标题</span>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="flex flex-1">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 bg-[#08002E] text-white flex flex-col">
|
|
|
+ <div class="bg-[#5C0080] text-center py-4">
|
|
|
+ <span class="text-lg font-bold">应用标题</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 overflow-y-auto">
|
|
|
+ <ul class="space-y-2 mt-4">
|
|
|
+ <li v-for="(contact, index) in contacts" :key="index" class="px-4 py-2 hover:bg-[#5C0080] cursor-pointer">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <img :src="contact.avatar" alt="Avatar" class="w-8 h-8 rounded-full">
|
|
|
+ <div>
|
|
|
+ <span>{{ contact.name }}</span>
|
|
|
+ <br>
|
|
|
+ <span class="text-xs text-gray-300">{{ contact.lastMessageTime }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 bg-[#F7F7F7] p-4">
|
|
|
+ <div class="flex flex-col h-full">
|
|
|
+ <div class="flex-1 overflow-y-auto">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" class="mb-4">
|
|
|
+ <div v-if="message.sender === 'self'" class="flex justify-end">
|
|
|
+ <div class="bg-[#9B5DE5] text-white p-2 rounded-lg max-w-[70%]">
|
|
|
+ {{ message.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex">
|
|
|
+ <div class="bg-[#DADADA] text-gray-800 p-2 rounded-lg max-w-[70%]">
|
|
|
+ {{ message.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center h-16 bg-[#F7F7F7] border-t">
|
|
|
+ <input v-model="newMessage" type="text" placeholder="输入消息..." class="flex-1 px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-[#9B5DE5]" />
|
|
|
+ <button @click="sendMessage" class="w-16 h-full bg-[#9B5DE5] text-white rounded-r-lg">发送</button>
|
|
|
+ <label for="fileUpload" class="w-16 h-full bg-[#9B5DE5] text-white rounded-r-lg cursor-pointer flex items-center justify-center">
|
|
|
+ <input id="fileUpload" type="file" @change="uploadFile" class="hidden" />
|
|
|
+ 上传
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+const contacts = [
|
|
|
+ { avatar: 'https://via.placeholder.com/32', name: '联系人1', lastMessageTime: '10:30 AM' },
|
|
|
+ { avatar: 'https://via.placeholder.com/32', name: '联系人2', lastMessageTime: '9:15 AM' },
|
|
|
+ { avatar: 'https://via.placeholder.com/32', name: '联系人3', lastMessageTime: '8:45 AM' },
|
|
|
+];
|
|
|
+
|
|
|
+const messages = ref([
|
|
|
+ { sender: 'other', text: '你好！' },
|
|
|
+ { sender: 'self', text: '你好！有什么我可以帮忙的吗？' },
|
|
|
+]);
|
|
|
|
|
|
-export default {}
|
|
|
+const newMessage = ref('');
|
|
|
+
|
|
|
+const sendMessage = () => {
|
|
|
+ if (newMessage.value.trim()) {
|
|
|
+ messages.value.push({ sender: 'self', text: newMessage.value });
|
|
|
+ newMessage.value = '';
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const uploadFile = (event) => {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (file) {
|
|
|
+ messages.value.push({ sender: 'self', text: `已上传文件: ${file.name}` });
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
-<style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Additional styles can be added here if needed */
|
|
|
</style>
|
genlitex