From 35a419ff8b6b2430c41f7f5284cf8ed37ba97048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=83=A1=E5=B0=91=E7=BF=94?= <971366405@qq.com>
Date: Thu, 5 Sep 2024 17:10:29 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20:construction:=20=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

通知公告临时提交
---
 src/api/notice.ts                             |  11 ++
 src/components/Notice/index.vue               | 138 ++++++++++++++++++
 .../NavBar/components/NavbarAction.vue        | 127 +---------------
 src/types/components.d.ts                     |   1 +
 4 files changed, 151 insertions(+), 126 deletions(-)
 create mode 100644 src/components/Notice/index.vue

diff --git a/src/api/notice.ts b/src/api/notice.ts
index fd33b6e8..a395fff0 100644
--- a/src/api/notice.ts
+++ b/src/api/notice.ts
@@ -89,6 +89,17 @@ class NoticeAPI {
       method: "patch",
     });
   }
+
+  /**
+   * 获取我的通知公告n条
+   * @returns 消息
+   */
+  static listNotice() {
+    return request({
+      url: `${NOTICE_BASE_URL}/notice/5`,
+      method: "get",
+    });
+  }
 }
 
 export default NoticeAPI;
diff --git a/src/components/Notice/index.vue b/src/components/Notice/index.vue
new file mode 100644
index 00000000..500fb6a6
--- /dev/null
+++ b/src/components/Notice/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-dropdown class="message nav-action-item" trigger="click">
+    <el-badge is-dot>
+      <div class="flex-center h100% p10px">
+        <i-ep-bell />
+      </div>
+    </el-badge>
+    <template #dropdown>
+      <div class="px-5 py-2">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane
+            v-for="(label, key) in MessageTypeLabels"
+            :label="label"
+            :name="key"
+            :key="key"
+          >
+            <div
+              class="w-[380px] py-2"
+              v-for="message in getFilteredMessages(key)"
+              :key="message.id"
+            >
+              <el-link type="primary">
+                <el-text class="w-350px" size="default" truncated>
+                  {{ message.title }}
+                </el-text>
+              </el-link>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+        <el-divider />
+        <div class="flex-x-between">
+          <el-link type="primary" :underline="false">
+            <span class="text-xs">查看更多</span>
+            <el-icon class="text-xs">
+              <ArrowRight />
+            </el-icon>
+          </el-link>
+          <el-link type="primary" :underline="false">
+            <span class="text-xs">全部已读</span>
+          </el-link>
+        </div>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts">
+import { Client } from "@stomp/stompjs";
+import { TOKEN_KEY } from "@/enums/CacheEnum";
+import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
+import NoticeAPI from "@/api/notice";
+
+const activeTab = ref(MessageTypeEnum.MESSAGE);
+
+const messages = ref([
+  {
+    id: 1,
+    title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  {
+    id: 2,
+    title: "新功能发布：我们的应用程序现在支持多语言功能。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  {
+    id: 3,
+    title: "重要提醒：请定期更改您的密码以保证账户安全。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  // {
+  //   id: 4,
+  //   title: "通知：您有一条未读的系统消息，请及时查看。",
+  //   type: MessageTypeEnum.NOTICE,
+  // },
+  // {
+  //   id: 5,
+  //   title: "新订单通知：您有一笔新的订单需要处理。",
+  //   type: MessageTypeEnum.NOTICE,
+  // },
+  // {
+  //   id: 6,
+  //   title: "审核提醒：您的审核请求已被批准。",
+  //   type: MessageTypeEnum.NOTICE,
+  // },
+  // { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
+  // { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
+  // { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
+]);
+const getFilteredMessages = (type: MessageTypeEnum) => {
+  return messages.value.filter((message) => message.type === type);
+};
+
+const isConnected = ref(false);
+const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
+
+let stompClient: Client;
+
+function connectWebSocket() {
+  console.log("连接消息ws的url：" + socketEndpoint.value);
+  stompClient = new Client({
+    brokerURL: socketEndpoint.value,
+    connectHeaders: {
+      Authorization: localStorage.getItem(TOKEN_KEY) || "",
+    },
+    debug: (str) => {
+      console.log(str);
+    },
+    onConnect: () => {
+      console.log("消息ws连接成功");
+      isConnected.value = true;
+
+      stompClient.subscribe("/user/queue/message", (res) => {
+        console.log("收到消息：" + res.body);
+      });
+    },
+    onStompError: (frame) => {
+      console.error("Broker reported error: " + frame.headers["message"]);
+      console.error("Additional details: " + frame.body);
+    },
+    onDisconnect: () => {
+      isConnected.value = false;
+    },
+  });
+
+  stompClient.activate();
+}
+
+function listNotice() {
+  NoticeAPI.listNotice().then((res) => {
+    console.log(res);
+  });
+}
+
+onMounted(() => {
+  listNotice();
+  connectWebSocket();
+});
+</script>
diff --git a/src/layout/components/NavBar/components/NavbarAction.vue b/src/layout/components/NavBar/components/NavbarAction.vue
index 3ac541a7..339fbb2d 100644
--- a/src/layout/components/NavBar/components/NavbarAction.vue
+++ b/src/layout/components/NavBar/components/NavbarAction.vue
@@ -23,49 +23,7 @@
       <lang-select class="nav-action-item" />
 
       <!-- 消息通知 -->
-      <el-dropdown class="message nav-action-item" trigger="click">
-        <el-badge is-dot>
-          <div class="flex-center h100% p10px">
-            <i-ep-bell />
-          </div>
-        </el-badge>
-        <template #dropdown>
-          <div class="px-5 py-2">
-            <el-tabs v-model="activeTab">
-              <el-tab-pane
-                v-for="(label, key) in MessageTypeLabels"
-                :label="label"
-                :name="key"
-                :key="key"
-              >
-                <div
-                  class="w-[380px] py-2"
-                  v-for="message in getFilteredMessages(key)"
-                  :key="message.id"
-                >
-                  <el-link type="primary">
-                    <el-text class="w-350px" size="default" truncated>
-                      {{ message.title }}
-                    </el-text>
-                  </el-link>
-                </div>
-              </el-tab-pane>
-            </el-tabs>
-            <el-divider />
-            <div class="flex-x-between">
-              <el-link type="primary" :underline="false">
-                <span class="text-xs">查看更多</span>
-                <el-icon class="text-xs">
-                  <ArrowRight />
-                </el-icon>
-              </el-link>
-              <el-link type="primary" :underline="false">
-                <span class="text-xs">全部已读</span>
-              </el-link>
-            </div>
-          </div>
-        </template>
-      </el-dropdown>
+      <notice />
     </template>
 
     <!-- 用户头像 -->
@@ -115,9 +73,6 @@ import {
 } from "@/store";
 import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
-import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
-import { Client } from "@stomp/stompjs";
-import { TOKEN_KEY } from "@/enums/CacheEnum";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -126,54 +81,10 @@ const settingStore = useSettingsStore();
 
 const route = useRoute();
 const router = useRouter();
-const isConnected = ref(false);
-const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
 const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 
 const { isFullscreen, toggle } = useFullscreen();
 
-const activeTab = ref(MessageTypeEnum.MESSAGE);
-
-const messages = ref([
-  {
-    id: 1,
-    title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  {
-    id: 2,
-    title: "新功能发布：我们的应用程序现在支持多语言功能。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  {
-    id: 3,
-    title: "重要提醒：请定期更改您的密码以保证账户安全。",
-    type: MessageTypeEnum.MESSAGE,
-  },
-  // {
-  //   id: 4,
-  //   title: "通知：您有一条未读的系统消息，请及时查看。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // {
-  //   id: 5,
-  //   title: "新订单通知：您有一笔新的订单需要处理。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // {
-  //   id: 6,
-  //   title: "审核提醒：您的审核请求已被批准。",
-  //   type: MessageTypeEnum.NOTICE,
-  // },
-  // { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
-  // { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
-  // { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
-]);
-
-const getFilteredMessages = (type: MessageTypeEnum) => {
-  return messages.value.filter((message) => message.type === type);
-};
-
 /** 打开个人中心 */
 function handleOpenUserProfile() {
   router.push({ name: "Profile" });
@@ -197,42 +108,6 @@ function logout() {
       });
   });
 }
