页面优化

src/layout/Header/index.vue

@@ -16,7 +16,7 @@
       </div>
       <!-- 用户信息 -->
       <div class="user-info">
-        <el-dropdown>
+        <el-dropdown trigger="click">
           <span class="el-dropdown-link">
             {{ username }}
             <i class="el-icon-arrow-down el-icon--right"></i>
@@ -37,7 +37,6 @@
 <script>
 import { defineComponent, computed, reactive } from 'vue'
 import { useStore } from 'vuex'
-import { useRouter, useRoute } from 'vue-router'
 import FullScreen from './functionList/fullscreen.vue'
 import SizeChange from './functionList/sizeChange.vue'
 import Theme from './functionList/theme.vue'
@@ -53,8 +52,6 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const router = useRouter()
-    const route = useRoute()
     const username = store.getters['user/info'].name
     const layer = reactive({
       show: false,
@@ -85,6 +82,15 @@ export default defineComponent({
 })
 </script>
 
+<style scoped>
+:deep(.el-dropdown-menu__item) {
+  font-size: 14px !important;
+  height: 26px;
+  line-height: 26px;
+  font-weight: bold;
+}
+</style>
+
 <style lang="scss" scoped>
 header {
   display: flex;

src/layout/Tabs/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tabs">
     <el-scrollbar class="scroll-container tags-view-container" ref="scrollbarDom">
-      <Item v-for="menu in menuList" :key="menu.meta.title" :menu="menu" :active="activeMenu.path === menu.path" @close="delMenu(menu)" @reload="pageReload" />
+      <Item v-for="menu in menuList" :key="menu.meta.title" :menu="menu" :active="activeMenu.path === menu.path" @close="delMenu(menu)" />
     </el-scrollbar>
     <div class="handle">
       <el-dropdown placement="bottom">
@@ -10,7 +10,6 @@
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-refresh-left" @click="pageReload">重新加载</el-dropdown-item>
             <el-dropdown-item icon="el-icon-circle-close" :disabled="currentDisabled" @click="closeCurrentRoute">关闭当前标签</el-dropdown-item>
             <el-dropdown-item icon="el-icon-circle-close" :disabled="menuList.length < 3" @click="closeOtherRoute">关闭其他标签</el-dropdown-item>
             <el-dropdown-item icon="el-icon-circle-close" :disabled="menuList.length <= 1" @click="closeAllRoute">关闭所有标签</el-dropdown-item>
@@ -67,15 +66,6 @@ export default defineComponent({
     function onFullscreen() {
       store.commit('app/contentFullScreenChange', !contentFullScreen.value)
     }
-    // 当前页面组件重新加载
-    function pageReload() {
-      const self = route.matched[route.matched.length - 1].instances.default
-      if (self) {
-        self.handleReload()
-      } else {
-        location.reload()
-      }
-    }
 
     // 关闭当前标签，首页不关闭
     function closeCurrentRoute() {
@@ -178,7 +168,6 @@ export default defineComponent({
     return {
       contentFullScreen,
       onFullscreen,
-      pageReload,
       scrollbarDom,
       // 菜单相关
       menuList,

src/layout/Tabs/item.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="tags-view-item" :class="active? 'active' : ''">
+  <div class="tags-view-item" :class="active ? 'active' : ''">
     <router-link :to="menu.path" v-if="menu.meta.title">
       {{ menu.meta.title }}
     </router-link>
-    <i class="el-icon-refresh-right" @click.stop="reload" v-if="active" />
     <i class="el-icon-close" @click.stop="closeTab" v-if="!menu.meta.hideClose" alt="关闭当前标签页"></i>
   </div>
 </template>
@@ -19,82 +18,77 @@ export default defineComponent({
           path: '',
           meta: {
             label: '',
-            hideClose: false
-          }
+            hideClose: false,
+          },
         }
-      }
+      },
     },
     active: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   setup(props, { emit }) {
     // 关闭按钮
     function closeTab() {
       emit('close')
     }
-    // 刷新按钮
-    function reload() {
-      emit('reload')
-    }
     return {
       closeTab,
-      reload
     }
-  }
+  },
 })
 </script>
 
 <style lang="scss" scoped>
-  .tags-view-item {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    height: 24px;
-    line-height: 26px;
-    border: 1px solid var(--system-header-border-color);
+.tags-view-item {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  height: 24px;
+  line-height: 26px;
+  border: 1px solid var(--system-header-border-color);
+  color: var(--system-header-text-color);
+  background: var(--system-header-tab-background);
+  padding: 0 8px;
+  font-size: 12px;
+  margin-left: 5px;
+  margin-top: 4px;
+  border-radius: 2px;
+  a {
     color: var(--system-header-text-color);
-    background: var(--system-header-tab-background);
-    padding: 0 8px;
-    font-size: 12px;
-    margin-left: 5px;
-    margin-top: 4px;
-    border-radius: 2px;
+    height: 26px;
+    display: inline-block;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  .el-icon-refresh-right {
+    display: inline-block;
+    margin-right: 5px;
+  }
+  .el-icon-close {
+    display: inline-block;
+    height: 26px;
+  }
+  &:first-of-type {
+    margin-left: 15px;
+  }
+  &:last-of-type {
+    margin-right: 15px;
+  }
+  &.active {
+    background: var(--system-primary-color);
+    border-color: var(--system-primary-color);
+    color: var(--system-primary-text-color);
     a {
-      color: var(--system-header-text-color);
-      height: 26px;
-      display: inline-block;
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-    .el-icon-refresh-right {
-      display: inline-block;
-      margin-right: 5px;
-    }
-    .el-icon-close {
-      display: inline-block;
-      height: 26px;
-    }
-    &:first-of-type {
-      margin-left: 15px;
-    }
-    &:last-of-type {
-      margin-right: 15px;
-    }
-    &.active {
-      background: var(--system-primary-color);
-      border-color: var(--system-primary-color);
       color: var(--system-primary-text-color);
-      a {
-        color: var(--system-primary-text-color);
-      }
-      &:hover {
-        background: var(--system-primary-color);
-      }
     }
     &:hover {
-      background-color: var(--system-header-item-hover-color);
+      background: var(--system-primary-color);
     }
   }
-</style>
+  &:hover {
+    background-color: var(--system-header-item-hover-color);
+  }
+}
+</style>

src/layout/index.vue

@@ -1,21 +1,20 @@
 <template>
   <el-container style="height: 100vh">
     <div class="mask" v-show="!isCollapse && !contentFullScreen" @click="hideMenu"></div>
-    <el-aside :width="isCollapse ? '60px' : '250px'" :class="isCollapse ? 'hide-aside' : 'show-side'"
-              v-show="!contentFullScreen">
-      <Logo v-if="showLogo"/>
-      <Menu/>
+    <el-aside :width="isCollapse ? '60px' : '250px'" :class="isCollapse ? 'hide-aside' : 'show-side'" v-show="!contentFullScreen">
+      <Logo v-if="showLogo" />
+      <Menu />
     </el-aside>
     <el-container>
       <el-header v-show="!contentFullScreen">
-        <Header/>
+        <Header />
       </el-header>
-      <Tabs v-show="showTabs"/>
+      <Tabs v-show="showTabs" />
       <el-main>
         <router-view v-slot="{ Component }" v-loading="loading">
           <transition name="fade-transform" mode="out-in">
             <keep-alive>
-              <component :is="Component"/>
+              <component :is="Component" />
             </keep-alive>
           </transition>
         </router-view>
@@ -25,15 +24,15 @@
 </template>
 
 <script>
-import {defineComponent, computed, onBeforeMount, onMounted} from 'vue'
-import {useStore} from 'vuex'
-import {useEventListener} from '@vueuse/core'
+import { defineComponent, computed, onBeforeMount, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useEventListener } from '@vueuse/core'
 import Menu from './Menu/index.vue'
 import Logo from './Logo/index.vue'
 import Header from './Header/index.vue'
 import Tabs from './Tabs/index.vue'
-import {useRouter} from 'vue-router'
-import {initWebSocket} from '@/utils/websocket'
+import { useRouter } from 'vue-router'
+import { initWebSocket } from '@/utils/websocket'
 
 export default defineComponent({
   components: {
@@ -53,6 +52,7 @@ export default defineComponent({
     const keepAliveComponentsName = computed(() => store.getters['keepAlive/keepAliveComponentsName'])
     // 页面宽度变化监听后执行的方法
     const resizeHandler = () => {
+      console.log(document.body.clientWidth)
       if (document.body.clientWidth <= 1000 && !isCollapse.value) {
         store.commit('app/isCollapseChange', true)
       } else if (document.body.clientWidth > 1000 && isCollapse.value) {
@@ -93,7 +93,6 @@ export default defineComponent({
       showLogo,
       showTabs,
       contentFullScreen,
-      keepAliveComponentsName,
       hideMenu,
     }
   },

src/router/createNode.js

@@ -1,46 +1,31 @@
 // 1. 用于解决keep-alive需要name的问题，动态生成随机name供keep-alive使用
 // 2. 用于解决transition动画内部结点只能为根元素的问题，单文件可写多结点
-import { defineComponent, h, createVNode, ref, nextTick } from 'vue'
+import { defineComponent, h, createVNode, ref } from 'vue'
 import reload from './reload.vue'
-import NProgress from '@/utils/system/nprogress'
 
 export function createNameComponent(component) {
   return () => {
     return new Promise((res) => {
       component().then((comm) => {
-        const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now();
+        const name = (comm.default.name || 'vueAdminBox') + '$' + Date.now()
         const tempComm = defineComponent({
           name,
           setup() {
-            const isReload = ref(false);
-            let timeOut = null;
-            const handleReload = () => {
-              isReload.value = true;
-              timeOut && clearTimeout(timeOut);
-              NProgress.start();
-              timeOut = setTimeout(() => {
-                nextTick(() => {
-                  NProgress.done();
-                  isReload.value = false;
-                });
-              }, 260);
-            };
+            const isReload = ref(false)
             return {
               isReload,
-              handleReload
-            };
+            }
           },
           render: function () {
             if (this.isReload) {
-              return h('div', { class: 'el-main-box' }, [h(reload)]);
+              return h('div', { class: 'el-main-box' }, [h(reload)])
             } else {
-              return h('div', { class: 'el-main-box' }, [createVNode(comm.default)]);
+              return h('div', { class: 'el-main-box' }, [createVNode(comm.default)])
             }
-          }
-        });
-        res(tempComm);
-      });
-    });
-  };
+          },
+        })
+        res(tempComm)
+      })
+    })
+  }
 }
-