cfel-base-components 2.5.9 → 2.5.11

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

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.9",
+  "version": "2.5.11",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",

package/src/.umi/core/helmet.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+import React from 'react';
+import { HelmetProvider } from '/Users/wujingang/Desktop/workspace/base-components/node_modules/@umijs/renderer-react';
+import { context } from './helmetContext';
+
+export const innerProvider = (container) => {
+  return React.createElement(HelmetProvider, { context }, container);
+}

package/src/.umi/core/helmetContext.ts

@@ -0,0 +1,4 @@
+// @ts-nocheck
+// This file is generated by Umi automatically
+// DO NOT CHANGE IT MANUALLY!
+export const context = {};

package/src/components/layout/index.tsx

@@ -56,11 +56,24 @@ export default function LiosLayout(props: LiosLayoutlProps) {
   const [collapsed, setCollapsed] = useState(
     localStorage.getItem("layout_collapsed") === "true"
   );
+  const [isCopied, setIsCopied] = useState({
+    account:false,
+    id:false,
+    tenantName:false,
+    tenantId:false
+  });
 
   const onOpenChange: MenuProps["onOpenChange"] = (keys) => {
     setOpenKeys(keys);
   };
 
+  const copyTextToClipboard = async (text:string,key:string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied({...isCopied,[key]:true});
+    } catch (err) {}
+  };
+
   return (
     <Layout className="layout-warp">
       {Array.isArray(menuList) && menuList.length > 0 && (
@@ -143,12 +156,20 @@ export default function LiosLayout(props: LiosLayoutlProps) {
                   myWalletInfo={myWalletInfo}
                   amountInfo={amountInfo}
                   customAction={customAction}
+                  isCopied={isCopied}
+                  copyTextToClipboard={copyTextToClipboard}
                 />
               }
               arrow={false}
               trigger="click"
               onOpenChange={(e) => {
                 if (!e) return;
+                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 {
@@ -81,22 +99,30 @@
 
     .li-flex {
       display: flex;
-
+      .lios-keyMare {
+        width: 50px;
+      }
       .lios-value {
         flex: 1;
       }
+      .lios-valueMare {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
     }
 
     .lios-li {
       line-height: 22px;
 
-      .lios-key {
+      .lios-key, .lios-keyMare  {
         font-size: 12px;
         color: rgba(0, 0, 0, 0.5);
         display: inline-block;
       }
 
-      .lios-value {
+      .lios-value, .lios-valueMare {
         padding-left: 8px;
         display: inline-block;
         font-size: 12px;
@@ -106,7 +132,12 @@
           padding-left: 5px;
         }
       }
-
+      .lios-iconDone {
+        width: 40px;
+        text-align: center;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 10px;
+      }
       .lios-icon {
         width: 40px;
         text-align: center;
@@ -120,6 +151,8 @@
       }
     }
   }
+  .lios-logoutBox{
+    display: flex;
 
   .lios-logout {
     cursor: pointer;
@@ -127,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,11 +1,19 @@
 import React from "react";
-import { SwapOutlined, FormOutlined } from "@ant-design/icons";
+import {
+  SwapOutlined,
+  FormOutlined,
+  CopyOutlined,
+  LogoutOutlined,
+} from "@ant-design/icons";
 import "./index.scss";
 
 interface UserType {
   name: string;
   avatar: string;
   roleInfo: any[];
+  id: string;
+  account: string;
+  isMaster: boolean;
 }
 interface CustomType {
   type: string;
@@ -42,11 +50,14 @@ export default function UserCard({
   myWalletInfo,
   amountInfo,
   customAction,
+  isCopied,
+  copyTextToClipboard,
 }: any) {
   const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)
     ?.g_config;
 
-  const { name, avatar, roleInfo }: UserType = user || {};
+  const { name, avatar, roleInfo, id, account, isMaster }: UserType =
+    user || {};
 
   const { isCompleted, isAudited }: CustomType = custom || {};
 
@@ -58,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">
@@ -70,8 +84,61 @@ export default function UserCard({
             </div>
           </div>
         </div>
-
-        {myWalletInfo && (
+        <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?.['account'] ? "lios-iconDone" : "lios-icon"}
+              onClick={() => {
+                copyTextToClipboard(account,'account');
+              }}
+            >
+              {isCopied?.['account'] ? "已复制" : <CopyOutlined />}
+            </div>
+          </div>
+          <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>
@@ -98,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>
     );
   };

package/src/components/universal-pages/account/index.tsx

@@ -56,7 +56,7 @@ export default function Account({
       ellipsis: true,
     },
     {
-      title: '是否企业管理员',
+      title: '是否主账号',
       dataIndex: 'isAdmin',
       key: 'isAdmin',
       render: (text: any, rowData: any) => {

package/src/components/universal-pages/accountInfo/index.tsx

@@ -193,7 +193,7 @@ export default function AccountInfo() {
         <Descriptions.Item label="名称">{accountInfo?.name || ''}</Descriptions.Item>
         <Descriptions.Item label="手机号">{accountInfo?.mobile || ''}</Descriptions.Item>
         <Descriptions.Item label="邮箱">{accountInfo?.email || ''}</Descriptions.Item>
-        <Descriptions.Item label="是否企业管理员">{accountInfo?.isAdmin ? '是' : '否'}</Descriptions.Item>
+        <Descriptions.Item label="是否主账号">{accountInfo?.isAdmin ? '是' : '否'}</Descriptions.Item>
         <Descriptions.Item label="创建时间">{timeFormatter(accountInfo?.gmtCreate)}</Descriptions.Item>
         <Descriptions.Item label="修改时间">{timeFormatter(accountInfo?.gmtModified)}</Descriptions.Item>
       </Descriptions>