refactor(layout): 调整布局样式并优化轮播卡片组件

云

6 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 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;

      }

    }

  }

}