feat: 所有组件添加公共属性显示和隐藏，用于处理显隐逻辑

packages/editor/src/components/SetterRender/SetterRender.tsx

@@ -105,6 +105,13 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
           </Form.Item>
         );
       })}
+      {/* 公共属性 */}
+      <h2 className={styles.title} key="visibleTitle">
+        <span style={{ marginRight: 10 }}>组件显隐</span>
+      </h2>
+      <Form.Item key="showOrHide" name="showOrHide" label="显示条件">
+        <VariableBindInput />
+      </Form.Item>
     </>
   );
 });

packages/editor/src/components/VariableBind/VariableSelect.tsx

@@ -220,6 +220,7 @@ const SelectVariableModal = ({ onSelect }: { onSelect: (record: any) => void },
                 <div>
                   <p>1. 默认支持普通变量定义，最终会返回该解析后的变量值：variable.current </p>
                   <p>2. 支持三元表达式：userName === 'jack' ? 1 : 2 </p>
+                  <p>2. 支持布尔值：true ，最终会被解析会true变量进行返回。</p>
                   <p>3. 支持逻辑判断：if( a {'>'} 1 ) return 1; return 2 </p>
                   <p>4. 支持函数function定义：function getName(){'{ return "jack" } '}</p>
                   <p>5. 定义函数的时候，不支持自定义参数，参数只能是从右侧选择的变量或者表单对象，系统会自动解析。</p>

packages/editor/src/components/VsEditor.tsx

@@ -23,16 +23,6 @@ export default function VsEditor({ height, language, value, onChange }: any) {
         };
       },
     });
-    // setTimeout(() => {
-    //   // 创建一个范围，表示要插入文本的位置（这里范围实际上是一个点）
-    //   const range = new editorRef.current.monaco.Range(5, 4, 5, 8);
-
-    //   // 准备编辑操作
-    //   const edit = { range, text: '99999', forceMoveMarkers: true };
-
-    //   // 应用编辑操作
-    //   editorRef.current.editor.executeEdits('my-source', [edit]);
-    // }, 10000);
   }, [monaco]);
   function createDependencyProposals(range: any) {
     if (!monaco) return [];

packages/editor/src/packages/Basic/CountDown/CountDown.tsx

@@ -3,6 +3,7 @@ import { Statistic } from 'antd';
 import { ComponentType } from '@/packages/types';
 import * as icons from '@ant-design/icons';
 import { message } from '@/utils/AntdGlobal';
+import { omit } from 'lodash-es';
 
 /**
  *
@@ -53,7 +54,7 @@ const CountDown = ({ id, type, config, onChange, onFinish }: ComponentType, ref:
     visible && (
       <Statistic.Countdown
         style={config.style}
-        {...config.props}
+        {...omit(config.props, ['script', 'format', 'prefix', 'suffix'])}
         value={text}
         format={config.props?.format || undefined}
         prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}

packages/editor/src/packages/Basic/Icon/Icon.tsx

@@ -12,6 +12,7 @@ const MImage = (
     id,
     type,
     config,
+    onClick,
   }: ComponentType<{
     icon: string;
     style?: React.CSSProperties;
@@ -30,10 +31,21 @@ const MImage = (
       },
     };
   });
+
+  const handleClick = () => {
+    onClick?.();
+  };
   const iconComp = Icons[config.props.icon as keyof typeof Icons];
   return (
     visible && (
-      <Icon component={iconComp as React.ForwardRefExoticComponent<any>} style={config.style} {...config.props} data-id={id} data-type={type} />
+      <Icon
+        component={iconComp as React.ForwardRefExoticComponent<any>}
+        style={config.style}
+        {...config.props}
+        data-id={id}
+        data-type={type}
+        onClick={handleClick}
+      />
     )
   );
 };

packages/editor/src/packages/Basic/Icon/Schema.tsx

@@ -35,7 +35,9 @@ export default {
       spin: false,
     },
     // 组件样式
-    style: {},
+    style: {
+      fontSize: 24,
+    },
   },
   // 组件事件
   events: [

packages/editor/src/packages/Basic/Statistic/Statistic.tsx

@@ -3,6 +3,7 @@ import { Statistic } from 'antd';
 import { ComponentType } from '@/packages/types';
 import * as icons from '@ant-design/icons';
 import { message } from '@/utils/AntdGlobal';
+import { omit } from 'lodash-es';
 
 /**
  *
@@ -48,7 +49,7 @@ const MStatistic = ({ id, type, config }: ComponentType, ref: any) => {
     visible && (
       <Statistic
         style={config.style}
-        {...config.props}
+        {...omit(config.props, ['script', 'prefix', 'suffix'])}
         value={text}
         prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}
         suffix={config.props.suffix ? React.createElement(iconsList[config.props.suffix]) : null}

packages/editor/src/packages/Basic/Text/Text.tsx

@@ -4,6 +4,7 @@ import dayjs from 'dayjs';
 import { ComponentType } from '@/packages/types';
 import { formatNumber } from '@/packages/utils/util';
 import { message } from '@/utils/AntdGlobal';
+import { omit } from 'lodash-es';
 
 /**
  *
@@ -60,7 +61,7 @@ const MText = ({ id, type, config }: ComponentType, ref: any) => {
 
   return (
     visible && (
-      <Typography.Text style={config.style} {...config.props} text={undefined} data-id={id} data-type={type}>
+      <Typography.Text style={config.style} {...omit(config.props, ['script'])} text={undefined} data-id={id} data-type={type}>
         {text}
       </Typography.Text>
     )

packages/editor/src/packages/MarsRender/MarsRender.tsx

@@ -9,6 +9,7 @@ import { produce } from 'immer';
 import dayjs from 'dayjs';
 import * as antd from 'antd';
 import { isNull, loadStyle, renderFormula } from '@/packages/utils/util';
+import { omit } from 'lodash-es';
 import './index.less';
 
 /**
@@ -143,14 +144,14 @@ export const Material = memo(({ item }: { item: ComItemType }) => {
     return eventFunction;
   };
 
-  if (Component) {
+  if (Component && config?.props.showOrHide !== false) {
     return (
       <Suspense fallback={<antd.Spin spinning={true} tip="加载中..."></antd.Spin>}>
         <Component
           className={['mars-component']} // 暂时还没用，日后可能会用
           id={item.id}
           type={item.type}
-          config={config}
+          config={{ ...config, props: { ...omit(config?.props, ['showOrHide']) } }}
           elements={item.elements || []}
           // 把事件函数传递给子组件，子组件触发对应事件时，会执行回调函数
           {...createEvents()}

packages/materials/Basic/CountDown/CountDown.tsx

@@ -3,7 +3,7 @@ import { Statistic } from 'antd';
 import { ComponentType } from '../../types';
 import * as icons from '@ant-design/icons';
 import { message } from '../../utils/AntdGlobal';
-
+import { omit } from 'lodash-es';
 /**
  *
  * @param props 组件本身属性
@@ -53,7 +53,7 @@ const CountDown = ({ config, onChange, onFinish }: ComponentType, ref: any) => {
     visible && (
       <Statistic.Countdown
         style={config.style}
-        {...config.props}
+        {...omit(config.props, ['script', 'format', 'prefix', 'suffix'])}
         value={text}
         format={config.props?.format || undefined}
         prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}

packages/materials/Basic/Icon/Icon.tsx

@@ -9,9 +9,8 @@ import { ComponentType } from '../../types';
  */
 const MIcon = (
   {
-    id,
-    type,
     config,
+    onClick,
   }: ComponentType<{
     icon: string;
     style?: React.CSSProperties;
@@ -30,7 +29,14 @@ const MIcon = (
       },
     };
   });
