refactor: ♻️ 导航栏组件代码重构优化

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

@@ -1,143 +0,0 @@
-<template>
-  <div class="flex">
-    <template v-if="!isMobile">
-      <!--搜索 -->
-      <menu-search />
-      <!--全屏 -->
-      <div class="nav-action-item" @click="toggle">
-        <svg-icon
-          :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
-        />
-      </div>
-
-      <!-- 布局大小 -->
-      <el-tooltip
-        :content="$t('sizeSelect.tooltip')"
-        effect="dark"
-        placement="bottom"
-      >
-        <size-select class="nav-action-item" />
-      </el-tooltip>
-
-      <!-- 语言选择 -->
-      <lang-select class="nav-action-item" />
-
-      <!-- 消息通知 -->
-      <notice class="nav-action-item" />
-    </template>
-
-    <!-- 用户头像 -->
-    <el-dropdown class="nav-action-item" trigger="click">
-      <div class="flex-center h100% p10px">
-        <img
-          :src="userStore.userInfo.avatar"
-          class="rounded-full mr-10px w24px h24px"
-        />
-        <span>{{ userStore.userInfo.username }}</span>
-      </div>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item @click="handleOpenUserProfile">
-            {{ $t("navbar.profile") }}
-          </el-dropdown-item>
-          <a
-            target="_blank"
-            href="https://gitee.com/youlaiorg/vue3-element-admin"
-          >
-            <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://juejin.cn/post/7228990409909108793">
-            <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
-          </a>
-          <el-dropdown-item divided @click="logout">
-            {{ $t("navbar.logout") }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-
-    <!-- 设置 -->
-    <template v-if="defaultSettings.showSettings">
-      <div class="nav-action-item" @click="settingStore.settingsVisible = true">
-        <svg-icon icon-class="setting" />
-      </div>
-    </template>
-  </div>
-</template>
-<script setup lang="ts">
-import defaultSettings from "@/settings";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-
-import {
-  useAppStore,
-  useTagsViewStore,
-  useUserStore,
-  useSettingsStore,
-} from "@/store";
-
-const appStore = useAppStore();
-const tagsViewStore = useTagsViewStore();
-const userStore = useUserStore();
-const settingStore = useSettingsStore();
-
-const route = useRoute();
-const router = useRouter();
-const { isFullscreen, toggle } = useFullscreen();
-const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
-
-/**
- * 打开个人中心页面
- */
-function handleOpenUserProfile() {
-  router.push({ name: "Profile" });
-}
-
-/**
- * 注销登出
- */
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-    lockScroll: false,
-  }).then(() => {
-    userStore
-      .logout()
-      .then(() => {
-        tagsViewStore.delAllViews();
-      })
-      .then(() => {
-        router.push(`/login?redirect=${route.fullPath}`);
-      });
-  });
-}
-</script>
-<style lang="scss" scoped>
-.nav-action-item {
-  display: inline-block;
-  min-width: 40px;
-  height: $navbar-height;
-  line-height: $navbar-height;
-  color: var(--el-text-color);
-  text-align: center;
-  cursor: pointer;
-
-  &:hover {
-    background: rgb(0 0 0 / 10%);
-  }
-}
-
-:deep(.el-divider--horizontal) {
-  margin: 10px 0;
-}
-
-.dark .nav-action-item:hover {
-  background: rgb(255 255 255 / 20%);
-}
-
-.layout-top .nav-action-item,
-.layout-mix .nav-action-item {
-  color: #fff;
-}
-</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="navbar__right">
+    <!-- 手机设备（窄屏）不显示 -->
+    <template v-if="!isMobile">
+      <!-- 搜索 -->
+      <MenuSearch />
+
+      <!-- 全屏 -->
+      <Fullscreen />
+
+      <!-- 布局大小 -->
+      <SizeSelect />
+
+      <!-- 语言选择 -->
+      <LangSelect />
+
+      <!-- 消息通知 -->
+      <Notification />
+    </template>
+
+    <!-- 用户头像（个人中心、注销登录等） -->
+    <UserProfile />
+
+    <!-- 设置面板 -->
+    <div
+      v-if="defaultSettings.showSettings"
+      @click="settingStore.settingsVisible = true"
+    >
+      <SvgIcon icon-class="setting" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import defaultSettings from "@/settings";
+import { DeviceEnum } from "@/enums/DeviceEnum";
+
+import { useAppStore, useSettingsStore } from "@/store";
+
+import UserProfile from "./UserProfile.vue";
+import Notification from "./Notification.vue";
+
+const appStore = useAppStore();
+const settingStore = useSettingsStore();
+
+const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+</script>
+
+<style lang="scss" scoped>
+.navbar__right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    display: inline-block;
+    min-width: 40px;
+    height: $navbar-height;
+    line-height: $navbar-height;
+    color: var(--el-text-color);
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(0 0 0 / 10%);
+    }
+  }
+}
+
+:deep(.el-divider--horizontal) {
+  margin: 10px 0;
+}
+
+.dark .navbar__right > *:hover {
+  background: rgb(255 255 255 / 20%);
+}
+
+.layout-top .navbar__right > *,
+.layout-mix .navbar__right > * {
+  color: #fff;
+}
+</style>

