cfel-base-components 2.5.43 → 2.5.45

package/src/components/layout-copy/index.tsx

@@ -0,0 +1,218 @@
+import React, { useEffect, useState } from 'react'
+import { Layout, Menu, MenuProps, Popover } from 'antd'
+import UserCard from './user-card'
+import './index.scss'
+
+const { Sider } = Layout
+
+export interface LiosLayoutlProps {
+  appName?: any
+  productCode: string
+  children: any
+  menuList: any
+  onMenuClick: (item: any) => void
+  selectedKeys: string[]
+  customAction?: (item: any) => void
+  actions?: any[]
+  myWalletInfo?: {
+    availableCashAmount: string
+    availableAmount: string
+    currency: string
+  }
+  MyLoginInfo?: {
+    isAdmin: any
+  }
+  amountInfo?: {
+    residueNum: string
+    currencyCode: string
+  }
+  myWalletInfoAction?: Function
+  myLoginInfoAction?: Function
+  logoutUrl?: string
+  switchTenantUrl?: string
+  defaultOpenKeys?: string[]
+  isHideHeader?: boolean //是否隐藏header
+  onCollapse?: (value: boolean) => void
+}
+
+export default function LiosLayout(props: LiosLayoutlProps) {
+  const {
+    appName,
+    productCode,
+    menuList,
+    onMenuClick,
+    selectedKeys,
+
+    customAction,
+    actions,
+
+    defaultOpenKeys,
+    myWalletInfo,
+    MyLoginInfo,
+    amountInfo,
+    myWalletInfoAction,
+    myLoginInfoAction,
+    isHideHeader,
+    onCollapse,
+  } = props
+
+  const { user, logo, subLogo } = (window as any)?.g_config
+  const { name, avatar } = user || {}
+
+  const [openKeys, setOpenKeys] = useState<any>(defaultOpenKeys || [])
+
+  //处理搜索菜单后自动展开目录
+  interface TreeNode {
+    key: string
+    children?: TreeNode[]
+  }
+  const findParentMenu = (menuList: any[], pathname: string) => {
+    const result: TreeNode[] = []
+
+    const findNode = (nodes: TreeNode[], path: TreeNode[]): boolean => {
+      for (const node of nodes) {
+        if (node.key === pathname) {
+          result.push(...path)
+          return true
+        }
+        if (node.children && findNode(node.children, [...path, node])) {
+          return true
+        }
+      }
+      return false
+    }
+
+    findNode(menuList, [])
+    return result
+  }
+  useEffect(() => {
+    //在这里找到当前菜单的上层目录
+    const paMenu = findParentMenu(menuList, '/' + location.pathname.split('/')[2])
+    //去重
+    const set = new Set(paMenu.map((item) => item.key))
+    openKeys.forEach((element: string) => {
+      set.add(element)
+    })
+    setOpenKeys(Array.from(set))
+  }, [location.pathname])
+
+  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 && (
+        <Sider
+          className="layout-side"
+          style={{
+            backgroundSize: collapsed ? '1800%' : '900%',
+          }}
+          collapsible
+          collapsed={collapsed}
+          width={240}
+          onCollapse={(value) => {
+            onCollapse && onCollapse(value)
+            localStorage.setItem('layout_collapsed', value.toString())
+            setCollapsed(value)
+          }}
+        >
+          <div
+            className="layout-logo"
+            onClick={() => {
+              window.open('/home')
+            }}
+          >
+            {<img className={`logo-img ${!collapsed ? 'current-logo' : 'hide-logo'}`} src={logo || ''} />}
+            {
+              <img
+                className={`logo-img  sub-logo
+                 ${collapsed ? 'current-logo' : 'hide-sub-logo'}`}
+                src={subLogo || 'https://cdn.chengfengerlai.com/logo/company-logo/chengfengerlai-white.png'}
+              />
+            }
+          </div>
+
+          <div className="layout-menu-container">
+            <Menu
+              mode="inline"
+              openKeys={openKeys}
+              onOpenChange={onOpenChange}
+              items={menuList}
+              onClick={(item): any => {
+                onMenuClick && onMenuClick(item)
+              }}
+              selectedKeys={selectedKeys}
+              theme="dark"
+              color="red"
+            />
+          </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} MyLoginInfo={MyLoginInfo} 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,
+                })
+                myLoginInfoAction && myLoginInfoAction()
+              }}
+            >
+              <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>
+    </Layout>
+  )
+}

package/src/components/layout-copy/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-copy/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();
+}