update

src/modules/editor/components/CompUI/basicUI/Page/component.tsx

@@ -16,7 +16,11 @@ export const Component = defineComponent({
     const compRef = useCompRef(props.compId);
 
     return () => (
-      <div ref={compRef} style={helper.createStyle(layout)} class={["!h-auto" , editor.store.isEditMode? pageEditStyle :""]}>
+      <div
+        ref={compRef}
+        style={helper.createStyle(layout || { size: [750] })}
+        class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
+      >
         <div class="relative">
           {slots.Container?.(
             children.default.map((compId) => {
@@ -31,5 +35,5 @@ export const Component = defineComponent({
 });
 
 const pageEditStyle = css`
-   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
-`
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
+`;

src/modules/editor/components/Preview/index.tsx

@@ -1,26 +1,26 @@
 import { defineComponent } from "vue";
 import { useEditor } from "../..";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { CompUI } from "../CompUI";
-import { useCompRef } from "../CompUI/basicUI/hooks";
 
 export default defineComponent({
   setup() {
     const { store, helper } = useEditor();
-    const rootRef = useCompRef("root");
-    return () => (
-      <div
-        ref={rootRef}
-        class="overflow-hidden !h-auto"
-        style={helper.createStyle(
-          helper.findRootComp()?.layout || { size: [750] }
-        )}
-      >
-        {store.pageCompIds.map((id) => {
-          const compKey = store.designData.compMap[id]?.compKey;
-          const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
-          return Comp && <Comp key={id} compId={id} />;
-        })}
-      </div>
-    );
+    return () => {
+      const pageComp = helper.findRootComp();
+      if (!pageComp) return;
+      return (
+        <CompUI.Page.Component class="overflow-hidden" compId={pageComp.id}>
+          {{
+            Container: (children: any) => children,
+            CompItem(comp: DesignComp) {
+              const compKey = store.designData.compMap[comp.id]?.compKey;
+              const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
+              return Comp && <Comp key={comp.id} compId={comp.id} />;
+            },
+          }}
+        </CompUI.Page.Component>
+      );
+    };
   },
 });

src/modules/launcher/index.ts

@@ -4,7 +4,7 @@ import { components } from "./components";
 import { stores } from "./stores";
 import { BusController } from "@/controllers/natsController";
 import { IAppKeys } from "./objects/Application/types";
-import { queentreeApi } from "./apis/queentree";
+import { QueentreeApi } from "./objects/Apis";
 
 export class LauncherModule extends ModuleRoot {
   config = this.setConfig({
@@ -15,7 +15,7 @@ export class LauncherModule extends ModuleRoot {
   store = this.createStore(stores);
   actions = this.createActions(actions);
 
-  queentreeApi = this.use(queentreeApi);
+  queentreeApi = new QueentreeApi(this);
 
   controls = {
     natsCtrl: new BusController(),

src/modules/launcher/objects/Apis/index.ts

@@ -0,0 +1 @@
+export * from "./queentree";

src/modules/launcher/apis/queentree.ts → src/modules/launcher/objects/Apis/queentree.ts

@@ -1,8 +1,8 @@
-import { LauncherModule } from "..";
+import { ModuleControl } from "queenjs";
+import { LauncherModule } from "../..";
 
-export const queentreeApi = LauncherModule.define({
+export class QueentreeApi extends ModuleControl<LauncherModule> {
   async selectOneAsset(assetType: string) {
-    
     const { waitChanell } = await this.controls.natsCtrl.requestApi(
       "tree.selector.iframe.packcomp"
     );
@@ -14,5 +14,5 @@ export const queentreeApi = LauncherModule.define({
 
     //openIframe
     //wait iframe result
-  },
-});
+  }
+}