refactor: 🔥 重构纵向横向布局，组件分离，增强可扩展性

src/components/Theme/index.vue

@@ -63,9 +63,9 @@
 </template>
 
 <script lang="ts" setup>
-  import {computed, ref} from 'vue'
+  import {computed, ref,watch} from 'vue'
   import {ElMessage} from "element-plus";
-
+  import {openLoading,closeLoading} from "@/utils/element"
   import SwitchDark from '@/components/SwitchDark/index.vue'
   import {PRIMARY_COLOR} from "@/config/index";
   import {useSettingStore} from "@/store/modules/setting"
@@ -86,7 +86,9 @@
       return SettingStore.themeConfig.showSetting;
     },
     set() {
+
       changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
+
     }
   })
 
@@ -109,8 +111,24 @@
   // 进行配置
   const changeSwitch = (key,val) => {
     SettingStore.setThemeConfig({key, val})
+    if(key==='mode'){
+      openLoading()
+      setTimeout(()=>{
+        closeLoading()
+      },600)
+    }
   }
 
+  // 监听布局变化
+  watch(
+      () => layout.value,
+      () => {
+        const body = document.body as HTMLElement;
+        body.setAttribute("class", `layout-${layout.value}`);
+      },
+      { immediate: true }
+  );
+
   // 修改主题颜色
   const changePrimary = (val)=>{
     if (!val) {

src/layout/Header/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    class="m-layout-header"
-    :class="[
-          SettingStore.themeConfig.fixedHeader?'zb-fixed-header':'zb-no-fixed-header',
-          mode === 'horizontal'?'':isCollapse?'fixed-header-collapse':'fixed-header-no-collapse'
-        ]"
-  >
-    <div class="header" :class="{  transverseMenu: mode === 'horizontal', }">
-      <UMenu v-if="mode === 'horizontal'" />
-
-      <div class="left" v-if="mode === 'vertical'">
-        <CollapseIcon/>
-        <Hamburger />
-      </div>
-
-      <div class="tool-bar-right">
-        <GlobalComSize class="right-item-menu"/>
-        <HeaderSearch class="right-item-menu"/>
-        <Remind class="right-item-menu"/>
-        <ScreenFull class="right-item-menu"/>
-        <Setting class="right-item-menu"/>
-        <Avatar/>
-      </div>
-    </div>
-    <tag-views v-if="showTag" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { UserFilled } from '@element-plus/icons-vue'
-  import TagViews from '../TagsView/index.vue'
-  import GlobalComSize from './components/globalComSize.vue'
-  import Hamburger from './components/Hamburger.vue'
-  import Setting from './components/Setting.vue'
-  import ScreenFull from './components/ScreenFull.vue'
-  import Remind from './components/Remind'
-  import HeaderSearch from './components/HeaderSearch'
-  import CollapseIcon from './components/CollapseIcon'
-  import Avatar from './components/Avatar'
-  import UMenu from '../Sidebar/components/Menu.vue'
-  import { computed, ref } from 'vue'
-  import { useRouter } from 'vue-router'
-  import {useSettingStore} from "@/store/modules/setting"
-
-  const person = ref()
-  const router = useRouter()
-  const SettingStore = useSettingStore()
-
-  const isCollapse = computed(() =>!SettingStore.isCollapse)
-  // menu 布局
-  const mode = computed(() => SettingStore.themeConfig.mode)
-  // 显示 tag
-  const showTag = computed(() =>SettingStore.themeConfig.showTag)
-
-  const handleCollapse = () => {
-    SettingStore.setCollapse(isCollapse.value)
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "./index";
-</style>

src/layout/LayoutHorizontal/HeaderHorizontal/index.scss

@@ -0,0 +1,37 @@
+.m-layout-header {
+  width: 100%;
+  transition: width 0.28s;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  .header-inner {
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    background-color:$menuBg;
+    align-items: center;
+    padding: 0 10px 0 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+}
+.fixed-header{
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+}
+
+.menu-horizontal{
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+  margin-right:20px;
+  :deep(.el-menu-item){
+    height: 100%;
+  }
+}
+
+
+

src/layout/LayoutHorizontal/HeaderHorizontal/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <!--纵向布局-->
+  <Height/>
+  <div
+      class="m-layout-header"
+      :class="{
+          'fixed-header':themeConfig.fixedHeader,
+      }">
+    <div class="header-inner">
+      <el-menu
+          mode="horizontal"
+          :default-active="activeMenu"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          :unique-opened="SettingStore.themeConfig.uniqueOpened"
+          :collapse-transition="false"
+          class="menu-horizontal"
+          :collapse="isCollapse"
+      >
+        <SubItem
+            v-for="route in permission_routes"
+            :key="route.path"
+            :item="route"
+            :base-path="route.path"
+        />
+      </el-menu>
+      <HeaderToolRight/>
+    </div>
+    <TagsView v-if="themeConfig.showTag"/>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+// 引入组件
+import Height from '../../components/Header/components/Height.vue'
+import HeaderToolRight from '../../components/Header/ToolRight.vue'
+import TagsView from '../../components/TagsView/index.vue'
+import SubItem from '../../components/SubMenu/SubItem.vue'
+import { useRoute } from 'vue-router'
+import {usePermissionStore} from "@/store/modules/permission"
+const PermissionStore = usePermissionStore()
+
+const route = useRoute()
+
+// 获取路由
+const permission_routes = computed(() => PermissionStore.permission_routes)
+import {computed} from "vue";
+import {useSettingStore} from "@/store/modules/setting"
+const SettingStore = useSettingStore()
+
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+
+
+// 主题配置
+const themeConfig = computed(() =>SettingStore.themeConfig)
+const isCollapse = computed(() =>!SettingStore.isCollapse)
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+
+</style>
+

src/layout/LayoutHorizontal/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="main-container">
+    <UHeader/>
+    <Main/>
+    <Footer/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Sidebar from '../components/Sidebar/index.vue'
+import UHeader from './HeaderHorizontal/index.vue'
+import Main from '../components/Main/index.vue'
+import Footer from '../components/Footer/index.vue'
+</script>
+
+<style lang="scss" scoped>
+.main-container{
+  display: flex;
+  flex: 1;
+  box-sizing: border-box;
+  flex-direction: column;
+  min-height: 100%;
+}
+</style>

src/layout/LayoutVertical/HeaderVertical/index.scss

@@ -4,34 +4,11 @@
     width: 100%!important;
   }
 }
