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

2025-02-22 23:51:30 +08:00
parent 2be92dacd1
commit b1d3003099
7 changed files with 238 additions and 154 deletions
--- a/src/layout/components/NavBar/components/Notification.vue
+++ b/src/layout/components/NavBar/components/Notification.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">
-            <div v-for="(item, index) in notices" :key="index" class="w500px py-3">
+          <template v-if="noticeList.length > 0">
+            <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 noticeDetailRef = ref();
+const noticeList = ref<NoticePageVO[]>([]);
+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)) {
-          notices.value.unshift({
+        if (!noticeList.value.some((notice) => notice.id == id)) {
+          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) {
-  noticeDetailRef.value.openNotice(id);
-  const index = notices.value.findIndex((notice) => notice.id === id);
-  if (index >= 0) {
-    notices.value.splice(index, 1); // 从消息列表中移除已读消息
-  }
+function handleReadNotice(id: string) {
+  NoticeAPI.getDetail(id).then((data) => {
+    noticeDialogVisible.value = true;
+    noticeDetail.value = data;
+    // 标记为已读
+    const index = noticeList.value.findIndex((notice) => notice.id === id);
+    if (index >= 0) {
+      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,14 +169,47 @@ onBeforeUnmount(() => {
 </script>

 <style lang="scss" scoped>
-:deep(.el-badge) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-:deep(.el-dropdown) {
-  color: currentColor;
+.notice {
+  :deep(.el-badge) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .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>
--- a/src/layout/components/NavBar/components/NavbarRight.vue
+++ b/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();
--- a/src/layout/components/Settings/index.vue
+++ b/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>

--- a/src/types/components.d.ts
+++ b/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"];
--- a/src/views/system/notice/components/MyNotice.vue
+++ b/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>
--- a/src/views/system/notice/components/NoticeDetail.vue
+++ b/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>
--- a/src/views/system/notice/index.vue
+++ b/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
-              type="primary"
-              size="small"
-              link
-              @click="handleOpenNoticeDetailDialog(scope.row.id)"
-            >
+            <el-button type="primary" size="small" link @click="openDetailDialog(scope.row.id)">
              查看
            </el-button>
            <el-button
@@ -168,17 +163,15 @@
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
-      top="4vh"
-      width="1250"
+      top="3vh"
+      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) {
  );
 }

-// 打开通知公告详情弹窗
-function handleOpenNoticeDetailDialog(id: number) {
-  noticeDetailRef.value.openNotice(id);
-}
+const closeDetailDialog = () => {
+  detailDialog.visible = false;
+};
+
+const openDetailDialog = async (id: string) => {
+  const noticeDetail = await NoticeAPI.getDetail(id);
+  currentNotice.value = noticeDetail;
+  detailDialog.visible = true;
+};

 onMounted(() => {
  handleQuery();