cfel-base-components 2.4.3 → 2.5.0

package/src/components/layout/index.tsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Layout, Menu, MenuProps, Popover } from "antd";
-import { SwapOutlined, FormOutlined } from "@ant-design/icons";
+import UserCard from "./user-card";
 import "./index.scss";
 
-const currencyList = [
-  { value: "JPY", label: "日元", icon: "￥" },
-  { value: "USD", label: "美元", icon: "$" },
-  { value: "CNY", label: "人民币", icon: "￥" },
-];
+const { Sider } = Layout;
+
 export interface LiosLayoutlProps {
   appName?: any;
   productCode: string;
@@ -16,19 +13,6 @@ export interface LiosLayoutlProps {
   onMenuClick: (item: any) => void;
   selectedKeys: string[];
   actions?: any[];
-  user?: {
-    name: string;
-    avatar: string;
-    tenantName: string;
-    role: any[];
-  };
-  custom?: {
-    type: string;
-    isCompleted: number;
-    isAudited: number;
-    hrefUrl: string;
-    historyAction?: any;
-  };
   myWalletInfo?: {
     availableCashAmount: string;
     availableAmount: string;
@@ -42,8 +26,6 @@ export interface LiosLayoutlProps {
   logoutUrl?: string;
   switchTenantUrl?: string;
   defaultOpenKeys?: string[];
-  productList?: any;
-  logoUrl?: string;
   isHideHeader?: boolean; //是否隐藏header
 }
 
@@ -51,295 +33,124 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const {
     appName,
     productCode,
-    logoUrl,
     menuList,
     onMenuClick,
     selectedKeys,
     actions,
-    user,
-    custom,
-    logoutUrl,
-    switchTenantUrl,
+
     defaultOpenKeys,
-    productList,
     myWalletInfo,
     amountInfo,
     myWalletInfoAction,
     isHideHeader,
   } = props;
 
-  const { name, avatar, tenantName, role } = user || {};
-  const { isCompleted, isAudited, hrefUrl, historyAction } = custom || {};
-
-  const { availableCashAmount, availableAmount, currency } = myWalletInfo || {};
-
-  const { residueNum, currencyCode } = amountInfo || {};
+  const { user, logo, subLogo } = (window as any)?.g_config;
+  const { name, avatar } = user || {};
 
   const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || []);
-  // const [currentProduct, setCurrentProduct] = useState<any>({});
-
-  const { Sider } = Layout;
-
-  const [collapsed, setCollapsed] = useState(false);
 
-  // useEffect(() => {
-  //   if (!productList) return
-  //   let cp = productList?.filter((i: any) => i.productCode == productCode)[0]
-  //   setCurrentProduct(cp)
-  // }, [productList])
+  const [collapsed, setCollapsed] = useState(
+    localStorage.getItem("layout_collapsed") === "true"
+  );
 
   const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
     setOpenKeys(keys);
   };
-  const editUserInfo = () => {
-    const { origin } = window.location;
-    if (historyAction) {
-      historyAction?.push({
-        pathname: hrefUrl,
-      });
-    } else {
-      window.location.href = origin + hrefUrl;
-    }
-  };
-  const currencyText = (currencyText: any) => {
-    let text = "";
-    currencyList.some((item: any) => {
-      if (item.value == currencyText) {
-        text = item.icon;
-        return true;
-      }
-    });
-    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>
-              ))}
-            </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 || "加载中..."}
-              </div>
-            </div>
-            <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>
-        )}
-        {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 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 />
-                </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>
-    );
-  };
-
-  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" : ""
-              }`}
-            >
+  return (
+    <Layout className="layout-warp">
+      {Array.isArray(menuList) && menuList.length > 0 && (
+        <Sider
+          className="layout-side"
+          style={{
+            backgroundSize: collapsed ? "1600%" : "800%",
+          }}
+          collapsible
+          collapsed={collapsed}
+          width={240}
+          onCollapse={(value) =>{
+            localStorage.setItem("layout_collapsed", value.toString());
+            setCollapsed(value)
+          }}
+        >
+          <div className="layout-logo">
+            {
               <img
+                className={`logo-img ${
+                  !collapsed ? "current-logo" : "hide-logo"
+                }`}
+                src={logo || ""}
+              />
+            }
+            {
+              <img
+                className={`logo-img  sub-logo
+                 ${collapsed ? "current-logo" : "hide-sub-logo"}`}
                 src={
-                  item?.logoUrl ||
-                  "https://pic.imgdb.cn/item/64c760291ddac507cc68440a.png"
+                  subLogo ||
+                  "https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-white.png"
                 }
-                alt=""
               />
-              <div> {item?.productName}</div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const MenuStyle = {
-    width: collapsed ? 80 : 240,
-  };
-
-  return (
-    <Layout className="layout-warp">
-      {!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 && appName && <div className="interval" />}
-            {appName && <div className="app-name">{appName}</div>}
-          </strong>
-
-          <div className="layout-header-fill" />
-
-          <div className="layout-header-actions">
-            {actions?.map((item, index) => {
-              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();
-            }}
-          >
-            <div className="layout-header-user">
-              <img className="author" src={avatar} />
-              <div className="name">{name}</div>
-            </div>
-          </Popover>
-        </div>
-      )}
-      <div className="layout-main">
-        {Array.isArray(menuList) && menuList.length > 0 && (
-          <Sider
-            className="layout-side"
-            theme={"light"}
-            collapsible
-            collapsed={collapsed}
-            width={240}
-            onCollapse={(value) => setCollapsed(value)}
-          >
+          <div className="layout-menu-container">
             <Menu
               mode="inline"
               openKeys={openKeys}
               onOpenChange={onOpenChange}
               items={menuList}
-              style={MenuStyle}
               onClick={(item): any => {
                 onMenuClick && onMenuClick(item);
               }}
               selectedKeys={selectedKeys}
+              theme="dark"
+              color="red"
             />
-          </Sider>
+          </div>
+        </Sider>
+      )}
+
+      <div className="layout-main">
+        {!isHideHeader && (
+          <div className="layout-header">
+            {appName && (
+              <div className="app-name">
+                <strong>{appName}</strong>
+              </div>
+            )}
+
+            <div className="layout-header-fill" />
+
+            <div className="layout-header-actions">
+              {actions?.map((item, index) => {
+                return (
+                  <div className="actions-item" key={index}>
+                    {item}
+                  </div>
+                );
+              })}
+            </div>
+
+            <Popover
+              placement="bottom"
+              content={
+                <UserCard myWalletInfo={myWalletInfo} amountInfo={amountInfo} />
+              }
+              arrow={false}
+              trigger="click"
+              onOpenChange={(e) => {
+                if (!e) return;
+                myWalletInfoAction && myWalletInfoAction();
+              }}
+            >
+              <div className="layout-header-user">
+                <img className="avatar" src={avatar} />
+                <div className="name">{name}</div>
+              </div>
+            </Popover>
+          </div>
         )}
         <div className="layout-content">{props.children}</div>
       </div>

package/src/components/layout/user-card/index.scss

@@ -0,0 +1,144 @@
+//用户卡片
+.layout-user-card {
+  min-width: 182px;
+  max-width: 262px;
+
+  .user-info {
+    display: flex;
+
+    .user-avatar {
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      margin-right: 12px;
+    }
+
+    .user-info-right {
+      flex: 1;
+    }
+
+    .name {
+      display: inline-block;
+      margin-top: 18px;
+    }
+
+    .role-list {
+      font-size: 12px;
+      line-height: 16px;
+      margin-top: 4px;
+
+      .role-item {
+        background: rgba(204, 204, 204, 0.55);
+        padding: 2px 8px;
+        border-radius: 8px;
+        display: inline-block;
+        margin-right: 4px;
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  .lios-tenant {
+    padding: 5px 0px;
+    margin: 5px 0px;
+    border-top: 1px solid rgba(5, 5, 5, 0.06);
+
+    .tenant-label {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    .tenant-switch {
+      display: flex;
+
+      .tenant-value {
+        flex: 1;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+      }
+
+      .tenant-icon {
+        width: 40px;
+        text-align: center;
+        color: rgba(0, 0, 0, 0.45);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .tenant-icon:hover {
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+  }
+
+  .lios-userInfo {
+    padding: 5px 0px;
+    margin: 5px 0px;
+    border-top: 1px solid rgba(5, 5, 5, 0.06);
+
+    .li-flex {
+      display: flex;
+
+      .lios-value {
+        flex: 1;
+      }
+    }
+
+    .lios-li {
+      line-height: 22px;
+
+      .lios-key {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        display: inline-block;
+      }
+
+      .lios-value {
+        padding-left: 8px;
+        display: inline-block;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.85);
+
+        span {
+          padding-left: 5px;
+        }
+      }
+
+      .lios-icon {
+        width: 40px;
+        text-align: center;
+        color: rgba(0, 0, 0, 0.45);
+        transition: all 0.3s;
+      }
+
+      .lios-icon:hover {
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+  }
+
+  .lios-logout {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.45);
+    border-radius: 4px;
+    transition: background 0.3s;
+    padding: 4px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.08);
+    }
+
+    .logout-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}