完善消息通知

src/lang/en_US.ts

@@ -18,6 +18,7 @@ export default {
     language: 'Language',
     dashboard: 'Dashboard',
     document: 'Document',
+    message: 'Message',
     layoutSize: 'Layout Size',
     selectTenant: 'Select Tenant',
     layoutSetting: 'Layout Setting',

src/lang/zh_CN.ts

@@ -17,6 +17,7 @@ export default {
     language: '语言',
     dashboard: '首页',
     document: '项目文档',
+    message: '消息',
     layoutSize: '布局大小',
     selectTenant: '选择租户',
     layoutSetting: '布局设置',

src/layout/components/Navbar.vue

@@ -27,6 +27,21 @@
             <svg-icon class-name="search-icon" icon-class="search" />
           </div>
         </el-tooltip>
+        <!-- 消息 -->
+        <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
+          <div>
+            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+              <template #reference>
+                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
+                  <svg-icon icon-class="message" />
+                </el-badge>
+              </template>
+              <template #default>
+                <notice></notice>
+              </template>
+            </el-popover>
+          </div>
+        </el-tooltip>
         <el-tooltip content="Github" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -81,11 +96,14 @@ import { getTenantList } from "@/api/login";
 import { dynamicClear, dynamicTenant } from "@/api/system/tenant";
 import { ComponentInternalInstance } from "vue";
 import { TenantVO } from "@/api/types";
+import notice from './notice/index.vue';
+import useNoticeStore from '@/store/modules/notice';
 
 const appStore = useAppStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
-
+const noticeStore = storeToRefs(useNoticeStore());
+const newNotice = ref(<number>0);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const userId = ref(userStore.userId);
@@ -161,6 +179,10 @@ const handleCommand = (command: string) => {
         commandMap[command]();
     }
 }
+//用深度监听
+watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
+  newNotice.value = newVal.length;
+}, { deep: true });
 </script>
 
 <style lang="scss" scoped>
@@ -169,6 +191,10 @@ const handleCommand = (command: string) => {
   height:30px;
 }
 
+:deep(.el-badge__content.is-fixed){
+    top: 12px;
+}
+
 .flex {
   display: flex;
 }

