zbytest003-2025-02-19 08:02:07

src/router/index.js

@@ -5,16 +5,20 @@ import LoginView from '../views/LoginView.vue'
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'Home',
     component: HomeView
   },
   {
     path: '/login',
-    name: 'login',
+    name: 'Login',
     component: LoginView
+  },
+  {
+    path: '/chat',
+    name: 'Chat',
+    component: () => import('../views/ChatView.vue')
   }
 ]
-
 const router = createRouter({
   history: createWebHashHistory(location.pathname),
   routes

src/views/ChatView.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="chat-container">
+    <div class="sidebar">
+      <div class="sidebar-header">聊天应用</div>
+      <ul class="contact-list">
+        <li v-for="contact in contacts" :key="contact.id" :class="{ 'selected': selectedContactId === contact.id }" @click="selectContact(contact.id)">
+          <img :src="contact.avatar" alt="Avatar" class="avatar">
+          <div class="contact-info">
+            <span class="name">{{ contact.name }}</span>
+            <span class="timestamp">{{ contact.lastMessageTime }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="chat-area">
+      <div class="message-bubble" v-for="message in messages" :key="message.id" :class="{ 'sent': message.sentByUser, 'received': !message.sentByUser }">
+        {{ message.text }}
+      </div>
+    </div>
+    <div class="input-area">
+      <a-input v-model:value="inputMessage" placeholder="Type a message..." class="message-input" @keyup.enter="sendMessage" />
+      <a-button type="primary" shape="circle" icon="send" @click="sendMessage" class="send-button"></a-button>
+      <a-upload accept="*" :before-upload="handleFileUpload" class="upload-button">
+        <a-button type="primary" shape="circle" icon="upload"></a-button>
+      </a-upload>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { UploadOutlined, SendOutlined } from '@ant-design/icons-vue';
+
+export default {
+  components: {
+    UploadOutlined,
+    SendOutlined,
+  },
+  setup() {
+    const contacts = ref([
+      { id: 1, avatar: 'https://via.placeholder.com/40', name: 'Alice', lastMessageTime: '10:30 AM' },
+      { id: 2, avatar: 'https://via.placeholder.com/40', name: 'Bob', lastMessageTime: '11:00 AM' },
+    ]);
+    const messages = ref([]);
+    const inputMessage = ref('');
+    const selectedContactId = ref(null);
+
+    const selectContact = (id) => {
+      selectedContactId.value = id;
+      messages.value = [
+        { id: 1, text: 'Hello Bob!', sentByUser: false },
+        { id: 2, text: 'Hi Alice!', sentByUser: true },
+      ];
+    };
+
+    const sendMessage = () => {
+      if (inputMessage.value.trim()) {
+        messages.value.push({ id: messages.value.length + 1, text: inputMessage.value, sentByUser: true });
+        inputMessage.value = '';
+      }
+    };
+
+    const handleFileUpload = (file) => {
+      console.log('File uploaded:', file.name);
+      inputMessage.value += ` [File: ${file.name}]`;
+      return false; // Prevent actual upload
+    };
+
+    return {
+      contacts,
+      messages,
+      inputMessage,
+      selectedContactId,
+      selectContact,
+      sendMessage,
+      handleFileUpload,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 250px;
+  background-color: #08002E;
+  color: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  background-color: #5200A1;
+  font-size: 18px;
+  font-weight: bold;
+  padding: 10px;
+  text-align: center;
+}
+
+.contact-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.contact-list li {
+  padding: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.contact-list li.selected {
+  background-color: #5200A1;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.name {
+  font-weight: bold;
+}
+
+.timestamp {
+  font-size: 12px;
+  color: #ccc;
+}
+
+.chat-area {
+  flex: 1;
+  background-color: #f5f5f5;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.message-bubble {
+  max-width: 70%;
+  margin: 10px 0;
+  padding: 10px;
+  border-radius: 10px;
+  word-wrap: break-word;
+}
+
+.message-bubble.sent {
+  background-color: #5200A1;
+  color: white;
+  margin-left: auto;
+}
+
+.message-bubble.received {
+  background-color: #eaeaea;
+  color: black;
+  margin-right: auto;
+}
+
+.input-area {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: white;
+  border-top: 1px solid #ccc;
+}
+
+.message-input {
+  flex: 1;
+  margin-right: 10px;
+  border-radius: 10px;
+}
+
+.send-button, .upload-button {
+  border-radius: 10px;
+}
+</style>