From 932d963b61fcbc304883c87be7ca854ecb576317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 28 Apr 2022 08:24:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96topbar=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/variables.module.scss |  12 +--
 src/components/Notice/Index.vue         |  49 +++++++----
 src/components/SizeSelect/index.vue     |  44 +++++-----
 src/layout/components/Navbar.vue        | 105 ++++++++----------------
 src/layout/components/Sidebar/index.vue |  10 +--
 5 files changed, 94 insertions(+), 126 deletions(-)

diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 965769a..50c76af 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -13,6 +13,8 @@ $base-menu-color: #bfcbd9;
 $base-menu-color-active: #f4f4f5;
 $base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
+$base-topBar-background: #ffffff;
+
 $menuHover:#263445;
 // sidebar
 $menuText:#bfcbd9;
@@ -52,9 +54,9 @@ $base-sidebar-width: 210px;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
   logoLightTitleColor: $base-logo-light-title-color;
-  primaryColor: $--color-primary;
-  successColor: $--color-success;
-  dangerColor: $--color-danger;
-  infoColor: $--color-info;
-  warningColor: $--color-warning;
+  // primaryColor: $--color-primary;
+  // successColor: $--color-success;
+  // dangerColor: $--color-danger;
+  // infoColor: $--color-info;
+  // warningColor: $--color-warning;
 }
\ No newline at end of file
diff --git a/src/components/Notice/Index.vue b/src/components/Notice/Index.vue
index 7d68598..a2636e7 100644
--- a/src/components/Notice/Index.vue
+++ b/src/components/Notice/Index.vue
@@ -1,35 +1,48 @@
 <template>
-  <div class="layout-navbars-breadcrumb-user-news">
-    <div class="head-box">
-      <div class="head-box-title">通知</div>
-      <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
-    </div>
-    <div class="content-box">
-      <template v-if="noticeList.length > 0">
-        <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
-          <div>{{ v.noticeTitle }}</div>
-          <div class="content-box-msg" v-html="v.noticeContent"></div>
-          <div class="content-box-time">{{ v.updateTime }}</div>
-        </div>
+  <div>
+    <el-popover placement="bottom" trigger="hover" width="400" popper-class="el-popover-pupop-user-news">
+      <template #reference>
+        <el-badge :is-dot="newsDot" style="line-height: 18px">
+          <el-icon><bell /></el-icon>
+        </el-badge>
       </template>
-      <div class="content-box-empty" v-else>
-        <div class="content-box-empty-margin">
-          <el-icon><Promotion /></el-icon>
-          <div class="mt15">全部已读</div>
+      <div class="layout-navbars-breadcrumb-user-news">
+        <div class="head-box">
+          <div class="head-box-title">通知</div>
+          <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
         </div>
+        <div class="content-box">
+          <template v-if="noticeList.length > 0">
+            <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
+              <div>{{ v.noticeTitle }}</div>
+              <div class="content-box-msg" v-html="v.noticeContent"></div>
+              <div class="content-box-time">{{ v.updateTime }}</div>
+            </div>
+          </template>
+          <div class="content-box-empty" v-else>
+            <div class="content-box-empty-margin">
+              <el-icon><Promotion /></el-icon>
+              <div class="mt15">全部已读</div>
+            </div>
+          </div>
+        </div>
+        <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
       </div>
-    </div>
-    <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
+    </el-popover>
   </div>
 </template>
 
 <script setup name="noticeIndex">
 const { proxy } = getCurrentInstance()
+// 小红点
+const newsDot = ref(true)
+
 const noticeList = computed(() => {
   return proxy.$store.getters.noticeList
 })
 // 全部已读点击
 function onAllReadClick() {
+  newsDot.value = false
   proxy.$modal.msg('敬请期待！！！')
 }
 // 前往通知中心点击
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index b9b2f95..c3d5d13 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
-    <el-dropdown trigger="click" @command="handleSetSize">
-      <div class="size-icon--style">
-        <svg-icon class-name="size-icon" icon-class="size" />
-      </div>
+    <el-dropdown trigger="hover" @command="handleSetSize" style="vertical-align: middle">
+      <svg-icon class-name="size-icon" icon-class="size" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
@@ -16,40 +14,40 @@
 </template>
 
 <script setup>
