feat: 主页添加消息提示

src/layouts/components/Header/components/Message.vue

@@ -2,21 +2,25 @@
   <div class="message">
     <el-popover placement="bottom" :width="310" trigger="click">
       <template #reference>
-        <el-badge :value="5" class="item">
+        <el-badge :value="newNotice" class="item">
           <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
         </el-badge>
       </template>
       <el-tabs v-model="activeName">
-        <el-tab-pane label="通知(5)" name="first">
+        <el-tab-pane :label="`通知(${newNotice})`" name="first">
           <div class="message-list">
-            <div class="message-item">
-              <img src="@/assets/images/msg01.png" alt="" class="message-icon" />
-              <div class="message-content">
-                <span class="message-title">一键三连 eco-Admin 🧡</span>
-                <span class="message-date">一分钟前</span>
+            <template v-for="(item, index) in newsList" :key="index">
+              <div class="message-item">
+                <img src="@/assets/images/msg01.png" alt="" @click="onNewsClick(index)" class="message-icon" />
+                <div class="message-content">
+                  <span class="message-title">{{ item.message }} 🧡</span>
+                  <span class="message-date">{{ item.time }}</span>
+                </div>
+                <span v-if="item.read" class="el-tag el-tag--success el-tag--mini read">已读</span>
+                <span v-else class="el-tag el-tag--danger el-tag--mini read">未读</span>
               </div>
-            </div>
-            <div class="message-item">
+            </template>
+            <!-- <div class="message-item">
               <img src="@/assets/images/msg02.png" alt="" class="message-icon" />
               <div class="message-content">
                 <span class="message-title">一键三连 eco-Admin 💙</span>
@@ -43,7 +47,7 @@
                 <span class="message-title">一键三连 eco-Admin 💛</span>
                 <span class="message-date">一个月前</span>
               </div>
-            </div>
+            </div> -->
           </div>
         </el-tab-pane>
         <el-tab-pane label="消息(0)" name="second">
@@ -66,6 +70,7 @@
 <script setup lang="ts">
 import useNoticeStore from '@/stores/modules/notice'
 const noticeStore = storeToRefs(useNoticeStore())
+// const { readAll } = useNoticeStore()
 const activeName = ref('first')
 const newNotice = ref(0)
 // 定义变量内容
@@ -73,7 +78,12 @@ const state = reactive({
   loading: false
 })
 const newsList = ref([]) as any
-
+//点击消息，写入已读
+const onNewsClick = (item: any) => {
+  newsList.value[item].read = true
+  //并且写入pinia
+  noticeStore.state.value.notices = newsList.value
+}
 /**
  * 初始化数据
  * @returns
@@ -109,6 +119,7 @@ watch(
 .message-list {
   display: flex;
   flex-direction: column;
+  min-height: 260px;
   .message-item {
     display: flex;
     align-items: center;
@@ -121,10 +132,12 @@ watch(
       width: 40px;
       height: 40px;
       margin: 0 20px 0 5px;
+      cursor: pointer;
     }
     .message-content {
       display: flex;
       flex-direction: column;
+      margin-right: 20px;
       .message-title {
         margin-bottom: 5px;
       }

src/utils/websocket.ts

@@ -27,7 +27,7 @@ let heartTime: any = null // 心跳定时器实例
 let socketHeart = 0 as number // 心跳次数
 const HeartTimeOut = 10000 // 心跳超时时间 10000 = 10s
 let socketError = 0 as number // 错误次数
-
+import { getTimeState } from '@/utils'
 // 初始化socket
 export const initWebSocket = (url: any) => {
   if (import.meta.env.VITE_APP_WEBSOCKET === 'false') {
@@ -116,6 +116,7 @@ export const sendMsg = (data: any) => {
 // socket 接收数据
 export const websocketOnmessage = () => {
   websocket.onmessage = function (e: any) {
+    let title = '消息'
     if (e.data.indexOf('heartbeat') > 0) {
       resetHeart()
     }
@@ -127,8 +128,11 @@ export const websocketOnmessage = () => {
       read: false,
       time: new Date().toLocaleString()
     })
+    if (e.data.indexOf('欢迎') == 0) {
+      title = getTimeState() as any
+    }
     ElNotification({
-      title: '消息',
+      title,
       message: e.data,
       type: 'success',
       duration: 3000

src/views/login/components/LoginForm.vue

@@ -32,9 +32,7 @@
 
 <script setup lang="ts">
 import { HOME_URL } from '@/config'
-import { getTimeState } from '@/utils'
 import { LoginData } from '@/api/interface/login'
-import { ElNotification } from 'element-plus'
 import { getCodeImg } from '@/api/modules/login'
 import { useUserStore } from '@/stores/modules/user'
 import { useTabsStore } from '@/stores/modules/tabs'
@@ -101,12 +99,6 @@ const handleLogin = (formEl: FormInstance | undefined) => {
 
           // 4.跳转到首页
           router.push(HOME_URL)
-          ElNotification({
-            title: getTimeState(),
-            message: `欢迎登录`,
-            type: 'success',
-            duration: 3000
-          })
         })
         .catch(error => {
           console.log('登录失败', error)