safe area

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

@@ -1,6 +1,6 @@
 import { IconAdd, IconMove } from "@/assets/icons";
 import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { defineComponent, onMounted, ref } from "vue";
 import { string, bool } from "vue-types";
@@ -54,52 +54,76 @@ export const View = defineComponent({
       }
 
       if (comp.anim && comp.anim.transition) {
-          style.transition = "all 1s ease-out";
+        style.transition = "all 1s ease-out";
       }
 
       function RenderPre() {
-        if ( store.currStreamCardId != props.compId || !isStreamCard || !store.isEditMode  ) return;
-          let i = store.streamCardIds.indexOf(props.compId);
-          if (i>0) {
-             const c = helper.findComp(store.streamCardIds[i-1]) as DesignComp;
-             const PreComp = controls.compUICtrl.state.components.get(c.compKey) as any
-             return (<div class="absolute w-full h-150px" style={{
-                bottom: style.height
-             }}>
-                  <div class="absolute w-full h-150px pointer-events-none overflow-hidden">
-                    <PreComp.Component compId={c.id}  key={c.id} style={{position: "absolute", bottom: "0"}} />
-                  </div>
-                   <div class={maskStyleUp}></div>
-                    <div class={[divideStyle, "bottom"]} >
-                      <span class="tip">上一页分割线</span>
-                    </div>
-
-             </div> );
-          }
+        if (
+          store.currStreamCardId != props.compId ||
+          !isStreamCard ||
+          !store.isEditMode
+        )
+          return;
+        let i = store.streamCardIds.indexOf(props.compId);
+        if (i > 0) {
+          const c = helper.findComp(store.streamCardIds[i - 1]) as DesignComp;
+          const PreComp = controls.compUICtrl.state.components.get(
+            c.compKey
+          ) as any;
+          return (
+            <div
+              class="absolute w-full h-150px"
+              style={{
+                bottom: style.height,
+              }}
+            >
+              <div class="absolute w-full h-150px pointer-events-none overflow-hidden">
+                <PreComp.Component
+                  compId={c.id}
+                  key={c.id}
+                  style={{ position: "absolute", bottom: "0" }}
+                />
+              </div>
+              <div class={maskStyleUp}></div>
+              <div class={[divideStyle, "bottom"]}>
+                <span class="tip">上一页分割线</span>
+              </div>
+            </div>
+          );
+        }
       }
-  
+
       function RenderAfter() {
-        if (store.currStreamCardId != props.compId || !isStreamCard || !store.isEditMode) return 
-  
-        let i = store.streamCardIds.indexOf(props.compId);
-        if (i < store.streamCardIds.length-1 ) {
-          const c = helper.findComp(store.streamCardIds[i+1]) as DesignComp;
-          const AfterComp = controls.compUICtrl.state.components.get(c.compKey) as any;
-          return (<div class="relative"> 
+        if (
+          store.currStreamCardId != props.compId ||
+          !isStreamCard ||
+          !store.isEditMode
+        )
+          return;
 
+        let i = store.streamCardIds.indexOf(props.compId);
+        if (i < store.streamCardIds.length - 1) {
+          const c = helper.findComp(store.streamCardIds[i + 1]) as DesignComp;
+          const AfterComp = controls.compUICtrl.state.components.get(
+            c.compKey
+          ) as any;
+          return (
+            <div class="relative">
               <div class="h-150px pointer-events-none overflow-hidden">
-                  <AfterComp.Component compId={c.id}  key={c.id} />
+                <AfterComp.Component compId={c.id} key={c.id} />
               </div>
-        
-             <div class={maskStyle}></div>
-             <div class={[divideStyle, "top"]} >
+
+              <div class={maskStyle}></div>
+              <div class={[divideStyle, "top"]}>
                 <span class="tip">下一页分割线</span>
-             </div>
-           </div>);
+              </div>
+            </div>
+          );
         }
       }
 
-      
+      const isLongPage = controls.screenCtrl.state.pageMode == "long";
+
       return (
         <div
           ref={compRef}
@@ -121,7 +145,6 @@ export const View = defineComponent({
           }}
           onDblclick={() => emit("dblclick")}
         >
-          
           <div
             onMousemove={(e) => {
               if (
@@ -145,12 +168,31 @@ export const View = defineComponent({
           {store.isEditMode && props.editlayer && (
             <div ref={editorLayerRef} class={editAreaStyle}></div>
           )}
-          {
-             props.showMask && RenderPre()
-          }
-          {
-            props.showMask && RenderAfter()
-          }
+
+          {props.showMask && isLongPage && (
+            <>
+              {RenderPre()}
+              {RenderAfter()}
+            </>
+          )}
+          {props.showMask && !isLongPage && (
+            <div
+              class={cx(
+                safeAreaStyles,
+                "absolute left-0 top-1/2 w-1/1 translate -translate-y-1/2 transform pointer-events-none"
+              )}
+              style={{
+                height: `${controls.screenCtrl.state.safeFactor * 100}%`,
+              }}
+            >
+              <div class={[divideStyle, "top"]}>
+                <span class="tip"> 安全线</span>
+              </div>
+              <div class={[divideStyle, "bottom"]}>
+                <span class="tip"> 安全线</span>
+              </div>
+            </div>
+          )}
         </div>
       );
     };
@@ -258,38 +300,47 @@ const editAreaStyle = css`
   pointer-events: none;
 `;
 
-const editAreaTestStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100px;
-  height: 100px;
-  background-color: red;
-`;
+// const editAreaTestStyle = css`
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   width: 100px;
+//   height: 100px;
+//   background-color: red;
+// `;
 const maskStyle = css`
-  background: rgba(0,0,0,0.3);  
+  background: rgba(0, 0, 0, 0.3);
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-`
+`;
 
 const maskStyleUp = css`
-  background: rgba(0,0,0,0.3);
+  background: rgba(0, 0, 0, 0.3);
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-`
+`;
 
 const divideStyle = css`
   position: absolute;
   left: -10%;
   width: 120%;
-  border: 1px dashed #E54729;
-  border-dasharray: 5px 10px;
+  /* border: 1px dashed #EB684E;
+  border-dasharray: 5px 10px; */
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    #eb684e 0%,
+    #eb684e 50%,
+    transparent 50%
+  );
+  background-size: 8px 1px;
+  background-repeat: repeat-x;
 
   &.top {
     top: 0;
@@ -299,11 +350,16 @@ const divideStyle = css`
     bottom: 0;
   }
   .tip {
+    margin-left: 10px;
     font-size: 12px;
     position: absolute;
     left: 100%;
     width: 80px;
     top: -10px;
-    color: #EB684E;
+    color: #eb684e;
   }
-`
+`;
+
+const safeAreaStyles = css`
+  box-shadow: 0 0 0 500px rgba(0, 0, 0, 0.3);
+`;