afn-basic-components 1.1.2 → 1.1.3

package/src/styles/sidebar.scss

@@ -1,14 +1,17 @@
-@import "./variables.scss";
-
 #app {
   .main-container {
-    min-height: 100%;
+    height: 100%;
     transition: margin-left 0.28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
 
+  .sidebarHide {
+    margin-left: 0 !important;
+  }
+
   .sidebar-container {
+    -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
@@ -20,6 +23,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    /*  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); */
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -29,16 +34,22 @@
 
     .scrollbar-wrapper {
       overflow-x: hidden !important;
-
-      .el-scrollbar__view {
-        height: 100%;
-      }
     }
 
     .el-scrollbar__bar.is-vertical {
       right: 0px;
     }
 
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 100px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -50,12 +61,8 @@
     }
 
     .svg-icon {
-      margin-right: 16px;
-    }
-
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
+      font-size: 16px;
+      margin-right: 8px;
     }
 
     .el-menu {
@@ -64,22 +71,77 @@
       width: 100% !important;
     }
 
-    // menu hover
-    .submenu-title-noDropdown,
+    .el-menu-item,
     .el-submenu__title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+      border-radius: 8px !important;
+      margin: 4px 0; /* 添加上下间距 */
+      height: 40px;
+      line-height: 40px;
+      font-weight: 500;
+      font-family: PingFangSC, PingFang SC;
+      display: flex !important;
+      align-items: center !important; // 纵向居中
+      &:hover {
+        background-color: $base-sub-menu-hover !important;
+      }
+    }
+    // 菜单选中状态 - 白色效果 🌟
+    .el-menu-item.is-active {
+      background-color: $base-menu-active-background !important;
+      color: $base-menu-color-active !important;
+
       &:hover {
-        background-color: $base-menu-hover !important;
+        background-color: $base-sub-menu-hover !important;
       }
     }
+    // 侧边栏收缩hover状态
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      /*    &:hover {
+        background-color: rgba(0, 0, 0, 0.06) !important;
+      } */
+    }
 
-    .is-active > .el-submenu__title {
-      color: $base-sub-menu-active-text !important;
+    & .theme-dark .is-active > .el-submenu__title {
+      color: $base-menu-color-active !important;
+      // 二级菜单选中状态下箭头颜色
+      .el-submenu__icon-arrow.el-icon-arrow-down {
+        &::before {
+          color: #4a7ff8;
+        }
+      }
     }
 
     & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
-      min-width: $base-sidebar-width !important;
-      background-color: $base-sub-menu-background !important;
+      min-width: calc(#{$base-sidebar-width} - 32px) !important;
+      border-radius: 8px !important;
+      font-weight: 400;
+      font-family: PingFangSC, PingFang SC;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background-color: rgba(202, 210, 228, 0.3) !important;
+      }
+      // 添加二级菜单选中样式 🌟
+      &.is-active {
+        background-color: $base-menu-active-background !important;
+        color: $base-menu-color-active !important;
+
+        &:hover {
+          background-color: darken($base-menu-active-background, 5%) !important;
+        }
+      }
+    }
+
+    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+    & .theme-dark .el-submenu .el-menu-item {
+      background-color: $base-sub-menu-background;
+      border-radius: 8px !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
@@ -88,12 +150,48 @@
   }
 
   .hideSidebar {
+    .submenu-title-noDropdown {
+      // 具体样式
+      &:hover {
+        // 收缩状态下没有子菜单的悬停颜色
+        background-color: transparent !important;
+      }
+    }
     .sidebar-container {
-      width: 54px !important;
+      width: 80px !important;
     }
+    // 在这里添加收缩状态下二级菜单的样式 ✨
+    .el-submenu.is-active {
+      background-color: #fff !important; // 收缩状态下的背景色
+      .el-submenu__title {
+        &:hover {
+          // 收缩状态下选中菜单的悬停颜色
+          background-color: #fff !important;
+        }
+      }
+    }
+    .el-submenu {
+      border-radius: 8px;
+      .el-submenu__title {
+        &:hover {
+          // 收缩状态下有子菜单的悬停颜色
+          background: transparent !important;
+        }
+      }
+    }
+
+    .nest-menu .el-submenu > .el-submenu__title,
+    .el-submenu .el-menu-item {
+      background-color: #fff !important; // 二级菜单普通状态背景色
+      border-radius: 8px !important;
 
+      &.is-active {
+        background-color: #fff !important; // 二级菜单选中状态背景色
+        color: #4a7ff8 !important;
+      }
+    }
     .main-container {
-      margin-left: 54px;
+      margin-left: 68px;
     }
 
     .submenu-title-noDropdown {
@@ -104,11 +202,7 @@
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 20px;
-        }
-
-        .sub-el-icon {
-          margin-left: 19px;
+          margin-left: 17px;
         }
       }
     }
