diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d04bed04..51845e3e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -87,8 +87,7 @@ function sideBarComponents (title) {
         'icon-select',
         'icon-svg',
         'icon',
-        'markdown',
-        'locally-valid'
+        'markdown'
       ]
     }
   ]
diff --git a/docs/zh/components/locally-valid.md b/docs/zh/components/locally-valid.md
deleted file mode 100644
index f5980fa9..00000000
--- a/docs/zh/components/locally-valid.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# 局部组件
-
-局部组件是指在某个组件内注册的组件，它一般只在一个地方用到，全局无法访问
-
-## D2MenuItem
-
-::: tip 出现位置
-src/components/core/MainLayout/components/SideMenu/index.vue
-:::
-
-该组件会根据数据渲染 `<el-menu-item>`
-
-## D2Submenu
-
-::: tip 出现位置
-src/components/core/MainLayout/components/SideMenu/index.vue
-:::
-
-该组件会根据数据渲染 `<el-submenu>` 结构，并且在 `<el-submenu>` 中再次根据数据类型递归自身，最终生成 elementUI 的菜单组件结构，支持嵌套多级
\ No newline at end of file
diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss
index 92b1718a..e9cc35e4 100644
--- a/src/assets/style/theme/d2/setting.scss
+++ b/src/assets/style/theme/d2/setting.scss
@@ -4,6 +4,8 @@ $theme-name: 'd2';
 $theme-bg-color: #f8f8f9;
 // 主题背景图片
 $theme-bg-image: none;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
 
 // container组件
 $theme-container-background-color: rgba(#FFF, 1);
diff --git a/src/assets/style/theme/line/setting.scss b/src/assets/style/theme/line/setting.scss
index 26cfec94..e995f543 100644
--- a/src/assets/style/theme/line/setting.scss
+++ b/src/assets/style/theme/line/setting.scss
@@ -4,6 +4,8 @@ $theme-name: 'line';
 $theme-bg-color: #f8f8f9;
 // 主题背景图片
 $theme-bg-image: url('/static/image/bg/line-squashed.jpg');
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
 
 // container组件
 $theme-container-background-color: rgba(#FFF, .8);
diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss
index ece6c2c0..b2f69439 100644
--- a/src/assets/style/theme/star/setting.scss
+++ b/src/assets/style/theme/star/setting.scss
@@ -4,6 +4,8 @@ $theme-name: 'star';
 $theme-bg-color: #EFF4F8;
 // 主题背景图片
 $theme-bg-image: url('/static/image/bg/star-squashed.jpg');
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, .3);
 
 // container组件
 $theme-container-background-color: rgba(#FFF, .9);
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
deleted file mode 100644
index ac7fc46a..00000000
--- a/src/assets/style/theme/theme.scss
+++ /dev/null
@@ -1,373 +0,0 @@
-// 主题公用
-.layout-main {
-  height: 100vh;
-  width: 100vw;
-  background-size: cover;
-  background-position: center;
-  position: relative;
-  // [布局] 顶栏
-  .el-header {
-    padding: 0px;
-    // logo区域
-    .logo-group {
-      transition: width .3s;
-      float: left;
-      text-align: center;
-      img {
-        height: 60px;
-      }
-    }
-    // 折叠侧边栏切换按钮
-    .toggle-aside-btn {
-      float: left;
-      height: 60px;
-      width: 60px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      @extend %unable-select;
-      i {
-        font-size: 20px;
-        margin-top: 4px;
-      }
-    }
-    // [菜单] 顶栏
-    .el-menu {
-      float: left;
-      border-bottom: none;
-      background-color: transparent;
-      .el-menu-item {
-        @extend %unable-select;
-        border-bottom: none;
-      }
-      .el-submenu {
-        @extend %unable-select;
-        .el-submenu__title {
-          border-bottom: none;
-        }
-      }
-    }
-    // 顶栏右侧的按钮
-    .d2-header-right {
-      float: right;
-      height: 60px;
-      display: flex;
-      align-items: center;
-      .btn-text {
-        padding: 14px 12px;
-        border-radius: 4px;
-        margin: 0px !important;
-        margin-left: 10px !important;
-      }
-      .el-dropdown {
-        @extend %unable-select;
-      }
-    }
-  }
-  // [布局] 顶栏下面
-  .el-container {
-    // 侧边栏
-    .el-aside {
-      transition: width .3s;
-      overflow: auto;
-      // [菜单] 正常状态
-      .el-menu {
-        @extend %unable-select;
-        background-color: transparent;
-        border-right: none;
-        .el-menu-item {
-          i {
-            margin-right: 5px;
-            font-size: 20px;
-          }
-        }
-      }
-      .el-submenu {
-        @extend %unable-select;
-        .el-submenu__title {
-          i {
-            margin-right: 5px;
-            font-size: 20px;
-          }
-          .el-submenu__icon-arrow {
-            margin-top: -10px;
-          }
-        }
-      }
-      // 菜单为空的时候显示的信息
-      .menu-empty {
-        height: 160px;
-        margin: 10px;
-        margin-top: 0px;
-        border-radius: 4px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        @extend %unable-select;
-        i {
-          font-size: 30px;
-          margin-bottom: 10px;
-        }
-        span {
-          font-size: 14px;
-        }
-      }
-      // [菜单] 折叠状态
-      .el-menu--collapse {
-        background-color: transparent;
-        .el-submenu__title {
-          text-align: center;
-        }
-      }
-    }
-    .el-main {
-      padding: 0px;
-      position: relative;
-      overflow: hidden;
-    }
-  }
-  // [组件] d2-container-full
-  .d2-container-full {
-    position: absolute;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    overflow: hidden;
-    color: #303133;
-    &:hover {
-      box-shadow: none;
-    }
-    .d2-container-full__header {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      width: 100%;
-      padding: 18px 20px;
-      box-sizing: border-box;
-    }
-    .d2-container-full__body {
-      position: absolute;
-      padding: 20px;
-      left: 0px;
-      right: 0px;
-      bottom: 0px;
-      overflow: auto;
-    }
-    .d2-container-full__footer {
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-      width: 100%;
-      padding: 18px 20px;
-      box-sizing: border-box;
-    }
-  }
-}
-
-// 每个主题特有的设置
-
-.theme-#{$theme-name} {
-
-  .layout-main {
-    background-color: $theme-bg-color;
-    background-image: $theme-bg-image;
-  }
-  // 菜单项目
-  @mixin theme-menu-hover-style {
-    color: $theme-menu-item-color-hover;
-    i {
-      color: $theme-menu-item-color-hover;
-    }
-    background-color: $theme-menu-item-background-color-hover;
-  }
-  .el-submenu__title {
-    @extend %unable-select;
-  }
-  .el-menu-item {
-    @extend %unable-select;
-  }
-  .el-submenu__title:hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu-item:hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
-    @include theme-menu-hover-style;
-  }
-  .el-menu--horizontal .el-menu .el-submenu__title:hover {
-    @include theme-menu-hover-style;
-  }
-
-  // [组件] d2-container-full
-  .d2-container-full {
-    border: $theme-container-border-outer;
-    border-bottom: none;
-    background-color: $theme-container-background-color;
-    .d2-container-full__header {
-      border-bottom: $theme-container-border-inner;
-      background-color: $theme-container-header-footer-background-color;
-    }
-    .d2-container-full__footer {
-      border-top: $theme-container-border-inner;
-      background-color: $theme-container-header-footer-background-color;
-    }
-  }
-  // [组件] d2-container-card
-  .d2-container-card {
-    border: $theme-container-border-outer;
-    background-color: $theme-container-background-color;
-    .el-card__header {
-      border-bottom: $theme-container-border-inner;
-      background-color: $theme-container-header-footer-background-color;
-    }
-  }
-  
-  // 顶栏
-  .el-header {
-    // 切换按钮
-    .toggle-aside-btn {
-      i {
-        color: $theme-header-item-color;
-        background-color: $theme-header-item-background-color;
-        &:hover {
-          color: $theme-header-item-color-hover;
-        }
-      }
-    }
-    // 顶栏菜单
-    .el-menu {
-      .el-menu-item {
-        transition: border-top-color 0s;
-        color: $theme-header-item-color;
-        background-color: $theme-header-item-background-color;
-        &:hover {
-          color: $theme-header-item-color-hover;
-          background-color: $theme-header-item-background-color-hover;
-        }
-        &:focus {
-          color: $theme-header-item-color-focus;
-          background-color: $theme-header-item-background-color-focus;
-        }
-        &.is-active {
-          color: $theme-header-item-color-active;
-          background-color: $theme-header-item-background-color-active;
-        }
-      }
-      .el-submenu {
-        .el-submenu__title {
-          transition: border-top-color 0s;
-          color: $theme-header-item-color;
-          background-color: $theme-header-item-background-color;
-          .el-submenu__icon-arrow {
-            color: $theme-header-item-color;
-          }
-          &:hover {
-            color: $theme-header-item-color-hover;
-            background-color: $theme-header-item-background-color-hover;
-            .el-submenu__icon-arrow {
-              color: $theme-header-item-color-hover;
-            }
-          }
-          &:focus {
-            color: $theme-header-item-color-focus;
-            background-color: $theme-header-item-background-color-focus;
-            .el-submenu__icon-arrow {
-              color: $theme-header-item-color-focus;
-            }
-          }
-        }
-      }
-    }
-    // 顶栏右侧
-    .d2-header-right {
-      .btn-text {
-        color: $theme-header-item-color;
-        &.can-hover {
-          &:hover {
-            color: $theme-header-item-color-hover;
-            background-color: $theme-header-item-background-color-hover;
-          }
-        }
-      }
-    }
-  }
-  // [布局] 顶栏下面
-  .el-container {
-    // 侧边栏
-    .el-aside {
-      // 菜单为空的时候显示的信息
-      .menu-empty {
-        background-color: $theme-aside-menu-empty-background-color;
-        i {
-          color: $theme-aside-menu-empty-icon-color;
-        }
-        span {
-          color: $theme-aside-menu-empty-text-color;
-        }
-        &:hover {
-          background-color: $theme-aside-menu-empty-background-color-hover;
-          i {
-            color: $theme-aside-menu-empty-icon-color-hover;
-          }
-          span {
-            color: $theme-aside-menu-empty-text-color-hover;
-          }
-        }
-      }
-      // [菜单] 正常状态
-      .el-menu {
-        .el-menu-item {
-          color: $theme-aside-item-color;
-          background-color: $theme-aside-item-background-color;
-          i {
-            color: $theme-aside-item-color;
-          }
-          &:hover {
-            color: $theme-aside-item-color-hover;
-            background-color: $theme-aside-item-background-color-hover;
-            i {
-              color: $theme-aside-item-color-hover;
-            }
-          }
-          &:focus {
-            color: $theme-aside-item-color-focus;
-            background-color: $theme-aside-item-background-color-focus;
-            i {
-              color: $theme-aside-item-color-focus;
-            }
-          }
-          &.is-active {
-            color: $theme-aside-item-color-active;
-            background-color: $theme-aside-item-background-color-active;
-            i {
-              color: $theme-aside-item-color-active;
-            }
-          }
-        }
-      }
-      .el-submenu {
-        .el-submenu__title {
-          color: $theme-aside-item-color;
-          background-color: $theme-aside-item-background-color;
-          i {
-            color: $theme-aside-item-color;
-          }
-          .el-submenu__icon-arrow {
-            color: $theme-aside-item-color;
-          }
-          &:hover {
-            color: $theme-aside-item-color-hover;
-            background-color: $theme-aside-item-background-color-hover;
-            i {
-              color: $theme-aside-item-color-hover;
-            }
-            .el-submenu__icon-arrow {
-              color: $theme-aside-item-color-hover;
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
new file mode 100644
index 00000000..8dffd24a
--- /dev/null
+++ b/src/assets/style/theme/theme.scss.REMOVED.git-id
@@ -0,0 +1 @@
+76b231c8f2b45f72c095f47ab055fbebb41ff160
\ No newline at end of file
diff --git a/src/assets/style/theme/tomorrow-night-blue/setting.scss b/src/assets/style/theme/tomorrow-night-blue/setting.scss
index de55406a..a3381ecf 100644
--- a/src/assets/style/theme/tomorrow-night-blue/setting.scss
+++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss
@@ -4,6 +4,8 @@ $theme-name: 'tomorrow-night-blue';
 $theme-bg-color: #002147;
 // 主题背景图片
 $theme-bg-image: none;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
 
 // container组件
 $theme-container-background-color: #FFF;
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index 089e8fcf..05bb5c62 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -1,36 +1,39 @@
 <template>
-  <el-container class="layout-main">
-    <!-- 顶栏 -->
-    <el-header>
-      <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-        <img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
-        <img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
-      </div>
-      <div class="toggle-aside-btn" @click="collapse = !collapse">
-        <d2-icon name="bars"/>
-      </div>
-      <d2-layout-main-header-menu/>
-      <!-- 顶栏右侧 -->
-      <div class="d2-header-right">
-        <d2-layout-main-header-full-screen/>
-        <d2-layout-main-header-theme/>
-        <d2-layout-main-header-user/>
-      </div>
-    </el-header>
-    <!-- 下面 主体 -->
-    <el-container>
-      <!-- 主体 侧边栏 -->
-      <el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-        <d2-layout-main-menu-side :collapse="collapse"/>
-      </el-aside>
-      <!-- 主体 -->
-      <el-main>
-        <transition name="fade-transverse">
-          <router-view/>
-        </transition>
-      </el-main>
+  <div class="layout-main-group">
+    <div class="layout-main-mask"></div>
+    <el-container class="layout-main">
+      <!-- 顶栏 -->
+      <el-header>
+        <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
+          <img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
+          <img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
+        </div>
+        <div class="toggle-aside-btn" @click="collapse = !collapse">
+          <d2-icon name="bars"/>
+        </div>
+        <d2-layout-main-header-menu/>
+        <!-- 顶栏右侧 -->
+        <div class="d2-header-right">
+          <d2-layout-main-header-full-screen/>
+          <d2-layout-main-header-theme/>
+          <d2-layout-main-header-user/>
+        </div>
+      </el-header>
+      <!-- 下面 主体 -->
+      <el-container>
+        <!-- 主体 侧边栏 -->
+        <el-aside ref="aside" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
+          <d2-layout-main-menu-side :collapse="collapse"/>
+        </el-aside>
+        <!-- 主体 -->
+        <el-main>
+          <transition name="fade-transverse">
+            <router-view/>
+          </transition>
+        </el-main>
+      </el-container>
     </el-container>
-  </el-container>
+  </div>
 </template>
 
 <script>