From 2d136757b6ae3323f0b04230734efe35c0b87182 Mon Sep 17 00:00:00 2001
From: hale <hzhayue@corp.netease.com>
Date: Tue, 1 Aug 2017 21:38:22 +0800
Subject: [PATCH] =?UTF-8?q?misc:1.=E5=A2=9E=E5=8A=A0iconClass=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=202.=20=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA=203.=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E7=BA=A7=E8=8F=9C=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?url=E5=B1=9E=E6=80=A7=204.=20=E4=BF=AE=E6=94=B9nek-ui=E7=9A=84?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../navigation/KLMenu/KLMenuItem/index.mcss   |  4 +++
 .../navigation/KLMenu/KLSubMenu/index.html    | 30 +++++++++++++++++--
 .../navigation/KLMenu/KLSubMenu/index.js      |  4 +++
 .../navigation/KLMenu/KLSubMenu/index.mcss    | 16 +++++++---
 .../navigation/KLSidebar/index.html           |  4 +--
 src/mcss/base/var.mcss                        |  2 +-
 6 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss b/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss
index 53cc9442..9a70d81e 100644
--- a/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss
+++ b/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss
@@ -32,4 +32,8 @@
         top: 0;
      }
    }
+
+   &:last-child {
+     margin-bottom: 5px;
+   }
 }
\ No newline at end of file
diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.html b/src/js/components/navigation/KLMenu/KLSubMenu/index.html
index 4a7f7318..fc7efee7 100644
--- a/src/js/components/navigation/KLMenu/KLSubMenu/index.html
+++ b/src/js/components/navigation/KLMenu/KLSubMenu/index.html
@@ -1,6 +1,24 @@
+{#if url}
+<a class="m-subMenu {class}" r-class={ {'active': active} } href="{url}">
+  <div class="head">
+    {#if iconClass}
+    <span class="head_icon {iconClass}"></span>
+    {/if}
+    <span class="head_title">
+      {#if title}
+        {title}
+      {#elseif titleTemplate}
+        {#inc titleTemplate}
+      {/if}
+    </span>
+  </div>
+</a>
+{#else}
 <li class="m-subMenu {class}" r-class={ {'active': active} } on-click={this.toggle($event)}>
   <div class="head">
-    <span class="head_arrow u-icon u-icon-angle-down" r-class={ {'isOpen':active} }></span>
+    {#if iconClass}
+    <span class="head_icon {iconClass}"></span>
+    {/if}
     <span class="head_title">
       {#if title}
         {title}
@@ -8,8 +26,14 @@
         {#inc titleTemplate}
       {/if}
     </span>
+    {#if this.$body}
+      <span class="head_arrow u-icon u-icon-angle-right" r-class={ {'isOpen':active} }></span>
+    {/if}
   </div>
-  <ul class="menuItems" r-hide="!active" r-animation="on:enter;collapse:on;on:leave;collapse:off;">
+  {#if active}
+  <ul class="menuItems" r-animation="on:enter;collapse:on;on:leave;collapse:off;">
     {#inc this.$body}
   </ul>
-</li>
\ No newline at end of file
+  {/if}
+</li>
+{/if}
\ No newline at end of file
diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.js b/src/js/components/navigation/KLMenu/KLSubMenu/index.js
index 242d83d5..50888493 100644
--- a/src/js/components/navigation/KLMenu/KLSubMenu/index.js
+++ b/src/js/components/navigation/KLMenu/KLSubMenu/index.js
@@ -15,6 +15,8 @@ const RootMenuMixin = require('../mixins/rootMenu');
  * @param {object}        [options.data]                          = 绑定属性
  * @param {string}        [options.data.class]                    => 补充class
  * @param {boolean}       [options.data.defaultOpen=false]        => 是否默认展开,如果需要默认展开,设置为true
+ * @param {string}        [options.data.url='']                   => 如果一级菜单需要链接,可配置url属性
+ * @param {string}        [options.data.iconClass='']             => 菜单文字前的icon
  * @param {string}        [options.data.title]                    => 标题文案
  * @param {string}        [options.data.titleTemplate]            => 标题文案模板
  */
@@ -28,6 +30,8 @@ const KLSubMenu = Component.extend({
     this.defaults({
       class: '',
       title: '',
+      href: '',
+      iconClass: '',
       titleTemplate: '',
     });
     this.supr();
diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss b/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss
index 5303e81d..53c204cb 100644
--- a/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss
+++ b/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss
@@ -1,10 +1,13 @@
 .m-subMenu {
     position: relative;
+    display: block;
     border-bottom: 1px solid #DFEAF3;
     cursor: pointer;
 
     .head {
         position: relative;
+        display: flex;
+        align-items: center;
         padding: 15px 0 15px 47px;
         font-size: 14px;
         transition: all .4s ease;
@@ -15,16 +18,22 @@
 
         .head_arrow {
             position: absolute;
-            top: 15px;
-            left: 28px;
+            right: 10px;
             font-size: 14px;
             transition: all .4s ease;
             transform: rotate(0);
 
             &.isOpen {
-                transform: rotate(180deg);
+                transform: rotate(90deg);
             }
         }
+
+        .head_icon {
+            position:absolute;
+            left: 20px;
+            color: #333;
+            font-size: 16px;
+        }
     }
 
     .menuItems {
@@ -37,7 +46,6 @@
 
     &.active {
         background: #F6F9FC;
-        padding-bottom: 5px;
     }
 }
 
diff --git a/src/js/components/navigation/KLSidebar/index.html b/src/js/components/navigation/KLSidebar/index.html
index 0d5310e3..94a524ed 100644
--- a/src/js/components/navigation/KLSidebar/index.html
+++ b/src/js/components/navigation/KLSidebar/index.html
@@ -3,13 +3,13 @@
     <kl-menu uniqueOpened="{uniqueOpened}">
       {#list menus as menu}
       {#if menu[childrenKey] && menu[childrenKey].length}
-      <kl-menu-sub title="{menu[titleKey]}" defaultOpen="{menu.open}">
+      <kl-menu-sub title="{menu[titleKey]}" defaultOpen="{menu.open}" iconClass="{menu.iconClass}">
         {#list menu[childrenKey] as page}
         <kl-menu-item isCurrent="{page.open}" url="{page[urlKey]}">{page[pageKey]}</kl-menu-item>
         {/list}
       </kl-menu-sub>
       {#else}
-      <kl-menu-sub titleTemplate="<a href='{menu[urlKey]}'>{menu[titleKey]}</a>"></kl-menu-sub>
+      <kl-menu-sub url="{menu[urlKey]}" titleTemplate="{menu[titleKey]}" iconClass="{menu.iconClass}"></kl-menu-sub>
       {/if}
       {/list}
     </kl-menu>
diff --git a/src/mcss/base/var.mcss b/src/mcss/base/var.mcss
index fc059de8..11ac1528 100644
--- a/src/mcss/base/var.mcss
+++ b/src/mcss/base/var.mcss
@@ -14,7 +14,7 @@ $media-md-max-width =                   960px - 1;
 $media-lg-max-width =                   1220px - 1;
 
 /* Fonts */
-$font-family-sans-serif = "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+$font-family-sans-serif = PingFangTC-Regular,Microsoft YaHei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
 $font-family-serif = Georgia, "Times New Roman", Times, SimSun, "FontAwesome", serif;
 $font-family-monospace = Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;
 $font-family-kai = Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif;