wip: 🚧 通知公告重构临时提交

src/components/Notice/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nav-action-item" style="display: flex; justify-content: center">
+  <div>
     <el-dropdown trigger="hover">
       <el-badge :is-dot="messages.length > 0" :offset="offset">
         <div class="flex-center h100% p10px">
@@ -40,7 +40,7 @@
           </el-tabs>
           <el-divider />
           <div class="flex-x-between">
-            <el-link type="primary" :underline="false" @click="more">
+            <el-link type="primary" :underline="false" @click="viewMore">
               <span class="text-xs">查看更多</span>
               <el-icon class="text-xs">
                 <ArrowRight />
@@ -50,7 +50,7 @@
               v-if="messages.length > 0"
               type="primary"
               :underline="false"
-              @click="readAllNotice()"
+              @click="markAllAsRead"
             >
               <span class="text-xs">全部已读</span>
             </el-link>
@@ -58,99 +58,110 @@
         </div>
       </template>
     </el-dropdown>
-    <NoticeModal ref="noticeModalRef" />
+
+    <!-- 弹窗部分 -->
+    <el-dialog
+      v-model="modalVisible"
+      :show-close="false"
+      append-to-body
+      :fullscreen="fullscreen"
+      style="z-index: revert"
+    >
+      <template #header="{ close }">
+        <div class="flex-x-between">
+          <h3>{{ currentMessage.title }}</h3>
+          <div class="flex-center">
+            <el-icon
+              class="ml10px"
+              @click="
+                () => {
+                  fullscreen = !fullscreen;
+                }
+              "
+            >
+              <FullScreen />
+            </el-icon>
+            <el-icon @click="close" class="icon">
+              <Close />
+            </el-icon>
+          </div>
+        </div>
+      </template>
+
+      <div style="width: auto; text-align: left">
+        <span class="header-item">
+          <el-tag v-if="currentMessage.type === 2" type="warning">
+            系统通知
+          </el-tag>
+          <el-tag v-if="currentMessage.type === 1" type="success">
+            通知消息
+          </el-tag>
+        </span>
+        <div v-html="currentMessage.content"></div>
+      </div>
+    </el-dialog>
   </div>
 </template>
+
 <script setup lang="ts">
 import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
 import NoticeAPI from "@/api/notice";
-import socket from "@/api/socket";
-import NoticeModal from "@/components/NoticeModal/index.vue";
+import WebSocketManager from "@/utils/socket";
 import router from "@/router";
 
+// 状态和引用
 const activeTab = ref(MessageTypeEnum.MESSAGE);
-const messages = ref<any>([]);
-const noticeModalRef = ref(NoticeModal);
-const offset = ref<Number[]>([-15, 15]);
+const messages = ref<any[]>([]);
+const offset = ref<[number, number]>([-15, 15]);
+const currentMessage = ref<any>({});
+const modalVisible = ref(false);
+const fullscreen = ref(false);
 
