增加错误展示

src/views/Home.vue

@@ -4,7 +4,7 @@
             <div class="message-group">
                 <div class="message-item" :class="[item.role]" v-for="(item, index) in lists" :key="index">
                     <span class="name">{{ item.role == "user" ? "你" : pageTitle }}</span>
-                    <v-md-preview class="content" :text="item.content"></v-md-preview>
+                    <v-md-preview class="content" :text="item.content" :class="{ error: item.error }"></v-md-preview>
                 </div>
             </div>
         </div>
@@ -38,6 +38,7 @@ export default {
             lists: [
                 {
                     role: "system",
+                    error: false,
                     content: "请问有什么可以帮你的吗？",
                 },
             ],
@@ -57,6 +58,7 @@ export default {
             if (!this.canUse || this.words == "") return;
             this.lists.push({
                 role: "user",
+                error: false,
                 content: this.words,
             });
             let requestData = {
@@ -67,6 +69,7 @@ export default {
 
             this.lists.push({
                 role: "system",
+                error: false,
                 content: "...",
             });
             let lastMessage = this.lists[this.lists.length - 1];
@@ -85,7 +88,8 @@ export default {
                     let answer = JSON.parse(Base64.decode(r.data.data));
                     lastMessage.content = answer.answer[0].message.content;
                 } else {
-                    lastMessage.content = "[网络错误]";
+                    lastMessage.error = true;
+                    lastMessage.content = "[" + r.data.msg + "]";
                 }
                 this.$nextTick(() => {
                     this.$refs.wordsInput.focus();
@@ -153,6 +157,10 @@ export default {
             background-color: #ffffff;
             border-radius: 0 10px 10px 10px;
         }
+        .content.error {
+            color: #ffffff;
+            background-color: #ff0000;
+        }
     }
     .message-item.user {
         align-items: flex-end;