diff --git a/src/assets/img.svg b/src/assets/img.svg new file mode 100644 index 0000000..62a2fa5 --- /dev/null +++ b/src/assets/img.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/components/Editor/index.jsx b/src/components/Editor/index.jsx new file mode 100644 index 0000000..fbe1f45 --- /dev/null +++ b/src/components/Editor/index.jsx @@ -0,0 +1,174 @@ +import css from './index.module.scss' +import {useEffect, useState} from "react"; +import svgImg from '@/assets/img.svg' +import {getMD5} from "@/tools/index.js"; +import api from "@/request/api.js"; +import {defaultStore} from "@/store/index.js"; + + +export default function Editor(props) { + const [element, setElement] = useState({}) + const [style, setStyle] = useState({}) + const [href, setHref] = useState({url: '', state: 0,}) + const [editState, setEditState] = useState(false) + const [inputValue, setInputValue] = useState('') + const [img, setImg] = useState(svgImg) + const [defaultImg, setDefaultImg] = useState('') + + useEffect(() => { + // console.log('ELement', props.element) + setElement(props.element) + if (props.element.config && props.element.config.styleReal) { + const styleReal = props.element.config.styleReal + const styleTem = { + backgroundImage: styleReal.background + ?`url('/ossStatic/${styleReal.background + }')`:null, + backgroundColor: '#'+styleReal['background-color'], + position: styleReal.position, + width: styleReal.width + styleReal['width-mx'], + height: styleReal.height + styleReal['height-mx'], + backdropFilter: styleReal['backdrop-filter'], + top: styleReal.top + styleReal['top-mx'], + right: styleReal.right + styleReal['right-mx'], + bottom: styleReal.bottom + styleReal['bottom-mx'], + left: styleReal.left + styleReal['left-mx'], + margin: styleReal.margin, + padding: styleReal.padding, + borderRadius: styleReal['border-radius'] + styleReal['border-radius-mx'], + border: styleReal.border, + overflow: styleReal.overflow, + color: '#'+styleReal.color, + fontSize: styleReal['font-size'] + styleReal['font-size-mx'], + fontWeight: styleReal['font-weight'], + lineHeight: styleReal['line-height'] + styleReal['line-height-mx'], + textIndent: styleReal['text-indent'] + styleReal['text-indent-mx'], + textAlign: styleReal['text-align'], + whiteSpace: styleReal['white-space'], + } + if(styleReal['all-center']){ + styleTem.display = 'flex'; + styleTem['alignItems'] = 'center'; + styleTem['justifyContent'] = 'center'; + } + setStyle(styleTem) + setHref({ + href: styleReal.href, + state: styleReal['href-mx'] + }) + if (props.element.inputValue) { + setInputValue(props.element.inputValue) + } + } + + if(props.element.identify == 'image' && props.element.inputValue){ + setImg('/ossStatic/' + props.element.inputValue) + } + }, [props.element]) + + useEffect(() => { + // console.log(style) + }, [style]) + + function hrefClick(e) { + e.stopPropagation(); + if (!href.url) return; + if (href.url.length < 3) return + if (href.state == '0') { + window.location.href = href.url + } else { + window.open(href.url) + } + } + + // 编辑完成 + function handleEditInputValueOk() { + setEditState(false) + // console.log(inputValue.split('\n').join('
')) + setInputValue(inputValue.split('\n').join('
')) + defaultStore.setChooseNodeId(element.id) + defaultStore.setInputValue(inputValue.split('\n').join('
')) + } + // 图片上传 + async function handleImgChange(e){ + const file = e.target.files[0]; + const md5 = await getMD5(file) + const data = { + md5, + file + } + const response = await api.putFile(data) + if(!response.data.state){ + alert(response.data.data.message) + return + } + const url = response.data.data.filename + console.log(url) + setImg('/ossStatic/' + url) + defaultStore.setChooseNodeId(element.id) + defaultStore.setInputValue(url) + } + + if(!props.element) return null + + switch (element.identify) { + // 单元素结构 + case 'singleFrame': + return
+ { + Array.isArray(props.element.childElement) ? props.element.childElement.map(item => { + {return } + }) : + } +
+ break; + // 横向多元素结构 + case 'transverseFrame': + return
+ { + Array.isArray(props.element.childElement) ? props.element.childElement.map(item => { + {return } + }) : + } +
+ break; + // 纵向多元素结构 + case 'longitudinalFrame': + return
+ { + Array.isArray(props.element.childElement) ? props.element.childElement.map(item => { + {return } + }) : + } +
+ break; + // 行内文本 + case 'span': + return
setEditState(true)}>{!editState ? inputValue :
setInputValue(e.target.value)} + value={inputValue} onBlur={handleEditInputValueOk}/>
}
+ + break; + // 块文本 + case 'blockText': + return
setEditState(true)}>{!editState ?
: