Home Explore Help
Register Sign In
genlitex
/
prototype_design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

zbytest003-2025-02-18 10:04:44

genlitex 2 months ago
parent
f22fe30289
commit
b3ad4656dd
7 changed files with 316 additions and 6 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-BAACAZ7W.css
  2. 4 0
      dist/assets/index-Bd-XY95N.js
  3. 0 4
      dist/assets/index-malWbV8K.js
  4. 2 2
      dist/index.html
  5. 6 0
      src/router/index.js
  6. 141 0
      src/views/ChatView.vue
  7. 163 0
      src/views/NewChatView.vue

File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-BAACAZ7W.css


File diff suppressed because it is too large
+ 4 - 0
dist/assets/index-Bd-XY95N.js


File diff suppressed because it is too large
+ 0 - 4
dist/assets/index-malWbV8K.js


+ 2 - 2
dist/index.html
View File 

@@ -4,8 +4,8 @@
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>Prototype Design</title>
 
     <title>Prototype Design</title>
 
-    <script type="module" crossorigin src="/prototype/3000/assets/index-malWbV8K.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/prototype/3000/assets/index-Btspm7_H.css">
 
+    <script type="module" crossorigin src="/ide/proxy/6009/assets/index-Bd-XY95N.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6009/assets/index-BAACAZ7W.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 6 - 0
src/router/index.js
View File 

