1.产品维护产品大类新增时层级不做限制 2.角色管理数据权限范围枚举值修改

gaoluyang

14 小时以前 045da5de062c1b43f53bc7b6a4cf125fbd97a3e5

 src/layout/components/Sidebar/index.vue

@@ -1,95 +1,142 @@
<template>

  <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">

        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"

          :base-path="route.path" />

      </el-menu>

    </el-scrollbar>

  </div>

</template>



<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'



const route = useRoute()

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const permissionStore = usePermissionStore()



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)

console.log(44444, settingsStore.isDark, sideTheme.value)



// 获取菜单背景色

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

  if (meta.activeMenu) {

    return meta.activeMenu

  }

  return path

})

</script>



<style lang="scss" scoped>

.sidebar-container {

  background-color: v-bind(getMenuBackground);



  .scrollbar-wrapper {

    background-color: v-bind(getMenuBackground);

  }



  .el-menu {

    border: none;

    height: 100%;

    width: 100% !important;



    .el-menu-item,

    .el-sub-menu__title {

      &:hover {

        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

      }

    }



    .el-menu-item {

      color: v-bind(getMenuTextColor);



      &.is-active {

        color: var(--menu-active-text, #409eff);

        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;

      }

    }



    .el-sub-menu__title {

      color: v-bind(getMenuTextColor);

    }

  }

}

</style>

<template>
  <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"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<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'

const route = useRoute()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

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(() => 'var(--sidebar-bg)')

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
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
</script>

<style lang="scss" scoped>
.sidebar-container {
  background-color: v-bind(getMenuBackground);
  border-radius: 22px;
  overflow: hidden;

  .scrollbar-wrapper {
    background-color: v-bind(getMenuBackground);
  }

  .el-menu {
    border: none;
    height: 100%;
    width: 100% !important;
    border-radius: 22px;

    .el-menu-item,
    .el-sub-menu__title {
      margin-bottom: 6px;
      border-radius: 14px;
      color: v-bind(getMenuTextColor);

      &:hover {
        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
        border-radius: 14px;
      }
    }

    .el-menu-item {
      &.is-active {
        color: v-bind(theme);
        background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
        font-weight: 600;
      }
    }

    .el-sub-menu__title {
      color: v-bind(getMenuTextColor);
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
      color: v-bind(theme) !important;
      font-weight: 600;
      background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
      border-radius: 14px;
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      overflow: hidden;
      background-clip: padding-box;
    }

    :deep(.el-menu-item.is-active) {
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      overflow: hidden;
      background-clip: padding-box;
      border-radius: 14px;
    }

    :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
    :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
    :deep(.el-menu-item.is-active .menu-title),
    :deep(.el-menu-item.is-active .svg-icon) {
      color: v-bind(theme) !important;
    }

    :deep(.el-sub-menu__title:hover),
    :deep(.el-menu-item:hover) {
      border-radius: 14px;
    }
  }
}
</style>