From 19ea5283073eb180d13a524e10d06217ce996f41 Mon Sep 17 00:00:00 2001 From: expressgy Date: Wed, 15 Feb 2023 18:44:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90=E7=BC=96?= =?UTF-8?q?=E8=BE=91=EF=BC=8C=E9=9C=80=E8=A6=81=E4=BC=98=E5=8C=96=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E5=AE=8C=E5=96=84=E6=A8=A1=E6=9D=BF=EF=BC=8C?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E8=81=94=E5=8A=A8=E3=80=82=E9=93=BE=E6=8E=A5?= =?UTF-8?q?=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img.svg | 7 + src/components/Editor/index.jsx | 174 ++++++++++++++++++++++++ src/components/Editor/index.module.scss | 80 +++++++++++ src/components/Modal/index.jsx | 5 +- src/components/StyleControl/index.jsx | 145 ++++++++++++-------- src/store/defaultStore.js | 8 ++ src/tools/index.js | 97 ++++++------- src/view/EditPageNew/index.jsx | 53 ++++++-- src/view/EditPageNew/index.module.scss | 3 + vite.config.js | 4 + 10 files changed, 466 insertions(+), 110 deletions(-) create mode 100644 src/assets/img.svg create mode 100644 src/components/Editor/index.jsx create mode 100644 src/components/Editor/index.module.scss 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 ?
: