refactor: ♻️ 优化导航栏、添加消息通知

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

@@ -2,7 +2,7 @@
   <div class="flex">
     <template v-if="!isMobile">
       <!--全屏 -->
-      <div class="setting-item" @click="toggle">
+      <div class="nav-action-item" @click="toggle">
         <svg-icon
           :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
         />
@@ -14,21 +14,21 @@
         effect="dark"
         placement="bottom"
       >
-        <size-select class="setting-item" />
+        <size-select class="nav-action-item" />
       </el-tooltip>
 
       <!-- 语言选择 -->
-      <lang-select class="setting-item" />
+      <lang-select class="nav-action-item" />
 
-      <el-dropdown class="setting-item" trigger="click">
+      <el-dropdown class="message nav-action-item" trigger="click">
-        <el-badge is-dot class="mt-[16px]">
+        <el-badge is-dot>
           <i-ep-bell />
         </el-badge>
       </el-dropdown>
     </template>
 
     <!-- 用户头像 -->
-    <el-dropdown class="setting-item" trigger="click">
+    <el-dropdown class="nav-action-item" trigger="click">
       <div class="flex-center h100% p10px">
         <img
           :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
@@ -56,7 +56,7 @@
 
     <!-- 设置 -->
     <template v-if="defaultSettings.showSettings">
-      <div class="setting-item" @click="settingStore.settingsVisible = true">
+      <div class="nav-action-item" @click="settingStore.settingsVisible = true">
         <svg-icon icon-class="setting" />
       </div>
     </template>
@@ -106,7 +106,7 @@ function logout() {
 }
 </script>
 <style lang="scss" scoped>
-.setting-item {
+.nav-action-item {
   display: inline-block;
   min-width: 40px;
   height: $navbar-height;
@@ -120,15 +120,19 @@ function logout() {
   }
 }
 
+:deep(.message .el-badge__content.is-fixed.is-dot) {
+  top: 10px;
+}
+
 .layout-top,
 .layout-mix {
-  .setting-item,
+  .nav-action-item,
   .el-icon {
     color: var(--el-color-white);
   }
 }
 
-.dark .setting-item:hover {
+.dark .nav-action-item:hover {
   background: rgb(255 255 255 / 20%);
 }
 </style>

src/layout/components/NavBar/components/NavbarLeft.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="flex">
-    <hamburger
-      :is-active="appStore.sidebar.opened"
-      @toggle-click="toggleSideBar"
-    />
-    <breadcrumb />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAppStore } from "@/store";
-
-const appStore = useAppStore();
-
-function toggleSideBar() {
-  appStore.toggleSidebar();
-}
-</script>

src/layout/components/NavBar/index.vue

@@ -1,13 +1,28 @@
 <template>
-  <!-- 顶部导航栏 -->
   <div class="navbar-container">
-    <!-- 导航栏左侧 -->
+    <!-- 导航栏面包屑 -->
-    <NavbarLeft />
+    <div class="flex">
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggle-click="toggleSideBar"
+      />
+      <breadcrumb />
+    </div>
     <!-- 导航栏右侧 -->
-    <NavbarRight />
+    <NavbarAction />
   </div>
 </template>
 
+<script setup lang="ts">
+import { useAppStore } from "@/store";
+
+const appStore = useAppStore();
+
+function toggleSideBar() {
+  appStore.toggleSidebar();
+}
+</script>
+
 <style lang="scss" scoped>
 .navbar-container {
   @apply flex-x-between;

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <!--混合布局-->
+    <!-- layout mix-->
     <div class="flex w-full" v-if="layout == LayoutEnum.MIX">
       <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
       <SidebarMixTopMenu class="flex-1" />
-      <NavbarRight />
+      <NavbarAction />
     </div>
-    <!--左侧布局 || 顶部布局 -->
+    <!-- layout left || layout top -->
     <template v-else>
       <SidebarLogo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
       <el-scrollbar>
         <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
       </el-scrollbar>
-      <NavbarRight v-if="layout === LayoutEnum.TOP" />
+      <NavbarAction v-if="layout === LayoutEnum.TOP" />
     </template>
   </div>
 </template>

src/types/components.d.ts

@@ -62,6 +62,7 @@ declare module "vue" {
     ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"];
     ElUpload: (typeof import("element-plus/es"))["ElUpload"];
     ElWatermark: (typeof import("element-plus/es"))["ElWatermark"];
+    ElSkeleton: (typeof import("element-plus/es"))["ElSkeleton"];
     Form: (typeof import("./../components/CURD/Form.vue"))["default"];
     FunnelChart: (typeof import("./../views/dashboard/components/FunnelChart.vue"))["default"];
     GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
@@ -75,8 +76,7 @@ declare module "vue" {
     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"];
-    NavbarLeft: (typeof import("./../layout/components/NavBar/components/NavbarLeft.vue"))["default"];
+    NavbarAction: (typeof import("./../layout/components/NavBar/components/NavbarAction.vue"))["default"];
-    NavbarRight: (typeof import("./../layout/components/NavBar/components/NavbarRight.vue"))["default"];
     PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
     PageForm: (typeof import("./../components/CURD/PageForm.vue"))["default"];
     PageModal: (typeof import("./../components/CURD/PageModal.vue"))["default"];