@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/menu/style/common.scss

@@ -0,0 +1,411 @@
+@import './mixin.scss';
+
+$main-width: var(--oio-menu-area-width);
+
+.k-oinone-menu-wrapper {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--oio-menu-background-color);
+  transition: width 0.5s;
+  border-right: 1px solid var(--oio-menu-border-color);
+
+  &.collapsed {
+    width: 72px;
+    transition: width 0.5s;
+  }
+
+  width: $main-width;
+  .menu-search {
+    display: var(--oio-menu-search-display);
+    margin: var(--oio-margin) var(--oio-margin) var(--oio-margin-xs) var(--oio-margin);
+    transition: width 0.5s;
+
+    .ant-select {
+      .ant-select-arrow {
+        top: 45%;
+      }
+    }
+
+    .ant-select-selector {
+      background-color: var(--oio-menu-search-background-color);
+      height: var(--oio-height);
+
+      .ant-select-selection-item {
+        line-height: var(--oio-height);
+        vertical-align: middle;
+      }
+
+      .ant-select-selection-search-input {
+        height: var(--oio-height);
+      }
+
+      .ant-select-selection-placeholder {
+        line-height: var(--oio-height);
+      }
+    }
+  }
+
+  .oio-select.ant-select .ant-select-selector,
+  .oio-select.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: var(--oio-menu-select-background);
+    border-color: var(--oio-menu-border-color);
+  }
+
+  .oio-select .ant-select-selection-placeholder {
+    color: var(--oio-menu-select-placeholder-color);
+  }
+
+  .oio-select.ant-select .ant-select-selector,
+  .oio-select.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    color: var(--oio-menu-select-color);
+  }
+
+  .menu-area {
+    background-color: var(--oio-menu-background-color);
+    flex: 1;
+    overflow: hidden;
+
+    &::-webkit-scrollbar {
+      display: none;
+      scrollbar-width: 0;
+    }
+    &:hover {
+      overflow: hidden auto;
+    }
+  }
+
+  .menu-content {
+    height: 100%;
+    padding: 0 var(--oio-padding);
+    width: $main-width;
+    margin-top: var(--oio-menu-margin-top);
+    position: relative;
+
+    .ant-menu-title-content span:not(.oio-icon) {
+      transition: all 0.4s;
+    }
+
+    &.collapsed {
+      .ant-menu-inline-collapsed {
+        margin-left: var(--oio-menu-collapsed-popup-margin-left);
+        .ant-menu-title-content span:not(.oio-icon) {
+          opacity: 0;
+        }
+      }
+      .ant-menu {
+        padding: var(--oio-menu-collapsed-popup-item-padding);
+      }
+    }
+    .ant-spin-nested-loading {
+      position: static;
+    }
+    .oio-spin {
+      top: 50%;
+      transform: translate(0, -50%);
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-inline {
+      .ant-menu-item-group-list .ant-menu-submenu-title,
+      .ant-menu-submenu-title {
+        padding-right: 0;
+      }
+
+      .root-menu {
+        .ant-menu-submenu-title {
+          padding-right: var(--oio-padding-md);
+        }
+      }
+    }
+  }
+
+  .oinone-menu {
+    border: none;
+    background-color: var(--oio-menu-background-color);
+    color: var(--oio-menu-font-color);
+
+    .oio-icon {
+      vertical-align: baseline;
+      margin-right: var(--oio-margin-sm);
+      transition: all 0.2s;
+    }
+
+    .ant-menu-submenu-title .ant-menu-item .ant-menu-item-icon {
+      vertical-align: 0;
+    }
+
+    /**
+     * 默认缩进
+     */
+    @include menuInlineIndentMixin(16px, 16px, 20px, 16px);
+
+    .ant-menu-inline .ant-menu-item,
+    .ant-menu-inline .ant-menu-submenu-title,
+    .ant-menu-vertical-left .ant-menu-item,
+    .ant-menu-vertical-left .ant-menu-submenu-title,
+    .ant-menu-vertical-right .ant-menu-item,
+    .ant-menu-vertical-right .ant-menu-submenu-title,
+    .ant-menu-vertical .ant-menu-item,
+    .ant-menu-vertical .ant-menu-submenu-title {
+      margin-top: var(--oio-menu-item-margin-top);
+    }
+
+    .ant-menu-submenu-open.ant-menu-submenu-title {
+      .title-content {
+        color: rgba(0, 0, 0, 0.85) !important;
+        font-weight: 500;
+      }
+    }
+    .ant-menu-submenu-active {
+      .ant-menu-submenu-title {
+        color: var(--oio-menu-active-parent-title-color) !important;
+      }
+    }
+    .ant-menu-inline .ant-menu-submenu {
+      margin-bottom: 0;
+    }
+
+    .ant-menu-sub.ant-menu-inline {
+      background: var(--oio-menu-expand-background-color);
+      color: var(--oio-menu-font-color);
+    }
+
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+      line-height: var(--oio-menu-item-height);
+      height: var(--oio-menu-item-height);
+      &:hover {
+        background-color: var(--oio-menu-hover-background-color);
+        border-radius: var(--oio-menu-border-radius);
+        .oio-icon {
+          color: var(--oio-menu-root-title-hover-icon-color);
+        }
+      }
+      margin-bottom: 0;
+    }
+
+    .oio-sub-menu-menu-item {
+      padding-right: 0;
+      position: relative;
+    }
+
+    .ant-menu-sub.ant-menu-inline > .ant-menu-item,
+    .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+      line-height: var(--oio-menu-item-height);
+      height: var(--oio-menu-item-height);
+    }
+
+    .ant-menu-submenu-title {
+      &:hover {
+        background: var(--oio-menu-hover-background-color);
+        border-radius: var(--oio-menu-border-radius);
+      }
+    }
+
+    .ant-menu-item-active,
+    .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
+    .ant-menu-submenu-active,
+    .ant-menu-submenu-title:hover {
+      & > .ant-menu-title-content {
+        color: var(--oio-menu-root-title-hover-color);
+      }
+
+      & > .oio-icon {
+        color: var(--oio-menu-root-title-hover-icon-color);
+      }
+    }
+    .ant-menu-item-selected {
+      height: var(--oio-menu-item-height);
+      & > .ant-menu-title-content {
+        color: var(--oio-menu-selected-title-color);
+      }
+
+      &:hover {
+        & > .ant-menu-title-content {
+          color: var(--oio-menu-selected-title-hover-color);
+          .oio-icon {
+            color: var(--oio-menu-selected-icon-color);
+          }
+        }
+      }
+      &.root-menu {
+        background-color: var(--oio-menu-selected-root-background-color) !important;
+        & > .ant-menu-title-content {
+          color: var(--oio-menu-selected-root-title-color);
+          .oio-icon {
+            color: var(--oio-menu-selected-root-title-color);
+          }
+        }
+      }
+    }
+
+    .ant-menu-submenu-selected {
+      &.root-menu {
+        background-color: transparent;
+        .ant-menu-submenu-title {
+          &:hover {
+            background-color: var(--oio-menu-selected-root-background-color);
+          }
+        }
+      }
+      &.not-root-menu {
+        .ant-menu-submenu-title {
+          &:hover {
+            background-color: var(--oio-menu-hover-background-color);
+          }
+        }
+      }
+      & > .ant-menu-submenu-title > .ant-menu-title-content {
+        color: var(--oio-menu-selected-root-title-color);
+        .oio-icon {
+          color: var(--oio-menu-selected-root-icon-color);
+        }
+      }
+    }
+
+    &:not(.ant-menu-horizontal) {
+      .ant-menu-item-selected {
+        background-color: var(--oio-menu-selected-background-color);
+        height: var(--oio-menu-item-height);
+        border-radius: var(--oio-menu-selected-root-border-radius);
+
+        .title-content {
+          color: var(--oio-primary-color);
+          font-weight: 500;
+        }
+
+        &:after {
+          display: none !important;
+        }
+      }
+    }
+
+    .ant-menu-sub {
+      background: var(--oio-body-background);
+    }
+  }
+
+  .menu-footer {
+    transition: width 0.5s;
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+
+    .menu-toggle-collapsed {
+      margin: 16px;
+      overflow: hidden;
+      flex: 1;
+      cursor: pointer;
+      height: var(--oio-menu-collapsed-button-height);
+      line-height: var(--oio-menu-collapsed-button-line-height);
+      box-sizing: border-box;
+      border-radius: var(--oio-menu-collapsed-button-border-radius);
+      background-color: var(--oio-menu-collapsed-button-background-color);
+
+      &:hover {
+        background-color: var(--oio-menu-collapsed-button-hover-background-color);
+      }
+
+      justify-content: center;
+      align-items: center;
+
+      .collapsed-icon {
+        margin-left: 16px;
+      }
+
+      .collapsed-text {
+        margin-left: 29px;
+        font-size: var(--oio-font-size);
+        color: var(--oio-menu-collapsed-button-title-color);
+        font-weight: 500;
+        transition: width 0.5s;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .menu-item-title {
+    display: flex;
+    flex-flow: row nowrap;
+
+    .title-content {
+      font-size: var(--oio-font-size);
+      color: var(--oio-text-color-secondary);
+      height: var(--oio-height);
+      font-weight: 500;
+      transition: width 0.5s;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.inline-menu-popup {
+  .ant-menu {
+    background-color: var(--oio-menu-background-color);
+    color: var(--oio-menu-font-color);
+    border-radius: var(--oio-border-radius);
+
+    .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+      padding-right: 16px;
+      .ant-menu-title-content {
+        flex: 1;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .ant-menu-submenu-selected,
+  &.ant-menu-light .ant-menu-item-active,
+  &.ant-menu-light .ant-menu-item:hover,
+  &.ant-menu-light .ant-menu-submenu-active,
+  &.ant-menu-light .ant-menu-submenu-title:hover,
+  &.ant-menu-light .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open {
+    color: var(--oio-menu-selected-title-color);
+  }
+
+  .ant-menu-item:hover,
+  .ant-menu-submenu:hover {
+    background-color: var(--oio-menu-selected-background-color);
+    color: var(--oio-menu-selected-title-color);
+  }
+
+  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+    background-color: var(--oio-menu-selected-background-color);
+    & > .ant-menu-title-content {
+      color: var(--oio-menu-selected-title-color);
+    }
+  }
+}
+
+.default-menu-select-dropdown {
+  &.ant-select-dropdown {
+    background: var(--oio-menu-select-dropdown-background);
+    box-shadow: var(--oio-menu-select-dropdown-box-shadow);
+    &.ant-select-dropdown .ant-select-item {
+      color: var(--oio-menu-select-dropdown-color) !important;
+    }
+    &.ant-select-dropdown .ant-select-item.ant-select-item-option-selected .ant-select-item-option-content {
+      color: var(--oio-menu-select-dropdown-selected-color) !important;
+    }
+    &.ant-select-dropdown .ant-select-item.ant-select-item-option-selected {
+      background: var(--oio-menu-select-dropdown-selected) !important;
+    }
+    &.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+      background: var(--oio-menu-select-dropdown-selected);
+    }
+    &.ant-select-dropdown .ant-select-item:hover {
+      background: var(--oio-menu-select-dropdown-selected) !important;
+    }
+  }
+}

package/src/component/menu/style/index.scss

@@ -0,0 +1,2 @@
+@import './common.scss';
+@import './menu-theme/index.scss';

package/src/component/menu/style/menu-theme/index.scss

@@ -0,0 +1,5 @@
+@import './theme2.scss';
+@import './theme3.scss';
+@import './theme4.scss';
+@import './theme5.scss';
+@import './theme6.scss';

package/src/component/menu/style/menu-theme/theme2.scss

@@ -0,0 +1,37 @@
+@import '../mixin.scss';
+
+.oinone-menu.oinone-menu-theme2 {
+  .root-menu {
+    .ant-menu-sub {
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 20px;
+        height: calc(100% - var(--oio-menu-item-height) / 2);
+        width: 1px;
+        margin-left: 2px;
+        top: 1px;
+        background: var(--oio-border-color);
+      }
+
+      & > li {
+        overflow: initial;
+        position: relative;
+        margin-left: 3px;
+        width: calc(100% - 3px);
+        &::before {
+          content: '';
+          position: absolute;
+          left: -12px;
+          top: calc(var(--oio-menu-item-height) / 2);
+          height: 1px;
+          width: 12px;
+          background: var(--oio-border-color);
+        }
+      }
+    }
+  }
+
+  @include menuInlineIndentMixin(16px, 16px, 32px, 8px);
+}

package/src/component/menu/style/menu-theme/theme3.scss

@@ -0,0 +1,59 @@
+@import '../mixin.scss';
+
+.oinone-menu.oinone-menu-theme3 {
+  .oio-sub-menu-menu-item,
+  .not-root-menu {
+    /**
+     *   多层级菜单的左侧圆点
+     */
+    .ant-menu-title-content {
+      position: relative;
+      padding-left: 16px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--oio-menu-default-icon-color);
+      }
+    }
+
+    &.ant-menu-submenu-selected {
+      & > .ant-menu-submenu-title .ant-menu-title-content {
+        &::before {
+          background: var(--oio-primary-color);
+        }
+      }
+    }
+  }
+
+  .ant-menu-item-selected > .ant-menu-title-content {
+    &::before {
+      background: var(--oio-primary-color);
+    }
+  }
+
+  /**
+   *   多层级菜单的左侧竖线
+   */
+  .not-root-menu {
+    .ant-menu-sub {
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 16px;
+        height: 100%;
+        width: 1px;
+        margin-left: 2px;
+        background: var(--oio-border-color);
+      }
+    }
+  }
+
+  @include menuInlineIndentMixin(16px, 16px, 28px, 16px);
+}

package/src/component/menu/style/menu-theme/theme4.scss

@@ -0,0 +1,56 @@
+@import '../mixin.scss';
+
+.oinone-menu.oinone-menu-theme4 {
+  .oio-sub-menu-menu-item,
+  .not-root-menu {
+    /**
+     *   多层级菜单的左侧圆点
+     */
+    .ant-menu-title-content {
+      position: relative;
+      padding-left: 16px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--oio-menu-default-icon-color);
+      }
+    }
+
+    &.ant-menu-submenu-selected {
+      & > .ant-menu-submenu-title .ant-menu-title-content {
+        &::before {
+          background: var(--oio-primary-color);
+        }
+      }
+    }
+  }
+
+  .ant-menu-item-selected > .ant-menu-title-content {
+    &::before {
+      background: var(--oio-primary-color);
+    }
+  }
+
+  .ant-menu-submenu-open {
+    border-radius: 4px;
+    padding-bottom: 2px;
+    background: var(--oio-menu-expand-background-color);
+    .ant-menu-sub.ant-menu-inline {
+      background: var(--oio-menu-expand-background-color);
+    }
+
+    & > .ant-menu-title-content {
+      &::before {
+        background: var(--oio-primary-color);
+      }
+    }
+  }
+
+  @include menuInlineIndentMixin(16px, 16px, 16px, 16px);
+}

