Merge branch 'v4' of github.com:jumpserver/lina into v4

src/components/Cards/RelationCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <IBox :title="title" :type="type" v-bind="$attrs">
+  <IBox :title="title" :type="type" class="the-box" v-bind="$attrs">
     <table class="CardTable" style="width: 100%;table-layout:fixed;">
       <tr>
         <td colspan="2">
@@ -311,7 +311,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
   b, strong {
     font-weight: 700;
     font-size: 13px;
@@ -329,4 +329,8 @@ export default {
   .box-margin {
     margin-bottom: 20px;
   }
+
+  .the-box ::v-deep .el-card__body {
+    padding: 20px;
+  }
 </style>

src/components/DataActions/index.vue

@@ -253,6 +253,10 @@ $color-drop-menu-border: #e4e7ed;
     align-items: center;
     padding: 3px 6px;
     color: $btn-text-color;
+
+    * {
+      vertical-align: baseline !important;
+    }
   }
 
   ::v-deep .action-item.el-dropdown .el-button {

src/components/IBox/index.vue

@@ -82,7 +82,7 @@ export default {
   }
 
   .ibox >>> .el-card__body {
-    padding: 30px 30px 20px 30px;
+    //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
     color: var(--color-icon-primary);
   }
 </style>

src/components/Table/ListTable/index.vue

@@ -255,10 +255,6 @@ export default {
       padding: 0;
     }
 
-    .el-table__header thead > tr > th {
-      background-color: white;
-    }
-
     .el-table__row .cell {
       overflow: hidden;
       white-space: nowrap;

src/components/Table/TreeTable/index.vue

@@ -28,7 +28,7 @@
         class="right"
         style="display: flex"
       >
-        <div v-if="showTree" class="mini">
+        <div v-if="true" class="mini">
           <div :class="{'is-show': iShowTree}" class="mini-button" @click="iShowTree = !iShowTree">
             <svg-icon
               :style="{'transform': iShowTree ? 'none' : 'rotate(180deg)'}"
@@ -166,7 +166,6 @@ $origin-color: #ffffff;
   display: flex;
   flex-wrap: nowrap;
   justify-content:space-between;
-  align-items: flex-start;
 
   .left {
     height: 100%;

src/components/Tree/DataZTree/components/ZTree/index.vue

@@ -375,9 +375,9 @@ export default {
 <style lang="scss" scoped>
 .treebox {
   display: flex;
+  flex-direction: column;
   justify-content: flex-start;
-  padding-left: 20px;
-  padding-top: 15px;
+  padding: 15px 20px 0 20px;
 
   .ztree {
     width: 100%;

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -125,8 +125,6 @@ export default {
 <style lang="scss" scoped>
 .menu-main.el-menu {
   background-color: transparent;
-  border-right: solid 1px var(--color-border) !important;
-  border: solid 1px var(--color-border);
   letter-spacing: 0.09em;
 
   ::v-deep .el-submenu .el-submenu__title {
@@ -149,7 +147,6 @@ export default {
     width: 160px;
     line-height: 26px;
     padding: 4px 24px;
-    border-bottom: solid 1px var(--color-border);
 
     &:hover {
       background-color: var(--menu-hover);

src/layout/components/NavLeft/index.vue

@@ -33,7 +33,7 @@
         :collapse="isCollapse"
         :collapse-transition="false"
         :default-active="activeMenu"
-        :default-openeds="defaultMenu"
+        :default-openeds="defaultOpensMenu"
         :text-color="variables['menuText']"
         :text-weigth="variables['menuTextWeight']"
         :unique-opened="false"
@@ -84,7 +84,9 @@ export default {
       'currentViewRoute',
       'sidebar'
     ]),
-
+    defaultOpensMenu() {
+      return this.currentViewRoute.children.filter(route => route.children).map(route => route.path)
+    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route
@@ -125,9 +127,7 @@ export default {
     }
   },
   mounted() {
-    // this.setViewIconAttention()
     this.setLeastMenuOpen()
-    this.defaultOpensMenu()
   },
   methods: {
     toggleSideBar() {
@@ -145,8 +145,6 @@ export default {
       // 此处不使用 nextTick 的原因可能是由于子组件中切换 tag 需要触发异步的 dispatch
       setTimeout(() => {
       // this.setLeastMenuOpen()
-        this.defaultOpensMenu()
-        console.log('defaultMenu', this.defaultMenu)
       }, 500)
     },
     setLeastMenuOpen() {
@@ -158,18 +156,6 @@ export default {
       if (el) {
         el.click()
       }
-    },
-    setViewIconAttention() {
-      const t = setInterval(() => {
-        this.switchViewOtherClasses = 'hover-switch-view'
-      }, 1000)
-      setTimeout(() => {
-        clearInterval(t)
-        this.switchViewOtherClasses = ''
-      }, 3000)
-    },
-    defaultOpensMenu() {
-      this.defaultMenu = this.currentViewRoute.children.filter(route => route.children).map(route => route.path)
     }
   }
 }
@@ -179,6 +165,9 @@ export default {
 
 $mobileHeight: 40px;
 $origin-color: #ffffff;
+$hover-bg-color: #e6e6e6;
+$hover-text-color: #606266;
+$hover-border-color: #d2d2d2;
 
 .left-side-wrapper {
   .nav-header {
@@ -246,32 +235,34 @@ $origin-color: #ffffff;
           display: flex;
           justify-content: center;
           align-items: center;
+          padding: 0 15px;
 
           .view-title {
-            margin-left: 15px;
             width: calc(100% - 10px);
             display: inline-block
           }
 
           .icon-zone {
-            margin-right: 15px;
-
-            &:hover {
-              color: var(--color-primary);
-            }
+            display: flex;
+            align-items: center;
+            padding: 6px;
+            box-sizing: border-box;
 
             .icon {
+              width: 1.05em;
+              height: 1.05em;
               margin-right: 0 !important;
             }
+
+            &:hover {
+              color: $hover-text-color;
+              border-color: $hover-border-color;
+              background-color: $hover-bg-color;
+              border-radius: 4px;
+            }
           }
         }
       }
-
-      .hover-switch-view {
-        background: var(--menu-hover) !important;
-        color: var(--color-primary);
-        text-align: center;
-      }
     }
   }
 
@@ -305,7 +296,9 @@ $origin-color: #ffffff;
       }
 
       &:hover {
-        background-color: $subMenuHover;
+        color: $hover-text-color;
+        border-color: $hover-border-color;
+        background-color: $hover-bg-color;
       }
     }
   }
@@ -335,10 +328,6 @@ $origin-color: #ffffff;
         margin-left: 0;
       }
     }
-
-    &:hover {
-      color: var(--color-primary);
-    }
   }
 }
 

src/layout/components/TabPage/index.vue

@@ -23,7 +23,13 @@
               <i v-if="item.icon" :class="item.icon" class="fa pre-icon " />
               {{ toSentenceCase(item.title) }}
               <slot :tab="item.name" name="badge" />
-              <el-tooltip v-if="item.helpTip" :open-delay="500" effect="dark" placement="bottom" popper-class="help-tips">
+              <el-tooltip
+                v-if="item.helpTip"
+                :open-delay="500"
+                effect="dark"
+                placement="bottom"
+                popper-class="help-tips"
+              >
                 <div slot="content" class="page-help-content" v-html="item.helpTip" />
                 <span>
                   <el-button class="help-msg-btn">
@@ -127,6 +133,7 @@ export default {
     this.iActiveMenu = this.getPropActiveTab()
   },
   mounted() {
+    console.log('Mounted ')
     this.iActiveMenu = this.getPropActiveTab()
   },
   methods: {
@@ -146,7 +153,7 @@ export default {
       let activeTab = ''
 
       const preActiveTabs = [
-        this.$route.query[this.$route.path],
+        this.$route.query['tab'],
         this.$cookie.get(this.$route.path),
         this.activeMenu
       ]

src/styles/index.scss

@@ -534,6 +534,11 @@ li.rmenu i.fa {
   }
 }
 
+.el-table__header thead > tr > th {
+  background-color: white;
+  font-weight: 600;
+}
+
 .el-card.no-border {
   margin-bottom: 20px;
 

src/styles/menu.scss

@@ -183,3 +183,13 @@ $single-menu-height: 38px;
     color: $menuActiveText;
   }
 }
+
+.el-menu--vertical .el-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+
+  .svg-icon {
+    margin-right: 15px;
+  }
+}