RuoYi
2026-03-24 ab77b8cb8d059dc2b06c91f753f93a99f231ccb7
ruoyi-ui/src/assets/styles/sidebar.scss
@@ -74,6 +74,8 @@
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      height: 44px !important;
      line-height: 44px !important;
    }
    // menu hover
@@ -105,6 +107,96 @@
        background-color: $base-sub-menu-hover !important;
      }
    }
    // theme-dark 深色主题
    &.theme-dark {
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
      border-right: none;
      .el-menu-item.is-active {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
          border-right: 3px solid var(--current-color, #409eff);
          pointer-events: none;
          z-index: 1;
        }
      }
      .el-submenu.is-active > .el-submenu__title {
        color: var(--current-color, #409eff) !important;
      }
      .el-menu-item:not(.is-active),
      .submenu-title-noDropdown,
      .el-submenu__title {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: transparent;
          pointer-events: none;
          z-index: 1;
          transition: background-color 0.2s;
        }
        &:hover::before {
          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
        }
      }
    }
    // theme-light 浅色主题
    &.theme-light {
      border-right: 1px solid #e8eaf0;
      box-shadow: none;
      .el-menu-item,
      .el-submenu__title {
        color: rgba(0, 0, 0, 0.65);
      }
      .el-menu-item.is-active {
        color: var(--current-color, #409eff) !important;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          inset: 0;
          background-color: var(--current-color-light, #ecf5ff);
          border-right: 3px solid var(--current-color, #409eff);
          pointer-events: none;
          z-index: 1;
        }
      }
      .el-submenu.is-active > .el-submenu__title {
        color: var(--current-color, #409eff) !important;
      }
      .el-menu-item:not(.is-active):hover,
      .submenu-title-noDropdown:hover,
      .el-submenu__title:hover {
        background-color: #f5f7fa !important;
        color: rgba(0, 0, 0, 0.85) !important;
      }
      .nest-menu .el-submenu > .el-submenu__title,
      .el-submenu .el-menu-item {
        background-color: #fafafa !important;
        &:hover {
          background-color: #f0f5ff !important;
        }
      }
    }
  }
  .hideSidebar {