feat(消息通知): ✨ 消息通知

顶部消息通知完成

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

@@ -39,7 +39,7 @@
 		<div class="layout-navbars-breadcrumb-user-icon">
 			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
 				<template #reference>
-					<el-badge :is-dot="true">
+					<el-badge :value="messageCenter.unread">
 						<el-icon :title="$t('message.user.title4')">
 							<ele-Bell />
 						</el-icon>
@@ -205,6 +205,10 @@ onMounted(() => {
 		initI18nOrSize('globalI18n', 'disabledI18n');
 	}
 });
+
+//消息中心的未读数量
+import {messageCenterStore} from "/@/stores/messageCenter";
+const messageCenter = messageCenterStore()
 </script>
 
 <style scoped lang="scss">

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

@@ -2,16 +2,16 @@
 	<div class="layout-navbars-breadcrumb-user-news">
 		<div class="head-box">
 			<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
-			<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
+<!--			<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>-->
 		</div>
 		<div class="content-box">
 			<template v-if="state.newsList.length > 0">
 				<div class="content-box-item" v-for="(v, k) in state.newsList" :key="k">
-					<div>{{ v.label }}</div>
+					<div>{{ v.title }}</div>
 					<div class="content-box-msg">
-						{{ v.value }}
+						<div v-html="v.content"></div>
 					</div>
-					<div class="content-box-time">{{ v.time }}</div>
+					<div class="content-box-time">{{ v.create_datetime }}</div>
 				</div>
 			</template>
 			<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
@@ -21,17 +21,11 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
-import { reactive } from 'vue';
+import { reactive,onBeforeMount,ref,onMounted } from 'vue';
 
 // 定义变量内容
 const state = reactive({
-	newsList: [
-		{
-			label: '关于版本发布的通知',
-			value: 'django-vue3-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus, 是一款全栈，快速，开源的后台管理系统！',
-			time: '2023-02-14',
-		},
-	],
+	newsList: [] as any,
 });
 
 // 全部已读点击
@@ -39,9 +33,27 @@ const onAllReadClick = () => {
 	state.newsList = [];
 };
 // 前往通知中心点击
+import {useRouter } from "vue-router";
+const route = useRouter()
 const onGoToGiteeClick = () => {
-	window.open('https://gitee.com/huge-dream/django-vue3-admin');
+  route.push('/messageCenter')
 };
+//获取最新消息
+import { request } from "/@/utils/service";
+const getLastMsg= ()=>{
+  request({
+    url: '/api/system/message_center/get_newest_msg/',
+    method: 'get',
+    params: {}
+  }).then((res:any) => {
+    const { data } = res
+    state.newsList= [data]
+  })
+}
+onMounted(()=>{
+  getLastMsg()
+})
+
 </script>
 
 <style scoped lang="scss">