package/src/component/menu/style/menu-theme/theme5.scss

@@ -0,0 +1,45 @@
+@import '../mixin.scss';
+
+/**
+ *   含背景颜色的菜单, 箭头在左侧
+ */
+.oinone-menu.oinone-menu-theme5 {
+  .ant-menu-submenu-title {
+    flex-direction: row-reverse;
+  }
+
+  .ant-menu-submenu-open {
+    border-radius: 4px;
+    padding-bottom: 2px;
+    background: var(--oio-menu-expand-background-color);
+    .ant-menu-sub.ant-menu-inline {
+      background: var(--oio-menu-expand-background-color);
+    }
+
+    & > .ant-menu-title-content {
+      &::before {
+        background: var(--oio-primary-color);
+      }
+    }
+  }
+
+  .ant-menu-item-selected {
+    .ant-menu-title-content {
+      position: relative;
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        height: 60%;
+        width: 2px;
+        top: 50%;
+        right: 1px;
+        transform: translate(0, -50%);
+        border-radius: 2px 0 0 2px;
+        background-color: var(--oio-menu-selected-title-color);
+      }
+    }
+  }
+
+  @include menuInlineIndentMixin(31px, 12px, 19px, 34px);
+}

package/src/component/menu/style/menu-theme/theme6.scss

