From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/layout/components/Sidebar/index.vue | 78 ++++++++++++++++++++++-----------------
1 files changed, 44 insertions(+), 34 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 9044945..f399cb0 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -2,9 +2,9 @@
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
- <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="getMenuBackground"
- :text-color="getMenuTextColor" :unique-opened="true" :active-text-color="theme" :collapse-transition="false"
- mode="vertical" :class="sideTheme">
+ <el-menu :default-active="activeMenu" :collapse="isCollapse" background-color="transparent"
+ text-color="var(--sidebar-text)" :unique-opened="true" active-text-color="var(--menu-active-text)"
+ :collapse-transition="false" mode="vertical" :class="sideTheme">
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
:base-path="route.path" />
</el-menu>
@@ -15,7 +15,6 @@
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
@@ -28,25 +27,7 @@
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
-const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
-
-// 鑾峰彇鑿滃崟鑳屾櫙鑹�
-const getMenuBackground = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-bg)'
- }
- // 娴呰壊涓婚鏃讹紝鐩存帴鐢ㄤ富棰樿壊
- return sideTheme.value === 'theme-dark' ? variables.menuBg : settingsStore.theme
-})
-
-// 鑾峰彇鑿滃崟鏂囧瓧棰滆壊
-const getMenuTextColor = computed(() => {
- if (settingsStore.isDark) {
- return 'var(--sidebar-text)'
- }
- return sideTheme.value === 'theme-dark' ? variables.menuText : variables.menuLightText
-})
const activeMenu = computed(() => {
const { meta, path } = route
@@ -59,35 +40,64 @@
<style lang="scss" scoped>
.sidebar-container {
- background-color: v-bind(getMenuBackground);
+ background: linear-gradient(180deg, var(--sidebar-grad-from) 0%, var(--sidebar-grad-to) 100%);
.scrollbar-wrapper {
- background-color: v-bind(getMenuBackground);
+ background: transparent;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
+ --el-menu-item-height: 46px;
+ --el-menu-sub-item-height: 42px;
+ padding: 6px 0;
- .el-menu-item,
- .el-sub-menu__title {
+ // 鍦嗚琛屽潡 + hover/婵�娲绘��
+ :deep(.el-menu-item),
+ :deep(.el-sub-menu__title) {
+ position: relative;
+ margin: 3px 10px;
+ border-radius: 8px;
+ color: var(--sidebar-text);
+ background-color: transparent;
+
&:hover {
- background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+ background-color: var(--menu-hover) !important;
+ color: var(--menu-active-text);
}
}
- .el-menu-item {
- color: v-bind(getMenuTextColor);
+ :deep(.el-menu-item.is-active) {
+ background-color: var(--menu-active-bg) !important;
+ color: var(--menu-active-text) !important;
+ font-weight: 600;
- &.is-active {
- color: var(--menu-active-text, #409eff);
- background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+ // 璐翠晶鏍忓乏缂樼殑浜摑鎸囩ず鏉�
+ &::before {
+ content: '';
+ position: absolute;
+ left: -10px;
+ top: 9px;
+ bottom: 9px;
+ width: 3px;
+ border-radius: 0 3px 3px 0;
+ background: var(--menu-active-indicator);
}
}
- .el-sub-menu__title {
- color: v-bind(getMenuTextColor);
+ // 瀛愯彍鍗曞眰鏇存繁涓�妗ｅ簳鑹�
+ :deep(.el-sub-menu .el-menu) {
+ background-color: var(--sidebar-sub-bg) !important;
+
+ .el-menu-item {
+ background-color: transparent;
+ }
+
+ .el-menu-item.is-active {
+ background-color: var(--menu-active-bg) !important;
+ }
}
}
}
--
Gitblit v1.9.3