md

src/views/chat.vue

@@ -0,0 +1,113 @@
+<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>
+