From 6432d165c71213f90cda5c4ae250dd5b83a8cc05 Mon Sep 17 00:00:00 2001 From: ahao <liuhaoai545@gmail.com> Date: 星期五, 05 一月 2024 12:06:10 +0800 Subject: [PATCH] update 修复启动弹出cjs废弃警告 --- src/layout/components/Sidebar/index.vue | 70 +++++++++++++++++----------------- 1 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index a568c71..3fd5593 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/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,37 @@ </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.getSidebarRoutes()); +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> -- Gitblit v1.9.3