聊天窗口的messagebox基本布局

src/components/message/MessageItem.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed } from 'vue'
+import { msgType } from '@/const/msgConst'
+import { userStore } from '@/stores'
+import { messageShowTime } from '@/utils/common'
+
+const props = defineProps(['type', 'objectInfo', 'content'])
+
+const userData = userStore()
+
+const isSelf = computed(() => {
+  return userData.user.account === props.objectInfo.account
+})
+
+const showTime = computed(() => {
+  const now = new Date()
+  const oneDayAgo = new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000)
+  return messageShowTime(oneDayAgo)
+})
+</script>
+
+<template>
+  <div v-if="props.type === msgType.NO_MORE_MSG" class="no-more-message">
+    <span>当前无更多消息</span>
+  </div>
+  <div v-if="props.type === msgType.USER_MSG" class="user-message">
+    <span class="datetime">{{ showTime }}</span>
+    <div>
+      <el-container v-if="isSelf">
+        <el-main>Main</el-main>
+        <el-aside width="30px">Aside</el-aside>
+      </el-container>
+      <el-container v-else>
+        <el-aside width="30px">Aside</el-aside>
+        <el-main>Main</el-main>
+      </el-container>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.no-more-message {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: gray;
+}
+
+.user-message {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .datetime {
+    // height: 30px;
+    border-radius: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-size: 14px;
+    background-color: #c8c9cc;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.el-container {
+  width: 100%;
+  display: flex;
+}
+</style>

src/components/message/SessionBox.vue

@@ -4,6 +4,7 @@ import AvatarIcon from './AvatarIcon.vue'
 import SessionTag from './SessionTag.vue'
 import UserCard from '../user/UserCard.vue'
 import GroupCard from '../group/GroupCard.vue'
+import { sessionShowTime } from '@/utils/common'
 import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue'
 
 const props = defineProps(['sessionId', 'sessionType', 'objectInfo'])
@@ -53,6 +54,12 @@ const showAvatarThumb = computed(() => {
   }
 })
 
+const showTime = computed(() => {
+  const now = new Date()
+  const oneDayAgo = new Date(now.getTime() - 0 * 24 * 60 * 60 * 1000)
+  return sessionShowTime(oneDayAgo)
+})
+
 const handleUserCard = (flag) => {
   isShowUserCard.value = flag
 }
@@ -93,7 +100,7 @@ const showSomeoneCard = () => {
           <SessionTag v-if="isMute" tagType="mute"></SessionTag>
         </div>
         <div class="datetime">
-          <span>15:10</span>
+          <span>{{ showTime }}</span>
         </div>
       </div>
       <div class="body">
@@ -185,11 +192,12 @@ const showSomeoneCard = () => {
       }
 
       .datetime {
-        display: block;
-        margin-left: 10px;
-        width: 40px;
+        width: 52px;
         font-size: 12px;
+        margin-right: 5px;
         color: gray;
+        display: flex;
+        justify-content: flex-end;
       }
     }
 

src/const/msgConst.js

@@ -0,0 +1,4 @@
+export const msgType = {
+  NO_MORE_MSG: 1,
+  USER_MSG: 2
+}

src/utils/common.js

@@ -46,3 +46,84 @@ export const generateClientId = () => {
   }
   return clientId
 }
