From ab77b8cb8d059dc2b06c91f753f93a99f231ccb7 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Tue, 24 Mar 2026 10:52:30 +0800
Subject: [PATCH] 优化菜单主题风格
---
ruoyi-ui/src/assets/styles/variables.scss | 25 +------
ruoyi-ui/src/layout/components/Sidebar/index.vue | 2
ruoyi-ui/src/assets/styles/sidebar.scss | 92 ++++++++++++++++++++++++++++++
ruoyi-ui/src/layout/index.vue | 2
4 files changed, 99 insertions(+), 22 deletions(-)
diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss
index 419e374..6c4f47d 100644
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/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 {
diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss
index 8715dc7..6292006 100644
--- a/ruoyi-ui/src/assets/styles/variables.scss
+++ b/ruoyi-ui/src/assets/styles/variables.scss
@@ -9,32 +9,17 @@
$panGreen: #30B08F;
// 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #ffffff;
+$base-menu-background: #1a1f2e;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
-
-// 自定义暗色菜单风格
-/**
-$base-menu-color:hsla(0,0%,100%,.65);
-$base-menu-color-active:#fff;
-$base-menu-background:#001529;
-$base-logo-title-color: #ffffff;
-
-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
-
-$base-sub-menu-background:#000c17;
-$base-sub-menu-hover:#001528;
-*/
+$base-sub-menu-background: #141824;
+$base-sub-menu-hover: rgba(255,255,255,.06);
$base-sidebar-width: 200px;
diff --git a/ruoyi-ui/src/layout/components/Sidebar/index.vue b/ruoyi-ui/src/layout/components/Sidebar/index.vue
index b61f0a4..f954bf3 100644
--- a/ruoyi-ui/src/layout/components/Sidebar/index.vue
+++ b/ruoyi-ui/src/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
<template>
- <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+ <div :class="['sidebar-theme-wrapper', {'has-logo':showLogo}, settings.sideTheme]" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index 4ce77c4..64f44c4 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,5 +1,5 @@
<template>
- <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+ <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme, '--current-color-light': theme + '1a', '--current-color-dark-bg': theme + '33'}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
--
Gitblit v1.9.3