@utogether/udp-core 1.0.0

package/src/style/sidebar.scss

@@ -0,0 +1,770 @@
+@mixin merge-style(/* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth) {
+  @media screen and (width >= 150px) and (width <= 420px) {
+    .app-main-nofixed-header {
+      overflow-y: hidden;
+    }
+  }
+
+  @media screen and (width >= 420px) {
+    .app-main-nofixed-header {
+      overflow: hidden;
+    }
+  }
+
+  /* popper menu 超出内容区可滚动 */
+  .udp-scrollbar {
+    max-height: calc(100vh - calc(50px * 2.5));
+    overflow: hidden auto;
+  }
+
+  .sub-menu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 5px;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+
+  .main-container {
+    position: relative;
+    height: 100vh;
+    min-height: 100%;
+    margin-left: $sideBarWidth;
+    background: #f0f2f5;
+
+    /* main-content属性动画 */
+    transition: margin-left var(--udp-transition-duration);
+
+    .el-scrollbar__wrap {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 998;
+    width: calc(100% - 210px);
+
+    /* fixed-header属性左上角动画 */
+    transition: width var(--udp-transition-duration);
+  }
+
+  .main-hidden {
+    margin-left: 0 !important;
+
+    .fixed-header {
+      width: 100% !important;
+
+      + .app-main {
+        padding-top: 37px !important;
+      }
+    }
+  }
+
+  // .el-popper.is-light {
+  //   border: none !important;
+  // }
+
+  .sidebar-container {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
+    overflow: hidden;
+    font-size: 0;
+    background: var(--udp-theme-menu-text);
+    box-shadow: 0 0 1px #888;
+
+    /* 展开动画 */
+    transition: width var(--udp-transition-duration);
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0;
+    }
+
+    // .el-scrollbar {
+    //   height: 100%;
+    // }
+
+    &.has-logo {
+      .el-scrollbar.pc {
+        height: calc(100% - 50px);
+      }
+
+      .el-scrollbar.mobile {
+        height: calc(100% - 48px);
+      }
+    }
+
+    &.no-logo {
+      .el-scrollbar.pc {
+        /* leftCollapse: 40px、leftCollapse-shadow: 4px */
+        height: calc(100% - 44px);
+      }
+
+      .el-scrollbar.mobile {
+        height: 100%;
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .el-menu {
+      height: 100%;
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+      border: none;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      height: 50px;
+      color: var(--udp-theme-menu-text);
+      background-color: transparent;
+
+      &:hover {
+        color: var(--udp-theme-menu-title-hover) !important;
+      }
+
+      div,
+      span {
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+
+    // .submenu-title-noDropdown,
+    // .el-sub-menu__title {
+    //   // &:hover {
+    //   //   background-color: transparent;
+    //   // }
+    // }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+
+      i {
+        color: var(--udp-theme-sub-menu-active-text) !important;
+      }
+    }
+
+    .is-active {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+      transition: color 0.3s;
+    }
+
+    .el-menu .el-menu--inline .el-sub-menu__title,
+    & .el-sub-menu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      font-size: 14px;
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+    }
+
+    /* 无子集的激活菜单背景 */
+    .is-active.submenu-title-noDropdown.outer-most {
+      background: var(--udp-theme-sub-menu-active-bg) !important;
+    }
+
+    /* 有子集的激活菜单背景 */
+    .is-active.nest-menu {
+      background: var(--udp-theme-sub-menu-active-bg) !important;
+    }
+  }
+
+  .horizontal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 48px;
+    background: var(--udp-theme-menu-bg) !important;
+
+    .horizontal-header-left {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: auto;
+      min-width: 200px;
+      height: 100%;
+
+      // padding-left: 10px;
+      cursor: pointer;
+      background-color: var(--udp-theme-sidebar-logo);
+      transition: all 0.125s ease;
+
+      i {
+        margin-right: 4px;
+        font-size: 30px;
+        color: #1890ff;
+      }
+
+      img {
+        height: 100%;
+      }
+
+      .u-project-text {
+        padding-left: 5px;
+        font-size: 28px;
+        font-weight: 700;
+        color: var(--udp-theme-project-text);
+        transition: all 0.5s;
+      }
+    }
+
+    .horizontal-header-menu {
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+    }
+
+    .horizontal-header-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      min-width: 280px;
+      color: var(--udp-theme-sub-menu-active-text);
+
+      /* 搜索 */
+      .search-container,
+      /* 告警 */
+      .dropdown-badge,
+      /* 全屏 */
+      .screen-full,
+      /* 国际化 */
+      .globalization,
+      /* 登录名 */
+      .el-dropdown-link,
+      /* 设置 */
+      .el-icon-setting {
+        color: #fff;
+
+        &:hover {
+          background: var(--udp-theme-menu-hover);
+        }
+      }
+
+      .udp-horizontal {
+        .el-select__wrapper {
+          background-color: #001529;
+
+          .el-select__placeholder {
+            color: #fff;
+          }
+        }
+      }
+
+      .dropdown-badge {
+        height: 48px;
+        color: var(--udp-theme-sub-menu-active-text);
+      }
+
+      .globalization {
+        width: 40px;
+        height: 48px;
+        padding: 11px;
+        color: var(--udp-theme-sub-menu-active-text);
+        cursor: pointer;
+        outline: none;
+      }
+
+      .el-dropdown-link {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        width: 100px;
+        height: 48px;
+        padding: 10px;
+        color: var(--udp-theme-sub-menu-active-text);
+        cursor: pointer;
+
+        p {
+          font-size: 14px;
+        }
+
+        img {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+        }
+      }
+
+      .el-icon-setting {
+        display: flex;
+        align-items: center;
+        width: 40px;
+        height: 48px;
+        padding: 12px;
+        cursor: pointer;
+      }
+    }
+
+    .el-menu {
+      width: 100% !important;
+      height: 100%;
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+      border: none;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      color: var(--udp-theme-menu-text);
+
+      &:hover {
+        color: var(--udp-theme-menu-title-hover) !important;
+      }
+    }
+
+    .submenu-title-noDropdown,
+    .el-sub-menu__title {
+      height: 48px;
+      line-height: 48px;
+      background: var(--udp-theme-menu-bg) !important;
+
+      svg {
+        position: static !important;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+
+      i {
+        color: var(--udp-theme-sub-menu-active-text) !important;
+      }
+    }
+
+    .is-active {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+      transition: color 0.3s;
+    }
+  }
+
+  /* vertical菜单折叠 */
+  .el-menu--vertical {
+    .el-menu--popup {
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+
+      .el-menu-item {
+        span {
+          font-size: 14px;
+        }
+      }
+    }
+
+    & > .el-menu {
+      i,
+      svg {
+        margin-right: 20px;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+
+      i {
+        color: var(--udp-theme-sub-menu-active-text) !important;
+      }
+    }
+
+    /* 子菜单中还有子菜单 */
+    .el-menu .el-sub-menu__title {
+      min-width: $sideBarWidth !important;
+      font-size: 12px;
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+    }
+
+    .el-menu-item,
+    .el-sub-menu__title {
+      height: 50px;
+      line-height: 50px;
+      color: var(--udp-theme-menu-text);
+      background-color: var(--udp-theme-sub-menu-bg);
+
+      &:hover {
+        color: var(--udp-theme-menu-title-hover) !important;
+      }
+    }
+
+    .is-active {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+      transition: color 0.3s;
+    }
+
+    .el-menu-item.is-active.nest-menu {
+      background: var(--udp-theme-sub-menu-active-bg) !important;
+    }
+
+    .el-menu-item,
+    .el-sub-menu {
+      .el-menu-tooltip__trigger {
+        width: 54px;
+        padding: 18px !important;
+      }
+    }
+  }
+
+  /* horizontal菜单 */
+  .el-menu--horizontal {
+    & > .el-sub-menu .el-sub-menu__icon-arrow {
+      position: static !important;
+      margin-top: 0;
+    }
+
+    .el-menu--popup {
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+
+      .el-menu-item {
+        color: var(--udp-theme-menu-text);
+        background-color: var(--udp-theme-sub-menu-bg);
+
+        span {
+          font-size: 14px;
+        }
+      }
+
+      .el-sub-menu__title {
+        color: var(--udp-theme-menu-text);
+      }
+    }
+
+    /* 无子菜单时激活border-bottom */
+    .router-link-exact-active > .submenu-title-noDropdown {
+      height: 60px;
+      border-bottom: 2px solid var(--el-menu-active-color);
+    }
+
+    /* 子菜单中还有子菜单 */
+    .el-menu .el-sub-menu__title {
+      min-width: $sideBarWidth !important;
+      font-size: 12px;
+      background-color: var(--udp-theme-sub-menu-bg) !important;
+
+      &:hover {
+        color: var(--udp-theme-menu-title-hover) !important;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active.submenu-title-noDropdown {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+
+      i {
+        color: var(--udp-theme-sub-menu-active-text) !important;
+      }
+    }
+
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .el-menu-item {
+      &:hover {
+        color: var(--udp-theme-menu-title-hover) !important;
+      }
+    }
+
+    /* 有子集的激活菜单背景 */
+    .is-active.nest-menu {
+      background: var(--udp-theme-sub-menu-active-bg) !important;
+    }
+
+    .el-menu-item.is-active {
+      color: var(--udp-theme-sub-menu-active-text) !important;
+      transition: color 0.3s;
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-sub-menu {
+    min-width: $sideBarWidth !important;
+  }
+
+  /* 有子菜单 */
+  .el-menu--collapse
+    .is-active.outer-most.el-sub-menu
+    > .el-sub-menu__title::before,
+    /* 无子菜单 */
+  .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
+    position: absolute;
+    top: 0;
+    left: 2px;
+    clear: both;
+    width: 2px;
+    height: 100%;
+    content: '';
+    background-color: var(--udp-theme-menu-active-before);
+    transform: translateY(0);
+    transition: all 0.125s ease-in-out;
+  }
+
+  .el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before,
+  .el-menu--collapse .submenu-title-noDropdown.outer-most::before {
+    position: absolute;
+    top: 50%;
+    display: block;
+    width: 3px;
+    height: 0;
+    content: '';
+    transform: translateY(-50%);
+  }
+
+  /* 手机端 */
+  .mobile {
+    .fixed-header {
+      width: 100% !important;
+      transition: width var(--udp-transition-duration);
+    }
+
+    .main-container {
+      margin-left: 0 !important;
+    }
+
+    .sidebar-container {
+      width: $sideBarWidth;
+      transition: transform var(--udp-transition-duration);
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transform: translate3d(-$sideBarWidth, 0, 0);
+        transition-duration: 0.3s;
+      }
+    }
+  }
+}
+
+/** 将vxe默认主题色和ep默认主题色保持一致 */
+// $vxeColor: #409eff !default;
+
+// /* 菜单选中后字体样式 */
+// $subMenuActiveText: #fff !default;
+
+// /* 菜单背景 */
+// $menuBg: #001529 !default;
+
+// /* 鼠标覆盖到菜单时的背景 */
+// $menuHover: #4091f7 !default;
+
+// /* 子菜单背景 */
+// $subMenuBg: #001529 !default;
+
+// /* 有无子集的激活菜单背景 */
+// $subMenuActiveBg: #4091f7 !default;
+// $navTextColor: #fff !default;
+// $menuText: rgb(254 254 254 / 65%) !default;
+
+// /* logo背景颜色 */
+// $sidebarLogo: #fff !default;
+
+// /* 鼠标覆盖到菜单时的字体颜色 */
+// $menuTitleHover: #fff !default;
+// $menuActiveBefore: #4091f7 !default;
+
+/***************************************************   */
+
+body[layout='vertical'] {
+  $sideBarWidth: 210px;
+
+  @include merge-style($sideBarWidth);
+
+  .el-menu--collapse {
+    width: 54px;
+  }
+
+  .sidebar-logo-container {
+    background: var(--udp-theme-sidebar-logo);
+  }
+
+  .hideSidebar {
+    .fixed-header {
+      width: calc(100% - 54px);
+      transition: width var(--udp-transition-duration);
+    }
+
+    .sidebar-container {
+      width: 54px !important;
+      transition: width 0.125s;
+
+      .is-active.submenu-title-noDropdown.outer-most {
+        background: transparent !important;
+      }
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    /* 菜单折叠 */
+    .el-menu--collapse {
+      .el-sub-menu {
+        & > .el-sub-menu__title {
+          & > span {
+            display: inline-block;
+            visibility: hidden;
+            width: 0;
+            height: 0;
+            overflow: hidden;
+          }
+        }
+      }
+
+      .submenu-title-noDropdown {
+        background: transparent !important;
+      }
+
+      .el-sub-menu__title {
+        padding: 0 18px !important;
+      }
+    }
+
+    .sub-menu-icon {
+      margin-right: 0;
+    }
+  }
+
+  /* 搜索 */
+  .search-container,
+  /* 告警 */
+  .dropdown-badge,
+  /* 全屏 */
+  .screen-full,
+  /* 国际化 */
+  .globalization,
+  /* 登录名 */
+  .el-dropdown-link,
+  /* 设置 */
+  .el-icon-setting {
+    &:hover {
+      background: #f6f6f6;
+    }
+  }
+}
+
+body[layout='horizontal'] {
+  $sideBarWidth: 0;
+
+  @include merge-style($sideBarWidth);
+
+  .fixed-header {
+    width: 100%;
+    transition: none !important;
+  }
+}
+
+body[layout='mix'] {
+  $sideBarWidth: 210px;
+
+  @include merge-style($sideBarWidth);
+
+  .el-menu--collapse {
+    width: 100px;
+  }
+
+  .el-menu {
+    --el-menu-hover-bg-color: transparent !important;
+  }
+
+  .el-menu > .submenu-mix-fold {
+    height: 60px !important;
+    line-height: 60px !important;
+
+    .el-menu-tooltip__trigger {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: 0 !important;
+      line-height: 60px;
+
+      // .fa {
+      //   padding-top: 15px;
+      //   font-size: 13px;
+      //   line-height: 20%;
+      // }
+
+      .ut-mix-title {
+        display: flex;
+        align-items: center;
+        max-width: 80px;
+        height: inherit;
+        line-height: inherit;
+
+        span {
+          display: flex;
+          align-items: center;
+          padding-left: 0;
+          font-size: 13px;
+          line-height: initial;
+          text-align: center;
+          word-break: normal;
+          word-wrap: break-word;
+          white-space: normal;
+        }
+      }
+    }
+  }
+
+  .hideSidebar {
+    .fixed-header {
+      width: calc(100% - 100px);
+      transition: width var(--udp-transition-duration);
+    }
+
+    .sidebar-container {
+      width: 100px !important;
+      transition: width 0.125s;
+
+      .is-active.submenu-title-noDropdown.outer-most {
+        background: transparent !important;
+      }
+    }
+
+    .main-container {
+      margin-left: 100px;
+    }
+
+    /* 菜单折叠 */
+    .el-menu--collapse {
+      .el-sub-menu {
+        & > .el-sub-menu__title {
+          & > span {
+            display: inline-block;
+            visibility: hidden;
+            width: 0;
+            height: 0;
+            overflow: hidden;
+          }
+        }
+      }
+    }
+  }
+}
+
+body[layoutType='iframe'] {
+  $sideBarWidth: 0;
+
+  @include merge-style($sideBarWidth);
+
+  ::v-deep(.app-main) {
+    padding-top: 0 !important;
+  }
+}