整理聊天函数

src/components/chatContent.vue

@@ -1,21 +1,9 @@
 <template>
   <section class="chatContent" @scroll="onScroll">
     <div class="chat-wrapper" v-for="item in list" :key="item.id">
-      <div class="chat-friend" v-if="item.uid !== 'jcm'">
+      <div class="chat-friend" v-if="item.uid !== 'me'">
         <div class="chat-text" v-if="item.chatType == 0">
-          <el-row :gutter="20">
-            <el-col :span="2">
-              <svg t="1679666016648" @click="$copy(item.msg, '已复制')" class="icon" viewBox="0 0 1024 1024"
-                   version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6241" width="22" height="22">
-                <path
-                    d="M661.333333 234.666667A64 64 0 0 1 725.333333 298.666667v597.333333a64 64 0 0 1-64 64h-469.333333A64 64 0 0 1 128 896V298.666667a64 64 0 0 1 64-64z m-21.333333 85.333333H213.333333v554.666667h426.666667v-554.666667z m191.829333-256a64 64 0 0 1 63.744 57.856l0.256 6.144v575.701333a42.666667 42.666667 0 0 1-85.034666 4.992l-0.298667-4.992V149.333333H384a42.666667 42.666667 0 0 1-42.368-37.674666L341.333333 106.666667a42.666667 42.666667 0 0 1 37.674667-42.368L384 64h447.829333z"
-                    fill="#909399" p-id="6242"></path>
-              </svg>
-            </el-col>
-            <el-col :span="21">
-            </el-col>
-          </el-row>
-
+          <icon-copy @click="$copy(item.msg, '已复制')"/>
           <markdown-it-vue :content="item.msg.trim()"/>
         </div>
         <div class="chat-img" v-if="item.chatType == 1">
@@ -36,18 +24,7 @@
       </div>
       <div class="chat-me" v-else>
         <div class="chat-text" v-if="item.chatType == 0">
-          <span style="font-size:16px">{{ item.msg }}</span>
-        </div>
-        <div class="chat-img" v-if="item.chatType == 1">
-          <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
-          <el-image style="max-width: 300px; border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList"
-                    v-else>
-          </el-image>
-        </div>
-        <div class="chat-img" v-if="item.chatType == 2">
-          <div class="word-file">
-            <FileCard :fileType="item.extend.fileType" :file="item.msg"></FileCard>
-          </div>
+          <span v-text="item.msg"/>
         </div>
         <div class="info-time">
           <span>{{ item.name }}</span>
@@ -60,12 +37,13 @@
 </template>
 
 <script>
+import IconCopy from "../icons/iconCopy";
+
 export default {
   name: "chatContent",
-  data() {
-    return {
-      list:[]
-    }
+  components: {IconCopy},
+  props: {
+    list: {default: () => []}
   },
   methods: {
     onScroll() {
@@ -90,5 +68,125 @@ export default {
   padding: 16px;
   box-sizing: border-box;
   overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    /* 设置滚动条宽度 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(66, 70, 86);
+    /* 设置滚动条滑块的背景色 */
+    border-radius: 50%;
+    /* 设置滑块的圆角 */
+  }
+
+  .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-text {
+      float: left;
+      padding: 15px;
+      max-width: max(650px, 90%);
+      border-radius: 4px;
+      background-color: #fff;
+    }
+
+    .chat-img {
+      img {
+        max-width: 300px;
+        max-height: 200px;
+        border-radius: 4px;
+      }
+    }
+
+    .info-time {
+      margin: 10px 0;
+      color: #fff;
+      font-size: 14px;
+      display: flex;
+      justify-content: flex-start;
+
+      img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+
+      span {
+        line-height: 30px;
+      }
+
+      span:last-child {
+        color: rgb(101, 104, 115);
+        margin-left: 10px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .chat-me {
+    width: 100%;
+    float: right;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+
+    .chat-text {
+      float: right;
+      max-width: 90%;
+      padding: 15px;
+      border-radius: 4px;
+      background-color: #95ec69;
+      color: #000;
+      word-break: break-all;
+    }
+
+    .chat-img {
+      img {
+        max-width: 300px;
+        max-height: 200px;
+        border-radius: 4px;
+      }
+    }
+
+    .info-time {
+      margin: 10px 0;
+      color: #fff;
+      font-size: 14px;
+      display: flex;
+      justify-content: flex-end;
+
+      img {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        vertical-align: middle;
+        margin-left: 10px;
+      }
+
+      span {
+        line-height: 30px;
+      }
+
+      span:first-child {
+        color: rgb(101, 104, 115);
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+    }
+  }
 }
 </style>