@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Menu/index.tsx

@@ -1,9 +1,10 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+import React, { useState, useEffect, useMemo, useImperativeHandle } from 'react';
 import { Menu } from 'antd';
-import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import Icon from '../Icon';
 import { useListenProps } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 
 export interface MyMenuProps {
   visible?: boolean;
@@ -23,14 +24,21 @@ export interface MyMenuProps {
   propKey?: any;
   onClick?: (key: any, url: any, data: any) => void;
   getEngineApis?: any;
+  backgroundType?: any;
 }
 
 const prefixCls = 'menu';
 
 const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
-  const { visible, mode, style, isUsePrimary, color, treeData, isExpanded, propKey, onClick, icon = {}, getEngineApis, className } = props;
+  const {
+    visible, mode, style, isUsePrimary, color, treeData,
+    isExpanded, propKey, onClick, icon = {}, getEngineApis,
+    className, backgroundType, $$componentItem,
+  } = props;
 
   const { width, height } = style || {};
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+
 
   const [inlineCollapsed, setInlineCollapsed] = useState(props.inlineCollapsed);
   const [checkedKeys, setCheckedKeys] = useState(props.checkedKeys);
@@ -48,16 +56,17 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
   // 图标规则
   const getRuleFunc = (rule: string) => {
     if (!rule) {
-      return () => {};
+      return () => { };
     }
     if (typeof rule === 'function') {
       return rule;
     }
     if (typeof rule === 'string') {
       // eslint-disable-next-line no-new-func
-      return new Function('node', `try { return ${rule};} catch(e) { console.warn("${rule}${getLocale?.('nodeRule')}");}`);
+      return new Function('node',
+        `try { return ${rule};} catch(e) { console.warn("${rule}${getLocale?.('nodeRule')}");}`);
     }
-    return () => {};
+    return () => { };
   };
 
   useImperativeHandle(ref, () => ({
@@ -78,12 +87,12 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
       }
     },
     setDataSource(_data: any) {
-      if (Array.isArray(_data.dataSource)) {
-        setDataSource(_data.dataSource);
-      }
       if (_data.treeService) {
         setTreeService(_data.treeService);
       }
+      if (Array.isArray(_data.dataSource)) {
+        setDataSource(_data.dataSource);
+      }
     },
     setSelectKeys(selectedKeys: string[]) {
       setDefaultSelectedKeys(selectedKeys);
@@ -113,22 +122,20 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
 
   const renderIconFont = (info: any) => {
     if (info) {
-      return (
-        <Icon
-          icon={info}
-          isUsePrimary={isUsePrimary}
-          style={{
-            width: 16,
-            height: 16,
-            fontSize: '16px',
-            fill: isUsePrimary ? undefined : color,
-            color: isUsePrimary ? undefined : color,
-          }}
-          $$componentItem={props.$$componentItem}
-          getEngineApis={getEngineApis}
-          className=""
-        />
-      );
+      return <Icon
+        icon={info}
+        isUsePrimary={isUsePrimary}
+        style={{
+          width: 16,
+          height: 16,
+          fontSize: '16px',
+          fill: isUsePrimary ? undefined : color,
+          color: isUsePrimary ? undefined : color,
+        }}
+        $$componentItem={props.$$componentItem}
+        getEngineApis={getEngineApis}
+        className=""
+      />;
     }
     return undefined;
   };
@@ -153,11 +160,9 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
     }
     if (info) {
       return renderIconFont(info);
-    }
-    if (menuExpandedKeys.includes(key)) {
+    } if (menuExpandedKeys.includes(key)) {
       return renderIconFont(node?.expandedIcon || iconInfo.expanded);
-    }
-    if (children?.length) {
+    } if (children?.length) {
       return renderIconFont(node?.closedIcon || iconInfo.closed);
     }
     return renderIconFont(iconInfo.leaf);
@@ -166,7 +171,7 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
     const { key, title, children, selectable, url } = service || {};
     const getTreeData = (arr: any[]) => {
       if (Array.isArray(arr)) {
-        return arr.map(c => {
+        return arr.map((c) => {
           // _isReload 标识节点数据是通过加载子节点动作设置的,此时取该动作配置好的key/title/selectable
           const serviceSelectable = c[selectable] !== undefined ? c[selectable] : true;
           const params = {
@@ -180,7 +185,7 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
           const node: Record<string, any> = {
             ...params,
             icon: getIcon({ ...c, ...params }),
-            data: c.data || { ...c, ...params },
+            data: c.data || ({ ...c, ...params }),
           };
           // 优先取配置的children字段，若配置错误则子节点为空，若无配置默认访问数据自身chidren
           const childrenKey = children || 'children';
@@ -200,14 +205,11 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
 
   // 菜单展示数据列表
   const menuDatas: any = useMemo(() => {
-    if (Array.isArray(dataSource) && dataSource?.length) {
-      // 动态获取回来的服务数据
+    if (Array.isArray(dataSource) && dataSource?.length) { // 动态获取回来的服务数据
       const dataAttrs: any = loadData(dataSource, treeService);
-      return [...(dataAttrs || [])];
-    }
-    if (Array.isArray(treeData) && treeData?.length) {
-      // 项目设置配置的静态数据
-      return [...treeData];
+      return ([...(dataAttrs || [])]);
+    } if (Array.isArray(treeData) && treeData?.length) { // 项目设置配置的静态数据
+      return ([...treeData]);
     }
     return [];
   }, [dataSource, treeService, treeData, extRules, isUsePrimary, menuExpandedKeys]);
@@ -217,11 +219,10 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
     const menuKeys: any = [];
     const getTreeKey = (arr: any[]) => {
       if (Array.isArray(arr)) {
-        arr.forEach(c => {
+        arr.forEach((c) => {
           const childrenKey = children || 'children';
           if (Array.isArray(c[childrenKey])) {
-            if (mode === 'inline' && c[childrenKey]?.length) {
-              // 是否设置默认展开项
+            if (mode === 'inline' && (c[childrenKey]?.length)) { // 是否设置默认展开项
               menuKeys.push(c._isReload ? c.key : c[key] || c.key);
             }
             getTreeKey(c[childrenKey]);
@@ -241,7 +242,7 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
       const menuKeys = getExpendKeys(treeData);
       setMenuExpandedKeys([...(defaultOpenKey || menuKeys || [])]);
     }
-  }, [dataSource, inlineCollapsed, defaultOpenKey]);
+  }, [dataSource, inlineCollapsed, defaultOpenKey, treeService]);
 
   // 查找默认
   useEffect(() => {
@@ -284,11 +285,8 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
       if (isStatic) {
         const iconType =
           // eslint-disable-next-line no-nested-ternary
-          menuExpandedKeys.includes(item?.key)
-            ? item?.expandedIcon
-            : item?.children?.length
-              ? item?.closedIcon
-              : item?.closedIcon || item?.expandedIcon;
+          menuExpandedKeys.includes(item?.key) ? item?.expandedIcon :
+            (item?.children?.length ? item?.closedIcon : (item?.closedIcon || item?.expandedIcon));
         itemIcon = renderIconFont(iconType);
       } else {
         itemIcon = item?.icon instanceof Function ? item?.icon(item) : item?.icon;
@@ -297,31 +295,32 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
         return (
           <Menu.SubMenu
             disabled={item.disabled}
-            title={
+            title={(
               <>
-                {itemIcon && (
-                  <span role="img" aria-label="mail" className={`anticon anticon-mail ${`${prefixCls}_icon`}`}>
-                    {itemIcon}
-                  </span>
-                )}
+                {
+                  itemIcon && (
+                    <span role="img" aria-label="mail" className={`anticon anticon-mail ${`${prefixCls}_icon`}`}>
+                      {itemIcon}
+                    </span>
+                  )
+                }
                 <span>{item && item[titleKey]}</span>
               </>
-            }
+            )}
             key={item.key}
           >
             {getItems(item.children, isStatic)}
           </Menu.SubMenu>
         );
       }
-      return item && item[titleKey] ? (
+      return ((item && item[titleKey]) ? (
         <Menu.Item
           key={item.key}
           disabled={item.disabled}
           onClick={() => {
             if (onClick instanceof Function) {
               let newItem = item;
-              if (!newItem?.data) {
-                // 节点数据获取的是data属性的内容
+              if (!newItem?.data) { // 节点数据获取的是data属性的内容
                 newItem = { ...newItem, data: item };
               }
               onClick(item.key, item.url, newItem);
@@ -329,40 +328,42 @@ const MyMenu = LingxiForwardRef<any, MyMenuProps>((props, ref) => {
             setDefaultSelectedKeys([item?.key]);
           }}
         >
-          {itemIcon && (
-            <span role="img" aria-label="mail" className={`anticon anticon-mail ${`${prefixCls}_icon`}`}>
-              {itemIcon}
-            </span>
-          )}
+          {
+            itemIcon && (
+              <span role="img" aria-label="mail" className={`anticon anticon-mail ${`${prefixCls}_icon`}`}>
+                {itemIcon}
+              </span>
+            )
+          }
           <span>{item && item[titleKey]}</span>
         </Menu.Item>
-      ) : null;
+      ) : null);
     });
   };
-  const extendOptions: any =
-    mode === 'inline'
-      ? {
-        inlineCollapsed,
-      }
-      : {};
+  const extendOptions: any = mode === 'inline' ? {
+    inlineCollapsed,
+  } : {};
 
-  return visible ? (
-    <div
-      className={`ued-menu ${className} ${prefixCls} ${mode === 'inline' && !inlineCollapsed ? `${prefixCls}_inline_colloaps` : ''}`}
-      style={{ width, height }}
-    >
-      <Menu
-        {...extendOptions}
-        mode={mode}
-        style={style}
-        selectedKeys={defaultSelectedKeys}
-        openKeys={menuExpandedKeys}
-        onOpenChange={(keys: any) => setMenuExpandedKeys([...(keys || [])])}
+  return (
+    visible ? (
+      <div
+        className={`ued-menu ${className} ${prefixCls} ${mode === 'inline' && !inlineCollapsed ? `${prefixCls}_inline_colloaps` : ''}`}
+        style={{ ...backgroundStyle, width, height }}
       >
-        {getItems(menuDatas || [], (dataSource?.length || 0) < 1) || false}
-      </Menu>
-    </div>
-  ) : null;
+        <Menu
+          {...extendOptions}
+          mode={mode}
+          style={style}
+          selectedKeys={defaultSelectedKeys}
+          openKeys={menuExpandedKeys}
+          onOpenChange={(keys: any) => setMenuExpandedKeys([...(keys || [])])}
+        >
+          {getItems(menuDatas || [], (dataSource?.length || 0) < 1) || false}
+        </Menu>
+      </div>
+    ) : null
+  );
 });
 
+
 export default MyMenu;

package/lib/pcpublic/src/components/pcfactory/src/ModalSelect/BaseModalSelect.tsx

@@ -27,10 +27,10 @@ const BaseModalSelect = (props: any) => {
     <span
       className={classnames(className, {
         'pcfactory-input-group-wrapper': true,
-        [`pcfactory-input-affix-wrapper-${restProps?.size === 'large' ? 'lg' : 'sm'}`]: [
-          'large',
-          'small',
-        ].includes(restProps?.size),
+        // [`pcfactory-input-affix-wrapper-${restProps?.size === 'large' ? 'lg' : 'sm'}`]: [
+        //   'large',
+        //   'small',
+        // ].includes(restProps?.size),
         [`${postfixStyleClsName}`]: postfixStyleClsName,
         'pcfactory-input-after-border-right-width': !!postfixStyleClsName,
       })}

package/lib/pcpublic/src/components/pcfactory/src/Pagination/index.tsx

@@ -1,14 +1,17 @@
+import React, { useState, useMemo } from 'react';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 import { Pagination } from 'antd';
-import React, { useMemo, useState } from 'react';
+import { LingXiFC } from '@lingxiteam/types';
+import classNames from 'classnames';
 
 export interface MyPaginationProps {
-  size: any;
+  size: any,
   style?: any;
   className?: any;
-  visible: boolean;
-  disabled: boolean;
-  simple: boolean;
-  pageSize: number;
+  visible: boolean,
+  disabled: boolean,
+  simple: boolean,
+  pageSize: number,
   total?: number;
   current?: number;
   pagination?: any;
@@ -17,42 +20,38 @@ export interface MyPaginationProps {
   pageSizeOptions?: string;
   onPageChange?: (page: React.SetStateAction<number>, size: number) => void;
   getEngineApis?: any;
+  backgroundType?: any;
 }
 
 // const prefixCls = 'pagination';
 
-const MyPagination: React.FC<MyPaginationProps> = props => {
+const MyPagination: LingXiFC<MyPaginationProps> = props => {
   const {
-    visible,
-    size,
-    disabled,
-    simple,
-    style,
-    className,
-    current,
-    pageSize,
-    total,
-    showQuickJumper,
-    showSizeChanger,
-    pageSizeOptions,
+    visible, size, disabled, simple, style, className,
+    current, pageSize, total, showQuickJumper, showSizeChanger, pageSizeOptions,
     onPageChange,
     getEngineApis,
+    backgroundType,
+    $$componentItem,
   } = props;
 
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+
+
   const [currentPage, setCurrentPage] = useState(current || 1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
 
   const hasPageChangeEvent = typeof onPageChange === 'function'; // 是否配置页码改变回调事件（是：后端分页，否：前端分页）
   const realCurrent = (hasPageChangeEvent ? current : currentPage) || 1;
   const realPageSize = (hasPageChangeEvent ? pageSize : currentPageSize) || 10;
-
+  
   // 解析分页选择器配置
   const parsedPageSizeOptions = useMemo(() => {
     if (pageSizeOptions) {
       try {
         const arr = JSON.parse(pageSizeOptions);
         if (Array.isArray(arr)) {
-          return arr.map(s => String(s));
+          return arr.map((s) => String(s));
         }
         return undefined;
       } catch (e) {
@@ -72,10 +71,7 @@ const MyPagination: React.FC<MyPaginationProps> = props => {
     showQuickJumper,
     showSizeChanger,
     pageSizeOptions: parsedPageSizeOptions,
-    showTotal: (tol: any) =>
-      getEngineApis?.()?.getLocale?.('Pagination.showTotal', undefined, {
-        tol,
-      }),
+    showTotal: (tol: any) => getEngineApis?.()?.getLocale?.('Pagination.showTotal', undefined, { tol }),
     onShowSizeChange: (newCurrent: number, newPageSize: number) => {
       if (hasPageChangeEvent) {
         onPageChange(newCurrent, newPageSize);
@@ -93,7 +89,14 @@ const MyPagination: React.FC<MyPaginationProps> = props => {
     },
   };
 
-  return visible ? <Pagination {...paginationProps} style={style} className={className} /> : null;
+  return visible ? (
+    <Pagination
+      {...paginationProps}
+      style={{ ...backgroundStyle, ...style }}
+      className={classNames('ued-pagination-wrap', className)}
+    />
+  ) : null;
 };
 
+
 export default MyPagination;

package/lib/pcpublic/src/components/pcfactory/src/PanelHeader/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { PrefixIconIconProps } from '../Icon/PropsType';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import classnames from 'classnames';
+
+export interface MyPanelHeaderProps {
+  visible: boolean;
+  backgroundType?: any;
+  appId?: string;
+  prefixIcon?: PrefixIconIconProps;
+  getEngineApis?: any;
+  subTitle?: string;
+  style?: React.CSSProperties;
+}
+
+const PanelHeader = LingxiForwardRef<any, MyPanelHeaderProps>((props, ref) => {
+  const {
+    visible = true,
+    children,
+    style,
+    backgroundType,
+    getEngineApis,
+    className,
+  } = props;
+  const { appId } = props.$$componentItem;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId, mode: 'engine' });
+
+  return visible ? (
+    <div
+      style={{ ...backgroundStyle, ...style }}
+      className={classnames('ued-pane-header', className)}
+      onClick={(e) => {
+        // 阻止冒泡，不影响上层点击事件，比如折叠面板的收起展开行为
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </div>
+  ) : null;
+});
+
+export default PanelHeader;

package/lib/pcpublic/src/components/pcfactory/src/Password/index.tsx

@@ -1,7 +1,7 @@
 import { Input } from 'antd';
 import React from 'react';
-import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
 import { renderPassword } from '../utils/renderReadOnly';
+import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
 
 export interface PassWordProps {
   value?: any;
@@ -71,8 +71,7 @@ const Password: React.FC<PassWordProps> = React.forwardRef((props, ref) => {
           }
         }}
       />
-    </FormFields>
-  );
+    </FormFields>);
 });
 
 export default Password;

package/lib/pcpublic/src/components/pcfactory/src/PictureVerifyCode/index.tsx

@@ -10,7 +10,6 @@ export interface PictureVerifyCodeProps {
 }
 const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef((props, ref) => {
   const {
-    digit,
     onClick,
     style,
     visible,
@@ -24,11 +23,10 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef((props, r
 
   const getPicVerifyCode = () => {
     const newTimestamp = new Date().getTime();
-    if (digit && newTimestamp) {
+    if (newTimestamp) {
       (async () => {
         try {
           const params = {
-            // validateCodeCount: `${digit}`,
             t: `${newTimestamp}`,
           };
           const url = await engineApis.getValidateCodePicture(params);