comptree

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -1,14 +1,13 @@
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
-import { Tree, TreeProps } from "ant-design-vue";
+import { Tree } from "ant-design-vue";
 import { defineComponent, nextTick, watch } from "vue";
-import { string, bool } from "vue-types";
+import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
-import { TreeDataItem } from "ant-design-vue/lib/tree";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 
 type TreeItem = {
   key: string;
@@ -19,7 +18,17 @@ type TreeItem = {
 
 export const CompTree = defineComponent({
   setup() {
-    const { store, actions, helper, controls } = useEditor();
+    const { controls } = useEditor();
+    return () => {
+      const key = controls.pageCtrl.designData.title;
+      return <CompTreeMain key={key} />;
+    };
+  },
+});
+
+export const CompTreeMain = defineComponent({
+  setup() {
+    const { store, helper, controls } = useEditor();
     const { compUICtrl } = controls;
 
     const state = useReactive(() => ({
@@ -62,6 +71,7 @@ export const CompTree = defineComponent({
         });
       }
     );
+
     const onDrop = (info: any) => {
       const dragNode = info.dragNode; //被拖拽
       const dropNode = info.node; //拖拽落下
@@ -140,6 +150,7 @@ export const CompTree = defineComponent({
         helper.extendStreamCard(parentComp.id);
       });
     };
+
     const sortCompInCard = (
       parentComp: DesignComp,
       index: number,