【更新】更新消息通知功能细节

snowy-admin-web/src/api/sys/indexApi.js

@@ -40,7 +40,7 @@ export default {
 	},
 	//站内信全部标记已读
 	indexMessageAllMarkRead(data) {
-		return request('message/allMessageMarkRead', data, 'get')
+		return request('message/allMessageMarkRead', data)
 	},
 	// 获取当前用户访问日志列表
 	indexVisLogList(data) {

snowy-admin-web/src/layout/components/message.vue

@@ -3,7 +3,7 @@
 		<a-badge :count="unreadMessageNum" class="badge">
 			<comment-outlined />
 		</a-badge>
-		<a-drawer v-model:visible="msgVisible" title="新消息" placement="right">
+		<a-drawer v-model:visible="msgVisible" title="新消息" placement="right" :width="500">
 			<a-list :data-source="messageList" size="small" class="mb-3" :loading="miniMessageLoading">
 				<template #renderItem="{ item }">
 					<a-list-item>
@@ -15,58 +15,59 @@
 					</a-list-item>
 				</template>
 			</a-list>
-			<a-space>
+			<a-space style="float: right">
+				<a-button v-if="unreadMessageNum > 0" @click="markRead">全部设为已读</a-button>
 				<a-button type="primary" @click="leaveFor('/usercenter')">消息中心</a-button>
-				<a-button @click="markRead">全部设为已读</a-button>
 			</a-space>
 		</a-drawer>
-	</div>
-	<xn-form-container
-		title="详情"
-		:width="700"
-		:visible="visible"
-		:destroy-on-close="true"
-		@close="onClose"
-	>
-		<a-form ref="formRef" :model="formData" layout="vertical">
-			<a-form-item label="主题：" name="subject">
-				<span>{{ formData.subject }}</span>
-			</a-form-item>
-			<a-form-item label="发送时间：" name="createTime">
-				<span>{{ formData.createTime }}</span>
-			</a-form-item>
-			<a-form-item label="内容：" name="content">
-				<span>{{ formData.content }}</span>
-			</a-form-item>
-			<a-form-item label="查收情况：" name="receiveInfoList">
-				<s-table
-					ref="table"
-					:columns="columns"
-					:data="loadData"
-					:alert="false"
-					:showPagination="false"
-					bordered
-					:row-key="(record) => record.id"
-				>
-					<template #bodyCell="{ column, record }">
-						<template v-if="column.dataIndex === 'read'">
-							<span v-if="record.read" style="color: #d9d9d9">已读</span>
-							<span v-else style="color: #ff4d4f">未读</span>
+		<xn-form-container
+			title="详情"
+			:width="700"
+			:visible="visible"
+			:destroy-on-close="true"
+			@close="onClose"
+		>
+			<a-form ref="formRef" :model="formData" layout="vertical">
+				<a-form-item label="主题：" name="subject">
+					<span>{{ formData.subject }}</span>
+				</a-form-item>
+				<a-form-item label="发送时间：" name="createTime">
+					<span>{{ formData.createTime }}</span>
+				</a-form-item>
+				<a-form-item label="内容：" name="content">
+					<span>{{ formData.content }}</span>
+				</a-form-item>
+				<a-form-item label="查收情况：" name="receiveInfoList">
+					<s-table
+						ref="table"
+						:columns="columns"
+						:data="loadData"
+						:alert="false"
+						:showPagination="false"
+						bordered
+						:row-key="(record) => record.id"
+					>
+						<template #bodyCell="{ column, record }">
+							<template v-if="column.dataIndex === 'read'">
+								<span v-if="record.read" style="color: #d9d9d9">已读</span>
+								<span v-else style="color: #ff4d4f">未读</span>
+							</template>
 						</template>
-					</template>
-				</s-table>
-			</a-form-item>
-		</a-form>
-	</xn-form-container>
+					</s-table>
+				</a-form-item>
+			</a-form>
+		</xn-form-container>
+	</div>
 </template>
 
 <script setup name="devUserMessage">
 	import indexApi from '@/api/sys/indexApi'
+	import { message } from 'ant-design-vue'
 	import router from '@/router'
-	import {onMounted} from "vue";
-	import sysConfig from "@/config";
-	import { EventSourcePolyfill } from "event-source-polyfill";
-	import tool from "@/utils/tool";
+	import { onMounted } from 'vue'
+	import sysConfig from '@/config'
+	import { EventSourcePolyfill } from 'event-source-polyfill'
+	import tool from '@/utils/tool'
 
 	const miniMessageLoading = ref(false)
 	const msgVisible = ref(false)
@@ -80,41 +81,31 @@
 	// 创建sse连接
 	const createSseConnect = () => {
 		if (window.EventSource) {
-			let clientId = tool.data.get("CLIENTID") ? tool.data.get("CLIENTID") : "";
-			let url = sysConfig.API_URL+'/dev/message/createSseConnect?clientId='+clientId;
-			//heartbeatTimeout:心跳超时监测 30s
-			let source = new EventSourcePolyfill(url,{headers: {token: tool.data.get('TOKEN')},heartbeatTimeout: 30000})
+			let clientId = tool.data.get('CLIENTID') ? tool.data.get('CLIENTID') : ''
+			let url = sysConfig.API_URL + '/dev/message/createSseConnect?clientId=' + clientId
+			// heartbeatTimeout:心跳超时监测 30s
+			let source = new EventSourcePolyfill(url, { headers: { token: tool.data.get('TOKEN') }, heartbeatTimeout: 30000 })
 			// 监听打开事件
-			source.addEventListener('open', (e) => {
-				//console.log("设备连接成功",e)
-			})
-
+			source.addEventListener('open', (e) => {})
 			// 监听消息事件
-			source.addEventListener("message", (e) => {
+			source.addEventListener('message', (e) => {
 				const result = JSON.parse(e.data)
 				const code = result.code
-				const msg = result.msg
 				const data = result.data
-
 				if (code === 200) {
-					console.log("see推送消息:",data)
-					unreadMessageNum.value = data;
+					unreadMessageNum.value = data
 				} else if (code === 0) {
 					// 初次建立连接，客户端id储存本地
-					tool.data.set("CLIENTID", data)
-					console.log("客户端id:",data)
+					tool.data.set('CLIENTID', data)
 				}
-
 			})
-
 			// 监听错误事件
-			source.addEventListener("error", (e) => {
-				console.log("发生错误，已断开与服务器的连接:",e)
-				source.close();
+			source.addEventListener('error', (e) => {
+				console.error('发生错误，消息事实获取已断开与服务器的连接')
+				source.close()
 			})
-
 		} else {
-			console.log("该浏览器不支持sse")
+			message.warning('该浏览器不支持消息功能')
 		}
 	}
 
@@ -139,7 +130,9 @@
 	const markRead = () => {
 		messageList.value = []
 		unreadMessageNum.value = 0
-		indexApi.indexMessageAllMarkRead().then((data) => {})
+		indexApi.indexMessageAllMarkRead().then((data) => {
+			message.success('操作成功')
+		})
 	}
 	// 跳转，用于点击消息中心
 	const leaveFor = (url = '/') => {
@@ -158,7 +151,7 @@
 			receiveInfoList.value = data.receiveInfoList
 			table.value.refresh(true)
 		})
-		unreadMessageNum.value = Math.max(unreadMessageNum.value - 1, 0);
+		unreadMessageNum.value = Math.max(unreadMessageNum.value - 1, 0)
 	}
 
 	const loadData = () => {
@@ -188,14 +181,15 @@
 		visible.value = false
 		formData.value = {}
 		receiveInfoList.value = []
+		getMessageList()
 	}
 </script>
 
 <style scoped>
-/deep/ .ant-badge-count{
-	padding: 0px;
-	min-width: 15px;
-	height: 15px;
-	line-height: 15px;
-}
+	:deep(.ant-badge-count) {
+		padding: 0px;
+		min-width: 15px;
+		height: 15px;
+		line-height: 15px;
+	}
 </style>

snowy-admin-web/src/views/sys/user/userTab/userMessage.vue

@@ -29,8 +29,8 @@
 				</s-table>
 			</div>
 		</a-col>
+		<detail ref="detailRef" @refresh="refresh" />
 	</a-row>
-	<detail ref="detailRef" @refresh="refresh"/>
 </template>
 
 <script setup name="userMessage">

snowy-admin-web/src/views/sys/user/userTab/userMessage/detail.vue

@@ -32,7 +32,7 @@
 
 <script setup name="messageDetail">
 	import userCenterApi from '@/api/sys/userCenterApi'
-	const emits = defineEmits(["refresh"]);
+	const emits = defineEmits(['refresh'])
 	const receiveInfoList = ref([])
 
 	// 默认是关闭状态
@@ -78,7 +78,7 @@
 	const onClose = () => {
 		receiveInfoList.value = []
 		visible = false
-		emits("refresh");
+		emits('refresh')
 	}
 	// 调用这个函数将子组件的一些数据和方法暴露出去
 	defineExpose({

snowy-plugin/snowy-plugin-sys/src/main/java/vip/xiaonuo/sys/modular/index/controller/SysIndexController.java

@@ -127,7 +127,7 @@ public class SysIndexController {
      */
     @ApiOperationSupport(order = 6)
     @ApiOperation("站内信全部标记已读")
-    @GetMapping("/dev/message/allMessageMarkRead")
+    @PostMapping("/sys/index/message/allMessageMarkRead")
     public CommonResult<String> allMessageMarkRead() {
         sysIndexService.allMessageMarkRead();
         return CommonResult.ok();