页面功能优化

src/App.vue

@@ -87,7 +87,11 @@ const navigateTo = (path) => {
 }
 
 .sidebar {
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 20;
   width: 236px;
+  height: 100vh;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -95,6 +99,7 @@ const navigateTo = (path) => {
   box-sizing: border-box;
   background: #ffffff;
   border-right: 1px solid #e5edf5;
+  overflow-y: auto;
   transition: width 0.25s ease, padding 0.25s ease;
 }
 
@@ -169,6 +174,12 @@ const navigateTo = (path) => {
 .page-main {
   flex: 1;
   min-width: 0;
+  margin-left: 236px;
+  transition: margin-left 0.25s ease;
+}
+
+.sidebar.collapsed + .page-main {
+  margin-left: 76px;
 }
 
 :deep(.nav-menu .el-menu-item) {
@@ -209,6 +220,14 @@ const navigateTo = (path) => {
     padding-inline: 10px;
   }
 
+  .page-main {
+    margin-left: 88px;
+  }
+
+  .sidebar.collapsed + .page-main {
+    margin-left: 76px;
+  }
+
   .brand-block {
     display: none;
   }