-
-let stompClient: Client;
-
-function connectWebSocket() {
-  console.log("连接消息ws的url：" + socketEndpoint.value);
-  stompClient = new Client({
-    brokerURL: socketEndpoint.value,
-    connectHeaders: {
-      Authorization: localStorage.getItem(TOKEN_KEY) || "",
-    },
-    debug: (str) => {
-      console.log(str);
-    },
-    onConnect: () => {
-      console.log("消息ws连接成功");
-      isConnected.value = true;
-
-      stompClient.subscribe("/user/queue/message", (res) => {
-        console.log("收到消息：" + res.body);
-      });
-    },
-    onStompError: (frame) => {
-      console.error("Broker reported error: " + frame.headers["message"]);
-      console.error("Additional details: " + frame.body);
-    },
-    onDisconnect: () => {
-      isConnected.value = false;
-    },
-  });
-
-  stompClient.activate();
-}
-
-onMounted(() => {
-  connectWebSocket();
-});
 </script>
 <style lang="scss" scoped>
 .nav-action-item {
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index eecb0e33..cd71a592 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -74,6 +74,7 @@ declare module "vue" {
     IEpDownload: (typeof import("~icons/ep/download"))["default"];
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
     MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
+    Notice: (typeof import("./../components/Notice/index.vue"))["default"];
     LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     MultiUpload: (typeof import("./../components/Upload/MultiUpload.vue"))["default"];
     NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"];