From b2ab2348d7bd5f163a69936bdd9419e2b2f670b5 Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Sun, 13 Apr 2025 20:22:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=95=99=E8=A8=80?=
 =?UTF-8?q?=E4=B8=8D=E8=83=BD=E8=B7=B3=E8=BD=AC=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/User/Comment.vue     |  36 +++++-----
 src/components/User/Intelligent.vue | 102 ++++++++++++++++------------
 2 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/src/components/User/Comment.vue b/src/components/User/Comment.vue
index a29d951..3247070 100644
--- a/src/components/User/Comment.vue
+++ b/src/components/User/Comment.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="comment-container">
     <div class="background-wrapper"></div>
-
     <div class="content-wrapper">
       <div class="barrage-box">
         <vue-baberrage
@@ -123,13 +122,14 @@ export default {
   },
   mounted() {
     this.getCommentList();
-    // 定时刷新弹幕列表
-    setInterval(() => {
+    this.timer = setInterval(() => {
       this.getCommentList();
     }, 30000);
   },
   beforeDestroy() {
-    clearInterval(this.timer);
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
   },
 };
 </script>
@@ -140,6 +140,11 @@ export default {
   height: 100vh;
   width: 100%;
   overflow: hidden;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
 }
 
 .background-wrapper {
@@ -148,15 +153,7 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    opacity: 0.3;
-    filter: blur(5px);
-  }
+  z-index: -1;
 
   &::after {
     content: "";
@@ -176,24 +173,28 @@ export default {
 .content-wrapper {
   position: relative;
   z-index: 1;
-
-  // height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
 }
 
 .barrage-box {
-  width: 100vw;
   width: 100%;
   height: 600px;
   margin-bottom: 30px;
+  position: relative;
 
   .barrage-component {
     background: rgba(0, 0, 0, 0.1);
     border-radius: 8px;
+    pointer-events: none;
   }
 }
 
@@ -201,6 +202,8 @@ export default {
   width: 100%;
   max-width: 600px;
   padding: 20px;
+  position: relative;
+  z-index: 2;
 
   .comment-input {
     /deep/ .el-input-group__prepend {
@@ -224,7 +227,6 @@ export default {
   }
 }
 
-// 响应式适配
 @media screen and (max-width: 768px) {
   .input-box {
     padding: 10px;
diff --git a/src/components/User/Intelligent.vue b/src/components/User/Intelligent.vue
index cf5c1c0..1323319 100644
--- a/src/components/User/Intelligent.vue
+++ b/src/components/User/Intelligent.vue
@@ -1,31 +1,45 @@
 <template>
   <div class="chat-container">
-    <h2 style="text-align: center;color:deepskyblue;">llama3 智能推荐 </h2>
-    <el-card class="chat" style="margin-top:10px;height: 80vh;border-radius: 15px;border-color: #ccc;">
+    <h2 style="text-align: center; color: deepskyblue">DeepSeek 智能推荐</h2>
+    <el-card
+      class="chat"
+      style="
+        margin-top: 10px;
+        height: 80vh;
+        border-radius: 15px;
+        border-color: #ccc;
+      "
+    >
       <el-card class="main_chat">
         <div v-for="item in messages" :key="message.id" class="message">
-          <div v-if="item.inputMessage!=null&&item.inputMessage!==''" class="user-message">
+          <div
+            v-if="item.inputMessage != null && item.inputMessage !== ''"
+            class="user-message"
+          >
             {{ item.inputMessage }}
           </div>
-          <div v-if="item.aiResult!=null&&item.aiResult!==''" class="bot-message">{{ item.aiResult }}</div>
+          <div
+            v-if="item.aiResult != null && item.aiResult !== ''"
+            class="bot-message"
+          >
+            {{ item.aiResult }}
+          </div>
         </div>
-
       </el-card>
       <el-input
-          placeholder="请输入内容，例如：我喜欢动物类的书籍，请给我推荐"
-          v-model.trim="inputMessage"
-          :disabled="loading"
-          @keyup.enter.native="sendMessage"
+        placeholder="请输入内容，例如：我喜欢动物类的书籍，请给我推荐"
+        v-model.trim="inputMessage"
+        :disabled="loading"
+        @keyup.enter.native="sendMessage"
       >
         <el-button
-            slot="append"
-            icon="el-icon-s-promotion"
-            v-loading="loading"
-            @click="sendMessage"
-            :disabled="loading"
+          slot="append"
+          icon="el-icon-s-promotion"
+          v-loading="loading"
+          @click="sendMessage"
+          :disabled="loading"
         ></el-button>
-      </el-input
-      >
+      </el-input>
     </el-card>
   </div>
 </template>
@@ -39,10 +53,10 @@ export default {
       message: {
         inputMessage: "",
         aiResult: "",
-        userId: null
+        userId: null,
       },
-      loading: false
-    }
+      loading: false,
+    };
   },
   methods: {
     /**
@@ -54,14 +68,14 @@ export default {
       if (this.inputMessage.trim() === "") {
         return this.$message.info({
           message: "文本不能为空",
-          duration: 1500
-        })
+          duration: 1500,
+        });
       }
       // 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
       if (/[\da-zA-Z]/.test(this.inputMessage)) {
         this.$message.info({
           message: "请不要输入无意义的内容",
-          duration: 1000
+          duration: 1000,
         });
         return;
       }
@@ -70,7 +84,7 @@ export default {
         this.messages.push({
           id: Date.now(),
           inputMessage: this.inputMessage,
-          userId: parseInt(userId)
+          userId: parseInt(userId),
         });
         // 这里可以是调用 GPT API 的逻辑
         this.message.inputMessage = this.inputMessage.trim();
@@ -79,10 +93,13 @@ export default {
         this.inputMessage = "";
         this.loading = true;
         this.$message.info({
-          message:"文本输入越长，接口调用时间越长，请耐心等待10秒左右",
-          duration:2500
-        })
-        const {data: res} = await this.$http.post("user/ai_intelligent", this.message)
+          message: "文本输入越长，接口调用时间越长，请耐心等待10秒左右",
+          duration: 2500,
+        });
+        const { data: res } = await this.$http.post(
+          "user/ai_intelligent",
+          this.message
+        );
 
         if (res.status !== 200) {
           this.loading = false;
@@ -90,15 +107,14 @@ export default {
         }
         this.$message.success({
           message: res.msg,
-          duration: 1500
-        })
+          duration: 1500,
+        });
         this.messages.push({
           id: Date.now(),
           aiResult: res.data,
-          userId: userId
+          userId: userId,
         });
         this.loading = false;
-
       }
     },
     /**
@@ -107,26 +123,28 @@ export default {
      */
     async getHistoryRecords() {
       var userId = window.sessionStorage.getItem("userId");
-      const {data: res} = await this.$http.get("user/ai_list_information/" + userId)
+      const { data: res } = await this.$http.get(
+        "user/ai_list_information/" + userId
+      );
       if (res.status !== 200) {
-        return this.$message.error(res.msg)
+        return this.$message.error(res.msg);
       }
       this.$message.success({
         message: res.msg,
-        duration: 1500
-      })
+        duration: 1500,
+      });
       res.data.forEach((item) => {
         this.messages.push(item);
-      })
-    }
+      });
+    },
   },
   created() {
     this.getHistoryRecords();
-  }
-}
+  },
+};
 </script>
 
-<style scoped lang='less'>
+<style scoped lang="less">
 //.chat-container {
 //  display: flex;
 //  flex-direction: column;
@@ -136,7 +154,8 @@ export default {
   margin-bottom: 10px;
   height: 70vh;
   background-size: cover;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg) no-repeat 0px 0px;
+  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg)
+    no-repeat 0px 0px;
   border-radius: 10px;
   overflow-y: scroll;
 }
@@ -155,7 +174,6 @@ export default {
   align-self: flex-end;
   text-align: right;
   margin-top: 10px;
-
 }
 
 .bot-message {