From 8abd8963d0fe2370aa618bcc53c6a1d538c5a42f Mon Sep 17 00:00:00 2001 From: JackySoft Date: Sun, 8 Sep 2024 20:50:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=201.=20=E6=96=B0=E5=A2=9EIcon=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E3=80=82=202.=E5=A2=9E=E5=8A=A0FormAction=E3=80=823.?= =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EventConfig/ActionModal/ActionModal.tsx | 33 +++++++++++++ .../EventConfig/ActionModal/FormAction.tsx | 39 +++++++++++++++ .../EventConfig/ActionModal/RequestAction.tsx | 2 +- .../components/SetterRender/SetterRender.tsx | 10 +++- packages/editor/src/config/components.ts | 5 ++ .../editor/src/packages/Basic/Icon/Icon.tsx | 40 +++++++++++++++ .../editor/src/packages/Basic/Icon/Schema.tsx | 49 +++++++++++++++++++ .../editor/src/packages/Basic/Icon/index.ts | 2 + packages/editor/src/packages/Basic/index.ts | 1 + .../Button/{Schema.tsx => Schema.ts} | 8 ++- .../FileUpload/{Schema.tsx => Schema.ts} | 8 ++- .../Functional/Tab/{Schema.tsx => Schema.ts} | 8 ++- packages/editor/src/packages/utils/action.ts | 19 ++++++- packages/materials/Basic/Icon/Icon.tsx | 36 ++++++++++++++ packages/materials/Basic/Icon/index.ts | 1 + 15 files changed, 241 insertions(+), 20 deletions(-) create mode 100644 packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx create mode 100644 packages/editor/src/packages/Basic/Icon/Icon.tsx create mode 100644 packages/editor/src/packages/Basic/Icon/Schema.tsx create mode 100644 packages/editor/src/packages/Basic/Icon/index.ts rename packages/editor/src/packages/Functional/Button/{Schema.tsx => Schema.ts} (93%) rename packages/editor/src/packages/Functional/FileUpload/{Schema.tsx => Schema.ts} (95%) rename packages/editor/src/packages/Functional/Tab/{Schema.tsx => Schema.ts} (87%) create mode 100644 packages/materials/Basic/Icon/Icon.tsx create mode 100644 packages/materials/Basic/Icon/index.ts diff --git a/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx b/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx index 3be1fa7..33c29dc 100644 --- a/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx +++ b/packages/editor/src/components/EventConfig/ActionModal/ActionModal.tsx @@ -3,6 +3,8 @@ import { forwardRef, useImperativeHandle, useState } from 'react'; // 页面 import JumpLinkAction from './JumpLinkAction'; import ReloadPageAction from './ReloadPageAction'; +// 表单 +import FormAction from './FormAction'; // 弹框 import OpenModalAction from './OpenModalAction'; import MessageAction from './MessageAction'; @@ -53,6 +55,37 @@ const ActionModal = (props: any, ref: any) => { }, ], }, + { + label: '表单', + key: 'form-nav', + children: [ + { + label: '表单重置', + key: 'formReset', + render: () => , + }, + { + label: '表单提交', + key: 'formSubmit', + render: () => , + }, + { + label: '表单验证', + key: 'formValidate', + render: () => , + }, + { + label: '表单赋值', + key: 'formAssignment', + render: () => , + }, + { + label: '获取表单值', + key: 'formGetValue', + render: () => , + }, + ], + }, { label: '弹框', key: 'modal-nav', diff --git a/packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx b/packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx new file mode 100644 index 0000000..1eb1840 --- /dev/null +++ b/packages/editor/src/components/EventConfig/ActionModal/FormAction.tsx @@ -0,0 +1,39 @@ +import { Form, Select, Divider } from 'antd'; +import { usePageStore } from '@/stores/pageStore'; +import styles from './index.module.less'; +const FormAction = () => { + // 页面组件 + const { modals } = usePageStore((state) => { + const modals: { id: string }[] = []; + Object.values(state.page.elementsMap).forEach((item) => { + if (item.type === 'SearchForm' || item.type === 'Form') { + modals.push({ + id: item.id, + }); + } + }); + return { + modals, + }; + }); + + return ( + <> +
+

说明

+

触发一个事件动作后，可以选择目标表单，调用该表单方法。

