Главная Обзор Помощь
Регистрация Вход
genlitex
/
prototype_design
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

zbytest003-2025-02-18 09:50:56

genlitex 2 месяцев назад
Родитель
f09a634e4f
Сommit
42269cf4fb
9 измененных файлов с 270 добавлено и 6 удалено
Разделённый вид Показать статистику Diff
  1. 1 0
      dist/assets/NewChatView-DdkH4s6g.js
  2. 1 0
      dist/assets/NewChatView-DfAdqJZK.css
  3. 0 0
      dist/assets/index-BtM_Gz6j.css
  4. 5 0
      dist/assets/index-DctTo5DI.js
  5. 0 4
      dist/assets/index-malWbV8K.js
  6. 2 2
      dist/index.html
  7. 96 0
      src/assets/new-chat-style.css
  8. 5 0
      src/router/index.js
  9. 160 0
      src/views/NewChatView.vue

+ 1 - 0
dist/assets/NewChatView-DdkH4s6g.js
Просмотреть файл 

@@ -0,0 +1 @@
 
+import{_ as u,c as n,a as t,F as r,r as o,w as m,v as g,b as h,o as l,t as c,n as p}from"./index-DctTo5DI.js";const x={data(){return{contacts:[{id:1,name:"联系人1"},{id:2,name:"联系人2"}],selectedContact:null,messages:[],messageText:""}},methods:{selectContact(d){this.selectedContact=d,this.messages=[{id:1,sender:"bot",text:"你好！"},{id:2,sender:"user",text:"这是我的消息。"}]},sendMessage(){this.messageText.trim()&&(this.messages.push({id:this.messages.length+1,sender:"user",text:this.messageText}),this.messageText="")},handleFileUpload(d){}}},_={class:"chat-container"},f={class:"sidebar"},C={class:"contact-list"},b=["onClick"],v={class:"chat-area"},k={class:"messages"};function y(d,s,T,M,i,a){return l(),n("div",_,[t("aside",f,[s[4]||(s[4]=t("header",{class:"app-title"},"应用标题",-1)),t("ul",C,[(l(!0),n(r,null,o(i.contacts,e=>(l(),n("li",{key:e.id,onClick:w=>a.selectContact(e)},c(e.name),9,b))),128))])]),t("main",v,[t("div",k,[(l(!0),n(r,null,o(i.messages,e=>(l(),n("div",{key:e.id,class:p({"user-message":e.sender==="user","bot-message":e.sender==="bot"})},c(e.text),3))),128))]),t("footer",null,[t("input",{type:"file",class:"file-upload",onChange:s[0]||(s[0]=(...e)=>a.handleFileUpload&&a.handleFileUpload(...e))},null,32),m(t("input",{type:"text","onUpdate:modelValue":s[1]||(s[1]=e=>i.messageText=e),onKeyup:s[2]||(s[2]=h((...e)=>a.sendMessage&&a.sendMessage(...e),["enter"])),class:"message-input"},null,544),[[g,i.messageText]]),t("button",{onClick:s[3]||(s[3]=(...e)=>a.sendMessage&&a.sendMessage(...e)),class:"send-button"},"发送")])])])}const U=u(x,[["render",y],["__scopeId","data-v-bb953c2f"]]);export{U as default};

+ 1 - 0
dist/assets/NewChatView-DfAdqJZK.css
Просмотреть файл 

@@ -0,0 +1 @@
 
