no message

Former-commit-id: 5e50d6b200ff2da546a94c7261335d163877685d
Former-commit-id: 72b2a0609e3cc724fe20b706ca42bf0930b33fd9
Former-commit-id: 359c3c40ba7e34c90c2b8293482ebe73fdb9fd56

src/assets/style/theme/star/index.scss

@@ -1,12 +1,36 @@
 @import '../theme.scss';
 
+// 主题名称
 $theme-name: 'star';
+// 主题背景颜色
 $theme-bg-color: #EFF4F8;
+// 主题背景图片
 $theme-bg-image: '/static/image/bg/star.jpg';
-$theme-container-border-color: #d8dfea;
+// container组件的边框
+$theme-container-border: 1px solid #d8dfea;
+// 顶栏和侧边栏中展开的菜单 hover 状态下的文字和图标颜色
+$theme-menu-item-color-hover: #FFF;
+// 顶栏和侧边栏中展开的菜单 hover 状态下的背景颜色
+$theme-menu-item-background-color-hover: #187181;
+// 顶栏上的文字颜色
+$theme-header-text-color: #FFF;
+// 顶栏上的项目在 hover 时的背景颜色
+$theme-header-item-background-color-hover: rgba(#FFF, .3);
+// 顶栏上的项目在 focus 时的背景颜色
+$theme-header-item-background-color-focus: rgba(#FFF, .3);
+// 顶栏上的项目在 active 时的背景颜色
+$theme-header-item-background-color-active: rgba(#000, .3);
+// 侧边栏上的文字颜色
+$theme-aside-text-color: #FFF;
+// 侧边栏上的项目在 hover 时的背景颜色
+$theme-aside-item-background-color-hover: rgba(#FFF, .3);
+// 顶栏上的项目在 focus 时的背景颜色
+$theme-aside-item-background-color-focus: rgba(#FFF, .3);
+// 侧边栏上的项目在 active 时的背景颜色
+$theme-aside-item-background-color-active: rgba(#000, .3);
 
 .theme-#{$theme-name} {
-  .theme {
+  .layout-main {
     background-color: $theme-bg-color;
     background-image: url($theme-bg-image);
     background-size: cover;
@@ -14,7 +38,11 @@ $theme-container-border-color: #d8dfea;
   }
   // 菜单项目
   @mixin theme-menu-hover-style {
-    background-color: #eff4f8;
+    color: $theme-menu-item-color-hover;
+    i {
+      color: $theme-menu-item-color-hover;
+    }
+    background-color: $theme-menu-item-background-color-hover;
   }
   .el-submenu__title:hover {
     @include theme-menu-hover-style;
@@ -28,23 +56,28 @@ $theme-container-border-color: #d8dfea;
   .el-menu--horizontal .el-menu .el-submenu__title:hover {
     @include theme-menu-hover-style;
   }
+
   // [组件] d2-container-full
   .d2-container-full {
     .d2-container-full__header {
-      border-bottom: 1px solid $theme-container-border-color;
+      border-bottom: $theme-container-border;
     }
     .d2-container-full__footer {
-      border-top: 1px solid $theme-container-border-color;
+      border-top: $theme-container-border;
     }
   }
+  // [组件] d2-container-card
+  .d2-container-card {
+    border: $theme-container-border;
+  }
   // 顶栏
   .el-header {
     // 切换按钮
     .toggle-aside-btn {
       i {
-        color: #FFF;
+        color: $theme-header-text-color;
         &:hover {
-          color: #FFF;
+          color: $theme-header-text-color;
         }
       }
     }
@@ -52,29 +85,29 @@ $theme-container-border-color: #d8dfea;
     .el-menu {
       .el-menu-item {
         transition: border-top-color 0s;
-        color: #FFF;
+        color: $theme-header-text-color;
         &:hover {
-          background-color: rgba(#FFF, .3);
+          background-color: $theme-header-item-background-color-hover;
         }
         &:focus {
-          background-color: rgba(#FFF, .3);
+          background-color: $theme-header-item-background-color-focus;
         }
         &.is-active {
-          background-color: rgba(#000, .3);
+          background-color: $theme-header-item-background-color-active;
         }
       }
       .el-submenu {
         .el-submenu__title {
           transition: border-top-color 0s;
-          color: #FFF;
+          color: $theme-header-text-color;
+          .el-submenu__icon-arrow {
+            color: $theme-header-text-color;
+          }
           &:hover {
-            background-color: rgba(#FFF, .3);
+            background-color: $theme-header-item-background-color-hover;
           }
           &:focus {
-            background-color: rgba(#FFF, .3);
+            background-color: $theme-header-item-background-color-focus;
-          }
-          .el-submenu__icon-arrow {
-            color: #FFF;
           }
         }
       }
@@ -82,9 +115,9 @@ $theme-container-border-color: #d8dfea;
     // 顶栏右侧
     .d2-header-right {
       .btn-text {
-        color: #FFF;
+        color: $theme-header-text-color;
         &:hover {
-          background-color: rgba(#FFF, .1);
+          background-color: $theme-header-item-background-color-hover;
         }
       }
     }
@@ -96,32 +129,32 @@ $theme-container-border-color: #d8dfea;
       // [菜单] 正常状态
       .el-menu {
         .el-menu-item {
-          color: #FFF;
+          color: $theme-aside-text-color;
+          i {
+            color: $theme-aside-text-color;
+          }
           &:hover {
-            background-color: rgba(#FFF, .3);
+            background-color: $theme-aside-item-background-color-hover;
           }
           &:focus {
-            background-color: rgba(#FFF, .3);
+            background-color: $theme-aside-item-background-color-focus;
-          }
-          i {
-            color: #FFF;
           }
           &.is-active {
-            background-color: rgba(#000, .3);
+            background-color: $theme-aside-item-background-color-active;
           }
         }
       }
       .el-submenu {
         .el-submenu__title {
-          color: #FFF;
+          color: $theme-aside-text-color;
-          &:hover {
-            background-color: rgba(#FFF, .3);
-          }
           i {
-            color: #FFF;
+            color: $theme-aside-text-color;
           }
           .el-submenu__icon-arrow {
-            color: #FFF;
+            color: $theme-aside-text-color;
+          }
+          &:hover {
+            background-color: $theme-aside-item-background-color-hover;
           }
         }
       }

src/assets/style/theme/theme.scss

@@ -1,7 +1,7 @@
 @import '~@/assets/style/public.scss';
 
 // 主题公用
-.theme {
+.layout-main {
   height: 100vh;
   width: 100vw;
   // [布局] 顶栏

src/components/core/d2-container/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
-    <el-card v-if="type === 'card'" class="d2-mr d2-mb">
+    <el-card v-if="type === 'card'" class="d2-container-card d2-mr d2-mb">
       <slot v-if="$slots.header" name="header" slot="header"/>
       <slot/>
     </el-card>

src/components/core/d2-layout-main/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="layout-main theme">
+  <el-container class="layout-main">
     <!-- 顶栏 -->
     <el-header>
       <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">