更新

src/components/base/Avatar.vue

@@ -23,9 +23,8 @@ defineProps({
 </script>
 
 <template>
-  <n-avatar v-if="src.length" round :src="src" :size="size" :fallback-src="defAvatar" />
-
-  <n-avatar
+  <tm-image :width="80" :height="80" :round="12" :src="src"></tm-image>
+  <!-- <n-avatar
     v-else
     round
     :style="{
@@ -36,6 +35,6 @@ defineProps({
     :size="size"
   >
     {{ username && username.substring(0, 1) }}
-  </n-avatar>
+  </n-avatar> -->
 </template>
 <style lang="less" scoped></style>

src/components/talk/message/TextMessage.vue

@@ -41,19 +41,19 @@ textContent = textReplaceEmoji(textContent)
 .im-message-text {
   min-width: 30px;
   min-height: 30px;
-  padding: 3px;
-  color: var(--im-message-left-text-color);
-  background: var(--im-message-left-bg-color);
+  padding: 22rpx 30rpx;
+  color: #1A1A1A;
+  background: #FFFFFF;
   border-radius: 0px 10px 10px 10px;
 
   &.right {
-    background-color: var(--im-message-right-bg-color);
-    color: var(--im-message-right-text-color);
+    background-color: #46299D;
+    color: #FFFFFF;
     border-radius: 10px 0px 10px 10px;
   }
 
   &.maxwidth {
-    max-width: 70%;
+    max-width: 486rpx;
   }
 
   &.radius-reset {
@@ -65,14 +65,15 @@ textContent = textReplaceEmoji(textContent)
     overflow: hidden;
     word-break: break-word;
     word-wrap: break-word;
-    font-size: 14px;
-    padding: 3px 5px;
+    font-size: 32rpx;
     font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
-    line-height: 25px;
+    line-height: 44rpx;
 
     :deep(.emoji) {
       vertical-align: text-bottom;
-      margin: 0 5px;
+      margin: 0 10rpx;
+      width: 44rpx;
+      height: 44rpx;
     }
 
     :deep(a) {

src/pages/dialog/index.vue

@@ -1,58 +1,102 @@
 <template>
   <div class="outer-layer">
     <div>
-      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220" >
-        <div class="flex flex-col items-center justify-center" >
-          <div class="text-[34rpx] font-bold" >{{ talkParams.username }}</div>
-          <div v-if="true" class="text-[24rpx] text-[#999999]" >公司群</div>
+      <tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
+        <div class="flex flex-col items-center justify-center">
+          <div class="text-[34rpx] font-bold">{{ talkParams.username }}</div>
+          <div v-if="true" class="text-[24rpx] text-[#999999]">公司群</div>
         </div>
         <template v-slot:right>
           <div class="mr-[36rpx]">
             <tm-icon color="rgb(51, 51, 51)" :font-size="36" name="tmicon-gengduo"></tm-icon>
           </div>
-			</template>
+        </template>
       </tm-navbar>
     </div>
     <div class="root">
-      <div class="dialogBox" >
+      <div class="dialogBox">
         <!-- <div v-if="loadConfig.status == 0" class="h-[240rpx] flex items-center justify-center flex-col" >
           <wd-loading />
           <div class="text-[#959598] mt-[20rpx] text-[28rpx]" > 正在加载中... </div>
         </div>
         <div v-else-if="loadConfig.status == 1"  @click="onRefreshLoad" >查看更多消息 ...</div>
         <span v-else class="no-more"> 没有更多消息了 </span> -->
-        <div
-          class="message-item"
-          v-for="(item, index) in records"
-          :key="item.msg_id"
-          :id="item.msg_id"
-        >
+        <!-- 数据加载状态栏 -->
+        <div class="load-toolbar pointer">
+          <span v-if="loadConfig.status == 0"> 正在加载数据中 ... </span>
+          <span v-else-if="loadConfig.status == 1" @click="onRefreshLoad"> 查看更多消息 ... </span>
+          <span v-else class="no-more"> 没有更多消息了 </span>
+        </div>
+        <div class="message-item" v-for="(item, index) in records" :key="item.msg_id" :id="item.msg_id">
           <!-- 系统消息 -->
           <div v-if="item.msg_type >= 1000" class="message-box">
-            <component
-              :is="MessageComponents[item.msg_type] || 'unknown-message'"
-              :extra="item.extra"
-              :data="item"
-            />
+            <component :is="MessageComponents[item.msg_type] || 'unknown-message'" :extra="item.extra" :data="item" />
           </div>
           <!-- 撤回消息 -->
-        <div v-else-if="item.is_revoke == 1" class="message-box">
-          <revoke-message
-            :login_uid="uid"
-            :user_id="item.user_id"
-            :nickname="item.nickname"
-            :talk_type="item.talk_type"
-            :datetime="item.created_at"
-          />
-        </div>
+          <div v-else-if="item.is_revoke == 1" class="message-box">
+            <revoke-message :login_uid="uid" :user_id="item.user_id" :nickname="item.nickname"
+              :talk_type="item.talk_type" :datetime="item.created_at" />
+          </div>
+
+          <div v-else class="message-box record-box" :class="{
+            'direction-rt': item.float == 'right',
+            'multi-select': dialogueStore.isOpenMultiSelect,
+            'multi-select-check': item.isCheck
+          }">
+            <!-- 多选按钮 -->
+            <aside v-if="dialogueStore.isOpenMultiSelect" class="checkbox-column">
+              <n-checkbox size="small" :checked="item.isCheck" @update:checked="item.isCheck = !item.isCheck" />
+            </aside>
+
+            <!-- 头像信息 -->
+            <aside class="avatar-column">
+              <im-avatar class="pointer" :src="item.avatar" :size="80" :username="item.nickname"
+                @click="showUserInfoModal(item.user_id)" />
+            </aside>
+
+            <!-- 主体信息 -->
+            <main class="main-column">
+              <div class="talk-title">
+                <span class="nickname pointer" v-show="talk_type == 2 && item.float == 'left'"
+                  @click="onClickNickname(item)">
+                  <span class="at">@</span>{{ item.nickname }}
+                </span>
+                <span>{{ parseTime(item.created_at, '{m}/{d} {h}:{i}') }}</span>
+              </div>
+
+              <div class="talk-content" :class="{ pointer: dialogueStore.isOpenMultiSelect }" @click="onRowClick(item)">
+                <component :is="MessageComponents[item.msg_type] || 'unknown-message'" :extra="item.extra" :data="item"
+                  :max-width="true" :source="'panel'" @contextmenu.prevent="onContextMenu($event, item)" />
+
+                <div class="talk-tools">
+                  <template v-if="talk_type == 1 && item.float == 'right'">
+                    <loading theme="outline" size="19" fill="#000" :strokeWidth="1" class="icon-rotate"
+                      v-show="item.send_status == 1" />
+
+                    <span v-show="item.send_status == 1"> 正在发送... </span>
+                    <!-- <span v-show="item.send_status != 1"> 已送达 </span> -->
+                  </template>
+
+                </div>
+              </div>
+
+              <div v-if="item.extra.reply" class="talk-reply pointer" @click="onJumpMessage(item.extra?.reply?.msg_id)">
+                <n-icon :component="ToTop" size="14" class="icon-top" />
+                <span class="ellipsis">
+                  回复 {{ item.extra?.reply?.nickname }}:
+                  {{ item.extra?.reply?.content }}
+                </span>
+              </div>
+            </main>
+          </div>
 
         </div>
       </div>
     </div>
-    <div class="footBox" >
-      <div class="mt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between" >
-        <div class="w-[534rpx]" >
-          <tm-input :height="72" placeholder=""    ></tm-input>
+    <div class="footBox">
+      <div class="mt-[16rpx] ml-[32rpx] mr-[32rpx] flex items-center justify-between">
+        <div class="w-[534rpx]">
+          <tm-input :height="72" placeholder=""></tm-input>
         </div>
         <tm-image :width="52" :height="52" :round="12" :src="smile"></tm-image>
         <tm-image :width="52" :height="52" :round="12" :src="addCircleGray"></tm-image>
@@ -61,12 +105,13 @@
   </div>
 </template>
 <script setup>
-import { ref,reactive,watch,computed,onMounted } from 'vue';
+import { ref, reactive, watch, computed, onMounted } from 'vue';
 import { useChatList } from "@/store/chatList/index.js";
-import {useAuth} from "@/store/auth";
+import { useAuth } from "@/store/auth";
 import { useUserStore, useDialogueStore, useUploadsStore } from '@/store'
 import addCircleGray from "@/static/image/chatList/addCircleGray.png";
 import { MessageComponents, ForwardableMessageType } from '@/constant/message'
+import { formatTime, parseTime } from '@/utils/datetime'
 import smile from "@/static/image/chatList/smile@2x.png";
 import { useInject, useTalkRecord } from '@/hooks'
 
@@ -88,7 +133,7 @@ const { loadConfig, records, onLoad, onRefreshLoad, onJumpMessage } = useTalkRec
 watch(() => records, (newValue, oldValue) => {
   console.log(newValue);
 
-},{deep:true,immediate:true})
+}, { deep: true, immediate: true })
 
 watch(() => talkParams.uid, (newValue, oldValue) => {
   let objT = {
@@ -98,7 +143,7 @@ watch(() => talkParams.uid, (newValue, oldValue) => {
     index_name: talkParams.index_name
   }
   onLoad({ ...objT, limit: 30 })
-},{immediate:true})
+}, { immediate: true })
 
 onMounted(() => {
   let objT = {
@@ -111,7 +156,7 @@ onMounted(() => {
 })
 
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .outer-layer {
   overflow-y: auto;
   flex: 1;
@@ -120,24 +165,231 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
 }
+
 .root {
   flex: 1;
   padding: 20rpx 32rpx;
 }
+
 .searchRoot {
   background-color: #fff;
   padding: 22rpx 18rpx;
 }
+
 .contentRoot {
   margin-top: 20rpx;
   background-color: #fff;
 }
+
 .footBox {
   height: 162rpx;
   background-color: #fff;
 }
-.dialogBox{
+
+.dialogBox {
   height: 100%;
 }
 
+.load-toolbar {
+  height: 38px;
+  color: #409eff;
+  text-align: center;
+  line-height: 38px;
+  font-size: 13px;
+
+  .no-more {
+    color: #b9b3b3;
+  }
+}
+
+.message-item {
+  &.border {
+    border-radius: 10px;
+    border: 1px solid var(--im-primary-color);
+  }
+}
+
+.message-box {
+  width: 100%;
+  min-height: 30px;
+  margin-bottom: 5px;
+}
+
+.datetime {
+  height: 30px;
+  line-height: 30px;
+  color: #ccc9c9;
+  font-size: 12px;
+  text-align: center;
+  margin: 5px 0;
+}
+
+.record-box {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  .checkbox-column {
+    display: flex;
+    justify-content: center;
+    width: 35px;
+    order: 1;
+    user-select: none;
+    padding-top: 12px;
+  }
+
+  .avatar-column {
+    width: 80rpx;
+    display: flex;
+    align-items: center;
+    order: 2;
+    user-select: none;
+    margin-top: 16rpx;
+    flex-direction: column;
+  }
+
+  .main-column {
+    flex: 1 auto;
+    order: 3;
+    position: relative;
+    box-sizing: border-box;
+    padding: 16rpx 20rpx 14rpx 20rpx;
+    overflow: hidden;
+    min-height: 30px;
+
+    .talk-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 6rpx;
+      font-size: 24rpx;
+      user-select: none;
+      color: #BABABA;
+      opacity: 1;
+
+      &.show {
+        opacity: 1;
+      }
+
+      .nickname {
+        color: var(--im-text-color);
+        margin-right: 5px;
+
+        .at {
+          display: none;
+        }
+
+        &:hover {
+          color: var(--im-primary-color);
+
+          .at {
+            display: inline-block;
+          }
+        }
+      }
+
+      span {
+        transform: scale(0.88);
+        transform-origin: left center;
+      }
+    }
+
+    .talk-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-end;
+
+      box-sizing: border-box;
+      width: 100%;
+
+      .talk-tools {
+        display: flex;
+        margin: 0 8px;
+        color: #a79e9e;
+        font-size: 12px;
+        user-select: none;
+        align-items: center;
+        justify-content: space-around;
+
+        .more-tools {
+          visibility: hidden;
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .talk-reply {
+      display: flex;
+      align-items: flex-start;
+      align-items: center;
+      width: fit-content;
+      padding: 4px;
+      margin-top: 3px;
+      margin-right: auto;
+      font-size: 12px;
+      color: #8f8f8f;
+      word-break: break-all;
+      background-color: var(--im-message-left-bg-color);
+      border-radius: 5px;
+      max-width: 300px;
+      overflow: hidden;
+      user-select: none;
+
+      .icon-top {
+        margin-right: 3px;
+      }
+
+      .ellipsis {
+        display: -webkit-inline-box;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    &:hover {
+      .talk-title {
+        opacity: 1;
+      }
+
+      .more-tools {
+        visibility: visible !important;
+      }
+    }
+  }
+
+  &.direction-rt {
+    .avatar-column {
+      order: 3;
+    }
+
+    .main-column {
+      order: 2;
+
+      .talk-title {
+        justify-content: flex-end;
+
+        span {
+          transform-origin: right center;
+        }
+      }
+
+      .talk-content {
+        flex-direction: row-reverse;
+      }
+
+      .talk-reply {
+        margin-right: 0;
+        margin-left: auto;
+      }
+    }
+  }
+
+  &.multi-select {
+    border-radius: 5px;
+
+    &:hover,
+    &.multi-select-check {
+      background-color: var(--im-active-bg-color);
+    }
+  }
+}
 </style>