|
|
@@ -0,0 +1,158 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="demand-list">
|
|
|
+ <div v-for="(item, index) in demands" :key="index" class="demand-item">
|
|
|
+ {{ item.title }}
|
|
|
+ <i class="eye-icon anticon anticon-eye" @click="viewDemand(item.id)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-area">
|
|
|
+ <div class="chat-header">Chat Interface</div>
|
|
|
+ <div class="chat-content">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.fromUser, 'bot-message': !message.fromUser }">
|
|
|
+ <span v-if="message.fromUser">{{ message.content }}</span>
|
|
|
+ <span v-else>{{ message.content }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-input">
|
|
|
+ <input v-model="inputMessage" placeholder="Type a message...">
|
|
|
+ <button class="send-button" @click="sendMessage">Send</button>
|
|
|
+ <label class="upload-button">
|
|
|
+ <input type="file" @change="handleFileUpload">
|
|
|
+ Upload File
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { defineComponent, ref } from 'vue';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'ChatView',
|
|
|
+ setup() {
|
|
|
+ const demands = ref([
|
|
|
+ { id: 1, title: 'Demand 1' },
|
|
|
+ { id: 2, title: 'Demand 2' },
|
|
|
+ // Add more demands as needed
|
|
|
+ ]);
|
|
|
+
|
|
|
+ const messages = ref([]);
|
|
|
+ const inputMessage = ref('');
|
|
|
+ const selectedFile = ref(null);
|
|
|
+
|
|
|
+ const sendMessage = () => {
|
|
|
+ messages.value.push({ fromUser: true, content: inputMessage.value });
|
|
|
+ messages.value.push({ fromUser: false, content: '正在建设中...' });
|
|
|
+ inputMessage.value = '';
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleFileUpload = (event) => {
|
|
|
+ selectedFile.value = event.target.files[0];
|
|
|
+ };
|
|
|
+
|
|
|
+ const viewDemand = (demandId) => {
|
|
|
+ // Logic to view the demand
|
|
|
+ };
|
|
|
+
|
|
|
+ return {
|
|
|
+ demands,
|
|
|
+ messages,
|
|
|
+ inputMessage,
|
|
|
+ sendMessage,
|
|
|
+ handleFileUpload,
|
|
|
+ viewDemand,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 15%;
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.demand-list {
|
|
|
+ height: calc(100% - 2rem);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.demand-item {
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.eye-icon {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-area {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-header {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-content {
|
|
|
+ max-height: calc(100% - 4rem);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message, .bot-message {
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message {
|
|
|
+ background-color: green;
|
|
|
+}
|
|
|
+
|
|
|
+.bot-message {
|
|
|
+ background-color: lightgray;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-input {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+input {
|
|
|
+ flex-grow: 1;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0.5rem;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button {
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
genlitex
