优化ui布局

src/layout/components/AppMain.vue

@@ -1,54 +0,0 @@
-<template>
-  <section class="app-main">
-    <router-view v-slot="{ Component, route }" :key="route.path">
-      <transition name="fade-transform" mode="out-in">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.path"/>
-        </keep-alive>
-      </transition>
-    </router-view>
-  </section>
-</template>
-
-<script setup>
-let store = useStore()
-const route = useRoute()
-store.dispatch('tagsView/addCachedView', route)
-const cachedViews = computed(() => {
-    return store.state.tagsView.cachedViews
-})
-</script>
-
-<style lang="scss" scoped>
-.app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.fixed-header + .app-main {
-  padding-top: 50px;
-}
-
-.hasTagsView {
-  .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
-  }
-
-  .fixed-header + .app-main {
-    padding-top: 84px;
-  }
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    // padding-right: 17px;
-  }
-}
-</style>

src/layout/components/Settings/index.vue

@@ -47,12 +47,12 @@
       </span>
     </div>
 
-    <div class="drawer-item">
+    <!-- <div class="drawer-item">
       <span>{{ $t('layout.fixed') }} Header</span>
       <span class="comp-style">
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </span>
-    </div>
+    </div> -->
 
     <div class="drawer-item">
       <span>{{ $t('layout.show') }} Logo</span>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,29 +1,30 @@
 <template>
-  <div v-if="!item.hidden">
+  <template v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
           <svg-icon :name="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+
           <template v-if="onlyOneChild.meta.titleKey" #title>
-            <span>{{ $t(onlyOneChild.meta.titleKey) }}</span>
+            {{ $t(onlyOneChild.meta.titleKey) }}
           </template>
           <template v-else-if="onlyOneChild.meta.title" #title>
-            <span>{{ onlyOneChild.meta.title }}</span>
+            {{ onlyOneChild.meta.title }}
           </template>
         </el-menu-item>
       </app-link>
     </template>
 
-    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
-      <template v-slot:title>
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)">
+      <template #title>
         <svg-icon :name="item.meta && item.meta.icon" />
         <span v-if="item.meta && item.meta.titleKey">{{ $t(item.meta.titleKey) }}</span>
         <span v-else-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
       </template>
 
-      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
+      <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" />
     </el-sub-menu>
-  </div>
+  </template>
 </template>
 
 <script setup>

src/layout/components/Sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
+  <el-aside :data-theme="sideTheme" class="layout-sidebar__container" :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
@@ -14,7 +14,7 @@
         <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
-  </div>
+  </el-aside>
 </template>
 
 <script setup>
@@ -43,38 +43,4 @@ const activeMenu = computed(() => {
 
 <style lang="scss">
 @import '@/assets/styles/variables.module.scss';
-
-.layout-sidebar__container {
-  transition: width 0.28s;
-  background-color: var(--base-menu-background);
-  height: 100%;
-  position: fixed;
-  font-size: 0px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1001;
-  overflow: hidden;
-  -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
-  box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
-  .scrollbar-wrapper {
-    overflow-x: hidden;
-  }
-
-  .el-scrollbar {
-    flex: 1;
-  }
-
-  .el-scrollbar__bar.is-vertical {
-    right: 0px;
-  }
-  // 去掉el-menu边框
-  .el-menu {
-    border: none;
-  }
-	
-  .el-sub-menu .el-menu-item {
-    padding-right: 0 !important;
-  }
-}
 </style>

src/layout/components/index.js

@@ -1,4 +1,4 @@
-export { default as AppMain } from './AppMain'
+// export { default as AppMain } from './AppMain'
 export { default as Navbar } from './Navbar'
 export { default as Settings } from './Settings'
 export { default as TagsView } from './TagsView/index.vue'

src/layout/index.vue

@@ -1,36 +1,50 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+  <el-container :class="classObj" class="app-layout" :style="{ '--current-color': theme }">
+    <!-- 移动端打开菜单遮罩 -->
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar class="sidebar-container" v-if="!sidebar.hide" />
-    <div class="main-container" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
-      <div :class="{ 'fixed-header': fixedHeader }">
+    <sidebar v-if="!sidebar.hide" />
+    <el-container class="main-container flex-center" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }">
+      <el-header :class="{ 'fixed-header': fixedHeader }">
         <navbar @setLayout="setLayout" />
         <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
+      </el-header>
+      <el-main class="app-main">
+        <router-view v-slot="{ Component, route }" :key="route.path">
+          <transition name="fade-transform" mode="out-in">
+            <keep-alive :include="cachedViews">
+              <component :is="Component" :key="route.path" />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </el-main>
       <settings ref="settingRef" />
-    </div>
-  </div>
+    </el-container>
+  </el-container>
 </template>
 
 <script setup>
 import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
-import { AppMain, Navbar, Settings, TagsView } from './components'
+import { Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
 
 const store = useStore()
 const theme = computed(() => store.state.settings.theme)
-const sideTheme = computed(() => store.state.settings.sideTheme)
+// const sideTheme = computed(() => store.state.settings.sideTheme)
 const sidebar = computed(() => store.state.app.sidebar)
 const device = computed(() => store.state.app.device)
 const needTagsView = computed(() => store.state.settings.tagsView)
 const fixedHeader = computed(() => store.state.settings.fixedHeader)
 
+const route = useRoute()
+store.dispatch('tagsView/addCachedView', route)
+const cachedViews = computed(() => {
+  return store.state.tagsView.cachedViews
+})
+
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
   openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
   mobile: device.value === 'mobile',
 }))
 
@@ -63,17 +77,28 @@ function setLayout() {
 @import '@/assets/styles/mixin.scss';
 @import '@/assets/styles/variables.module.scss';
 
-.app-wrapper {
-  @include clearfix;
+.main-container {
+  min-height: 100%;
+  width: 100%;
+  flex-direction: column;
   position: relative;
+}
+
+.app-layout {
+  @include clearfix;
+  // position: relative;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
-
+// 移动端打开菜单背景遮罩
 .drawer-bg {
   background: rgba(0, 0, 0, 0.3);
   width: 100%;
@@ -82,20 +107,36 @@ function setLayout() {
   position: absolute;
   z-index: 999;
 }
-
+// 固定header
 .fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
+  position: sticky;
+  position: -webkit-sticky;
   z-index: 9;
-  width: calc(100% - var(--base-sidebar-width));
-  transition: width 0.28s;
-}
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
 }
 
 .mobile .fixed-header {
   width: 100%;
 }
+.app-main {
+  /* 50= navbar  50  */
+  // min-height: calc(100vh - 50px);
+  width: 100%;
+  position: relative;
+  height: 100%;
+}
+
+.el-header {
+  --el-header-padding: 0 0px !important;
+  --el-header-height: 50px !important;
+}
+
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+  .el-header {
+    --el-header-height: 84px !important;
+  }
+}
 </style>