cfel-base-components 2.5.62 → 2.5.64

package/package.json

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

package/src/components/layout/index.tsx

@@ -138,15 +138,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     tenantId: false,
   })
 
+
   useEffect(() => {
     //在这里找到当前菜单的上层目录
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
+    //去重
+    const set = new Set(paMenu.map((item) => item.key))
 
-    setOpenKeys(paMenu.map((item) => item.key))
+    openKeys.forEach((element: string) => {
+      set.add(element)
+    })
+    setOpenKeys(Array.from(set))
 
+    // 设置选中的菜单项
     const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
     setSelectKey(selectedPath)
-  }, [location.pathname, collapsed])
+  }, [location.pathname])
+
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     // Find the last opened key

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

@@ -329,7 +329,7 @@ ul {
             padding-left: 12px;
             width: 100%;
             height: 40px;
-            background: #c5d6ff;
+            background: #D3F1E4;
             border-radius: 10px;
             backdrop-filter: blur(10px);
             transition: all 0.3s ease-in-out;
@@ -422,7 +422,7 @@ ul {
           padding-left: 12px;
           width: 100%;
           height: 40px;
-          background: #c5d6ff;
+          background: #D3F1E4;
           border-radius: 10px;
           backdrop-filter: blur(10px);
           transition: all 0.3s ease-in-out;
@@ -606,7 +606,7 @@ body {
   }
 }
 
-.layout-side-mask1 {
+.layout-side-mask-cloud1 {
   background: white;
   position: absolute;
   top: 0;
@@ -617,9 +617,8 @@ body {
   z-index: 9;
 }
 
-.layout-side-mask2 {
+.layout-side-mask-cloud2 {
   background: linear-gradient( 227deg, #F0FBF3 0%, #E5F6FA 100%);
-  opacity: 0.3;
   position: absolute;
   top: 0;
   left: 0;

package/src/components/layout-cloud/index.tsx

@@ -138,15 +138,23 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     tenantId: false,
   })
 
+
   useEffect(() => {
     //在这里找到当前菜单的上层目录
     const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
+    //去重
+    const set = new Set(paMenu.map((item) => item.key))
 
-    setOpenKeys(paMenu.map((item) => item.key))
+    openKeys.forEach((element: string) => {
+      set.add(element)
+    })
+    setOpenKeys(Array.from(set))
 
+    // 设置选中的菜单项
     const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
     setSelectKey(selectedPath)
-  }, [location.pathname, collapsed])
+  }, [location.pathname])
+
 
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     // Find the last opened key
@@ -221,8 +229,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
             setCollapsed(value)
           }}
         >
-          <div className="layout-side-mask1"></div>
-          <div className="layout-side-mask2"></div>
+          <div className="layout-side-mask-cloud1"></div>
+          <div className="layout-side-mask-cloud2"></div>
 
           <div className="header-logo" style={{ justifyContent: collapsed ? 'center' : '', paddingLeft: collapsed ? '0' : '' }}>
             <div

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

@@ -129,6 +129,22 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     return result
   }
 
+  useEffect(() => {
+    //在这里找到当前菜单的上层目录
+    const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
+    //去重
+    const set = new Set(paMenu.map((item) => item.key))
+
+    openKeys.forEach((element: string) => {
+      set.add(element)
+    })
+    setOpenKeys(Array.from(set))
+
+    // 设置选中的菜单项
+    const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
+    setSelectKey(selectedPath)
+  }, [location.pathname])
+
   // 初始化折叠状态
   const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
   const [isCopied, setIsCopied] = useState({
@@ -138,23 +154,13 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     tenantId: false,
   })
 
-  useEffect(() => {
-    //在这里找到当前菜单的上层目录
-    const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
-
-    setOpenKeys(paMenu.map((item) => item.key))
-
-    const selectedPath = findKeyPath('/' + location.pathname.split('/')[2])
-    setSelectKey(selectedPath)
-  }, [location.pathname, collapsed])
-
   const onOpenChange: MenuProps['onOpenChange'] = (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: any) => item.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
