cfel-base-components 2.5.52 → 2.5.54

package/demo/src/index.jsx

@@ -3,9 +3,9 @@ import { createRoot } from 'react-dom/client'
 import style from './index.module.less'
 import { SwapOutlined, QqOutlined, WeiboOutlined } from '@ant-design/icons'
 import { ConfigProvider } from 'antd'
-import './index.scss'
 import Layout from '../../src/components/layout'
-import LayoutConsole 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';
 import CpcRole from '../../src/components/universal-pages/cpcRole'
@@ -13,27 +13,53 @@ import CpcRoleInfo from '../../src/components/universal-pages/cpcRoleInfo'
 import ProTable from '../../src/components/base-component/ProTable'
 import PageContainer from '../../src/components/base-component/PageContainer'
 
-const menu = [
+const menuList = [
   {
     label: '云厂商',
-    icon: <i className="iconfont icon-wangluo" />,
+    icon: <SwapOutlined />,
     key: 'cloud-list',
   },
   {
     label: '产品模型',
-    icon: <i className="iconfont icon-jiqun" />,
+    icon: <SwapOutlined />,
     key: 'catalog',
     children: [
       {
         label: '产品模型',
-        key: 'product-list',
+        key: 'product-list1',
+        children: [
+          {
+            label: '产品模型',
+            key: 'product-list2',
+          },
+          {
+            label: '产品模型',
+            key: 'product-list3',
+          },
+          {
+            label: '产品模型',
+            key: 'product-list4',
+          },
+        ],
       },
       {
         label: '商品模型',
         key: 'commodity-list',
+        children: [
+          {
+            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',
       },
       {
@@ -44,12 +70,56 @@ const menu = [
   },
   {
     label: '数据字典',
-    icon: <i className="iconfont icon-shujuzidian" />,
+    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: '容器镜像服务管理',
@@ -77,7 +147,7 @@ const menu = [
   {
     label: 'API管理',
     key: 'apiAction',
-    icon: <i className="iconfont icon-API" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: 'API 应用管理',
@@ -96,7 +166,7 @@ const menu = [
   {
     label: '消息中心',
     key: 'msgAction',
-    icon: <i className="iconfont icon-xiaoxi" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '消息管理',
@@ -119,7 +189,7 @@ const menu = [
   {
     label: '权限资源配置',
     key: 'menuAction',
-    icon: <i className="iconfont icon-qingdan" />,
+    icon: <SwapOutlined />,
     children: [
       {
         label: '菜单管理',
@@ -137,18 +207,18 @@ const menu = [
   },
   {
     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: '账号列表',
@@ -230,6 +300,7 @@ const App = () => {
         tableData: false,
       }}></CpcRoleInfo> */}
         <PageContainer>
+        <QuestionCircleTwoTone twoToneColor='orange' />
           <ProTable columns={columns} nameSpace="device" dataSource={[{ name: '1', description: '1', status: '1' }]} />
         </PageContainer>
       </Layout>

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.52",
+  "version": "2.5.54",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/.umi/core/helmet.ts

@@ -2,7 +2,7 @@
 // This file is generated by Umi automatically
 // DO NOT CHANGE IT MANUALLY!
 import React from 'react';
-import { HelmetProvider } from '/Users/lionaillen/Documents/workPlace/cfel/base-components/node_modules/.pnpm/@umijs+renderer-react@4.0.72_react-dom@18.1.0_react@18.1.0/node_modules/@umijs/renderer-react';
+import { HelmetProvider } from '/Users/lionaillen/Documents/work/cfel/base-components/node_modules/.pnpm/@umijs+renderer-react@4.0.72_react-dom@18.1.0_react@18.1.0__react@18.1.0/node_modules/@umijs/renderer-react';
 import { context } from './helmetContext';
 
 export const innerProvider = (container) => {

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;
@@ -92,6 +94,20 @@ ul {
     
 
     > li {
+      .first-li {
+        &:hover {
+          .menu-item-icon {
+            color: #185dff;
+            font-weight: 500;
+          }
+          
+          .menu-item-label {
+            color: #185dff;
+            font-weight: 500;
+          }
+        }
+      }
+
       &:hover {
         > .menu-item-content {
           .menu-item-icon,
@@ -164,10 +180,22 @@ 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,
-          .iconfont,
           .menu-item-label {
             color: #185dff;
             font-weight: 500;
@@ -184,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%;
@@ -250,18 +278,32 @@ 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 {
           .menu-item-icon,
-          .iconfont,
           .menu-item-label {
             color: #185dff;
             font-weight: 500;
@@ -281,7 +323,7 @@ ul {
         width: 5px;
         height: 5px;
         background: #b4c4dc;
-        border-radius: 50%;
+        border-radius: 100%;
         transform: translateY(-50%);
         z-index: 1;
       }
@@ -316,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;
@@ -417,6 +450,7 @@ body {
     border-radius: 10px;
     backdrop-filter: blur(10px);
     position: relative;
+    z-index: 11;
 
     .search-bg-mask {
       position: absolute;
@@ -446,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);
 
@@ -497,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%,
@@ -512,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);
@@ -531,6 +573,8 @@ body {
     justify-content: space-between;
     cursor: pointer;
     height: 30px;
+    position: relative;
+    z-index: 11;
 
     .logo-sub {
       width: 31px;
@@ -547,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;
@@ -748,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
@@ -234,6 +261,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               <div
                 className="close-trigger"
                 onClick={() => {
+                  localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
                 }}
               >
@@ -344,7 +372,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         zIndex: 99,
                       }}
                     >
-                      <div>
+                      <div className="first-li">
                         <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
                         {!collapsed && <span className={classNames}>{item.label}</span>}
                       </div>
@@ -423,7 +451,7 @@ function Arrow({ collapsed, type }: { collapsed?: boolean; type?: string }) {
   return (
     <svg style={{ transform: !collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
       <path
-        fill={type === 'console' ? '#FFFFFF' : '#817F9B'}
+        fill="817F9B"
         d="M564.6336 775.168a41.5744 41.5744 0 0 0-13.312-28.672l-230.4-234.4448 229.9904-234.1888a42.0864 42.0864 0 0 0-26.3168-73.0112 42.0864 42.0864 0 0 0-30.6176 11.264L231.0656 481.024a41.984 41.984 0 0 0-2.4576 59.5968l1.9968 2.048 263.7824 265.6256a41.984 41.984 0 0 0 70.2464-33.0752z m254.5152 0a41.472 41.472 0 0 0-13.312-28.672L575.488 512l229.9904-234.1376a41.984 41.984 0 1 0-56.9344-61.7984L485.632 480.9728a42.0864 42.0864 0 0 0-2.4064 59.6992l0.8704 0.9216 0.8704 0.8192 0.4096 0.4096 263.5776 265.4208a41.984 41.984 0 0 0 70.1952-33.0752z"
       ></path>
     </svg>