@@ -0,0 +1,45 @@
+@import '../mixin.scss';
+
+/**
+ *   菜单左侧是个空心圆点
+ */
+.oinone-menu.oinone-menu-theme6 {
+  .oio-sub-menu-menu-item,
+  .not-root-menu {
+    /**
+     *   多层级菜单的左侧圆点
+     */
+    .ant-menu-title-content {
+      position: relative;
+      padding-left: 16px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        border: 1px solid var(--oio-menu-default-icon-color);
+        box-sizing: border-box;
+      }
+    }
+
+    &.ant-menu-submenu-selected {
+      & > .ant-menu-submenu-title .ant-menu-title-content {
+        &::before {
+          border-color: var(--oio-primary-color);
+        }
+      }
+    }
+  }
+
+  .ant-menu-item-selected > .ant-menu-title-content {
+    &::before {
+      border-color: var(--oio-primary-color);
+    }
+  }
+
+  @include menuInlineIndentMixin(16px, 16px, 16px, 16px);
+}

package/src/component/menu/style/mixin.scss

@@ -0,0 +1,23 @@
+@mixin menuInlineIndentMixin($rootMenuItemIndent, $subMenuItemIndent, $menuSubIndent, $inlineIndent) {
+  .root-menu-item {
+    padding-left: $rootMenuItemIndent !important;
+  }
+  .root-sub-menu-1,
+  .root-sub-menu-2,
+  .root-sub-menu-3,
+  .root-sub-menu-4,
+  .root-sub-menu-5,
+  .root-sub-menu-6 {
+    .ant-menu-submenu-title {
+      padding-left: $subMenuItemIndent !important;
+    }
+
+    .ant-menu-sub {
+      overflow: hidden;
+      padding-left: $menuSubIndent !important;
+      & > .ant-menu-item {
+        padding-left: $inlineIndent !important;
+      }
+    }
+  }
+}