feat: 🎸 重构layout-classic布局

src/components/Setting/index.vue

@@ -24,10 +24,18 @@
     <div class="setting__title">顶部菜单主题</div>
 
     <div class="setting__title">界面功能</div>
-    <div class="setting__item">
+    <!-- <div class="setting__item">
       <span>固定顶部操作栏</span>
       <el-switch v-model="fixedNavbar" @change="setFixedNavbar" />
     </div>
+    <div class="setting__item">
+      <span>固定标签页</span>
+      <el-switch v-model="fixedTags" @change="setFixedTags" />
+    </div> -->
+    <div class="setting__item">
+      <span>固定Header</span>
+      <el-switch v-model="fixedHeader" @change="setFixedHeader" />
+    </div>
 
     <div class="setting__title">界面显示</div>
     <div class="setting__item">
@@ -73,9 +81,19 @@ export default defineComponent({
       appStore.SetLayout(mode)
     }
 
-    const fixedNavbar = ref<boolean>(appStore.fixedNavbar)
-    function setFixedNavbar(fixedNavbar: boolean) {
-      appStore.SetFixedNavbar(fixedNavbar)
+    // const fixedNavbar = ref<boolean>(appStore.fixedNavbar)
+    // function setFixedNavbar(fixedNavbar: boolean) {
+    //   appStore.SetFixedNavbar(fixedNavbar)
+    // }
+
+    // const fixedTags = ref<boolean>(appStore.fixedTags)
+    // function setFixedTags(fixedTags: boolean) {
+    //   appStore.SetFixedTags(fixedTags)
+    // }
+
+    const fixedHeader = ref<boolean>(appStore.fixedHeader)
+    function setFixedHeader(fixedHeader: boolean) {
+      appStore.SetFixedHeader(fixedHeader)
     }
 
     const navbar = ref<boolean>(appStore.showNavbar)
@@ -115,7 +133,9 @@ export default defineComponent({
 
     return {
       layout, setLayout,
-      fixedNavbar, setFixedNavbar,
+      // fixedNavbar, setFixedNavbar,
+      // fixedTags, setFixedTags,
+      fixedHeader, setFixedHeader,
       navbar, setNavbar,
       hamburger, setHamburger,
       breadcrumb, setBreadcrumb,

src/components/Sider/SiderItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <template v-if="!item.meta?.hidden">
+  <div 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)">
+      <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)" />
         <template #title>
           <span class="anticon-item">{{ onlyOneChild.meta.title }}</span>
@@ -9,7 +9,7 @@
       </el-menu-item>
     </template>
 
-    <el-submenu v-else :index="resolvePath(item.path)">
+    <el-submenu v-else popper-class="nest-popper-menu" :index="resolvePath(item.path)">
       <template #title>
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
@@ -19,9 +19,10 @@
         :is-nest="true"
         :item="child"
         :base-path="resolvePath(child.path)"
+        class="nest-menu"
       />
     </el-submenu>
-  </template>
+  </div>
 </template>
 
 <script lang="ts">

src/components/Sider/index.vue

@@ -5,9 +5,6 @@
         :default-active="activeMenu"
         :collapse="collapsed"
         :unique-opened="false"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
         mode="vertical"
         @select="selectMenu"
       >
@@ -73,7 +70,6 @@ export default defineComponent({
 <style lang="less" scoped>
 .sidebar-container {
   height: 100%;
-  background: @menuBg;
   @{deep}(.svg-icon) {
     margin-right: 16px;
   }
@@ -88,7 +84,7 @@ export default defineComponent({
     overflow: scroll;
     overflow-x: hidden;
     .el-menu {
-      width: 100% !important;
+      width: 100%;
       border: none;
     }
   }