feat: 🎸 layout布局重构中

Author: kailong321200875

src/components/Logo/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <router-link class="app-logo" to="/">
+  <router-link class="app-logo" to="/" :class="{'app-logo--Top': layout !== 'Classic'}">
     <img :src="require('@/assets/img/logo.png')">
     <div v-if="show" class="sidebar-title">{{ title }}</div>
   </router-link>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch, PropType } from 'vue'
-import config from '_p/index/config'
+import { defineComponent, ref, watch, PropType, computed } from 'vue'
+import { appStore } from '_p/index/store/modules/app'
 
 export default defineComponent({
   name: 'Logo',
@@ -19,21 +19,28 @@ export default defineComponent({
   },
   setup(props) {
     const show = ref<boolean>(true)
+    const title = computed(() => appStore.title)
+    const layout = computed(() => appStore.layout)
     watch(
       () => props.collapsed,
       (collapsed: boolean) => {
-        if (!collapsed) {
-          setTimeout(() => {
-            show.value = !collapsed
-          }, 400)
+        if (layout.value !== 'Classic') {
+          show.value = true
         } else {
-          show.value = !collapsed
+          if (!collapsed) {
+            setTimeout(() => {
+              show.value = !collapsed
+            }, 400)
+          } else {
+            show.value = !collapsed
+          }
         }
       }
     )
     return {
       show,
-      title: config.title
+      title,
+      layout
     }
   }
 })
@@ -44,7 +51,7 @@ export default defineComponent({
   display: flex;
   align-items: center;
   cursor: pointer;
-  height: @topSilderHeight;
+  height: @topSiderHeight;
   width: 100%;
   background-color: @menuBg;
   img {
@@ -59,7 +66,22 @@ export default defineComponent({
     margin-left: 12px;
   }
   .sidebar-title {
-    color: #fff;
+    color: @menuActiveText;
+  }
+}
+.app-logo--Top {
+  width: auto;
+  background-color: @topMenuBg;
+  transition: background 0.2s;
+  padding: 0 5px;
+  &:hover {
+    background: #f6f6f6;
+  }
+  img {
+    margin-left: 0;
+  }
+  .sidebar-title {
+    color: @topMenuText;
   }
 }
 </style>

src/components/ScrollPane/index.vue

@@ -38,15 +38,15 @@
     </div>
 
     <div class="setting__title">界面显示</div>
-    <div class="setting__item">
+    <div v-if="layout !== 'Top'" class="setting__item">
       <span>顶部操作栏</span>
       <el-switch v-model="navbar" @change="setNavbar" />
     </div>
-    <div class="setting__item">
+    <div v-if="layout !== 'Top'" class="setting__item">
       <span>侧边栏缩收</span>
       <el-switch v-model="hamburger" @change="setHamburger" />
     </div>
-    <div class="setting__item">
+    <div v-if="layout !== 'Top'" class="setting__item">
       <span>面包屑</span>
       <el-switch v-model="breadcrumb" @change="setBreadcrumb" />
     </div>
@@ -79,6 +79,7 @@ export default defineComponent({
     function setLayout(mode: 'Classic' | 'LeftTop' | 'Top' | 'Test') {
       if (mode === layout.value) return
       appStore.SetLayout(mode)
+      appStore.SetCollapsed(false)
     }
 
     // const fixedNavbar = ref<boolean>(appStore.fixedNavbar)

src/components/Setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!item.meta?.hidden">
+  <template v-if="!item.meta?.hidden">
     <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow">
       <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
         <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
@@ -9,7 +9,13 @@
       </el-menu-item>
     </template>
 
-    <el-submenu v-else popper-class="nest-popper-menu" :index="resolvePath(item.path)">
+    <el-submenu
+      v-else
+      :popper-class="layout !== 'Top'
+        ? 'nest-popper-menu'
+        : 'top-popper-menu'"
+      :index="resolvePath(item.path)"
+    >
       <template #title>
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
@@ -18,11 +24,11 @@
         :key="child.path"
         :is-nest="true"
         :item="child"
+        :layout="layout"
         :base-path="resolvePath(child.path)"
-        class="nest-menu"
       />
     </el-submenu>
-  </div>
+  </template>
 </template>
 
 <script lang="ts">
@@ -47,6 +53,10 @@ export default defineComponent({
     basePath: {
       type: String as PropType<string>,
       default: ''
+    },
+    layout: {
+      type: String as PropType<string>,
+      default: 'Classic'
     }
   },
   setup(props) {

src/components/Sider/SiderItem.vue

@@ -1,17 +1,21 @@
 <template>
-  <div :class="{'has-logo': showLogo}" class="sidebar-container">
+  <div
+    :class="{'has-logo': showLogo && layout === 'Classic', 'sidebar-container--Top': layout === 'Top'}"
+    class="sidebar-container"
+  >
     <el-scrollbar>
       <el-menu
         :default-active="activeMenu"
         :collapse="collapsed"
         :unique-opened="false"
-        mode="vertical"
+        :mode="mode"
         @select="selectMenu"
       >
         <sider-item
           v-for="route in routers"
           :key="route.path"
           :item="route"
+          :layout="layout"
           :base-path="route.path"
         />
       </el-menu>
@@ -20,17 +24,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, PropType } from 'vue'
 import { useRouter } from 'vue-router'
 import { permissionStore } from '_p/index/store/modules/permission'
 import { appStore } from '_p/index/store/modules/app'
-import type { RouteRecordRaw, RouteLocationNormalizedLoaded } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import SiderItem from './SiderItem.vue'
 import variables from '@/styles/variables.less'
 import { isExternal } from '@/utils/validate'
 
 export default defineComponent({
+  name: 'Sider',
   components: { SiderItem },
+  props: {
+    layout: {
+      type: String as PropType<string>,
+      default: 'Classic'
+    },
+    mode: {
+      type: String as PropType<'horizontal' | 'vertical'>,
+      default: 'vertical'
+    }
+  },
   setup() {
     const { currentRoute, push } = useRouter()
     const routers = computed((): RouteRecordRaw[] => {
@@ -73,19 +88,38 @@ export default defineComponent({
   @{deep}(.svg-icon) {
     margin-right: 16px;
   }
+  @{deep}(.el-scrollbar) {
+    width: 100%;
+    height: 100%;
+    .el-scrollbar__wrap {
+      overflow: scroll;
+      overflow-x: hidden;
+      .el-menu {
+        width: 100%;
+        border: none;
+      }
+    }
+  }
 }
 .has-logo {
-  height: calc(~"100% - @{topSilderHeight}");
+  height: calc(~"100% - @{topSiderHeight}");
 }
-@{deep}(.el-scrollbar) {
-  width: 100%;
-  height: 100%;
-  .el-scrollbar__wrap {
-    overflow: scroll;
-    overflow-x: hidden;
-    .el-menu {
-      width: 100%;
-      border: none;
+
+.sidebar-container--Top {
+  @{deep}(.el-scrollbar) {
+    width: 100%;
+    height: 100%;
+    .el-scrollbar__wrap {
+      overflow: scroll;
+      overflow-x: hidden;
+      .el-scrollbar__view {
+        height: @topSiderHeight;
+      }
+      .el-menu {
+        width: auto;
+        height: 100%;
+        border: none;
+      }
     }
   }
 }