feat: 🎸 layout布局重构中

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

@@ -1,111 +0,0 @@
-<template>
-  <el-scrollbar
-    ref="scrollContainer"
-    class="scroll-container"
-    @wheel="handleScroll"
-  >
-    <slot />
-  </el-scrollbar>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, unref, nextTick } from 'vue'
-import { useScrollTo } from '@/hooks/useScrollTo'
-const tagAndTagSpacing = 4 // tagAndTagSpacing
-
-export default defineComponent({
-  name: 'ScrollPane',
-  setup() {
-    const scrollContainer = ref<HTMLElement | null>(null)
-
-    function handleScroll(e: any): void {
-      const eventDelta: number = e.wheelDelta || -e.deltaY * 40
-      const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
-      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
-    }
-
-    function moveToTarget(currentTag: any) {
-      const $container: any = (unref(scrollContainer) as any).$el
-      const $containerWidth: number = $container.offsetWidth
-      const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
-      const tagList = (unref(scrollContainer) as any).$parent.$parent.tagRefs
-
-      let firstTag: any = null
-      let lastTag: any = null
-
-      // find first tag and last tag
-      if (tagList.length > 0) {
-        firstTag = tagList[0]
-        lastTag = tagList[tagList.length - 1]
-      }
-
-      if (firstTag === currentTag) {
-        $scrollWrapper.scrollLeft = 0
-      } else if (lastTag === currentTag) {
-        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
-      } else {
-        // find preTag and nextTag
-        const currentIndex: number = tagList.findIndex((item: any) => item === currentTag)
-        const prevTag = tagList[currentIndex - 1]
-        const nextTag = tagList[currentIndex + 1]
-        // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-
-        // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
-
-        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
-          nextTick(() => {
-            const { start } = useScrollTo({
-              el: $scrollWrapper,
-              position: 'scrollLeft',
-              to: afterNextTagOffsetLeft - $containerWidth,
-              duration: 500
-            })
-            start()
-          })
-        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
-          nextTick(() => {
-            const { start } = useScrollTo({
-              el: $scrollWrapper,
-              position: 'scrollLeft',
-              to: beforePrevTagOffsetLeft,
-              duration: 500
-            })
-            start()
-          })
-        }
-      }
-    }
-
-    function moveTo(to: number) {
-      const $scrollWrapper: any = (unref(scrollContainer) as any).$.wrap
-      nextTick(() => {
-        const { start } = useScrollTo({
-          el: $scrollWrapper,
-          position: 'scrollLeft',
-          to: $scrollWrapper.scrollLeft + to,
-          duration: 500
-        })
-        start()
-      })
-    }
-
-    return {
-      handleScroll,
-      scrollContainer,
-      moveToTarget,
-      moveTo
-    }
-  }
-})
-</script>
-
-<style lang="less">
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-</style>

src/components/Setting/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/Sider/SiderItem.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/index.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;
+      }
     }
   }
 }

src/components/TagsView/index.vue

@@ -158,7 +158,7 @@ export default defineComponent({
       })
     }
 
-    async function closeAllTags(view: RouteLocationNormalizedLoaded) {
+    async function closeAllTags() {
       const views: any = await tagsViewStore.delAllViews()
       // console.log(affixTags.value.some(tag => tag.path === view.path))
       // if (affixTags.value.some(tag => tag.path === view.path)) {
@@ -300,9 +300,9 @@ export default defineComponent({
         margin-right: 23px;
       }
       &.active {
-        background-color: #304156;
+        background-color: @tagActiveBg;
         color: #fff;
-        border-color: #304156;
+        border-color: @tagActiveBg;
         &::before {
           content: '';
           background: #fff;
@@ -322,9 +322,7 @@ export default defineComponent({
         line-height: 16px;
         transition: all .3s cubic-bezier(.645, .045, .355, 1);
         transform-origin: 100% 50%;
-        margin-left: 5px;
         &:before {
-          transform: scale(.6);
           display: inline-block;
         }
         &:hover {