+
+  const handleClick = () => {
+    onClick?.();
+  };
+
   const iconComp = Icons[config.props.icon as keyof typeof Icons];
-  return visible && <Icon component={iconComp as React.ForwardRefExoticComponent<any>} style={config.style} {...config.props} />;
+  return (
+    visible && <Icon component={iconComp as React.ForwardRefExoticComponent<any>} style={config.style} {...config.props} onClick={handleClick} />
+  );
 };
 export default forwardRef(MIcon);

packages/materials/Basic/Statistic/Statistic.tsx

@@ -3,7 +3,7 @@ import { Statistic } from 'antd';
 import { ComponentType } from '../../types';
 import * as icons from '@ant-design/icons';
 import { message } from '../../utils/AntdGlobal';
-
+import { omit } from 'lodash-es';
 /**
  *
  * @param props 组件本身属性
@@ -48,7 +48,7 @@ const MStatistic = ({ config }: ComponentType, ref: any) => {
     visible && (
       <Statistic
         style={config.style}
-        {...config.props}
+        {...omit(config.props, ['script', 'prefix', 'suffix'])}
         value={text}
         prefix={config.props.prefix ? React.createElement(iconsList[config.props.prefix]) : null}
         suffix={config.props.suffix ? React.createElement(iconsList[config.props.suffix]) : null}

packages/materials/Basic/Text/Text.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import { ComponentType } from '../../types';
 import { formatNumber } from '../../utils/util';
 import { message } from '../../utils/AntdGlobal';
-
+import { omit } from 'lodash-es';
 /**
  *
  * @param props 组件本身属性
@@ -59,7 +59,7 @@ const MText = ({ config }: ComponentType, ref: any) => {
 
   return (
     visible && (
-      <Typography.Text style={config.style} {...config.props}>
+      <Typography.Text style={config.style} {...omit(config.props, ['script'])}>
         {text}
       </Typography.Text>
     )

packages/materials/MarsRender/MarsRender.tsx

@@ -9,6 +9,7 @@ import { produce } from 'immer';
 import dayjs from 'dayjs';
 import * as antd from 'antd';
 import { isNull, loadStyle, renderFormula } from '../utils/util';
+import { omit } from 'lodash-es';
 import './index.less';
 
 let cachedComponents: any = {};
@@ -163,13 +164,13 @@ export const Material = memo(({ item }: { item: ComItemType }) => {
     return eventFunction;
   };
 
-  if (Component) {
+  if (Component && config?.props.showOrHide !== false) {
     if (cached) {
       return (
         <Component
           className={['mars-component']} // 暂时还没用，日后可能会用
           id={item.id}
-          config={config}
+          config={{ ...config, props: { ...omit(config?.props, ['showOrHide']) } }}
           elements={item.elements || []}
           // 把事件函数传递给子组件，子组件触发对应事件时，会执行回调函数
           {...createEvents()}
@@ -184,7 +185,7 @@ export const Material = memo(({ item }: { item: ComItemType }) => {
           <Component
             className={['mars-component']} // 暂时还没用，日后可能会用
             id={item.id}
-            config={config}
+            config={{ ...config, props: { ...omit(config?.props, ['showOrHide']) } }}
             elements={item.elements || []}
             // 把事件函数传递给子组件，子组件触发对应事件时，会执行回调函数
             {...createEvents()}