实现已读/未读状态，删除不必要的东西

.env.development

@@ -22,7 +22,4 @@ VITE_APP_PORT = 80
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 
 # 客户端id
-VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
-
-#websocket地址
-VITE_APP_WEBSOCKET_URL = '/resource/websocket'
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'

.env.production

@@ -25,7 +25,4 @@ VITE_APP_PORT = 80
 VITE_APP_RSA_PUBLIC_KEY = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdHnzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
 
 # 客户端id
-VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
-
-#websocket地址
-VITE_APP_WEBSOCKET_URL = 'ws://127.0.0.1:8098/resource/websocket'
+VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'

src/layout/components/Navbar.vue

@@ -183,7 +183,7 @@ const handleCommand = (command: string) => {
 
 //用深度监听 消息
 watch(() => noticeStore.state.value.notices, (newVal, oldVal) => {
-  newNotice.value = newVal.length;
+  newNotice.value = newVal.filter((item: any) => !item.read).length;
 }, { deep: true });
 </script>
 

src/layout/components/notice/index.vue

@@ -2,19 +2,24 @@
   <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 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">
-          <div>{{ v.message }}</div>
-          <div class="content-box-msg"></div>
-          <div class="content-box-time">{{ v.time }}</div>
+        <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">前往通知公告中心</div>
+    <div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">前往gitee</div>
   </div>
 </template>
 
@@ -25,7 +30,8 @@ import { nextTick, onMounted, reactive } from "vue";
 import useNoticeStore from '@/store/modules/notice';
 
 const noticeStore = storeToRefs(useNoticeStore());
-const {clearNotice} = useNoticeStore();
+const {readAll} = useNoticeStore();
+
 // 定义变量内容
 const state = reactive({
   loading: false,
@@ -42,10 +48,12 @@ const getTableData = async () => {
   state.loading = false;
 };
 
-// 全部已读点击
-const onAllReadClick = () => {
-  clearNotice();
-  newsList.value = [];
+
+//点击消息，写入已读
+const onNewsClick = (item: any) => {
+  newsList.value[item].read = true;
+  //并且写入pinia
+  noticeStore.state.value.notices = newsList.value;
 };
 
 // 前往通知中心点击
@@ -86,6 +94,7 @@ onMounted(() => {
     font-size: 13px;
     .content-box-item {
       padding-top: 12px;
+      display: flex;
       &:last-of-type {
         padding-bottom: 12px;
       }
@@ -97,6 +106,11 @@ onMounted(() => {
       .content-box-time {
         color: var(--el-text-color-secondary);
       }
+      .item-conten {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
     }
   }
   .foot-box {

src/store/modules/notice.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 
 interface NoticeItem {
   title?: string;
+  read: boolean;
   message: any;
   time: string;
 }
@@ -19,6 +20,13 @@ export const useNoticeStore = defineStore('notice', () => {
     state.notices.splice(state.notices.indexOf(notice), 1);
   };
 
+  //实现全部已读
+  const readAll = () => {
+    state.notices.forEach((item) => {
+      item.read = true;
+    });
+  };
+
   const clearNotice = () => {
     state.notices = [];
   };
@@ -26,6 +34,7 @@ export const useNoticeStore = defineStore('notice', () => {
     state,
     addNotice,
     removeNotice,
+    readAll,
     clearNotice
   };
 });

src/utils/websocket.ts

@@ -124,6 +124,7 @@ export const websocketonmessage = () => {
     }
     addNotice({
       message: msg,
+      read: false,
       time: new Date().toLocaleString()
     });
     return msg;

src/views/index.vue

@@ -99,7 +99,7 @@
 import { initWebSocket } from '@/utils/websocket';
 
 onMounted(() => {
-  initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+import.meta.env.VITE_APP_WEBSOCKET_URL);
+  initWebSocket("ws://"+window.location.host+import.meta.env.VITE_APP_BASE_API+"/resource/websocket");
 });
 
 const goTarget = (url:string) => {

src/views/tool/webSocket/index.vue

@@ -1,59 +0,0 @@
-<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: "ws://localhost"+import.meta.env.VITE_APP_BASE_API+import.meta.env.VITE_APP_WEBSOCKET_URL, // 连接地址
-  send: '123', // 发送信息
-  message: [], // 消息列表
-});
-
-const start = () => {
-  initWebSocket(conf.url);
-};
-
-const sendMessage = () => {
-  sendMsg(conf.send);
-};
-</script>
-
-<style lang="scss" scoped>
-.mt10 {
-  margin-top: 10px;
-}
-</style>