cfel-base-components 2.5.56 → 2.5.58

package/demo/src/index.module.less

@@ -1,3 +1,4 @@
+@import url('https://at.alicdn.com/t/c/font_4136947_m631nxpiqgk.css');
 *,
 body {
   padding: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "2.5.56",
+  "version": "2.5.58",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/components/layout/index.scss

@@ -7,8 +7,71 @@ ul {
 }
 
 .ant-layout {
-  background: linear-gradient( 223deg, #FEF8FF 0%, #ECF3FE 29%, #F9FAFF 100%);
-  box-shadow: inset 0px -1px 0px 0px #EDEEFD;
+  background: linear-gradient(223deg, #fef8ff 0%, #ecf3fe 29%, #f9faff 100%);
+  box-shadow: inset 0px -1px 0px 0px #edeefd;
+}
+
+.ant-popover-inner {
+  padding: 8px !important;
+}
+
+.menu-popover {
+  width: 168px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #04073b;
+  text-align: left;
+  font-style: normal;
+  cursor: pointer;
+
+  .sub-list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sub-li {
+    width: 152px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 6px 8px;
+
+    &:hover {
+      color: #185dfe;
+    }
+
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+  }
+
+  .grand-li {
+    width: 130px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 6px 8px;
+
+    &:hover {
+      color: #185dfe;
+    }
+
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+  }
+
+  .sub-item-selected {
+    font-weight: 500;
+    color: #3d76ec;
+    background: rgba(61, 118, 236, 0.1);
+    border-radius: 4px;
+  }
 }
 
 .layout-menu {
@@ -33,12 +96,12 @@ ul {
       height: 16px;
       transform: translateY(0);
       transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-    
+
       // 当菜单收起时隐藏箭头
       .ant-layout-sider-collapsed & {
         display: none;
       }
-    
+
       &::before,
       &::after {
         position: absolute;
@@ -52,15 +115,15 @@ ul {
           transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
         content: '';
       }
-    
+
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
-    
+
       &::after {
         transform: rotate(45deg) translateX(-2.5px);
       }
-    
+
       // RTL support
       &.#{$menuPrefixCls}-rtl,
       .#{$menuPrefixCls}-submenu-rtl & {
@@ -68,7 +131,7 @@ ul {
         left: 16px;
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-open > .#{$menuPrefixCls}-submenu-title {
       .#{$menuPrefixCls}-submenu-arrow {
         transform: translateY(-3px);
@@ -80,7 +143,7 @@ ul {
         }
       }
     }
-    
+
     .#{$menuPrefixCls}-submenu-selected {
       > .#{$menuPrefixCls}-submenu-title {
         .#{$menuPrefixCls}-submenu-arrow {
@@ -91,7 +154,6 @@ ul {
         }
       }
     }
-    
 
     > li {
       .first-li {
@@ -100,7 +162,7 @@ ul {
             color: #185dff;
             font-weight: 500;
           }
-          
+
           .menu-item-label {
             color: #185dff;
             font-weight: 500;
@@ -180,11 +242,10 @@ ul {
       position: relative;
       z-index: 9;
 
-      
       .menu-item-content {
         width: 100%;
         padding-right: 24px;
-  
+
         .menu-item-label {
           width: 100%;
           display: inline-flex;
@@ -278,21 +339,20 @@ ul {
     }
 
     .grand-li {
-      background: rgba(224,235,251);
+      background: rgba(224, 235, 251);
       position: relative;
       z-index: 9;
       display: flex;
       align-items: center;
       margin-left: 2px;
 
-
       .menu-item-content {
         width: 100%;
         padding-right: 24px;
         height: 52px;
         display: flex;
         align-items: center;
-  
+
         .menu-item-label {
           width: 100%;
           display: inline-flex;
@@ -382,6 +442,23 @@ ul {
     list-style: none;
     cursor: pointer;
 
+    .menu-item-icon {
+      display: inline-block;
+      height: 22px;
+      width: 22px;
+      color: #04073b;
+
+      &:hover {
+        color: #185dff;
+        font-weight: 500;
+      }
+    }
+
+    .submenu-selected {
+      color: #185dff;
+      font-weight: 500;
+    }
+
     .menu-item-content {
       font-weight: 400;
       font-size: 14px;
@@ -429,6 +506,8 @@ body {
   }
 
   .close-trigger {
+    position: relative;
+    z-index: 10;
     margin-top: 24px;
     width: 30px;
     height: 30px;
@@ -440,6 +519,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
   }
 
   .search {
@@ -591,7 +671,7 @@ body {
 .layout-header {
   z-index: 1;
   height: $header-height;
-  background: linear-gradient( 223deg, #FAF8FF 0%, #ECF2FE 29%, #FFFFFF 100%);
+  background: linear-gradient(223deg, #faf8ff 0%, #ecf2fe 29%, #ffffff 100%);
   border-radius: 16px;
   border: 1px solid #ffffff;
   position: relative;
@@ -668,37 +748,6 @@ body {
   height: 100%;
   padding-left: 12px;
   overflow: auto;
-
-  .down {
-    transform: rotate(0deg);
-    animation: downanimation 0.3s ease-in-out;
-  }
-
-  @keyframes downanimation {
-    from {
-      transform: rotate(180deg);
-    }
-
-    to {
-      transform: rotate(0deg);
-    }
-  }
-
-  //---
-  .up {
-    transform: rotate(180deg);
-    animation: upanimation 0.3s ease-in-out;
-  }
-
-  @keyframes upanimation {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(180deg);
-    }
-  }
 }
 
 .layout-content {
@@ -792,3 +841,57 @@ body {
   }
 }
 
+// 箭头向下样式
+.down {
+  transform: rotate(0deg);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// 箭头向上样式
+.up {
+  transform: rotate(180deg);
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// 箭头切换动画
+.arrow-transition {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  &.down-to-up {
+    animation: colorRotateUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+
+  &.up-to-down {
+    animation: colorRotateDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+}
+
+@keyframes colorRotateUp {
+  0% {
+    transform: rotate(0deg) scale(1);
+    color: currentColor;
+  }
+  50% {
+    transform: rotate(90deg) scale(1.2);
+    color: #1890ff;
+  }
+  100% {
+    transform: rotate(180deg) scale(1);
+    color: currentColor;
+  }
+}
+
+@keyframes colorRotateDown {
+  0% {
+    transform: rotate(180deg) scale(1);
+    color: currentColor;
+  }
+  50% {
+    transform: rotate(90deg) scale(1.2);
+    color: #1890ff;
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+    color: currentColor;
+  }
+}