@@ -1,7 +1,13 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
+import ChatView from '../views/ChatView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
 
 
 const routes = [
 
 const routes = [
 
+  {
 
+    path: '/chat',
 
+    name: 'chat',
 
+    component: ChatView
 
+  },
 
   {
 
   {
 
     path: '/',
 
     path: '/',
 
     name: 'home',
 
     name: 'home',

+ 141 - 0
src/views/ChatView.vue
View File 

@@ -0,0 +1,141 @@
 
+<template>
 
+  <div class="chat-container">
 
+    <aside class="sidebar">
 
+      <header class="sidebar-header">
 
+        <h1>Contact List</h1>
 
+      </header>
 
+      <ul class="contact-list">
 
+        <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
 
+          {{ contact.name }}
 
+        </li>
 
+      </ul>
 
+    </aside>
 
+    <main class="chat-area">
 
+      <div v-for="message in messages" :key="message.id" class="message-bubble" :class="{ 'sent': message.sentBy === 'me', 'received': message.sentBy === 'other' }">
 
+        <p>{{ message.text }}</p>
 
+      </div>
 
+      <footer class="input-area">
 
+        <form @submit.prevent="sendMessage">
 
+          <input v-model="newMessageText" placeholder="Type your message...">
 
+          <button type="submit">Send</button>
 
+          <label for="fileInput"><i class="anticon anticon-upload"></i></label>
 
+          <input id="fileInput" type="file" @change="handleFileUpload">
 
+        </form>
 
+      </footer>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      contacts: [
 
+        { id: 1, name: 'Alice' },
 
+        { id: 2, name: 'Bob' },
 
+        { id: 3, name: 'Charlie' },
 
+      ],
 
+      selectedContact: null,
 
+      messages: [],
 
+      newMessageText: '',
 
+      file: null,
 
+    };
 
+  },
 
+  methods: {
 
+    selectContact(contact) {
 
+      this.selectedContact = contact;
 
+    },
 
+    sendMessage() {
 
+      if (this.newMessageText.trim()) {
 
+        this.messages.push({ sentBy: 'me', text: this.newMessageText });
 
+        this.newMessageText = '';
 
+      }
 
+    },
 
+    handleFileUpload(event) {
 
+      this.file = event.target.files[0];
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+.chat-container {
 
+  display: flex;
 
+  width: 100%;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #08002E;
 
+  color: white;
 
+  padding: 1rem;
 
+}
 
+
 
+.sidebar-header h1 {
 
+  text-align: center;
 
+}
 
+
 
+.contact-list {
 
+  list-style-type: none;
 
+  padding: 0;
 
+}
 
+
 
+.contact-list li {
 
+  cursor: pointer;
 
+  margin-bottom: 0.5rem;
 
+}
 
+
 
+.chat-area {
 
+  flex-grow: 1;
 
+  padding: 1rem;
 
+}
 
+
 
+.message-bubble {
 
+  border-radius: 10px;
 
+  margin: 0.5rem 0;
 
+  padding: 1rem;
 
+  max-width: 75%;
 
+}
 
+
 
+.message-bubble.sent {
 
+  background-color: #9b5de5;
 
+  align-self: flex-end;
 
+}
 
+
 
+.message-bubble.received {
 
+  background-color: #f0f0f0;
 
+  align-self: flex-start;
 
+}
 
+
 
+.input-area form {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+
 
+.input-area input {
 
+  flex-grow: 1;
 
+  margin-right: 0.5rem;
 
+  border-radius: 10px;
 
+}
 
+
 
+.input-area button {
 
+  background-color: #9b5de5;
 
+  color: white;
 
+  font-weight: bold;
 
+  border-radius: 10px;
 
+}
 
+
 
+.input-area label {
 
+  background-color: #9b5de5;
 
+  border-radius: 50%;
 
+  display: inline-flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.input-area input[type="file"] {
 
+  display: none;
 
+}
 
+</style>

+ 163 - 0
src/views/NewChatView.vue
View File 

@@ -0,0 +1,163 @@
 
+<template>
 
+  <div class="chat-app">
 
+    <aside class="sidebar">
 
+      <header>
 
+        <h1>Application Title</h1>
 
+      </header>
 
+      <ul class="contacts-list">
 
+        <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
 
+          {{ contact.name }}
 
+        </li>
 
+      </ul>
 
+    </aside>
 
+    <main class="chat-area">
 
+      <div class="message-bubble" v-for="message in messages" :key="message.id" :class="{ 'sent': message.sender === 'me', 'received': message.sender !== 'me' }">
 
+        <p>{{ message.text }}</p>
 
+      </div>
 
+    </main>
 
+    <section class="card-area">
 
+      <div class="card" v-for="card in cards" :key="card.id">
 
+        <p>{{ card.title }}</p>
 
+      </div>
 
+    </section>
 
+    <footer class="input-area">
 
+      <form @submit.prevent="sendMessage">
 
+        <input type="text" v-model="newMessageText" placeholder="Type a message...">
 
+        <button type="submit">Send</button>
 
+        <label>
 
+          <input type="file" @change="onFileSelected">
 
+          <span>Upload File</span>
 
+        </label>
 
+      </form>
 
+    </footer>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      contacts: [
 
+        { id: 1, name: 'Alice' },
 
+        { id: 2, name: 'Bob' },
 
+        { id: 3, name: 'Charlie' },
 
+      ],
 
+      selectedContact: null,
 
+      messages: [],
 
+      newMessageText: '',
 
+      cards: [
 
+        { id: 1, title: 'Card 1' },
 
+        { id: 2, title: 'Card 2' },
 
+      ],
 
+    };
 
+  },
 
+  methods: {
 
+    selectContact(contact) {
 
+      this.selectedContact = contact;
 
+      // Fetch messages for the selected contact
 
+      this.messages = [
 
+        { id: 1, sender: 'me', text: 'Hello, Alice!' },
 
+        { id: 2, sender: 'other', text: 'Hi there!' },
 
+      ];
 
+    },
 
+    sendMessage() {
 
+      if (this.newMessageText.trim()) {
 
+        this.messages.push({ id: this.messages.length + 1, sender: 'me', text: this.newMessageText });
 
+        this.newMessageText = '';
 
+      }
 
+    },
 
+    onFileSelected(event) {
 
+      // Handle file upload
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+.chat-app {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #08002e;
 
+  color: white;
 
+}
 
+
 
+.contacts-list li {
 
+  cursor: pointer;
 
+}
 
+
 
+.chat-area {
 
+  flex-grow: 1;
 
+  background-color: white;
 
+  padding: 20px;
 
+}
 
+
 
+.message-bubble {
 
+  margin: 10px 0;
 
+  border-radius: 10px;
 
+  padding: 10px;
 
+  max-width: 70%;
 
+}
 
+
 
+.message-bubble.sent {
 
+  background-color: #795548;
 
+  align-self: flex-end;
 
+}
 
+
 
+.message-bubble.received {
 
+  background-color: #e0e0e0;
 
+  align-self: flex-start;
 
+}
 
+
 
+.card-area {
 
+  width: 200px;
 
+  background-color: grey;
 
+  padding: 20px;
 
+}
 
+
 
+.card {
 
+  background-color: #fbefff;
 
+  border-radius: 10px;
 
+  margin-bottom: 10px;
 
+  padding: 10px;
 
+}
 
+
 
+.input-area {
 
+  background-color: white;
 
+  padding: 10px;
 
+  border-top: 1px solid #e0e0e0;
 
+}
 
+
 
+.input-area form {
 
+  display: flex;
 
+  gap: 10px;
 
+}
 
+
 
+.input-area input {
 
+  flex-grow: 1;
 
+  border: 1px solid #e0e0e0;
 
+  border-radius: 10px;
 
+  padding: 10px;
 
+}
 
+
 
+.input-area button {
 
+  background-color: #795548;
 
+  color: white;
 
+  font-weight: bold;
 
+  border: none;
 
+  border-radius: 10px;
 
+  padding: 10px 20px;
 
+  cursor: pointer;
 
+}
 
+
 
+.input-area label {
 
+  background-color: #795548;
 
+  color: white;
 
+  border-radius: 50%;
 
+  padding: 10px;
 
+  cursor: pointer;
 
+}
 
+</style>

Some files were not shown because too many files changed in this diff