cfel-base-components 2.5.47 → 2.5.49

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

@@ -0,0 +1,180 @@
+//用户卡片
+.layout-user-card {
+  min-width: 182px;
+  max-width: 262px;
+
+  .user-info {
+    display: flex;
+
+    .user-avatarBox{
+      width: 72px;
+      height: 72px;
+      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 {
+      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-keyMare {
+        width: 50px;
+      }
+      .lios-value {
+        flex: 1;
+      }
+      .lios-valueMare {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      
+    }
+
+    .lios-li {
+      line-height: 22px;
+
+      .lios-key, .lios-keyMare  {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+        display: inline-block;
+      }
+
+      .lios-value, .lios-valueMare {
+        padding-left: 8px;
+        display: inline-block;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.85);
+
+        span {
+          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;
+        color: rgba(0, 0, 0, 0.45);
+        transition: all 0.3s;
+      }
+
+      .lios-icon:hover {
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.85);
+      }
+    }
+  }
+  .lios-logoutBox{
+    display: flex;
+
+  .lios-logout {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.45);
+    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.03);
+    }
+
+    .logout-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 3px;
+    }
+  }
+  }
+}

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

@@ -0,0 +1,162 @@
+import React from "react";
+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;
+  isCompleted: number;
+  isAudited: number;
+  hrefUrl: string;
+  historyAction?: any;
+}
+interface MyWalletInfoType {
+  availableCashAmount: string;
+  availableAmount: string;
+  currency: string;
+}
+interface MyLoginInfoType {
+  isAdmin: any;
+}
+interface AmountInfoType {
+  residueNum: string;
+  currencyCode: string;
+}
+
+const renderCurrency = (currency: string) => {
+  switch (currency) {
+    case "CNY":
+      return "¥ ";
+    case "USD":
+      return "$ ";
+    case "JPY":
+      return "JP¥ ";
+    default:
+      return "¥ ";
+  }
+};
+
+export default function UserCard({
+  myWalletInfo,
+  MyLoginInfo,
+  amountInfo,
+  customAction,
+  isCopied,
+  copyTextToClipboard,
+}: any) {
+  const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)
+    ?.g_config;
+
+  const { name, avatar, roleInfo, id, account, isMaster }: UserType =
+    user || {};
+
+  const { isCompleted, isAudited }: CustomType = custom || {};
+
+  const { isAdmin }: MyLoginInfoType = MyLoginInfo || {};
+    
+  const { residueNum, currencyCode }: AmountInfoType = amountInfo || {};
+
+  const UserCard = () => {
+    return (
+        <div className="layout-user-card">
+          <div className="user-info">
+            <div className="user-avatarBox">
+              <img className="user-avatar" src={avatar}/>
+              <div className="user-mater">{isAdmin ? "主账号" : "子账号"}</div>
+            </div>
+            <div className="user-info-right">
+              <span className="name">{name}</span>
+              <div className="role-list">
+                {roleInfo?.map((i) => (
+                    <span className="role-item" key={i}>
+                  {i}
+                </span>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className="lios-userInfo">
+            <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={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={tenant?.id}>{tenant?.id}</div>
+              <div
+                  className={isCopied?.['tenantId'] ? "lios-iconDone" : "lios-icon"}
+                  onClick={() => {
+                    copyTextToClipboard(tenant?.id, 'tenantId');
+                  }}
+              >
+                {isCopied?.['tenantId'] ? "已复制" : <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>
+          </div>
+
+
+          <div className="lios-logoutBox">
+            <div
+                className="lios-logout"
+                onClick={() => {
+                  location.href = switchTenantUrl;
+                }}
+            >
+              <SwapOutlined className="logout-icon"/>
+              切换租户
+            </div>
+            <div
+                className="lios-logout"
+                onClick={() => {
+                  location.href = logoutUrl;
+                }}
+            >
+              <LogoutOutlined className="logout-icon"/>
+              退出登录
+            </div>
+          </div>
+        </div>
+    );
+  };
+
+  return UserCard();
+}

package/src/global.d.ts

@@ -47,3 +47,5 @@ export interface Label {
   value: string
   children?: Label[]
 }
+
+declare module '*.scss'

package/src/index.tsx

@@ -1,5 +1,5 @@
 import LiosLayout, { LiosLayoutlProps } from './components/layout'
-
+import LiosLayoutConsole from './components/layout-console/index'
 import PageContainer from './components/base-component/PageContainer'
 import CopyRight from './components/base-component/CopyRight'
 import QueryFilter from './components/base-component/QueryFilter'
@@ -18,29 +18,26 @@ import CpcRole from './components/universal-pages/cpcRole' //cpc 角色
 import CpcRoleInfo from './components/universal-pages/cpcRoleInfo' //cpc角色详情
 import { getUrlParams, downloadFile, timeFormatter } from './utils/index'
 export {
-    LiosLayout,
-    LiosLayoutlProps,
-    
-    CopyRight,
-    PageContainer,
-    QueryFilter,
-    ProTable,
-    Pagination,
-
-    Account,
-    AccountInfo,
-    Role,
-    RoleInfo,
-
-    request,
-    iotRequest,
-    hosts,
-    getUrlParams,
-    downloadFile,
-    timeFormatter,
-
-    CpcAccount,
-    CpcAccountInfo,
-    CpcRole,
-    CpcRoleInfo
-}
+  LiosLayout,
+  LiosLayoutlProps,
+  LiosLayoutConsole,
+  CopyRight,
+  PageContainer,
+  QueryFilter,
+  ProTable,
+  Pagination,
+  Account,
+  AccountInfo,
+  Role,
+  RoleInfo,
+  request,
+  iotRequest,
+  hosts,
+  getUrlParams,
+  downloadFile,
+  timeFormatter,
+  CpcAccount,
+  CpcAccountInfo,
+  CpcRole,
+  CpcRoleInfo,
+}

package/.vscode/settings.json

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