share local

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

@@ -17,7 +17,7 @@ export const Component = defineComponent({
     const comp = useCompData<CompVideoObj>(props.compId);
     const { value } = comp;
     const videoRef = ref<HTMLVideoElement>();
-
+    const ctx = useCtx();
     async function changeVal() {
       try {
         const url = await controls.pickCtrl.pickOneImage();
@@ -98,7 +98,9 @@ export const Component = defineComponent({
       if (value.loop) options.loop = true;
       if (value.controls) options.controls = true;
       if (value.poster) options.poster = value.poster;
-
+      if (ctx.prjCtrl.isLocalUrl(value.url)) {
+        value.url = ctx.prjCtrl.getHttpAbsoluteUri(value.url);
+      }
       return (
         <View class={rootCls} compId={props.compId}>
           <video

src/modules/editor/components/Viewport/Header/PublishDesignModal.tsx

@@ -17,6 +17,7 @@ import {
   onMounted,
 } from "vue";
 import { any } from "vue-types";
+import { useCompRef } from "../../CompUI/basicUI/hooks";
 const NotFoundComp = () => <div>无效的组件</div>;
 const layout = {
   labelCol: { span: 24 },
@@ -112,7 +113,6 @@ export default defineComponent({
       const pageRoot = page.rootPage;
       const isShort = pageRoot?.value.pageMode == "short";
       if (isShort) controls.previewCtrl.initSwiper(compRef.value);
-      screenshotThumbnail();
     });
 
     const Content = () => {
@@ -154,23 +154,6 @@ export default defineComponent({
       );
     };
 
-    const screenshotThumbnail = async () => {
-      try {
-        const rootComp = page.rootPage;
-        if (!rootComp) return;
-        queenApi.showLoading("截屏中");
-        const blob = await new ScreenshotCtrl().snap({
-          element: rootComp.$el,
-          ratio: 1,
-        });
-        const thumbnail = URL.createObjectURL(blob);
-        formState.thumbnail = thumbnail;
-      } catch (error: any) {
-        throw Exception.error(error.toString());
-      } finally {
-        queenApi.hideLoading();
-      }
-    };
     const uploadThumbnail = async () => {
       const url = await SelectOneImage();
       if (!url) return;

src/modules/editor/components/Viewport/Header/SaveOrShare.tsx

@@ -25,14 +25,18 @@ export default defineUI({
         }
       );
     }
-    function showPublishModal() {
+    async function showPublishModal() {
+      if (!controls.pageCtrl.designData.thumbnail) {
+        await actions.updateThumbnailByScreenshot();
+      }
+
       controls.screenCtrl.saveScreenPage();
       const rootPage = controls.pageCtrl.rootPage;
       rootPage.value.pageMode = controls.screenCtrl.state.screen.pageMode;
       rootPage.value.pageSizeType =
         controls.screenCtrl.state.screen.pageSizeType;
 
-      queenApi.dialog(
+      await queenApi.dialog(
         <PublishDesignModal data={controls.pageCtrl.designData} />,
         {
           fullscreen: true,

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

@@ -275,7 +275,7 @@ export const editActions = EditorModule.action({
     }, 100);
   },
 
-  centerLastComp(event:MouseEvent) {
+  centerLastComp(event: MouseEvent) {
     const currCardDom = this.controls.pageCtrl.currStreamCard.$el;
     const cardPoints = this.helper.getPointOffsetWith(event, currCardDom);
     const page = this.controls.pageCtrl;
@@ -366,9 +366,9 @@ export const editActions = EditorModule.action({
       if (isWidth) {
         isSame = w == size[0];
         size[0] = w;
-      }
-      else {
-        isSame = size[1] == this.controls.pageCtrl.currStreamCard.layout.size[1]
+      } else {
+        isSame =
+          size[1] == this.controls.pageCtrl.currStreamCard.layout.size[1];
         size[1] = this.controls.pageCtrl.currStreamCard.layout.size[1];
       }
       if (!isSame) {
@@ -513,15 +513,16 @@ export const editActions = EditorModule.action({
   },
 
   addComps(ids: string[]) {
-    const childs = this.controls.pageCtrl.currStreamCard.children.default.slice(0);
+    const childs =
+      this.controls.pageCtrl.currStreamCard.children.default.slice(0);
     childs.push(...ids);
     this.controls.pageCtrl.currStreamCard.children.setDefault(childs);
   },
 
   ctrlAndA() {
-    const childrens = (this.controls.pageCtrl.currStreamCard.children.default || []).slice(
-      0
-    );
+    const childrens = (
+      this.controls.pageCtrl.currStreamCard.children.default || []
+    ).slice(0);
     this.controls.selectCtrl.gizmo.selectObjs(childrens);
   },
 
@@ -689,7 +690,7 @@ export const editActions = EditorModule.action({
 
       // 封面截屏
       // if (!ctrl.designData.thumbnail) {
-      //   await this.actions.updateThumbnailByScreenshot();
+      //  await this.actions.updateThumbnailByScreenshot();
       // }
 
       queenApi.showLoading("保存中");
@@ -732,7 +733,7 @@ export const editActions = EditorModule.action({
     try {
       const rootComp = ctrl.rootPage;
       if (!rootComp) return;
-      queenApi.showLoading("截屏中");
+      queenApi.showLoading("封面生成中");
       const blob = await new ScreenshotCtrl().snap({
         element: rootComp.$el,
         ratio: this.store.isEditComp ? 0 : 1,

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

@@ -26,6 +26,20 @@ export const initActions = EditorModule.action({
 
   // 初始化数据
   async initDesign(id: string, isSys = false) {
+    const ret = await this.https.getDesignDetail(id, { isSys });
+    if (!ret.result.compMap) {
+      const cate: any = this.store.tplCategory || [];
+      const item = cate.find((d: any) => ret.result.categories?.includes(d.id));
+      if (item && item.value == "PC") {
+        ret.result.platform = "pc";
+      } else {
+        ret.result.platform = "mobile";
+      }
+    }
+    const page = this.controls.pageCtrl;
+    page.setDesignData(ret.result);
+  },
+  async initQueen5Design() {
     // const ret = await this.https.getDesignDetail(id, { isSys });
     const ctx = useCtx();
     const ret =await ctx.prjCtrl.loadQueen5();

src/pages/editor/EditPage/index.tsx

@@ -30,7 +30,7 @@ export default defineComponent(() => {
     //     editor.actions.initWkDesign(prodId);
     //     return;
     //   }
-      editor.actions.initDesign("", false);
+      editor.actions.initQueen5Design();
     // } else {
     //   editor.jumpIndexHtml();
     // }

src/pages/h5/share/index.ts → src/pages/share/h5/index.ts

@@ -1,6 +1,6 @@
 import { startApp } from "@/App";
 import { initViewportSize } from "@/hooks/initViewportSize";
-import CKEditor from "@ckeditor/ckeditor5-vue";
+// import CKEditor from "@ckeditor/ckeditor5-vue";
 import "./style.less";
 import router from "./router";
 
@@ -9,5 +9,5 @@ import router from "./router";
 
 document.title = "分享";
 startApp(router, [initViewportSize], (app) => {
-  app.use(CKEditor);
+  // app.use(CKEditor);
 });

src/pages/share/local/Promotion.tsx

@@ -0,0 +1,84 @@
+import Empty from "@/components/Empty";
+import { initEditor } from "@/modules/editor";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+import { initResource } from "@/modules/resource";
+import { cx } from "@linaria/core";
+import { isPc } from "@queenjs/utils";
+import { defineComponent, provide } from "vue";
+
+export default defineComponent(() => {
+  const editor = initEditor();
+  initResource();
+  const params = new URLSearchParams(location.href.split("?")[1].split("#")[0]);
+  const id = params.get("id");
+  const isSys = params.get("isSys");
+  const isWk = params.get("isWk");
+
+  provide("isPreview", true);
+
+  editor.actions.switchMode("display");
+
+  if (id) {
+    if (isWk) {
+      editor.actions.initWkDesign(id);
+    } else {
+      editor.actions.initDesign(id, isSys);
+    }
+
+    editor.controls.wxCtrl.setup(window.location.href);
+
+    editor.actions.on("initDesign:success", () => {
+      const data = editor.controls.pageCtrl.designData;
+      document.title = data.title;
+      const shareData = {
+        title: data.title,
+        link: location.href,
+        imgUrl: data.thumbnail || "",
+        desc: data.desc,
+      };
+      editor.controls.wxCtrl.setShareData(shareData);
+      editor.controls.wxCtrl.setShare(shareData);
+
+      editor.controls.screenCtrl.applyScreen();
+    });
+  }
+  // fetch("https://restapi.amap.com/v3/ip?key=6f53b2e09f72ad63423b2da6e08b25d7").then(response=>{
+  //    return response.json();
+  // }).then(data=>{
+  //   console.log(data);
+  // })
+  if (!isPc()) {
+    return () => <editor.components.Preview />;
+  }
+
+  function getPageH() {
+    const rootPage = editor.controls.pageCtrl.rootPage;
+    const pageH = rootPage?.layout.size?.[1] || Design_Page_Size[1];
+    return editor.helper.designToNaturalSize(pageH, {
+      adaptiveH: true,
+    });
+  }
+
+  return () => {
+    const rootPage = editor.controls.pageCtrl.rootPage;
+    const isPcDesign = rootPage?.value.useFor == "pc";
+
+    // pc in mobile
+    if (isPcDesign && !isPc()) return <Empty />;
+
+    // mobile in pc
+    if (!isPcDesign && isPc()) {
+      const pegeH = getPageH();
+      return (
+        <div class="h-100vh flex items-center justify-center">
+          <div class="scrollbar !overflow-x-hidden" style={{ height: pegeH }}>
+            <editor.components.Preview />
+          </div>
+        </div>
+      );
+    }
+
+    // mobile in mobile
+    return <editor.components.Preview />;
+  };
+});

src/pages/share/local/index.ts

@@ -0,0 +1,13 @@
+import { startApp } from "@/App";
+import { initViewportSize } from "@/hooks/initViewportSize";
+// import CKEditor from "@ckeditor/ckeditor5-vue";
+import "./style.less";
+import router from "./router";
+
+// import VConsole from 'vconsole';
+// const vConsole = new VConsole();
+
+document.title = "发布预览";
+startApp(router, [initViewportSize], (app) => {
+  // app.use(CKEditor);
+});

src/pages/share/local/router.ts

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

src/pages/share/local/style.less

@@ -0,0 +1,27 @@
+#app {
+  // min-height: 100vh;
+  // min-width: 100vw; //会出现滚动条
+  height: 100%;
+  min-width: 0;
+  min-height: 100%;
+  background-color: #fff;
+  overflow: auto;
+}
+
+@keyframes arrow {
+  0%,
+  30% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}

vue.config.js

@@ -17,7 +17,8 @@ module.exports = defineConfig({
   pages: {
     index: "src/pages/website/index.ts",
     editor: "src/pages/editor/index.ts",
-    share: "src/pages/h5/share/index.ts",
+    share: "src/pages/share/h5/index.ts",
+    local: "src/pages/share/local/index.ts",
     treeapi: "src/pages/queentree/index.ts",
   },
   publicPath: publicPath,