样式完成

ui/packages/ai/components/chatContent.vue

@@ -0,0 +1,124 @@
+<template>
+  <section 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>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "chatContent",
+  props: {
+    list: {default: () => []}
+  },
+  watch: {
+    list: {
+      deep: true, handler() {
+        this.scrollBottom()
+      }
+    }
+  },
+  methods: {
+    scrollBottom() {
+      this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
+    },
+    optimizeMessage(msg = "") {
+      return msg.trim()
+    }
+  }
+}
+</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%;
+    /* 设置滑块的圆角 */
+  }
+
+  .chat-text {
+    display: flex;
+    gap: 12px;
+    font-size: 14px;
+    color: #333333;
+
+    .content {
+      position: relative;
+      max-width: 220px;
+      padding: 8px;
+      border-radius: 4px;
+      background: #F3F5F7;
+      word-break: break-all;
+
+      &:before {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-right: 6px solid #F3F5F7;
+        position: absolute;
+        left: -6px;
+        top: 6px;
+      }
+    }
+
+    &.right {
+      flex-direction: row-reverse;
+
+      .content {
+        background: #CCE2FF;
+
+        &:before {
+          left: unset;
+          right: -6px;
+          border-left: 6px solid #CCE2FF;
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .avatar {
+    width: 36px;
+    height: auto;
+    align-self: flex-start;
+  }
+
+  .chat-friend {
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+
+  .chat-me {
+    width: 100%;
+    float: right;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+}
+</style>