refactor: ♻️ 通知公告解耦重构

src/components/NoticeDropdown/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="notice">
     <el-dropdown class="h-full items-center justify-center" trigger="click">
-      <el-badge v-if="notices.length > 0" :offset="[0, 15]" :value="notices.length" :max="99">
+      <el-badge v-if="noticeList.length > 0" :offset="[0, 15]" :value="noticeList.length" :max="99">
         <el-icon>
           <Bell />
         </el-icon>
@@ -15,15 +15,15 @@
 
       <template #dropdown>
         <div class="p-5">
-          <template v-if="notices.length > 0">
+          <template v-if="noticeList.length > 0">
-            <div v-for="(item, index) in notices" :key="index" class="w500px py-3">
+            <div v-for="(item, index) in noticeList" :key="index" class="w500px py-3">
               <div class="flex-y-center">
                 <DictLabel v-model="item.type" code="notice_type" size="small" />
                 <el-text
                   size="small"
                   class="w200px cursor-pointer !ml-2 !flex-1"
                   truncated
-                  @click="readNotice(item.id)"
+                  @click="handleReadNotice(item.id)"
                 >
                   {{ item.title }}
                 </el-text>
@@ -35,17 +35,17 @@
             </div>
             <el-divider />
             <div class="flex-x-between">
-              <el-link type="primary" :underline="false" @click="viewMoreNotice">
+              <el-link type="primary" :underline="false" @click="handleViewMoreNotice">
                 <span class="text-xs">查看更多</span>
                 <el-icon class="text-xs">
                   <ArrowRight />
                 </el-icon>
               </el-link>
               <el-link
-                v-if="notices.length > 0"
+                v-if="noticeList.length > 0"
                 type="primary"
                 :underline="false"
-                @click="markAllAsRead"
+                @click="handleMarkAllAsRead"
               >
                 <span class="text-xs">全部已读</span>
               </el-link>
@@ -60,16 +60,39 @@
       </template>
     </el-dropdown>
 
-    <NoticeDetail ref="noticeDetailRef" />
+    <el-dialog
+      v-model="noticeDialogVisible"
+      :title="noticeDetail?.title ?? '通知详情'"
+      width="800px"
+      custom-class="notice-detail"
+    >
+      <div v-if="noticeDetail" class="notice-detail__wrapper">
+        <div class="notice-detail__meta">
+          <span>
+            <el-icon><User /></el-icon>
+            {{ noticeDetail.publisherName }}
+          </span>
+          <span class="ml-2">
+            <el-icon><Timer /></el-icon>
+            {{ noticeDetail.publishTime }}
+          </span>
+        </div>
+
+        <div class="notice-detail__content">
+          <div v-html="noticeDetail.content"></div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
+import NoticeAPI, { NoticePageVO, NoticeDetailVO } from "@/api/system/notice";
 import router from "@/router";
 
-const notices = ref<NoticePageVO[]>([]);
+const noticeList = ref<NoticePageVO[]>([]);
-const noticeDetailRef = ref();
+const noticeDialogVisible = ref(false);
+const noticeDetail = ref<NoticeDetailVO | null>(null);
 
 import { useStomp } from "@/hooks/useStomp";
 const { subscribe, unsubscribe, isConnected } = useStomp();
