主从表、查询列表UI调整

frontend/saas-web/app/Application.scss

@@ -72,4 +72,184 @@ body.launching {
 
 .boldFont {
   font-weight: bold;
+}
+
+// default font-family
+.x-body,
+.x-btn-inner,
+.x-panel-body-default,
+.x-toolbar-text-default,
+.x-form-item-label-default,
+.x-form-text-default,
+.x-column-header,
+.x-grid-item,
+.x-grid-row-summary .x-grid-cell, .x-grid-row-summary .x-grid-rowwrap, .x-grid-row-summary .x-grid-cell-rowbody {
+  font-family: 'pingFangSC-Regular';
+}
+
+.x-form-item-label-default {
+  font-family: PingFangSC-Medium;
+  font-size: 14px;
+  color: #505363;
+  text-align: right;
+  line-height: 20px;
+}
+
+// toolbar button
+.x-btn-default-toolbar-small {
+  color: #fff;
+  background-color: #308ee0;
+  border-color: #308ee0;
+  min-width: 86px;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  .x-btn-inner-default-toolbar-small {
+    color: #FFFFFF;
+  }
+}
+
+.x-btn.x-btn-menu-active.x-btn-default-toolbar-small,
+.x-btn.x-btn-pressed.x-btn-default-toolbar-small,
+.x-btn-over.x-btn-default-toolbar-small {
+  background: #34BAF6;
+  opacity: 0.72;
+}
+
+.x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
+  background: #34BAF6;
+  opacity: 0.72;
+}
+
+.x-btn-wrap-default-toolbar-small.x-btn-arrow-right:after {
+  color: #FFFFFF;
+}
+
+.x-btn.x-btn-disabled.x-btn-default-toolbar-small {
+  border-color: #E6E6E6;
+  background: #E6E6E6;
+
+  .x-btn-inner-default-toolbar-small {
+    color: #606060;
+  }
+}
+
+
+.x-btn-default-toolbar-small{
+  border-radius: 2px !important;
+}
+
+.x-formpanel-btn-orange {
+  border-color: #f67f00;
+  background: linear-gradient(to bottom,#da7101 0,#f67f00 100%) !important;
+  
+  .x-btn-inner-default-toolbar-small{
+      color:#fff !important;
+  }
+}
+
+.x-formpanel-btn-blue {
+  border-color: #346fb9;
+  background: linear-gradient(to bottom,#3876c3 0,#346fb9 100%) !important;
+
+  .x-btn-inner-default-toolbar-small{
+      color:#fff !important;
+  }
+}
+
+.x-grid-body {
+  border-width: 1px;
+  border-color: #ABDAFF;
+}
+
+.x-column-header {
+  background: #E5F7FF;
+  border-right: 1px solid #ABDAFF;
+}
+
+.x-column-header-text-inner {
+  font-size: 14px;
+  color: #505363;
+  letter-spacing: 0;
+  text-align: center;
+  line-height: 20px;
+  font-family: PingFangSC-Medium;
+  font-weight: normal;
+}
+
+.x-panel-default-outer-border-trbl {
+  border-color: #ABDAFF !important;
+}
+
+.x-form-trigger-wrap-default {
+  border-color: #CACFE1;
+  border-radius: 2px;
+}
+
+.x-form-trigger-default {
+  color: #5E5E5E;
+}
+
+.x-grid-header-ct {
+  border-top-color: #ABDAFF;
+  border-top-width: 1px;
+}
+
+.x-panel-default-outer-border-rl {
+  border-right-color: #ABDAFF;
+  border-right-width: 1px;
+  border-left-color: #ABDAFF;
+  border-left-width: 1px;
+}
+
+.x-grid-item-alt {
+  background-color: #F1F9FF;
+}
+
+.x-grid-locked .x-grid-inner-locked {
+  border-width: 0 1px 0 0;
+}
+
+.x-grid-scrollbar-clipper-locked, .x-grid-scrollbar-locked {
+  border-right-color: #ABDAFF;
+}
+
+.x-grid-inner-locked {
+  border-right-color: #ABDAFF;
+}
+
+.x-grid-with-row-lines .x-grid-item:first-child {
+  border-color: #ffffff;
+}
+
+.x-grid-with-row-lines .x-grid-item {
+  border-color: #ABDAFF;
+}
+
+.x-grid-item-over {
+  background-color: #bde5f7;
+}
+
+.x-grid-cell-special {
+  border-color: #ABDAFF;
+}
+
+
+
+/*滚动条样式*/
+div::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+div::-webkit-scrollbar-thumb {
+  background: #C2EAFC;
+  border-radius: 8px;
+
+  &:hover {
+    background: #74c3e6;
+  }
+}
+div::-webkit-scrollbar-track {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
 }

frontend/saas-web/app/view/core/form/FormPanel.js

@@ -116,7 +116,7 @@ Ext.define('saas.view.core.form.FormPanel', {
             xtype: 'textfield',
             minHeight: 24,
             maxHeight: 24,
-            width: 150,
+            width: 200,
             cls: 'x-codeeditor',
             hidden: true,
             allowBlank: false,

frontend/saas-web/app/view/core/form/FormPanel.scss

@@ -3,17 +3,13 @@
 
     .x-tb {
         color: #A2A2A2;
-        // letter-spacing: 0.72px;
-        // text-align: left;
-        font-size: 16px;
-    }
-    .x-no {
-    }
-    .x-code {
+        letter-spacing: 0.72px;
+        text-align: left;
+        font: 400 18px/16px 'PingFangSC-Regular';
     }
     .x-codeeditor {
-        top: 0px !important;
-        left: 39px !important;
+        top: -2px !important;
+        left: 44.5px !important;
 
         .x-form-trigger-wrap {
             border-top: none;
@@ -23,8 +19,10 @@
 
             input {
                 padding-left: 0;
-                font-size: 16px;
+                letter-spacing: 0.72px;
+                font-size: 18px;
                 min-height: inherit;
+                font: 400 18px/16px 'PingFangSC-Regular';
             }
         }
     }

frontend/saas-web/app/view/core/form/field/DetailGridField.js

@@ -132,8 +132,8 @@ Ext.define('saas.view.core.form.field.DetailGridField', {
             renderer: function(value, a, record, index) {
                 return '<div class="text">' + value + '</div>' +
                 '<div class="icons" style="height: 19px; display: none;">' + 
-                    '<div style="line-height: 19px; flex: 1; color: green; cursor: pointer; margin-right: 2px;" class="x-row-insert fa fa-plus" title="插入行"></div>'+
-                    '<div style="line-height: 19px; flex: 1; color: red; cursor: pointer; margin-left: 2px;" class="x-row-delete fa fa-minus" title="删除行"></div>'+
+                    '<div style="line-height: 19px; flex: 1; color: #34BAF6; cursor: pointer; margin-right: 2px;" class="x-row-insert fa fa-plus" title="插入行"></div>'+
+                    '<div style="line-height: 19px; flex: 1; color: #FF002B; cursor: pointer; margin-left: 2px;" class="x-row-delete fa fa-minus" title="删除行"></div>'+
                 '</div>';
             },
         };

frontend/saas-web/app/view/core/form/field/DetailGridField.scss

@@ -21,10 +21,28 @@
 .x-grid-necessary .x-column-header-text:before{
     content: '*';
     font-size: 130%;
-    color: #ff0000;
+    color: #FF002B;
     width: 5px;
     height: 5px;
     margin-top: 4px;
     margin-left: -10px;
     position: absolute;
+}
+
+.x-grid-locked .x-grid-inner-locked {
+    border: none;
+}
+
+.x-grid-locked .x-grid-inner-locked {
+    
+    .x-grid-header-ct {
+        border-right: 1px solid #ABDAFF !important;
+    }
+}
+
+.x-grid-scrollbar-clipper-locked, .x-grid-scrollbar-locked {
+
+    .x-grid-view {
+        border-right: 1px solid #ABDAFF !important;
+    }
 }

frontend/saas-web/app/view/core/query/QueryFormPanel.js

@@ -4,8 +4,11 @@ Ext.define('saas.view.core.query.QueryFormPanel', {
 
     layout: 'column',
     autoScroll: true,
-    bodyPadding: 5,
+    bodyPadding: '16 10 0 10',
     labelSeparator : ':',
+
+    cls: 'x-queryform',
+
     defaults:{
 		margin: '0 5 5 0',
         labelAlign: 'right',
@@ -17,9 +20,6 @@ Ext.define('saas.view.core.query.QueryFormPanel', {
     dockedItems: [{
         xtype: 'toolbar',
         dock: 'bottom',
-        style: {
-            'border-bottom': '1px solid #35baf6 !important'
-        },
         items: ['->', {
         //     xtype: 'button',
         //     text: '更多查询',

frontend/saas-web/app/view/core/query/QueryGridPanel.js

@@ -2,8 +2,6 @@ Ext.define('saas.view.core.query.QueryGridPanel', {
     extend: 'Ext.grid.Panel',
     xtype: 'core-query-querygridpanel',
 
-    cls: 'x-core-query',
-
     //工具类
     BaseUtil: Ext.create('saas.util.BaseUtil'),
     //字段属性
@@ -25,6 +23,8 @@ Ext.define('saas.view.core.query.QueryGridPanel', {
     queryMode: 'MAIN',
     defaultCondition: '',
 
+    cls: 'x-querygrid',
+
     //基础属性
     border: 1,
     anchor: '100% 70%',
@@ -107,9 +107,6 @@ Ext.define('saas.view.core.query.QueryGridPanel', {
             dockedItems: [{
                 xtype: 'toolbar',
                 dock: 'top',
-                style: {
-                    borderTop: 'none'
-                },
                 defaults: { // defaults 将会应用所有的子组件上,而不是父容器
                     listeners: {
                         'mouseover':function(){

frontend/saas-web/app/view/core/query/QueryPanel.js

@@ -7,15 +7,18 @@ Ext.define('saas.view.core.query.QueryPanel', {
 
     layout: 'vbox',
     autoScroll: true,
-    border: 1,
-    bodyPadding: 5,
+    bodyPadding: 0,
     margin: '0',
+
+    cls: 'x-core-query',
     
     items: [{
         reference: 'queryform',
         xtype: 'core-query-queryformpanel',
         width: '100%',
     }, {
+        margin: '32 0 0 0',
+        padding: '16 16 16 16',
         reference: 'querygrid',
         xtype: 'core-query-querygridpanel',
         width: '100%',

frontend/saas-web/app/view/core/query/QueryPanel.scss

@@ -0,0 +1,53 @@
+.x-core-query {
+
+    .x-panel-bodyWrap {
+
+        .x-panel-body {
+            cursor: pointer;
+
+            .x-box-inner {
+                cursor: default;
+                background: #EEF4F9;
+
+                .x-box-target {
+                    .x-queryform {
+                
+                        .x-panel-bodyWrap {
+        
+                            .x-toolbar-default {
+                                padding: 6px 0 16px 8px;
+
+                                .x-box-inner {
+                                    background: #FFFFFF;
+        
+                                }
+                            }
+                        }
+                    }
+                    .x-querygrid {
+                        background-color: white;
+
+                        .x-panel-bodyWrap {
+
+                            .x-toolbar {
+                                margin-bottom: 16px;
+                                border: none;
+
+                                .x-box-inner {
+                                    background-color: white;
+                                }
+                            }
+
+                            .x-grid-header-ct {
+                                border-right-color: #ABDAFF !important;
+                                border-right-width: 1px !important;
+                                border-left-color: #ABDAFF !important;
+                                border-left-width: 1px !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -64,13 +64,15 @@ $treelist-nav-ui: (
         background: #34BAF6;
 
         img {
-            width: 64px;
-            top: 0px;
-            left: 20px;
+            width: 54px;
+            height: 54px;
+            top: 5px;
+            left: 16px;
             position: relative;
         }
 
         .logo-text {
+            font-family: 'pingFangSC-Regular';
             font-size: 18px;
             color: #FFFFFF;
             text-align: left;
@@ -126,26 +128,6 @@ $treelist-nav-ui: (
     border: 1px solid #ccc;
 }
 
-.x-btn-default-toolbar-small{
-    border-radius: 5px !important;
-}
-
-.x-formpanel-btn-orange {
-    background: linear-gradient(to bottom,#da7101 0,#f67f00 100%) !important;
-}
-
-.x-formpanel-btn-orange .x-btn-inner-default-toolbar-small{
-    color:#fff !important;
-}
-
-.x-formpanel-btn-blue {
-    background: linear-gradient(to bottom,#3876c3 0,#346fb9 100%) !important;
-}
-
-.x-formpanel-btn-blue .x-btn-inner-default-toolbar-small{
-    color:#fff !important;
-}
-
 .x-query-menu {
     width:68px !important;
 }

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

@@ -37,22 +37,25 @@ Ext.define('saas.view.main.MainController', {
         new_width = navCollapsed ? viewModel.get('smallNavWidth') : viewModel.get('navWidth'),
         newLogoImgStyle = navCollapsed ? {
             width: 50,
+            height: 50,
             top: 7,
             left: 6
         } : {
-            width: 64,
-            top: 0,
-            left: 20
+            width: 54,
+            height: 54,
+            top: 5,
+            left: 16
         },
         newLogoTextStyle = navCollapsed ? {
-            10: {
-                opacity: 0.7
+            5: {
+                opacity: 0
             },
-            30: {
+            10: {
                 opacity: 0
             },
             100: {
-                opacity: 0
+                opacity: 0,
+                display: 'none'
             }
         } : {
             25: {
@@ -66,7 +69,7 @@ Ext.define('saas.view.main.MainController', {
             marginLeft: 6,
             fontSize: 28
         } : {
-            marginLeft: 40,
+            marginLeft: 22,
             fontSize: 24
         },
         newNavTextStyle = navCollapsed ? {

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

@@ -7,7 +7,7 @@ Ext.define('saas.view.main.MainModel', {
     alias: 'viewmodel.main',
 
     data: {
-        navWidth: 200,
+        navWidth: 180,
         smallNavWidth: 64,
     }
 });

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

@@ -45,6 +45,7 @@ $nav-font-color: #FFFFFF;
                                     list-style: none;
                                     max-height: 60px;
                                     padding: 0 10px;
+                                    display: flex;
     
                                     .nav-inner-icon {
                                         opacity: 0.4;
@@ -52,9 +53,9 @@ $nav-font-color: #FFFFFF;
                                         color: $nav-font-color;
                                         font-size: 24px;
                                         text-align: center;
-                                        margin-left: 40px;
+                                        margin-left: 22px;
                                         display: inline;
-                                        margin-right: 42px;
+                                        margin-right: 16px;
     
                                         &:before {
                                             line-height: 60px;
@@ -64,12 +65,11 @@ $nav-font-color: #FFFFFF;
                                     .nav-inner-text {
                                         font-size: $nav-font-size;
                                         color: $nav-font-color;
-                                        letter-spacing: 0.64px;
+                                        letter-spacing: 4px;
                                         text-align: left;
                                         opacity: 0.46;
-                                        display: inline;
                                         line-height: 60px;
-
+                                        height: 60px;
                                     }
                                 }
                             }

frontend/saas-web/packages/local/theme-default/sass/etc/all.scss

@@ -0,0 +1 @@
+@import 'fontset.scss';

frontend/saas-web/packages/local/theme-default/sass/etc/fontset.scss

@@ -0,0 +1,35 @@
+$ext-font-path: get-resource-path('fonts');
+
+@font-face {
+    font-family: 'pingFangSC-Regular';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-准-简.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'PingFangSC-Ultralight';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-极细-简.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'PingFangSC-Light';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-细-简.ttf?t=1541646656813') format('truetype');
+}
+
+@font-face {
+    font-family: 'PingFangSC-Thin';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-纤细-简.ttf?t=1541646656813') format('truetype');
+}
+
+@font-face {
+    font-family: 'PingFangSC-Medium';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-中黑-简.ttf?t=1541646656813') format('truetype');
+}
+
+@font-face {
+    font-family: 'PingFangSC-Medium';
+    src: url('#{$ext-font-path}/pingfang/苹方黑体-中粗-简.ttf?t=1541646656813') format('truetype');
+}