cfel-base-components 2.5.10 → 2.5.11

package/demo/src/index.html

@@ -23,13 +23,14 @@
                 shortName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
             },
             user: {
-                id: 1676424765496406018,
+                id: "1676424765496406018",
                 userId: "01436565094521893533",
                 unionId: "xsU4QrgEfZxxj8YxEWAYJAiEiE",
                 name: "\u5434\u5434\u5434\u5434",
-                avatar: "https://static-legacy.dingtalk.com/media/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
+                avatar: "https://cfel-front.oss-cn-hangzhou.aliyuncs.com/logo/puhui-home/userLogo.jpeg",
                 account: "15957797376",
-                roleInfo: []
+                roleInfo: ["\u8D85\u7EA7\u7BA1\u7406\u5458"],
+                isMaster: false
             },
             custom: {
                 id: 1727864976691109890,

package/package.json

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

package/src/components/layout/index.tsx

@@ -56,16 +56,21 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const [collapsed, setCollapsed] = useState(
     localStorage.getItem("layout_collapsed") === "true"
   );
-  const [isCopied, setIsCopied] = useState(false);
+  const [isCopied, setIsCopied] = useState({
+    account:false,
+    id:false,
+    tenantName:false,
+    tenantId:false
+  });
 
   const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
     setOpenKeys(keys);
   };
 
