fix: style issues with side menu components and drawer components; 🐛

修复：侧边菜单组件和抽屉组件的样式问题；

src/components/menu/SideMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider :theme="theme" :class="['side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="@/assets/img/logo.png">
@@ -54,7 +54,8 @@ export default {
   .shadow{
     box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
   }
-  .side{
+  .side-menu{
+    min-height: 100%;
     z-index: 10;
     .logo{
       height: 64px;

src/components/setting/Setting.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider class="side" width="300">
+  <div class="side-setting">
     <setting-item :title="$t('theme.title')">
       <img-checkbox-group @change="values => setTheme(values[0])">
         <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
@@ -76,7 +76,7 @@
       </a-list>
     </setting-item>
     <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
-  </a-layout-sider>
+  </div>
 </template>
 
 <script>
@@ -139,9 +139,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .side{
+  .side-setting{
+    min-height: 100%;
     background-color: #fff;
-    height: 100%;
     padding: 24px;
     font-size: 14px;
     line-height: 1.5;

src/components/tool/Drawer.vue

@@ -2,7 +2,7 @@
   <div >
     <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
     <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
-      <div ref="drawer" class="content">
+      <div ref="drawer" class="content beauty-scroll">
         <slot></slot>
       </div>
       <div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle">
@@ -88,8 +88,8 @@ export default {
   }
   .drawer{
     position: fixed;
-    height: 100%;
     transition: all 0.5s;
+    height: 100vh;
     z-index: 100;
     &.left{
       left: 0px;
@@ -119,7 +119,8 @@ export default {
   }
   .content{
     display: inline-block;
-    height: 100%;
+    height: 100vh;
+    overflow-y: auto;
   }
   .handler-container{
     position: absolute;

src/layouts/header/AdminHeader.vue

@@ -96,7 +96,6 @@ export default {
       background: #fff;
     }
     &.dark{
-      background: #001529;
       .trigger{
         color: white;
       }

src/utils/themeUtil.js

@@ -23,6 +23,8 @@ module.exports = {
   },
   changeSelector (selector) {
     switch (selector) {
+      case '.ant-layout-sider':
+        return '.ant-layout-sider-dark'
       case '.ant-calendar-today .ant-calendar-date':
         return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
       case '.ant-btn:focus,.ant-btn:hover':