cfel-base-components 2.6.6 → 2.6.7

package/package.json

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

package/src/components/layout/index.tsx

@@ -43,6 +43,10 @@ export interface LiosLayoutlProps {
   defaultOpenKeys?: string[]
   /** 自定义用户信息卡片内容（将完全替换内置的 UserCard） */
   userCard?: ReactNode
+  /** 自定义搜索输入占位文案，默认“搜索菜单...” */
+  searchPlaceholder?: string
+  /** 自定义“最近访问”标题文案，默认“最近访问” */
+  searchHistoryTitle?: string
   isHideHeader?: boolean //是否隐藏header
   onCollapse?: (value: boolean) => void
   type?: string
@@ -67,6 +71,8 @@ export default function LiosLayout(props: LiosLayoutlProps) {
     myWalletInfoAction,
     myLoginInfoAction,
     userCard,
+    searchPlaceholder,
+    searchHistoryTitle,
     isHideHeader,
     onCollapse,
     type,
@@ -276,7 +282,16 @@ export default function LiosLayout(props: LiosLayoutlProps) {
           {!collapsed && <div style={{ height: 24 }}></div>}
 
           <div style={{ width: '100%', padding: '0 16px' }}>
-            <Search menuList={menuList} collapsed={collapsed} type={type || ''} umiHistory={umiHistory} setSelectKey={setSelectKey} findKeyPath={findKeyPath} />
+            <Search
+              menuList={menuList}
+              collapsed={collapsed}
+              type={type || ''}
+              umiHistory={umiHistory}
+              setSelectKey={setSelectKey}
+              findKeyPath={findKeyPath}
+              searchPlaceholder={searchPlaceholder}
+              searchHistoryTitle={searchHistoryTitle}
+            />
           </div>
 
           {!collapsed && <div style={{ height: 12 }}></div>}
@@ -568,8 +583,19 @@ type SearchProps = {
   umiHistory: any
   setSelectKey: any
   findKeyPath: (pathname: string) => string[]
+  searchPlaceholder?: string
+  searchHistoryTitle?: string
 }
-function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPath }: SearchProps) {
+function Search({
+  menuList,
+  collapsed,
+  type,
+  umiHistory,
+  setSelectKey,
+  findKeyPath,
+  searchPlaceholder,
+  searchHistoryTitle,
+}: SearchProps) {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if ((navigator.platform.toLowerCase().includes('mac') ? event.metaKey : event.ctrlKey) && event.key.toLowerCase() === 'k') {
@@ -688,7 +714,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
               value={searchTerm}
               onChange={(e) => handleSearch(e.target.value)}
               className="search-input"
-              placeholder="搜索菜单..."
+              placeholder={searchPlaceholder ?? '搜索菜单...'}
               onFocus={() => setIsFocused(true)}
             />
             <div className="search-icon">
@@ -712,7 +738,7 @@ function Search({ menuList, collapsed, type, umiHistory, setSelectKey, findKeyPa
                   <List
                     split={false}
                     className="lists"
-                    header="最近访问"
+                    header={searchHistoryTitle ?? '最近访问'}
                     size="small"
                     bordered
                     dataSource={searchHistory}

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

@@ -1,171 +1,133 @@
-import React from "react";
-import {
-  SwapOutlined,
-  FormOutlined,
-  CopyOutlined,
-  LogoutOutlined,
-} from "@ant-design/icons";
-import "./index.scss";
+import React from 'react'
+import { SwapOutlined, 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;
+  name: string
+  avatar: string
+  roleInfo: any[]
+  id: string
+  account: string
+  isMaster: boolean
 }
+
 export interface MyWalletInfoType {
-  availableCashAmount: string;
-  availableAmount: string;
-  currency: string;
+  availableCashAmount: string
+  availableAmount: string
+  currency: string
 }
 export interface MyLoginInfoType {
-  isAdmin: any;
-}
-export interface AmountInfoType {
-  residueNum: string;
-  currencyCode: string;
+  isAdmin: any
 }
 
 export interface UserCardProps {
-  myWalletInfo?: MyWalletInfoType;
-  MyLoginInfo?: MyLoginInfoType;
-  amountInfo?: AmountInfoType;
-  customAction?: CustomType | any;
-  isCopied?: Record<string, boolean>;
-  copyTextToClipboard?: (value: string, key: string) => void;
+  myWalletInfo?: MyWalletInfoType
+  MyLoginInfo?: MyLoginInfoType
+  isCopied?: Record<string, boolean>
+  copyTextToClipboard?: (value: string, key: string) => void
 }
 
-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,
-}: UserCardProps) {
-  const { user, tenant, custom, switchTenantUrl, logoutUrl } = (window as any)
-    ?.g_config;
-
-  const { name, avatar, roleInfo, id, account, isMaster }: UserType =
-    user || {};
-
-  const { isCompleted, isAudited }: Partial<CustomType> = custom || {};
+export default function UserCard({ MyLoginInfo, isCopied, copyTextToClipboard }: UserCardProps) {
+  const { user, tenant, switchTenantUrl, logoutUrl } = (window as any)?.g_config
 
-  const { isAdmin }: MyLoginInfoType = (MyLoginInfo || {}) as MyLoginInfoType;
+  const { name, avatar, roleInfo, id, account }: UserType = user || {}
 
-  const { residueNum, currencyCode }: AmountInfoType = (amountInfo || {}) as AmountInfoType;
+  const { isAdmin }: MyLoginInfoType = (MyLoginInfo || {}) as MyLoginInfoType
 
   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}>
+      <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 && copyTextToClipboard(id, 'id');
-                  }}
-              >
-                {isCopied?.['id'] ? "已复制" : <CopyOutlined/>}
-              </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="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 && copyTextToClipboard(account, 'account');
-                  }}
-              >
-                {isCopied?.['account'] ? "已复制" : <CopyOutlined/>}
-              </div>
+            <div
+              className={isCopied?.['id'] ? 'lios-iconDone' : 'lios-icon'}
+              onClick={() => {
+                copyTextToClipboard && copyTextToClipboard(id, 'id')
+              }}
+            >
+              {isCopied?.['id'] ? '已复制' : <CopyOutlined />}
             </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 && 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={account}>
+              {account}
             </div>
-            <div className="lios-li li-flex">
-              <div className="lios-keyMare">租户</div>
-              <div className="lios-valueMare" title={tenant?.name}>{tenant?.name}</div>
+            <div
+              className={isCopied?.['account'] ? 'lios-iconDone' : 'lios-icon'}
+              onClick={() => {
+                copyTextToClipboard && copyTextToClipboard(account, 'account')
+              }}
+            >
+              {isCopied?.['account'] ? '已复制' : <CopyOutlined />}
             </div>
           </div>
 
-
-          <div className="lios-logoutBox">
-            <div
-                className="lios-logout"
-                onClick={() => {
-                  location.href = switchTenantUrl;
-                }}
-            >
-              <SwapOutlined className="logout-icon"/>
-              切换租户
+          <div className="lios-li li-flex">
+            <div className="lios-keyMare">租户ID</div>
+            <div className="lios-valueMare" title={tenant?.id}>
+              {tenant?.id}
             </div>
             <div
-                className="lios-logout"
-                onClick={() => {
-                  location.href = logoutUrl;
-                }}
+              className={isCopied?.['tenantId'] ? 'lios-iconDone' : 'lios-icon'}
+              onClick={() => {
+                copyTextToClipboard && copyTextToClipboard(tenant?.id, 'tenantId')
+              }}
             >
-              <LogoutOutlined className="logout-icon"/>
-              退出登录
+              {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();
+  return UserCard()
 }

package/src/index.tsx

@@ -1,5 +1,4 @@
 import LiosLayout, { LiosLayoutlProps } from './components/layout'
-import UserCard, { UserCardProps } from './components/layout/user-card'
 import PageContainer from './components/base-component/PageContainer'
 import CopyRight from './components/base-component/CopyRight'
 import QueryFilter from './components/base-component/QueryFilter'
@@ -21,8 +20,6 @@ import { getUrlParams, downloadFile, timeFormatter } from './utils/index'
 export {
   LiosLayout,
   LiosLayoutlProps,
-  UserCard,
-  UserCardProps,
   CopyRight,
   PageContainer,
   QueryFilter,