基本完成了结构化

计划：
1、编辑器渲染
2、样式属性渲染
3、数据交互输入框（难点，全局变量，局域变量，事件，运行时）
4、图片视频加载
5、联调接口
6、图形渲染
7、整合所有
8、优化编辑器图形样式

src/components/ElementStructureTree/index.jsx

@@ -0,0 +1,83 @@
+// Nie 2023/2/10 元素结构树
+
+import css from './index.module.scss'
+import {defaultStore} from "@/store/index.js";
+import {useEffect, useState} from "react";
+
+export default function ElementStructureTree(props) {
+    const [boxState, setBoxState] = useState(new Array(Array.isArray(props.tree)?props.tree.length:1).fill(false));
+    const [chooseNodeId, setChooseNodeId] = useState(defaultStore.chooseNodeId)
+    // // 打开关闭标签
+    function handleChangeBoxState(index){
+        const temporaryState = new Array(boxState.length).fill(false);
+        if(!boxState[index]){
+            temporaryState[index] = true;
+        }
+        setBoxState(temporaryState)
+    }
+    // 展开闭合状态
+    useEffect(() => {
+        if(props.state){
+            setBoxState(new Array(boxState.length).fill(false))
+        }
+    }, [props.state])
+    // 选中状态
+    useEffect(() => {
+        setChooseNodeId(defaultStore.chooseNodeId)
+    }, [defaultStore.chooseNodeId])
+
+    if (Array.isArray(props.tree)) {
+        return props.tree.map((item, index) => {
+            if (item.childElement && Array.isArray(item.childElement)) {
+                return <div className={css.treeBox} key={item.id}>
+                    <div className={css.title}>
+                        <div className={css.text}
+                             onClick={() => {defaultStore.setChooseNodeId(item.id);handleChangeBoxState(index)}}>{item.name}
+                        </div>
+                        <div className={css.cmd}>
+                            <div>{item.id == chooseNodeId && '*'}</div>
+                            <div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div>
+                            <div>&</div>
+                        </div>
+                    </div>
+                    <div className={css.childBox} style={{maxHeight:boxState[index] ? '300px' : 0}}>
+                        <div>
+                            <ElementStructureTree tree={item.childElement}></ElementStructureTree>
+                        </div>
+                    </div>
+                </div>
+            } else {
+                return <div className={css.treeBox} key={item.id}>
+                    <div className={css.title}>
+                        <div className={css.text}
+                             onClick={() => defaultStore.setChooseNodeId(item.id)}>{item.name}
+                        </div>
+                        <div className={css.cmd}>
+                            <div>{item.id == chooseNodeId && '*'}</div>
+                            <div onClick={() => defaultStore.deleteChooseNode(item.id)}>-</div>
+                            <div>&</div>
+                        </div>
+                    </div>
+                </div>
+            }
+        })
+    } else if (Object.keys(props.tree).length == 0) {
+        return <div>未发现元素节点</div>
+    } else {
+        return <div className={css.treeBox}>
+            <div className={css.title}>
+                <div className={css.text}
+                     onClick={() => defaultStore.setChooseNodeId(props.tree.id)}>{props.tree.name}-根节点
+                </div>
+                <div className={css.cmd}>
+                    <div>{props.tree.id == chooseNodeId && '*'}</div>
+                    <div onClick={() => defaultStore.deleteChooseNode(props.tree.id)}>-</div>
+                    <div>&</div>
+                </div>
+            </div>
+            <div className={css.childBox}>
+                <ElementStructureTree tree={props.tree.childElement}></ElementStructureTree>
+            </div>
+        </div>
+    }
+}

src/components/ElementStructureTree/index.module.scss

@@ -0,0 +1,32 @@
+@import '@/assets/default.scss';
+.treeBox{
+    position: relative;
+
+    & > div.title{
+        position: relative;
+        @include font-serif;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        border-left: 1px solid #333;
+        padding-left: 0.3rem;
+        & > div.text{
+            position: relative;
+            flex: 1;
+        }
+        & > div.cmd{
+            position: relative;
+            flex-shrink: 0;
+            display: flex;
+            & > div{
+                position: relative;
+                padding: 0 0.5rem;
+            }
+        }
+    }
+    & > div.childBox{
+        position: relative;
+        padding-left: 1rem;
+        overflow: hidden;
+    }
+}

src/store/defaultStore.js