+ +
+ + + + + ); +}; +export default FormAction; diff --git a/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx b/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx index 749b5d3..8f8bc43 100644 --- a/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx +++ b/packages/editor/src/components/EventConfig/ActionModal/RequestAction.tsx @@ -14,7 +14,7 @@ const RequestAction = ({ type }: { type: 'request' | 'download' }) => { <>

说明

-

点击一个按钮，可以通过此行为来发送一个请求。

+

文件下载时，后端接口必须返回Blob对象才可以。

diff --git a/packages/editor/src/components/SetterRender/SetterRender.tsx b/packages/editor/src/components/SetterRender/SetterRender.tsx index c68b036..e6e2647 100644 --- a/packages/editor/src/components/SetterRender/SetterRender.tsx +++ b/packages/editor/src/components/SetterRender/SetterRender.tsx @@ -1,6 +1,7 @@ import React, { memo } from 'react'; -import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance } from 'antd'; +import { Form, Input, InputNumber, Radio, Select, Switch, Slider, FormInstance, Tooltip } from 'antd'; import * as icons from '@ant-design/icons'; +import { QuestionCircleOutlined } from '@ant-design/icons'; import { SchemaType } from '@/packages/types'; import { CaretDownOutlined } from '@ant-design/icons/lib'; import MColorPicker from '../ColorPicker'; @@ -33,7 +34,12 @@ const SetterRender = memo(({ attrs, form }: IAttrs) => { if (item.type == 'Title') { return (

- {item.label} + {item.label} + {item.tooltip ? ( + + + + ) : null}

); } else if (item.type == 'Input') { diff --git a/packages/editor/src/config/components.ts b/packages/editor/src/config/components.ts index 37d7496..d4d9da7 100644 --- a/packages/editor/src/config/components.ts +++ b/packages/editor/src/config/components.ts @@ -326,6 +326,11 @@ const components = [ name: '超链接', type: 'Link', }, + { + icon: '', + name: '图标', + type: 'Icon', + }, ], }, { diff --git a/packages/editor/src/packages/Basic/Icon/Icon.tsx b/packages/editor/src/packages/Basic/Icon/Icon.tsx new file mode 100644 index 0000000..ea2448e --- /dev/null +++ b/packages/editor/src/packages/Basic/Icon/Icon.tsx @@ -0,0 +1,40 @@ +import React, { useState, useImperativeHandle, forwardRef } from 'react'; +import Icon, * as Icons from '@ant-design/icons'; +import { ComponentType } from '@/packages/types'; +/** + * + * @param props 组件本身属性 + * @param style 组件样式 + * @returns + */ +const MImage = ( + { + id, + type, + config, + }: ComponentType<{ + icon: string; + style?: React.CSSProperties; + }>, + ref: any, +) => { + const [visible, setVisible] = useState(true); + // 对外暴露方法 + useImperativeHandle(ref, () => { + return { + show() { + setVisible(true); + }, + hide() { + setVisible(false); + }, + }; + }); + const iconComp = Icons[config.props.icon as keyof typeof Icons]; + return ( + visible && ( + } style={config.style} {...config.props} data-id={id} data-type={type} /> + ) + ); +}; +export default forwardRef(MImage); diff --git a/packages/editor/src/packages/Basic/Icon/Schema.tsx b/packages/editor/src/packages/Basic/Icon/Schema.tsx new file mode 100644 index 0000000..776e9db --- /dev/null +++ b/packages/editor/src/packages/Basic/Icon/Schema.tsx @@ -0,0 +1,49 @@ +/** + * 组件配置和属性值 + */ + +export default { + // 组件属性配置JSON + attrs: [ + { + type: 'Title', + label: '基础配置', + key: 'basic', + tooltip: '图标大小和颜色可在样式中修改字体颜色和大小', + }, + { + type: 'Icons', + label: '图标', + name: 'icon', + }, + { + type: 'InputNumber', + label: '旋转角度', + name: 'rotate', + }, + { + type: 'Switch', + label: '旋转动画', + name: 'spin', + }, + ], + config: { + // 组件默认属性值 + props: { + icon: 'GithubOutlined', + rotate: 0, + spin: false, + }, + // 组件样式 + style: {}, + }, + // 组件事件 + events: [ + { + value: 'handleClick', + name: '点击事件', + }, + ], + // 组件接口 + api: {}, +}; diff --git a/packages/editor/src/packages/Basic/Icon/index.ts b/packages/editor/src/packages/Basic/Icon/index.ts new file mode 100644 index 0000000..424d1b7 --- /dev/null +++ b/packages/editor/src/packages/Basic/Icon/index.ts @@ -0,0 +1,2 @@ +export { default as Icon } from './Icon'; +export { default as IconConfig } from './Schema'; diff --git a/packages/editor/src/packages/Basic/index.ts b/packages/editor/src/packages/Basic/index.ts index 708b0fa..2ba96f6 100644 --- a/packages/editor/src/packages/Basic/index.ts +++ b/packages/editor/src/packages/Basic/index.ts @@ -2,3 +2,4 @@ export { Image, ImageConfig } from './Image'; export { Text, TextConfig } from './Text'; export { Title, TitleConfig } from './Title'; export { Link, LinkConfig } from './Link'; +export { Icon, IconConfig } from './Icon'; diff --git a/packages/editor/src/packages/Functional/Button/Schema.tsx b/packages/editor/src/packages/Functional/Button/Schema.ts similarity index 93% rename from packages/editor/src/packages/Functional/Button/Schema.tsx rename to packages/editor/src/packages/Functional/Button/Schema.ts index 7510767..4a00414 100644 --- a/packages/editor/src/packages/Functional/Button/Schema.tsx +++ b/packages/editor/src/packages/Functional/Button/Schema.ts @@ -1,4 +1,3 @@ -import IConSetting from '@/packages/components/IConSetting'; /** * 组件配置和属性值 */ @@ -63,10 +62,9 @@ export default { name: ['disabled'], }, { - type: 'function', - render() { - return ; - }, + type: 'Icons', + label: '按钮图标', + name: ['icon'], }, { type: 'Title', diff --git a/packages/editor/src/packages/Functional/FileUpload/Schema.tsx b/packages/editor/src/packages/Functional/FileUpload/Schema.ts similarity index 95% rename from packages/editor/src/packages/Functional/FileUpload/Schema.tsx rename to packages/editor/src/packages/Functional/FileUpload/Schema.ts index 828a33c..dab920b 100644 --- a/packages/editor/src/packages/Functional/FileUpload/Schema.tsx +++ b/packages/editor/src/packages/Functional/FileUpload/Schema.ts @@ -1,7 +1,6 @@ /** * 组件配置和属性值 */ -import IConSetting from '@/packages/components/IConSetting'; export default { // 组件属性配置JSON attrs: [ @@ -58,10 +57,9 @@ export default { name: ['button', 'danger'], }, { - type: 'function', - render() { - return ; - }, + type: 'Icons', + label: '按钮图标', + name: ['button', 'icon'], }, { type: 'Title', diff --git a/packages/editor/src/packages/Functional/Tab/Schema.tsx b/packages/editor/src/packages/Functional/Tab/Schema.ts similarity index 87% rename from packages/editor/src/packages/Functional/Tab/Schema.tsx rename to packages/editor/src/packages/Functional/Tab/Schema.ts index 33c03f9..9cd1f34 100644 --- a/packages/editor/src/packages/Functional/Tab/Schema.tsx +++ b/packages/editor/src/packages/Functional/Tab/Schema.ts @@ -1,4 +1,3 @@ -import IConSetting from '@/packages/components/IConSetting'; /** * 组件配置和属性值 */ @@ -21,10 +20,9 @@ export default { name: ['label'], }, { - type: 'function', - render() { - return ; - }, + type: 'Icons', + label: '按钮图标', + name: ['icon'], }, { type: 'Switch', diff --git a/packages/editor/src/packages/utils/action.ts b/packages/editor/src/packages/utils/action.ts index d264883..f0aa008 100644 --- a/packages/editor/src/packages/utils/action.ts +++ b/packages/editor/src/packages/utils/action.ts @@ -169,9 +169,24 @@ const execAction = (node: any, params: any = {}) => { handleNotifacation(node, data); } else if (node.action.actionType === 'request' || node.action.actionType === 'download') { handleRequest(node, data); - } else if (node.action.actionType === 'openModal' || node.action.actionType === 'openDrawer') { + } else if (node.action.actionType === 'formReset') { + node.action.method = 'reset'; + handleMethods(node, data); + } else if (node.action.actionType === 'formSubmit') { + node.action.method = 'submit'; + handleMethods(node, data); + } else if (node.action.actionType === 'formValidate') { + node.action.method = 'validate'; + handleMethods(node, data); + } else if (node.action.actionType === 'formAssignment') { + node.action.method = 'init'; + handleMethods(node, data); + } else if (node.action.actionType === 'formGetValue') { + node.action.method = 'getFormData'; + handleMethods(node, data); + } else if (['openModal', 'openDrawer'].includes(node.action.actionType)) { handleOpenModal(node, data, 'open'); - } else if (node.action.actionType === 'closeModal' || node.action.actionType === 'closeDrawer') { + } else if (['closeModal', 'closeDrawer'].includes(node.action.actionType)) { handleOpenModal(node, data, 'close'); } else if (node.action.actionType === 'jumpLink') { handleJumpLink(node, data); diff --git a/packages/materials/Basic/Icon/Icon.tsx b/packages/materials/Basic/Icon/Icon.tsx new file mode 100644 index 0000000..99dbb41 --- /dev/null +++ b/packages/materials/Basic/Icon/Icon.tsx @@ -0,0 +1,36 @@ +import React, { useState, useImperativeHandle, forwardRef } from 'react'; +import Icon, * as Icons from '@ant-design/icons'; +import { ComponentType } from '../../types'; +/** + * + * @param props 组件本身属性 + * @param style 组件样式 + * @returns + */ +const MIcon = ( + { + id, + type, + config, + }: ComponentType<{ + icon: string; + style?: React.CSSProperties; + }>, + ref: any, +) => { + const [visible, setVisible] = useState(true); + // 对外暴露方法 + useImperativeHandle(ref, () => { + return { + show() { + setVisible(true); + }, + hide() { + setVisible(false); + }, + }; + }); + const iconComp = Icons[config.props.icon as keyof typeof Icons]; + return visible && } style={config.style} {...config.props} />; +}; +export default forwardRef(MIcon); diff --git a/packages/materials/Basic/Icon/index.ts b/packages/materials/Basic/Icon/index.ts new file mode 100644 index 0000000..ea963a1 --- /dev/null +++ b/packages/materials/Basic/Icon/index.ts @@ -0,0 +1 @@ +export { default as Icon } from './Icon';