Demo:优化主题侧边栏的交互

web/src/pages/Edit/components/Theme.vue

@@ -1,7 +1,7 @@
 <template>
   <Sidebar ref="sidebar" :title="$t('theme.title')">
-    <div class="themeList" :class="{ isDark: isDark }">
+    <div class="themeGroupList" :class="{ isDark: isDark }">
-      <el-tabs v-model="activeName">
+      <el-tabs v-model="activeName" class="tabBox">
         <el-tab-pane
           v-for="group in groupList"
           :key="group.name"
@@ -9,6 +9,7 @@
           :name="group.name"
         ></el-tab-pane>
       </el-tabs>
+      <div class="themeListTheme customScrollbar">
         <div
           class="themeItem"
           v-for="item in currentList"
@@ -22,6 +23,7 @@
           <div class="name">{{ item.name }}</div>
         </div>
       </div>
+    </div>
   </Sidebar>
 </template>
 
@@ -205,9 +207,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.themeList {
+.themeGroupList {
-  padding: 20px;
+  display: flex;
-  padding-top: 0;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
 
   &.isDark {
     .name {
@@ -215,6 +219,20 @@ export default {
     }
   }
 
+  .tabBox {
+    flex-shrink: 0;
+
+    /deep/ .el-tabs__nav-wrap {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  .themeListTheme {
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 20px;
+
     .themeItem {
       width: 100%;
       cursor: pointer;
@@ -251,5 +269,6 @@ export default {
         font-size: 14px;
       }
     }
+  }
 }
 </style>