-.header {
+.show-tag{
-  height: 50px;
+  height: 90px;
-  width: 100%;
-  border-bottom: 1px solid #eee;
-  display: flex;
-  align-items: center;
-  padding: 0 10px 0 0;
-  box-sizing: border-box;
-  justify-content: space-between;
-  .left {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-  .tool-bar-right {
-    display: flex;
-    align-items: center;
-    .right-item-menu{
-      margin-right: 22px;
-    }
-  }
-}
-.zb-fixed-header{
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
 }
+
+
 .zb-no-fixed-header{
   width: 100%!important;;
 }
@@ -43,13 +20,33 @@
   flex-shrink: 0;
   box-sizing: border-box;
   box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
+  .header-inner {
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    padding: 0 10px 0 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
 }
-.fixed-header-collapse{
+.fixed-header{
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+}
+.collapse{
   width: calc(100% - 60px);
 }
-.fixed-header-no-collapse{
+.no-collapse{
   width: calc(100% - 210px);
 }
+
+
+
 .el-dropdown {
   display: flex;
   height: 100%;

src/layout/LayoutVertical/HeaderVertical/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <!--纵向布局-->
+  <Height/>
+  <div
+      class="m-layout-header"
+      :class="{
+          'fixed-header':themeConfig.fixedHeader,
+          'collapse':themeConfig.fixedHeader&&isCollapse,
+          'no-collapse':themeConfig.fixedHeader&&!isCollapse
+      }">
+    <div class="header-inner">
+      <HeaderToolLeft/>
+      <HeaderToolRight/>
+    </div>
+    <TagsView v-if="themeConfig.showTag"/>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+// 引入组件
+import Height from '../../components/Header/components/Height.vue'
+import HeaderToolRight from '../../components/Header/ToolRight.vue'
+import HeaderToolLeft from '../../components/Header/ToolLeft.vue'
+import TagsView from '../../components/TagsView/index.vue'
+
+import {computed} from "vue";
+import {useSettingStore} from "@/store/modules/setting"
+const SettingStore = useSettingStore()
+
+// 主题配置
+const themeConfig = computed(() =>SettingStore.themeConfig)
+const isCollapse = computed(() =>!SettingStore.isCollapse)
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
+

src/layout/LayoutVertical/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <!--纵向布局-->
+  <Sidebar/>
+  <div class="main-container">
+      <HeaderVertical/>
+      <Main/>
+      <Footer/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Sidebar from '../components/Sidebar/index.vue'
+import HeaderVertical from './HeaderVertical/index.vue'
+import Main from '../components/Main/index.vue'
+import Footer from '../components/Footer/index.vue'
+</script>
+
+<style lang="scss" scoped>
+.g-container-layout {
+  height: 100%;
+  width: 100%;
+  .main-container {
+    display: flex;
+    flex: 1;
+    box-sizing: border-box;
+    flex-direction: column;
+  }
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 90;
+}
+</style>

src/layout/Sidebar/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <div :class="{ 'has-logo': themeConfig.showLogo }">
-    <logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <u-menu/>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import UMenu from './components/Menu.vue'
-import logo from './components/Logo.vue'
-import {useSettingStore} from "@/store/modules/setting"
-import { computed } from 'vue'
-
-const SettingStore = useSettingStore()
-// 是否折叠
-const isCollapse = computed(() => !SettingStore.isCollapse)
-// 设置
-const themeConfig = computed(() =>SettingStore.themeConfig )
-</script>
-
-<style lang="scss">
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  //width: 200px;
-  height: 100%;
-}
-.crollbar-wrapper {
-  height: 100%;
-  .el-scrollbar__view {
-    height: 100%;
-  }
-}
-</style>

src/layout/components/Header/ToolLeft.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="m-tool-left">
+    <CollapseIcon/>
+    <Hamburger />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CollapseIcon from './components/CollapseIcon.vue'
+import Hamburger from './components/Hamburger.vue'
+</script>
+
+<style lang="scss" scoped>
+.m-tool-left{
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+</style>

src/layout/components/Header/ToolRight.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="m-tool-right">
+    <GlobalComSize class="item-children"/>
+    <HeaderSearch class="item-children"/>
+    <Remind class="item-children"/>
+    <ScreenFull class="item-children"/>
+    <Setting class="item-children"/>
+    <Avatar/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import GlobalComSize from './components/globalComSize.vue'
+import HeaderSearch from './components/HeaderSearch'
+import Remind from './components/Remind'
+import ScreenFull from './components/ScreenFull.vue'
+import Setting from './components/Setting.vue'
+import Avatar from './components/Avatar'
+</script>
+
+<style lang="scss" scoped>
+.m-tool-right{
+  display: flex;
+  align-items: center;
+  .item-children{
+    margin-right: 22px;
+  }
+}
+</style>

src/layout/components/Header/components/Avatar.vue

@@ -3,7 +3,7 @@
         <span class="el-dropdown-link">
           <el-avatar :size="30" class="avatar" :src="AvatarLogo"/>
           {{userInfo.username}}
-          <el-icon class="el-icon--right">
+          <el-icon class="header-icon el-icon--right">
             <arrow-down />
           </el-icon>
         </span>

src/layout/components/Header/components/HeaderSearch.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="m-headerSearch">
     <el-tooltip effect="dark" content="菜单搜索" placement="bottom">
-      <el-icon class="bell" style="font-size: 22px;" @click="handleSearch"><Search /></el-icon>
+      <el-icon class="bell header-icon" style="font-size: 22px;" @click="handleSearch"><Search /></el-icon>
     </el-tooltip>
     <el-dialog v-model="isShowSearch" width="600px" destroy-on-close   :show-close="false">
       <el-select

src/layout/components/Header/components/Height.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+      :style="{ height:`${themeConfig.showTag?90:50}px`}"
+      v-if="themeConfig.fixedHeader">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed} from "vue";
+import {useSettingStore} from "@/store/modules/setting"
+const SettingStore = useSettingStore()
+const themeConfig = computed(()=>SettingStore.themeConfig)
+</script>
+

src/layout/components/Header/components/Remind.vue

@@ -3,7 +3,7 @@
     <el-popover width="200px" placement="bottom">
       <template #reference>
         <el-badge :value="3" class="item-info-pop">
-          <el-icon class="bell" style="font-size: 20px;"><Bell /></el-icon>
+          <el-icon class="bell header-icon" style="font-size: 20px;"><Bell /></el-icon>
         </el-badge>
       </template>
       <div>

src/layout/components/Header/components/ScreenFull.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="m-screenful">
-    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggle" class="full-screen"/>
+    <el-tooltip effect="dark" content="全屏" placement="bottom">
+      <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="toggle"
+         className="header-icon"
+      />
+    </el-tooltip>
   </div>
 </template>
 
@@ -18,9 +22,4 @@ const { toggle, isFullscreen } = useFullscreen();
   cursor: pointer;
   transition: all 0.3s;
 }
-.transverseMenu {
-  .full-screen {
-    color: white;
-  }
-}
 </style>

src/layout/components/Header/components/globalComSize.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dropdown trigger="hover" @command="setAssemblySize">
-    <svg-icon class-name="size-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
+    <svg-icon class-name="size-icon header-icon" icon-class="size" style="font-size: 20px;cursor: pointer"/>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item v-for="item in assemblySizeList" :key="item" :disabled="globalComSize === item" :command="item">

src/layout/components/Mobile/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
+</template>
+
+<script lang="ts" setup>
+import {computed} from "vue";
+import { useResizeHandler } from '../../hooks/useResizeHandler'
+import {useSettingStore} from "@/store/modules/setting"
+
+let { device } = useResizeHandler()
+const SettingStore = useSettingStore()
+
+// 是否折叠
+const isCollapse = computed(() => !SettingStore.isCollapse)
+
+// 移动端点击
+const handleClickOutside = () => {
+  SettingStore.closeSideBar({ withoutAnimation: false })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/components/Sidebar/components/SubItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <template v-if="!item.hidden">
+    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
+          <el-icon :size="20">
+            <component :is="onlyOneChild?.meta.icon"></component>
+          </el-icon>
+          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
+      <template #title>
+        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
+        <span>{{ item.meta && item.meta.title }}</span>
+      </template>
+      <sub-item
+          v-for="child in item.children"
+          :key="child.path"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { isExternal } from '@/utils/validate.js'
+import AppLink from '../../SubMenu/Link.vue'
+import path from 'path-browserify'
+import { ref, computed } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  basePath: {
+    type: String,
+    default: '',
+  },
+})
+
+const onlyOneChild = ref(null)
+const hasOneShowingChild = (children = [], parent) => {
+  const showingChildren = children.filter((item) => {
+    // 过滤掉需要隐藏的菜单
+    if (item.hidden) {
+      return false
+    } else {
+      // 临时设置（如果只有一个显示子项，则将使用）
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // 当只有一个子路由器时，默认情况下会显示该子路由器
+  if (showingChildren.length === 1) {
+    return true
+  }
+  // 如果没有要显示的子路由器，则显示父路由器
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+}
+
+const resolvePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  return path.resolve(props.basePath, routePath)
+}
+</script>

src/layout/components/Sidebar/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div  class="sidebar-container" :class="{ 'has-logo': themeConfig.showLogo }">
+    <Logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+          :default-active="activeMenu"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          :unique-opened="SettingStore.themeConfig.uniqueOpened"
+          :collapse-transition="false"
+          class="el-menu-vertical-demo"
+          :collapse="isCollapse"
+      >
+        <SubItem
+            v-for="route in permission_routes"
+            :key="route.path"
+            :item="route"
+            :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Logo from './components/Logo.vue'
+import SubItem from '../SubMenu/SubItem.vue'
+import {useSettingStore} from "@/store/modules/setting"
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import {usePermissionStore} from "@/store/modules/permission"
+// 在setup中获取store
+const route = useRoute()
+const PermissionStore = usePermissionStore()
+const SettingStore = useSettingStore()
+
+
+
+// 是否折叠
+const isCollapse = computed(() => !SettingStore.isCollapse)
+// 设置
+const themeConfig = computed(() =>SettingStore.themeConfig )
+
+// 获取路由
+const permission_routes = computed(() => PermissionStore.permission_routes)
+
+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 mode = computed(() => SettingStore.themeConfig.mode)
+</script>
+
+<style lang="scss">
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  height: 100%;
+}
+</style>

src/layout/index.vue

@@ -1,37 +1,44 @@
 <template>
   <div class="g-container-layout" :class="classObj">
-    <div v-if="device === 'mobile' && !isCollapse" class="drawer-bg" @click="handleClickOutside" />
+    <Mobile/>
-    <Sidebar class="sidebar-container" v-if="mode === 'vertical'" />
+    <LayoutVertical v-if="device === 'mobile'"/>
-    <div
+    <component :is="LayoutComponents[themeConfig.mode]" v-else/>
-      class="main-container"
+    <Theme />
-      :class="{
-        hideSliderLayout: mode === 'horizontal',
-      }"
-    >
-      <div :style="{ height:`${showTag?90:50}px`  }" v-if="SettingStore.themeConfig.fixedHeader"></div>
-      <UHeader/>
-      <Main/>
-      <Footer/>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { computed, defineComponent, ref } from 'vue'
+  import { computed,watch } from 'vue'
+  import Theme from '@/components/Theme/index.vue'
+  import Mobile from './components/Mobile/index.vue'
   import {useSettingStore} from "@/store/modules/setting"
-  import Sidebar from './Sidebar/index.vue'
-  import UHeader from './Header/index.vue'
-  import Main from './Main/index.vue'
-  import Footer from './Footer/index.vue'
   import { useResizeHandler } from './hooks/useResizeHandler'
+  import LayoutVertical from './LayoutVertical/index.vue'
+  import LayoutHorizontal from './LayoutHorizontal/index.vue'
 
   const SettingStore = useSettingStore()
+  const themeConfig = computed(() => SettingStore.themeConfig)
+  const LayoutComponents = {
+    horizontal: LayoutHorizontal,
+    vertical: LayoutVertical,
+  };
 
   // 是否折叠
   const isCollapse = computed(() => {
     return !SettingStore.isCollapse
   })
   let { device } = useResizeHandler()
+
+  watch(()=>device.value,(val)=>{
+    console.log('themeConfig.value.mode',themeConfig.value.mode)
+    let vertical = val==='mobile'?'vertical':themeConfig.value.mode
+    const body = document.body as HTMLElement;
+    body.setAttribute("class", `layout-${vertical}`);
+  },{
+    immediate:true
+  })
+
+
   // 当屏幕切换的时候进行变换
   const classObj = computed(() => {
     return {
@@ -41,13 +48,9 @@
       mobile: device.value === 'mobile',
     }
   })
-  // 移动端点击
-  const handleClickOutside = () => {
-    SettingStore.closeSideBar({ withoutAnimation: false })
-  }
-  const showTag = computed(() => SettingStore.themeConfig.showTag)
 
-  const mode = computed(() => SettingStore.themeConfig.mode)
+
+
 </script>
 
 <style lang="scss" scoped>

src/permission.ts

@@ -33,7 +33,6 @@ router.beforeEach(async(to, from, next) => {
                 const accessRoutes = await PermissionStore.generateRoutes(UserStore.roles)
                 hasRoles = false
                 accessRoutes.forEach(item => router.addRoute(item)) // 动态添加访问路由表
-                console.log('accessRoutes',accessRoutes)
                 next({ ...to, replace: true }) // // 这里相当于push到一个页面 不在进入路由拦截
             }else {
                 next() // // 如果不传参数就会重新执行路由拦截，重新进到这里

src/styles/common.scss

@@ -11,6 +11,7 @@ body{
   background: #f0f2f5;
 }
 
+
 /* 常用 flex */
 .flex-center {
   display: flex;
@@ -55,8 +56,6 @@ body{
 }
 
 
-
-
 /* nprogress样式 */
 #nprogress .bar {
   background: $primaryColor !important;
@@ -85,3 +84,13 @@ body{
   padding: 20px;
   box-sizing: border-box;
 }
+
+.layout-horizontal{
+  .header-icon{
+    color:#bfcbd9!important;
+  }
+  .el-dropdown-link{
+    color:#bfcbd9!important;
+  }
+}
+

src/styles/element-dark.scss

@@ -58,22 +58,8 @@ html.dark {
   body{
     background: none;
   }
-  .tags-wrap-container{
-    border: var(--zb-border-light);
-    border-top:none ;
-    border-left: none;
-    box-sizing: border-box;
 
-    .tags-view{
+
-      background: none;
-    }
-  }
-  .m-container-layout{
-    .m-container-layout-inner{
-      background: none;
-      color: var(--el-text-color-primary) !important;
-    }
-  }
   // 编辑器
   .w-e-toolbar, .w-e-text-container, .w-e-menu-panel{
     background: none!important;
@@ -85,7 +71,7 @@ html.dark {
 
   #app{
     .sidebar-container{
-      background: none!important;
+      background: var(--el-bg-color)!important;
       & .el-menu .el-sub-menu > .el-sub-menu__title,
       & .el-sub-menu .el-menu-item {
         background-color: var(--el-bg-color) !important;
@@ -104,31 +90,11 @@ html.dark {
       }
     }
   }
-  .zb-pro-table .header{
-    background: none!important;
-    border: var(--zb-border-light);
-  }
-  .zb-pro-table .footer{
-    background: none!important;
-    border: var(--zb-border-light);
-  }
-  // m-layout-header
-  .m-layout-header{
-    color: var(--el-text-color-primary) !important;
-    background: none;
-    .header{
-      border:var(--zb-border-light);
-      border-left:none ;
-    }
 
-  }
+
-  .el-scrollbar{
+
-    border:var(--zb-border-light);
-    border-top:none ;
-  }
   .sidebar-logo-container{
     background: none;
-    height: 60px;
     box-sizing: border-box;
     border:var(--zb-border-light);
   }
@@ -141,12 +107,6 @@ html.dark {
     color: var(--el-text-color-primary) !important;
   }
 
-  // icon
-  .m-info .bell,
-  .m-setting .bell,
-  .m-headerSearch .bell{
-    color: white!important;
-  }
 
   .el-table__header th {
     font-weight: bold;
@@ -156,25 +116,90 @@ html.dark {
     background: none;
     color: white;
   }
-  .app-container-inner{
+
-    background: none;
+
-  }
+  .zb-pro-table{
-  .list-group-item{
-    background: none!important;
-    border: 1px solid white;
-  }
-  .app-container{
     .header{
-      background: none;
+      background: none!important;
+      border: var(--zb-border-light);
     }
     .footer{
+      background: none!important;
+      border: var(--zb-border-light);
+    }
+    .el-table__header th{
+      color: white!important;
+    }
+  }
+
+  // header
+  .m-layout-header{
+    color: var(--el-text-color-primary) !important;
+    .header-inner{
+      background-color: var(--el-bg-color)!important;
+      border-bottom:var(--zb-border-light);
+      .header-icon{
+        color:#bfcbd9!important;
+      }
+    }
+    // tagviews
+    .m-tags-view{
+      background: var(--el-bg-color)!important;
+      border: var(--zb-border-light);
+      border-top:none ;
+      border-left: none;
+      box-sizing: border-box;
+      .el-tabs--card>.el-tabs__header{
+        border-bottom: none!important;
+      }
+    }
+
+
+  }
+
+  // 内容区
+  .app-main{
+    .echarts-map{
+      background: var(--el-bg-color)!important;
+    }
+    .app-echarts{
+      background: none;
+    }
+
+    .app-container{
+      .header{
+        background: none;
+      }
+      .footer{
+        background: none;
+      }
+    }
+    .m-container-layout{
+      .m-container-layout-inner{
+        background: none;
+        color: var(--el-text-color-primary) !important;
+      }
+    }
+
+    .item-group-item{
+      background: none!important;
+      border: var(--zb-border-light);
+      color: #cccccc;
+    }
+
+    .app-container-inner{
       background: none;
     }
   }
-  .zb-pro-table .el-table__header th{
+
-    color: white!important;
+  // 底部
+  .footer-layout{
+    border-top:var(--zb-border-light);
   }
 
+
+
+  // 登录
   .login-container {
     background-color: var(--el-fill-color-extra-light) !important;
     .login-box {
@@ -189,4 +214,8 @@ html.dark {
     }
   }
 
+  .el-scrollbar{
+    border:var(--zb-border-light);
+    border-top:none ;
+  }
 }

src/styles/sidebar.scss

@@ -1,4 +1,4 @@
-#app {
+.layout-vertical{
   .main-container {
     min-height: 100%;
     transition: margin-left 0.28s;
@@ -12,10 +12,6 @@
       border-bottom: none;
     }
   }
-  .transverseMenu {
-    background-color: $menuBg;
-  }
-
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
@@ -47,7 +43,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 60px);
+        height: calc(100% - 50px);
       }
     }
 
@@ -61,9 +57,6 @@
       overflow: hidden;
     }
 
-    .svg-icon {
-      margin-right: 16px;
-    }
 
     .sub-el-icon {
       margin-right: 12px;
@@ -191,44 +184,45 @@
       transition: none;
     }
   }
-}
 
-// when menu collapsed
+  // when menu collapsed
-.el-menu--vertical {
+  .el-menu--vertical {
-  & > .el-menu {
+    & > .el-menu {
-    .svg-icon {
+      .svg-icon {
-      margin-right: 16px;
+        margin-right: 16px;
-    }
+      }
-    .sub-el-icon {
+      .sub-el-icon {
-      margin-right: 12px;
+        margin-right: 12px;
-      margin-left: -2px;
+        margin-left: -2px;
-    }
+      }
-  }
-
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
     }
 
-    &::-webkit-scrollbar {
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
-      width: 6px;
+    .el-menu-item {
+      &:hover {
+        // you can use $subMenuHover
+        background-color: $menuHover !important;
+      }
     }
 
-    &::-webkit-scrollbar-thumb {
+    // the scroll bar appears when the subMenu is too long
-      background: #99a9bf;
+    > .el-menu--popup {
-      border-radius: 20px;
+      max-height: 100vh;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar-track-piece {
+        background: #d3dce6;
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #99a9bf;
+        border-radius: 20px;
+      }
     }
   }
 }
+

src/utils/element.ts

@@ -4,15 +4,13 @@ import {
 } from '@element-plus/icons-vue'
 let loading = null
 
-export const openLoading = (options)=>{
+export const openLoading = (options={})=>{
     const text = options.text||'加载中'
     loading = ElLoading.service({
         lock: true,
         text: text,
-        spinner:Loading,
-        background: 'rgba(0, 0, 0, 0.7)',
     })
 }
-export const closeLoading = () = {
+export const closeLoading = () => {
-    loading&&loading()
+    loading&&loading.close()
 }

src/views/home/index.scss

@@ -74,4 +74,5 @@
   display: flex;
   padding: 16px;
   box-sizing: border-box;
+  font-size: 14px;
 }

src/views/login/components/LoginForm.vue

@@ -69,7 +69,7 @@ const rules = reactive({
 
 // 表单数据
 const ruleForm = reactive({
-  username: 'vue-admin',
+  username: 'admin',
   password: '123456',
 })