114 lines
2.8 KiB
Vue
114 lines
2.8 KiB
Vue
<template>
|
|
<el-card>
|
|
<div class="chat-box" ref="chatBox">
|
|
<div v-for="(msg, index) in messages" :key="index" class="message">
|
|
<div v-if="msg.type === 'user'" class="user-message">
|
|
<img :src="avatar" alt="User" class="avatar" />
|
|
<div class="message-content user-message-content">{{ msg.content }}</div>
|
|
</div>
|
|
<div v-if="msg.type === 'bot'" class="bot-message">
|
|
<img :src="avatar_bot" alt="Bot" class="avatar" />
|
|
<div class="message-content bot-message-content">{{ msg.content }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-area">
|
|
<el-input
|
|
v-model="input"
|
|
placeholder="请输入您的问题..."
|
|
@keyup.enter.native="sendMessage"
|
|
class="input-field"
|
|
:style="{ maxWidth: 'calc(100% - 100px)' }"
|
|
></el-input>
|
|
<el-button type="primary" @click="sendMessage">发送</el-button>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
input: '',
|
|
messages: [],
|
|
avatar: localStorage.getItem('avatar'),
|
|
avatar_bot: require('@/assets/logo/short_logo.png')
|
|
};
|
|
},
|
|
methods: {
|
|
sendMessage() {
|
|
console.log('消息:', this.input)
|
|
if (this.input.trim() === '') return;
|
|
|
|
this.messages.push({ type: 'user', content: this.input });
|
|
const userInput = this.input;
|
|
this.input = '';
|
|
|
|
setTimeout(() => {
|
|
this.messages.push({ type: 'bot', content: `
|
|
您说了: ${userInput} \n
|
|
` });
|
|
this.scrollToBottom();
|
|
}, 500);
|
|
|
|
this.scrollToBottom();
|
|
},
|
|
scrollToBottom() {
|
|
this.$nextTick(() => {
|
|
this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-box {
|
|
height: calc(100vh - 210px);
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
}
|
|
.input-area {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
.message {
|
|
margin: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.user-message, .bot-message {
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.avatar {
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.input-field {
|
|
flex: 1;
|
|
margin-right: 10px;
|
|
max-width: calc(100% - 100px);
|
|
}
|
|
.message-content {
|
|
max-width: 100%; /* 确保消息内容框不超过聊天框宽度 */
|
|
background-color: #f0f0f0; /* 随意选择背景颜色 */
|
|
border-radius: 5px; /* 圆角 */
|
|
padding: 10px; /* 内边距 */
|
|
overflow-wrap: break-word; /* 使长文本换行 */
|
|
white-space: normal; /* 允许文本在标签内换行 */
|
|
word-wrap: break-word; /* 兼容旧版浏览器 */
|
|
}
|
|
.user-message-content {
|
|
background-color: #d1e7dd; /* 用户消息的背景颜色 */
|
|
}
|
|
.bot-message-content {
|
|
background-color: #cfe2ff; /* 机器人消息的背景颜色 */
|
|
}
|
|
</style>
|
|
|