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

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,12 +15,11 @@
 					</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"
@@ -58,15 +57,17 @@
 				</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 { onMounted } from 'vue'
-	import sysConfig from "@/config";
+	import sysConfig from '@/config'
-	import { EventSourcePolyfill } from "event-source-polyfill";
+	import { EventSourcePolyfill } from 'event-source-polyfill'
-	import tool from "@/utils/tool";
+	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 clientId = tool.data.get('CLIENTID') ? tool.data.get('CLIENTID') : ''
-			let url = sysConfig.API_URL+'/dev/message/createSseConnect?clientId='+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) => {
+			source.addEventListener('open', (e) => {})
-				//console.log("设备连接成功",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)
+					tool.data.set('CLIENTID', data)
-					console.log("客户端id:",data)
 				}
-
 			})
-
 			// 监听错误事件
-			source.addEventListener("error", (e) => {
+			source.addEventListener('error', (e) => {
-				console.log("发生错误，已断开与服务器的连接:",e)
+				console.error('发生错误，消息事实获取已断开与服务器的连接')
-				source.close();
+				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,11 +181,12 @@
 		visible.value = false
 		formData.value = {}
 		receiveInfoList.value = []
+		getMessageList()
 	}
 </script>
 
 <style scoped>
-/deep/ .ant-badge-count{
+	:deep(.ant-badge-count) {
 		padding: 0px;
 		min-width: 15px;
 		height: 15px;

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

@@ -29,8 +29,8 @@
 				</s-table>
 			</div>
 		</a-col>
-	</a-row>
 		<detail ref="detailRef" @refresh="refresh" />
+	</a-row>
 </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();