update Menu

update Menu

src/components/menu/menu.vue

@@ -45,7 +45,7 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.mode}`]: this.mode,
-                        [`${prefixCls}-${this.theme}`]: this.theme
+                        [`${prefixCls}-${this.theme}`]: this.mode === 'horizontal' || (this.mode === 'vertical' && this.theme !== 'primary')
                     }
                 ]
             }

src/styles/components/menu.less

@@ -166,6 +166,11 @@
             padding-left: 28px;
         }
     }
+    &-dark&-vertical &-item-group{
+        &-title{
+            color: @text-color;
+        }
+    }
 
     &-light&-vertical &-item{
         border-right: 2px solid transparent;
@@ -175,5 +180,30 @@
             z-index: 2;
         }
     }
+
+    &-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
+        color: @subsidiary-color;
+        &-active:not(.@{menu-prefix-cls}-submenu), &:hover{
+            background: @menu-dark-active-bg;
+        }
+        &-active:not(.@{menu-prefix-cls}-submenu){
+            color: @primary-color;
+            border-right: 2px solid @primary-color;
+        }
+    }
+    &-dark&-vertical &-submenu &-item{
+        &:hover{
+            background: @title-color;
+        }
+        &-active{
+            border-right: none;
+            color: #fff;
+            background: @primary-color;
+        }
+    }
+
+    &-dark&-vertical &-opened{
+        background: @menu-dark-active-bg;
+    }
 }
 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);

src/styles/themes/default/custom.less

@@ -42,6 +42,7 @@
 @table-td-stripe-bg           : #f5f7f9;
 @table-td-hover-bg            : #ebf7ff;
 @table-td-highlight-bg        : #ebf7ff;
+@menu-dark-active-bg          : #313540;
 
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .2);

test/routers/menu.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Menu mode="horizontal" active-key="1">
+        <Menu mode="horizontal" :theme="theme" active-key="1">
             <Menu-item key="1">
                 <Icon type="ionic"></Icon><span>导航一</span>
             </Menu-item>
@@ -19,7 +19,13 @@
             <Menu-item key="4">导航四</Menu-item>
         </Menu>
         <br><br>
-        <Menu :mode="mode" active-key="1" @on-open-change="change">
+        <Radio-group :model.sync="theme">
+            <Radio value="light"></Radio>
+            <Radio value="dark"></Radio>
+            <Radio value="primary"></Radio>
+        </Radio-group>
+        <br><br>
+        <Menu :mode="mode" :theme="theme" active-key="1" @on-open-change="change">
             <Menu-item key="1">
                 <Icon type="ionic"></Icon>
                 <span>导航一</span>
@@ -114,7 +120,8 @@
         props: {},
         data () {
             return {
-                mode: 'vertical'
+                mode: 'vertical',
+                theme: 'dark'
             }
         },
         computed: {},