+
+export const sessionShowTime = (datetime) => {
+  const now = new Date()
+  const inputDate = new Date(datetime)
+
+  const isToday =
+    now.getDate() === inputDate.getDate() &&
+    now.getMonth() === inputDate.getMonth() &&
+    now.getFullYear() === inputDate.getFullYear()
+
+  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+  const isYesterday =
+    yesterday.getDate() === inputDate.getDate() &&
+    yesterday.getMonth() === inputDate.getMonth() &&
+    yesterday.getFullYear() === inputDate.getFullYear()
+
+  const dayBeforeYesterday = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000)
+  const isDayBeforeYesterday =
+    dayBeforeYesterday.getDate() === inputDate.getDate() &&
+    dayBeforeYesterday.getMonth() === inputDate.getMonth() &&
+    dayBeforeYesterday.getFullYear() === inputDate.getFullYear()
+
+  if (isToday) {
+    const hours = inputDate.getHours().toString().padStart(2, '0')
+    const minutes = inputDate.getMinutes().toString().padStart(2, '0')
+    return `${hours}:${minutes}`
+  } else if (isYesterday) {
+    return '昨天'
+  } else if (isDayBeforeYesterday) {
+    return '前天'
+  } else {
+    const year = inputDate.getFullYear() % 100
+    let month = inputDate.getMonth() + 1
+    let day = inputDate.getDate()
+    day = day < 10 ? day.toString() : day
+    return `${year}/${month}/${day}`
+  }
+}
+
+export const messageShowTime = (datetime) => {
+  const now = new Date()
+  const inputDate = new Date(datetime)
+
+  const isToday =
+    now.getDate() === inputDate.getDate() &&
+    now.getMonth() === inputDate.getMonth() &&
+    now.getFullYear() === inputDate.getFullYear()
+
+  const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+  const isYesterday =
+    yesterday.getDate() === inputDate.getDate() &&
+    yesterday.getMonth() === inputDate.getMonth() &&
+    yesterday.getFullYear() === inputDate.getFullYear()
+
+  const dayBeforeYesterday = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000)
+  const isDayBeforeYesterday =
+    dayBeforeYesterday.getDate() === inputDate.getDate() &&
+    dayBeforeYesterday.getMonth() === inputDate.getMonth() &&
+    dayBeforeYesterday.getFullYear() === inputDate.getFullYear()
+
+  if (isToday) {
+    const hours = inputDate.getHours().toString().padStart(2, '0')
+    const minutes = inputDate.getMinutes().toString().padStart(2, '0')
+    return `${hours}:${minutes}`
+  } else if (isYesterday) {
+    const hours = inputDate.getHours().toString().padStart(2, '0')
+    const minutes = inputDate.getMinutes().toString().padStart(2, '0')
+    return `昨天 ${hours}:${minutes}`
+  } else if (isDayBeforeYesterday) {
+    const hours = inputDate.getHours().toString().padStart(2, '0')
+    const minutes = inputDate.getMinutes().toString().padStart(2, '0')
+    return `前天 ${hours}:${minutes}`
+  } else {
+    const year = inputDate.getFullYear()
+    const month = inputDate.getMonth() + 1
+    const day = inputDate.getDate()
+    const hours = inputDate.getHours().toString().padStart(2, '0')
+    const minutes = inputDate.getMinutes().toString().padStart(2, '0')
+    return `${year}年${month}月${day}日 ${hours}:${minutes}`
+  }
+}

src/views/message/MessageLayout.vue

@@ -20,9 +20,11 @@ import AddBotton from '@/components/common/AddBotton.vue'
 import SessionBox from '@/components/message/SessionBox.vue'
 import InputTool from '@/components/message/InputTool.vue'
 import InputEditor from '@/components/message/InputEditor.vue'
+import MessageItem from '@/components/message/MessageItem.vue'
 import { userStore, settingStore, messageStore } from '@/stores'
 import backgroupImage from '@/assets/messagebx_bg.webp'
 import { msgChatSessionListService } from '@/api/message'
+import { msgType } from '@/const/msgConst'
 
 const userData = userStore()
 const settingData = settingStore()
@@ -41,6 +43,12 @@ const curSessionType = ref('')
 const curObject = ref({})
 const sessionList = ref([])
 
+const isShowTopLoading = ref(false)
+const isTopLoading = ref(false)
+const loadMoreTips = ref('查看更多消息')
+const loadCursor = computed(() => {
+  return isTopLoading.value ? 'auto' : 'pointer'
+})
 
 onMounted(async () => {
   curSessionId.value = messageData.lastSessionId
@@ -102,6 +110,11 @@ const handleExportData = (data) => {
   messageData.setLastObject(data.objectInfo)
 }
 
+const onLoadMore = () => {
+  isTopLoading.value = true
+  loadMoreTips.value = ''
+}
+
 </script>
 
 <template>
@@ -158,7 +171,24 @@ const handleExportData = (data) => {
           </div>
         </el-header>
         <el-main class="body">
-          <div class="show-box"></div>
+          <div class="show-box">
+            <div v-if="isShowTopLoading" class="top-loading">
+              <div
+                v-loading="isTopLoading"
+                :fullscreen="false"
+                class="loading-box"
+                @click="onLoadMore"
+                :style="{ cursor: loadCursor }"
+              >
+                {{ loadMoreTips }}
+              </div>
+            </div>
+            <div class="message-main">
+              <MessageItem :type="msgType.NO_MORE_MSG"></MessageItem>
+              <MessageItem :type="msgType.USER_MSG" :objectInfo="curObject"></MessageItem>
+              <MessageItem></MessageItem>
+            </div>
+          </div>
           <div class="input-box bdr-t" :style="{ height: inputBoxHeight + 'px' }">
             <el-container class="input-box-container">
               <el-header class="input-box-header">
@@ -302,6 +332,35 @@ const handleExportData = (data) => {
         .show-box {
           width: 100%;
           flex: 1;
+          position: relative;
+
+          .top-loading {
+            width: 100%;
+            height: 30px;
+            position: absolute;
+            top: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .loading-box {
+              color: #409eff;
+              font-size: 14px;
+            }
+          }
+
+          :deep(.circular) {
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: 12px;
+            left: -12px;
+          }
+
+          .message-main {
+            width: 100%;
+            height: 100%;
+          }
         }
 
         .input-box {