fix: 修复问题

JackySoft · Dec 18, 2024 · d5242a5 · d5242a5
1 parent 4db35c7
commit d5242a5
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 32 deletions.
diff --git a/packages/editor/src/components/SetterRender/SetterRender.tsx b/packages/editor/src/components/SetterRender/SetterRender.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance, Tooltip } from 'antd';
+import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance, Tooltip, Popover } from 'antd';
 import * as icons from '@ant-design/icons';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { SchemaType } from '@/packages/types';
@@ -33,6 +33,16 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
         const key = item.key || item.name?.toString() || item.label?.toString() + index.toString();
         let FormControl = <></>;
         if (item.type == 'Title') {
+          if (item.popover) {
+            return (
+              <Popover title={item.popover?.title} content={item.popover.content} placement={item.popover.placement || 'left'}>
+                <h2 className={styles.title} key={key}>
+                  <span style={{ marginRight: 10 }}>{item.label}</span>
+                  <QuestionCircleOutlined />
+                </h2>
+              </Popover>
+            );
+          }
           return (
             <h2 className={styles.title} key={key}>
               <span style={{ marginRight: 10 }}>{item.label}</span>
@@ -42,6 +52,7 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => {
                   <QuestionCircleOutlined />
                 </Tooltip>
               ) : null}
+
               {/* 标题增加跳转链接 */}
               {item.link ? (
                 <a href={item.link.url} target="_blank" style={{ fontSize: 12 }}>

diff --git a/packages/editor/src/packages/Basic/Image/Image.tsx b/packages/editor/src/packages/Basic/Image/Image.tsx
@@ -8,7 +8,7 @@ import { useState, useImperativeHandle, forwardRef } from 'react';
  * @param style 组件样式
  * @returns
  */
-const MImage = ({ id, type, config }: ComponentType, ref: any) => {
+const MImage = ({ id, type, config, onClick }: ComponentType, ref: any) => {
   const [visible, setVisible] = useState(true);
   // 对外暴露方法
   useImperativeHandle(ref, () => {
@@ -21,6 +21,9 @@ const MImage = ({ id, type, config }: ComponentType, ref: any) => {
       },
     };
   });
-  return visible && <Image style={config.style} {...config.props} data-id={id} data-type={type} />;
+  const handleClick = () => {
+    onClick?.();
+  };
+  return visible && <Image style={config.style} {...config.props} data-id={id} data-type={type} onClick={handleClick} />;
 };
 export default forwardRef(MImage);
diff --git a/packages/editor/src/packages/Basic/Text/Text.tsx b/packages/editor/src/packages/Basic/Text/Text.tsx
@@ -12,7 +12,7 @@ import { omit } from 'lodash-es';
  * @param style 组件样式
  * @returns
  */
-const MText = ({ id, type, config }: ComponentType, ref: any) => {
+const MText = ({ id, type, config, onClick }: ComponentType, ref: any) => {
   const [text, setText] = useState('');
   const [visible, setVisible] = useState(true);
 
@@ -58,10 +58,12 @@ const MText = ({ id, type, config }: ComponentType, ref: any) => {
       },
     };
   });
-
+  const handleClick = () => {
+    onClick?.();
+  };
   return (
     visible && (
-      <Typography.Text style={config.style} {...omit(config.props, ['script', 'text'])} data-id={id} data-type={type}>
+      <Typography.Text style={config.style} {...omit(config.props, ['script', 'text'])} onClick={handleClick} data-id={id} data-type={type}>
         {text}
       </Typography.Text>
     )

diff --git a/packages/editor/src/packages/Scene/MarsTable/Schema.tsx b/packages/editor/src/packages/Scene/MarsTable/Schema.tsx
@@ -155,6 +155,19 @@ export default {
       type: 'Title',
       label: '字段映射',
       key: 'fieldmap',
+      popover: {
+        title: '结构说明',
+        placement: 'left',
+        content: (
+          <>
+            <p>默认结构：{"{ code: 0, data: { list: [], pageNum:1, pageSize: 10, total: 10 }, msg: '' }"}</p>
+            <p>1. 如果接口返回不是code/data/msg，可以在接口配置中修改映射。</p>
+            <p>2. 如果接口返回分页结构不是pageNum/pageSize/total，可以在此处修改映射。</p>
+            <p>3. 如果接口分页结构嵌套的有对象，支持链式写法，如：page.pageNum</p>
+            <p>4. 如果接口分页对象在data外面，需要再拦截器里面或者脚本里面处理，把分页和list放在data里面。</p>
+          </>
+        ),
+      },
     },
     {
       type: 'Input',

diff --git a/packages/editor/src/packages/types/index.ts b/packages/editor/src/packages/types/index.ts
@@ -301,6 +301,11 @@ export interface SchemaType {
   name?: (string | number)[];
   // tooltips
   tooltip?: string;
+  popover?: {
+    title: string;
+    content: string | React.ReactNode;
+    placement: 'top' | 'left' | 'right' | 'bottom';
+  };
   // link
   link?: {
     url: string;

diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEvent, useState, useEffect, memo } from 'react';
-import { useParams, useBlocker } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { ConfigProvider, FloatButton, Image, Popover } from 'antd';
 import { CommentOutlined, InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { useDrop } from 'react-dnd';
@@ -11,7 +11,7 @@ import { createId, getElement } from '@/utils/util';
 import storage from '@/utils/storage';
 import { getPageDetail } from '@/api';
 import Toolbar from '@/components/Toolbar/Toolbar';
-import { message, Modal } from '@/utils/AntdGlobal';
+import { message } from '@/utils/AntdGlobal';
 import { usePageStore } from '@/stores/pageStore';
 import { PageConfig } from '@/packages/Page';
 import './index.less';
@@ -94,25 +94,18 @@ const Editor = () => {
     };
   }, [id]);
 
-  const blocker = useBlocker(({ currentLocation, nextLocation }) => {
-    return currentLocation.pathname !== nextLocation.pathname;
-  });
-
-  // 页面返回时，提示用户是否离开
+  // 当页面和用户有交互时，增加刷新和返回提示。
   useEffect(() => {
-    if (blocker.state === 'blocked') {
-      Modal.confirm({
-        title: '确认离开',
-        content: '是否确认离开当前页面？',
-        onOk: () => {
-          blocker.proceed();
-        },
-        onCancel: () => {
-          blocker.reset();
-        },
-      });
-    }
-  }, [blocker]);
+    window.addEventListener('beforeunload', (event) => {
+      // Cancel the event as stated by the standard.
+      event.preventDefault();
+      // Chrome requires returnValue to be set.
+      event.returnValue = '';
+    });
+    return () => {
+      window.removeEventListener('beforeunload', () => {});
+    };
+  }, []);
 
   // 拖拽接收
   const [, drop] = useDrop({

diff --git a/packages/materials/Basic/Image/Image.tsx b/packages/materials/Basic/Image/Image.tsx
@@ -8,7 +8,7 @@ import { useState, useImperativeHandle, forwardRef } from 'react';
  * @param style 组件样式
  * @returns
  */
-const MImage = ({ config }: ComponentType, ref: any) => {
+const MImage = ({ config, onClick }: ComponentType, ref: any) => {
   const [visible, setVisible] = useState(true);
   // 对外暴露方法
   useImperativeHandle(ref, () => {
@@ -21,6 +21,9 @@ const MImage = ({ config }: ComponentType, ref: any) => {
       },
     };
   });
-  return visible && <Image style={config.style} {...config.props} />;
+  const handleClick = () => {
+    onClick?.();
+  };
+  return visible && <Image style={config.style} {...config.props} onClick={handleClick} />;
 };
 export default forwardRef(MImage);
diff --git a/packages/materials/Basic/Text/Text.tsx b/packages/materials/Basic/Text/Text.tsx
@@ -11,7 +11,7 @@ import { omit } from 'lodash-es';
  * @param style 组件样式
  * @returns
  */
-const MText = ({ config }: ComponentType, ref: any) => {
+const MText = ({ config, onClick }: ComponentType, ref: any) => {
   const [text, setText] = useState('');
   const [visible, setVisible] = useState(true);
   useEffect(() => {
@@ -56,10 +56,12 @@ const MText = ({ config }: ComponentType, ref: any) => {
       },
     };
   });
-
+  const handleClick = () => {
+    onClick?.();
+  };
   return (
     visible && (
-      <Typography.Text style={config.style} {...omit(config.props, ['script', 'text'])}>
+      <Typography.Text style={config.style} {...omit(config.props, ['script', 'text'])} onClick={handleClick}>
         {text}
       </Typography.Text>
     )

diff --git a/packages/materials/Page/Page.tsx b/packages/materials/Page/Page.tsx
@@ -26,7 +26,7 @@ const Page: React.FC = () => {
         handleActionFlow(event.actions, {});
       }
     });
-  }, []);
+  }, [config.events]);
   return <div style={config.style}>{<MarsRender elements={elements || []} />}</div>;
 };
 export default Page;