fix: 🧩 添加消息内部通知;上传图片大小设置

docker/nginx.conf

@@ -7,6 +7,7 @@ server {
      listen 80 ;
      listen       [::]:80;
      server_name localhost;
+     client_max_body_size 5M; # 最大文件上传设置
 
      location / {
          root   /etc/nginx/html;

src/layout/components/lay-notice/components/NoticeItem.vue

@@ -49,7 +49,7 @@ function goMessageDetail(message: ListItem) {
 
 <template>
 	<div class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]" @click="goMessageDetail(noticeItem)">
-		<el-avatar v-if="noticeItem.cover" :size="30" :src="noticeItem.cover" class="notice-container-avatar" />
+		<img v-if="noticeItem.cover" :src="noticeItem.cover" alt="" class="notice-container-avatar" />
 		<div class="notice-container-text">
 			<div class="notice-text-title text-[#000000d9] dark:text-white">
 				<el-tooltip
@@ -102,7 +102,9 @@ function goMessageDetail(message: ListItem) {
 	// border-bottom: 1px solid #f0f0f0;
 
 	.notice-container-avatar {
-		margin-right: 16px;
+		object-fit: cover;
+		width: 30px;
+		margin-right: 8px;
 		background: #fff;
 	}
 

src/layout/components/lay-notice/data.tsx

@@ -2,7 +2,7 @@ import { $t } from '@/plugins/i18n';
 import { computed, ref } from 'vue';
 import { fetchGetUserMessageList } from '@/api/v1/message/messageUser';
 import { throttle } from '@pureadmin/utils';
-import { useWebNotification } from '@vueuse/core';
+import { ElNotification, ElTag } from 'element-plus';
 
 export interface ListItem {
 	messageId: string;
@@ -92,15 +92,7 @@ export const getAllMessageList = async () => {
 	];
 
 	// 调用浏览器系统通知
-	if (system.length > 0) {
-		useWebNotification({
-			title: system[0]?.title,
-			dir: 'auto',
-			lang: 'zh',
-			renotify: true,
-			tag: system[0]?.extra,
-		});
-	}
+	showNotification([...system, ...notify, ...notifications]);
 };
 
 /** 计算消息数量 */
@@ -115,3 +107,24 @@ export const computedNoticesNum = throttle(async () => {
 	activeKey.value = noticesData.value[0]?.key;
 	// 定时刷新
 }, 666);
+
+/** 显示通知消息 */
+const showNotification = NotificationList => {
+	if (NotificationList.length > 0) {
+		NotificationList.forEach(message => {
+			ElNotification({
+				title: message?.title,
+				message: (
+					<div class='flex '>
+						<img src={message.cover} alt='' style={{ width: '50px', height: '50px', objectFit: 'cover' }} />
+						<div class='flex justify-between mt-3 mx-2'>
+							<span class='mr-2'>{message.description}</span>
+							{message.status && <ElTag type={message.status}>{message?.extra}</ElTag>}
+						</div>
+					</div>
+				),
+				position: 'bottom-right',
+			});
+		});
+	}
+};

src/layout/components/lay-notice/index.vue

@@ -19,7 +19,6 @@ onMounted(() => {
 	<el-dropdown placement="bottom-end" trigger="click">
 		<span
 			:class="['dropdown-badge', 'navbar-bg-hover', 'select-none', Number(noticesNum) !== 0 && 'mr-[10px]']"
-			@click="computedNoticesNum"
 			@dblclick="$router.push(`/message-detail/${messageTypeStore?.allMessageTypeList[0]?.messageType}`)"
 		>
 			<el-badge :max="99" :value="Number(noticesNum) === 0 ? '' : noticesNum">

src/views/login/index.vue

@@ -64,8 +64,7 @@ onMounted(() => {
 			</div>
 			<div class="login-box">
 				<div class="login-form">
-					<!--<avatar class="avatar" />-->
-					<img alt="" class="avatar" src="/logo.png" />
+					<img alt="logo" class="avatar" src="/logo.png" />
 					<Motion>
 						<h2 class="outline-none">{{ title }}</h2>
 					</Motion>

src/views/message-management/message-editing/index.vue

@@ -5,6 +5,23 @@ import RichEditor from '@/views/message-management/message-editing/rich-editor.v
 import { formState } from '@/views/message-management/message-editing/utils/hooks';
 import MarkdownEditor from '@/views/message-management/message-editing/markdown-editor.vue';
 import { settingLR } from '@/views/message-management/message-editing/utils/columns';
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+/** 退出提醒 */
+const exitAlter = () => {
+	window.addEventListener('beforeunload', function (e) {
+		e.preventDefault();
+		// 为了兼容旧版浏览器
+		e.returnValue = '';
+	});
+};
+
+onMounted(() => {
+	exitAlter();
+});
 </script>
 
 <template>