cfel-base-components 2.5.34 → 2.5.36

package/package.json

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

package/src/components/layout/index.scss

@@ -104,7 +104,7 @@ body {
     justify-content: flex-start;
     align-items: center;
     height: 100%;
-    max-width: 300px;
+    max-width: 400px;
     z-index: 2;
 
     .actions-item {

package/src/components/layout/index.tsx

@@ -1,37 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { Layout, Menu, MenuProps, Popover } from "antd";
-import UserCard from "./user-card";
-import "./index.scss";
+import React, { useEffect, useState } from 'react'
+import { Layout, Menu, MenuProps, Popover } from 'antd'
+import UserCard from './user-card'
+import './index.scss'
 
-const { Sider } = Layout;
+const { Sider } = Layout
 
 export interface LiosLayoutlProps {
-  appName?: any;
-  productCode: string;
-  children: any;
-  menuList: any;
-  onMenuClick: (item: any) => void;
-  selectedKeys: string[];
-  customAction?: (item: any) => void;
-  actions?: any[];
+  appName?: any
+  productCode: string
+  children: any
+  menuList: any
+  onMenuClick: (item: any) => void
+  selectedKeys: string[]
+  customAction?: (item: any) => void
+  actions?: any[]
   myWalletInfo?: {
-    availableCashAmount: string;
-    availableAmount: string;
-    currency: string;
-  };
+    availableCashAmount: string
+    availableAmount: string
+    currency: string
+  }
   MyLoginInfo?: {
-    isAdmin: any;
-  };
+    isAdmin: any
+  }
   amountInfo?: {
-    residueNum: string;
-    currencyCode: string;
-  };
-  myWalletInfoAction?: Function;
-  myLoginInfoAction?: Function;
-  logoutUrl?: string;
-  switchTenantUrl?: string;
-  defaultOpenKeys?: string[];
-  isHideHeader?: boolean; //是否隐藏header
+    residueNum: string
+    currencyCode: string
+  }
+  myWalletInfoAction?: Function
+  myLoginInfoAction?: Function
+  logoutUrl?: string
+  switchTenantUrl?: string
+  defaultOpenKeys?: string[]
+  isHideHeader?: boolean //是否隐藏header
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
@@ -52,33 +52,67 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     myWalletInfoAction,
     myLoginInfoAction,
     isHideHeader,
-  } = props;
-
-  const { user, logo, subLogo } = (window as any)?.g_config;
-  const { name, avatar } = user || {};
-
-  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
-
-  const [collapsed, setCollapsed] = useState(
-    localStorage.getItem("layout_collapsed") === "true"
-  );
+  } = props
+
+  const { user, logo, subLogo } = (window as any)?.g_config
+  const { name, avatar } = user || {}
+
+  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
+
+  //处理搜索菜单后自动展开目录
+  interface TreeNode {
+    key: string
+    children?: TreeNode[]
+  }
+  const findParentMenu = (menuList: any[], pathname: string) => {
+    const result: TreeNode[] = []
+
+    const findNode = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+      for (const node of nodes) {
+        if (node.key === pathname) {
+          result.push(...path)
+          return true
+        }
+        if (node.children && findNode(node.children, [...path, node])) {
+          return true
+        }
+      }
+      return false
+    }
+
+    findNode(menuList, [])
+    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))
+  }, [location.pathname])
+
+
+  const [collapsed, setCollapsed] = useState(localStorage.getItem('layout_collapsed') === 'true')
   const [isCopied, setIsCopied] = useState({
-    account:false,
-    id:false,
-    tenantName:false,
-    tenantId:false
-  });
+    account: false,
+    id: false,
+    tenantName: false,
+    tenantId: false,
+  })
 
-  const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
-    setOpenKeys(keys);
-  };
+  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+    setOpenKeys(keys)
+  }
 
-  const copyTextToClipboard = async (text:string,key:string) => {
+  const copyTextToClipboard = async (text: string, key: string) => {
     try {
-      await navigator.clipboard.writeText(text);
-      setIsCopied({...isCopied,[key]:true});
+      await navigator.clipboard.writeText(text)
+      setIsCopied({ ...isCopied, [key]: true })
     } catch (err) {}
-  };
+  }
 
   return (
     <Layout className="layout-warp">
@@ -86,35 +120,28 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         <Sider
           className="layout-side"
           style={{
-            backgroundSize: collapsed ? "1800%" : "900%",
+            backgroundSize: collapsed ? '1800%' : '900%',
           }}
           collapsible
           collapsed={collapsed}
           width={240}
           onCollapse={(value) => {
-            localStorage.setItem("layout_collapsed", value.toString());
-            setCollapsed(value);
+            localStorage.setItem('layout_collapsed', value.toString())
+            setCollapsed(value)
           }}
         >
-          <div className="layout-logo" onClick={()=>{
-            window.open('/home')
-          }}>
-            {
-              <img
-                className={`logo-img ${
-                  !collapsed ? "current-logo" : "hide-logo"
-                }`}
-                src={logo || ""}
-              />
-            }
+          <div
+            className="layout-logo"
+            onClick={() => {
+              window.open('/home')
+            }}
+          >
+            {<img className={`logo-img ${!collapsed ? 'current-logo' : 'hide-logo'}`} src={logo || ''} />}
             {
               <img
                 className={`logo-img  sub-logo
-                 ${collapsed ? "current-logo" : "hide-sub-logo"}`}
-                src={
-                  subLogo ||
-                  "https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-white.png"
-                }
+                 ${collapsed ? 'current-logo' : 'hide-sub-logo'}`}
+                src={subLogo || 'https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-white.png'}
               />
             }
           </div>
@@ -126,7 +153,7 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               onOpenChange={onOpenChange}
               items={menuList}
               onClick={(item): any => {
-                onMenuClick && onMenuClick(item);
+                onMenuClick && onMenuClick(item)
               }}
               selectedKeys={selectedKeys}
               theme="dark"
@@ -153,34 +180,26 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   <div className="actions-item" key={index}>
                     {item}
                   </div>
-                );
+                )
               })}
             </div>
 
             <Popover
               placement="bottom"
               content={
-                <UserCard
-                  myWalletInfo={myWalletInfo}
-                  MyLoginInfo={MyLoginInfo}
-                  amountInfo={amountInfo}
-                  customAction={customAction}
-                  isCopied={isCopied}
-                  copyTextToClipboard={copyTextToClipboard}
-                />
+                <UserCard myWalletInfo={myWalletInfo} MyLoginInfo={MyLoginInfo} amountInfo={amountInfo} customAction={customAction} isCopied={isCopied} copyTextToClipboard={copyTextToClipboard} />
               }
               arrow={false}
               trigger="click"
               onOpenChange={(e) => {
-                if (!e) return;
+                if (!e) return
                 setIsCopied({
-                  account:false,
-                  id:false,
-                  tenantName:false,
-                  tenantId:false
-                });
-                myLoginInfoAction && myLoginInfoAction();
-                
+                  account: false,
+                  id: false,
+                  tenantName: false,
+                  tenantId: false,
+                })
+                myLoginInfoAction && myLoginInfoAction()
               }}
             >
               <div className="layout-header-user">
@@ -193,5 +212,5 @@ export default function LiosLayout(props: LiosLayoutlProps) {
         <div className="layout-content">{props.children}</div>
       </div>
     </Layout>
-  );
+  )
 }