+.chat-container[data-v-bb953c2f]{display:flex;height:100vh}.sidebar[data-v-bb953c2f]{width:250px;background-color:#f0f2f5;padding:1rem}.app-title[data-v-bb953c2f]{font-size:18px;font-weight:700;background-color:#483d8b;color:#fff;text-align:center;padding:.5rem}.contact-list[data-v-bb953c2f]{list-style-type:none;padding:0}.contact-list li[data-v-bb953c2f]{cursor:pointer;padding:.5rem;border-bottom:1px solid #ddd}.contact-list li[data-v-bb953c2f]:hover{background-color:#e0e0e0}.chat-area[data-v-bb953c2f]{flex-grow:1;display:flex;flex-direction:column}.messages[data-v-bb953c2f]{flex-grow:1;overflow-y:auto;padding:1rem}.message-input[data-v-bb953c2f]{flex-grow:1;border:1px solid #ccc;border-radius:3px;padding:.5rem;margin-right:.5rem}.send-button[data-v-bb953c2f]{background-color:#483d8b;color:#fff;border:none;border-radius:3px;padding:.5rem 1rem;cursor:pointer}.file-upload[data-v-bb953c2f]{background-color:#f0f0f0;border:1px solid #ccc;border-radius:3px;padding:.5rem;cursor:pointer;transition:background-color .3s ease}.file-upload[data-v-bb953c2f]:hover{background-color:#e0e0e0}.user-message[data-v-bb953c2f]{background-color:#72a0c1;color:#fff;align-self:flex-end;border-radius:10px;padding:.5rem;max-width:75%;word-wrap:break-word}.bot-message[data-v-bb953c2f]{background-color:#f9f9f9;color:#000;align-self:flex-start;border-radius:10px;padding:.5rem;max-width:75%;word-wrap:break-word}

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
dist/assets/index-BtM_Gz6j.css


Разница между файлами не показана из-за своего большого размера
+ 5 - 0
dist/assets/index-DctTo5DI.js


Разница между файлами не показана из-за своего большого размера
+ 0 - 4
dist/assets/index-malWbV8K.js


+ 2 - 2
dist/index.html
Просмотреть файл 

@@ -4,8 +4,8 @@
 
     <meta charset="UTF-8" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <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/6006/assets/index-DctTo5DI.js"></script>
 
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6006/assets/index-BtM_Gz6j.css">
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 96 - 0
src/assets/new-chat-style.css
Просмотреть файл 

@@ -0,0 +1,96 @@
 
+.chat-container {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #f0f2f5;
 
+  padding: 1rem;
 
+}
 
+
 
+.app-title {
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  background-color: darkslateblue;
 
+  color: white;
 
+  text-align: center;
 
+  padding: 0.5rem;
 
+}
 
+
 
+.contact-list {
 
+  list-style-type: none;
 
+  padding: 0;
 
+}
 
+
 
+.contact-list li {
 
+  cursor: pointer;
 
+  padding: 0.5rem;
 
+  border-bottom: 1px solid #ddd;
 
+}
 
+
 
+.contact-list li:hover {
 
+  background-color: #e0e0e0;
 
+}
 
+
 
+.chat-area {
 
+  flex-grow: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+
 
+.messages {
 
+  flex-grow: 1;
 
+  overflow-y: auto;
 
+  padding: 1rem;
 
+}
 
+
 
+.message-input {
 
+  flex-grow: 1;
 
+  border: 1px solid #ccc;
 
+  border-radius: 3px;
 
+  padding: 0.5rem;
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.send-button {
 
+  background-color: darkslateblue;
 
+  color: white;
 
+  border: none;
 
+  border-radius: 3px;
 
+  padding: 0.5rem 1rem;
 
+  cursor: pointer;
 
+}
 
+
 
+.file-upload {
 
+  background-color: #f0f0f0;
 
+  border: 1px solid #ccc;
 
+  border-radius: 3px;
 
+  padding: 0.5rem;
 
+  cursor: pointer;
 
+  transition: background-color 0.3s ease;
 
+}
 
+
 
+.file-upload:hover {
 
+  background-color: #e0e0e0;
 
+}
 
+
 
+.user-message {
 
+  background-color: #72a0c1;
 
+  color: white;
 
+  align-self: flex-end;
 
+  border-radius: 10px;
 
+  padding: 0.5rem;
 
+  max-width: 75%;
 
+  word-wrap: break-word;
 
+}
 
+
 
+.bot-message {
 
+  background-color: #f9f9f9;
 
+  color: black;
 
+  align-self: flex-start;
 
+  border-radius: 10px;
 
+  padding: 0.5rem;
 
+  max-width: 75%;
 
+  word-wrap: break-word;
 
+}

+ 5 - 0
src/router/index.js
Просмотреть файл 

@@ -6,6 +6,11 @@ const routes = [
 
     path: '/',
 
     name: 'home',
 
     component: HomeView
 
+  },
 
+  {
 
+    path: '/new-chat',
 
+    name: 'NewChat',
 
+    component: () => import('../views/NewChatView.vue')
 
   }
 
 ]

+ 160 - 0
src/views/NewChatView.vue
Просмотреть файл 

@@ -0,0 +1,160 @@
 
+<template>
 
+  <div class="chat-container">
 
+    <aside class="sidebar">
 
+      <header class="app-title">应用标题</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 class="messages">
 
+        <div v-for="message in messages" :key="message.id" :class="{ 'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot' }">
 
+          {{ message.text }}
 
+        </div>
 
+      </div>
 
+      <footer>
 
+        <input type="file" class="file-upload" @change="handleFileUpload" />
 
+        <input type="text" v-model="messageText" @keyup.enter="sendMessage" class="message-input" />
 
+        <button @click="sendMessage" class="send-button">发送</button>
 
+      </footer>
 
+    </main>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      contacts: [
 
+        { id: 1, name: '联系人1' },
 
+        { id: 2, name: '联系人2' },
 
+        // Add more contacts as needed
 
+      ],
 
+      selectedContact: null,
 
+      messages: [],
 
+      messageText: ''
 
+    };
 
+  },
 
