角色列表添加

src/layouts/admin/router-view/main.vue

@@ -1,25 +1,22 @@
 <template>
-    <el-main class='layout-main'>
-        <el-scrollbar class='layout-main-scrollbar' :style='layoutMainScrollbarStyle()' ref='mainScrollbarRef'>
-            <router-view v-slot='{ Component }'>
-                <transition :name='config.layout.mainAnimation' mode='out-in'>
-                    <keep-alive :include='state.keepAliveComponentNameList'>
-                        <component :is='Component' :key='state.componentKey' />
-                    </keep-alive>
-                </transition>
-            </router-view>
-        </el-scrollbar>
+    <el-main class="layout-main" :style="mainHeight()">
+        <router-view v-slot="{ Component }">
+            <transition :name="config.layout.mainAnimation" mode="out-in">
+                <keep-alive :include="state.keepAliveComponentNameList">
+                    <component :is="Component" :key="state.componentKey" />
+                </keep-alive>
+            </transition>
+        </router-view>
     </el-main>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
 import { useRoute, type RouteLocationNormalized } from 'vue-router'
-import { mainHeight as layoutMainScrollbarStyle } from '@/utils/layout'
+import { mainHeight } from '@/utils/layout'
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
-import type { ScrollbarInstance } from 'element-plus'
 
 defineOptions({
     name: 'layout/main'
@@ -30,7 +27,6 @@ const { proxy } = useCurrentInstance()
 const route = useRoute()
 const config = useConfig()
 const navTabs = useNavTabs()
-const mainScrollbarRef = ref<ScrollbarInstance>()
 
 const state: {
     componentKey: string
@@ -40,7 +36,7 @@ const state: {
     keepAliveComponentNameList: []
 })
 
-const addKeepAliveComponentName = function(keepAliveName: string | undefined) {
+const addKeepAliveComponentName = function (keepAliveName: string | undefined) {
     if (keepAliveName) {
         let exist = state.keepAliveComponentNameList.find((name: string) => {
             return name === keepAliveName
@@ -52,7 +48,9 @@ const addKeepAliveComponentName = function(keepAliveName: string | undefined) {
 
 onBeforeMount(() => {
     proxy.eventBus.on('onTabViewRefresh', (menu: RouteLocationNormalized) => {
-        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter((name: string) => menu.meta.keepalive !== name)
+        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
+            (name: string) => menu.meta.keepalive !== name
+        )
         state.componentKey = ''
         nextTick(() => {
             state.componentKey = menu.path
@@ -60,7 +58,9 @@ onBeforeMount(() => {
         })
     })
     proxy.eventBus.on('onTabViewClose', (menu: RouteLocationNormalized) => {
-        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter((name: string) => menu.meta.keepalive !== name)
+        state.keepAliveComponentNameList = state.keepAliveComponentNameList.filter(
+            (name: string) => menu.meta.keepalive !== name
+        )
     })
 })
 
@@ -74,7 +74,6 @@ onMounted(() => {
     if (typeof navTabs.state.activeRoute?.meta.keepalive == 'string') {
         addKeepAliveComponentName(navTabs.state.activeRoute?.meta.keepalive)
     }
-    console.log(state.keepAliveComponentNameList)
 })
 
 watch(
@@ -87,10 +86,9 @@ watch(
     }
 )
 
-provide('mainScrollbarRef', mainScrollbarRef)
 </script>
 
-<style scoped lang='scss'>
+<style scoped lang="scss">
 .layout-container .layout-main {
     padding: 0 !important;
     overflow: hidden;