-const getFilteredMessages = (type: MessageTypeEnum) => {
-  return messages.value.filter(
-    (message: { type: MessageTypeEnum }) => message.type === type
-  );
-};
+// 获取未读消息列表并连接 WebSocket
+onMounted(() => {
+  NoticeAPI.getUnreadList().then((data) => {
+    messages.value = data;
+  });
 
-/**'
- * 连接WebSocket
- */
-function connectWebSocket() {
-  socket.getWebSocketClient("/user/queue/message", (message) => {
-    // 这里是不是可以获取到消息之后，直接调用接口获取消息列表呢？？？
-    let parse = JSON.parse(message);
-    // 如果是消息类型
-    if (parse.noticeType === MessageTypeEnum.MESSAGE) {
-      let content = JSON.parse(parse.content);
-      //是发布消息
+  WebSocketManager.getOrCreateClient("/user/queue/message", (message) => {
+    const parsedMessage = JSON.parse(message);
+    if (parsedMessage.noticeType === MessageTypeEnum.MESSAGE) {
+      const content = JSON.parse(parsedMessage.content);
       if (content.type === "release") {
-        //获取到id
-        let id = content.id;
-        //确认messages里面是否有这个id
-        let index = messages.value.findIndex((item: any) => item.id === id);
-        if (index < 0) {
-          let messageContent = {
-            id: id,
+        const id = content.id;
+        if (!messages.value.some((msg) => msg.id === id)) {
+          messages.value.unshift({
+            id,
             title: content.title,
             type: MessageTypeEnum.MESSAGE,
-          };
-          messages.value.unshift(messageContent);
+          });
         }
       }
     }
   });
-}
+});
 
-/**
- * 获取消息列表
- * @returns
- */
-function listNotice() {
-  NoticeAPI.listUnreadNotice().then((res) => {
-    messages.value = res;
-  });
-}
-
-/**
- * 阅读通知公告
- * @param id
- */
+// 阅读通知公告
 function readNotice(id: number) {
-  let index = messages.value.findIndex(
-    (item: { id: number }) => item.id === id
-  );
+  const index = messages.value.findIndex((msg) => msg.id === id);
   if (index >= 0) {
-    messages.value.splice(index, 1);
+    currentMessage.value = messages.value[index];
+    modalVisible.value = true;
+    messages.value.splice(index, 1); // 从消息列表中移除已读消息
   }
-  noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
 }
 
-/**
- * 查看更多
- */
-function more() {
-  //跳转到我的消息页面
+// 查看更多
+function viewMore() {
   router.push({ path: "/notice/notice" });
 }
 
-/**
- * 全部已读
- */
-function readAllNotice() {
-  NoticeAPI.readAllNotice().then(() => {
+// 全部已读
+function markAllAsRead() {
+  NoticeAPI.readAll().then(() => {
     messages.value = [];
   });
 }
-
-onMounted(() => {
-  listNotice();
-  connectWebSocket();
-});
 </script>
+
+<style scoped></style>

src/components/NoticeModal/index.vue

@@ -1,110 +0,0 @@
-<template>
-  <el-dialog
-    v-model="visible"
-    :show-close="false"
-    append-to-body
-    :fullscreen="fullscreen"
-    style="z-index: revert"
-  >
-    <template #header="{ close }">
-      <div class="my-header">
-        <h3>{{ message.title }}</h3>
-        <div class="icon-content">
-          <el-icon
-            class="icon"
-            @click="
-              () => {
-                fullscreen = !fullscreen;
-              }
-            "
-          >
-            <FullScreen />
-          </el-icon>
-          <el-icon @click="close" class="icon">
-            <Close />
-          </el-icon>
-        </div>
-      </div>
-    </template>
-    <div style="width: auto; text-align: left">
-      <span class="header-item">
-        <el-tag v-if="message.noticeType == 2" type="warning">系统通知</el-tag>
-        <el-tag v-if="message.noticeType == 1" type="success">通知消息</el-tag>
-      </span>
-      <span class="header-item">
-        <el-tag v-if="message.priority == 0" type="danger">低</el-tag>
-        <el-tag v-if="message.priority == 1" type="success">中</el-tag>
-        <el-tag v-if="message.priority == 2" type="warning">高</el-tag>
-      </span>
-      <span class="header-item">{{ message.releaseBy }}</span>
-      <span class="header-item">{{ message.releaseTime }}</span>
-    </div>
-    <el-divider />
-    <div
-      v-html="message.content"
-      style="width: auto; min-height: 400px; text-align: left"
-    ></div>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-/**
- * 这里可能存在一个问题，因为上面展示方式我是用了v-html，所以这里可能会有xss攻击，后续可以考虑使用其他方式
- * 或者是用 npm install dompurify 来处理
- * 示例代码
- * import DOMPurify from 'dompurify';
- * const rawHtmlContent = '<p>Some HTML content</p>'; // 这可能来自不可信的源
- * const safeHtmlContent = DOMPurify.sanitize(rawHtmlContent);
- */
-import { ref } from "vue";
-import { defineExpose } from "vue";
-import NoticeAPI, { NoticeDetailVO } from "@/api/notice";
-
-const message = ref<NoticeDetailVO>({});
-const visible = ref(false);
-const fullscreen = ref(false);
-const open = (id: number, read: boolean) => {
-  fullscreen.value = false;
-  getNoticeDetail(id, !read);
-};
-
-/**
- * 获取消息详情
- * @param id 通知id
- * @param read 是否是阅读，因为存在管理员查看通知管理中的消息，所以这里需要区分
- */
-function getNoticeDetail(id: number, read: boolean) {
-  if (read) {
-    NoticeAPI.readNotice(id).then((res) => {
-      visible.value = true;
-      message.value = res;
-    });
-  } else {
-    NoticeAPI.getDetail(id).then((res) => {
-      visible.value = true;
-      message.value = res;
-    });
-  }
-}
-defineExpose({ open });
-</script>
-<style scoped>
-.my-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.my-header .icon-content {
-  display: flex;
-  gap: 20px;
-  justify-content: right;
-}
-
-.icon {
-  cursor: pointer;
-}
-
-.header-item {
-  margin-right: 16px;
-}
-</style>

src/components/Upload/FileUpload.vue

@@ -65,11 +65,11 @@ import {
   UploadProgressEvent,
   UploadFiles,
 } from "element-plus";
-import { TOKEN_KEY } from "@/enums/CacheEnum";
+
 import FileAPI from "@/api/file";
-import { ref, watch } from "vue";
-import { ElMessage } from "element-plus";
+import { getToken } from "@/utils/auth";
 import { ResultEnum } from "@/enums/ResultEnum";
+
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
   /**
@@ -149,7 +149,7 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
-        Authorization: localStorage.getItem(TOKEN_KEY),
+        Authorization: getToken(),
       };
     },
   },

src/components/Upload/ImageUpload.vue

@@ -52,7 +52,7 @@ import {
   UploadProps,
 } from "element-plus";
 import FileAPI from "@/api/file";
-import { TOKEN_KEY } from "@/enums/CacheEnum";
+import { getToken } from "@/utils/auth";
 import { ResultEnum } from "@/enums/ResultEnum";
 
 const emit = defineEmits(["update:modelValue"]);
@@ -79,7 +79,7 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
-        Authorization: localStorage.getItem(TOKEN_KEY),
+        Authorization: getToken(),
       };
     },
   },