src/layout/components/NavBar/components/Notification.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <el-dropdown class="flex-center wh-full align-middle">
+      <div class="wh-full">
+        <el-badge
+          v-if="notices.length > 0"
+          :offset="[-10, 15]"
+          :value="notices.length"
+          :max="99"
+          class="wh-full"
+        >
+          <el-icon class="notification-icon h-full">
+            <Bell />
+          </el-icon>
+        </el-badge>
+        <el-badge v-else class="wh-full">
+          <el-icon class="notification-icon h-full">
+            <Bell />
+          </el-icon>
+        </el-badge>
+      </div>
+
+      <template #dropdown>
+        <div class="p-2">
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="通知" name="notice">
+              <template v-if="notices.length > 0">
+                <div
+                  v-for="(item, index) in notices"
+                  :key="index"
+                  class="w400px flex-x-between p-1"
+                >
+                  <div class="flex-center">
+                    <DictLabel
+                      v-model="item.type"
+                      code="notice_type"
+                      size="small"
+                      class="mr-1"
+                    />
+                    <el-text
+                      type="primary"
+                      size="small"
+                      class="w200px cursor-pointer"
+                      truncated
+                      @click="readNotice(item.id)"
+                    >
+                      {{ item.title }}
+                    </el-text>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无通知" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <span class="text-xs">查看更多</span>
+                  <el-icon class="text-xs">
+                    <ArrowRight />
+                  </el-icon>
+                </el-link>
+                <el-link
+                  v-if="notices.length > 0"
+                  type="primary"
+                  :underline="false"
+                  @click="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
+                </el-link>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="消息" name="message">
+              <template v-if="messages.length > 0">
+                <div
+                  v-for="(item, index) in messages"
+                  :key="index"
+                  class="w400px flex-x-between p-1"
+                >
+                  <div>
+                    <DictLabel
+                      v-model="item.type"
+                      code="notice_type"
+                      size="small"
+                    />
+                    <el-link
+                      type="primary"
+                      class="ml-1"
+                      @click="readNotice(item.id)"
+                    >
+                      {{ item.title }}
+                    </el-link>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无消息" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <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="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
+                </el-link>
+              </div>
+            </el-tab-pane>
+
+            <el-tab-pane label="待办" name="task">
+              <template v-if="tasks.length > 0">
+                <div
+                  v-for="(item, index) in tasks"
+                  :key="index"
+                  class="w400px flex-x-between p-1"
+                >
+                  <div>
+                    <DictLabel
+                      v-model="item.type"
+                      code="notice_type"
+                      size="small"
+                    />
+                    <el-link
+                      type="primary"
+                      class="ml-1"
+                      @click="readNotice(item.id)"
+                    >
+                      {{ item.title }}
+                    </el-link>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无待办" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <span class="text-xs">查看更多</span>
+                  <el-icon class="text-xs">
+                    <ArrowRight />
+                  </el-icon>
+                </el-link>
+                <el-link
+                  v-if="tasks.length > 0"
+                  type="primary"
+                  :underline="false"
+                  @click="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
+                </el-link>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </template>
+    </el-dropdown>
+
+    <NoticeDetail ref="noticeDetailRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
+import WebSocketManager from "@/utils/websocket";
+import router from "@/router";
+
+const activeTab = ref("notice");
+const notices = ref<NoticePageVO[]>([]);
+const messages = ref<any[]>([]);
+const tasks = ref<any[]>([]);
+const noticeDetailRef = ref();
+
+// 获取未读消息列表并连接 WebSocket
+onMounted(() => {
+  NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then(
+    (data) => {
+      notices.value = data.list;
+    }
+  );
+
+  WebSocketManager.subscribeToTopic("/user/queue/message", (message) => {
+    console.log("收到消息：", message);
+    const data = JSON.parse(message);
+    const id = data.id;
+    if (!notices.value.some((notice) => notice.id == id)) {
+      notices.value.unshift({
+        id,
+        title: data.title,
+        type: data.type,
+        publishTime: data.publishTime,
+      });
+
+      ElNotification({
+        title: "您收到一条新的通知消息！",
+        message: data.title,
+        type: "success",
+        position: "bottom-right",
+      });
+    }
+  });
+});
+
+// 阅读通知公告
+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 viewMore() {
+  router.push({ path: "/myNotice" });
+}
+
+// 全部已读
+function markAllAsRead() {
+  NoticeAPI.readAll().then(() => {
+    notices.value = [];
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-top .notification-icon,
+.layout-mix .notification-icon {
+  color: #fff;
+}
+</style>

src/layout/components/NavBar/components/UserProfile.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-dropdown trigger="click">
+    <div class="flex-center h100% p13px">
+      <img
+        :src="userStore.userInfo.avatar"
+        class="rounded-full mr-10px w24px h24px"
+      />
+      <span>{{ userStore.userInfo.username }}</span>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item @click="handleOpenUserProfile">
+          {{ $t("navbar.profile") }}
+        </el-dropdown-item>
+        <a
+          target="_blank"
+          href="https://gitee.com/youlaiorg/vue3-element-admin"
+        >
+          <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
+        </a>
+        <a target="_blank" href="https://juejin.cn/post/7228990409909108793">
+          <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
+        </a>
+        <el-dropdown-item divided @click="logout">
+          {{ $t("navbar.logout") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "UserProfile",
+});
+
+import { useTagsViewStore, useUserStore } from "@/store";
+
+const tagsViewStore = useTagsViewStore();
+const userStore = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+/**
+ * 打开个人中心页面
+ */
+function handleOpenUserProfile() {
+  router.push({ name: "Profile" });
+}
+
+/**
+ * 注销登出
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+
+<style lang="scss" scoped></style>

src/layout/components/NavBar/index.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="navbar-container">
-    <!-- 导航栏面包屑 -->
-    <div class="flex">
-      <hamburger
-        :is-active="appStore.sidebar.opened"
-        @toggle-click="toggleSideBar"
-      />
+  <div class="navbar">
+    <div class="navbar__left">
+      <!-- 展开/收缩菜单  -->
+      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
+      <!-- 面包屑 -->
       <breadcrumb />
     </div>
     <!-- 导航栏右侧 -->
-    <NavbarAction />
+    <NavbarRight />
   </div>
 </template>
 
@@ -18,16 +16,25 @@ import { useAppStore } from "@/store";
 
 const appStore = useAppStore();
 
+// 侧边栏是否打开
+const isSidebarOpened = computed(() => appStore.sidebar.opened);
+
+// 展开/收缩菜单
 function toggleSideBar() {
   appStore.toggleSidebar();
 }
 </script>
 
 <style lang="scss" scoped>
-.navbar-container {
-  @apply flex-x-between;
-
+.navbar {
+  display: flex;
+  justify-content: space-between;
   height: $navbar-height;
   background: var(--el-bg-color);
+
+  &__left {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,25 +1,28 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合布局的顶部的Sidebar -->
-    <div v-if="layout == LayoutEnum.MIX" class="flex w-full">
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+    <!-- 混合布局顶部  -->
+    <div v-if="isMixLayout" class="flex w-full">
+      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <SidebarMixTopMenu class="flex-1" />
-      <NavbarAction />
+      <NavbarRight />
     </div>
-    <!-- 左侧和顶部布局的Sidebar -->
+
+    <!-- 顶部布局顶部 || 左侧布局左侧 -->
     <template v-else>
-      <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <el-scrollbar>
         <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
       </el-scrollbar>
-      <NavbarAction v-if="layout === LayoutEnum.TOP" />
+
+      <!-- 顶部布局导航 -->
+      <NavbarRight v-if="isTopLayout" />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 import { LayoutEnum } from "@/enums/LayoutEnum";
+import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -27,6 +30,10 @@ const permissionStore = usePermissionStore();
 
 const sidebarLogo = computed(() => settingsStore.sidebarLogo);
 const layout = computed(() => settingsStore.layout);
+
+const isMixLayout = computed(() => layout.value === LayoutEnum.MIX);
+const isTopLayout = computed(() => layout.value === LayoutEnum.TOP);
+const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -43,7 +43,7 @@
     <!-- 左侧和顶部布局 -->
     <div v-else :class="{ hasTagsView: showTagsView }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <NavBar v-if="layout === LayoutEnum.LEFT" />
+        <Navbar v-if="layout === LayoutEnum.LEFT" />
         <TagsView v-if="showTagsView" />
       </div>
       <AppMain />