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


@@ -1,44 +1,10 @@


<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 { ComponentInternalInstance } from "vue";


const { proxy } = getCurrentInstance() as ComponentInternalInstance;




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 activeMenu = computed(() => {


  const { meta, path } = route;


  // if set path, the sidebar will highlight the path you set


  if (meta.activeMenu) {


    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>




<template>


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


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


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


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


        <el-menu


          :default-active="activeMenu as string"


          :default-active="activeMenu"


          :collapse="isCollapse"


          :background-color="bgColor"


          :text-color="textColor"


@@ -53,3 +19,36 @@


    </el-scrollbar>


  </div>


</template>




<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<RouteRecordRaw[]>(() => permissionStore.sidebarRouters);


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


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


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


const isCollapse = computed(() => !appStore.sidebar.opened);




const activeMenu = computed(() => {


  const { meta, path } = route;


  // if set path, the sidebar will highlight the path you set


  if (meta.activeMenu) {


    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>