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

2026-01-25 14:34:46 +00:00 · 2024-05-24 19:17:27 +08:00
parent e0f9b819d2 9b9b096749
commit 68fa8f30c0
13 changed files with 152 additions and 130 deletions
--- a/src/components/Form/AutoDataForm/components/NestedField.vue
+++ b/src/components/Form/AutoDataForm/components/NestedField.vue
@@ -105,10 +105,16 @@ export default {
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
 .sub-form {
  margin-left: -33%;
  margin-right: 10px;
 }

+@media screen and (max-width: 992px) {
+  .sub-form {
+    margin-left: 0;
+    margin-right: 10px;
+  }
+}
 </style>
--- a/src/components/Table/TreeTable/index.vue
+++ b/src/components/Table/TreeTable/index.vue
@@ -116,6 +116,7 @@ export default {
  },
  mounted() {
    // debug(this.treeSetting)
+    console.log('component', this.component)
    this.initSetTableUrl()
  },
  methods: {
@@ -159,6 +160,69 @@ export default {
 </script>

 <style lang="scss" scoped>
+$origin-color: #ffffff;
+
+.tree-table-content {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content:space-between;
+  align-items: flex-start;
+
+  .left {
+    height: 100%;
+    background: $origin-color;
+    color: var(--color-border);
+
+    // title 部分
+    .title {
+      display: flex;
+      align-items: center;
+      height: 40px;
+      padding: 0 20px;
+      width: 100%;
+      border-bottom: solid 2px var(--color-primary);
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+
+      &:hover {
+        cursor: pointer;
+        color: var(--color-primary);
+      }
+    }
+
+    .auto-data-ztree {
+      overflow: auto;
+      height: 100%;
+
+      &.tree-tab ::v-deep .page-submenu {
+        height: 40px;
+      }
+    }
+
+    // tree 部分
+    .data-z-tree {
+      //margin-left: -20px;
+      //width: calc(100% + 20px);
+
+      .treebox {
+        padding-left: 10px;
+        padding-bottom: 10px;
+      }
+    }
+
+    >>> .tab-text {
+      font-size: 13px;
+    }
+
+    &:hover {
+      ~ .right .is-show {
+        display: block !important;;
+      }
+    }
+  }
+}
+
  .is-show {
    display: none;
  }
@@ -207,60 +271,10 @@ export default {
    width: 2px !important;
  }

-  .tree-table-content {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content:space-between;
-    align-items: flex-start;
-
-    .left {
-      height: 100%;
-      background: #ffffff;
-      color: var(--color-border);
-
-      >>> .treebox {
-        padding-left: 10px;
-        padding-bottom: 10px;
-      }
-
-      >>> .tab-text {
-        font-size: 13px;
-      }
-
-      .data-z-tree {
-        margin-left: -20px;
-        width: calc(100% + 20px);
-      }
-
-      &:hover {
-        ~ .right .is-show {
-          display: block !important;;
-        }
-      }
-    }
-  }
-
-  .auto-data-ztree {
-    overflow: auto;
-    height: 100%;
-    /*border-right: solid 1px red;*/
-  }
-
  .transition-box.left {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
  }

-  .title {
-    display: inline-block;
-    height: 40px;
-    line-height: 40px;
-    padding: 0 20px;
-    width: 100%;
-    border-bottom: solid 2px var(--color-primary);
-    font-size: 13px;
-    font-weight: 600;
-  }
-
 </style>
--- a/src/components/Tree/DataZTree/components/ZTree/index.vue
+++ b/src/components/Tree/DataZTree/components/ZTree/index.vue
@@ -373,6 +373,46 @@ export default {
 </script>

 <style lang="scss" scoped>
+.treebox {
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 20px;
+  padding-top: 15px;
+
+  .ztree {
+    width: 100%;
+    overflow: auto;
+    height: 648px;
+    background-color: #ffffff;
+
+    .level0 {
+      .node_name {
+        max-width: 120px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+
+    li {
+      background-color: transparent !important;
+
+      .button {
+        background-color: rgba(0, 0, 0, 0);
+      }
+
+      ul {
+        background-color: transparent !important;
+      }
+    }
+  }
+
+  &:hover {
+    >>> .tree-action-btn {
+      display: inline;
+    }
+  }
+
+}

 div.rMenu {
  position: absolute;
@@ -447,41 +487,6 @@ div.rMenu li {
  background-color: #f5f5f5;
 }

-.treebox {
-  background-color: transparent;
-  height: calc(100% - 40px);
-
-  &:hover {
-    >>> .tree-action-btn {
-      display: inline;
-    }
-  }
-
-  >>> .ztree {
-    overflow: auto;
-    background-color: transparent;
-    height: 648px;
-
-    .level0 .node_name {
-      max-width: 120px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    li {
-      background-color: transparent !important;
-
-      .button {
-        background-color: rgba(0, 0, 0, 0);
-      }
-
-      ul {
-        background-color: transparent !important;
-      }
-    }
-  }
-}
-
 ::v-deep .tree-banner-icon-zone {
  position: absolute;
  right: 7px;
--- a/src/components/Tree/DataZTree/index.vue
+++ b/src/components/Tree/DataZTree/index.vue
@@ -78,7 +78,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/components/Widgets/SvgIcon/index.vue
+++ b/src/components/Widgets/SvgIcon/index.vue
@@ -60,6 +60,6 @@ export default {
  display: inline-block;
 }
 ::v-deep path {
-  fill: inherit!important;
+  fill: inherit !important;
 }
 </style>
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -386,5 +386,4 @@ export default {
  .ibox >>> .el-card__body {
    padding-top: 30px;
  }
-
 </style>
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -26,17 +26,17 @@
    </div>
    <div class="menu-wrap el-scrollbar">
      <el-menu
+        class="left-menu"
+        mode="vertical"
        :active-text-color="variables['menuActiveText']"
        :background-color="variables['menuBg']"
        :collapse="isCollapse"
        :collapse-transition="false"
        :default-active="activeMenu"
-        :default-openeds="defaultOpensMenu"
+        :default-openeds="defaultMenu"
        :text-color="variables['menuText']"
        :text-weigth="variables['menuTextWeight']"
        :unique-opened="false"
-        class="left-menu"
-        mode="vertical"
      >
        <sidebar-item
          v-for="route in currentViewRoute.children"
@@ -75,7 +75,8 @@ export default {
  data() {
    return {
      viewShown: false,
-      switchViewOtherClasses: ''
+      switchViewOtherClasses: '',
+      defaultMenu: []
    }
  },
  computed: {
@@ -83,9 +84,7 @@ 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
@@ -128,19 +127,27 @@ export default {
  mounted() {
    // this.setViewIconAttention()
    this.setLeastMenuOpen()
-    console.log('currentViewRoute', this.currentViewRoute.children)
+    this.defaultOpensMenu()
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
+      this.$nextTick(() => {
+        if (!this.isCollapse) {
+          this.defaultOpensMenu()
+        }
+      })
    },
    toggleSwitch() {
      this.viewShown = true
    },
    handleViewChange() {
-      // setTimeout(() => {
-      //   this.setLeastMenuOpen()
-      // }, 500)
+      // 此处不使用 nextTick 的原因可能是由于子组件中切换 tag 需要触发异步的 dispatch
+      setTimeout(() => {
+      // this.setLeastMenuOpen()
+        this.defaultOpensMenu()
+        console.log('defaultMenu', this.defaultMenu)
+      }, 500)
    },
    setLeastMenuOpen() {
      const hasOpened = document.querySelector('.el-submenu-sidebar.submenu-item.el-submenu.is-opened')
@@ -160,6 +167,9 @@ export default {
        clearInterval(t)
        this.switchViewOtherClasses = ''
      }, 3000)
+    },
+    defaultOpensMenu() {
+      this.defaultMenu = this.currentViewRoute.children.filter(route => route.children).map(route => route.path)
    }
  }
 }
@@ -267,7 +277,7 @@ $origin-color: #ffffff;

  .nav-footer {
    display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
    border-top: 1px solid rgba(31, 35, 41, 0.15);
    background-color: $subMenuBg;

@@ -275,7 +285,7 @@ $origin-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
-      width: 50px;
+      width: 54px;
      height: 50px;
      border: 0;
      cursor: pointer;
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -140,7 +140,7 @@ $single-menu-height: 38px;
    .submenu-title-noDropdown .el-tooltip {
      display: flex !important;
      align-items: center !important;
-      min-width: 54px !important;
+      min-width: 55px !important;

      .svg-icon {
        display: block
@@ -148,6 +148,8 @@ $single-menu-height: 38px;
    }

    .submenu-item {
+      width: 55px;
+
      &.is-active {
        cursor: pointer;
        @include hover_active
@@ -165,7 +167,7 @@ $single-menu-height: 38px;
        }

        .svg-icon {
-          display: block;
+          //display: block;
        }
      }
    }
--- a/src/styles/ztree.css
+++ b/src/styles/ztree.css
@@ -16,11 +16,10 @@ website:    http://code.google.com/p/jquerytree/
  margin: 0;
  font-size: 12px;
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background-color: #f3f3f3;
 }
 .ztree {
  margin: 0;
-  padding: 5px;
+  padding-left: 0;
  color: #676a6c;
  background-color: #f3f3f3;
 }
--- a/src/views/dashboard/components/SwitchDate.vue
+++ b/src/views/dashboard/components/SwitchDate.vue
@@ -56,28 +56,27 @@ export default {
 </script>

 <style lang="scss" scoped>
+$origin-color: #ffffff;
+
 .switch {
  font-weight: 400;

  ::v-deep .el-radio-button {
-    .el-radio-button__inner {
-      border-right: 1px solid var(--color-border);
-      color: var(--color-text-primary);
-      background: #ffffff;
-      border-radius: 0;
-    }
-
    &.is-active {
      .el-radio-button__inner {
-        border: 1px solid #1ab394;
-        color: #1ab394;
-        background-color: #FFF;
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+        background-color: $origin-color;
      }
    }
  }

-  & >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
-    box-shadow: none;
+  ::v-deep .el-radio-button {
+    .el-radio-button__inner {
+      color: var(--color-text-primary);
+      background: $origin-color;
+      border-radius: 0;
+    }
  }
 }
 </style>
--- a/src/views/settings/Feature/Announcement.vue
+++ b/src/views/settings/Feature/Announcement.vue
@@ -63,7 +63,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/settings/Feature/index.vue
+++ b/src/views/settings/Feature/index.vue
@@ -55,7 +55,3 @@ export default {
  }
 }
 </script>
-
-<style lang='scss' scoped>
-
-</style>
--- a/src/views/users/Role/RoleDetail/RoleInfo.vue
+++ b/src/views/users/Role/RoleDetail/RoleInfo.vue
@@ -306,7 +306,7 @@ export default {

  >>> {
    .ztree * {
-      background: white;
+      //background: white;
    }
    .ztree {
      background: white !important;