feat: 🎸 layout布局重构中

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;
+      }
     }
   }
 }