@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Icon/hooks/index.tsx

@@ -1,9 +1,10 @@
-import { createFromIconfontCN } from '@ant-design/icons';
+import React, { useMemo } from 'react';
 import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import createFromIconfontCN from '@ant-design/icons/es/components/IconFont';
 import classnames from 'classnames';
-import React, { useMemo } from 'react';
+import { UseIconProps, IconCfg } from '../PropsType';
 import { useLocale } from '../../utils/hooks/useLocale';
-import { IconCfg, UseIconProps } from '../PropsType';
+import SysTemIcons from '../../assets';
 
 export const ICON_FILE_IMAGE = 'ICON_IMAGE';
 export const ICON_FILE_ICONFONT = 'ICONFONT';
@@ -22,6 +23,10 @@ export const handleIsValidIconCfg = (icon: IconCfg) => {
     return true;
   }
 
+  if (icon?.isSystem) {
+    return true;
+  }
+
   if (icon?.iconFile && Object.keys(icon.iconFile).length > 0) {
     if ([ICON_FILE_ICONFONT, ICON_FILE_IMAGE].includes(icon?.iconFile?.fileSubType)) {
       return true;
@@ -33,8 +38,7 @@ export const handleIsValidIconCfg = (icon: IconCfg) => {
     const { svgContent, materialId, fileName } = icon.iconFileInfo || {};
     if (svgContent) {
       return true;
-    }
-    if (materialId && fileName) {
+    } if (materialId && fileName) {
       return true;
     }
     return false;
@@ -59,8 +63,8 @@ const useIcon = (props: UseIconProps) => {
     mode,
     icon: myIcon = {},
     placeholder = null,
-    getFileIconUrl = () => {},
-    getDesignPlatormIconUrl = () => {},
+    getFileIconUrl = () => { },
+    getDesignPlatormIconUrl = () => { },
 
     // ---- FIXME: 以下配置暂时保留，但新功能请从 icon 传入，禁止使用-----
     type: nType,
@@ -74,14 +78,27 @@ const useIcon = (props: UseIconProps) => {
 
     visible = true,
     getEngineApis,
+    engineApis,
     // hidden, // TODO: 不知道做什么用？
     ...resProps
   } = props;
 
-  const { getLocale } = useLocale(getEngineApis?.());
+  const { getLocale } = useLocale(engineApis || getEngineApis?.());
 
-  const { type, theme, isIconFont, fontAddress, svgContent, iconFileInfo, iconFile, isUsePrimary, color } = useMemo(() => {
-    const iconInfo = Array.isArray(iconItems) && (iconItems.find(c => c.rule) || iconItems[0]);
+  const {
+    type,
+    theme,
+    isIconFont,
+    fontAddress,
+    svgContent,
+    iconFileInfo,
+    iconFile,
+    isUsePrimary,
+    color,
+    isSystem,
+    systemIconKey,
+  } = useMemo(() => {
+    const iconInfo = Array.isArray(iconItems) && (iconItems.find((c) => c.rule) || iconItems[0]);
     if (mode === 'custom' && iconInfo && !myIcon?.isAction) {
       return {
         type: iconInfo?.icon?.type,
@@ -93,6 +110,8 @@ const useIcon = (props: UseIconProps) => {
         iconFile: iconInfo?.icon?.iconFile,
         isUsePrimary: iconInfo?.isUsePrimary,
         color: iconInfo?.color,
+        isSystem: iconInfo?.icon?.isSystem,
+        systemIconKey: iconInfo?.icon?.systemIconKey,
       };
     }
     return {
@@ -104,8 +123,23 @@ const useIcon = (props: UseIconProps) => {
       iconFileInfo: myIcon.iconFileInfo || nIconFileInfo,
       iconFile: myIcon.iconFile || nIconFile,
       isUsePrimary: nIsUsePrimary,
+      isSystem: myIcon.isSystem,
+      systemIconKey: myIcon.systemIconKey,
+      color: myIcon?.color,
     };
-  }, [iconItems, mode, JSON.stringify(myIcon), nIconFile, nIconFileInfo, nSvgContent, nFontAddress, nIsIconFont, nTheme, nType, nIsUsePrimary]);
+  }, [
+    iconItems,
+    mode,
+    JSON.stringify(myIcon),
+    nIconFile,
+    nIconFileInfo,
+    nSvgContent,
+    nFontAddress,
+    nIsIconFont,
+    nTheme,
+    nType,
+    nIsUsePrimary,
+  ]);
 
   const renderIcon = () => {
     if (svgContent) {
@@ -122,6 +156,7 @@ const useIcon = (props: UseIconProps) => {
     const _style = {
       ...resProps?.style,
       color: isUsePrimary ? undefined : color || resProps.style?.color,
+      fill: isUsePrimary ? undefined : color || resProps.style?.color,
     };
 
     // 图标来源于 iconfont 在线
@@ -135,7 +170,8 @@ const useIcon = (props: UseIconProps) => {
           rotate={rotate}
           {...resProps}
           style={_style}
-          className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''}`}
+          className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''
+          }`}
         />
       );
     }
@@ -159,7 +195,7 @@ const useIcon = (props: UseIconProps) => {
         case ICON_FILE_IMAGE:
           return (
             <img
-              alt={getLocale?.('icon.imgFormatWarning')}
+              alt={getLocale?.('Icon.imgFormatWarning')}
               src={iconUrl}
               {...resProps}
               style={{
@@ -182,7 +218,8 @@ const useIcon = (props: UseIconProps) => {
               rotate={rotate}
               {...resProps}
               style={_style}
-              className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''}`}
+              className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''
+              }`}
             />
           );
         }
@@ -204,10 +241,15 @@ const useIcon = (props: UseIconProps) => {
             dangerouslySetInnerHTML={{ __html: svgContent }}
           />
         );
-      }
-      if (materialId && fileName) {
+      } if (materialId && fileName) {
         const iconUrl = getDesignPlatormIconUrl(materialId, fileName);
-        return <img className={`ued-icon ${designPlatformiconCls} ${resProps?.className || ''}`} src={iconUrl} alt="" />;
+        return (
+          <img
+            className={`ued-icon ${designPlatformiconCls} ${resProps?.className || ''}`}
+            src={iconUrl}
+            alt=""
+          />
+        );
       }
       return placeholder;
     }
@@ -215,12 +257,29 @@ const useIcon = (props: UseIconProps) => {
     // 存量存在项目本地的 iconfont 配置数据 ？？
     if (isIconFont) {
       return (
-        <svg style={_style} aria-hidden="true" className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''}`}>
+        <svg
+          style={_style}
+          aria-hidden="true"
+          className={`ued-icon ${resProps?.className || ''} ${isUsePrimary ? 'fill-primary' : ''
+          }`}
+        >
           <use xlinkHref={`#${type}`} />
         </svg>
       );
     }
 
+    if (isSystem) {
+      return (
+        <LegacyIcon
+          {...resProps}
+          className={`sys_icon ${resProps?.className || ''}`}
+          rotate={rotate}
+          style={_style}
+          component={(SysTemIcons as any)[systemIconKey || '']}
+        />
+      );
+    }
+
     // 其他认为，图标为 antd 默认内置图标
     if (type && theme) {
       return (
@@ -241,4 +300,6 @@ const useIcon = (props: UseIconProps) => {
   return visible ? renderIcon() : null;
 };
 
-export { useIcon };
+export {
+  useIcon,
+};

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

@@ -1,10 +1,18 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
 import { useImperativeHandle, useMemo, useState } from 'react';
 import { useIcon } from './hooks';
 import type { IconProps } from './PropsType';
+import { LingxiForwardRef } from '@lingxiteam/types';
+
 
 const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
-  const { visible = true, engineApis: receivedEngineApis, getEngineApis, $$componentItem, className = '', ...restProps } = props;
+  const {
+    visible = true,
+    engineApis: receivedEngineApis,
+    getEngineApis,
+    $$componentItem,
+    className = '',
+    ...restProps
+  } = props;
 
   const appId = $$componentItem?.appId || props.appId;
 
@@ -14,9 +22,9 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
 
   const myClassName = useMemo(() => {
     if ($$componentItem?.type === 'Icon') {
-      /**
-       * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
-       */
+    /**
+    * 用于主题，如果是单独使用的是，在className 增加一个变量，防止在主题设置图标的时候，影响影响引用图标的其他控件
+   */
       return `pcFactory-icon ${className || ''}`;
     }
     return className;
@@ -24,7 +32,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     changeContent(_content: any) {
-      setChangeContent({ icon: { ..._content, type: _content.iconType } });
+      setChangeContent({ icon: { ..._content } });
     },
   }));
 
@@ -49,6 +57,7 @@ const MyIcon = LingxiForwardRef<any, IconProps>((props, ref) => {
     getFileIconUrl,
     getDesignPlatormIconUrl,
     getEngineApis,
+    engineApis,
   });
 
   if (!visible) {

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

@@ -5,7 +5,7 @@ interface IconFontProps extends React.HTMLProps<HTMLDivElement> {
   iconClass?: any;
 }
 
-const IconFont: FC<IconFontProps> = props => {
+const IconFont: FC<IconFontProps> = (props) => {
   const { className, style, iconClass, width = 13, height = 13 } = props;
 
   return (

package/lib/pcpublic/src/components/pcfactory/src/Img/BasicImage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 const MyImage = (props: any) => {
   const { defaultSrc, errorSrc, alt, getContainerStyle, imgDisplay, style, ...restProps } = props;
@@ -12,6 +12,7 @@ const MyImage = (props: any) => {
     }
   }, [props.src]);
 
+
   // useEffect(() => {
   //   if (imageRef.current) {
   //     if (props.src) {

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

@@ -6,14 +6,14 @@ import Img from './BasicImage';
 export interface MyImgProps {
   visible?: boolean;
   name?: string;
-  alt: string;
+  alt?: string;
   imgSrc?: string;
   fileId?: string;
   src: string;
   fileName?: string;
   fileCode?: string;
   errorSrc?: string;
-  srcType?: 'fileCode' | 'src';
+  srcType?: 'fileCode' | 'src'
   style?: React.CSSProperties;
   getContainerStyle?: () => React.CSSProperties;
   imgDisplay?: string;
@@ -22,7 +22,17 @@ export interface MyImgProps {
 }
 
 const MyImg = React.forwardRef<any, MyImgProps>((props, ref) => {
-  const { visible = true, alt, fileId, src, fileName = '', fileCode, srcType, getEngineApis, ...restProps } = props;
+  const {
+    visible = true,
+    alt,
+    fileId,
+    src,
+    fileName = '',
+    fileCode,
+    srcType,
+    getEngineApis,
+    ...restProps
+  } = props;
 
   const engineApis = getEngineApis?.() || {};
 
@@ -41,8 +51,7 @@ const MyImg = React.forwardRef<any, MyImgProps>((props, ref) => {
   useEffect(() => {
     // srcType设置兼容存量数据，当存量数据无srcType时根据旧的资源优先级进行赋值
     let mySrcType = srcType;
-    if (!mySrcType) {
-      // 存量数据判断，建议三个月以上的时间之后再进行删除
+    if (!mySrcType) { // 存量数据判断，建议三个月以上的时间之后再进行删除
       if (fileCode) {
         mySrcType = 'fileCode';
       } else {
@@ -78,6 +87,8 @@ const MyImg = React.forwardRef<any, MyImgProps>((props, ref) => {
     },
   }));
 
-  return visible ? <Img {...restProps} src={imgSrc} alt={alt} errorSrc={errorSrc} defaultSrc={IconPlaceholder} /> : null;
+  return visible ? (
+    <Img {...restProps} src={imgSrc} alt={alt} errorSrc={errorSrc} defaultSrc={IconPlaceholder} />
+  ) : null;
 });
 export default MyImg;

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

@@ -1,14 +1,14 @@
 import { Input as AntdInput } from 'antd';
 // @ts-ignore
-import { LingxiForwardRef } from '@lingxiteam/types';
 import type { ValidationRule } from 'antd/es/form';
 import classnames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import CommIcon from '../Icon';
-import { handleIsValidIconCfg } from '../Icon/hooks';
 import type { IconCfg } from '../Icon/PropsType';
-import { FormFields, getFieldsProps, useCommonImperativeHandle, useDataMask } from '../utils';
+import { handleIsValidIconCfg } from '../Icon/hooks';
 import { checkNumber } from '../utils/common';
+import { FormFields, getFieldsProps, useCommonImperativeHandle, useDataMask } from '../utils';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { useLocale } from '../utils/hooks/useLocale';
 import renderReadOnly from '../utils/renderReadOnly';
 
@@ -162,7 +162,16 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
   });
 
   const { type, theme } = icon || {};
-  const { prefixIconIconFileInfo, prefixIconIsIconFont, prefixIconType, prefixIconTheme, prefixIconFontAddress, prefixIconiconFile } = prefixIcon;
+  const {
+    prefixIconIconFileInfo,
+    prefixIconIsIconFont,
+    prefixIconType,
+    prefixIconTheme,
+    prefixIconFontAddress,
+    prefixIconiconFile,
+    isSystem,
+    systemIconKey,
+  } = prefixIcon;
 
   const ignoreReadOnlyFlag = useMemo(() => {
     // 只读模式并且 控件存在图标配置和事件
@@ -223,10 +232,17 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
       fontAddress: prefixIconFontAddress,
       iconFile: prefixIconiconFile,
       iconFileInfo: prefixIconIconFileInfo,
+      isSystem,
+      systemIconKey,
     };
     if (handleIsValidIconCfg(resolvedPrefixIcon)) {
       before = (
-        <CommIcon className={disabled ? 'disabled' : ''} icon={resolvedPrefixIcon} getEngineApis={getEngineApis} $$componentItem={$$componentItem} />
+        <CommIcon
+          className={disabled ? 'disabled' : ''}
+          icon={resolvedPrefixIcon}
+          getEngineApis={getEngineApis}
+          $$componentItem={$$componentItem}
+        />
       );
     }
 
@@ -261,7 +277,7 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
       after = (
         <CommIcon
           icon={icon}
-          className={disabled ? 'disabled' : ''}
+          className={`${disabled ? 'disabled' : ''} postfixIcon`}
           getEngineApis={getEngineApis}
           onClick={disabled || postfix ? null : onIconClick || undefined}
           $$componentItem={$$componentItem}
@@ -274,7 +290,7 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
         case 'after':
           after = (
             <span className="postfix" onClick={disabled ? null : onIconClick || undefined}>
-              {postfix}
+              <span>{postfix}</span>
               {after}
             </span>
           );
@@ -284,7 +300,7 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
           after = (
             <span className="postfix" onClick={disabled ? null : onIconClick || undefined}>
               {after}
-              {postfix}
+              <span>{postfix}</span>
             </span>
           );
           break;
@@ -321,7 +337,7 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
       rules.push(lengthRule);
     }
 
-    if (Array.isArray(temRules || [])) {
+    if (Array.isArray((temRules || []))) {
       rules.push(...(temRules || []));
     }
     return rules;
@@ -366,7 +382,7 @@ const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
           }
         }}
         className={classnames(prefixStyleClsName, postfixStyleClsName, className, {
-          'pcfactory-input-after-border-right-width': !!postfix,
+          'pcfactory-input-after-border-right-width': getAddonAfterBtn(),
         })}
         addonBefore={getAddonBeforeBtn()}
         addonAfter={getAddonAfterBtn()}

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

@@ -1,7 +1,7 @@
 import { InputNumber as AntdInputNumber, Tooltip } from 'antd';
 // @ts-ignore
 // import type { ValidationRule } from 'antd/es/form';
-import React, { useMemo, useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { FormFields, getFieldsProps, useCommonImperativeHandle } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
 
@@ -103,7 +103,7 @@ const InputNumber = React.forwardRef<any, InputNumberProps>((props, ref) => {
 
   const engineApis = getEngineApis?.() || {};
   const { sandBoxSafeRun } = engineApis;
-
+  
   const { getLocale } = useLocale(engineApis);
   const { disabled, required, formFieldsRef, finalRules, readOnly } = useCommonImperativeHandle(ref, props);
 
@@ -151,19 +151,17 @@ const InputNumber = React.forwardRef<any, InputNumberProps>((props, ref) => {
       if (formatting === 'word') {
         return val;
       }
-      const withComma = (str: string) =>
-        str
-          .split('')
-          .reverse()
-          .join('')
-          .replace(/(\d{1,3})/g, ',$1')
-          .split('')
-          .reverse()
-          .join('')
-          .replace(/,$/, '');
+      const withComma = (str: string) => str.split('').reverse().join('').replace(/(\d{1,3})/g, ',$1')
+        .split('')
+        .reverse()
+        .join('')
+        .replace(/,$/, '');
       // 只有小数点前的部分需要千位分隔符
       if (formatting === 'comma' && val.indexOf('.') > -1) {
-        return withComma(val.substring(0, val.indexOf('.'))) + val.substring(val.indexOf('.'));
+        return (
+          withComma(val.substring(0, val.indexOf('.'))) +
+          val.substring(val.indexOf('.'))
+        );
       }
       if (formatting === 'comma') {
         return withComma(`${val}`);
@@ -212,7 +210,12 @@ const InputNumber = React.forwardRef<any, InputNumberProps>((props, ref) => {
   return (
     <>
       {formatting === 'word' && digitText ? (
-        <Tooltip overlayClassName={TOOLTIP_CLASSNAME_NO_FORM} placement="topLeft" title={digitText} visible />
+        <Tooltip
+          overlayClassName={TOOLTIP_CLASSNAME_NO_FORM}
+          placement="topLeft"
+          title={digitText}
+          visible
+        />
       ) : null}
       <FormFields
         {...getFieldsProps(props)}

package/lib/pcpublic/src/components/pcfactory/src/LXPieChart/LXPieChart.tsx

@@ -11,6 +11,11 @@ const LXPieChart: LingXiFC<LXPieChartPorps> = (props, ref) => {
   const finalStyle = useHiddenStyle(visible, style);
   const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
 
+  const engineApis = getEngineApis?.();
+  const {
+    sandBoxSafeRun,
+  } = engineApis || {};
+  
   return (
     <LXChart
       style={{ ...backgroundStyle, ...(finalStyle || {}) }}
@@ -19,6 +24,7 @@ const LXPieChart: LingXiFC<LXPieChartPorps> = (props, ref) => {
       isEditMode={false}
       isMobile={false}
       chartType="Pie"
+      sandBoxSafeRun={sandBoxSafeRun}
     />
   );
 };

package/lib/pcpublic/src/components/pcfactory/src/LXRadarChart/LXRadarChat.tsx

@@ -5,7 +5,7 @@ import { LXChart } from '@lingxiteam/charts-common';
 import { LingXiFC } from '@lingxiteam/types';
 import './index.less';
 import useBackgroundStyle from '../View/useBackgroundStyle';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 
 
 // const prefixCls = 'lXRadarChart';
@@ -18,7 +18,8 @@ const LXRadarChart: LingXiFC<LXRadarChartPorps> = (props, ref) => {
   return (
     <LXChart
       style={{ ...backgroundStyle, ...finalStyle }}
-      className={classNames(className, 'ued-radarChart')}
+      // className={classNames(className, 'ued-radarChart')}
+      className={className}
       configProps={props}
       isEditMode={false}
       isMobile={false}

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

@@ -1,24 +1,38 @@
-import { LingXiFC } from '@lingxiteam/types';
 import React, { useMemo } from 'react';
-import { useHiddenStyle } from '../utils';
 import { findItemsSumThanNum, pxToNum } from './utils';
+import { LingXiFC } from '@lingxiteam/types';
+import { useHiddenStyle } from '../utils';
+import useBackgroundStyle from '../View/useBackgroundStyle';
 
 export interface LayoutProps {
   children: any;
   style: React.CSSProperties;
   layoutOptions?: any;
   visible: boolean;
+  backgroundType: any;
+  appId?: any;
 }
 
-const Layout: LingXiFC<LayoutProps> = props => {
-  const { children, style, layoutOptions, visible = true, getEngineApis, ...restProps } = props;
-
+const Layout: LingXiFC<LayoutProps> = (props) => {
+  const {
+    children,
+    style,
+    layoutOptions,
+    visible = true,
+    getEngineApis,
+    backgroundType,
+    ...restProps
+  } = props;
+  
+  const engineApis = getEngineApis?.() || {};
   const hiddenStyle = useHiddenStyle(visible);
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId: restProps?.appId, mode: 'engine' });
   const myStyle: React.CSSProperties = useMemo(() => {
     const oldDataFlag = style.display === 'grid'; // 旧数据
     const oldGridAutoRows = style?.gridAutoRows === 'column' ? 'column' : 'row'; // grid其他属性在 flex布局下不支持，兼容旧数据
     if (oldDataFlag) {
       return {
+        ...backgroundStyle,
         ...style,
         display: 'flex', // 旧数据都改为flex展示
         flexWrap: 'wrap',
@@ -27,8 +41,8 @@ const Layout: LingXiFC<LayoutProps> = props => {
         ...hiddenStyle,
       };
     }
-    return { ...style, flexWrap: 'wrap', gap: '0px', ...hiddenStyle }; // IE不支持gap属性，所以通过margin、padding来实现列、行间距
-  }, [style, hiddenStyle]);
+    return { ...backgroundStyle, ...style, flexWrap: 'wrap', gap: '0px', ...hiddenStyle }; // IE不支持gap属性，所以通过margin、padding来实现列、行间距
+  }, [style, hiddenStyle, backgroundStyle]);
   const myChildren = useMemo(() => {
     const { colSpace, grid, colSpan, rowSpace } = layoutOptions || {};
     if (Array.isArray(children) && children.length > 0) {
@@ -57,7 +71,7 @@ const Layout: LingXiFC<LayoutProps> = props => {
                       canDrag: false,
                       style: {
                         ...targetChild?.props?.style,
-                        // maxWidth: '100%', // // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
+                        maxWidth: '100%', // // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
                       },
                     },
                   };
@@ -89,7 +103,7 @@ const Layout: LingXiFC<LayoutProps> = props => {
           canDrag: false,
           style: {
             ...targetChild?.props?.style,
-            // maxWidth: '100%', // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
+            maxWidth: '100%', // 一级的普通容器用户会自定义，超过最大的会影响栅格布局，和UI确定最大宽度就为100%
           },
         },
       };

package/lib/pcpublic/src/components/pcfactory/src/Layout/utils.ts

@@ -3,12 +3,11 @@ export const findItemsSumThanNum = (array: string[] | any[], targetSum: number)
   const result: any[][] = [];
   if (array && Array.isArray(array)) {
     const newArray = array.filter(item => item).map(num => parseInt(num, 10));
-    newArray.forEach(item => {
+    newArray.forEach((item) => {
       if (next <= newArray.length && item) {
         let sum = newArray[next];
         let endIndex = next + 1;
-        if (sum >= targetSum) {
-          // 当前这个值超过最大值
+        if (sum >= targetSum) { // 当前这个值超过最大值
           result.push(newArray.slice(next, endIndex));
           next = endIndex;
         } else {
@@ -16,12 +15,10 @@ export const findItemsSumThanNum = (array: string[] | any[], targetSum: number)
             sum += newArray[endIndex];
             endIndex += 1;
           }
-          if (sum === targetSum) {
-            // 刚好等于的情况，则要包含下一个位置
+          if (sum === targetSum) { // 刚好等于的情况，则要包含下一个位置
             result.push(newArray.slice(next, endIndex));
             next = endIndex;
-          } else if (sum > targetSum) {
-            // 超过最大值，则只要取前面的位置值
+          } else if (sum > targetSum) { // 超过最大值，则只要取前面的位置值
             result.push(newArray.slice(next, endIndex - 1));
             next = endIndex - 1;
           } else if (endIndex === newArray.length) {