+  methods: {
 
+    selectContact(contact) {
 
+      this.selectedContact = contact;
 
+      // Fetch and display messages for the selected contact
 
+      this.messages = [
 
+        { id: 1, sender: 'bot', text: '你好！' },
 
+        { id: 2, sender: 'user', text: '这是我的消息。' },
 
+        // Add more messages as needed
 
+      ];
 
+    },
 
+    sendMessage() {
 
+      if (this.messageText.trim()) {
 
+        this.messages.push({ id: this.messages.length + 1, sender: 'user', text: this.messageText });
 
+        this.messageText = '';
 
+      }
 
+    },
 
+    handleFileUpload(event) {
 
+      // Handle file upload logic here
 
+    }
 
+  }
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+.chat-container {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #f0f2f5;
 
+  padding: 1rem;
 
+}
 
+
 
+.app-title {
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+  background-color: darkslateblue;
 
+  color: white;
 
+  text-align: center;
 
+  padding: 0.5rem;
 
+}
 
+
 
+.contact-list {
 
+  list-style-type: none;
 
+  padding: 0;
 
+}
 
+
 
+.contact-list li {
 
+  cursor: pointer;
 
+  padding: 0.5rem;
 
+  border-bottom: 1px solid #ddd;
 
+}
 
+
 
+.contact-list li:hover {
 
+  background-color: #e0e0e0;
 
+}
 
+
 
+.chat-area {
 
+  flex-grow: 1;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+
 
+.messages {
 
+  flex-grow: 1;
 
+  overflow-y: auto;
 
+  padding: 1rem;
 
+}
 
+
 
+.message-input {
 
+  flex-grow: 1;
 
+  border: 1px solid #ccc;
 
+  border-radius: 3px;
 
+  padding: 0.5rem;
 
+  margin-right: 0.5rem;
 
+}
 
+
 
+.send-button {
 
+  background-color: darkslateblue;
 
+  color: white;
 
+  border: none;
 
+  border-radius: 3px;
 
+  padding: 0.5rem 1rem;
 
+  cursor: pointer;
 
+}
 
+
 
+.file-upload {
 
+  background-color: #f0f0f0;
 
+  border: 1px solid #ccc;
 
+  border-radius: 3px;
 
+  padding: 0.5rem;
 
+  cursor: pointer;
 
+  transition: background-color 0.3s ease;
 
+}
 
+
 
+.file-upload:hover {
 
+  background-color: #e0e0e0;
 
+}
 
+
 
+.user-message {
 
+  background-color: #72a0c1;
 
+  color: white;
 
+  align-self: flex-end;
 
+  border-radius: 10px;
 
+  padding: 0.5rem;
 
+  max-width: 75%;
 
+  word-wrap: break-word;
 
+}
 
+
 
+.bot-message {
 
+  background-color: #f9f9f9;
 
+  color: black;
 
+  align-self: flex-start;
 
+  border-radius: 10px;
 
+  padding: 0.5rem;
 
+  max-width: 75%;
 
+  word-wrap: break-word;
 
+}
 
+</style>

Некоторые файлы не были показаны из-за большого количества измененных файлов