优化代码

RuoYi

2025-03-04 d9ecdc9a53610c48dff8176d32d9fd881cc16a22

 src/layout/components/Navbar.vue

@@ -1,8 +1,8 @@
<template>

  <div class="navbar">

    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />

    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />

    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />

    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />



    <div class="right-menu">

      <template v-if="appStore.device !== 'mobile'">

@@ -17,6 +17,13 @@
        </el-tooltip>



        <screenfull id="screenfull" class="right-menu-item hover-effect" />



        <el-tooltip content="主题模式" effect="dark" placement="bottom">

          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">

            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />

            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />

          </div>

        </el-tooltip>



        <el-tooltip content="布局大小" effect="dark" placement="bottom">

          <size-select id="size-select" class="right-menu-item hover-effect" />

@@ -33,7 +40,7 @@
              <router-link to="/user/profile">

                <el-dropdown-item>个人中心</el-dropdown-item>

              </router-link>

              <el-dropdown-item command="setLayout">

              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">

                <span>布局设置</span>

              </el-dropdown-item>

              <el-dropdown-item divided command="logout">

@@ -98,6 +105,10 @@
function setLayout() {

  emits('setLayout');

}



function toggleTheme() {

  settingsStore.toggleTheme()

}

</script>



<style lang='scss' scoped>

@@ -105,7 +116,7 @@
  height: 50px;

  overflow: hidden;

  position: relative;

  background: #fff;

  background: var(--navbar-bg);

  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);



  .hamburger-container {

@@ -150,7 +161,7 @@
      padding: 0 8px;

      height: 100%;

      font-size: 18px;

      color: #5a5e66;

      color: var(--navbar-text);

      vertical-align: text-bottom;



      &.hover-effect {

@@ -161,6 +172,19 @@
          background: rgba(0, 0, 0, 0.025);

        }

      }



      &.theme-switch-wrapper {

        display: flex;

        align-items: center;



        svg {

          transition: transform 0.3s;

          
          &:hover {

            transform: scale(1.15);

          }

        }

      }

    }



    .avatar-container {