导航栏调整

frontend/saas-web/app/view/main/Navigation.js

@@ -78,6 +78,7 @@ Ext.define('saas.view.main.Navigation', {
             listeners: {
                 itemmouseenter: me.showNavMenu,
                 itemmouseleave: me.hideNavMenu,
+                itemClick: me.clickNavMenu,
                 scope: me
             }
         });
@@ -90,6 +91,11 @@ Ext.define('saas.view.main.Navigation', {
         me.callParent();
     },
 
+    clickNavMenu: function(view, record, item, index, e, eOpts) {
+        var me = this;
+        this.showNavMenu(view, record, item, index, e, eOpts);
+    },
+
     showNavMenu: function(view, record, item, index, e, eOpts) {
         var recData = record.data,
         menuItems = recData.items || [],
@@ -110,18 +116,18 @@ Ext.define('saas.view.main.Navigation', {
                         '<tpl for=".">',
                         '<div class="menu">',
                             '<h3 class="menu-title">{text}</h3>',
-                            '<ul class="menu-content">',
+                            '<div class="menu-content">',
                                 '<tpl for="items">',
-                                '<li class="menuitem">',
-                                    '<span class="item-text" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">',
+                                '<div class="menuitem">',
+                                    '<div class="item-text" title="{text}" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">',
                                         '{text}',
-                                    '</span>',
+                                    '</div>',
                                     '<tpl if="{formType}">',
-                                    '<i class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">新增</i>',
+                                    '<div class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">新增</div>',
                                     '</tpl>',
-                                '</li>',
+                                '</div>',
                                 '</tpl>',
-                            '</ul>',
+                            '</div>',
                         '</div>',
                         '</tpl>',
                     '</div>',
@@ -144,8 +150,14 @@ Ext.define('saas.view.main.Navigation', {
                         menu.setHeight(menuViewHeight);
                         menu.updateLayout();
 
-                        view.el.dom.addEventListener('mouseleave', function() {
-                            menu.hide();
+                        view.el.dom.addEventListener('mouseleave', function(e) {
+                            var ex = e.clientX,
+                            ey = e.clientY,
+                            box = menuView.getBoundingClientRect();
+
+                            if(ey <= box.top || ex >= (box.left + box.width) || ey >= (box.top + box.height) || (ex <= box.left && ey >= (box.top + 64))) {
+                                menu.hide();
+                            }
                         });
 
                         Ext.Array.each(menuItem, function(mi) {
@@ -181,6 +193,10 @@ Ext.define('saas.view.main.Navigation', {
             var menu = Ext.create('Ext.menu.Menu', {
                 id: menuId,
                 width: window.innerWidth,
+                style: {
+                    borderTopRightRadius: '4px',
+                    borderBottomRightRadius: '4px'
+                },
                 items: [view]
             });
         }

frontend/saas-web/app/view/main/Navigation.scss

@@ -93,9 +93,6 @@
     .nav-menu-body {
         display: flex;
         padding: 5px;
-        border: 4px solid #c7c7c7;
-        border-color: rgba(0,0,0,.2);
-        border-left: 0;
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
 
@@ -110,7 +107,7 @@
             }
             
             .menu-title {
-                padding-left: 10px;
+                margin: 5px;
             }
 
             .menu-content {
@@ -119,23 +116,40 @@
                 padding-right: 10px;
 
                 .menuitem {
-                    margin: 5px 0;
+                    padding: 5px;
+                    display: flex;
+                    border-radius: 4px;
+                    align-content: space-between;
 
                     .item-text {
                         cursor: pointer;
+                        line-height: 24px;
+                        white-space: nowrap;
+                        width: 124px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
                     }
 
                     .item-icon {
                         cursor: pointer;
-                        display: none;
                         float: right;
-                        font-style: inherit;
-                        background: green;
-                        color: white;
-                        border-radius: 4px;
+                        display: none;
+                        background: #64b448;
+                        color: #fff;
+                        font-size: 11px;
+                        padding: 3px 6px;
+                        border-radius: 3px;
+                        margin-right: 5px;
+                        font-weight: 400;
+                        width: 40px;
+
+                        &:hover {
+                            opacity: 0.7;
+                        }
                     }
 
                     &:hover {
+                        background-color: #E4E4E4;
 
                         .item-icon {
                             display: block;