src/layout/components/notice/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="layout-navbars-breadcrumb-user-news" v-loading="state.loading">
+    <div class="head-box">
+      <div class="head-box-title">通知公告</div>
+      <div class="head-box-btn" @click="onAllReadClick">全部已读</div>
+    </div>
+    <div class="content-box" v-loading="state.loading">
+      <template v-if="newsList.length > 0">
+        <div class="content-box-item" v-for="(v, k) in newsList" :key="k">
+          <div>{{ v.message }}</div>
+          <div class="content-box-msg"></div>
+          <div class="content-box-time">{{ v.time }}</div>
+        </div>
+      </template>
+      <el-empty :description="'消息为空'" v-else></el-empty>
+    </div>
+    <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往通知公告中心</div>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutBreadcrumbUserNews">
+import { ref } from "vue";
+import { storeToRefs } from 'pinia'
+import { nextTick, onMounted, reactive } from "vue";
+import useNoticeStore from '@/store/modules/notice';
+
+const noticeStore = storeToRefs(useNoticeStore());
+const {clearNotice} = useNoticeStore();
+// 定义变量内容
+const state = reactive({
+  loading: false,
+});
+const newsList =ref([]) as any;
+
+/**
+ * 初始化数据
+ * @returns
+ */
+const getTableData = async () => {
+  state.loading = true;
+  newsList.value = noticeStore.state.value.notices;
+  state.loading = false;
+};
+
+// 全部已读点击
+const onAllReadClick = () => {
+  clearNotice();
+  newsList.value = [];
+};
+
+// 前往通知中心点击
+const onGoToGiteeClick = () => {
+  window.open("https://gitee.com/dromara/RuoYi-Vue-Plus/tree/5.X/");
+};
+
+onMounted(() => {
+  nextTick(() => {
+    getTableData();
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.layout-navbars-breadcrumb-user-news {
+  .head-box {
+    display: flex;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    box-sizing: border-box;
+    color: var(--el-text-color-primary);
+    justify-content: space-between;
+    height: 35px;
+    align-items: center;
+    .head-box-btn {
+      color: var(--el-color-primary);
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 0.8;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  .content-box {
+    height: 300px;
+    overflow: auto;
+    font-size: 13px;
+    .content-box-item {
+      padding-top: 12px;
+      &:last-of-type {
+        padding-bottom: 12px;
+      }
+      .content-box-msg {
+        color: var(--el-text-color-secondary);
+        margin-top: 5px;
+        margin-bottom: 5px;
+      }
+      .content-box-time {
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+  .foot-box {
+    height: 35px;
+    color: var(--el-color-primary);
+    font-size: 13px;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--el-border-color-lighter);
+    &:hover {
+      opacity: 1;
+    }
+  }
+  :deep(.el-empty__description p) {
+    font-size: 13px;
+  }
+}
+</style>

src/store/modules/notice.ts

@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia';
+
+interface NoticeItem {
+  title?: string;
+  message: any;
+  time: string;
+}
+
+export const useNoticeStore = defineStore('notice', () => {
+  const state = reactive({
+    notices: [] as NoticeItem[]
+  });
+
+  const addNotice = (notice: NoticeItem) => {
+    state.notices.push(notice);
+  };
+
+  const removeNotice = (notice: NoticeItem) => {
+    state.notices.splice(state.notices.indexOf(notice), 1);
+  };
+
+  const clearNotice = () => {
+    state.notices = [];
+  };
+  return {
+    state,
+    addNotice,
+    removeNotice,
+    clearNotice
+  };
+});
+
+export default useNoticeStore;

src/utils/websocket.ts

@@ -19,6 +19,9 @@
  */
 
 import { getToken } from '@/utils/auth';
+import useNoticeStore from '@/store/modules/notice';
+
+const { addNotice } = useNoticeStore();
 
 let socketUrl: any = ''; // socket地址
 let websocket: any = null; // websocket 实例
@@ -37,17 +40,13 @@ export const initWebSocket = (url: any) => {
   websocketonerror();
   websocketclose();
   sendSocketHeart();
+  return websocket;
 };
 
-onMounted(() => {
-  // 初始化websocket
-  initWebSocket(socketUrl);
-});
-
 // socket 连接成功
 export const websocketonopen = () => {
-  websocket.onopen = function (e: any) {
-    console.log('连接 websocket 成功', e);
+  websocket.onopen = function () {
+    console.log('连接 websocket 成功');
     resetHeart();
   };
 };
@@ -76,7 +75,6 @@ export const resetHeart = () => {
 
 // socket心跳发送
 export const sendSocketHeart = () => {
-  console.log(websocket);
   heartTime = setInterval(() => {
     // 如果连接正常则发送心跳
     if (websocket.readyState == 1) {
@@ -120,15 +118,14 @@ export const websocketonmessage = () => {
     const msg = JSON.parse(e.data) as any;
     if (msg.type === 'heartbeat') {
       resetHeart();
-      console.log('心跳');
     }
     if (msg.type === 'ping') {
-      console.log('收到心跳', socketHeart);
       return;
     }
-    ElNotification({
-      title: '收到一条消息',
-      message: msg
+    addNotice({
+      message: msg,
+      time: new Date().toLocaleString()
     });
+    return msg;
   };
 };

src/views/tool/webSocket/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="p-2">
+    <el-row>
+      <el-col :span="24" class="card-box">
+        <el-card shadow="hover">
+          <el-row :gutter="24">
+            <el-col :span="24" class="mt10">
+              <el-input v-model="conf.url" placeholder="请输入连接地址"></el-input>
+            </el-col>
+            <el-col :span="24" class="mt10">
+              <el-button type="primary" @click="start">连接</el-button>
+              <el-button type="primary" @click="websocketclose()">断开</el-button>
+            </el-col>
+            <el-col :span="24" class="mt10">
+              <el-input type="textarea" v-model="conf.send" placeholder="请输入发送内容"></el-input>
+            </el-col>
+            <el-col :span="24" class="mt10">
+              <el-button type="primary" @click="sendMessage">发送</el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts" name="webSocket">
+import { initWebSocket, sendMsg, websocketclose } from '@/utils/websocket';
+
+import { reactive } from 'vue';
+interface Conf {
+    url: string;
+    send: string;
+    message: {
+        time: string;
+        type: string;
+        data: string;
+    }[];
+}
+
+const conf = reactive(<Conf>{
+  url: import.meta.env.VITE_APP_WEBSOCKET_URL, // 连接地址
+  send: '123', // 发送信息
+  message: [], // 消息列表
+});
+
+const start = () => {
+  initWebSocket(conf.url);
+};
+
+const sendMessage = () => {
+  sendMsg(conf.send);
+};
+
+onMounted(() => {
+  start();
+});
+</script>
+
+<style lang="scss" scoped>
+.mt10 {
+  margin-top: 10px;
+}
+</style>