update

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

@@ -15,18 +15,20 @@ export const Component = defineComponent({
     const { children } = useCompData(props.compId);
     return () => (
       <View compId={props.compId}>
-        {children.default?.map((compId) => {
-          const compItem = helper.findComp(compId) as DesignComp;
-          const Comp =
-            controls.compUICtrl.state.components.get(compItem.compKey)
-              ?.Component || CompUI.Container.Component;
-          
-          return (
-            <div class="flex flex-col">
-              <Comp key={compItem.id} compId={compItem.id} />
-            </div>
-          );
-        })}
+        <div>
+          {children.default?.map((compId) => {
+            const compItem = helper.findComp(compId) as DesignComp;
+            const Comp =
+              controls.compUICtrl.state.components.get(compItem.compKey)
+                ?.Component || CompUI.Container.Component;
+
+            return (
+              <div class="flex flex-col">
+                <Comp key={compItem.id} compId={compItem.id} />
+              </div>
+            );
+          })}
+        </div>
       </View>
     );
   },

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

@@ -7,6 +7,7 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import { IconClose } from "@queenjs/icons";
+import { Image } from "@queenjs/ui";
 
 export const Component = defineComponent({
   props: {
@@ -44,12 +45,17 @@ export const Component = defineComponent({
           onDblclick={store.isEditMode ? pickPack : undefined}
         >
           {state.show3d ? (
-            <iframe class="w-full border-none" src={value.url} style={{ aspectRatio: value.ratio }}/>
+            <iframe
+              class="w-full border-none"
+              src={value.url}
+              style={{ aspectRatio: value.ratio }}
+            />
           ) : (
             <>
-              <img
-                class="w-full h-full object-cover pointer-events-none"
+              <Image
+                class="w-full pointer-events-none"
                 style={{ aspectRatio: value.ratio }}
+                size={480}
                 src={value.poster}
               />
               <Icon3D

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

@@ -4,9 +4,12 @@ import { CompUI } from "../CompUI";
 
 export default defineUI({
   setup() {
-    const { store } = useEditor();
+    const { store, helper } = useEditor();
     return () => (
-      <div class="overflow-hidden">
+      <div
+        class="overflow-hidden min-h-100vh"
+        style={helper.createStyle(helper.findRootComp()?.layout || {})}
+      >
         {store.pageCompIds.map((id) => {
           const compKey = store.designData.compMap[id]?.compKey;
           const Comp: any = (CompUI[compKey] || CompUI.Container).Component;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -57,7 +57,7 @@ export default defineUI({
                       {store.currCompId &&
                         store.currCompId !== "root" &&
                         !store.textEditingState &&
-                        !state.draging && <Transfer key={store.currCompId} />}
+                        !state.draging && <Transfer class="transfer" key={store.currCompId} />}
                     </>
                   );
                 },

src/modules/editor/controllers/CompUICtrl/index.ts

@@ -81,7 +81,7 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
       ([key, comp]) => {
         if (key === "root") {
           comp.compKey = compKey as any;
-          idMap.set(key, compKey);
+          idMap.set(key, nanoid());
         }
         const id = idMap.get(key) || nanoid();
         idMap.set(key, id);

src/modules/editor/module/actions/edit.ts

@@ -52,7 +52,6 @@ export const editActions = EditorModule.action({
   // 保存项目
   async saveDesign() {
     // 清除无用组件
-    this.store.setCurrComp("");
     this.store.clearUnusedComps();
 
     // 封面截屏

src/modules/editor/module/helpers/index.ts

@@ -54,12 +54,23 @@ export const helpers = EditorModule.helper({
   async screenshot(options?: { ratio: number }): Promise<Blob> {
     const dom = document.querySelector(".page-editing-content")
       ?.parentElement as HTMLElement;
+
+    const transferEl = document.querySelector(".transfer") as
+      | HTMLElement
+      | undefined;
+    if (transferEl) {
+      transferEl.style.display = "none";
+    }
+
     if (options?.ratio) {
       const result = await domtoimage.toJpeg(dom);
       const img = await new Promise<HTMLImageElement>((resolve) => {
         const image = new Image();
         image.src = result;
         image.onload = function () {
+          if (transferEl) {
+            transferEl.style.display = "block";
+          }
           resolve(image);
         };
       });
@@ -83,6 +94,9 @@ export const helpers = EditorModule.helper({
       );
       return new Promise((resolve) => {
         canvas.toBlob((blob) => {
+          if (transferEl) {
+            transferEl.style.display = "block";
+          }
           if (blob) {
             resolve(blob);
           }