From eb6eee1294abb93e4ce3db657c9dcf9f9fe215a8 Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Sat, 17 May 2025 21:10:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20AI=E4=BC=9A=E8=AF=9D=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/Agent.vue | 102 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 89 insertions(+), 13 deletions(-)

diff --git a/src/views/user/Agent.vue b/src/views/user/Agent.vue
index 6cc39b75..2b2cd29c 100644
--- a/src/views/user/Agent.vue
+++ b/src/views/user/Agent.vue
@@ -138,14 +138,29 @@ export default {
       this.addMessage("```javascript\n" + this.code + "\n```");
 
       try {
-        const response = await this.mockAiResponse(this.code);
-        this.addMessage(response, "ai");
+        const response = await AiChat({
+          userId: this.$store.state.user.userId,
+          question: this.code,
+          competitionType: "编程",
+        });
+
+        if (
+          response.code === 200 &&
+          response.data &&
+          response.data.code === 200
+        ) {
+          this.addMessage(response.data.data, "ai");
+        } else {
+          this.addMessage("AI 助手暂时无法回复，请稍后再试。", "ai");
+        }
       } catch (error) {
         console.error("AI 响应错误:", error);
+        this.addMessage("发生错误，请稍后重试。", "ai");
       } finally {
         this.loading = false;
       }
     },
+
     async sendTextMessage() {
       if (!this.inputMessage.trim()) return;
 
@@ -153,19 +168,29 @@ export default {
       this.addMessage(this.inputMessage);
 
       try {
-        const response = await this.mockAiResponse(this.inputMessage);
-        this.addMessage(response, "ai");
+        const response = await AiChat({
+          userId: this.$store.state.user.userId,
+          question: this.inputMessage,
+          competitionType: "编程",
+        });
+
+        if (
+          response.code === 200 &&
+          response.data &&
+          response.data.code === 200
+        ) {
+          this.addMessage(response.data.data, "ai");
+        } else {
+          this.addMessage("AI 助手暂时无法回复，请稍后再试。", "ai");
+        }
         this.inputMessage = "";
       } catch (error) {
         console.error("AI 响应错误:", error);
+        this.addMessage("发生错误，请稍后重试。", "ai");
       } finally {
         this.loading = false;
       }
     },
-    async mockAiResponse(input) {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      return '这是 AI 助手的回复，实际开发时替换为真实的 AI 接口调用。\n\n```javascript\nconsole.log("Hello from AI");\n```';
-    },
     clearCode() {
       if (this.editor) {
         this.editor.setValue("// 在这里输入你的代码\n");
@@ -177,7 +202,7 @@ export default {
 
 <style scoped>
 .ai-assistant {
-  padding: 24px;
+  /* padding: 24px; */
   background: #f0f2f5;
   min-height: calc(100vh - 64px);
 }
@@ -187,11 +212,43 @@ export default {
   height: calc(100vh - 112px);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  max-height: calc(100vh - 200px); /* 添加最大高度 */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+}
+
+/* 滚动条样式 */
+.chat-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+}
+
+.chat-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .editor-container {
   height: calc(100% - 60px);
-  min-height: 300px;
+  min-height: 70vh;
 }
 
 .editor-actions {
@@ -232,11 +289,12 @@ export default {
   background: #e6f7ff;
   padding: 12px;
   border-radius: 8px;
+  word-break: break-word;
 }
 
 .message.user .message-content {
-  background: #1890ff;
-  color: white;
+  background: #000; /* 修改用户消息背景色 */
+  color: #ffffff; /* 修改用户消息文字颜色 */
 }
 
 .message-time {
@@ -246,7 +304,7 @@ export default {
 }
 
 .message.user .message-time {
-  color: #e6f7ff;
+  color: rgba(255, 255, 255, 0.8); /* 修改用户消息时间颜色 */
 }
 
 :deep(.message-text pre) {
@@ -254,10 +312,28 @@ export default {
   padding: 16px;
   border-radius: 4px;
   overflow-x: auto;
+  margin: 8px 0; /* 添加上下间距 */
 }
 
+/* 修改用户消息中的代码块样式 */
 .message.user :deep(.message-text pre) {
   background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #ffffff; /* 修改代码文字颜色 */
+}
+
+/* 修改用户消息中的行内代码样式 */
+.message.user :deep(.message-text code) {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* 修改用户消息中的链接样式 */
+.message.user :deep(.message-text a) {
+  color: #ffffff;
+  text-decoration: underline;
 }
 
 .chat-input {