Merge branch 'feature/noticews'

src/api/notice.ts

@@ -0,0 +1,209 @@
+import request from "@/utils/request";
+
+const NOTICE_BASE_URL = "/api/v1/notices";
+
+class NoticeAPI {
+  /** 获取通知公告分页数据 */
+  static getPage(queryParams?: NoticePageQuery) {
+    return request<any, PageResult<NoticePageVO[]>>({
+      url: `${NOTICE_BASE_URL}/page`,
+      method: "get",
+      params: queryParams,
+    });
+  }
+
+  /**
+   * 获取通知公告表单数据
+   *
+   * @param id NoticeID
+   * @returns Notice表单数据
+   */
+  static getFormData(id: number) {
+    return request<any, NoticeForm>({
+      url: `${NOTICE_BASE_URL}/${id}/form`,
+      method: "get",
+    });
+  }
+
+  /**
+   * 添加通知公告
+   * @param data Notice表单数据
+   * @returns
+   */
+  static add(data: NoticeForm) {
+    return request({
+      url: `${NOTICE_BASE_URL}`,
+      method: "post",
+      data: data,
+    });
+  }
+
+  /**
+   * 更新通知公告
+   *
+   * @param id NoticeID
+   * @param data Notice表单数据
+   */
+  static update(id: number, data: NoticeForm) {
+    return request({
+      url: `${NOTICE_BASE_URL}/${id}`,
+      method: "put",
+      data: data,
+    });
+  }
+
+  /**
+   * 批量删除通知公告，多个以英文逗号(,)分割
+   *
+   * @param ids 通知公告ID字符串，多个以英文逗号(,)分割
+   */
+  static deleteByIds(ids: string) {
+    return request({
+      url: `${NOTICE_BASE_URL}/${ids}`,
+      method: "delete",
+    });
+  }
+
+  /**
+   * 发布通知
+   *
+   * @param id 被发布的通知公告id
+   * @returns
+   */
+  static releaseNotice(id: number) {
+    return request({
+      url: `${NOTICE_BASE_URL}/release/${id}`,
+      method: "patch",
+    });
+  }
+
+  /**
+   * 撤回通知
+   *
+   * @param id 撤回的通知id
+   * @returns
+   */
+  static recallNotice(id: number): Promise<[]> {
+    return request({
+      url: `${NOTICE_BASE_URL}/recall/${id}`,
+      method: "patch",
+    });
+  }
+
+  /**
+   * 获取未读消息
+   * @returns 消息
+   */
+  static listUnreadNotice() {
+    return request({
+      url: `${NOTICE_BASE_URL}/unread`,
+      method: "get",
+    });
+  }
+
+  /**
+   * 查看通知
+   * @param id
+   */
+  static readNotice(id: number): Promise<NoticeDetailVO> {
+    return request({
+      url: `${NOTICE_BASE_URL}/read/${id}`,
+      method: "PATCH",
+    });
+  }
+
+  /**
+   * 查看通知详情
+   * @param id
+   */
+  static getDetail(id: number): Promise<NoticeDetailVO> {
+    return request({
+      url: `${NOTICE_BASE_URL}/detail/${id}`,
+      method: "get",
+    });
+  }
+
+  /**
+   * 全部已读
+   */
+  static readAllNotice() {
+    return request({
+      url: `${NOTICE_BASE_URL}/readAll`,
+      method: "PATCH",
+    });
+  }
+
+  static getMyNoticePage(queryParams?: NoticePageQuery) {
+    return request<any, PageResult<NoticePageVO[]>>({
+      url: `${NOTICE_BASE_URL}/my/page`,
+      method: "get",
+      params: queryParams,
+    });
+  }
+}
+
+export default NoticeAPI;
+
+/** 通知公告分页查询参数 */
+export interface NoticePageQuery extends PageQuery {
+  /** 标题 */
+  title?: string;
+  /** 发布状态(0-未发布 1已发布 2已撤回) */
+  sendStatus?: number;
+}
+
+/** 通知公告表单对象 */
+export interface NoticeForm {
+  id?: number;
+  /** 通知标题 */
+  title?: string;
+  /** 通知内容 */
+  content?: string;
+  /** 通知类型 */
+  noticeType?: number;
+  /** 优先级(0-低 1-中 2-高) */
+  priority?: number;
+  /** 目标类型(0-全体 1-指定) */
+  tarType?: number;
+  /** 目标ID合集，以,分割 */
+  tarIds?: string;
+}
+
+/** 通知公告分页对象 */
+export interface NoticePageVO {
+  id?: string;
+  /** 通知标题 */
+  title?: string;
+  /** 通知内容 */
+  content?: string;
+  /** 通知类型 */
+  noticeType?: number;
+  /** 发布人 */
+  releaseBy?: bigint;
+  /** 优先级(0-低 1-中 2-高) */
+  priority?: number;
+  /** 目标类型(0-全体 1-指定) */
+  tarType?: number;
+  /** 发布状态(0-未发布 1已发布 2已撤回) */
+  releaseStatus?: number;
+  /** 发布时间 */
+  releaseTime?: Date;
+  /** 撤回时间 */
+  recallTime?: Date;
+}
+
+export interface NoticeDetailVO {
+  id?: string;
+  /** 通知标题 */
+  title?: string;
+  /** 通知内容 */
+  content?: string;
+  /** 通知类型 */
+  noticeType?: number;
+  /** 发布人 */
+  releaseBy?: string;
+  /** 优先级(0-低 1-中 2-高) */
+  priority?: number;
+  /** 发布时间 */
+  releaseTime?: Date;
+}