@@ -235,9 +241,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               {/* {collapsed && <img className={`logo-base sub-logo`} src={logo || subLogoUrl} />} */}
             </div>
 
-            {!collapsed && (
+            {/* {!collapsed && (
               <div
-                className="trigger-console"
+                className='trigger-console'
                 onClick={() => {
                   setCollapsed(true)
                 }}
@@ -250,7 +256,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {collapsed && (
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
               <div
-                className="close-trigger-console"
+                className='close-trigger-console'
                 onClick={() => {
                   localStorage.setItem('layout_collapsed', 'false')
                   setCollapsed(false)
@@ -258,9 +264,9 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               >
                 <Arrow collapsed={false} type={type} />
               </div>
-            </div>
-          )}
-
+        
+          )} */}
+          </div>
           {!collapsed && <div style={{ height: 24 }}></div>}
 
           <div style={{ width: '100%', padding: '0 16px' }}>
@@ -304,20 +310,18 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         content={
                           <div className="menu-popover">
                             {item.children.map((child: any) => {
-                              const isSelected = selectKey.includes(child.key)
                               if (child.children) {
                                 return (
                                   <Popover
                                     key={child.key}
                                     align={{
-                                      offset: [10, 0],
+                                      offset: [30, 0],
                                     }}
                                     placement="right"
                                     arrow={false}
                                     content={
                                       <div className="menu-popover" style={{ width: '146px' }}>
                                         {child.children.map((grandChild: any) => {
-                                          const isSelected = selectKey.includes(grandChild.key)
                                           return (
                                             <MenuItem
                                               onClick={() => {
@@ -326,10 +330,10 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                                 }
                                               }}
                                               key={grandChild.key}
-                                              className={`grand-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                              className="grand-li"
                                             >
-                                              <div style={{ width: '130px' }}>
-                                                <span className={`menu-item-label`}>{grandChild.label}</span>
+                                              <div className="menu-item-content">
+                                                <span className="menu-item-label">{grandChild.label}</span>
                                               </div>
                                             </MenuItem>
                                           )
@@ -338,11 +342,11 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                     }
                                   >
                                     <SubMenu
-                                      className={`menu-item-content sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                      className="menu-item-content sub-li"
                                       key={child.key}
                                       title={
                                         <div className="sub-list">
-                                          <span className={`menu-item-label`}>{child.label}</span>
+                                          <span className="menu-item-label">{child.label}</span>
                                           <RightOutlined />
                                         </div>
                                       }
@@ -358,7 +362,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                                     }
                                   }}
                                   key={child.key}
-                                  className={`sub-li ${isSelected ? 'sub-item-selected' : ''}`}
+                                  className={`sub-li ${isSelected ? 'sub-selected' : ''}`}
                                 >
                                   <div className="menu-item-content sub-list">{child.label}</div>
                                 </MenuItem>
@@ -368,7 +372,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                         }
                       >
                         <SubMenu
-                          className="menu-item-content sub-li"
+                          className="menu-item-content"
                           title={
                             <div className="sub-list">
                               <div>
@@ -441,15 +445,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                     classNames += ' submenu-selected'
                   }
                   return (
-                    <MenuItem
-                      onClick={() => {
-                        if (onMenuClick && collapsed) {
-                          onMenuClick(item)
-                        }
-                      }}
-                      key={item.key}
-                      className="menu-item-content"
-                    >
+                    <MenuItem key={item.key} className="menu-item-content">
                       <div className="first-li">
                         <span className={`menu-item-icon ${isSelected ? 'submenu-selected' : ''}`}>{item.icon}</span>
                         {!collapsed && <span className={classNames}>{item.label}</span>}
@@ -468,7 +464,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           <div className="layout-header-console">
             {appName && (
               <div className="app-name">
-                <div>{appName}</div>
+                <strong>{appName}</strong>
               </div>
             )}