兰宝车间质量管理系统-前端
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
ahaos
2023-12-26 321f21c4982c9cec198a27264d722180c79ef913 
 src/layout/components/Sidebar/index.vue


@@ -1,42 +1,41 @@


<template>


  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">


  <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">


    <logo v-if="showLogo" :collapse="isCollapse" />


    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">


      <el-menu


        :default-active="activeMenu"


        :collapse="isCollapse"


        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"


        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"


        :unique-opened="true"


        :active-text-color="theme"


        :collapse-transition="false"


        mode="vertical"


      >


        <sidebar-item


          v-for="(route, index) in sidebarRouters"


          :key="route.path + index"


          :item="route"


          :base-path="route.path"


        />


      </el-menu>


      <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">


        <el-menu


          :default-active="activeMenu"


          :collapse="isCollapse"


          :background-color="bgColor"


          :text-color="textColor"


          :unique-opened="true"


          :active-text-color="theme"


          :collapse-transition="false"


          mode="vertical"


        >


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


        </el-menu>


      </transition>


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


<script setup lang="ts">


import Logo from './Logo.vue';


import SidebarItem from './SidebarItem.vue';


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


import { RouteRecordRaw } from 'vue-router';




const { proxy } = getCurrentInstance() as ComponentInternalInstance;




const route = useRoute();


const appStore = useAppStore()


const settingsStore = useSettingsStore()


const permissionStore = usePermissionStore()




const sidebarRouters =  computed(() => permissionStore.sidebarRouters);


const appStore = useAppStore();


const settingsStore = useSettingsStore();


const permissionStore = usePermissionStore();


const sidebarRouters = computed<RouteRecordRaw[]>(() => permissionStore.sidebarRouters);


const showLogo = computed(() => settingsStore.sidebarLogo);


const sideTheme = computed(() => settingsStore.sideTheme);


const theme = computed(() => settingsStore.theme);


@@ -49,6 +48,8 @@


    return meta.activeMenu;


  }


  return path;


})


});




const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));


const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));


</script>