feat: 新增消息提醒

src/api/system/message.ts

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/**
+ * 获取路由列表
+ */
+export function getMessage() {
+	return request({
+		url: '/sys/message/inform',
+		method: 'get'
+		// extraConfig: { showFullscreenLoading: true }
+	})
+}

src/layout/components/Header/ToolBarRight.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="tool-bar-right">
 		<div class="header-icon">
-			<!--			<AssemblySize id="assemblySize" />-->
-			<Screenfull id="screenfull" />
+			<!--			<AssemblySize />-->
+			<Screenfull />
 			<el-tooltip content="布局大小" effect="dark" placement="bottom">
-				<SizeSelect id="size-select" class="right-menu-item le-hover-effect--bg" />
+				<SizeSelect class="right-menu-item le-hover-effect--bg" />
 			</el-tooltip>
-			<Language id="language" class="right-menu-item le-hover-effect--bg" />
+			<Language class="right-menu-item le-hover-effect--bg" />
 			<!--      todo...搜索 -->
 			<!--			<SearchMenu id="searchMenu" />-->
 			<!--			<ThemeSetting id="themeSetting" />-->
-			<!--			<Message id="message" />-->
+			<Message class="right-menu-item le-hover-effect--bg" />
 			<!--			<Fullscreen id="fullscreen" />-->
 		</div>
 		<Avatar />
@@ -25,7 +25,7 @@ import Screenfull from '@/components/Screenfull/index.vue'
 import SizeSelect from '@/components/SizeSelect/index.vue'
 // import SearchMenu from './components/SearchMenu.vue'
 // import ThemeSetting from './components/ThemeSetting.vue'
-// import Message from './components/Message.vue'
+import Message from './components/Message.vue'
 // import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
 

src/layout/components/Header/components/Message.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class="message">
+		<el-popover placement="bottom" :width="310" trigger="click">
+			<template #reference>
+				<el-badge class="item" :value="total">
+					<i class="le-iconfont le-notice"></i>
+				</el-badge>
+			</template>
+			<el-tabs v-model="activeTab">
+				<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">
+								<!--<img src="" alt="" class="message-icon" />-->
+								<div class="message-content">
+									<span class="message-title">{{ item.title }}</span>
+									<span class="message-txt">{{ item.content }}</span>
+									<span class="message-date">{{ item.createTime }}</span>
+								</div>
+							</div>
+						</div>
+					</template>
+					<template v-else>
+						<LeNoData />
+					</template>
+				</el-tab-pane>
+			</el-tabs>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { getMessage } from '@/api/system/message'
+// noticeList  通知     messageList   消息     todoList   待办
+const tabsConfig = reactive({
+	noticeList: {
+		name: 'noticeList',
+		label: '通知',
+		list: []
+	},
+	messageList: {
+		name: 'messageList',
+		label: '消息',
+		list: []
+	},
+	todoList: {
+		name: 'todoList',
+		label: '代办',
+		list: []
+	}
+})
+const activeTab = ref('noticeList')
+const total = ref(0)
+getMessage().then(res => {
+	console.error(res, '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 = []
+		}
+	})
+	total.value = _total
+})
+</script>
+
+<style scoped lang="scss">
+.message-list {
+	display: flex;
+	flex-direction: column;
+	max-height: 390px;
+	overflow-y: auto;
+	.message-item {
+		display: flex;
+		align-items: center;
+		padding: 8px 0;
+		border-bottom: 1px solid var(--el-border-color-light);
+		&:last-child {
+			border: none;
+		}
+		.message-content {
+			display: flex;
+			flex-direction: column;
+			.message-title {
+				margin-bottom: 5px;
+				font-weight: 600;
+				color: var(--el-text-color-primary);
+			}
+			.message-txt {
+				//margin-bottom: 5px;
+				color: var(--el-text-color-regular);
+			}
+			.message-date {
+				font-size: 12px;
+				color: var(--el-text-color-secondary);
+			}
+		}
+	}
+}
+</style>