src/api/socket.ts

@@ -0,0 +1,113 @@
+import { Client } from "@stomp/stompjs";
+import { TOKEN_KEY } from "@/enums/CacheEnum";
+
+const MAX_RETRIES = 3; // 最大重试次数
+const RETRY_DELAY_MS = 5000; // 重试延迟时间，单位：毫秒
+const HEARTBEAT_INTERVAL = 30000; // 心跳间隔时间，单位：毫秒
+
+class Socket {
+  private clients: Map<string, Client> = new Map();
+  private retryCountMap: Map<string, number> = new Map();
+  private subscriptions: Map<string, ((message: string) => void)[]> = new Map();
+  constructor() {}
+
+  public getWebSocketClient(
+    url: string,
+    onMessage: (message: string) => void,
+    onError?: (error: any) => void
+  ): Client {
+    if (this.clients.has(url)) {
+      // 如果连接已存在，添加新的订阅回调
+      this.subscriptions.get(url)?.push(onMessage);
+      return this.clients.get(url)!;
+    } else {
+      const client = this.createClient(url, onMessage, onError);
+      this.clients.set(url, client);
+      this.subscriptions.set(url, [onMessage]);
+      return client;
+    }
+  }
+
+  /**
+   * 创建 WebSocket 客户端
+   * @param url WebSocket订阅地址
+   * @param onMessage 收到消息时的回调
+   * @param onError 出现错误时的回调
+   * @private
+   */
+  private createClient(
+    url: string,
+    onMessage: (message: string) => void,
+    onError?: (error: any) => void
+  ): Client {
+    const token = localStorage.getItem(TOKEN_KEY) || "";
+    const client = new Client({
+      brokerURL: import.meta.env.VITE_APP_WS_ENDPOINT,
+      connectHeaders: {
+        Authorization: token,
+      },
+      heartbeatIncoming: HEARTBEAT_INTERVAL,
+      heartbeatOutgoing: HEARTBEAT_INTERVAL,
+      onConnect: () => {
+        console.log(`Connected to ${url}`);
+        client.subscribe(url, (message) => {
+          onMessage(message.body);
+        });
+      },
+      onStompError: (frame) => {
+        console.error(`Error on ${url}: ${frame.headers["message"]}`);
+        console.error(`Details: ${frame.body}`);
+        if (onError) {
+          onError(frame);
+        }
+        this.handleReconnect(url);
+      },
+      onDisconnect: () => {
+        console.log(`连接失败 ${url}`);
+        this.handleReconnect(url);
+      },
+    });
+
+    client.activate();
+    return client;
+  }
+
+  /**
+   * 处理重连
+   * @param url WebSocket订阅地址
+   */
+  private handleReconnect(url: string) {
+    const retryCount = this.retryCountMap.get(url) || 0;
+
+    if (retryCount < MAX_RETRIES) {
+      this.retryCountMap.set(url, retryCount + 1);
+      console.log(`重试连接 ${url} (${retryCount + 1}/${MAX_RETRIES})...`);
+      setTimeout(
+        () =>
+          this.getWebSocketClient(
+            url,
+            () => {},
+            () => {}
+          ),
+        RETRY_DELAY_MS
+      );
+    } else {
+      console.error(`已经达到最大重试次数 ${url}`);
+      this.retryCountMap.delete(url);
+    }
+  }
+
+  /**
+   * 断开所有 WebSocket 连接
+   */
+  public disconnectAll() {
+    this.clients.forEach((client, url) => {
+      console.log(`断开连接: ${url}`);
+      client.deactivate();
+    });
+    this.clients.clear();
+    this.retryCountMap.clear();
+  }
+}
+
+export default new Socket();

