update

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

@@ -1,11 +1,12 @@
 import { Icon3D } from "@/assets/icons";
 import { useEditor } from "@/modules/editor";
 import { css } from "@linaria/core";
-import { queenApi } from "queenjs";
+import { queenApi, useModal } from "queenjs";
 import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
+import { IconClose } from "@queenjs/icons";
 
 export const Component = defineComponent({
   props: {
@@ -22,10 +23,7 @@ export const Component = defineComponent({
     }
 
     function openWeb3D() {
-      queenApi.dialog(
-        <iframe class="w-full h-full border-none" src={value.url} />,
-        { fullscreen: true }
-      );
+      queenApi.dialog(<Iframe3D url={value.url} />, { fullscreen: true, closable: false });
     }
 
     return () => {
@@ -49,6 +47,21 @@ export const Component = defineComponent({
   },
 });
 
+const Iframe3D = defineComponent({
+  props: {
+    url: string().isRequired,
+  },
+  setup(props) {
+    const modal = useModal();
+    return () => (
+      <div class="w-full h-full overflow-hidden relative">
+        <IconClose class={closeCls} onClick={() => modal.cancel()} />
+        <iframe class="w-full h-full border-none" src={props.url} />
+      </div>
+    );
+  },
+});
+
 const iconCls = css`
   position: absolute;
   top: 50%;
@@ -59,3 +72,15 @@ const iconCls = css`
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.7);
 `;
+
+const closeCls = css`
+  position: absolute;
+  top: 0.3rem;
+  left: 0.3rem;
+  font-size: 0.3rem;
+  color: #666;
+  padding: 0.2rem;
+  border-radius: 50%;
+  background-color: #fff;
+  @apply shadow;
+`;

src/pages/share/App.tsx → src/pages/share/Promotion/index.tsx

@@ -1,15 +1,13 @@
-import { initRemSize } from "@/hooks/initRemSize";
 import { initEditor } from "@/modules/editor";
 import { defineComponent, onMounted } from "vue";
-import WxSdk from "./sdk";
+import WxSdk from "../sdk";
 
-export const App = defineComponent(() => {
+export default defineComponent(() => {
   const editor = initEditor();
   const params = new URLSearchParams(location.href.split("?")[1]);
   const id = params.get("id");
 
   editor.actions.switchMode("preview");
-  initRemSize();
 
   if (id) {
     editor.actions.initDesign(id);

src/pages/share/index.ts

@@ -1,8 +1,10 @@
+import { startApp } from "@/App";
+import { initRemSize } from "@/hooks/initRemSize";
 import CKEditor from "@ckeditor/ckeditor5-vue";
-import { createApp } from "vue";
-import "../../styles";
-import { App } from "./App";
+import router from "./router";
 import "./style.less";
 
-const app = createApp(App);
-app.use(CKEditor).mount("#app");
+document.title = "分享";
+startApp(router, [initRemSize], (app) => {
+  app.use(CKEditor);
+});

src/pages/share/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "share",
+    meta: {
+      needAuth: true,
+    },
+    component: () => import("./Promotion"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -49,7 +49,7 @@ export default defineUI({
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden relative">
             <Image
-              class="h-1/1 w-1/1 !object-contain"
+              class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
             <Tag