From 09e3a567e9abbfd716964db872e4454e7ba21e88 Mon Sep 17 00:00:00 2001 From: yehuozhili Date: Mon, 28 Sep 2020 12:25:25 +0800 Subject: [PATCH 1/2] change style --- src/pages/editor/Container.tsx | 15 +++++++++++++-- src/pages/editor/components/Header/index.tsx | 2 +- src/pages/editor/index.less | 9 +++------ src/utils/tool.ts | 18 ++++++++++++++++++ 4 files changed, 35 insertions(+), 9 deletions(-) diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index be1eebf..6e91bf0 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -23,12 +23,13 @@ import { ActionCreators } from 'redux-undo'; import { StateWithHistory } from 'redux-undo'; import styles from './index.less'; import { useGetBall } from 'react-draggable-ball'; +import { useAnimation } from '@/utils/tool'; const { TabPane } = Tabs; const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => { const [scaleNum, setScale] = useState(1); - const [collapsed, setCollapsed] = useState(false); + const [collapsed, setCollapsed] = useState(true); const { pstate, dispatch } = props; const pointData = pstate ? pstate.pointData : {}; @@ -41,6 +42,7 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc }; const toggleCollapsed = (checked: boolean) => { + console.log(checked); setCollapsed(checked); }; @@ -120,6 +122,8 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc intervalDelay: 5, }); + const [display] = useAnimation(collapsed, 500); + return (
-
+
{
Dooring
- {/* 暂时隐藏 TODO */} +
), }); +}; type DynamicType = { isTpl: boolean; @@ -41,10 +51,11 @@ type DynamicType = { }; const DynamicEngine = memo((props: DynamicType) => { const { type, config, category } = props; + const context = useContext(dooringContext); const Dynamic = useMemo(() => { - return (DynamicFunc(type, category) as unknown) as FC; + return (DynamicFunc(type, category, context.theme) as unknown) as FC; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [config]); + }, [config, context.theme]); return ; }); diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 2de5cf8..7f1d6be 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,8 +1,9 @@ -import React, { useCallback, useState } from 'react'; +import React, { createContext, useCallback, useState } from 'react'; import { library, generateRespones, RenderList, useRegister } from 'chatbot-antd'; import { IRouteComponentProps } from 'umi'; import { Button } from 'antd'; import { CustomerServiceOutlined } from '@ant-design/icons'; +import { stat } from 'fs/promises'; library.push( //语料库，push进去，也可以不用 @@ -21,6 +22,17 @@ library.push( }, ); +export type dooringContextType = 'h5' | 'pc'; + +export interface IdooringContextType { + theme: dooringContextType; + setTheme: Function; +} +export const dooringContext = createContext({ + theme: 'h5', + setTheme: () => {}, +}); + export default function Layout({ children }: IRouteComponentProps) { const [modalOpen, setModalOpen] = useState(false); const callb = useCallback((v: RenderList) => { @@ -46,23 +58,33 @@ export default function Layout({ children }: IRouteComponentProps) { {},
welcome!欢迎使用h5-Dooring，你有任何问题，都可以咨询我哦～
, ); + + const [state, setState] = useState('h5'); + return ( -
-
- + +
+
+ +
+ {render} + {children}
- {render} - {children} -
+ ); } diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index 6e91bf0..0e5a435 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from 'react'; +import React, { useState, useEffect, useMemo, useContext } from 'react'; import { Slider, Result, Tabs, Alert } from 'antd'; import { PieChartOutlined, @@ -15,25 +15,82 @@ import TargetBox from './TargetBox'; import Calibration from 'components/Calibration'; import DynamicEngine, { componentsType } from 'components/DynamicEngine'; import FormEditor from 'components/PanelComponents/FormEditor'; -import template from 'components/BasicShop/BasicComponents/template'; -import mediaTpl from 'components/BasicShop/MediaComponents/template'; -import graphTpl from 'components/BasicShop/VisualComponents/template'; -import schema from 'components/BasicShop/schema'; + +import template1 from 'components/BasicShop/BasicComponents/template'; +import template2 from 'components/BasicPcShop/BasicComponents/template'; +import mediaTpl1 from 'components/BasicShop/MediaComponents/template'; +import mediaTpl2 from 'components/BasicPcShop/MediaComponents/template'; +import graphTpl1 from 'components/BasicShop/VisualComponents/template'; +import graphTpl2 from 'components/BasicPcShop/VisualComponents/template'; + +import schema1 from 'components/BasicShop/schema'; +import schema2 from 'components/BasicPcShop/schema'; + import { ActionCreators } from 'redux-undo'; import { StateWithHistory } from 'redux-undo'; import styles from './index.less'; import { useGetBall } from 'react-draggable-ball'; import { useAnimation } from '@/utils/tool'; +import { dooringContext } from '@/layouts'; const { TabPane } = Tabs; -const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => { +const Container = (props: { + history?: any; + location?: any; + pstate?: any; + cstate?: any; + dispatch?: any; +}) => { const [scaleNum, setScale] = useState(1); const [collapsed, setCollapsed] = useState(true); - const { pstate, dispatch } = props; - const pointData = pstate ? pstate.pointData : {}; - const curPoint = pstate ? pstate.curPoint : {}; + const { pstate, cstate, dispatch } = props; + const pointData = pstate ? pstate.pointData : []; + const cpointData = cstate ? cstate.pointData : []; + + const context = useContext(dooringContext); + const curPoint = useMemo(() => { + if (context.theme === 'h5') { + return pstate ? pstate.curPoint : {}; + } else { + return cstate ? cstate.curPoint : {}; + } + }, [context.theme, cstate, pstate]); + + const schema = useMemo(() => { + if (context.theme === 'h5') { + return schema1; + } else { + console.log(schema2); + return schema2; + } + }, [context.theme]); + + const template = useMemo(() => { + if (context.theme === 'h5') { + return template1; + } else { + return template2; + } + }, [context.theme]); + + const mediaTpl = useMemo(() => { + if (context.theme === 'h5') { + return mediaTpl1; + } else { + return mediaTpl2; + } + }, [context.theme]); + + const graphTpl = useMemo(() => { + if (context.theme === 'h5') { + return graphTpl1; + } else { + return graphTpl2; + } + }, [context.theme]); + // 指定画布的id let canvasId = 'js_canvas'; @@ -71,23 +128,51 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc setScale(prev => (prev <= 0.5 ? 0.5 : prev - 0.1)); } }; - const handleFormSave = (data: any) => { - dispatch({ - type: 'editorModal/modPointData', - payload: { ...curPoint, item: { ...curPoint.item, config: data } }, - }); - }; - const clearData = () => { - dispatch({ type: 'editorModal/clearAll' }); - }; + const handleFormSave = useMemo(() => { + if (context.theme === 'h5') { + return (data: any) => { + dispatch({ + type: 'editorModal/modPointData', + payload: { ...curPoint, item: { ...curPoint.item, config: data } }, + }); + }; + } else { + return (data: any) => { + dispatch({ + type: 'editorPcModal/modPointData', + payload: { ...curPoint, item: { ...curPoint.item, config: data } }, + }); + }; + } + }, [context.theme, curPoint, dispatch]); + + const clearData = useMemo(() => { + if (context.theme === 'h5') { + dispatch({ type: 'editorModal/clearAll' }); + } else { + dispatch({ type: 'editorPcModal/clearAll' }); + } + }, [context.theme, dispatch]); + + const handleDel = useMemo(() => { + if (context.theme === 'h5') { + return (id: any) => { + dispatch({ + type: 'editorModal/delPointData', + payload: { id }, + }); + }; + } else { + return (id: any) => { + dispatch({ + type: 'editorPcModal/delPointData', + payload: { id }, + }); + }; + } + }, [context.theme, dispatch]); - const handleDel = (id: any) => { - dispatch({ - type: 'editorModal/delPointData', - payload: { id }, - }); - }; const redohandler = () => { dispatch(ActionCreators.redo()); }; @@ -124,12 +209,66 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc const [display] = useAnimation(collapsed, 500); + const renderRight = useMemo(() => { + if (context.theme === 'h5') { + return ( +
+ {pointData.length && curPoint ? ( + <> +
属性设置
+ + + ) : ( +
+ +
+ )} +
+ ); + } else { + return ( +
+ {cpointData.length && curPoint ? ( + <> +
属性设置
+ + + ) : ( +
+ +
+ )} +
+ ); + } + }, [context.theme, cpointData.length, curPoint, handleDel, handleFormSave, pointData.length]); + return (
-
- {pointData.length && curPoint ? ( - <> -
属性设置
- - - ) : ( -
- -
- )} -
+ {renderRight}
); }; export default connect((state: StateWithHistory) => { - return { pstate: state.present.editorModal }; + return { pstate: state.present.editorModal, cstate: state.present.editorPcModal }; })(Container); diff --git a/src/pages/editor/SourceBox.tsx b/src/pages/editor/SourceBox.tsx index 614be25..12eec90 100644 --- a/src/pages/editor/SourceBox.tsx +++ b/src/pages/editor/SourceBox.tsx @@ -1,4 +1,4 @@ -import React, { memo, useEffect, useState } from 'react'; +import React, { memo, useContext, useEffect, useMemo, useState } from 'react'; import { useDrop } from 'react-dnd'; import Draggable, { DraggableData, DraggableEvent } from 'react-draggable'; import GridLayout, { ItemCallback } from 'react-grid-layout'; @@ -9,8 +9,10 @@ import styles from './index.less'; import { uuid } from '@/utils/tool'; import { Dispatch } from 'umi'; import { StateWithHistory } from 'redux-undo'; +import { dooringContext } from '@/layouts'; interface SourceBoxProps { - pstate: { pointData: { id: string; item: any; point: any }[] }; + pstate: { pointData: { id: string; item: any; point: any }[]; curPoint: any }; + cstate: { pointData: { id: string; item: any; point: any }[]; curPoint: any }; scaleNum: number; canvasId: string; allType: string[]; @@ -25,14 +27,17 @@ interface SourceBoxProps { } const SourceBox = memo((props: SourceBoxProps) => { - const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState } = props; + const { pstate, scaleNum, canvasId, allType, dispatch, dragState, setDragState, cstate } = props; + const context = useContext(dooringContext); const pointData = pstate ? pstate.pointData : []; + const cpointData = cstate ? cstate.pointData : []; + const [canvasRect, setCanvasRect] = useState([]); const [isShowTip, setIsShowTip] = useState(true); const [{ isOver }, drop] = useDrop({ accept: allType, - drop: (item: { h: number; type: string }, monitor) => { + drop: (item: { h: number; type: string; x: number }, monitor) => { let parentDiv = document.getElementById(canvasId), pointRect = parentDiv!.getBoundingClientRect(), top = pointRect.top, @@ -43,14 +48,33 @@ const SourceBox = memo((props: SourceBoxProps) => { w = item.type === 'Icon' ? 3 : col; // 转换成网格规则的坐标和大小 let gridY = Math.ceil(y / cellHeight); - dispatch({ - type: 'editorModal/addPointData', - payload: { - id: uuid(6, 10), - item, - point: { i: `x-${pointData.length}`, x: 0, y: gridY, w, h: item.h, isBounded: true }, - }, - }); + if (context.theme === 'h5') { + dispatch({ + type: 'editorModal/addPointData', + payload: { + id: uuid(6, 10), + item, + point: { i: `x-${pointData.length}`, x: 0, y: gridY, w, h: item.h, isBounded: true }, + }, + }); + } else { + console.log(item.x); + dispatch({ + type: 'editorPcModal/addPointData', + payload: { + id: uuid(6, 10), + item, + point: { + i: `x-${cpointData.length}`, + x: item.x || 0, + y: gridY, + w, + h: item.h, + isBounded: true, + }, + }, + }); + } }, collect: monitor => ({ isOver: monitor.isOver(), @@ -59,34 +83,65 @@ const SourceBox = memo((props: SourceBoxProps) => { }), }); - const dragStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { - const curPointData = pointData.filter(item => item.id === newItem.i)[0]; - dispatch({ - type: 'editorModal/modPointData', - payload: { ...curPointData, point: newItem }, - }); - }; + const dragStop: ItemCallback = useMemo(() => { + return (layout, oldItem, newItem, placeholder, e, element) => { + if (context.theme === 'h5') { + const curPointData = pointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorModal/modPointData', + payload: { ...curPointData, point: newItem }, + }); + } else { + const curPointData = cpointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorPcModal/modPointData', + payload: { ...curPointData, point: newItem }, + }); + } + }; + }, [context.theme, cpointData, dispatch, pointData]); - const onDragStart: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { - const curPointData = pointData.filter(item => item.id === newItem.i)[0]; - dispatch({ - type: 'editorModal/modPointData', - payload: { ...curPointData }, - }); - }; + const onDragStart: ItemCallback = useMemo(() => { + return (layout, oldItem, newItem, placeholder, e, element) => { + if (context.theme === 'h5') { + const curPointData = pointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorModal/modPointData', + payload: { ...curPointData }, + }); + } else { + const curPointData = cpointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorPcModal/modPointData', + payload: { ...curPointData }, + }); + } + }; + }, [context.theme, cpointData, dispatch, pointData]); - const onResizeStop: ItemCallback = (layout, oldItem, newItem, placeholder, e, element) => { - const curPointData = pointData.filter(item => item.id === newItem.i)[0]; - dispatch({ - type: 'editorModal/modPointData', - payload: { ...curPointData, point: newItem }, - }); - }; + const onResizeStop: ItemCallback = useMemo(() => { + return (layout, oldItem, newItem, placeholder, e, element) => { + if (context.theme === 'h5') { + const curPointData = pointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorModal/modPointData', + payload: { ...curPointData, point: newItem }, + }); + } else { + const curPointData = cpointData.filter(item => item.id === newItem.i)[0]; + dispatch({ + type: 'editorPcModal/modPointData', + payload: { ...curPointData, point: newItem }, + }); + } + }; + }, [context.theme, cpointData, dispatch, pointData]); useEffect(() => { let { width, height } = document.getElementById(canvasId)!.getBoundingClientRect(); + console.log(width, height); setCanvasRect([width, height]); - }, [canvasId]); + }, [canvasId, context.theme]); useEffect(() => { let timer = window.setTimeout(() => { @@ -99,73 +154,162 @@ const SourceBox = memo((props: SourceBoxProps) => { const opacity = isOver ? 0.7 : 1; // const backgroundColor = isOver ? 1 : 0.7; - return ( - { - setDragState({ x: data.x, y: data.y }); - }} - > -
-
{ + if (context.theme === 'h5') { + return ( + { + setDragState({ x: data.x, y: data.y }); }} > -
- +
+
- - - {pointData.length > 0 ? ( - - {pointData.map(value => ( -
- -
- ))} - - ) : null} + +
+ + + {pointData.length > 0 ? ( + + {pointData.map(value => ( +
+ +
+ ))} + + ) : null} +
+
-
-
- - ); + + ); + } else { + //pc可能要传递宽度 + return ( + { + setDragState({ x: data.x, y: data.y }); + }} + > +
+
+
+ +
+ + + {cpointData.length > 0 ? ( + + {cpointData.map(value => ( +
+ +
+ ))} + + ) : null} +
+
+
+ + ); + } + }, [ + canvasId, + canvasRect, + context.theme, + cpointData, + dragState, + dragStop, + drop, + isShowTip, + onDragStart, + onResizeStop, + opacity, + pointData, + scaleNum, + setDragState, + ]); + + return <>{render}; }); -export default connect((state: StateWithHistory) => ({ pstate: state.present.editorModal }))( - SourceBox, -); +export default connect((state: StateWithHistory) => ({ + pstate: state.present.editorModal, + cstate: state.present.editorPcModal, +}))(SourceBox); diff --git a/src/pages/editor/TargetBox.tsx b/src/pages/editor/TargetBox.tsx index 978503b..9f6c03b 100644 --- a/src/pages/editor/TargetBox.tsx +++ b/src/pages/editor/TargetBox.tsx @@ -18,6 +18,7 @@ const TargetBox = memo((props: TargetBoxProps) => { h: item.h, editableEl: schema[item.type as keyof typeof schema].editData, category: item.category, + x: item.x || 0, }, collect: monitor => ({ isDragging: monitor.isDragging(), diff --git a/src/pages/editor/components/Header/index.tsx b/src/pages/editor/components/Header/index.tsx index 4838099..81b24ef 100644 --- a/src/pages/editor/components/Header/index.tsx +++ b/src/pages/editor/components/Header/index.tsx @@ -1,5 +1,5 @@ -import React, { useRef, memo } from 'react'; -import { Button, Input, Popover, Modal, Switch } from 'antd'; +import React, { useRef, memo, useContext } from 'react'; +import { Button, Input, Popover, Modal, Switch, Select } from 'antd'; import { ArrowLeftOutlined, MobileOutlined, @@ -17,6 +17,7 @@ import Zan from 'components/Zan'; import req from '@/utils/req'; import Code from '@/assets/code.png'; import styles from './index.less'; +import { dooringContext } from '@/layouts'; const { confirm } = Modal; @@ -128,7 +129,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { req.post('/visible/preview', { tid, tpl: pointData }); }; const handleSaveCode = () => {}; - + const { setTheme } = useContext(dooringContext); return (
@@ -211,6 +212,16 @@ const HeaderComponent = memo((props: HeaderComponentProps) => { 预览
+
diff --git a/src/pages/editor/index.less b/src/pages/editor/index.less index 23d4e06..eeb2d04 100644 --- a/src/pages/editor/index.less +++ b/src/pages/editor/index.less @@ -108,6 +108,40 @@ } } } + .canvasBox2 { + width: 1200px; + min-height: 800px; + height: 800px; + left: 15%; + position: relative; + margin-left: -200px; + top: 20px; + .canvas2 { + position: relative; + width: 1200px; + min-height: 800px; + background-color: #fff; + box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); + position: absolute; + left: 0; + top: 0; + transition: transform 300ms ease-out; + .dragItem { + display: inline-block; + position: absolute; + z-index: 2; + border: 2px solid transparent; + cursor: move; + &:hover { + border: 2px solid #06c; + } + :global(a) { + display: block; + pointer-events: none; + } + } + } + } .resetBall { position: absolute; right: 24px; diff --git a/src/pages/editor/models/editorPcModel.ts b/src/pages/editor/models/editorPcModel.ts new file mode 100644 index 0000000..01f962d --- /dev/null +++ b/src/pages/editor/models/editorPcModel.ts @@ -0,0 +1,58 @@ +const pointData = localStorage.getItem('userPcData') || '[]'; + +function overSave(name: string, data: any) { + localStorage.setItem(name, JSON.stringify(data)); +} + +export default { + namespace: 'editorPcModal', + state: { + pointData: JSON.parse(pointData), + curPoint: null, + }, + reducers: { + addPointData(state: any, { payload }: any) { + let pointData = [...state.pointData, payload]; + overSave('userPcData', pointData); + return { + ...state, + pointData, + curPoint: payload, + }; + }, + modPointData(state: any, { payload }: any) { + const { id } = payload; + const pointData = state.pointData.map((item: any) => { + if (item.id === id) { + return payload; + } + return { ...item }; + }); + overSave('userPcData', pointData); + return { + ...state, + pointData, + curPoint: payload, + }; + }, + delPointData(state: any, { payload }: any) { + const { id } = payload; + const pointData = state.pointData.filter((item: any) => item.id !== id); + overSave('userPcData', pointData); + return { + ...state, + pointData, + curPoint: null, + }; + }, + clearAll(state: any) { + overSave('userPcData', []); + return { + ...state, + pointData: [], + curPoint: null, + }; + }, + }, + effects: {}, +};