完善官网编辑，完成模板添加

src/components/Atom/index.jsx

@@ -3,6 +3,7 @@
 import {useEffect, useState} from "react";
 import css from './index.module.scss';
 import {defaultStore} from "@/store/index.js";
+import {autorun} from "mobx";
 
 export default function Atom(props) {
     const AtomList = props.AtomList;
@@ -24,6 +25,7 @@ export default function Atom(props) {
             setBoxState(new Array(boxState.length).fill(false))
         }
     }, [props.state])
+
     return AtomList.map((item, index) => {
         if (item.children && Array.isArray(item.children)) {
             return <div key={index} className={css.atomBox}>

src/components/Editor/index.jsx

@@ -56,14 +56,16 @@ export default function Editor(props) {
                 href: styleReal.href,
                 state: styleReal['href-mx']
             })
-            if (props.element.inputValue) {
-                setInputValue(props.element.inputValue)
-            }
+        }else{
+            setStyle({})
         }
 
         if(props.element.identify == 'image' && props.element.inputValue){
             setImg('/ossStatic/' + props.element.inputValue)
         }
+        if (props.element.inputValue) {
+            setInputValue(props.element.inputValue)
+        }
     }, [props.element])
 
     useEffect(() => {

src/components/Editor/index.module.scss

@@ -2,8 +2,6 @@
 @mixin frame{
     position: relative;
     min-height: 3rem;
-    border: solid 1px #333;
-    box-sizing: border-box;
 }
 // 单元素结构
 .singleFrame {

src/components/ElementStructureTree/index.jsx

@@ -26,6 +26,13 @@ export default function ElementStructureTree(props) {
         setChooseNodeId(defaultStore.chooseNodeId)
     }, [defaultStore.chooseNodeId])
 
+    // 添加模板
+    function addTemplate(container){
+        console.log(container)
+        defaultStore.setTemplateAddModalState(true)
+        defaultStore.setTemplateContainer(container)
+    }
+
     if (Array.isArray(props.tree)) {
         return props.tree.map((item, index) => {
             if (item.childElement && Array.isArray(item.childElement)) {
@@ -37,7 +44,7 @@ export default function ElementStructureTree(props) {
                         <div className={css.cmd}>
                             <div>{item.id == chooseNodeId && '*'}</div>
                             <div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div>
-                            <div>&</div>
+                            <div onClick={() => addTemplate(item)}>&</div>
                         </div>
                     </div>
                     <div className={css.childBox} style={{maxHeight:boxState[index] ? '300px' : 0}}>
@@ -55,7 +62,7 @@ export default function ElementStructureTree(props) {
                         <div className={css.cmd}>
                             <div>{item.id == chooseNodeId && '*'}</div>
                             <div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div>
-                            <div>&</div>
+                            <div onClick={() => addTemplate(item)}>&</div>
                         </div>
                     </div>
                 </div>
@@ -72,7 +79,7 @@ export default function ElementStructureTree(props) {
                 <div className={css.cmd}>
                     <div>{props.tree.id == chooseNodeId && '*'}</div>
                     <div onClick={() => defaultStore.deleteChooseNode(props.tree.id)}>-</div>
-                    <div>&</div>
+                    <div onClick={() => addTemplate(props.tree)}>&</div>
                 </div>
             </div>
             <div className={css.childBox}>

src/components/Modal/index.jsx

@@ -61,6 +61,7 @@ export default function Dialog(props){
 
     const className = [BPEMR.BPEMR_Dialog_Tem, temCloseAnimation].join(' ')
 
+    if(state){
         return createPortal(
             <div className={className} style={{width:width + 'px', height:width * 0.618 + 'px'}}>
                 <div className={BPEMR.close} onClick={close}><img src={closeSvg} alt=""/></div>
@@ -68,4 +69,9 @@ export default function Dialog(props){
             </div>,
             node
         );
+    }else{
+        return null
+    }
+
+
 }

src/store/defaultStore.js

@@ -46,6 +46,12 @@ class DefaultStore {
     styleTimeout = null;
     // 输入内容
     inputValue = null;
+    // 模板列表
+    templateList = null;
+    // 模板状态
+    templateAddModalState = false;
+    // 模板内容
+    templateContainer = null;
 
 
     constructor() {
@@ -63,6 +69,9 @@ class DefaultStore {
             styleReal: observable,
             styleTimeout: observable,
             inputValue:observable,
+            templateList:observable,
+            templateAddModalState: observable,
+            templateContainer: observable,
 
             containerList: computed,
 
@@ -74,7 +83,12 @@ class DefaultStore {
             getContainerList: action,
             createConatiner: action,
             updateContainer: action,
-            deleteContainer: action
+            deleteContainer: action,
+            getTemplateList: action,
+            setInputValue: action,
+            setTemplateAddModalState: action,
+            setTemplateContainer:action,
+            createTemplateConatiner: action,
         });
     }
 
@@ -113,6 +127,13 @@ class DefaultStore {
     setInputValue(value) {
         this.inputValue = value
     }
+    // 设置添加模板状态
+    setTemplateAddModalState(state){
+        this.templateAddModalState = state
+    }
+    setTemplateContainer(container){
+        this.templateContainer = container
+    }
 
     // 获取内容列表
     async getContainerList(menuId) {
@@ -127,16 +148,35 @@ class DefaultStore {
             })
         })
     }
-
+    // 获取模板
+    async getTemplateList(){
+        const data = await api.getContainerList({menuId:0})
+        runInAction(() => {
+            const templateList = data.data.data
+            const newTemplateList = templateList.map(item => {
+                item.body = JSON.parse(item.body);
+                item.config = JSON.parse(item.config)
+                return item
+            })
+            this.templateList = newTemplateList
+        })
+    }
+    // 创建容器
     async createConatiner(data) {
         const response = await api.createContainer(data)
         this.getContainerList(this.menuId)
     }
-
+    // 创建模板
+    async createTemplateConatiner(data) {
+        const response = await api.createContainer(data)
+        this.getTemplateList()
+    }
+    // 更新容器
     async updateContainer(data) {
         const response = await api.updateContainer(data)
         this.getContainerList(this.menuId)
     }
+    // 删除重启
     async deleteContainer(data) {
         const response = await api.deleteContainer(data)
         this.getContainerList(this.menuId)

src/tools/index.js

@@ -73,7 +73,16 @@ export function deleteTargetNode(id, node){
         }
     }
 }
-
+// 修改元素的id
+export function changgElementId(container){
+    container.map(item => {
+        if(item.childElement){
+            changgElementId(item.childElement)
+        }
+        item.id = Math.random()
+    })
+}
+// 获取文件MD5
 export function getMD5(file) {
     return new Promise((resolve, reject) => {
         let fileReader = new FileReader()

src/view/EditPageNew/index.jsx

@@ -1,6 +1,6 @@
 import {useState, useEffect} from 'react';
 import {defaultStore} from '@/store/index';
-import {getTargetElement, getTargetNode, deleteTargetNode, NE} from "@/tools/index.js";
+import {getTargetElement, getTargetNode, deleteTargetNode, changgElementId, NE} from "@/tools/index.js";
 import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx";
 import Modal from '@/components/Modal';
 import Button from "@/components/Button/index.jsx";
@@ -10,6 +10,7 @@ import StyleControl from "@/components/StyleControl/index.jsx";
 import Editor from "@/components/Editor/index.jsx";
 
 import css from './index.module.scss'
+import atomcss from '@/components/Atom/index.module.scss'
 import svgLolipop from '@/assets/lolipop.svg'
 import svgHelp from '@/assets/help.svg'
 import svgArrow from '@/assets/arrow.svg'
@@ -40,9 +41,18 @@ export default function EditPageNew() {
     // 属性页标签位置
     const [attrLabelPosition, setAttrLabelPosition] = useState(0);
 
+    // 模板添加
+
+    const [templateAddModalState, setTemplateAddModalState] = useState(false)
+    const [templateName, setTemplateName] = useState('')
+    // 模板内容
+    const [templateList, setTemplateList] = useState([])
+
+
     useEffect(() => {
         console.log('生命周期开始，发送请求！')
         defaultStore.getContainerList(10)
+        defaultStore.getTemplateList()
     }, [0])
     // 获取容器列表
     useEffect(() => {
@@ -72,37 +82,8 @@ export default function EditPageNew() {
         const handleNewElementChange = autorun(() => {
             // 判断子元素是否为空
             if (!defaultStore.newElementIdentify) return;
-            // 判断是否允许添加子元素
-            // 判断是否有选中元素
-            if (!nowElement) {
-                alert('未选中元素，无法添加。')
-                defaultStore.setNewElementIdentify(null);
-                return;
-            }
-            // 判断元素是否支持添加Element子元素
-            if (nowElement.config.childrenType != 'element') {
-                alert('此元素不支持添加子元素。');
-                defaultStore.setNewElementIdentify(null);
-                return;
-            }
-            // 判断是否能容纳新元素
-            if (nowElement.config.childrenLength == 1 && nowElement.childElement.length != 0) {
-                alert('此元素无法容纳更多元素');
-                defaultStore.setNewElementIdentify(null);
-                return;
-            }
-            const newElement = getTargetElement(defaultStore.newElementIdentify, new NE())
-            newElement.id = Math.random()
-            nowElement.childElement.push(newElement);
-            setNowElement(nowElement)
-            setNowContent({...nowContent})
-            for (let i in nowContentList) {
-                if (nowContentList[i].id == nowContent.id) {
-                    nowContentList[i] = nowContent;
-                    break
-                }
-            }
-            setNowContentList({...nowContentList})
+            const newElement = getTargetElement(defaultStore.newElementIdentify, new NE());
+            addAtom(newElement)
             defaultStore.setNewElementIdentify(null);
         })
         return () => {
@@ -186,12 +167,99 @@ export default function EditPageNew() {
             a()
         }
     }, [nowContent, nowContentList, nowElement])
+    // 添加模板
+    useEffect(() => {
+        const a = autorun(() => {
+            if(defaultStore.templateAddModalState){
+                setTemplateAddModalState(true)
+            }
+        })
+        return () => {
+            a()
+        }
+    }, [defaultStore.templateAddModalState])
+    // 模板刷新
+    useEffect(() => {
+        const a = autorun(() => {
+            if(defaultStore.templateList){
+                if(defaultStore.templateList != templateList){
+                    setTemplateList(defaultStore.templateList)
+                    console.log('SETT', defaultStore.templateList)
+                }
+            }
+        })
+        return () => {
+            a()
+        }
+    }, [defaultStore.templateList])
 
     // 关闭大纲添加的页面
     function closeThumbnailModal() {
         setNewThumbnailName('')
         setAddThumbnailState(false)
     }
+    // 关闭添加模板
+    function closeTemplate(){
+        defaultStore.setTemplateAddModalState(false)
+        defaultStore.setTemplateContainer(null)
+        setTemplateAddModalState(false)
+        setTemplateName('')
+    }
+    // 添加模板
+    function addTemplate(){
+        const name = templateName;
+        const container = defaultStore.templateContainer
+        console.log(name, container)
+        const data = {
+            name: name,
+            menuId: 0,
+            config: JSON.stringify({}),
+            rank: defaultStore.templateList.length,
+            body: JSON.stringify(container)
+        }
+        defaultStore.createTemplateConatiner(data)
+        closeTemplate()
+    }
+    // 增加模板元素
+    function handleAddTemplate(item){
+        const newTemplateElement = JSON.parse(JSON.stringify(item.body))
+        changgElementId([newTemplateElement])
+        addAtom(newTemplateElement)
+    }
+    // 添加元素
+    function addAtom(newElement){
+        // 判断是否允许添加子元素
+        // 判断是否有选中元素
+        if (!nowElement) {
+            alert('未选中元素，无法添加。')
+            defaultStore.setNewElementIdentify(null);
+            return;
+        }
+        // 判断元素是否支持添加Element子元素
+        if (nowElement.config.childrenType != 'element') {
+            alert('此元素不支持添加子元素。');
+            defaultStore.setNewElementIdentify(null);
+            return;
+        }
+        // 判断是否能容纳新元素
+        if (nowElement.config.childrenLength == 1 && nowElement.childElement.length != 0) {
+            alert('此元素无法容纳更多元素');
+            defaultStore.setNewElementIdentify(null);
+            return;
+        }
+
+        newElement.id = Math.random()
+        nowElement.childElement.push(newElement);
+        setNowElement(nowElement)
+        setNowContent({...nowContent})
+        for (let i in nowContentList) {
+            if (nowContentList[i].id == nowContent.id) {
+                nowContentList[i] = nowContent;
+                break
+            }
+        }
+        setNowContentList({...nowContentList})
+    }
 
     // 确认添加新的大纲元素
     function addThumbnail() {
@@ -221,6 +289,7 @@ export default function EditPageNew() {
             body: JSON.stringify(nowContentList[item.id]),
             name:item.name
         }
+        console.log(data)
         defaultStore.updateContainer(data)
     }
 
@@ -330,6 +399,20 @@ export default function EditPageNew() {
                                                     </div>
                                                 </div>
                                             </Modal>
+                                            <Modal state={templateAddModalState} close={closeTemplate} width={"300"}>
+                                                <div className={css.addThumbnailState}>
+                                                    <div className={css.title}>添加模板</div>
+                                                    <div className={css.main}>
+                                                        <div>模板名称</div>
+                                                        <div><input type="text" value={templateName}
+                                                                    onChange={event => {
+                                                                        setTemplateName(event.target.value)
+                                                                    }}/></div>
+                                                    </div>
+                                                    <div className={css.ok}><div onClick={addTemplate}>确认</div>
+                                                    </div>
+                                                </div>
+                                            </Modal>
                                         </div>
                                     </div>
                                 </div>
@@ -363,7 +446,21 @@ export default function EditPageNew() {
                                                 <div className={css.linner}></div>
                                                 {/*新增元素*/}
                                                 <div className={css.addElement}>
+                                                    <div>基础元素</div>
                                                     <Atom AtomList={defaultStore.Atom}></Atom>
+                                                    <div>模板</div>
+                                                    <div className={atomcss.atomBox}>
+                                                            {
+                                                                templateList.map(item => {
+                                                                    return <div className={atomcss.atomTitle} key={item.id}>
+                                                                        <div className={atomcss.text}>{item.name}</div>
+                                                                        <div className={atomcss.cmd}>
+                                                                            <div onClick={() => handleAddTemplate(item)}>+</div>
+                                                                        </div>
+                                                                    </div>
+                                                                })
+                                                            }
+                                                    </div>
                                                 </div>
                                                 <div className={css.linner}></div>
                                                 {/*元素属性*/}

src/view/EditPageNew/index.module.scss

@@ -340,6 +340,11 @@
                                 padding: 1rem;
                                 box-sizing: border-box;
                                 overflow: auto;
+                                &:hover div{
+                                    border: solid 1px #333;
+                                    box-sizing: border-box;
+                                    padding: 3px;
+                                }
                             }
 
                             //  右部属性区