@@ -28,15 +28,26 @@ class DefaultStore {
     // 新元素转存媒介
     newElementIdentify = null;
 
+    // 选择的元素节点
+    chooseNodeId = null;
+    // 删除节点元素
+    deleteChooseNodeId = null
+
     constructor() {
         // mobx6 和以前版本这是最大的区别
         makeObservable(this, {
             config: observable,
             directoryStructureTree: observable,
             Atom: observable,
+            chooseNodeId: observable,
+            deleteChooseNodeId: observable,
             newElementIdentify: observable,
+
+
             setNewElementIdentify: action,
             setName: action,
+            setChooseNodeId: action,
+            deleteChooseNode:action,
             titleName: computed
         });
     }
@@ -54,6 +65,15 @@ class DefaultStore {
     setNewElementIdentify(identify) {
         this.newElementIdentify = identify
     }
+
+    // 选择元素节点
+    setChooseNodeId(id) {
+        this.chooseNodeId = id
+    }
+    // 删除节点元素
+    deleteChooseNode(id){
+        this.deleteChooseNodeId = id
+    }
 }
 
 export default DefaultStore

src/tools/index.js

@@ -12,6 +12,62 @@ export  function getTargetElement(identify, AtomTemplate){
     }
     return element
 }
+// 选择元素节点数的节点
+export function getTargetNode(id, node){
+    let targetNode = null
+    if(Array.isArray(node)){
+        node.map((item, index) => {
+            if(item.id == id){
+                targetNode = item
+                return item
+            }else{
+                if(item.childElement && item.childElement.length > 0){
+                    const s = getTargetNode(id, item.childElement)
+                    if(s) targetNode = s
+                }
+            }
+        })
+    }else{
+        if(node.id == id){
+            return node
+        }else{
+            if(node.childElement.length > 0){
+                const s = getTargetNode(id, node.childElement)
+                if(s) targetNode = s
+            }
+        }
+    }
+    return targetNode
+}
+// 删除元素节点数的节点
+export function deleteTargetNode(id, node){
+    if(Array.isArray(node)){
+        const newList = node.filter((item, index) => {
+            if(item.childElement && item.childElement.length > 0){
+                const node = deleteTargetNode(id, item.childElement)
+                if(node){
+                    item.childElement = node
+                }
+            }
+            if(item.id!=id)return true
+        })
+        if(newList.length != node){
+            return newList
+        }else{
+            return null
+        }
+    }else{
+        if(node.id == id){
+            alert('根节点无法删除')
+            return node
+        }else{
+            if(node.childElement.length > 0){
+                deleteTargetNode(id, node.childElement)
+            }
+        }
+    }
+    return node
+}
 
 
 // 框架基础属性

src/view/EditPageNew/index.jsx

@@ -1,10 +1,11 @@
 import {useState, useEffect} from 'react';
 import {defaultStore} from '@/store/index';
-import {getTargetElement, NE} from "@/tools/index.js";
+import {getTargetElement, getTargetNode, deleteTargetNode, NE} from "@/tools/index.js";
 import DirectoryStructureTree from "@/components/DirectoryStructureTree/index.jsx";
 import Modal from '@/components/Modal';
 import Button from "@/components/Button/index.jsx";
 import Atom from "@/components/Atom/index.jsx";
+import ElementStructureTree from "@/components/ElementStructureTree/index.jsx";
 
 import css from './index.module.scss'
 import svgLolipop from '@/assets/lolipop.svg'
@@ -66,14 +67,48 @@ export default function EditPageNew() {
                 return;
             }
             const newElement = getTargetElement(defaultStore.newElementIdentify, new NE())
+            newElement.id= Math.random()
             nowElement.childElement.push(newElement);
             setNowElement(nowElement)
+            setNowContent({...nowContent})
             defaultStore.setNewElementIdentify(null);
         })
         return () => {
             handleNewElementChange()
         }
