fixbug:修正ai对话显示顺序问题以及滚动条问题

src/components/AIChatter/AIChatter.vue

@@ -67,6 +67,9 @@
               @click="handleSendQuestion"
               style="width: 40px; border: none"
               v-loading="data.loading"
+              :element-loading-spinner="svg"
+              element-loading-svg-view-box="-10, -10, 50, 50"
+              element-loading-background="rgba(122, 122, 122, 0.8)"
           >
             <el-icon><Top/></el-icon>
           </el-button>
@@ -97,19 +100,41 @@
   import type {IDialogue} from "@/types/dialogue.ts";
   import {useStore} from "@/store";
   import useApis from "@/apis";
-  import {onMounted, reactive, ref, defineProps, watch, onUnmounted} from "vue";
+  import {onMounted, reactive, ref, defineProps, watch, onUnmounted, nextTick} from "vue";
   import {ArrowDown, Top} from '@element-plus/icons-vue'
+  import {ElMessage} from "element-plus";
+  import emitter from "@/utils/emitter";
+
+  // const svg = `
+  //       <path class="path" d="
+  //         M 30 15
+  //         L 28 17
+  //         M 25.61 25.61
+  //         A 15 15, 0, 0, 1, 15 30
+  //         A 15 15, 0, 1, 1, 27.99 7.5
+  //         L 15 15
+  //       " style="fill: rgba(0, 0, 0, 0)"/>
+  //     `
 
   const svg = `
-        <path class="path" d="
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path class="path" d="
           M 30 15
           L 28 17
           M 25.61 25.61
           A 15 15, 0, 0, 1, 15 30
           A 15 15, 0, 1, 1, 27.99 7.5
           L 15 15
-        " style="fill: rgba(0, 0, 0, 0)"/>
-      `
+        " style="stroke-width: 4px; stroke: #0099FF; stroke-dasharray: 5 3; fill: url(#myGradient);">
+  </path>
+  <defs>
+    <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FF5733" />
+      <stop offset="100%" stop-color="#33FF57" />
+    </linearGradient>
+  </defs>
+</svg>
+`;
 //update: 加入isTeacher属性，用于判断是否是教师批改界面
   interface IProps {
     dialogueId: string;
@@ -133,6 +158,7 @@
     "请用英文描述一个场景或一个观点：xxx",
     // 更多问题模板...
   ];
+  let AICount = ref(0);
 
   const inputRef = ref(null);
   const messagesEndRef = ref(null);
@@ -161,11 +187,14 @@
   onMounted(() => {
     if (props.messages) data.messages = props.messages;
     // console.log(props.messages)
-    scrollToEnd();
+    nextTick(scrollToEnd);
   });
 
   const scrollToEnd = () => {
-    messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' });
+    // messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' });
+    let container = containerTopRef.value
+    container.scrollTo({ top: container.scrollHeight-1, behavior: 'smooth' });
+
   };
 
   watch(() => props.messages, (newMessages:any) => {
@@ -173,11 +202,11 @@
       data.messages = newMessages;
     console.log(newMessages)
     handleMessageList()
-    scrollToEnd();
+    nextTick(scrollToEnd);
   });
 
   watch(() => data.messages, () => {
-    scrollToEnd();
+    nextTick(scrollToEnd);
   });
 
   onMounted(() => {
@@ -200,8 +229,23 @@
     });
   });
 
-  //  BUG: 按这套逻辑显示的名字可能与内容对不上
+  // 发送问题
   const handleSendQuestion = () => {
+    // 触发行为记录
+    emitter.emit("click-ai-send-button", {
+      date: Date.now(),
+      userId: store.user.id,
+      message: `第${AICount.value+1}次点击了AI提问按钮`,
+      eventId: `${store.user.id}_${Date.now()}`,
+      type: "AIChatter"
+    })
+    if(AICount.value<10){
+      AICount.value++
+    } else {
+      ElMessage.warning("单次只能使用10次对话功能")
+      AICount.value++
+      return
+    }
     data.loading = true;
 
     let requestBody:IDialogue[] = data.messages
@@ -222,7 +266,7 @@
         .finally(() => {
           data.questionContent = '';
           data.loading = false;
-          scrollToEnd();
+          nextTick(scrollToEnd);
         });
   };
 
@@ -232,15 +276,26 @@
 
   // 选择模板问题
   const handleMenuClick = (key:any) => {
-    // data.questionContent = questionTemplates[key];
-    // inputRef.value.focus();// 设置焦点自动回到Input
-    console.log(data.messages)
+    data.questionContent = questionTemplates[key];
+    inputRef.value.focus();// 设置焦点自动回到Input
   };
 
   // 处理ai对话显示异常问题
   const handleMessageList = () => {
+    console.log(data.messages)
     let count1 = 0
     let count2 = 1
+    let userNum = 0
+    let AssistantNum = 0
+    //统计
+    for(let message of data.messages){
+      if(message.role == "user"){
+        userNum++
+      } else {
+        AssistantNum++
+      }
+    }
+    if(userNum > AssistantNum) count2 = count2 + 2 * (userNum - AssistantNum)
     for(let message of data.messages){
       if(message.role == "user"){
         messageList[count1] = {
@@ -250,13 +305,22 @@
         count1+=2
       }
       if(message.role == "assistant"){
-        messageList[count2] = {
-          role: "assistant",
-          content: message.content
+        if(userNum == AssistantNum){
+          messageList[count2] = {
+            role: "assistant",
+            content: message.content
+          }
+          count2+=2
+        } else {
+          messageList[count2] = {
+            role: "assistant",
+            content: message.content
+          }
+          count2+=2
         }
-        count2+=2
       }
     }
+    console.log(messageList)
   }