-  const copyTextToClipboard = async (text:string) => {
+  const copyTextToClipboard = async (text:string,key:string) => {
     try {
       await navigator.clipboard.writeText(text);
-      setIsCopied(true);
+      setIsCopied({...isCopied,[key]:true});
     } catch (err) {}
   };
 
@@ -159,7 +164,12 @@ export default function LiosLayout(props: LiosLayoutlProps) {
               trigger="click"
               onOpenChange={(e) => {
                 if (!e) return;
-                setIsCopied(false);
+                setIsCopied({
+                  account:false,
+                  id:false,
+                  tenantName:false,
+                  tenantId:false
+                });
                 myWalletInfoAction && myWalletInfoAction();
               }}
             >

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

@@ -6,12 +6,30 @@
   .user-info {
     display: flex;
 
-    .user-avatar {
+    .user-avatarBox{
       width: 72px;
       height: 72px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.3);
       margin-right: 12px;
+      position: relative;
+      .user-avatar {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.3);
+      }
+      .user-mater{
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        text-align: center;
+        background-color: rgba(62, 119, 189 ,0.9);
+        width: 50px;
+        border-radius: 50px;
+        color: #fff;
+        transform: scale(0.9);
+        margin: auto;
+      }
     }
 
     .user-info-right {
@@ -82,7 +100,7 @@
     .li-flex {
       display: flex;
       .lios-keyMare {
-        width: 40px;
+        width: 50px;
       }
       .lios-value {
         flex: 1;
@@ -133,6 +151,8 @@
       }
     }
   }
+  .lios-logoutBox{
+    display: flex;
 
   .lios-logout {
     cursor: pointer;
@@ -140,18 +160,21 @@
     justify-content: center;
     align-items: center;
     color: rgba(0, 0, 0, 0.45);
-    border-radius: 4px;
+    border-radius: 2px;
     transition: background 0.3s;
     padding: 4px;
-
+    flex: 1;
+    border: 1px solid rgba(5, 5, 5, 0.06);
+    margin: 4px 4px;
     &:hover {
-      background: rgba(0, 0, 0, 0.08);
+      background: rgba(0, 0, 0, 0.03);
     }
 
     .logout-icon {
       width: 16px;
       height: 16px;
-      margin-right: 8px;
+      margin-right: 3px;
     }
   }
+  }
 }

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

@@ -1,5 +1,10 @@
 import React from "react";
-import { SwapOutlined, FormOutlined,CopyOutlined } from "@ant-design/icons";
+import {
+  SwapOutlined,
+  FormOutlined,
+  CopyOutlined,
+  LogoutOutlined,
+} from "@ant-design/icons";
 import "./index.scss";
 
 interface UserType {
@@ -8,6 +13,7 @@ interface UserType {
   roleInfo: any[];
   id: string;
   account: string;
+  isMaster: boolean;
 }
 interface CustomType {
   type: string;
@@ -45,11 +51,13 @@ export default function UserCard({
   amountInfo,
   customAction,
   isCopied,
-  copyTextToClipboard
+  copyTextToClipboard,
 }: any) {
-  const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)?.g_config;
+  const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)
+    ?.g_config;
 
-  const { name, avatar, roleInfo , id , account }: UserType = user || {};
+  const { name, avatar, roleInfo, id, account, isMaster }: UserType =
+    user || {};
 
   const { isCompleted, isAudited }: CustomType = custom || {};
 
@@ -61,7 +69,10 @@ export default function UserCard({
     return (
       <div className="layout-user-card">
         <div className="user-info">
-          <img className="user-avatar" src={avatar} />
+          <div className="user-avatarBox">
+            <img className="user-avatar" src={avatar} />
+            <div className="user-mater">{isMaster ? "主账号" : "子账号"}</div>
+          </div>
           <div className="user-info-right">
             <span className="name">{name}</span>
             <div className="role-list">
@@ -73,29 +84,61 @@ export default function UserCard({
             </div>
           </div>
         </div>
-          <div className="lios-userInfo">
-            <div className="lios-li  li-flex">
-              <div className="lios-keyMare">账号</div>
-              <div className="lios-valueMare" title={account}>{account}</div>
-              <div
-                className={
-                  isCopied ? 'lios-iconDone' : 'lios-icon'
-                }
-                onClick={() => {
-                  copyTextToClipboard(account)
-                }}>
-                {
-                  isCopied ? '已复制' : <CopyOutlined />
-                }
-              </div>
+        <div className="lios-userInfo">
+          <div className="lios-li  li-flex">
+            <div className="lios-keyMare">账号</div>
+            <div className="lios-valueMare" title={account}>
+              {account}
             </div>
-            <div className="lios-li li-flex">
-              <div className="lios-keyMare">账号ID</div>
-              <div className="lios-value">{id}
-              </div>
+            <div
+              className={isCopied?.['account'] ? "lios-iconDone" : "lios-icon"}
+              onClick={() => {
+                copyTextToClipboard(account,'account');
+              }}
+            >
+              {isCopied?.['account'] ? "已复制" : <CopyOutlined />}
             </div>
           </div>
-        {myWalletInfo && (
+          <div className="lios-li li-flex">
+            <div className="lios-keyMare">账号ID</div>
+            <div className="lios-valueMare"  title={id}>{id}</div>
+            <div
+              className={isCopied?.['id'] ? "lios-iconDone" : "lios-icon"}
+              onClick={() => {
+                copyTextToClipboard(id,'id');
+              }}
+            >
+              {isCopied?.['id'] ? "已复制" : <CopyOutlined />}
+            </div>
+          </div>
+          <div className="lios-li li-flex">
+            <div className="lios-keyMare">租户名称</div>
+            <div className="lios-valueMare"  title={tenant?.name}>{tenant?.name}</div>
+            <div
+              className={"lios-icon"}
+              onClick={() => {
+                customAction && customAction();
+              }}
+            >
+              <FormOutlined />
+            </div>
+          </div>
+          <div className="lios-li li-flex">
+            <div className="lios-keyMare">租户ID</div>
+            <div className="lios-valueMare"  title={tenant?.id}>{tenant?.id}</div>
+            <div
+              className={isCopied?.['tenantId'] ? "lios-iconDone" : "lios-icon"}
+              onClick={() => {
+                copyTextToClipboard(tenant?.id,'tenantId');
+              }}
+            >
+              {isCopied?.['tenantId'] ? "已复制" : <CopyOutlined />}
+            </div>
+          </div>
+        </div>
+        
+        {/* myWalletInfo */}
+        { true && (
           <div className="lios-userInfo">
             <div className="lios-li">
               <div className="lios-key">现金余额</div>
@@ -122,81 +165,26 @@ export default function UserCard({
             )}
           </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={() => {
-                  customAction && customAction();
-                }}
-              >
-                <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>
-        )}
-
-        {tenant?.name && (
-          <div className="lios-tenant">
-            <div className="tenant-label">租户</div>
-            <div className="tenant-switch">
-              <div className="tenant-value">{tenant?.name}</div>
-              {switchTenantUrl && (
-                <div
-                  className="tenant-icon"
-                  onClick={() => {
-                    location.href = switchTenantUrl;
-                  }}
-                >
-                  <SwapOutlined />
-                </div>
-              )}
-            </div>
+        <div className="lios-logoutBox">
+          <div
+            className="lios-logout"
+            onClick={() => {
+              location.href = switchTenantUrl;
+            }}
+          >
+            <SwapOutlined className="logout-icon" />
+            切换租户
           </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>
+            <LogoutOutlined className="logout-icon" />
             退出登录
           </div>
-        )}
+        </div>
       </div>
     );
   };