-    }, [nowElement])
+    }, [nowElement, nowContent])
+
+    // 选择元素
+    useEffect(() => {
+        const handleNowElementChange = autorun(() => {
+            if(!defaultStore.chooseNodeId) return;
+            const node = getTargetNode(defaultStore.chooseNodeId, nowContent)
+            if(!node){
+                alert('未找到节点元素。')
+            }else{
+                setNowElement(node)
+            }
+        })
+        return () => {
+            handleNowElementChange()
+        }
+    },[nowElement, nowContent])
+    // 删除元素
+    useEffect(() => {
+        const handleNowElementDelete = autorun(() => {
+            if(!defaultStore.deleteChooseNodeId) return;
+            console.log('Click Del------------------------------------------------------------')
+            console.log('ID', defaultStore.deleteChooseNodeId)
+            console.log('NowCOntent', nowContent)
+            console.log('+++++++++++++++++++++++++++++++++++++++++++++++')
+            deleteTargetNode(defaultStore.deleteChooseNodeId, nowContent)
+            setNowContent({...nowContent})
+            defaultStore.deleteChooseNode(null)
+        })
+        return () => {
+            handleNowElementDelete()
+        }
+    },[nowContent])
 
     // 关闭大纲添加的页面
     function closeThumbnailModal() {
@@ -87,6 +122,7 @@ export default function EditPageNew() {
         thumbnailList.push(newThumbnail);
         // 内容列表添加新元素(同时生成根元素)
         const newElement = getTargetElement('singleFrame' ,new NE());
+        newElement.id = Math.random();
         nowContentList[newThumbnail.id] = newElement
         setNowContentList({...nowContentList})
         setThumbnailList(thumbnailList)
@@ -104,6 +140,19 @@ export default function EditPageNew() {
         if(nowContent.identify = 'singleFrame' && nowContentList[thumbnailList[index].id].childElement.length == 0){
             setNowElement(nowContentList[thumbnailList[index].id]);
         }
+        defaultStore.setChooseNodeId(null)
+        setNowElement(null)
+    }
+    // 删除缩略图-大纲
+    function deleteThumbnail(e, index){
+        e.stopPropagation();
+        delete nowContentList[thumbnailList[index].id]
+        if(thumbnailList[index].choose){
+            setNowElement(null)
+            setNowContent({})
+        }
+        thumbnailList.splice(index, 1)
+        setThumbnailList([...thumbnailList])
     }
     // 切换属性标签
     function handleChangeAttrLabelPosition(index) {
@@ -154,8 +203,13 @@ export default function EditPageNew() {
                                                             className={item.choose ? moleculeBoxChoose : css.moleculeBox}
                                                             key={index} onClick={() => chooseThumbnail(index)}>
                                                             <div>
-                                                                <div className={css.molecule}>{item.name}</div>
+                                                                <div className={css.molecule}>
-                                                                <div className={css.moleculeCmd}>{item.choose}</div>
+                                                                    <div>序列{index}</div>
+                                                                    <div>ID{item.id}</div>
+                                                                    <div>名称:{item.name}</div>
+                                                                </div>
+                                                                <div className={css.moleculeCmd}>
+                                                                    <div className={css.delete} onClick={(e) =>deleteThumbnail(e, index)}>-</div></div>
                                                             </div>
                                                         </div>
                                                     })
@@ -207,10 +261,9 @@ export default function EditPageNew() {
                                         <div className={css.main}>
                                             <div className={css.container}
                                                  style={{left: attrLabelPosition * -99 + '%'}}>
-                                                {/* 页面节点树*/}
+                                                {/* 元素结构树*/}
                                                 <div className={css.elementStructureTree}>
-                                                    <div>根节点</div>
+                                                    <ElementStructureTree tree={nowContent}></ElementStructureTree>
-                                                    <div></div>
                                                 </div>
                                                 <div className={css.linner}></div>
                                                 {/*新增元素*/}

src/view/EditPageNew/index.module.scss

@@ -255,8 +255,28 @@
 
                                                 & > div {
                                                     position: relative;
-                                                    flex: 1;
                                                     margin: 0.5rem;
+                                                    display: flex;
+                                                    height: 100%;
+                                                    & > div.molecule{
+                                                        position: relative;
+                                                        @include font-serif;
+                                                        flex: 1;
+                                                        overflow: hidden;
+                                                    }
+                                                    & > div.moleculeCmd{
+                                                        position: relative;
+                                                        flex-shrink: 0;
+                                                        padding: 0 0rem 0 0.5rem;
+                                                        & > div.delete{
+                                                            width: 25px;
+                                                            height: 25px;
+                                                            text-align: center;
+                                                            font-size: 30px;
+                                                            background: #3EC1D3;
+                                                            border-radius: 30px;
+                                                        }
+                                                    }
                                                 }
                                             }