Browse Source

feat(Message): 优化消息组件显示

- 增加消息列表项头像显示
- 优化消息标题和内容显示,使用`el-tooltip`提供悬停提示
- 调整消息列表项样式,增加间距
- 优化时间显示,使用`formatTimeSecond`函数显示相对时间
- 移除未使用的`import`语句
luoyali 9 months ago
parent
commit
2cb849a851
2 changed files with 51 additions and 19 deletions
  1. 30 18
      src/layout/components/Header/components/Message.vue
  2. 21 1
      src/utils/datetime.ts

+ 30 - 18
src/layout/components/Header/components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-popover placement="bottom" :width="310" trigger="click">
+	<el-popover placement="bottom" :width="320" popper-style="padding: 12px;" trigger="click">
 		<template #reference>
 			<div class="menu--message-trigger">
 				<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
@@ -11,19 +11,30 @@
 				</el-tooltip>
 			</div>
 		</template>
-		<el-tabs class="message-tabs" v-model="activeTab">
+
+		<el-tabs v-model="activeTab" class="message-tabs">
 			<el-tab-pane v-for="v of tabsConfig" :key="v.name" :name="v.name">
 				<template #label> {{ v.label }}({{ v.list.length }}) </template>
 				<template v-if="v.list.length">
 					<div class="message-list">
 						<div v-for="item of v.list" :key="item.id" class="message-item" @click="jumpMessageDetail(item.id)">
-							<!--<img src="" alt="" class="message-icon" />-->
-							<div class="message-content">
+							<div>
+								<el-avatar :style="{ backgroundColor: 'var(--el-color-primary)', color: 'var(--el-color-white)' }">
+									<span style="transform: scale(0.8)">
+										{{ item.createBy }}
+									</span>
+								</el-avatar>
+							</div>
+							<div class="message-content ml-2">
 								<div class="message-title">
-									<span class="txt text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
-									<span class="message-date">{{ item.createTime }}</span>
+									<el-tooltip :content="item.title" placement="top">
+										<span class="w-[160px] text-[16px] font-[600] sm:w-[180px] text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
+									</el-tooltip>
+									<span class="message-date">{{ formatTimeSecond(item.createTime) }}</span>
 								</div>
-								<span class="message-txt">{{ item.content }}</span>
+								<el-tooltip :content="item.content" placement="top">
+									<span class="message-txt w-[220px] sm:w-[240px] text-overflow_ellipsis">{{ item.content }}</span>
+								</el-tooltip>
 							</div>
 						</div>
 						<div class="message-fix-item" @click="jumpMessageInfo">查看更多</div>
@@ -38,11 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import message from '@/api/system/message'
 import router from '@/router'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { ls } from '@/utils'
+import { formatTimeSecond } from '@/utils/datetime'
 import { ElNotification } from 'element-plus'
 const token = ls.get('token')
 const { VITE_APP_BASE_API } = import.meta.env
@@ -72,17 +84,17 @@ const total = ref(0)
 
 const getMessage = () => {
 	message.getMessage().then(res => {
-	let _total = 0
-	Object.keys(tabsConfig).map(key => {
-		if (res[key]) {
-			tabsConfig[key].list = res[key]
-			_total += res[key].length
-		} else {
-			res[key].list = []
-		}
+		let _total = 0
+		Object.keys(tabsConfig).map(key => {
+			if (res[key]) {
+				tabsConfig[key].list = res[key]
+				_total += res[key].length
+			} else {
+				res[key].list = []
+			}
+		})
+		total.value = _total
 	})
-	total.value = _total
-})
 }
 
 const jumpMessageInfo = () => {

+ 21 - 1
src/utils/datetime.ts

@@ -59,4 +59,24 @@ const getWeek = (week: number): string => {
 	}
 }
 
-export { formatTimestamp, getWeek }
+const formatTimeSecond = (time: number) => {
+	if (!time) { return '' }
+	const now = new Date()
+	const past = new Date(time)
+	const diff = Math.floor((now.getTime() - past.getTime()) / 1000)
+	if (diff < 60) {
+		return `${diff}秒前`
+	} else if (diff < 3600) {
+		return `${Math.floor(diff / 60)}分钟前`
+	} else if (diff < 86400) {
+		return `${Math.floor(diff / 3600)}小时前`
+	} else if (diff < 2592000) { // 30天
+		return `${Math.floor(diff / 86400)}天前`
+	} else if (diff < 31536000) { // 365天
+		return `${Math.floor(diff / 2592000)}月前`
+	} else {
+		return `${Math.floor(diff / 31536000)}年前`
+	}
+}
+
+export { formatTimestamp, getWeek, formatTimeSecond }