@@ -120,15 +214,7 @@
         padding: 0 !important;
 
         .svg-icon {
-          margin-left: 20px;
-        }
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-
-        .el-submenu__icon-arrow {
-          display: none;
+          margin-left: 17px;
         }
       }
     }
@@ -148,17 +234,80 @@
     }
   }
 
-  .el-menu--collapse {
-    width: 54px;
+  // 展开状态样式控制 ✨
+  .sidebar-container:not(.el-menu--collapse) {
+    // 一级菜单图标显示
+    & > .el-menu > .el-submenu > .el-submenu__title .svg-icon {
+      display: inline-block !important;
+      width: 1.2em;
+      height: 1.2em;
+      margin-right: 8px;
+    }
 
-    .el-menu-item,
-    .el-submenu__title {
-      & > span {
-        height: 0;
-        width: 0;
-        overflow: hidden;
-        visibility: hidden;
-        display: inline-block;
+    // 二级+菜单图标隐藏 🌈
+    .el-menu--inline {
+      .svg-icon {
+        display: none !important;
+      }
+
+      // 三级菜单特殊处理 🎯
+      .el-menu--inline {
+        .svg-icon {
+          display: none !important;
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $base-sidebar-width !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform 0.28s;
+      width: 80% !important; // 移动端侧边栏宽度为屏幕的80%
+      max-width: 280px; // 最大宽度限制
+      min-width: 200px; // 最小宽度限制
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100vh;
+      z-index: 1000;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+      background-color: #fff !important; // 移动端侧边栏白色背景
+
+      // 覆盖菜单背景色
+      ::v-deep .el-menu {
+        background-color: #fff !important;
+      }
+
+      // 覆盖子菜单背景色
+      ::v-deep .el-submenu .el-menu {
+        background-color: #fff !important;
+      }
+
+      // 覆盖菜单项背景色
+      ::v-deep .el-menu-item,
+      ::v-deep .el-submenu__title {
+        background-color: #fff !important;
+
+        &:hover {
+          background-color: rgba(242, 242, 242, 1) !important;
+        }
+      }
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-100%, 0, 0); // 完全移出屏幕
       }
     }
   }
@@ -177,118 +326,109 @@
     .svg-icon {
       margin-right: 16px;
     }
-
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
+  }
+  // 设置整个弹出菜单容器的背景色 💖
+  & > .el-menu--popup {
+    background-color: #fff !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    padding: 8px !important; // 上下12px，左右8px
+    width: max-content !important; // 改为真正的宽度自适应 ✨
+    min-width: 120px !important; // 设置最小宽度
+    max-width: 300px !important; // 设置最大宽度
   }
 
+  .nest-menu .el-submenu {
+    background-color: #fff !important;
+  }
   .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
+    height: auto !important; // 改为自动高度，让padding决定高度
+    line-height: 20px !important; // 调整行高
+    margin: 8px 0 !important; // 调整间距
+    padding: 5px 24px !important;
+    background-color: #fff !important;
+    border-radius: 8px !important;
+    span {
+      margin-right: 15px;
+    }
+    .el-submenu__icon-arrow.el-icon-arrow-right {
+      //收缩状态下箭头样式
+      font-size: 16px;
+      font-weight: 600;
+    }
     &:hover {
-      // you can use $subMenuHover
-      background-color: $base-menu-hover !important;
+      background-color: rgba(242, 242, 242, 1) !important;
+      .el-submenu__icon-arrow.el-icon-arrow-right {
+        transform: rotateZ(270deg);
+        &::before {
+          color: #4a7ff8 !important;
+        }
+      }
     }
-  }
-}
-
-// the scrollBar style
-.el-scrollbar__wrap {
-  overflow-x: scroll !important;
-}
-
-.el-scrollbar__bar.is-horizontal {
-  display: none;
-}
 
