gaoluyang
2026-05-27 ab9af0a0961fa9ff7331fd9c793cffb4354afc04
src/layout/components/Sidebar/index.vue
@@ -64,6 +64,8 @@
<style lang="scss" scoped>
.sidebar-container {
  background-color: v-bind(getMenuBackground);
  border-radius: 22px;
  overflow: hidden;
  .scrollbar-wrapper {
    background-color: v-bind(getMenuBackground);
@@ -73,6 +75,7 @@
    border: none;
    height: 100%;
    width: 100% !important;
    border-radius: 22px;
    .el-menu-item,
    .el-sub-menu__title {
@@ -82,6 +85,7 @@
      &:hover {
        background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
        border-radius: 14px;
      }
    }
@@ -95,11 +99,37 @@
    .el-sub-menu__title {
      color: v-bind(getMenuTextColor);
      padding-right: 10px !important;
      display: flex !important;
      align-items: center !important;
      line-height: normal !important;
    }
    :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
      color: v-bind(theme) !important;
      font-weight: 600;
      background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
      border-radius: 14px;
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      background-clip: padding-box;
      display: flex !important;
      align-items: center !important;
      line-height: normal !important;
    }
    :deep(.el-menu-item.is-active) {
      margin: 0 10px 6px !important;
      width: calc(100% - 20px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box;
      overflow: hidden;
      background-clip: padding-box;
      border-radius: 14px;
    }
    :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
@@ -108,6 +138,48 @@
    :deep(.el-menu-item.is-active .svg-icon) {
      color: v-bind(theme) !important;
    }
    :deep(.el-sub-menu__title:hover),
    :deep(.el-menu-item:hover) {
      border-radius: 14px;
    }
    /* 确保子菜单箭头显示 - 使用 flex 布局让箭头和文字在一排 */
    :deep(.el-sub-menu .el-sub-menu__title) {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      line-height: normal !important;
    }
    :deep(.el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow) {
      position: static !important;
      display: inline-flex !important;
      visibility: visible !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
      margin-left: auto !important;
      margin-right: 0 !important;
      order: 999 !important;
      align-self: center !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      transform: none !important;
      top: auto !important;
    }
    /* 确保一级菜单箭头显示 */
    :deep(> .el-menu > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow) {
      display: inline-flex !important;
      visibility: visible !important;
    }
    /* 确保二级菜单箭头显示 */
    :deep(.nest-menu .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow) {
      display: inline-flex !important;
      visibility: visible !important;
    }
  }
}
</style>