!50 add 新增 前端接入websocket接收消息

*  add 新增 前端接入websocket接收消息

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,10 +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;
 
@@ -161,6 +180,11 @@ const handleCommand = (command: string) => {
         commandMap[command]();
     }
 }
+
+//用深度监听 消息
+watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
+  newNotice.value = newVal.filter((item: any) => !item.read).length;
+}, { deep: true });
 </script>
 
 <style lang="scss" scoped>
@@ -169,6 +193,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,134 @@
+<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="readAll">全部已读</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" @click="onNewsClick(k)">
+          <div class="item-conten">
+            <div>{{ v.message }}</div>
+            <div class="content-box-msg"></div>
+            <div class="content-box-time">{{ v.time }}</div>
+          </div>
+          <!-- 已读/未读 -->
+          <span v-if="v.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>
+      </template>
+      <el-empty :description="'消息为空'" v-else></el-empty>
+    </div>
+    <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往gitee</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 {readAll} = 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 onNewsClick = (item: any) => {
+  newsList.value[item].read = true;
+  //并且写入pinia
+  noticeStore.state.value.notices = 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;
+      display: flex;
+      &: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);
+      }
+      .item-conten {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+  .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>