From f367b49dd61f20191de9b0ac24cbd4fa0df1fc93 Mon Sep 17 00:00:00 2001 From: LiuHao <liuhaoai545@gmail.com> Date: 星期日, 19 五月 2024 17:31:05 +0800 Subject: [PATCH] update 优化代码格式 --- src/layout/components/Sidebar/index.vue | 76 +++++++++++++++++++------------------- 1 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index fad0d02..a4f20d0 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -1,19 +1,41 @@ +<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" + :collapse="isCollapse" + :background-color="bgColor" + :text-color="textColor" + :unique-opened="true" + :active-text-color="theme" + :collapse-transition="false" + mode="vertical" + > + <sidebar-item v-for="(r, index) in sidebarRouters" :key="r.path + index" :item="r" :base-path="r.path" /> + </el-menu> + </transition> + </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 { ComponentInternalInstance } from "vue"; +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.getSidebarRoutes()); const showLogo = computed(() => settingsStore.sidebarLogo); const sideTheme = computed(() => settingsStore.sideTheme); const theme = computed(() => settingsStore.theme); @@ -24,32 +46,10 @@ // 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); +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" - :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> -- Gitblit v1.9.3