|
|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="sidebar">
|
|
|
+ <div class="header">需求</div>
|
|
|
+ <div class="demand-list">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(demand, index) in demands" :key="index">
|
|
|
+ <span>{{ demand }}</span>
|
|
|
+ <i class="icon-eye" @click="viewDemand(demand)"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main-chat-area">
|
|
|
+ <div class="chat-header">聊天界面</div>
|
|
|
+ <div class="message-area">
|
|
|
+ <div v-for="(message, index) in messages" :key="index" :class="{ 'user-message': message.sender === 'user', 'bot-message': message.sender === 'bot' }">
|
|
|
+ {{ message.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-footer">
|
|
|
+ <a-input placeholder="请输入您的问题" v-model="userInput" @keyup.enter="sendMessage"></a-input>
|
|
|
+ <a-button type="primary" @click="sendMessage">发送</a-button>
|
|
|
+ <a-upload>
|
|
|
+ <a-button>
|
|
|
+ <upload-outlined></upload-outlined>上传文件
|
|
|
+ </a-button>
|
|
|
+ </a-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { UploadOutlined } from '@ant-design/icons-vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ UploadOutlined
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ demands: ["需求1", "需求2", "需求3"],
|
|
|
+ messages: [],
|
|
|
+ userInput: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ viewDemand(demand) {
|
|
|
+ // Placeholder for viewing demand details
|
|
|
+ },
|
|
|
+ sendMessage() {
|
|
|
+ if (this.userInput.trim() !== '') {
|
|
|
+ this.messages.push({ sender: 'user', content: this.userInput });
|
|
|
+ this.userInput = '';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.messages.push({ sender: 'bot', content: '正在建设中...' });
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 15%;
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.demand-list ul {
|
|
|
+ list-style-type: none;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.demand-list li {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-eye {
|
|
|
+ float: right;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.main-chat-area {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-header {
|
|
|
+ background: linear-gradient(to right, #ff7e5f, #feb47b);
|
|
|
+ padding: 1rem;
|
|
|
+ color: white;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.message-area {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 1rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ max-height: calc(100vh - 200px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.user-message {
|
|
|
+ text-align: right;
|
|
|
+ background-color: green;
|
|
|
+ color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.bot-message {
|
|
|
+ text-align: left;
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ color: black;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: white;
|
|
|
+ padding: 1rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.input-footer a-input {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-right: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-footer a-button {
|
|
|
+ background-color: blue;
|
|
|
+ color: white;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.input-footer a-upload {
|
|
|
+ margin-left: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeIn {
|
|
|
+ from { opacity: 0; }
|
|
|
+ to { opacity: 1; }
|
|
|
+}
|
|
|
+
|
|
|
+.fade-in {
|
|
|
+ animation: fadeIn 1s;
|
|
|
+}
|
|
|
+</style>
|
genlitex
