|
|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="sidebar">
|
|
|
+ <h2>需求</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, index) in demandList" :key="index">
|
|
|
+ <span @click="viewDetail(item.id)">{{ item.name }}<i class="fas fa-eye"></i></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="main-content">
|
|
|
+ <div class="chat-header">聊天界面</div>
|
|
|
+ <div class="message-area">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.fromUser, 'bot-message': !message.fromUser }">
|
|
|
+ {{ message.text }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-area">
|
|
|
+ <input v-model="userInput" placeholder="在此输入消息...">
|
|
|
+ <button @click="sendMessage">发送</button>
|
|
|
+ <input type="file" @change="handleFileUpload">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ref } from 'vue';
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const demandList = ref([
|
|
|
+ { id: 1, name: '需求1' },
|
|
|
+ { id: 2, name: '需求2' }
|
|
|
+ ]);
|
|
|
+ const messages = ref([]);
|
|
|
+ const userInput = ref('');
|
|
|
+ const sendMessage = () => {
|
|
|
+ messages.value.push({ fromUser: true, text: userInput.value });
|
|
|
+ messages.value.push({ fromUser: false, text: '正在建设中...' });
|
|
|
+ userInput.value = '';
|
|
|
+ };
|
|
|
+ const handleFileUpload = (event) => {
|
|
|
+ // Handle file upload logic
|
|
|
+ };
|
|
|
+ const viewDetail = (id) => {
|
|
|
+ // Logic for viewing demand detail
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ demandList,
|
|
|
+ messages,
|
|
|
+ userInput,
|
|
|
+ sendMessage,
|
|
|
+ handleFileUpload,
|
|
|
+ viewDetail
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 15%;
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-header {
|
|
|
+ background: linear-gradient(to right, #ff6b6b, #eb3349);
|
|
|
+ padding: 10px;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.message-area {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 10px;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message {
|
|
|
+ background-color: green;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bot-message {
|
|
|
+ background-color: lightgray;
|
|
|
+ color: black;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area input {
|
|
|
+ flex-grow: 1;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area button {
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area button:hover {
|
|
|
+ background-color: darkblue;
|
|
|
+}
|
|
|
+
|
|
|
+.input-area input[type="file"] {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|
genlitex
