@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/RemoteComponent/components/VueRender.tsx

@@ -1,28 +1,26 @@
 import React from 'react';
-import { ReactLoadVue } from '@lingxiteam/load-framework';
 import { LingXiFC } from '@lingxiteam/types';
+import { ReactLoadVue } from '@lingxiteam/load-framework';
 import { Empty, Spin } from 'antd';
 
 export interface VueRenderProps {
   url: string;
   customProps: any;
-  engineType: 'editor' | 'engine';
+  engineType: 'editor' | 'engine'
 }
 
-const VueRender: LingXiFC<VueRenderProps> = props => {
+const VueRender:LingXiFC<VueRenderProps> = props => {
   const { url, customProps, engineType, getEngineApis, ...restProps } = props;
   const { getLocale = () => 'Fish远程组件加载失败' } = getEngineApis?.() || {};
-  return (
-    <ReactLoadVue
-      {...restProps}
-      url={url}
-      lxApi={{ getEngineApis, engineType }}
-      moduleProps={customProps}
-      onError={console.log}
-      loading={() => <Spin />}
-      fallback={() => <Empty description={getLocale?.('RemoteComponent.fail')} image={Empty.PRESENTED_IMAGE_SIMPLE} />}
-    />
-  );
+  return <ReactLoadVue
+    {...restProps}
+    url={url}
+    lxApi={{ getEngineApis, engineType }}
+    moduleProps={customProps}
+    onError={console.log}
+    loading={() => <Spin />}
+    fallback={() => <Empty description={getLocale?.('RemoteComponent.fail')} image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+  />;
 };
 
 export default VueRender;

package/lib/pcpublic/src/components/pcfactory/src/RemoteComponent/constant.ts

@@ -1,5 +1,5 @@
-import FishRender from './components/FishRender';
 import ReactRender from './components/ReactRender';
+import FishRender from './components/FishRender';
 import VueRender from './components/VueRender';
 
 /**
@@ -7,16 +7,16 @@ import VueRender from './components/VueRender';
  * @param object
  * @param otherArgs
  */
-export function mergeGetter<T extends Record<string, any>, S1 extends Record<string, any>, S2 extends Record<string, any>>(
-  object: T,
-  source1: S1,
-  ...args: S2[]
-) {
+export function mergeGetter<
+  T extends Record<string, any>,
+  S1 extends Record<string, any>,
+  S2 extends Record<string, any>,
+>(object: T, source1: S1, ...args: S2[]) {
   const target: Record<string, any> = object || {};
 
   // 合并ref 保持getter对象不被转义
   const merge = (o: Record<string, any> = {}) => {
-    Object.keys(o).forEach(key => {
+    Object.keys(o).forEach((key) => {
       const descriptor = Object.getOwnPropertyDescriptor(o, key);
       if (descriptor) {
         Object.defineProperty(target, key, descriptor!);
@@ -31,13 +31,14 @@ export function mergeGetter<T extends Record<string, any>, S1 extends Record<str
 
   const sources: (S1 | S2)[] = [source1, ...args];
 
-  sources.forEach(source => {
+  sources.forEach((source) => {
     merge(source);
   });
 
   return target as any;
 }
 
+
 export const RemoteComponentMap = {
   React: ReactRender,
   Vue: VueRender,

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

@@ -1,9 +1,9 @@
+import React, { useImperativeHandle, useState, useRef } from 'react';
+import { useDeepCompareEffect } from '../utils/ahooks';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import { createRequires } from '@paciolan/remote-component/dist/createRequires';
 import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
-import React, { useImperativeHandle, useRef, useState } from 'react';
 import { useListenProps } from '../utils';
-import { useDeepCompareEffect } from '../utils/ahooks';
 import { mergeGetter, RemoteComponentMap } from './constant';
 
 export const getUseRemoteComponent = (config: any) => {
@@ -20,64 +20,75 @@ export interface MyRemoteComponentProps {
   type?: 'React' | 'Vue' | 'Fish';
 }
 
-const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>((props, ref) => {
-  const { url, customProps: myProps, fileCode, associatedType = 'file', getEngineApis, visible = true, type = 'React', ...restProps } = props;
+const RemoteComponent = LingxiForwardRef<any, MyRemoteComponentProps>(
+  (props, ref) => {
+    const {
+      url,
+      customProps: myProps,
+      fileCode,
+      associatedType = 'file',
+      getEngineApis,
+      visible = true,
+      type = 'React',
+      ...restProps
+    } = props;
 
-  const engineApis = getEngineApis?.() || {};
+    const engineApis = getEngineApis?.() || {};
 
-  const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
+    const [remoteUrl, setRemoteUrl] = useState<string>(url || '');
 
-  const [customProps, setProps] = useListenProps<any>(myProps);
-  const [myRefs, setMyRefs] = useState<any>();
-  const isDid = useRef(false);
+    const [customProps, setProps] = useListenProps<any>(myProps);
+    const [myRefs, setMyRefs] = useState<any>();
+    const isDid = useRef(false);
 
-  useImperativeHandle(
-    ref,
-    () =>
-      mergeGetter(myRefs || {}, {
-        setCompProps: (params: any) => {
-          setProps({ ...customProps, ...params });
-        },
-        setSrc: (src: string) => {
-          if (src.startsWith('http')) {
-            setRemoteUrl(src);
-          } else {
-            // 怀疑是文件id
-            setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
-          }
-        },
-      }),
-    [myRefs]
-  );
-  useDeepCompareEffect(() => {
-    // 如果是远程服务组件
-    if (fileCode && associatedType === 'file') {
-      setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
-    } else if (url && associatedType === 'url') {
-      setRemoteUrl(url);
+    useImperativeHandle(
+      ref,
+      () =>
+        mergeGetter(myRefs || {}, {
+          setCompProps: (params: any) => {
+            setProps({ ...customProps, ...params });
+          },
+          setSrc: (src: string) => {
+            if (src.startsWith('http')) {
+              setRemoteUrl(src);
+            } else {
+              // 怀疑是文件id
+              setRemoteUrl(engineApis?.getAppFileUrlByFileCode(src));
+            }
+          },
+        }),
+      [myRefs]
+    );
+    useDeepCompareEffect(() => {
+      // 如果是远程服务组件
+      if (fileCode && associatedType === 'file') {
+        setRemoteUrl(engineApis?.getAppFileUrlByFileCode(fileCode));
+      } else if (url && associatedType === 'url') {
+        setRemoteUrl(url);
+      }
+    }, [url, fileCode]);
+
+    if (!visible) {
+      return <></>;
     }
-  }, [url, fileCode]);
+    const Component = RemoteComponentMap[type];
 
-  if (!visible) {
-    return <></>;
+    return (
+      <Component
+        engineType="engine"
+        {...restProps}
+        customProps={customProps}
+        url={remoteUrl}
+        getEngineApis={getEngineApis}
+        forwardRef={(refs: any) => {
+          if (refs && isDid.current === false) {
+            isDid.current = true;
+            setMyRefs(refs);
+          }
+        }}
+      />
+    );
   }
-  const Component = RemoteComponentMap[type];
-
-  return (
-    <Component
-      engineType="engine"
-      {...restProps}
-      customProps={customProps}
-      url={remoteUrl}
-      getEngineApis={getEngineApis}
-      forwardRef={(refs: any) => {
-        if (refs && isDid.current === false) {
-          isDid.current = true;
-          setMyRefs(refs);
-        }
-      }}
-    />
-  );
-});
+);
 
 export default RemoteComponent;

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

@@ -1,19 +1,32 @@
+import React, { CSSProperties } from 'react';
 import { Result as AntdResult } from 'antd';
-import React from 'react';
 import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+import { LingXiFC } from '@lingxiteam/types';
+import classNames from 'classnames';
 
 export interface MyResultProps {
   status: 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
   title: string;
   subTitle: string;
-  style?: any;
   visible: boolean;
+  backgroundType?: any;
+  style: CSSProperties;
 }
 
-const Result: React.FC<MyResultProps> = props => {
-  const { status, title, subTitle, visible, style, ...restProps } = props;
+const Result: LingXiFC<MyResultProps> = (props) => {
+  const { status, title, subTitle, visible, getEngineApis, $$componentItem, backgroundType, style, className, ...restProps } = props;
   const finalStyle = useHiddenStyle(visible, style);
-  return <AntdResult status={status} title={title} subTitle={subTitle} style={finalStyle} {...restProps} />;
+  const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis: getEngineApis?.(), appId: $$componentItem?.appId, mode: 'engine' });
+
+  return <AntdResult
+    className={classNames(className, 'ued-result')}
+    style={{ ...backgroundStyle, ...finalStyle }}
+    status={status}
+    title={title}
+    subTitle={subTitle}
+    {...restProps}
+  />;
 };
 
 export default Result;

package/lib/pcpublic/src/components/pcfactory/src/RichTextEditor/LcdpUeditorMain.tsx

@@ -4,24 +4,35 @@ import { renderRichText } from '../utils/renderReadOnly';
 import LcdpUeditor from '@lingxiteam/lcdp-ueditor-react';
 import { ILcdpUeditorInst } from '@lingxiteam/lcdp-ueditor-react/es/type';
 import { LingXiFC } from '@lingxiteam/types';
-import React, { useMemo, useRef } from 'react';
-import { DEFAULT_TOOLBARS, DEFAULT_TOOLBARS_GROUP } from './const';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { DEFAULT_TOOLBARS, DEFAULT_TOOLBARS_GROUP, BOTTOM_TOOLBAR_CODES, BOTTOM_TOOLBAR_MAP } from './const';
 import IdleContainer from '../utils/IdleContainer';
+import { getOrSaveData } from '../Table/utils/indexedDBHelper';
 
-const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
-  const { value, onChange, style, className, rootRef: ref, funcTypes, pasteplain = false, name } = props;
+const DBNAME = 'RICH_TEXT_EDITOR';
+
+const LcdpUeditorMain: LingXiFC <{[key: string]: any}> = (props => {
+  const { value, onChange, style, className, rootRef: ref, funcTypes, pasteplain = false, name,
+    $$componentItem,
+    exportFileName,
+  } = props;
   const editorRef = useRef<ILcdpUeditorInst | null>(null);
 
-  const engineApis = props.getEngineApis();
+  const { uid: compId } = $$componentItem || {};
+
+  const engineApis = props.getEngineApis() || {};
   const { getLocale, lang } = useLocale(engineApis);
-  const { onlySyncValue } = engineApis;
+  const { onlySyncValue, getUserInfo, customEngineApi } = engineApis as any || {};
+  const { userId = '' } = getUserInfo?.() || {};
+  const fatherBOFramerId = customEngineApi?.getFatherComId?.();
+  const [defaultSetting, updateDefaultSetting] = useState<any>();
+
 
   const { disabled, required, readOnly, formFieldsRef } = useCommonImperativeHandle(ref, props, {
-    setValue: (val: string) => {
+    setValue: (val:string) => {
       if (editorRef.current) {
         editorRef.current.setContent(val);
-        // 同步 hoc vlaue使用,解决值不同步问题
-        onlySyncValue(val);
+        onlySyncValue?.(val);
       } else {
         // 编辑器未挂载先设置到value
         onChange(val);
@@ -29,6 +40,7 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
     },
   });
 
+
   const finalRules = useMemo(
     () => [
       {
@@ -39,11 +51,20 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
     [required, name, lang]
   );
 
-  const toolbars = useMemo(() => {
+  const { toolbars, bottomTypes } = useMemo(() => {
     if (funcTypes) {
       const { accept = '' } = funcTypes;
       const filterBars: string[] = [];
       const checkBarArrs: string[] = accept.split(',').filter((str: string) => str.length);
+      
+      // 过滤出底部工具栏类型
+      const bottomTypes = checkBarArrs.filter(item =>
+        BOTTOM_TOOLBAR_CODES.includes(item as (typeof BOTTOM_TOOLBAR_CODES)[number])
+      ) as (typeof BOTTOM_TOOLBAR_CODES)[number][];
+      if (bottomTypes.length) {
+        bottomTypes.push(BOTTOM_TOOLBAR_MAP.CHINESE_COUNT, BOTTOM_TOOLBAR_MAP.CHAR_COUNT);
+      }
+      
       if (checkBarArrs.length) {
         DEFAULT_TOOLBARS_GROUP.forEach((rows: string[], index: number) => {
           let curItemCheckNum = 0;
@@ -60,13 +81,55 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
         if (filterBars[filterBars.length - 1] === '|') {
           filterBars.pop();
         }
-        return [filterBars];
+        return {
+          toolbars: [filterBars],
+          bottomTypes,
+        };
       }
-      return [[]];
+      return {
+        toolbars: [[]],
+        bottomTypes,
+      };
     }
-    return DEFAULT_TOOLBARS;
+    return {
+      toolbars: DEFAULT_TOOLBARS,
+      bottomTypes: [],
+    };
   }, [funcTypes]);
 
+  // 根据 bottomTypes 的 length 判断是否显示底部工具栏
+  const showBottom = bottomTypes.length > 0;
+
+  // 从缓存中取自定义列
+  useEffect(() => {
+    if (compId && showBottom) {
+      getOrSaveData({
+        appId: $$componentItem?.appId || '',
+        userId,
+        compId: fatherBOFramerId ? `${fatherBOFramerId}-${compId}` : compId,
+        save: false,
+      }, DBNAME).then((result: any) => {
+        const { SETTING } = result || {};
+        updateDefaultSetting(SETTING || {
+          formatSetting: {
+            headings: {
+              h1: { fontSize: '28px', fontFamily: '系统字体', fontWeight: 'bold', lineHeight: '1.3', color: '#1a202c' },
+              h2: { fontSize: '21px', fontFamily: '系统字体', fontWeight: '600', lineHeight: '1.3', color: '#1a202c' },
+              h3: { fontSize: '16px', fontFamily: '系统字体', fontWeight: '600', lineHeight: '1.3', color: '#1a202c' },
+              h4: { fontSize: '14px', fontFamily: '系统字体', fontWeight: '600', lineHeight: '1.3', color: '#1a202c' },
+              h5: { fontSize: '11px', fontFamily: '系统字体', fontWeight: '600', lineHeight: '1.3', color: '#1a202c' },
+              h6: { fontSize: '9px', fontFamily: '系统字体', fontWeight: '600', lineHeight: '1.3', color: '#1a202c' },
+            },
+            paragraph: { fontSize: '14px', fontFamily: '系统字体', fontWeight: 'normal', lineHeight: '1.7', color: '#2c3e50' },
+            lists: {
+              ul: { fontSize: '14px', fontFamily: '系统字体', fontWeight: 'normal', lineHeight: '1.7', color: '#2c3e50' },
+              ol: { fontSize: '14px', fontFamily: '系统字体', fontWeight: 'normal', lineHeight: '1.7', color: '#2c3e50' },
+            },
+          } });
+      });
+    }
+  }, [compId, showBottom, fatherBOFramerId]);
+
   const getLang = useMemo<any>(() => {
     const langStr = lang.toLowerCase();
     switch (langStr) {
@@ -78,7 +141,8 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
         return 'zh-cn';
     }
   }, [lang]);
-
+  
+  
   return (
     <IdleContainer>
       <FormFields
@@ -94,7 +158,7 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
         <LcdpUeditor
           lang={getLang}
           style={style}
-          onMount={(inst) => {
+          onMount={(inst: any) => {
             editorRef.current = inst;
           }}
           className={className}
@@ -106,15 +170,15 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
             height: props.height,
             maximumWords: props.maximumWords,
             pasteplain,
+            exportFileName,
           }}
           toolbars={toolbars}
-          uploadFunction={async (file) => {
+          uploadFunction={async (file: any) => {
             const formData = new FormData();
             formData.append('attach', file, file.name);
             const res: any = await engineApis?.service?.uploadFileByFetch(formData);
             if (res?.fileId) {
               const link = engineApis?.getAppFileUrlById(res?.fileId);
-              console.log(link, res.fileId);
               return new Promise((resolve, reject) => {
                 resolve({
                   state: 'SUCCESS',
@@ -130,10 +194,24 @@ const LcdpUeditorMain: LingXiFC<{ [key: string]: any }> = (props) => {
               });
             });
           }}
+          defaultSetting={defaultSetting}
+          onSettingChange={(setting: any) => {
+            // 修改数据的存储方法
+            getOrSaveData({
+              appId: props?.$$componentItem?.appId || '',
+              userId,
+              compId: fatherBOFramerId ? `${fatherBOFramerId}-${compId}` : compId,
+              save: true,
+              data: {
+                SETTING: setting,
+              },
+            }, DBNAME);
+          }}
+          bottomTypes={readOnly ? [] : bottomTypes}
         />
       </FormFields>
     </IdleContainer>
   );
-};
+});
 
 export default LcdpUeditorMain;

package/lib/pcpublic/src/components/pcfactory/src/RichTextEditor/const.ts

@@ -203,3 +203,24 @@ export const DEFAULT_TOOLBARS = [
     // "help",                // 帮助
   ],
 ];
+
+// 底部工具栏常量
+export const BOTTOM_TOOLBAR_MAP = {
+  CHINESE_COUNT: 'chineseCount',
+  CHAR_COUNT: 'charCount',
+  PAGE_WIDTH: 'pageWidth',
+  FORMAT_SETTING: 'formatSetting',
+  EXPORT_PDF: 'exportPdf',
+  FULL_SCREEN: 'fullScreen',
+  COPY: 'copy',
+} as const;
+
+export const BOTTOM_TOOLBAR_CODES = [
+  BOTTOM_TOOLBAR_MAP.CHINESE_COUNT,
+  BOTTOM_TOOLBAR_MAP.CHAR_COUNT,
+  BOTTOM_TOOLBAR_MAP.PAGE_WIDTH,
+  BOTTOM_TOOLBAR_MAP.FORMAT_SETTING,
+  BOTTOM_TOOLBAR_MAP.EXPORT_PDF,
+  BOTTOM_TOOLBAR_MAP.FULL_SCREEN,
+  BOTTOM_TOOLBAR_MAP.COPY,
+] as const;

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

@@ -14,7 +14,7 @@ export interface MyRowProps extends RowProps {
   getEngineApis?: any;
 }
 
-const MyRow: React.FC<MyRowProps> = props => {
+const MyRow: React.FC<MyRowProps> = (props) => {
   const {
     children,
     style,
@@ -30,12 +30,7 @@ const MyRow: React.FC<MyRowProps> = props => {
 
   const engineApis = getEngineApis?.() || {};
 
-  const { backgroundStyle } = useBackgroundStyle({
-    engineApis,
-    backgroundType,
-    appId: restProps?.appId,
-    mode: 'engine',
-  });
+  const { backgroundStyle } = useBackgroundStyle({ engineApis, backgroundType, appId: restProps?.appId, mode: 'engine' });
 
   const renderChildren = () => {
     // children可能是单个React元素（这种事情发生在普通的嵌套写法里）

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

@@ -1,7 +1,7 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
 import RowLoader from './loader';
 
-const Row = LingxiForwardRef<unknown, any>(props => {
+const Row = LingxiForwardRef<unknown, any>((props) => {
   // eslint-disable-next-line react/react-in-jsx-scope
   return <RowLoader {...props} />;
 });

package/lib/pcpublic/src/components/pcfactory/src/Row/loader.tsx

@@ -1,9 +1,13 @@
-import Loadable from 'react-loadable';
-import { LoadingComponennt } from '../utils/LoaderHelper';
+// import Loadable from 'react-loadable';
+// import { LoadingComponennt } from '../utils/LoaderHelper';
 
-const RowLoader = Loadable({
-  loader: async () => (await import(/* webpackChunkName: 'factory-Row' */ './Row')) as unknown as React.ComponentType<any>,
-  loading: LoadingComponennt,
-});
+// const RowLoader = Loadable({
+//   loader: async () => (await import/* webpackChunkName: 'factory-Row' */('./Row')) as unknown as React.ComponentType<any>,
+//   loading: LoadingComponennt,
+// });
 
-export default RowLoader;
+// export default RowLoader;
+
+import Row from './Row';
+
+export default Row;

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

@@ -87,7 +87,6 @@ const WrapperSelect: React.FC<WrapperSelectProps> = ({ children }) =>
 
 
 const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
-  console.log('Select', props);
   const {
     value: originValue,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -141,6 +140,7 @@ const Select = React.forwardRef<any, MySelectProps>((props, ref) => {
     $$componentItem,
     ...restProps
   } = props;
+
   const defaultValue = useMemo(() => {
     if ((_defaultValue === null || _defaultValue === '') && mode === 'multiple') {
       return undefined;