From d5242a57e275466e77a7a66f9d010a04616e09da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=B3=E7=95=94=E4=B8=80=E8=A7=92?= Date: Thu, 31 Oct 2024 14:13:15 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/SetterRender/SetterRender.tsx | 13 +++++++- .../editor/src/packages/Basic/Image/Image.tsx | 7 ++-- .../editor/src/packages/Basic/Text/Text.tsx | 8 +++-- .../src/packages/Scene/MarsTable/Schema.tsx | 13 ++++++++ packages/editor/src/packages/types/index.ts | 5 +++ packages/editor/src/pages/editor/editor.tsx | 33 ++++++++----------- packages/materials/Basic/Image/Image.tsx | 7 ++-- packages/materials/Basic/Text/Text.tsx | 8 +++-- packages/materials/Page/Page.tsx | 2 +- 9 files changed, 64 insertions(+), 32 deletions(-) diff --git a/packages/editor/src/components/SetterRender/SetterRender.tsx b/packages/editor/src/components/SetterRender/SetterRender.tsx index 49ba4c18..6f92df40 100644 --- 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 ( + +

+ {item.label} + +

+ + ); + } return (

{item.label} @@ -42,6 +52,7 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => { ) : null} + {/* 标题增加跳转链接 */} {item.link ? ( diff --git a/packages/editor/src/packages/Basic/Image/Image.tsx b/packages/editor/src/packages/Basic/Image/Image.tsx index 939752b3..97d38297 100644 --- 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 && ; + const handleClick = () => { + onClick?.(); + }; + return visible && ; }; export default forwardRef(MImage); diff --git a/packages/editor/src/packages/Basic/Text/Text.tsx b/packages/editor/src/packages/Basic/Text/Text.tsx index 11cf4aa9..9685b4c9 100644 --- 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 && ( - + {text} ) diff --git a/packages/editor/src/packages/Scene/MarsTable/Schema.tsx b/packages/editor/src/packages/Scene/MarsTable/Schema.tsx index 2006d1f6..b73bd516 100644 --- 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: ( + <> +

默认结构：{"{ code: 0, data: { list: [], pageNum:1, pageSize: 10, total: 10 }, msg: '' }"}

+

1. 如果接口返回不是code/data/msg，可以在接口配置中修改映射。

+

2. 如果接口返回分页结构不是pageNum/pageSize/total，可以在此处修改映射。

+

3. 如果接口分页结构嵌套的有对象，支持链式写法，如：page.pageNum

+

4. 如果接口分页对象在data外面，需要再拦截器里面或者脚本里面处理，把分页和list放在data里面。

+ + ), + }, }, { type: 'Input', diff --git a/packages/editor/src/packages/types/index.ts b/packages/editor/src/packages/types/index.ts index 8c3d7feb..f58693fe 100644 --- 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 index 7e48e15c..d730309c 100644 --- 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 index 23a2e538..a3b1172c 100644 --- 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 && ; + const handleClick = () => { + onClick?.(); + }; + return visible && ; }; export default forwardRef(MImage); diff --git a/packages/materials/Basic/Text/Text.tsx b/packages/materials/Basic/Text/Text.tsx index 482b2b35..fc4de2c3 100644 --- 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 && ( - + {text} ) diff --git a/packages/materials/Page/Page.tsx b/packages/materials/Page/Page.tsx index 42d27157..a4ea15ad 100644 --- 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
{}
; }; export default Page;