src/api/user.ts

@@ -1,4 +1,5 @@
 import request from "@/utils/request";
+import { AxiosPromise, AxiosResponse } from "axios";
 
 const USER_BASE_URL = "/api/v1/users";
 
@@ -194,6 +195,16 @@ class UserAPI {
       data: data,
     });
   }
+
+  /**
+   *  获取用户下拉列表
+   */
+  static getOptions(): AxiosPromise<OptionType[]> {
+    return request({
+      url: `${USER_BASE_URL}/options`,
+      method: "get",
+    });
+  }
 }
 
 export default UserAPI;

src/components/Notice/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="nav-action-item" style="display: flex; justify-content: center">
+    <el-dropdown trigger="hover">
+      <el-badge :is-dot="messages.length > 0" :offset="offset">
+        <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"
+            >
+              <template v-if="messages.length > 0">
+                <div
+                  class="w-[380px] py-2"
+                  v-for="(item, index) in messages"
+                  :key="index"
+                >
+                  <el-link type="primary" @click="readNotice(item.id)">
+                    <el-badge is-dot />
+                    <el-text class="w-350px" size="default" truncated>
+                      {{ item.title }}
+                    </el-text>
+                  </el-link>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h-150px w-350px">
+                  <el-text class="w-350px" size="default" truncated>
+                    <el-empty :image-size="30" description="暂无消息" />
+                  </el-text>
+                </div>
+              </template>
+            </el-tab-pane>
+          </el-tabs>
+          <el-divider />
+          <div class="flex-x-between">
+            <el-link type="primary" :underline="false" @click="more">
+              <span class="text-xs">查看更多</span>
+              <el-icon class="text-xs">
+                <ArrowRight />
+              </el-icon>
+            </el-link>
+            <el-link
+              v-if="messages.length > 0"
+              type="primary"
+              :underline="false"
+              @click="readAllNotice()"
+            >
+              <span class="text-xs">全部已读</span>
+            </el-link>
+          </div>
+        </div>
+      </template>
+    </el-dropdown>
+    <NoticeModal ref="noticeModalRef" />
+  </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 router from "@/router";
+
+const activeTab = ref(MessageTypeEnum.MESSAGE);
+const messages = ref<any>([]);
+const noticeModalRef = ref(NoticeModal);
+const offset = ref<Number[]>([-15, 15]);
+
+const getFilteredMessages = (type: MessageTypeEnum) => {
+  return messages.value.filter(
+    (message: { type: MessageTypeEnum }) => message.type === type
+  );
+};
+
+/**'
+ * 连接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);
+      //是发布消息
+      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,
+            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
+  );
+  if (index >= 0) {
+    messages.value.splice(index, 1);
+  }
+  noticeModalRef.value?.open(id); // 调用 open 方法，传入 ID
+}
+
+/**
+ * 查看更多
+ */
+function more() {
+  //跳转到我的消息页面
+  router.push({ path: "/notice/notice" });
+}
+
+/**
+ * 全部已读
+ */
+function readAllNotice() {
+  NoticeAPI.readAllNotice().then(() => {
+    messages.value = [];
+  });
+}
+
+onMounted(() => {
+  listNotice();
+  connectWebSocket();
+});
+</script>

src/components/NoticeModal/index.vue

