From 21cc957ac58cc38d10f2a74ef44c3f1f64717990 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 8 Dec 2016 14:13:17 +0800
Subject: [PATCH] update Menu

update Menu
---
 src/components/menu/menu.vue          |  2 +-
 src/styles/components/menu.less       | 30 +++++++++++++++++++++++++++
 src/styles/themes/default/custom.less |  1 +
 test/routers/menu.vue                 | 13 +++++++++---
 4 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index 4b6f61d3..3472f8e1 100644
--- a/src/components/menu/menu.vue
+++ b/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')
                     }
                 ]
             }
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index ed2886e8..ab28ada9 100644
--- a/src/styles/components/menu.less
+++ b/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);
\ No newline at end of file
diff --git a/src/styles/themes/default/custom.less b/src/styles/themes/default/custom.less
index 22d57291..40cd11be 100644
--- a/src/styles/themes/default/custom.less
+++ b/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);
diff --git a/test/routers/menu.vue b/test/routers/menu.vue
index ba5353b5..92d66d73 100644
--- a/test/routers/menu.vue
+++ b/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: {},