✨系统通知新增小红点提醒

src/components/Notice/Index.vue

@@ -2,7 +2,7 @@
   <div>
     <el-popover placement="bottom" trigger="click" width="400px" popper-class="el-popover-pupop-user-news">
       <template #reference>
-        <el-badge :hidden="noticeDot <= 0" :value="noticeDot" style="line-height: 18px">
+        <el-badge :hidden="allDotNum <= 0" :value="allDotNum" style="line-height: 18px">
           <el-icon><bell /></el-icon>
         </el-badge>
       </template>
@@ -11,7 +11,7 @@
         <el-tabs v-model="noticeType">
           <el-tab-pane name="0">
             <template #label>
-              <el-badge :is-dot="newsDot" class="new-item"> 通知 </el-badge>
+              <el-badge :hidden="newsDot <= 0" :value="newsDot" class="new-item"> 通知 </el-badge>
             </template>
             <div class="content-box">
               <div class="content-box-item" v-for="item in noticeList" @click="handleDetails(item, 0)">
@@ -76,12 +76,14 @@ import { formatTime } from '@/utils/index'
 const { proxy } = getCurrentInstance()
 const noticeType = ref('0')
 // 小红点
-const newsDot = ref(false)
+const newsDot = computed(() => {
+  return useSocketStore().newNotice
+})
 const show = ref(false)
 const noticeList = computed(() => {
   return useSocketStore().noticeList
 })
-const noticeDot = computed(() => {
+const allDotNum = computed(() => {
   return useSocketStore().getAllDotNum()
 })
 const chatList = computed(() => {
@@ -101,12 +103,7 @@ function handleDetails(item, type) {
 }
 // 全部已读点击
 function onAllReadClick() {
-  newsDot.value = false
-  if (noticeType.value == 1) {
-    useSocketStore().readAll()
-  } else {
-    proxy.$modal.msg('请自行实现！！！')
-  }
+  useSocketStore().readAll(noticeType.value)
 }
 // 前往通知中心点击
 function onGoToGiteeClick() {
@@ -152,7 +149,7 @@ function onGoToGiteeClick() {
 }
 .foot-box {
   height: 35px;
-  color: #1890ff;
+  color: var(--el-color-primary);
   font-size: 13px;
   cursor: pointer;
   opacity: 0.8;
@@ -164,21 +161,17 @@ function onGoToGiteeClick() {
     opacity: 1;
   }
 }
-:deep(.el-empty__description p) {
-  font-size: 13px;
-}
-.head-box-title {
-  color: var(--base-color-white);
-}
+
 .layout-navbars-breadcrumb-user-news {
   position: relative;
   .read {
     position: absolute;
-    top: 5px;
+    top: 7px;
     right: 0;
-    color: #1890ff;
+    color: var(--el-color-primary);
     cursor: pointer;
     z-index: 2;
+    font-size: 12px;
   }
 }
 .n_right {

src/directive/module/waves.js

@@ -5,30 +5,31 @@
  */
 export default {
   mounted(el, binding) {
-    el.classList.add('waves-effect');
-    binding.value && el.classList.add(`waves-${binding.value}`);
+    el.classList.add('waves-effect')
+    binding.value && el.classList.add(`waves-${binding.value}`)
 
     function setConvertStyle(obj) {
-      let style = '';
+      let style = ''
       for (let i in obj) {
-        if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
+        if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`
       }
-      return style;
+      return style
     }
 
     function onCurrentClick(e) {
-      let elDiv = document.createElement('div');
-      elDiv.classList.add('waves-ripple');
-      el.appendChild(elDiv);
+      let elDiv = document.createElement('div')
+      elDiv.classList.add('waves-ripple')
+      el.appendChild(elDiv)
       let styles = {
         left: `${e.layerX}px`,
         top: `${e.layerY}px`,
         opacity: 1,
         transform: `scale(${(el.clientWidth / 100) * 10})`,
         'transition-duration': `750ms`,
-        'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
-      };
-      elDiv.setAttribute('style', setConvertStyle(styles));
+        'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`
+      }
+
+      elDiv.setAttribute('style', setConvertStyle(styles))
       setTimeout(() => {
         elDiv.setAttribute(
           'style',
@@ -36,17 +37,17 @@ export default {
             opacity: 0,
             transform: styles.transform,
             left: styles.left,
-            top: styles.top,
+            top: styles.top
           })
-        );
+        )
         setTimeout(() => {
-          elDiv && el.removeChild(elDiv);
-        }, 750);
-      }, 450);
+          elDiv && el.removeChild(elDiv)
+        }, 750)
+      }, 450)
     }
-    el.addEventListener('mousedown', onCurrentClick, false);
+    el.addEventListener('mousedown', onCurrentClick, false)
   },
   unmounted(el) {
-    el.addEventListener('mousedown', () => {});
-  },
+    el.addEventListener('mousedown', () => {})
+  }
 }

