Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

package.json

@@ -42,13 +42,13 @@
     "@queenjs/ui": "^0.0.6",
     "@queenjs/use": "^0.0.4",
     "@queenjs/utils": "^0.0.2",
-    "@simonwep/pickr": "^1.8.2",
     "@types/dom-to-image": "^2.6.4",
     "@types/file-saver": "^2.0.5",
     "@types/qrcode": "^1.5.0",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^10.1.2",
     "ali-oss": "^6.17.1",
+    "animate.css": "^4.1.1",
     "ant-design-vue": "^3.2.12",
     "ckeditor5-line-height-latest": "^1.0.2",
     "clipboard": "^2.0.11",

src/modules/editor/components/CompUI/basicUI/Text/TextToolComp.tsx

@@ -29,6 +29,7 @@ import {
 } from "vue";
 import { any, bool, func, number, object, string } from "vue-types";
 import NewColorPicker from "../../formItems/NewColorPicker";
+import { isNumber } from "lodash";
 interface ColumnItem {
   label?: string;
   component?: ((...args: any[]) => any) | Record<string, any>;
@@ -122,8 +123,9 @@ export const LetterSpacingComp = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     return () => {
-      const value =
+      let value =
         typeof props.value === "string" ? parseInt(props.value) : props.value;
+      value = isNumber(value) ? value : 0;
 
       return (
         <InputNumber
@@ -153,8 +155,9 @@ export const LineHeightComp = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     return () => {
-      const value =
+      let value =
         typeof props.value === "string" ? parseFloat(props.value) : props.value;
+      value = isNumber(value) ? value : 1.5;
       return (
         <InputNumber
           prefix={<IconTextLineHeight class="text-22px mr-6px" />}
@@ -261,10 +264,14 @@ export const FontFamily = defineComponent({
       { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
     ];
     return () => {
+      let item = options.find((e) => {
+        return e.value.indexOf(props.value) != -1;
+      });
+      const value = item ? item.value : "";
       return (
         <Select
           options={options}
-          value={props.value || ""}
+          value={value || ""}
           onChange={(v) => {
             emit("change", v);
           }}
@@ -280,13 +287,16 @@ export const FontSize = defineComponent({
   emits: ["change"],
   setup(props, { emit }) {
     return () => {
+      let value =
+        typeof props.value === "string" ? parseInt(props.value) : props.value;
+      value = isNumber(value) ? value : 12;
       return (
         <InputNumber
           prefix={<IconTextSize class="text-22px mr-6px" />}
           defaultValue={12}
           min={12}
           max={60}
-          value={parseInt(props.value) || 12}
+          value={value}
           onChange={(value: any) => {
             if (!value) {
               emit("change", "12px");

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,14 +1,16 @@
 import { IconAdd, IconMove } from "@/assets/icons";
 import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
-import { defineComponent, onMounted, ref } from "vue";
-import { string, bool } from "vue-types";
+import "animate.css";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import { bool, string } from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef, useCompEditLayerRef } from "./hooks";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+import { useCompEditLayerRef, useCompRef } from "./hooks";
 
+let intersectionObserver: any;
 export const View = defineComponent({
   props: {
     compId: string().isRequired,
@@ -23,6 +25,28 @@ export const View = defineComponent({
       ? useCompEditLayerRef(props.compId)
       : ref();
 
+    const isLongPage = controls.screenCtrl.isLongPage;
+
+    const state = reactive({
+      showAnimation: false,
+    });
+
+    onUnmounted(() => {
+      intersectionObserver.disconnect();
+    });
+
+    onMounted(() => {
+      intersectionObserver = new IntersectionObserver((entries) => {
+        if (entries[0].intersectionRatio <= 0) {
+          if (isLongPage) return;
+          state.showAnimation = false;
+        } else {
+          state.showAnimation = true;
+        }
+      });
+      intersectionObserver.observe(compRef.value);
+    });
+
     return () => {
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
@@ -53,8 +77,17 @@ export const View = defineComponent({
         });
       }
 
-      if (comp.anim && comp.anim.transition) {
-        style.transition = "all 1s ease-out";
+      // if (comp.anim && comp.anim.transition) {
+      //   style.transition = "all 1s ease-out";
+      // }
+
+      let aniStyles = "";
+      if (
+        comp.layout.anim &&
+        state.showAnimation &&
+        ((!props.showMask && store.isEditMode) || !store.isEditMode)
+      ) {
+        aniStyles = `animate__animated animate__${comp.layout.anim} animate__delay-0.1s`;
       }
 
       function RenderPre() {
@@ -122,8 +155,6 @@ export const View = defineComponent({
         }
       }
 
-      const isLongPage = controls.screenCtrl.isLongPage
-
       return (
         <div
           ref={compRef}
@@ -146,6 +177,9 @@ export const View = defineComponent({
           onDblclick={() => emit("dblclick")}
         >
           <div
+            class={cx(
+              comp.layout.anim ? (aniStyles ? aniStyles : "opacity-0") : ""
+            )}
             onMousemove={(e) => {
               if (
                 !store.isEditMode ||

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -94,17 +94,25 @@ export const layoutColumns: ColumnItem[] = [
 export const animateColumns: ColumnItem[] = [
   {
     label: "入场效果",
-    dataIndex: "layout.border.style",
+    dataIndex: "layout.anim",
     component: "Select",
+    getValue(v) {
+      if (v == undefined) return "";
+      return v;
+    },
     props: {
       bordered: false,
       style: { backgroundColor: "#303030" },
-      defaultValue: "none",
+
       options: [
-        { label: "无", value: "none" },
-        { label: "直线", value: "solid" },
-        { label: "点状线", value: "dotted" },
-        { label: "破折线", value: "dashed" },
+        { label: "无", value: "" },
+        { label: "淡入", value: "fadeIn" },
+        { label: "向右移入", value: "slideInLeft" },
+        { label: "向左移入", value: "slideInRight" },
+        { label: "向上移入", value: "slideInUp" },
+        { label: "向下移入", value: "slideInDown" },
+        { label: "中心放大", value: "zoomIn" },
+        { label: "弹跳", value: "bounce" },
       ],
     },
   },
@@ -310,18 +318,19 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
                 />
               </>
             ) : null}
-            {/* 动效 */}
-            <>
-              <Divider />
-              <div>
-                <span class="text-white">动效</span>
-              </div>
-              <FormUI
-                data={component}
-                columns={animateColumns}
-                onChange={changeVal}
-              />
-            </>
+            {["Container"].includes(component.compKey) ? null : (
+              <>
+                <div>
+                  <span class="text-white">动效</span>
+                </div>
+                <FormUI
+                  data={component}
+                  columns={animateColumns}
+                  onChange={changeVal}
+                />
+                <Divider />
+              </>
+            )}
           </div>
         );
       };

src/modules/editor/module/index.ts

@@ -80,7 +80,7 @@ export class EditorModule extends ModuleRoot {
 
   onReady() {
     this.actions.init();
-    this.controls.animCtrl.initEvent();
+    // this.controls.animCtrl.initEvent();
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
     this.controls.categoryCtrl.init();

src/modules/editor/typings.ts

@@ -31,6 +31,7 @@ export type Layout = {
   radius?: number;
   locked?: boolean;
   background?: Background;
+  anim?: string;
 };
 
 export type Background = {

src/pages/h5/share/Promotion.tsx

@@ -52,7 +52,7 @@ export default defineComponent(() => {
       )}
     >
       <div
-        class={isPc() ? `scrollbar overflow-x-hidden` : `overflow-x-hidden`}
+        class={isPc() ? `scrollbar !overflow-x-hidden` : `overflow-x-hidden`}
         style={{
           height: editor.helper.designToNaturalSize(Design_Page_Size[1], {
             adaptiveH: true,

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

@@ -43,8 +43,13 @@ export default defineComponent({
       return (
         <div class="flex items-start">
           <div>
-            <div class="scrollbar h-600px relative overflow-y-auto border-1px border-solid border-dark-50">
-              {slots.preview?.()}
+            <div class="h-650px relative border-1px border-solid border-dark-50">
+              <iframe
+                class="w-375px h-650px"
+                src={shareLink}
+                frameborder="0"
+                scrolling="no"
+              ></iframe>
             </div>
             <div class="mt-20px text-center">
               <Button

src/pages/website/Promotion2/controller.tsx

@@ -37,26 +37,13 @@ export function createPromotinController(
   };
 
   async function sharePromotion(record: any) {
-    const userInfo: any = auth.store.userInfo;
-    const isSys = userInfo.roles?.includes("system") ? true : false;
-    await editor.actions.initDesign(record._id, isSys);
-    editor.actions.switchMode("preview");
-    resource.showModal(
-      <ShareModal record={record} controller={ctrl}>
-        {{
-          preview: () => (
-            <editor.components.Preview class="pointer-events-none" />
-          ),
-        }}
-      </ShareModal>,
-      {
-        title: "编辑分享",
-        width: "1000px",
-        destroyOnClose: true,
-      }
-    );
+    resource.showModal(<ShareModal record={record} controller={ctrl} />, {
+      title: "编辑分享",
+      width: "1000px",
+      destroyOnClose: true,
+    });
   }
-  let url = ""
+  let url = "";
   ctrl.onMenuClick = async (name, record) => {
     switch (name) {
       case "stat":
@@ -84,9 +71,12 @@ export function createPromotinController(
         break;
 
       case "thumbnail":
-        url =  await SelectOneImage() as string;
+        url = (await SelectOneImage()) as string;
         if (!url) return;
-        await resource.https.updatePromotion({_id: record._id, thumbnail: url});
+        await resource.https.updatePromotion({
+          _id: record._id,
+          thumbnail: url,
+        });
         record.thumbnail = url;
         queenApi.messageSuccess("替换成功");
         break;

yarn.lock

@@ -1864,7 +1864,7 @@
   resolved "http://124.70.149.18:4873/@sideway%2fpinpoint/-/pinpoint-2.0.0.tgz"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
-"@simonwep/pickr@^1.8.2", "@simonwep/pickr@~1.8.0":
+"@simonwep/pickr@~1.8.0":
   version "1.8.2"
   resolved "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.8.2.tgz"
   integrity sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==
@@ -2962,6 +2962,11 @@ ali-oss@^6.17.1:
     utility "^1.8.0"
     xml2js "^0.4.16"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "http://124.70.149.18:4873/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "http://124.70.149.18:4873/ansi-colors/-/ansi-colors-4.1.3.tgz"