update

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

@@ -2,7 +2,7 @@ import { Icon3D } from "@/assets/icons";
 import { useEditor } from "@/modules/editor";
 import { css } from "@linaria/core";
 import { queenApi, useModal } from "queenjs";
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -13,34 +13,51 @@ export const Component = defineComponent({
     compId: string().isRequired,
   },
   setup(props) {
-    const { store, controls } = useEditor();
+    const { store } = useEditor();
     const { value } = useCompData(props.compId);
 
     async function pickPack() {
-      await controls.pickCtrl.onPickPack();
-      value.url =
-        "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82";
+      // await controls.pickCtrl.onPickPack();
+      // value.url =
+      //   "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82";
     }
 
-    function openWeb3D() {
-      queenApi.dialog(<Iframe3D url={value.url} />, { fullscreen: true, closable: false });
+    function showWeb3D() {
+      if (value.inline) {
+        state.show3d = true;
+      } else {
+        queenApi.dialog(<Iframe3D url={value.url} />, {
+          fullscreen: true,
+          closable: false,
+        });
+      }
     }
 
+    const state = reactive({
+      show3d: false,
+    });
+
     return () => {
       return (
         <View
           compId={props.compId}
           onDblclick={store.isEditMode ? pickPack : undefined}
         >
-          <img
-            class="w-full h-full object-cover pointer-events-none"
-            style={{ aspectRatio: value.ratio }}
-            src={value.poster}
-          />
-          <Icon3D
-            class={iconCls}
-            onClick={!store.isEditMode ? openWeb3D : undefined}
-          />
+          {state.show3d ? (
+            <iframe class="w-full border-none" src={value.url} style={{ aspectRatio: value.ratio }}/>
+          ) : (
+            <>
+              <img
+                class="w-full h-full object-cover pointer-events-none"
+                style={{ aspectRatio: value.ratio }}
+                src={value.poster}
+              />
+              <Icon3D
+                class={iconCls}
+                onClick={!store.isEditMode ? showWeb3D : undefined}
+              />
+            </>
+          )}
         </View>
       );
     };

src/modules/editor/components/CompUI/basicUI/Web3D/index.ts

@@ -13,6 +13,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
+    inline: true,
     poster: Dict_Imgs.Default,
     ratio: 1,
   },
@@ -43,4 +44,9 @@ export const Form = createAttrsForm([
       ],
     },
   },
+  {
+    label: "是否内嵌3D",
+    dataIndex: "value.inline",
+    component: "Switch",
+  },
 ]);

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

@@ -77,13 +77,19 @@ export class TransferCtrl extends ModuleControl<EditorModule> {
     this.initStyle();
     this.currObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
-        if (mutation.attributeName === "style") {
+        if (
+          mutation.type === "childList" ||
+          (mutation.type === "attributes" && mutation.attributeName === "style")
+        ) {
           this.initStyle();
         }
       });
     });
     this.currObserver.observe(this.compEl, {
       attributes: true,
+      childList: true,
+      subtree: true,
+      characterData: true,
     });
   }