copilot助手完成

ui/packages/ai/components/chatContent.vue

@@ -1,12 +1,12 @@
 <template>
-  <section class="chatContent">
+  <el-scrollbar class="chatContent">
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
-      <div class="chat-text" :class="{right:item.uid == 'me'}">
-        <img class="avatar" :src="item.avatar" alt=""/>
-        <div class="content" v-text="item.msg"/>
+      <div class="chat-text" :class="{right:item.userType == '0'}">
+        <img class="avatar" :src="avatar(item)" alt=""/>
+        <div class="content" v-text="item.content"/>
       </div>
     </div>
-  </section>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -16,38 +16,36 @@ export default {
   props: {
     list: {default: () => []}
   },
+  computed: {
+    lastMessage: v => v.list.at(-1)?.content
+  },
   watch: {
-    list: {
-      deep: true, handler() {
-        this.scrollBottom()
-      }
+    lastMessage() {
+      this.scrollBottom()
     }
   },
   methods: {
     scrollBottom() {
-      this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
+      const content = this.$el.querySelector(".el-scrollbar__wrap")
+      if (content) {
+        content.scrollTop = content.scrollHeight - content.clientHeight
+      }
     },
-    optimizeMessage(msg = "") {
-      return msg.trim()
+    avatar(item) {
+      return item.avatar || (item.userType == '0' ? 'https://cdn.sinoecare.com/i/2024/06/17/666fdb275be82.png' :
+          'https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png')
     }
+  },
+  mounted() {
+    this.scrollBottom()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .chatContent {
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 3px;
-    /* 设置滚动条宽度 */
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgb(66, 70, 86);
-    /* 设置滚动条滑块的背景色 */
-    border-radius: 50%;
-    /* 设置滑块的圆角 */
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
   }
 
   .chat-text {
@@ -55,6 +53,8 @@ export default {
     gap: 12px;
     font-size: 14px;
     color: #333333;
+    margin-bottom: 8px;
+    padding-right: 14px;
 
     .content {
       position: relative;