style(commonmenu): 样式：调整首页常用菜单样式，超出范围垂直滚动

src/assets/styles/index.scss

@@ -125,24 +125,21 @@ aside {
 // 全局样式
 // 容器
 .app-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
+  padding: 30px;
+  height: 100%;
 
   // 内容区域
   >.container {
     width: 100%;
+    height: 100%;
     background-color: var(--el-bg-color-overlay);
-    padding: 20px;
   }
 }
 
-.components-container {
-  margin: 30px 50px;
-  position: relative;
-}
+// .components-container {
+//   margin: 30px 50px;
+//   position: relative;
+// }
 
 .pagination-container {
   margin-top: 30px;
@@ -197,9 +194,9 @@ aside {
 }
 
 // 分割线调整宽度线条
-.splitpanes--vertical > .splitpanes__splitter {
-  width: 2px; /* 调整粗细 */
-  background: #ddd; /* 可选：修改颜色 */
+.splitpanes--vertical>.splitpanes__splitter {
+  width: 2px;
+  /* 调整粗细 */
+  background: #ddd;
+  /* 可选：修改颜色 */
 }
\ No newline at end of file
-
-

src/components/CommonMenu/index.vue

 <template>
-  <el-row :gutter="20">
-    <el-col :span="24">
+  <el-row>
+    <el-col>
       <el-card shadow="never">
         <div slot="header"
           class="el-card__header">
@@ -14,6 +14,7 @@
             自定义
           </el-button>
         </div>
+        <!--  -->
         <div class="el-card__body">
           <div v-for="o in commonMenuList"
             class="item">
@@ -34,7 +35,8 @@
         </div>
         <el-dialog title="编辑常用菜单"
           v-model="visible"
-          draggable overflow>
+          draggable
+          overflow>
           <el-transfer ref="myTransfer"
             v-model="selectList"
             :data="menuList"
@@ -89,9 +91,14 @@ const rightChange = (val) => {
 
 <style scoped
   lang="scss">
+  .el-row {
+    height: 100%;
+
+    .el-col {
+      height: 100%;
+
       .el-card {
-    margin-top: 20px;
-    width: 100%;
+        height: 100%;
 
         .el-card__header {
           .custom {
@@ -100,13 +107,23 @@ const rightChange = (val) => {
           }
         }
 
+        /* 内部有个额外的 div */
+        ::v-deep(.el-card__body) {
+          max-height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        /* 当前页面的标签样式 */
         .el-card__body {
           padding-left: 15px !important;
           display: flex;
           flex-wrap: wrap;
+          flex-direction: row;
           justify-content: flex-start;
-      align-items: flex-start;
           gap: 20px;
+          max-height: 100%;
+          overflow-y: auto;
 
           .item {
             display: inline-block;
@@ -195,4 +212,7 @@ const rightChange = (val) => {
           flex-direction: column;
         }
       }
+    }
+  }
+
 </style>

src/layout/components/AppMain.vue

@@ -39,12 +39,8 @@ function addIframe() {
 <style lang="scss"
   scoped>
   .app-main {
-    /* 50= navbar  50  */
-    min-height: calc(100vh - 50px);
     width: 100%;
     background-color: var(--el-bg-color);
-    display: flex;
-    flex-direction: column;
   }
 
 </style>

src/layout/index.vue

@@ -106,22 +106,21 @@ function setLayout() {
     transition: width 0.28s;
   }
 
+  .app-main{
+    // 头部固定菜单高度 50px
+    height: calc(100vh - 50px);
+  }
+
   // 开启头部固定以后，main的高度需要设置为100vh
   .fixed-header+.app-main {
-    min-height: 100vh;
+    height: 100vh;
     padding-top: 50px;
   }
 
-
   // 有头部标签导航时
   .hasTagsView {
-    .app-main {
-      /* 84 = navbar + tags-view = 50 + 34 */
-      // min-height: calc(100vh - 84px);
-      min-height: 100vh;
-    }
-
     .fixed-header+.app-main {
+      height: 100vh;
       padding-top: 84px;
     }
   }
@@ -140,31 +139,31 @@ function setLayout() {
   }
 
 
-  // 有些页面高度固定就是 100 vh - 头部高度作为可视区域
-  // 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动
-  // 所以要动态计算高度
-  ::v-deep() {
-
-    // 无头部固定，无头部 Tags-view
-    .client-fix-height {
-      // 头部导航 50，上下内边距 20
-      height: calc(100vh - 50px - 40px);
-    }
-
-    // 头部固定时
-    .fixed-header+.app-main {
-      .client-fix-height {
-        height: calc(100vh - 50px - 40px) !important;
-      }
-    }
-
-    // 有头部标签时
-    .hasTagsView {
-      .fixed-header+.app-main {
-        .client-fix-height {
-          height: calc(100vh - 50px - 34px - 40px) !important;
-        }
-      }
-    }
-  }
+  // // 有些页面高度固定就是 100 vh - 头部高度作为可视区域
+  // // 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动
+  // // 所以要动态计算高度
+  // ::v-deep() {
+
+  //   // 无头部固定，无头部 Tags-view
+  //   .client-fix-height {
+  //     // 头部导航 50，上下内边距 20
+  //     height: calc(100vh - 50px - 40px);
+  //   }
+
+  //   // 头部固定时
+  //   .fixed-header+.app-main {
+  //     .client-fix-height {
+  //       height: calc(100vh - 50px - 40px) !important;
+  //     }
+  //   }
+
+  //   // 有头部标签时
+  //   .hasTagsView {
+  //     .fixed-header+.app-main {
+  //       .client-fix-height {
+  //         height: calc(100vh - 50px - 34px - 40px) !important;
+  //       }
+  //     }
+  //   }
+  // }
 </style>
\ No newline at end of file

src/views/index.vue

@@ -72,7 +72,6 @@ const handleSetLineChartData = (type) => {
 <style lang="scss"
   scoped>
   .app-container {
-    padding: 20px;
 
     >div {
       padding: 0;