cfel-base-components 2.5.53 → 2.5.54

package/demo/src/index.jsx

@@ -4,7 +4,7 @@ import style from './index.module.less'
 import { SwapOutlined, QqOutlined, WeiboOutlined } from '@ant-design/icons'
 import { ConfigProvider } from 'antd'
 import Layout from '../../src/components/layout'
-//import Layout from '../../src/components/layout-console'
+// import Layout from '../../src/components/layout-console'
 import { QuestionCircleTwoTone } from '@ant-design/icons'
 // import Account from '../../src/components/universal-pages/account';
 // import AccountInfo from '../../src/components/universal-pages/accountInfo';
@@ -26,11 +26,19 @@ const menuList = [
     children: [
       {
         label: '产品模型',
-        key: 'product-list',
+        key: 'product-list1',
         children: [
           {
             label: '产品模型',
-            key: 'product-list',
+            key: 'product-list2',
+          },
+          {
+            label: '产品模型',
+            key: 'product-list3',
+          },
+          {
+            label: '产品模型',
+            key: 'product-list4',
           },
         ],
       },
@@ -39,13 +47,19 @@ const menuList = [
         key: 'commodity-list',
         children: [
           {
-            label: '产品模型',
-            key: 'product-list',
+            label: <>
+            <span>配额列表</span>
+              <span className={style.quotaCount}>12</span>
+              </>,
+            key: 'product-list3',
           },
         ],
       },
       {
-        label: '定价项列表',
+        label:<>
+        <span>配额列表</span>
+          <span className={style.quotaCount}>12</span>
+          </>,
         key: 'entity-list',
       },
       {
@@ -58,10 +72,54 @@ const menuList = [
     label: '数据字典',
     icon: <SwapOutlined />,
     key: 'dictionary-list',
+    children: [
+      {
+        label: '产品模型',
+        key: 'product-lis1',
+        children: [
+          {
+            label: '产品模型',
+            key: 'product-lit2',
+          },
+          {
+            label: '产品模型',
+            key: 'product-lit3',
+          },
+          {
+            label: '产品模型',
+            key: 'product-lit4',
+          },
+        ],
+      },
+      {
+        label: '商品模型',
+        key: 'commodity-li1st',
+        children: [
+          {
+            label: <>
+            <span>配额列表</span>
+              <span className={style.quotaCount}>12</span>
+              </>,
+            key: 'product-list3',
+          },
+        ],
+      },
+      {
+        label:<>
+        <span>配额列表</span>
+          <span className={style.quotaCount}>12</span>
+          </>,
+        key: 'entity-list',
+      },
+      {
+        label: '资源类型管理',
+        key: 'rsourceType-listawsd',
+      },
+    ],
   },
   {
     label: '实例管理',
-    icon: <i className="iconfont icon-moxing-miaobian" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '容器镜像服务管理',
@@ -89,7 +147,7 @@ const menuList = [
   {
     label: 'API管理',
     key: 'apiAction',
-    icon: <i className="iconfont icon-API" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: 'API 应用管理',
@@ -108,7 +166,7 @@ const menuList = [
   {
     label: '消息中心',
     key: 'msgAction',
-    icon: <i className="iconfont icon-xiaoxi" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '消息管理',
@@ -131,7 +189,7 @@ const menuList = [
   {
     label: '权限资源配置',
     key: 'menuAction',
-    icon: <i className="iconfont icon-qingdan" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '菜单管理',
@@ -149,18 +207,18 @@ const menuList = [
   },
   {
     label: '配额管理',
-    icon: <i className="iconfont icon-peie" />,
+    icon: <SwapOutlined />,
     key: 'quotaList',
   },
   {
     label: '库存管理',
-    icon: <i className="iconfont icon-peie" />,
+    icon: <SwapOutlined />,
     key: 'inventoryList',
   },
   {
     label: '权限管理',
     key: 'authority',
-    icon: <i className="iconfont icon-shezhi" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '账号列表',

package/demo/src/index.module.less

@@ -1,4 +1,24 @@
-*,body{
-    padding: 0px;
-    margin: 0px;
+*,
+body {
+  padding: 0px;
+  margin: 0px;
+}
+
+.quotaCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 6px;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 20%);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 5%);
+  border-radius: 8px;
+  backdrop-filter: blur(10px);
+  color: rgba(0, 0, 0, 60%);
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
 }

package/package.json

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

package/src/components/layout/index.scss

@@ -7,14 +7,16 @@ ul {
 }
 
 .ant-layout {
-  background: linear-gradient(223deg, #fef8ff 0%, #ecf3fe 29%, #f9faff 100%) !important;
-  box-shadow: inset 0px -1px 0px 0px #edeefd !important;
+  background: linear-gradient( 223deg, #FEF8FF 0%, #ECF3FE 29%, #F9FAFF 100%);
+  box-shadow: inset 0px -1px 0px 0px #EDEEFD;
 }
 
 .layout-menu {
   border-radius: 16px;
   height: calc(100% - 109px);
   overflow-y: scroll;
+  position: relative;
+  z-index: 11;
 
   .menu {
     padding: 0;
@@ -41,7 +43,7 @@ ul {
       &::after {
         position: absolute;
         width: 6px;
-        height: 1.25px;
+        height: 1px;
         scale: 1.25;
         background: #788bb1;
         border-radius: 2px;
@@ -178,6 +180,19 @@ ul {
       position: relative;
       z-index: 9;
 
+      
+      .menu-item-content {
+        width: 100%;
+        padding-right: 24px;
+  
+        .menu-item-label {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
@@ -197,14 +212,14 @@ ul {
         width: 5px;
         height: 5px;
         background: #b4c4dc;
-        border-radius: 50%;
+        border-radius: 100%;
         z-index: 1;
       }
 
       &::after {
         content: '';
         position: absolute;
-        left: 32.8px;
+        left: 32.9px;
         top: 0 !important;
         width: 1px;
         height: 100%;
@@ -263,13 +278,28 @@ ul {
     }
 
     .grand-li {
-      background: #dcebfc;
+      background: rgba(224,235,251);
       position: relative;
       z-index: 9;
       display: flex;
       align-items: center;
       margin-left: 2px;
-      width: 252px;
+
+
+      .menu-item-content {
+        width: 100%;
+        padding-right: 24px;
+        height: 52px;
+        display: flex;
+        align-items: center;
+  
+        .menu-item-label {
+          width: 100%;
+          display: inline-flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
 
       &:hover {
         > .menu-item-content {
@@ -293,7 +323,7 @@ ul {
         width: 5px;
         height: 5px;
         background: #b4c4dc;
-        border-radius: 50%;
+        border-radius: 100%;
         transform: translateY(-50%);
         z-index: 1;
       }
@@ -328,16 +358,7 @@ ul {
       }
 
       &.rc-menu-item-selected {
-        .menu-item-content {
-          width: 100%;
-          padding-right: 24px;
-          height: 52px;
-          display: flex;
-          align-items: center;
-        }
         .menu-item-label {
-          display: flex;
-          align-items: center;
           padding-left: 12px;
           width: 100%;
           height: 40px;
@@ -429,6 +450,7 @@ body {
     border-radius: 10px;
     backdrop-filter: blur(10px);
     position: relative;
+    z-index: 11;
 
     .search-bg-mask {
       position: absolute;
@@ -458,9 +480,6 @@ body {
         background: rgba(0, 0, 0, 0.05);
       }
 
-      box-shadow:
-        inset 0px 2px 1px 0px rgba(0, 0, 0, 0.05),
-        inset 0px -2px 0px 0px rgba(255, 255, 255, 0.3);
       border-radius: 10px;
       backdrop-filter: blur(10px);
 
@@ -509,6 +528,17 @@ body {
 }
 
 .layout-side-mask1 {
+  background: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  z-index: 9;
+}
+
+.layout-side-mask2 {
   background: radial-gradient(
     152% 131% at 3% 1%,
     #e8e2fa 0%,
@@ -524,10 +554,10 @@ body {
   width: 100%;
   height: 100%;
   border-radius: 16px;
+  z-index: 10;
 }
 
 .layout-side {
-  // background: url('https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/base-component/menu-bg-other.png') no-repeat !important;
   background: transparent !important;
   position: relative;
   height: calc(100vh - 24px);
@@ -543,6 +573,8 @@ body {
     justify-content: space-between;
     cursor: pointer;
     height: 30px;
+    position: relative;
+    z-index: 11;
 
     .logo-sub {
       width: 31px;
@@ -559,7 +591,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;
@@ -760,57 +792,3 @@ body {
   }
 }
 
-
-.#{$menuPrefixCls} {
-  &-zoom-enter,
-  &-zoom-appear {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-    animation-play-state: paused;
-  }
-
-  &-zoom-leave {
-    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-    animation-play-state: paused;
-  }
-
-  &-zoom-enter#{&}-zoom-enter-active,
-  &-zoom-appear#{&}-zoom-appear-active {
-    animation-name: rcMenuOpenZoomIn;
-    animation-play-state: running;
-  }
-
-  &-zoom-leave#{&}-zoom-leave-active {
-    animation-name: rcMenuOpenZoomOut;
-    animation-play-state: running;
-  }
-
-  &-zoom-enter,
-  &-zoom-appear,
-  &-zoom-leave {
-    .#{$menuPrefixCls}-submenu-rtl & {
-      transform-origin: top right !important;
-    }
-  }
-
-  @keyframes rcMenuOpenZoomIn {
-    0% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-
-  @keyframes rcMenuOpenZoomOut {
-    0% {
-      transform: scale(1, 1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
-  }
-}

package/src/components/layout/index.tsx

@@ -106,7 +106,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const { name, avatar } = user || {}
 
   // 初始化展开菜单
-  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
+  const [openKeys, setOpenKeys] = useState<string[]>(defaultOpenKeys || [])
+  const [activeThirdLevelMenu, setActiveThirdLevelMenu] = useState<string | null>(null)
 
   //处理搜索菜单后自动展开目录
   const findParentMenu = (menuList: any[], pathname: string) => {
@@ -150,7 +151,25 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   })
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
-    setOpenKeys(keys)
+    // Find the last opened key
+    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1)
+
+    if (latestOpenKey) {
+      // If opening a new key
+      const rootSubmenuKeys = menuList.map((item) => item.key)
+
+      if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
+        // If it's a third level menu, only keep its parent menu open
+        const parentKey = keys.find((key) => rootSubmenuKeys.includes(key))
+        setOpenKeys(parentKey ? [parentKey, latestOpenKey] : [latestOpenKey])
+      } else {
+        // If it's a second level menu, only keep it open
+        setOpenKeys([latestOpenKey])
+      }
+    } else {
+      // If closing a menu
+      setOpenKeys(keys)
+    }
   }
 
   const copyTextToClipboard = async (text: string, key: string) => {
@@ -187,6 +206,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     motionLeave: true,
   }
 
+  useEffect(() => {
+    return () => {
+      setActiveThirdLevelMenu(null)
+      setOpenKeys([])
+    }
+  }, [])
+
   return (
     <Layout className="layout-warps">
       {Array.isArray(menuList) && menuList.length > 0 && (
@@ -205,6 +231,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           }}
         >
           <div className="layout-side-mask1"></div>
+          <div className="layout-side-mask2"></div>
 
           <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
             <div

package/src/components/layout-console/index-console.scss

@@ -42,7 +42,7 @@ ul {
       &::after {
         position: absolute;
         width: 6px;
-        height: 1.25px;
+        height: 1px;
         scale: 1.25;
         background: rgba(255, 255, 255, 0.65);
         border-radius: 2px;
@@ -220,6 +220,20 @@ ul {
       position: relative;
       z-index: 9;
       line-height: 52px;
+      width: 100%;
+
+      .menu-item-content{
+        width: 100%;
+        padding-right: 24px;
+
+        .menu-item-label{
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+      
 
       &::before {
         content: '';
@@ -229,14 +243,14 @@ ul {
         width: 5px;
         height: 5px;
         background: #8f9cec;
-        border-radius: 50%;
+        border-radius: 100%;
         z-index: 1;
       }
 
       &::after {
         content: '';
         position: absolute;
-        left: 32.8px;
+        left: 32.9px;
         top: 0 !important;
         width: 1px;
         height: 100%;
@@ -275,10 +289,6 @@ ul {
         box-shadow: 0px 0px 30px 0px transparent;
 
         &.rc-menu-item-selected {
-          .menu-item-content {
-            width: 100%;
-            padding-right: 24px;
-          }
           .menu-item-label {
             color: #fff;
             font-weight: 500;
@@ -286,7 +296,6 @@ ul {
             align-items: center;
             padding-left: 12px;
             width: 100%;
-            padding-right: 24px;
             height: 40px;
             background: rgba(255, 255, 255, 0.05);
             box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
@@ -300,7 +309,7 @@ ul {
     }
 
     .grand-li {
-      background: #206abd;
+      background: #3568B7;
       position: relative;
       z-index: 9;
       line-height: 52px;
@@ -321,7 +330,7 @@ ul {
         width: 5px;
         height: 5px;
         background: #8f9cec;
-        border-radius: 50%;
+        border-radius: 100%;
         transform: translateY(-50%);
         z-index: 2;
       }
@@ -387,12 +396,14 @@ ul {
     }
   }
 
-  .menu-collapsed-console {
+  .menu-console-collapsed {
     display: flex;
     flex-direction: column;
     align-items: center;
     list-style: none;
     cursor: pointer;
+    position: relative;
+    z-index: 20;
 
     .menu-item-content {
       font-weight: 400;
@@ -441,13 +452,15 @@ body {
   }
 
   .close-trigger-console {
+    position: relative;
+    z-index: 20;
     margin-top: 24px;
     width: 30px;
     height: 30px;
-    background: #f0f4fe;
+    background: rgba(255, 255, 255, 0.05);
     box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
     border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     display: flex;
     justify-content: center;
@@ -456,7 +469,7 @@ body {
 
   .search-console {
     position: relative;
-    z-index: 99;
+    z-index: 11;
     height: 40px;
     color: #fff;
     background: #5b6ecf;
@@ -548,6 +561,19 @@ body {
   }
 }
 
+.layout-side-mask1-console {
+  z-index: 9;
+  background: white;
+  border: 2px solid #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+}
+
+
 .layout-side-mask2-console {
   z-index: 10;
   background: linear-gradient(227deg, #7856e6 0%, #6a6ed2 0%, #0271c3 100%) !important;
@@ -575,7 +601,8 @@ body {
     cursor: pointer;
     height: 30px;
     position: relative;
-    z-index: 99;
+    z-index: 11;
+    
 
     .logo-sub {
       width: 31px;
@@ -590,36 +617,6 @@ body {
 }
 
 .layout-header-console {
-  .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);
-    }
-  }
 
   z-index: 1;
   height: $header-height;
@@ -675,6 +672,37 @@ body {
     border-radius: 6px;
     cursor: pointer;
 
+    &-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);
+      }
+    }
+
     &:hover {
       background: rgba(0, 0, 0, 0.06);
     }