diff --git a/src/assets/01-轮播.png b/src/assets/01-轮播.png new file mode 100644 index 0000000..a10362c Binary files /dev/null and b/src/assets/01-轮播.png differ diff --git a/src/assets/02-页脚.png b/src/assets/02-页脚.png new file mode 100644 index 0000000..52ad3b6 Binary files /dev/null and b/src/assets/02-页脚.png differ diff --git a/src/assets/03-表单.png b/src/assets/03-表单.png new file mode 100644 index 0000000..7840bcb Binary files /dev/null and b/src/assets/03-表单.png differ diff --git a/src/assets/04-页头.png b/src/assets/04-页头.png new file mode 100644 index 0000000..2490ed3 Binary files /dev/null and b/src/assets/04-页头.png differ diff --git a/src/assets/05-图标.png b/src/assets/05-图标.png new file mode 100644 index 0000000..30a5b0f Binary files /dev/null and b/src/assets/05-图标.png differ diff --git a/src/assets/06-图片组件.png b/src/assets/06-图片组件.png new file mode 100644 index 0000000..e557e1a Binary files /dev/null and b/src/assets/06-图片组件.png differ diff --git a/src/assets/07-列表.png b/src/assets/07-列表.png new file mode 100644 index 0000000..48fae19 Binary files /dev/null and b/src/assets/07-列表.png differ diff --git a/src/assets/08-长文本.png b/src/assets/08-长文本.png new file mode 100644 index 0000000..234ec97 Binary files /dev/null and b/src/assets/08-长文本.png differ diff --git a/src/assets/09-通知.png b/src/assets/09-通知.png new file mode 100644 index 0000000..8d5ddbe Binary files /dev/null and b/src/assets/09-通知.png differ diff --git a/src/assets/10-二维码.png b/src/assets/10-二维码.png new file mode 100644 index 0000000..4530459 Binary files /dev/null and b/src/assets/10-二维码.png differ diff --git a/src/assets/11-切换页.png b/src/assets/11-切换页.png new file mode 100644 index 0000000..99d4ce3 Binary files /dev/null and b/src/assets/11-切换页.png differ diff --git a/src/assets/12-文本.png b/src/assets/12-文本.png new file mode 100644 index 0000000..f5ff376 Binary files /dev/null and b/src/assets/12-文本.png differ diff --git a/src/assets/13-空白.png b/src/assets/13-空白.png new file mode 100644 index 0000000..8e1eb64 Binary files /dev/null and b/src/assets/13-空白.png differ diff --git a/src/assets/14-视频.png b/src/assets/14-视频.png new file mode 100644 index 0000000..d68bfc7 Binary files /dev/null and b/src/assets/14-视频.png differ diff --git a/src/assets/15-进度.png b/src/assets/15-进度.png new file mode 100644 index 0000000..72185df Binary files /dev/null and b/src/assets/15-进度.png differ diff --git a/src/components/BasicShop/BasicComponents/Carousel/index.tsx b/src/components/BasicShop/BasicComponents/Carousel/index.tsx index de08983..5a81231 100644 --- a/src/components/BasicShop/BasicComponents/Carousel/index.tsx +++ b/src/components/BasicShop/BasicComponents/Carousel/index.tsx @@ -2,9 +2,9 @@ import React, { memo } from 'react'; import { Carousel } from 'zarm'; import styles from './index.less'; import { ICarouselConfig } from './schema'; - +import logo from '@/assets/01-轮播.png'; const XCarousel = memo((props: ICarouselConfig) => { - const { direction, swipeable, autoPlay, isTpl, imgList, tplImg } = props; + const { direction, swipeable, autoPlay, isTpl, imgList } = props; const contentRender = () => { return imgList.map((item, i) => { return ( @@ -18,7 +18,7 @@ const XCarousel = memo((props: ICarouselConfig) => { <> {isTpl ? (
- +
) : (
{ const { bgColor, text, color, align, fontSize, height } = props; return ( <> {props.isTpl && ( - +
+ +
)} {!props.isTpl && (
{ +import logo from '@/assets/03-表单.png'; +const FormComponent = (props: IFormConfig & { isTpl: boolean }) => { const { title, bgColor, fontSize, titColor, btnColor, btnTextColor, api, formControls } = props; const formData: Record = {}; const handleChange = useCallback( @@ -29,29 +29,8 @@ const FormComponent = (props: IFormConfig) => { return ( <> {props.isTpl && ( -
- {title && ( -
- {title} -
- )} -
- {formControls.map(item => { - const FormItem = BaseForm[item.type]; - return ; - })} -
- -
-
+
+
)} {!props.isTpl && ( @@ -61,12 +40,6 @@ const FormComponent = (props: IFormConfig) => { backgroundColor: bgColor, overflow: 'hidden', position: 'absolute', - width: `${props.baseWidth}%`, - height: `${props.baseHeight}%`, - borderRadius: props.baseRadius, - transform: `translate(${props.baseLeft}px,${props.baseTop}px) - scale(${props.baseScale / 100}) - rotate(${props.baseRotate}deg)`, }} > {title && ( diff --git a/src/components/BasicShop/BasicComponents/Header/index.tsx b/src/components/BasicShop/BasicComponents/Header/index.tsx index 6e5dbdd..b2598b2 100644 --- a/src/components/BasicShop/BasicComponents/Header/index.tsx +++ b/src/components/BasicShop/BasicComponents/Header/index.tsx @@ -2,20 +2,15 @@ import { memo } from 'react'; import styles from './index.less'; import React from 'react'; import { IHeaderConfig } from './schema'; - +import logos from '@/assets/04-页头.png'; const Header = memo((props: IHeaderConfig) => { const { bgColor, logo, logoText, fontSize, color } = props; return ( <> {props.isTpl && ( -
-
- {logoText} -
-
- {logoText} -
-
+
+ +
)} {!props.isTpl && (
{ React.RefAttributes> = Icon[type]; return isTpl ? ( -
- {type} - 图标 +
+
) : ( diff --git a/src/components/BasicShop/BasicComponents/Image/index.tsx b/src/components/BasicShop/BasicComponents/Image/index.tsx index f0247c4..16a3f97 100644 --- a/src/components/BasicShop/BasicComponents/Image/index.tsx +++ b/src/components/BasicShop/BasicComponents/Image/index.tsx @@ -1,5 +1,6 @@ import React, { memo } from 'react'; import { IImageConfig } from './schema'; +import logo from '@/assets/06-图片组件.png'; const Image = memo((props: IImageConfig) => { const { imgUrl, @@ -18,15 +19,8 @@ const Image = memo((props: IImageConfig) => { return ( <> {props.isTpl && ( -
- +
+
)} {!props.isTpl && ( diff --git a/src/components/BasicShop/BasicComponents/List/index.tsx b/src/components/BasicShop/BasicComponents/List/index.tsx index 48cbeaf..d34c9ae 100644 --- a/src/components/BasicShop/BasicComponents/List/index.tsx +++ b/src/components/BasicShop/BasicComponents/List/index.tsx @@ -1,51 +1,14 @@ import React, { memo } from 'react'; import styles from './index.less'; import { IListConfig } from './schema'; +import logo from '@/assets/07-列表.png'; const List = memo((props: IListConfig) => { const { round, sourceData, imgSize, fontSize, color } = props; return ( <> {props.isTpl && ( -
-
- {sourceData.map((item, i) => { - return ( - - ); - })} -
+
+
)} {!props.isTpl && ( diff --git a/src/components/BasicShop/BasicComponents/LongText/index.tsx b/src/components/BasicShop/BasicComponents/LongText/index.tsx index fb045d4..840be4b 100644 --- a/src/components/BasicShop/BasicComponents/LongText/index.tsx +++ b/src/components/BasicShop/BasicComponents/LongText/index.tsx @@ -1,15 +1,24 @@ import React, { memo } from 'react'; import styles from './index.less'; import { ILongTextConfig } from './schema'; -const LongText = memo((props: ILongTextConfig) => { - const { text, fontSize, color, indent, lineHeight, textAlign } = props; +import logo from '@/assets/08-长文本.png'; +const LongText = memo((props: ILongTextConfig & { isTpl: boolean }) => { + const { text, fontSize, color, indent, lineHeight, textAlign, isTpl } = props; return ( -
- {text} -
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+ {text} +
+ )} + ); }); export default LongText; diff --git a/src/components/BasicShop/BasicComponents/Notice/index.tsx b/src/components/BasicShop/BasicComponents/Notice/index.tsx index dd3a702..cd1600e 100644 --- a/src/components/BasicShop/BasicComponents/Notice/index.tsx +++ b/src/components/BasicShop/BasicComponents/Notice/index.tsx @@ -1,12 +1,21 @@ import { NoticeBar } from 'zarm'; import React, { memo } from 'react'; import { INoticeConfig } from './schema'; -const Notice = memo((props: INoticeConfig) => { - const { text, speed, theme, isClose = false } = props; +import logo from '@/assets/09-通知.png'; +const Notice = memo((props: INoticeConfig & { isTpl: boolean }) => { + const { text, speed, theme, isClose = false, isTpl } = props; return ( - - {text} - + <> + {isTpl ? ( +
+ +
+ ) : ( + + {text} + + )} + ); }); diff --git a/src/components/BasicShop/BasicComponents/Qrcode/index.tsx b/src/components/BasicShop/BasicComponents/Qrcode/index.tsx index 4b9d39a..adbee64 100644 --- a/src/components/BasicShop/BasicComponents/Qrcode/index.tsx +++ b/src/components/BasicShop/BasicComponents/Qrcode/index.tsx @@ -1,13 +1,21 @@ import React, { memo } from 'react'; import { IQrcodeConfig } from './schema'; - -const Qrcode = memo((props: IQrcodeConfig) => { - const { qrcode, text, color, fontSize = 14 } = props; +import logo from '@/assets/10-二维码.png'; +const Qrcode = memo((props: IQrcodeConfig & { isTpl: boolean }) => { + const { qrcode, text, color, fontSize = 14, isTpl } = props; return ( -
- {text} -
{text}
-
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+ {text} +
{text}
+
+ )} + ); }); diff --git a/src/components/BasicShop/BasicComponents/Tab/index.tsx b/src/components/BasicShop/BasicComponents/Tab/index.tsx index 52f393f..bdc02a3 100644 --- a/src/components/BasicShop/BasicComponents/Tab/index.tsx +++ b/src/components/BasicShop/BasicComponents/Tab/index.tsx @@ -1,12 +1,12 @@ -import React, { useEffect, useRef } from 'react'; +import React, { memo, useEffect, useRef } from 'react'; import { Tabs } from 'zarm'; import styles from './index.less'; import { ITabConfig } from './schema'; - +import logo from '@/assets/11-切换页.png'; const { Panel } = Tabs; -const XTab = (props: ITabConfig) => { - const { tabs = ['分类一', '分类二'], activeColor, color, fontSize, sourceData } = props; +const XTab = (props: ITabConfig & { isTpl: boolean }) => { + const { tabs = ['分类一', '分类二'], activeColor, color, fontSize, sourceData, isTpl } = props; const tabWrapRef = useRef(null); @@ -20,45 +20,48 @@ const XTab = (props: ITabConfig) => { }, [activeColor]); return ( -
- { - console.log(i); - }} - > - {tabs.map((item, i) => { - return ( - -
- {sourceData - .filter(item => item.type === i) - .map((item, i) => { - return ( - + + ); + })} + +
+ )} + ); }; -export default XTab; +export default memo(XTab); diff --git a/src/components/BasicShop/BasicComponents/Text/index.tsx b/src/components/BasicShop/BasicComponents/Text/index.tsx index 4b4a81b..0a3de13 100644 --- a/src/components/BasicShop/BasicComponents/Text/index.tsx +++ b/src/components/BasicShop/BasicComponents/Text/index.tsx @@ -1,13 +1,21 @@ import React, { memo } from 'react'; import styles from './index.less'; import { ITextConfig } from './schema'; - -const Text = memo((props: ITextConfig) => { - const { align, text, fontSize, color, lineHeight } = props; +import logo from '@/assets/12-文本.png'; +const Text = memo((props: ITextConfig & { isTpl: boolean }) => { + const { align, text, fontSize, color, lineHeight, isTpl } = props; return ( -
- {text} -
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+ {text} +
+ )} + ); }); export default Text; diff --git a/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx b/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx index 9ef8f3b..5cd004c 100644 --- a/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx +++ b/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import styles from './index.less'; import React from 'react'; import { IWhiteTplConfig } from './schema'; - +import logo from '@/assets/13-空白.png'; interface IProps extends IWhiteTplConfig { isTpl: boolean; } @@ -10,14 +10,22 @@ interface IProps extends IWhiteTplConfig { const WhiteTpl = memo((props: IProps) => { const { bgColor, text, fontSize, color, height, isTpl } = props; return ( -
-
- {isTpl ? '空白模版' : text} -
-
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+
+ {text} +
+
+ )} + ); }); diff --git a/src/components/BasicShop/MediaComponents/Video/index.tsx b/src/components/BasicShop/MediaComponents/Video/index.tsx index 489cf20..5e9f135 100644 --- a/src/components/BasicShop/MediaComponents/Video/index.tsx +++ b/src/components/BasicShop/MediaComponents/Video/index.tsx @@ -2,19 +2,27 @@ import React, { memo } from 'react'; import { Player, BigPlayButton } from 'video-react'; import './index.css'; import { IVideoConfig } from './schema'; - -const VideoPlayer = memo((props: IVideoConfig) => { - const { poster, url } = props; +import logo from '@/assets/14-视频.png'; +const VideoPlayer = memo((props: IVideoConfig & { isTpl: boolean }) => { + const { poster, url, isTpl } = props; return ( -
- - - -
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+ + + +
+ )} + ); }); diff --git a/src/components/BasicShop/VisualComponents/XProgress/index.tsx b/src/components/BasicShop/VisualComponents/XProgress/index.tsx index f25377b..d8f71ea 100644 --- a/src/components/BasicShop/VisualComponents/XProgress/index.tsx +++ b/src/components/BasicShop/VisualComponents/XProgress/index.tsx @@ -2,19 +2,27 @@ import React, { memo } from 'react'; import { Progress } from 'zarm'; import styles from './index.less'; import { IXProgressConfig } from './schema'; - -const XProgress = memo((props: IXProgressConfig) => { - const { theme, size, shape, percent, strokeWidth } = props; +import logo from '@/assets/15-进度.png'; +const XProgress = memo((props: IXProgressConfig & { isTpl: boolean }) => { + const { theme, size, shape, percent, strokeWidth, isTpl } = props; return ( -
- -
+ <> + {isTpl ? ( +
+ +
+ ) : ( +
+ +
+ )} + ); }); diff --git a/src/components/BasicShop/VisualComponents/XProgress/template.ts b/src/components/BasicShop/VisualComponents/XProgress/template.ts index c53a69e..0021233 100644 --- a/src/components/BasicShop/VisualComponents/XProgress/template.ts +++ b/src/components/BasicShop/VisualComponents/XProgress/template.ts @@ -1,6 +1,6 @@ const template = { type: 'XProgress', h: 102, - displayName: '圆型进度条组件', + displayName: '进度条组件', }; export default template; diff --git a/src/components/CommonComponents/BasicComponents/Tab/index.tsx b/src/components/CommonComponents/BasicComponents/Tab/index.tsx index 52f393f..d4a6162 100644 --- a/src/components/CommonComponents/BasicComponents/Tab/index.tsx +++ b/src/components/CommonComponents/BasicComponents/Tab/index.tsx @@ -21,12 +21,7 @@ const XTab = (props: ITabConfig) => { return (
- { - console.log(i); - }} - > + {tabs.map((item, i) => { return ( diff --git a/src/components/PanelComponents/DataList/editorModal.tsx b/src/components/PanelComponents/DataList/editorModal.tsx index 0fd72bd..e39c423 100644 --- a/src/components/PanelComponents/DataList/editorModal.tsx +++ b/src/components/PanelComponents/DataList/editorModal.tsx @@ -34,7 +34,6 @@ const EditorModal: FC = props => { form .validateFields() .then(values => { - console.log(values); if (item) { values.id = item.id; onSave && onSave(values); diff --git a/src/components/PanelComponents/FormEditor/types.ts b/src/components/PanelComponents/FormEditor/types.ts index 569c7e4..a1a94f0 100644 --- a/src/components/PanelComponents/FormEditor/types.ts +++ b/src/components/PanelComponents/FormEditor/types.ts @@ -1,5 +1,3 @@ -import { type } from 'os'; - //////////////////// export interface IUploadConfigType { key: string; @@ -200,14 +198,7 @@ export type baseFormDateTpl = { label: string; placeholder: string; }; - -export type baseFormButtonTpl = { - key: string; - name: string; - type: 'Button'; - icons: Array; -}; - +//类型不要乱加，这部分是FormItems的类型定义，只有新增formItems的配置项才需要加！ export type baseFormUnion = | baseFormTextTpl | baseFormNumberTpl @@ -215,8 +206,7 @@ export type baseFormUnion = | baseFormMyRadioTpl | baseFormMyCheckboxTpl | baseFormMySelectTpl - | baseFormDateTpl - | baseFormButtonTpl; + | baseFormDateTpl; export type baseFormUnionType = | baseFormTextTpl['type'] | baseFormNumberTpl['type'] @@ -224,7 +214,6 @@ export type baseFormUnionType = | baseFormMyRadioTpl['type'] | baseFormMyCheckboxTpl['type'] | baseFormMySelectTpl['type'] - | baseFormDateTpl['type'] - | baseFormButtonTpl['type']; + | baseFormDateTpl['type']; export type TFormItemsDefaultType = Array; diff --git a/src/components/PanelComponents/Table/index.tsx b/src/components/PanelComponents/Table/index.tsx index 7c61b45..00981d0 100644 --- a/src/components/PanelComponents/Table/index.tsx +++ b/src/components/PanelComponents/Table/index.tsx @@ -192,14 +192,12 @@ class EditableTable extends React.Component { }; handleOk = (e: React.MouseEvent) => { - console.log(e); this.setState({ visible: false, }); }; handleCancel = (e: React.MouseEvent) => { - console.log(e); this.setState({ visible: false, }); diff --git a/src/global.css b/src/global.css index e35bd1d..8c7e6ac 100644 --- a/src/global.css +++ b/src/global.css @@ -70,6 +70,7 @@ body { flex-wrap: wrap; padding-left: 10px!important; padding-right: 10px!important; + padding-bottom: 40px; } .ant-form-item-label > label { diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index 14a1fa1..b2442cb 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -198,7 +198,7 @@ const Container = (props: { if (pstate.curPoint && pstate.curPoint.status === 'inToCanvas' && rightColla) { changeRightColla(false); } - }, [pstate.curPoint]); + }, [changeRightColla, pstate.curPoint, rightColla]); const allType = useMemo(() => { let arr: string[] = []; @@ -377,11 +377,10 @@ const Container = (props: { if (diffmove.move) { let diffx: number; let diffy: number; - const d = 5; const newX = e.clientX; const newY = e.clientY; - newX - diffmove.start.x > 0 ? (diffx = d) : (diffx = -d); - newY - diffmove.start.y > 0 ? (diffy = d) : (diffy = -d); + diffx = newX - diffmove.start.x; + diffy = newY - diffmove.start.y; setDiffMove({ start: { x: newX, @@ -401,26 +400,24 @@ const Container = (props: { const mouseupfn = useMemo(() => { return () => { - if (diffmove.move) { - setDiffMove({ - start: { x: 0, y: 0 }, - move: false, - }); - } + setDiffMove({ + start: { x: 0, y: 0 }, + move: false, + }); }; - }, [diffmove.move]); + }, []); const onwheelFn = useMemo(() => { return (e: React.WheelEvent) => { - if (e.deltaY > 0) { + if (e.deltaY < 0) { setDragState(prev => ({ x: prev.x, - y: prev.y + 10, + y: prev.y + 40, })); } else { setDragState(prev => ({ x: prev.x, - y: prev.y - 10, + y: prev.y - 40, })); } }; @@ -512,7 +509,7 @@ const Container = (props: { className={styles.sliderBtn} onClick={handleSlider.bind(this, 1)} style={ - scaleNum == 1 + scaleNum === 1 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' } } @@ -522,7 +519,7 @@ const Container = (props: { {scaleNum * 100}% -