-// 移动端样式
-@media (max-width: 768px) {
-  .sidebar-container {
-    width: 80% !important;
-    background-color: $base-menu-background;
-    height: 100%;
-    position: fixed;
-    font-size: 0px;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    &.is-active {
+      background-color: rgba(242, 242, 242, 1) !important; // 选中状态背景色
+      color: rgba(74, 127, 248, 1) !important; // 选中状态字体颜色
+    }
   }
 
-  .main-container {
-    margin-left: 0 !important;
-  }
+  /*   .el-menu-item.is-active {
+    background-color: $base-menu-active-background !important; // 🌈 使用变量设置选中背景色
+    color: $base-menu-color-active !important;
+    font-weight: 600;
 
-  .hideSidebar {
-    .sidebar-container {
-      transform: translateX(-100%);
+    &:hover {
+      background-color: darken(
+        $base-menu-active-background,
+        5%
+      ) !important; // 🎨 悬停时稍深
     }
   }
-}
-
-// 子菜单样式
-.el-submenu {
-  .el-menu {
-    background-color: $base-sub-menu-background !important;
-    border-radius: 4px;
-    padding: 4px 0;
+ */
+  // 子菜单选中状态
+  .el-submenu.is-active .el-submenu__title {
+    color: $base-menu-color-active !important;
   }
+  // the scroll bar appears when the subMenu is too long
+  > .el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
 
-  .el-menu-item {
-    padding-left: 50px !important;
-    min-height: 40px;
-    line-height: 40px;
-    font-size: 13px;
-    color: $base-menu-color;
-    transition: all 0.3s;
-
-    &:hover {
-      background-color: $base-sub-menu-hover !important;
-      color: $base-menu-active-color !important;
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
     }
 
-    &.is-active {
-      background-color: $base-sub-menu-active !important;
-      color: $base-menu-active-color !important;
-      font-weight: 500;
+    &::-webkit-scrollbar {
+      width: 6px;
     }
-  }
-}
-
-// 菜单项样式
-.el-menu-item {
-  min-height: 50px;
-  line-height: 50px;
-  font-size: 14px;
-  color: $base-menu-color;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: $base-menu-hover !important;
-    color: $base-menu-active-color !important;
-  }
 
-  &.is-active {
-    background-color: $base-menu-active !important;
-    color: $base-menu-active-color !important;
-    font-weight: 500;
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
   }
 }
-
-// 滚动条样式
-.el-scrollbar__wrap::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+.sidebar-container {
+  padding: 0 16px; /* 添加这行来设置整体内边距 */
 }
-
-.el-scrollbar__wrap::-webkit-scrollbar-thumb {
-  background: rgba(144, 147, 153, 0.3);
-  border-radius: 4px;
+// 添加子菜单箭头样式覆盖
+.el-submenu__icon-arrow {
+  position: absolute;
+  top: 50%;
+  right: 16px !important; /* 修改为0，并添加!important确保覆盖 */
+  margin-top: -7px;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.3s;
+  font-size: 16px;
+  color: #999;
+  transform: rotateZ(270deg);
 }
-
-.el-scrollbar__wrap::-webkit-scrollbar-track {
-  background: transparent;
+// 侧边栏收缩时隐藏箭头 ✨
+.hideSidebar {
+  .el-submenu__icon-arrow {
+    display: none !important;
+  }
 }

package/src/styles/variables.scss

@@ -20,11 +20,6 @@ $base-logo-light-title-color: #001529; // 🌅 浅色主题Logo标题颜色 -
 
 $base-sub-menu-background: transparent; // 🎨 子菜单背景色
 $base-sub-menu-hover: rgba(202, 210, 228, 0.3); // 🖱️ 子菜单悬停背景色
-$base-menu-hover: rgba(202, 210, 228, 0.3); // 🖱️ 菜单悬停背景色
-$base-sub-menu-active: rgba(202, 210, 228, 0.5); // ✨ 子菜单激活背景色
-$base-sub-menu-active-text: rgb(74, 127, 248); // 💫 子菜单激活文字颜色
-$base-menu-active: rgba(202, 210, 228, 0.5); // ✨ 菜单激活背景色
-$base-menu-active-color: rgb(74, 127, 248); // 💫 菜单激活文字颜色
 
 //自定义新增
 $base-menu-active-background: #fff; // 🌟 新增：菜单选中背景色 -

package/src/utils/validate.js

@@ -0,0 +1,8 @@
+/**
+ * 判断path是否为外链
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}