优化通知公告实时显示

Web/src/layout/navBars/breadcrumb/user.vue

@@ -76,7 +76,7 @@
 <script lang="ts">
 import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent } from 'vue';
 import { useRouter } from 'vue-router';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
 import screenfull from 'screenfull';
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
@@ -248,7 +248,14 @@ export default defineComponent({
 			proxy.signalR.on('PublicNotice', reciveNotice);
 		});
 		const reciveNotice = (msg: any) => {
-			state.noticeList.push(msg);
+			state.noticeList.unshift(msg);
+
+			ElNotification({
+				title: '提示',
+				message: '您有一条新消息...',
+				type: 'info',
+				position: 'bottom-right',
+			});
 		};
 		return {
 			userInfos,

Web/src/layout/navBars/breadcrumb/userNews.vue

@@ -8,7 +8,7 @@
 				</template>
 				<div class="notice-box">
 					<template v-if="noticeList.length > 0">
-						<div class="notice-item" v-for="(v, k) in noticeList" :key="k" @click="viewNoticeDetail(v)">
+						<div class="notice-item" v-for="(v, k) in noticeList" :key="k" @click="viewNoticeDetail(v)" v-show="v.readStatus == 1 ? false : true">
 							<div class="notice-title">{{ v.type == 1 ? '【通知】' : '【公告】' }}{{ v.title }}</div>
 							<div class="notice-msg">{{ v.content }}</div>
 							<div class="notice-time">{{ v.publicTime }}</div>
@@ -63,6 +63,7 @@ const viewNoticeDetail = async (notice: any) => {
 	state.dialogVisible = true;
 
 	// 设置已读
+	notice.readStatus = 1;
 	await getAPI(SysNoticeApi).sysNoticeSetReadPost({ id: notice.id });
 };
 </script>

Web/src/views/system/notice/index.vue

@@ -33,7 +33,7 @@
 				<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
 				<el-table-column prop="status" label="状态" width="100" align="center" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.status === 1"> 已发布 </el-tag>
+						<el-tag type="info" v-if="scope.row.status === 1"> 已发布 </el-tag>
 						<el-tag type="warning" v-else> 未发布 </el-tag>
 					</template>
 				</el-table-column>