-const store = useStore();
-const size = computed(() => store.getters.size);
-const route = useRoute();
-const router = useRouter();
-const { proxy } = getCurrentInstance();
+const store = useStore()
+const size = computed(() => store.getters.size)
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
 const sizeOptions = ref([
-  { label: "较大", value: "large" },
-  { label: "默认", value: "default" },
-  { label: "稍小", value: "small" },
-]);
+  { label: '较大', value: 'large' },
+  { label: '默认', value: 'default' },
+  { label: '稍小', value: 'small' },
+])
 
 function refreshView() {
   // In order to make the cached page re-rendered
-  store.dispatch("tagsView/delAllCachedViews", route);
+  store.dispatch('tagsView/delAllCachedViews', route)
 
-  const { fullPath } = route;
+  const { fullPath } = route
 
   nextTick(() => {
     router.replace({
-      path: "/redirect" + fullPath,
-    });
-  });
+      path: '/redirect' + fullPath,
+    })
+  })
 }
 function handleSetSize(size) {
-  proxy.$modal.loading("正在设置布局大小，请稍候...");
-  store.dispatch("app/setSize", size);
-  setTimeout("window.location.reload()", 1000);
+  proxy.$modal.loading('正在设置布局大小，请稍候...')
+  store.dispatch('app/setSize', size)
+  setTimeout('window.location.reload()', 1000)
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .size-icon--style {
   font-size: 18px;
   line-height: 50px;
   padding-right: 7px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index f5e9609..da088ed 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -6,55 +6,34 @@
 
     <div class="right-menu">
       <template v-if="getters.device !== 'mobile'">
-        <header-search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <zr-git class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <zr-doc class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
-
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        <header-search id="header-search" class="right-menu-item" v-waves="'orange'" />
+        <zr-git title="源码地址" class="right-menu-item" />
+        <zr-doc title="文档地址" class="right-menu-item" />
+        <screenfull title="全屏" class="right-menu-item" />
+        <size-select title="布局大小" class="right-menu-item" />
       </template>
-      <!-- 通知 -->
-      <div class="right-menu-item">
-        <el-popover placement="bottom" trigger="click" v-model:visible="isShowUserNewsPopover" width="300" popper-class="el-popover-pupop-user-news">
-          <template #reference>
-            <el-badge @click.stop="isShowUserNewsPopover = !isShowUserNewsPopover" :is-dot="true" slot="reference" style="line-height: 32px">
-              <el-icon><bell /></el-icon>
-            </el-badge>
-          </template>
-          <Notice v-show="isShowUserNewsPopover" />
-        </el-popover>
-      </div>
-      <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-          <div class="avatar-wrapper">
-            <img :src="getters.avatar" class="user-avatar" />
-            <span class="name">{{ getters.name }}</span>
-            <el-icon><ArrowDown /></el-icon>
-          </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <router-link to="/user/profile">
-                <el-dropdown-item>个人中心</el-dropdown-item>
-              </router-link>
-              <el-dropdown-item command="setLayout">
-                <span>布局设置</span>
-              </el-dropdown-item>
-              <el-dropdown-item divided command="logout">
-                <span>退出登录</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </div>
+      <Notice title="通知" class="right-menu-item" />
+
+      <el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
+        <span class="avatar-wrapper">
+          <img :src="getters.avatar" class="user-avatar" />
+          <span class="name">{{ getters.name }}</span>
+          <el-icon><ArrowDown /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <router-link to="/user/profile">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item command="setLayout">
+              <span>布局设置</span>
+            </el-dropdown-item>
+            <el-dropdown-item divided command="logout">
+              <span>退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </div>
   </div>
 </template>
@@ -73,7 +52,6 @@ import Notice from '@/components/Notice/Index'
 
 const store = useStore()
 const getters = computed(() => store.getters)
-const isShowUserNewsPopover = ref(false)
 
 function toggleSideBar() {
   store.dispatch('app/toggleSideBar')
@@ -115,7 +93,6 @@ function setLayout() {
 <style lang="scss" scoped>
 .el-menu {
   // display: inline-table;
-  line-height: 46px !important;
   .el-menu-item {
     vertical-align: center;
   }
@@ -155,40 +132,26 @@ function setLayout() {
   }
 
   .right-menu {
-    float: right;
     height: 100%;
     line-height: 50px;
     display: flex;
+    justify-content: flex-end;
+    align-items: center;
 
     &:focus {
       outline: none;
     }
 
     .right-menu-item {
-      display: inline-block;
       padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
     }
 
     .avatar-container {
-      margin-right: 30px;
-
       .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
+        display: flex;
+        align-items: center;
         .user-avatar {
           cursor: pointer;
           width: 30px;
@@ -196,17 +159,13 @@ function setLayout() {
           border-radius: 10px;
           vertical-align: middle;
           margin-right: 5px;
-					margin-top: 5px;
         }
         .name {
           font-size: 12px;
         }
         i {
           cursor: pointer;
-          position: absolute;
-          right: -30px;
-          top: 15px;
-          font-size: 12px;
+          margin-left: 10px;
         }
       }
     }
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index d745d22..1906ba7 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    :data-theme="sideTheme"
     class="layout-sidebar__container"
     :class="{ 'has-logo': showLogo }"
     :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
@@ -17,12 +18,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path + index"
-          :item="route"
-          :base-path="route.path"
-        />
+        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -58,7 +54,7 @@ const activeMenu = computed(() => {
 .layout-sidebar__container {
   transition: width 0.28s;
   width: $base-sidebar-width !important;
-  // background-color: $base-menu-background;
+  background-color: $base-menu-background;
   height: 100%;
   position: fixed;
   font-size: 0px;