@@ -0,0 +1,110 @@
+<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/WangEditor/index.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: [String],
     default: "",
   },
+  excludeKeys: {
+    type: Array<string>,
+    default: [],
+  },
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -37,8 +41,10 @@ const emit = defineEmits(["update:modelValue"]);
 const modelValue = useVModel(props, "modelValue", emit);
 
 const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
-const mode = ref("default"); // 编辑器模式
+const mode = ref("simple"); // 编辑器模式
-const toolbarConfig = ref({}); // 工具条配置
+const toolbarConfig = ref({
+  excludeKeys: props.excludeKeys,
+}); // 工具条配置
 // 编辑器配置
 const editorConfig = ref({
   placeholder: "请输入内容...",

src/enums/MessageTypeEnum.ts

@@ -1,7 +1,7 @@
 /* 消息类型枚举 */
 export const enum MessageTypeEnum {
   /* 消息 */
-  MESSAGE = "MESSAGE",
+  MESSAGE = "SYSTEM_MESSAGE",
   /* 通知 */
   NOTICE = "NOTICE",
   /* 待办 */
@@ -10,6 +10,6 @@ export const enum MessageTypeEnum {
 
 export const MessageTypeLabels = {
   [MessageTypeEnum.MESSAGE]: "消息",
-  [MessageTypeEnum.NOTICE]: "通知",
+  // [MessageTypeEnum.NOTICE]: "通知",
-  [MessageTypeEnum.TODO]: "待办",
+  // [MessageTypeEnum.TODO]: "待办",
 };

src/layout/components/NavBar/components/NavbarAction.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <template v-if="!isMobile">
-      <!-- 搜索 -->
+      <!--搜索 -->
       <menu-search />
       <!--全屏 -->
       <div class="nav-action-item" @click="toggle">
@@ -23,47 +23,7 @@
       <lang-select class="nav-action-item" />
 
       <!-- 消息通知 -->
-      <el-dropdown class="message nav-action-item" trigger="click">
+      <notice />
-        <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>
 
     <!-- 用户头像 -->
@@ -113,7 +73,6 @@ import {
 } from "@/store";
 import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
-import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -122,53 +81,10 @@ const settingStore = useSettingsStore();
 
 const route = useRoute();
 const router = useRouter();
-
 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" });

src/layout/components/Sidebar/components/SidebarMenuItem.vue

@@ -55,7 +55,7 @@ defineOptions({
 });
 
 import path from "path-browserify";
-import { isExternal } from "@/utils/index";
+import { isExternal } from "@/utils";
 import { RouteRecordRaw } from "vue-router";
 
 const props = defineProps({

src/types/components.d.ts

@@ -74,6 +74,8 @@ 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"];
+    NoticeModal: (typeof import("./../components/NoticeModal/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"];

src/views/dashboard/index.vue

@@ -188,6 +188,8 @@
 </template>
 
 <script setup lang="ts">
+import WebSocketManager from "@/api/socket";
+
 defineOptions({
   name: "Dashboard",
   inheritAttrs: false,
@@ -197,11 +199,8 @@ import { Client } from "@stomp/stompjs";
 
 import { useUserStore } from "@/store/modules/user";
 import { NoticeTypeEnum, getNoticeLabel } from "@/enums/NoticeTypeEnum";
-import { TOKEN_KEY } from "@/enums/CacheEnum";
 import StatsAPI, { VisitStatsVO } from "@/api/log";
 const userStore = useUserStore();
-
-const socketEndpoint = ref(import.meta.env.VITE_APP_WS_ENDPOINT);
 const date: Date = new Date();
 const greetings = computed(() => {
   const hours = date.getHours();
@@ -390,31 +389,10 @@ const getNoticeLevelTag = (type: number) => {
   }
 };
 
-let stompClient: Client;
-
 function connectWebSocket() {
-  stompClient = new Client({
+  WebSocketManager.getWebSocketClient("/topic/onlineUserCount", (message) => {
-    brokerURL: socketEndpoint.value,
+    onlineUserCount.value = JSON.parse(message);
-    connectHeaders: {
-      Authorization: localStorage.getItem(TOKEN_KEY) || "",
-    },
-    debug: (str) => {
-      console.log(str);
-    },
-    onConnect: () => {
-      console.log("连接成功");
-      stompClient.subscribe("/topic/onlineUserCount", (message) => {
-        onlineUserCount.value = JSON.parse(message.body);
-      });
-    },
-    onStompError: (frame) => {
-      console.error("Broker reported error: " + frame.headers["message"]);
-      console.error("Additional details: " + frame.body);
-    },
-    onDisconnect: () => {},
   });
-
-  stompClient.activate();
 }
 
 onMounted(() => {

src/views/demo/wang-editor.vue

@@ -12,8 +12,12 @@ const value = ref("初始内容");
       type="primary"
       target="_blank"
       class="mb-[20px]"
-      >示例源码 请点击>>>></el-link
     >
-    <editor v-model="value" style="height: calc(100vh - 180px)" />
+      示例源码 请点击>>>>
+    </el-link>
+    <editor
+      v-model="value"
+      style=" z-index: 99999;height: calc(100vh - 180px)"
+    />
   </div>
 </template>

src/views/notice/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="通知标题" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="关键字"
+            clearable
+            @keyup.enter="handleQuery()"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery()">
+            <i-ep-search />
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery()">
+            <i-ep-refresh />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+      >
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column
+          align="center"
+          key="title"
+          label="通知标题"
+          prop="title"
+          min-width="150"
+        />
+        <el-table-column
+          align="center"
+          key="noticeType"
+          label="通知类型"
+          prop="noticeType"
+          min-width="150"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.noticeType == 2" type="warning">
+              系统通知
+            </el-tag>
+            <el-tag v-if="scope.row.noticeType == 1" type="success">
+              通知消息
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="releaseBy"
+          label="发布人"
+          prop="releaseBy"
+          min-width="100"
+        />
+        <el-table-column
+          align="center"
+          key="priority"
+          label="优先级"
+          prop="priority"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.priority == 0" type="danger">低</el-tag>
+            <el-tag v-if="scope.row.priority == 1" type="success">中</el-tag>
+            <el-tag v-if="scope.row.priority == 2" type="warning">高</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="releaseTime"
+          label="发布时间"
+          prop="releaseTime"
+          min-width="100"
+        />
+        <el-table-column
+          align="center"
+          key="readStatus"
+          label="状态"
+          prop="readStatus"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.readStatus == 1" type="success">
+              已读
+            </el-tag>
+            <el-tag v-if="scope.row.readStatus == 0" type="warning">
+              未读
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" fixed="right" label="操作" width="80">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handleOpenDialog(scope.row.id)"
+            >
+              查看
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery()"
+      />
+    </el-card>
+    <NoticeModal ref="noticeModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NoticeModal from "@/components/NoticeModal/index.vue";
+
+defineOptions({
+  name: "MyNotice",
+  inheritAttrs: false,
+});
+
+import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/notice";
+
+const queryFormRef = ref(ElForm);
+const pageData = ref<NoticePageVO[]>([]);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+const noticeModalRef = ref(null);
+
+const queryParams = reactive<NoticePageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+/** 查询通知公告 */
+function handleQuery() {
+  loading.value = true;
+  NoticeAPI.getMyNoticePage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/** 重置通知公告查询 */
+function handleResetQuery() {
+  queryFormRef.value!.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+function handleOpenDialog(id: number) {
+  noticeModalRef.value?.open(id);
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>

src/views/system/notice/index.vue

@@ -0,0 +1,504 @@
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form
+        ref="queryFormRef"
+        :model="queryParams"
+        :inline="true"
+        label-suffix=":"
+      >
+        <el-form-item label="标题" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="标题"
+            clearable
+            @keyup.enter="handleQuery()"
+          />
+        </el-form-item>
+        <el-form-item label="发布状态" prop="releaseStatus">
+          <el-select
+            v-model="queryParams.releaseStatus"
+            class="!w-[100px]"
+            clearable
+            placeholder="全部"
+          >
+            <el-option :value="0" label="未发布" />
+            <el-option :value="1" label="已发布" />
+            <el-option :value="2" label="已撤回" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery()">
+            <i-ep-search />
+            搜索
+          </el-button>
+          <el-button @click="handleResetQuery()">
+            <i-ep-refresh />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" class="table-container">
+      <template #header>
+        <el-button
+          v-hasPerm="['system:notice:add']"
+          type="success"
+          @click="handleOpenDialog()"
+        >
+          <i-ep-plus />
+          新增通知
+        </el-button>
+        <el-button
+          v-hasPerm="['system:notice:delete']"
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+        >
+          <i-ep-delete />
+          删除
+        </el-button>
+      </template>
+
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="pageData"
+        highlight-current-row
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="60" />
+        <el-table-column
+          align="center"
+          key="title"
+          label="通知标题"
+          prop="title"
+          min-width="150"
+        />
+        <el-table-column
+          align="center"
+          key="noticeType"
+          label="通知类型"
+          prop="noticeTypeLabel"
+          min-width="150"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.noticeType == 2" type="warning">
+              系统通知
+            </el-tag>
+            <el-tag v-if="scope.row.noticeType == 1" type="success">
+              通知消息
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="releaseBy"
+          label="发布人"
+          prop="releaseBy"
+          min-width="100"
+        />
+        <el-table-column
+          align="center"
+          key="priority"
+          label="优先级"
+          prop="priority"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.priority == 0" type="danger">低</el-tag>
+            <el-tag v-if="scope.row.priority == 1" type="success">中</el-tag>
+            <el-tag v-if="scope.row.priority == 2" type="warning">高</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="tarType"
+          label="通告对象"
+          prop="tarType"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.tarType == 0" type="warning">全体</el-tag>
+            <el-tag v-if="scope.row.tarType == 1" type="success">指定</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="releaseStatus"
+          label="发布状态"
+          prop="releaseStatus"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.releaseStatus == 0" type="warning">
+              未发布
+            </el-tag>
+            <el-tag v-if="scope.row.releaseStatus == 1" type="success">
+              已发布
+            </el-tag>
+            <el-tag v-if="scope.row.releaseStatus == 2" type="primary">
+              已撤回
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          key="releaseTime"
+          label="发布时间"
+          prop="releaseTime"
+          min-width="100"
+        />
+        <el-table-column
+          align="center"
+          key="recallTime"
+          label="撤回时间"
+          prop="recallTime"
+          min-width="100"
+        />
+        <el-table-column align="center" fixed="right" label="操作" width="220">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="examine(scope.row.id)"
+            >
+              查看
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus != 1"
+              v-hasPerm="['system:notice:release']"
+              type="primary"
+              size="small"
+              link
+              @click="releaseNotice(scope.row.id)"
+            >
+              发布
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus == 1"
+              v-hasPerm="['system:notice:recall']"
+              type="primary"
+              size="small"
+              link
+              @click="recallNotice(scope.row.id)"
+            >
+              撤回
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus != 1"
+              v-hasPerm="['system:notice:edit']"
+              type="primary"
+              size="small"
+              link
+              @click="handleOpenDialog(scope.row.id)"
+            >
+              编辑
+            </el-button>
+            <el-button
+              v-if="scope.row.releaseStatus != 1"
+              v-hasPerm="['system:notice:delete']"
+              type="danger"
+              size="small"
+              link
+              @click="handleDelete(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery()"
+      />
+    </el-card>
+
+    <!-- 通知公告表单弹窗 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      top="4vh"
+      width="1250"
+      @close="handleCloseDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="通知标题" prop="title">
+          <el-input v-model="formData.title" placeholder="通知标题" clearable />
+        </el-form-item>
+        <el-form-item label="通知内容" prop="content">
+          <editor
+            v-model="formData.content"
+            style="min-height: 480px; max-height: 500px"
+          />
+        </el-form-item>
+        <el-form-item label="通知类型" prop="noticeType">
+          <dictionary
+            type="button"
+            v-model="formData.noticeType"
+            code="notice_type"
+          />
+        </el-form-item>
+        <el-form-item label="优先级" prop="priority">
+          <el-radio-group v-model="formData.priority">
+            <el-radio :value="0">低</el-radio>
+            <el-radio :value="1">中</el-radio>
+            <el-radio :value="2">高</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="目标类型" prop="tarType">
+          <el-radio-group v-model="formData.tarType">
+            <el-radio :value="0">全体</el-radio>
+            <el-radio :value="1">指定</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          label="指定用户"
+          prop="tarType"
+          v-if="formData.tarType == 1"
+        >
+          <el-select
+            v-model="formData.tarIds"
+            multiple
+            search
+            placeholder="请选择指定用户"
+          >
+            <el-option
+              v-for="item in userOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit()">确定</el-button>
+          <el-button @click="handleCloseDialog()">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <NoticeModal ref="noticeModalRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NoticeModal from "@/components/NoticeModal/index.vue";
+
+defineOptions({
+  name: "Notice",
+  inheritAttrs: false,
+});
+import Editor from "@/components/WangEditor/index.vue";
+
+import NoticeAPI, {
+  NoticePageVO,
+  NoticeForm,
+  NoticePageQuery,
+} from "@/api/notice";
+import UserAPI from "@/api/user";
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<NoticePageQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+const userOptions = ref<OptionType[]>([]);
+// 通知公告表格数据
+const pageData = ref<NoticePageVO[]>([]);
+
+// 弹窗
+const dialog = reactive({
+  title: "",
+  visible: false,
+});
+
+// 通知公告表单数据
+const formData = reactive<NoticeForm>({
+  priority: 0, // 默认优先级为低
+  tarType: 0, // 默认目标类型为全体
+});
+
+const noticeModalRef = ref(NoticeModal);
+
+// 通知公告表单校验规则
+const rules = reactive({
+  title: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
+  content: [
+    {
+      required: true,
+      message: "请输入通知内容",
+      trigger: "blur",
+      validator: (rule: any, value: string, callback: any) => {
+        if (!value.replace(/<[^>]+>/g, "").trim()) {
+          callback(new Error("请输入通知内容"));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
+  noticeType: [
+    { required: true, message: "请选择通知类型", trigger: "change" },
+  ],
+});
+
+/** 查询通知公告 */
+function handleQuery() {
+  loading.value = true;
+  NoticeAPI.getPage(queryParams)
+    .then((data) => {
+      pageData.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/** 重置通知公告查询 */
+function handleResetQuery() {
+  queryFormRef.value!.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/** 行复选框选中记录选中ID集合 */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+function examine(id: number) {
+  noticeModalRef.value?.open(id, true);
+}
+
+/** 打开通知公告弹窗 */
+function handleOpenDialog(id?: number) {
+  getUserOptions();
+  dialog.visible = true;
+  if (id) {
+    dialog.title = "修改通知公告";
+    NoticeAPI.getFormData(id).then((data) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    Object.assign(formData, { priority: 0, tarType: 0 });
+    dialog.title = "新增通知公告";
+  }
+}
+
+function releaseNotice(id: number) {
+  NoticeAPI.releaseNotice(id).then((res) => {
+    ElMessage.success("发布成功");
+    handleQuery();
+  });
+}
+
+function recallNotice(id: number) {
+  NoticeAPI.recallNotice(id).then((res) => {
+    ElMessage.success("撤回成功");
+    handleQuery();
+  });
+}
+
+/** 提交通知公告表单 */
+function handleSubmit() {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      loading.value = true;
+      const id = formData.id;
+      if (id) {
+        NoticeAPI.update(id, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            handleCloseDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        NoticeAPI.add(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            handleCloseDialog();
+            handleResetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/** 关闭通知公告弹窗 */
+function handleCloseDialog() {
+  dialog.visible = false;
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+  formData.id = undefined;
+}
+
+/** 删除通知公告 */
+function handleDelete(id?: number) {
+  const deleteIds = [id || ids.value].join(",");
+  if (!deleteIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      loading.value = true;
+      NoticeAPI.deleteByIds(deleteIds)
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleResetQuery();
+        })
+        .finally(() => (loading.value = false));
+    },
+    () => {
+      ElMessage.info("已取消删除");
+    }
+  );
+}
+
+function getUserOptions() {
+  if (userOptions.value.length == 0) {
+    UserAPI.getOptions().then((res) => {
+      userOptions.value = res;
+    });
+  }
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+<style>
+.editor-wrapper {
+  border: 1px solid #dcdfe6;
+}
+</style>