cfel-base-components 2.4.0 → 2.4.2

package/package.json

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

package/src/components/layout/index.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
-import { Layout, Menu, MenuProps, Popover } from 'antd';
-import { SwapOutlined, FormOutlined } from '@ant-design/icons';
-import "./index.scss"
+import React, { useEffect, useState } from "react";
+import { Layout, Menu, MenuProps, Popover } from "antd";
+import { SwapOutlined, FormOutlined } from "@ant-design/icons";
+import "./index.scss";
 
 const currencyList = [
-  { value: 'JPY', label: '日元', icon: '￥' },
-  { value: 'USD', label: '美元', icon: "$" },
-  { value: 'CNY', label: '人民币', icon: '￥' }
-]
+  { value: "JPY", label: "日元", icon: "￥" },
+  { value: "USD", label: "美元", icon: "$" },
+  { value: "CNY", label: "人民币", icon: "￥" },
+];
 export interface LiosLayoutlProps {
   appName?: any;
   productCode: string;
@@ -17,34 +17,34 @@ export interface LiosLayoutlProps {
   selectedKeys: string[];
   actions?: any[];
   user?: {
-    name: string,
-    avatar: string,
-    tenantName: string,
-    role: any[]
+    name: string;
+    avatar: string;
+    tenantName: string;
+    role: any[];
   };
   custom?: {
-    type: string,
-    isCompleted: number,
-    isAudited: number,
-    hrefUrl: string,
+    type: string;
+    isCompleted: number;
+    isAudited: number;
+    hrefUrl: string;
     historyAction?: any;
-  }
+  };
   myWalletInfo?: {
-    availableCashAmount: string,
-    availableAmount: string,
-    currency: string
-  }
+    availableCashAmount: string;
+    availableAmount: string;
+    currency: string;
+  };
   amountInfo?: {
-    residueNum: string,
-    currencyCode: string
-  }
-  myWalletInfoAction?: Function,
-  logoutUrl?: string,
-  switchTenantUrl?: string,
-  defaultOpenKeys?: string[],
-  productList?: any,
-  logoUrl?: string,
-  isHideHeader?: boolean //是否隐藏header
+    residueNum: string;
+    currencyCode: string;
+  };
+  myWalletInfoAction?: Function;
+  logoutUrl?: string;
+  switchTenantUrl?: string;
+  defaultOpenKeys?: string[];
+  productList?: any;
+  logoUrl?: string;
+  isHideHeader?: boolean; //是否隐藏header
 }
 
 export default function LiosLayout(props: LiosLayoutlProps) {
@@ -65,32 +65,15 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     myWalletInfo,
     amountInfo,
     myWalletInfoAction,
-    isHideHeader
-  } = props
+    isHideHeader,
+  } = props;
 
-  const {
-    name,
-    avatar,
-    tenantName,
-    role,
-  } = user || {}
-  const {
-    isCompleted,
-    isAudited,
-    hrefUrl,
-    historyAction
-  } = custom || {}
+  const { name, avatar, tenantName, role } = user || {};
+  const { isCompleted, isAudited, hrefUrl, historyAction } = custom || {};
 
-  const {
-    availableCashAmount,
-    availableAmount,
-    currency
-  } = myWalletInfo || {}
+  const { availableCashAmount, availableAmount, currency } = myWalletInfo || {};
 
-  const {
-    residueNum,
-    currencyCode
-  } = amountInfo || {}
+  const { residueNum, currencyCode } = amountInfo || {};
 
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
   // const [currentProduct, setCurrentProduct] = useState<any>({});
@@ -99,219 +82,267 @@ export default function LiosLayout(props: LiosLayoutlProps) {
 
   const [collapsed, setCollapsed] = useState(false);
 
-
   // useEffect(() => {
   //   if (!productList) return
   //   let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
   //   setCurrentProduct(cp)
   // }, [productList])
 
-  const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
+  const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
     setOpenKeys(keys);
   };
   const editUserInfo = () => {
-    const { origin } = window.location
+    const { origin } = window.location;
     if (historyAction) {
       historyAction?.push({
-        pathname: hrefUrl
+        pathname: hrefUrl,
       });
     } else {
-      window.location.href = origin + hrefUrl
+      window.location.href = origin + hrefUrl;
     }
-
-  }
+  };
   const currencyText = (currencyText: any) => {
-    let text = ''
+    let text = "";
     currencyList.some((item: any) => {
       if (item.value == currencyText) {
-        text = item.icon
-        return true
+        text = item.icon;
+        return true;
       }
-    })
-    return text
-  }
+    });
+    return text;
+  };
 
   const UserCard = () => {
-    return <div className='user-card'>
-      <div className='user-info'>
-        <img
-
-          className="author"
-          src={avatar}
-        />
-        <div className='user-info-right'>
-          <span className='name'>{name}</span>
-          <div className='role-list'>
-            {role?.map((i) => <span className='role-item' key={i}>
-              {i}
-            </span>)}
+    return (
+      <div className="user-card">
+        <div className="user-info">
+          <img className="author" src={avatar} />
+          <div className="user-info-right">
+            <span className="name">{name}</span>
+            <div className="role-list">
+              {role?.map((i) => (
+                <span className="role-item" key={i}>
+                  {i}
+                </span>
+              ))}
+            </div>
           </div>
         </div>
-      </div>
 
-      {
-        myWalletInfo && <div className='lios-userInfo'>
-          <div className='lios-li'>
-            <div className='lios-key'>现金余额</div>
-            <div className='lios-value'>
-              <span>{currencyText(currency)}</span>
-              {availableCashAmount || '加载中...'}
+        {myWalletInfo && (
+          <div className="lios-userInfo">
+            <div className="lios-li">
+              <div className="lios-key">现金余额</div>
+              <div className="lios-value">
+                <span>{currencyText(currency)}</span>
+                {availableCashAmount || "加载中..."}
+              </div>
             </div>
-          </div>
-          <div className='lios-li'>
-            <div className='lios-key'>可用额度</div>
-            <div className='lios-value'><span>{currencyText(currency)}</span>
-              {availableAmount || '加载中...'}
+            <div className="lios-li">
+              <div className="lios-key">可用额度</div>
+              <div className="lios-value">
+                <span>{currencyText(currency)}</span>
+                {availableAmount || "加载中..."}
+              </div>
             </div>
+            {amountInfo && (
+              <div className="lios-li">
+                <div className="lios-key">抵用金余额</div>
+                <div className="lios-value">
+                  <span>{currencyText(currencyCode)}</span>
+                  {residueNum || "加载中..."}
+                </div>
+              </div>
+            )}
           </div>
-          {
-            amountInfo &&
-            <div className='lios-li'>
-              <div className='lios-key'>抵用金余额</div>
-              <div className='lios-value'><span>{currencyText(currencyCode)}</span>
-                {residueNum || '加载中...'}
+        )}
+        {custom && (
+          <div className="lios-userInfo">
+            <div className="lios-li li-flex">
+              <div className="lios-key">客户类型</div>
+              <div className="lios-value">{custom.type || ""}</div>
+              <div
+                className="lios-icon"
+                onClick={() => {
+                  editUserInfo();
+                }}
+              >
+                <FormOutlined />
               </div>
             </div>
-          }
-
-        </div>
-      }
-      {
-        custom && <div className='lios-userInfo'>
-          <div className='lios-li li-flex'>
-            <div className='lios-key'>客户类型</div>
-            <div className='lios-value'>{custom.type || ''}</div>
-            <div className='lios-icon' onClick={(() => { editUserInfo() })}>
-              <FormOutlined />
+            <div className="lios-li">
+              <div className="lios-key">是否审核</div>
+              <div className="lios-value">{isAudited ? "是" : "否"}</div>
+            </div>
+            <div className="lios-li">
+              <div className="lios-key">是否资料完备</div>
+              <div className="lios-value">{isCompleted ? "是" : "否"}</div>
             </div>
           </div>
-          <div className='lios-li'>
-            <div className='lios-key'>是否审核</div>
-            <div className='lios-value'>{isAudited ? '是' : '否'}</div>
-          </div>
-          <div className='lios-li'>
-            <div className='lios-key'>是否资料完备</div>
-            <div className='lios-value'>{isCompleted ? '是' : '否'}</div>
-          </div>
-        </div>
-      }
+        )}
 
-      {tenantName && <div className='lios-tenant'>
-        <div className='tenant-label'>租户</div>
-        <div className='tenant-switch'>
-          <div className='tenant-value'>{tenantName}</div>
-          {
-            switchTenantUrl && <div className='tenant-icon' onClick={() => {
-              location.href = switchTenantUrl;
-            }}>
-              <SwapOutlined />
+        {tenantName && (
+          <div className="lios-tenant">
+            <div className="tenant-label">租户</div>
+            <div className="tenant-switch">
+              <div className="tenant-value">{tenantName}</div>
+              {switchTenantUrl && (
+                <div
+                  className="tenant-icon"
+                  onClick={() => {
+                    location.href = switchTenantUrl;
+                  }}
+                >
+                  <SwapOutlined />
+                </div>
+              )}
             </div>
-          }
-        </div>
-      </div>}
+          </div>
+        )}
 
-      {logoutUrl && <div className='lios-logout' onClick={() => {
-        location.href = logoutUrl;
-      }}>
-        <svg className='logout-icon' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5022" width="16" height="16"><path d="M295.589 239.512c17.942-12.888 42.935-8.79 55.823 9.153 12.888 17.942 8.79 42.935-9.153 55.823C266.667 358.783 221 445.786 221 540.488 221 700.92 351.272 831 512 831s291-130.08 291-290.512c0-94.663-45.63-181.634-121.17-235.935-17.937-12.895-22.026-37.89-9.131-55.827 12.894-17.938 37.889-22.026 55.827-9.132C824.752 308.766 883 419.788 883 540.488 883 745.13 716.884 911 512 911S141 745.13 141 540.488c0-120.75 58.297-231.812 154.589-300.976z" fill="currentColor" p-id="5023"></path><path d="M512 113c21.87 0 39.641 17.552 39.995 39.339L552 153v297c0 22.091-17.909 40-40 40-21.87 0-39.641-17.552-39.995-39.339L472 450V153c0-22.091 17.909-40 40-40z" fill="currentColor" p-id="5024"></path></svg>
-        退出登录
-      </div>}
-    </div >
-  }
+        {logoutUrl && (
+          <div
+            className="lios-logout"
+            onClick={() => {
+              location.href = logoutUrl;
+            }}
+          >
+            <svg
+              className="logout-icon"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="5022"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M295.589 239.512c17.942-12.888 42.935-8.79 55.823 9.153 12.888 17.942 8.79 42.935-9.153 55.823C266.667 358.783 221 445.786 221 540.488 221 700.92 351.272 831 512 831s291-130.08 291-290.512c0-94.663-45.63-181.634-121.17-235.935-17.937-12.895-22.026-37.89-9.131-55.827 12.894-17.938 37.889-22.026 55.827-9.132C824.752 308.766 883 419.788 883 540.488 883 745.13 716.884 911 512 911S141 745.13 141 540.488c0-120.75 58.297-231.812 154.589-300.976z"
+                fill="currentColor"
+                p-id="5023"
+              ></path>
+              <path
+                d="M512 113c21.87 0 39.641 17.552 39.995 39.339L552 153v297c0 22.091-17.909 40-40 40-21.87 0-39.641-17.552-39.995-39.339L472 450V153c0-22.091 17.909-40 40-40z"
+                fill="currentColor"
+                p-id="5024"
+              ></path>
+            </svg>
+            退出登录
+          </div>
+        )}
+      </div>
+    );
+  };
 
   const ProductListFunc = () => {
-    return <div className='app-list-other'>
-      {productList?.map((item) => {
-        return <div
-          onClick={() => {
-            item.productCode != productCode && item?.portalUrl && window.open(item?.portalUrl)
-          }}
-          key={item.id}
-          className={`product-list-item ${item.productCode == productCode ? "current-product" : ""}`}
-        >
-          <img src={item?.logoUrl || "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"} alt="" />
-          <div> {item?.productName}</div>
-        </div>
-      })}
-    </div>
-  }
+    return (
+      <div className="app-list-other">
+        {productList?.map((item) => {
+          return (
+            <div
+              onClick={() => {
+                item.productCode != productCode &&
+                  item?.portalUrl &&
+                  window.open(item?.portalUrl);
+              }}
+              key={item.id}
+              className={`product-list-item ${
+                item.productCode == productCode ? "current-product" : ""
+              }`}
+            >
+              <img
+                src={
+                  item?.logoUrl ||
+                  "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"
+                }
+                alt=""
+              />
+              <div> {item?.productName}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
 
   const MenuStyle = {
-    width: collapsed ? 80 : 240
-  }
+    width: collapsed ? 80 : 240,
+  };
 
   return (
     <Layout className="layout-warp">
-      {
-        !isHideHeader &&
+      {!isHideHeader && (
         <div className="layout-header">
-
+          
+          <div className="background">
+            <img
+              className="background-img"
+              src="https://pic.imgdb.cn/item/64813de01ddac507cc192a6e.jpg"
+              alt=""
+            />
+            <div className="background-mask" />
+          </div>
 
           <strong className="layout-header-logo">
-            {logoUrl && <img className="logo-img" src={logoUrl || ''} />}
+            {logoUrl && <img className="logo-img" src={logoUrl || ""} />}
             {logoUrl && appName && <div className="interval" />}
-            {appName && <div className="app-name">
-              {appName}
-            </div>}
+            {appName && <div className="app-name">{appName}</div>}
           </strong>
 
-          <div className='layout-header-fill' />
+          <div className="layout-header-fill" />
 
-          <div className='layout-header-actions'>
+          <div className="layout-header-actions">
             {actions?.map((item, index) => {
-              return <div className='actions-item' key={index}>
-                {item}
-              </div>
+              return (
+                <div className="actions-item" key={index}>
+                  {item}
+                </div>
+              );
             })}
           </div>
 
-          <Popover placement="bottom" content={<UserCard />} arrow={false} trigger="click"
-            onOpenChange={((e) => {
-              if (!e) return
-              myWalletInfoAction && myWalletInfoAction()
-            })}>
+          <Popover
+            placement="bottom"
+            content={<UserCard />}
+            arrow={false}
+            trigger="click"
+            onOpenChange={(e) => {
+              if (!e) return;
+              myWalletInfoAction && myWalletInfoAction();
+            }}
+          >
             <div className="layout-header-user">
-              <img
-                className="author"
-                src={avatar}
-              />
-              <div className="name">
-                {name}
-              </div>
+              <img className="author" src={avatar} />
+              <div className="name">{name}</div>
             </div>
           </Popover>
         </div>
-      }
+      )}
       <div className="layout-main">
-        {
-          Array.isArray(menuList) &&
-          menuList.length > 0 &&
+        {Array.isArray(menuList) && menuList.length > 0 && (
           <Sider
             className="layout-side"
             theme={"light"}
             collapsible
             collapsed={collapsed}
             width={240}
-            onCollapse={(value) => setCollapsed(value)}>
-
+            onCollapse={(value) => setCollapsed(value)}
+          >
             <Menu
               mode="inline"
-              theme="dark"
               openKeys={openKeys}
               onOpenChange={onOpenChange}
               items={menuList}
               style={MenuStyle}
               onClick={(item): any => {
-                onMenuClick && onMenuClick(item)
+                onMenuClick && onMenuClick(item);
               }}
               selectedKeys={selectedKeys}
             />
           </Sider>
-        }
-        <div className="layout-content">
-          {props.children}
-        </div>
+        )}
+        <div className="layout-content">{props.children}</div>
       </div>
     </Layout>
-  )
-}
+  );
+}