@@ -82,8 +105,8 @@ watch(
         console.log("收到通知消息：", message);
         const data = JSON.parse(message.body);
         const id = data.id;
-        if (!notices.value.some((notice) => notice.id == id)) {
+        if (!noticeList.value.some((notice) => notice.id == id)) {
-          notices.value.unshift({
+          noticeList.value.unshift({
             id,
             title: data.title,
             type: data.type,
@@ -107,28 +130,32 @@ watch(
  */
 function featchMyNotice() {
   NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then((data) => {
-    notices.value = data.list;
+    noticeList.value = data.list;
   });
 }
 
 // 阅读通知公告
-function readNotice(id: string) {
+function handleReadNotice(id: string) {
-  noticeDetailRef.value.openNotice(id);
+  NoticeAPI.getDetail(id).then((data) => {
-  const index = notices.value.findIndex((notice) => notice.id === id);
+    noticeDialogVisible.value = true;
+    noticeDetail.value = data;
+    // 标记为已读
+    const index = noticeList.value.findIndex((notice) => notice.id === id);
     if (index >= 0) {
-    notices.value.splice(index, 1); // 从消息列表中移除已读消息
+      noticeList.value.splice(index, 1);
     }
+  });
 }
 
 // 查看更多
-function viewMoreNotice() {
+function handleViewMoreNotice() {
   router.push({ path: "/myNotice" });
 }
 
 // 全部已读
-function markAllAsRead() {
+function handleMarkAllAsRead() {
   NoticeAPI.readAll().then(() => {
-    notices.value = [];
+    noticeList.value = [];
   });
 }
 
@@ -142,6 +169,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
+.notice {
   :deep(.el-badge) {
     display: flex;
     align-items: center;
@@ -149,7 +177,39 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100%;
   }
-:deep(.el-dropdown) {
+
-  color: currentColor;
+  .notice-detail {
+    &__wrapper {
+      padding: 0 20px;
+    }
+
+    &__meta {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+      font-size: 13px;
+      color: var(--el-text-color-secondary);
+    }
+
+    &__publisher {
+      margin-right: 24px;
+
+      i {
+        margin-right: 4px;
+      }
+    }
+
+    &__content {
+      max-height: 60vh;
+      padding-top: 16px;
+      margin-bottom: 24px;
+      overflow-y: auto;
+      border-top: 1px solid var(--el-border-color);
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+    }
+  }
 }
 </style>

src/layout/components/NavBar/components/NavbarRight.vue

@@ -14,8 +14,8 @@
       <!-- 语言选择 -->
       <LangSelect />
 
-      <!-- 消息通知 -->
+      <!-- 通知下拉 -->
-      <Notification />
+      <NoticeDropdown />
     </template>
 
     <!-- 用户头像（个人中心、注销登录等） -->
@@ -47,7 +47,6 @@ import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
 import { useAppStore, useSettingsStore, useUserStore, useTagsViewStore } from "@/store";
 
-import Notification from "./Notification.vue";
 import { SidebarColorEnum, ThemeEnum } from "@/enums/ThemeEnum";
 
 const appStore = useAppStore();

src/layout/components/Settings/index.vue

@@ -30,10 +30,10 @@
     <div v-if="!isDark" class="py-1 flex-x-between">
       <span class="text-xs">{{ $t("settings.sidebarColorScheme") }}</span>
       <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
+        <el-radio :value="SidebarColorEnum.CLASSIC_BLUE">{{ $t("settings.classicBlue") }}</el-radio>
         <el-radio :value="SidebarColorEnum.MINIMAL_WHITE">
           {{ $t("settings.minimalWhite") }}
         </el-radio>
-        <el-radio :value="SidebarColorEnum.CLASSIC_BLUE">{{ $t("settings.classicBlue") }}</el-radio>
       </el-radio-group>
     </div>
 

src/types/components.d.ts

@@ -70,6 +70,7 @@ declare module "vue" {
     LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
     MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
     MultiImageUpload: (typeof import("./../components/Upload/MultiImageUpload.vue"))["default"];
+    NoticeDropdown: (typeof import("./../components/Notice/NoticeDropdown.vue"))["default"];
     LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
     PageForm: (typeof import("./../components/CURD/PageForm.vue"))["default"];

src/views/system/notice/components/MyNotice.vue

@@ -59,7 +59,7 @@
         </el-table-column>
         <el-table-column align="center" fixed="right" label="操作" width="80">
           <template #default="scope">
-            <el-button type="primary" size="small" link @click="viewNoticeDetail(scope.row.id)">
+            <el-button type="primary" size="small" link @click="handleReadNotice(scope.row.id)">
               查看
             </el-button>
           </template>
@@ -75,7 +75,29 @@
       />
     </el-card>
 
-    <NoticeDetail ref="noticeDetailRef" />
+    <el-dialog
+      v-model="noticeDialogVisible"
+      :title="noticeDetail?.title ?? '通知详情'"
+      width="800px"
+      custom-class="notice-detail"
+    >
+      <div v-if="noticeDetail" class="notice-detail__wrapper">
+        <div class="notice-detail__meta">
+          <span>
+            <el-icon><User /></el-icon>
+            {{ noticeDetail.publisherName }}
+          </span>
+          <span class="ml-2">
+            <el-icon><Timer /></el-icon>
+            {{ noticeDetail.publishTime }}
+          </span>
+        </div>
+
+        <div class="notice-detail__content">
+          <div v-html="noticeDetail.content"></div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -85,11 +107,9 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/system/notice";
+import NoticeAPI, { NoticePageVO, NoticePageQuery, NoticeDetailVO } from "@/api/system/notice";
 
 const queryFormRef = ref();
-const noticeDetailRef = ref();
-
 const pageData = ref<NoticePageVO[]>([]);
 
 const loading = ref(false);
@@ -100,7 +120,10 @@ const queryParams = reactive<NoticePageQuery>({
   pageSize: 10,
 });
 
-/** 查询通知公告 */
+const noticeDialogVisible = ref(false);
+const noticeDetail = ref<NoticeDetailVO | null>(null);
+
+// 查询通知公告
 function handleQuery() {
   loading.value = true;
   NoticeAPI.getMyNoticePage(queryParams)
@@ -113,18 +136,61 @@ function handleQuery() {
     });
 }
 
-/** 重置通知公告查询 */
+// 重置通知公告查询
 function handleResetQuery() {
   queryFormRef.value!.resetFields();
   queryParams.pageNum = 1;
   handleQuery();
 }
 
-function viewNoticeDetail(id: string) {
+// 阅读通知公告
-  noticeDetailRef.value.openNotice(id);
+function handleReadNotice(id: string) {
+  NoticeAPI.getDetail(id).then((data) => {
+    noticeDialogVisible.value = true;
+    noticeDetail.value = data;
+  });
 }
 
 onMounted(() => {
   handleQuery();
 });
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog__header) {
+  text-align: center;
+}
+.notice-detail {
+  &__wrapper {
+    padding: 0 20px;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    font-size: 13px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__publisher {
+    margin-right: 24px;
+
+    i {
+      margin-right: 4px;
+    }
+  }
+
+  &__content {
+    max-height: 60vh;
+    padding-top: 16px;
+    margin-bottom: 24px;
+    overflow-y: auto;
+    border-top: 1px solid var(--el-border-color);
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+  }
+}
+</style>

src/views/system/notice/components/NoticeDetail.vue

@@ -1,90 +0,0 @@
-<template>
-  <el-dialog
-    v-model="visible"
-    :show-close="false"
-    :fullscreen="isFullscreen"
-    width="50%"
-    append-to-body
-    @close="handleClose"
-  >
-    <template #header>
-      <div class="flex-x-between">
-        <span>通知公告详情</span>
-        <div class="dialog-toolbar">
-          <!-- 全屏/退出全屏按钮 -->
-          <el-button circle @click="toggleFullscreen">
-            <div :class="`i-svg:${isFullscreen ? 'fullscreen-exit' : 'fullscreen'}`" />
-          </el-button>
-          <!-- 关闭按钮 -->
-          <el-button circle @click="handleClose">
-            <template #icon>
-              <Close />
-            </template>
-          </el-button>
-        </div>
-      </div>
-    </template>
-
-    <el-descriptions :column="1">
-      <el-descriptions-item label="标题：">
-        {{ notice.title }}
-      </el-descriptions-item>
-      <el-descriptions-item label="发布状态：">
-        <el-tag v-if="notice.publishStatus == 0" type="info">未发布</el-tag>
-        <el-tag v-else-if="notice.publishStatus == 1" type="success">已发布</el-tag>
-        <el-tag v-else-if="notice.publishStatus == -1" type="warning">已撤回</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="发布人：">
-        {{ notice.publisherName }}
-      </el-descriptions-item>
-      <el-descriptions-item label="发布时间：">
-        {{ notice.publishTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label="公告内容：">
-        <div class="notice-content" v-html="notice.content" />
-      </el-descriptions-item>
-    </el-descriptions>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import NoticeAPI, { NoticeDetailVO } from "@/api/system/notice";
-
-const visible = ref(false);
-const notice = ref<NoticeDetailVO>({});
-const isFullscreen = ref(false); // 控制全屏状态
-
-// 切换全屏
-const toggleFullscreen = () => {
-  isFullscreen.value = !isFullscreen.value;
-};
-
-// 关闭弹窗
-const handleClose = () => {
-  visible.value = false;
-};
-
-// 接收公告详情
-const openNotice = async (id: string) => {
-  visible.value = true;
-  const noticeDetail = await NoticeAPI.getDetail(id);
-  notice.value = noticeDetail;
-};
-
-defineExpose({
-  openNotice,
-});
-</script>
-
-<style scoped>
-.notice-content {
-  width: 100%;
-  overflow-x: hidden;
-}
-
-/* 由于 v-html 内容不受 scoped 样式影响，需要使用 :deep() */
-:deep(.notice-content img) {
-  max-width: 100%;
-  height: auto;
-}
-</style>

src/views/system/notice/index.vue

@@ -103,12 +103,7 @@
         </el-table-column>
         <el-table-column align="center" fixed="right" label="操作" width="150">
           <template #default="scope">
-            <el-button
+            <el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
-              type="primary"
-              size="small"
-              link
-              @click="handleOpenNoticeDetailDialog(scope.row.id)"
-            >
               查看
             </el-button>
             <el-button
@@ -168,17 +163,15 @@
     <el-dialog
       v-model="dialog.visible"
       :title="dialog.title"
-      top="4vh"
+      top="3vh"
-      width="1250"
+      width="80%"
       @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">
+
-          <WangEditor v-model="formData.content" />
-        </el-form-item>
         <el-form-item label="通知类型" prop="type">
           <Dict v-model="formData.type" code="notice_type" />
         </el-form-item>
@@ -201,6 +194,9 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item label="通知内容" prop="content">
+          <WangEditor v-model="formData.content" />
+        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -210,7 +206,45 @@
       </template>
     </el-dialog>
     <!-- 通知公告详情 -->
-    <NoticeDetail ref="noticeDetailRef" />
+    <el-dialog
+      v-model="detailDialog.visible"
+      :show-close="false"
+      width="50%"
+      append-to-body
+      @close="closeDetailDialog"
+    >
+      <template #header>
+        <div class="flex-x-between">
+          <span>通知公告详情</span>
+          <div class="dialog-toolbar">
+            <el-button circle @click="closeDetailDialog">
+              <template #icon>
+                <Close />
+              </template>
+            </el-button>
+          </div>
+        </div>
+      </template>
+      <el-descriptions :column="1">
+        <el-descriptions-item label="标题：">
+          {{ currentNotice.title }}
+        </el-descriptions-item>
+        <el-descriptions-item label="发布状态：">
+          <el-tag v-if="currentNotice.publishStatus == 0" type="info">未发布</el-tag>
+          <el-tag v-else-if="currentNotice.publishStatus == 1" type="success">已发布</el-tag>
+          <el-tag v-else-if="currentNotice.publishStatus == -1" type="warning">已撤回</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="发布人：">
+          {{ currentNotice.publisherName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="发布时间：">
+          {{ currentNotice.publishTime }}
+        </el-descriptions-item>
+        <el-descriptions-item label="公告内容：">
+          <div class="notice-content" v-html="currentNotice.content" />
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
   </div>
 </template>
 
@@ -220,12 +254,16 @@ defineOptions({
   inheritAttrs: false,
 });
 
-import NoticeAPI, { NoticePageVO, NoticeForm, NoticePageQuery } from "@/api/system/notice";
+import NoticeAPI, {
+  NoticePageVO,
+  NoticeForm,
+  NoticePageQuery,
+  NoticeDetailVO,
+} from "@/api/system/notice";
 import UserAPI from "@/api/system/user";
 
 const queryFormRef = ref();
 const dataFormRef = ref();
-const noticeDetailRef = ref();
 
 const loading = ref(false);
 const selectIds = ref<number[]>([]);
@@ -272,6 +310,11 @@ const rules = reactive({
   type: [{ required: true, message: "请选择通知类型", trigger: "change" }],
 });
 
+const detailDialog = reactive({
+  visible: false,
+});
+const currentNotice = ref<NoticeDetailVO>({});
+
 // 查询通知公告
 function handleQuery() {
   loading.value = true;
@@ -400,10 +443,15 @@ function handleDelete(id?: number) {
   );
 }
 
-// 打开通知公告详情弹窗
+const closeDetailDialog = () => {
-function handleOpenNoticeDetailDialog(id: number) {
+  detailDialog.visible = false;
-  noticeDetailRef.value.openNotice(id);
+};
-}
+
+const openDetailDialog = async (id: string) => {
+  const noticeDetail = await NoticeAPI.getDetail(id);
+  currentNotice.value = noticeDetail;
+  detailDialog.visible = true;
+};
 
 onMounted(() => {
   handleQuery();