src/store/modules/socket.js

@@ -2,20 +2,21 @@ import useUserStore from './user'
 import signalR from '@/signalr/signalr'
 const useSocketStore = defineStore('socket', {
   persist: {
-    paths: ['chatMessage', 'chatList', 'sessionList', 'newChat'] //存储指定key
+    paths: ['chatMessage', 'chatList', 'sessionList', 'newChat', 'noticeIdArr', 'newNotice'] //存储指定key
   },
   state: () => ({
     onlineNum: 0,
     onlineUsers: [],
     noticeList: [],
-    noticeDot: false,
     //在线用户信息
     onlineInfo: {},
     // 聊天数据
     chatList: {},
     leaveUser: {},
     sessionList: {},
-    newChat: 0
+    newChat: 0,
+    newNotice: 0,
+    noticeIdArr: []
   }),
   getters: {
     /**
@@ -30,7 +31,7 @@ const useSocketStore = defineStore('socket', {
       return (userid) => state.sessionList[userid] || []
     },
     getAllDotNum(state) {
-      return () => state.newChat
+      return () => state.newChat + state.newNotice
     }
   },
   actions: {
@@ -41,7 +42,18 @@ const useSocketStore = defineStore('socket', {
     // 更新系统通知
     setNoticeList(data) {
       this.noticeList = data
-      this.noticeDot = data.length > 0
+
+      const idArr = []
+      data.forEach((ele) => {
+        idArr.push(ele.noticeId)
+      })
+
+      var diffArr = idArr.filter((v) => !this.noticeIdArr.some((item) => item == v))
+
+      if (diffArr.length > 0) {
+        this.newNotice = diffArr.length
+        this.noticeIdArr = idArr
+      }
     },
     setOnlineUsers(data) {
       const { onlineClients, num, leaveUser } = data
@@ -95,9 +107,13 @@ const useSocketStore = defineStore('socket', {
           })
       })
     },
-    readAll() {
+    readAll(type) {
+      if (type == 0) {
+        this.newNotice = 0
+      } else if (type == 1) {
         this.newChat = 0
       }
     }
+  }
 })
 export default useSocketStore

src/views/monitor/onlineuser/index.vue

@@ -14,9 +14,6 @@
         <el-button type="primary" icon="Search" @click="handleQuery">刷新</el-button>
       </el-form-item>
     </el-form>
-    <!-- <el-row :gutter="10" class="mb8">
-      <el-col :span="2"> </el-col>
-    </el-row> -->
     <el-table :data="onlineUsers" v-loading="loading" ref="tableRef" border highlight-current-row v-if="viewSwitch == 1">
       <el-table-column label="No" type="index" width="50" align="center">
         <template #default="scope">
@@ -36,7 +33,7 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="160">
         <template #default="scope">
-          <el-button text @click="onChat(scope.row)" icon="bell" v-hasRole="['admin']">通知</el-button>
+          <el-button text @click="onChat(scope.row)" icon="ChatDotRound" v-hasRole="['admin']">私信</el-button>
           <el-button text @click="onLock(scope.row)" icon="lock" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
         </template>
       </el-table-column>
@@ -54,8 +51,8 @@
           </el-descriptions>
           <el-text truncated>{{ item.browser }}</el-text>
           <div>
-            <el-button text @click="onChat(item)" icon="bell" title="通知" v-hasRole="['admin']"></el-button>
-            <el-button text @click="onLock(item)" icon="lock" title="强退" v-hasPermi="['monitor:online:forceLogout']"></el-button>
+            <el-button text @click="onChat(item)" size="small" icon="ChatDotRound" title="私信" v-hasRole="['admin']">私信</el-button>
+            <el-button text @click="onLock(item)" size="small" icon="lock" title="强退" v-hasPermi="['monitor:online:forceLogout']">强退</el-button>
           </div>
         </el-card>
       </el-col>
@@ -104,7 +101,7 @@ getList()
 
 function onChat(item) {
   proxy
-    .$prompt('请输入通知内容', '', {
+    .$prompt('请输入消息内容', '', {
       confirmButtonText: '发送',
       cancelButtonText: '取消',
       inputPattern: /\S/,