添加页面间隔提示

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

@@ -1,21 +1,27 @@
 import { defineComponent } from "vue";
-import { string } from "vue-types";
+import { bool, string } from "vue-types";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
 import { View } from "../View";
 import { CompUI } from "../..";
 import { SelectTransfer } from "../Transfer/select";
+import { sortedArray } from "three/src/animation/AnimationUtils";
 
 export const Component = defineComponent({
   props: {
     compId: string().isRequired,
+    showMask: bool().def(false)
   },
   setup(props) {
     const { helper, controls , store} = useEditor();
     const { children } = useCompData(props.compId);
+
+    const isStreamCard = helper.isStreamCard(props.compId);
+
+    
     return () => (
-      <View compId={props.compId}>
+      <View compId={props.compId} showMask={props.showMask}>
         {children.default?.map((compId) => {
           const compItem = helper.findComp(compId) as DesignComp;
           const Comp =

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

@@ -13,6 +13,7 @@ export const View = defineComponent({
   props: {
     compId: string().isRequired,
     editlayer: bool().def(true),
+    showMask: bool().def(false),
   },
   emits: ["dblclick", "click"],
   setup(props, { slots, emit }) {
@@ -56,6 +57,49 @@ export const View = defineComponent({
           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> );
+          }
+      }
+  
+      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"> 
+
+              <div class="h-150px pointer-events-none overflow-hidden">
+                  <AfterComp.Component compId={c.id}  key={c.id} />
+              </div>
+        
+             <div class={maskStyle}></div>
+             <div class={[divideStyle, "top"]} >
+                <span class="tip">下页内容</span>
+             </div>
+           </div>);
+        }
+      }
+
+      
       return (
         <div
           ref={compRef}
@@ -77,6 +121,7 @@ export const View = defineComponent({
           }}
           onDblclick={() => emit("dblclick")}
         >
+          
           <div
             onMousemove={(e) => {
               if (
@@ -100,6 +145,12 @@ export const View = defineComponent({
           {store.isEditMode && props.editlayer && (
             <div ref={editorLayerRef} class={editAreaStyle}></div>
           )}
+          {
+             props.showMask && RenderPre()
+          }
+          {
+            props.showMask && RenderAfter()
+          }
         </div>
       );
     };
@@ -214,3 +265,44 @@ const editAreaTestStyle = css`
   height: 100px;
   background-color: red;
 `;
+const maskStyle = css`
+  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);
+  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;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+  .tip {
+    font-size: 12px;
+    position: absolute;
+    left: 100%;
+    width: 50px;
+    top: -10px;
+    color: #EB684E;
+  }
+`

src/modules/editor/components/Viewport/Content/index.tsx

@@ -57,7 +57,13 @@ export default defineUI({
        
             <div class={["scrollbar", cardList]}>
                 <div>
-                <Container>
+                <Container  onDrop={(e: any) => {
+                            if (e.payload) {
+                              actions.addCompToDesign(e.payload, e.addedIndex);
+                            } else {
+                              actions.moveComp(e.removedIndex, e.addedIndex);
+                            }
+                  }} >
                 {
                   store.streamCardIds.map(item=>{
                     const c = helper.findComp(item) as DesignComp;
@@ -69,7 +75,7 @@ export default defineUI({
                     if (h>80) h = 80;
                     const style:any = {height:h+ "px"}
                     if (store.currStreamCardId == item) {
-                      style.border = "2px solid #EA9E40"
+                      style.border = "3px solid #EA9E40"
                     }
                   return (<Draggable>
                       <div key={item} class={["card-item relative transition-opacity hover:opacity-80"]} style={style} onClick={()=>{
@@ -111,7 +117,7 @@ export default defineUI({
                       controls.compUICtrl.state.components.get(comp.compKey)
                         ?.Component || NotFoundComp;
                     return (
-                        <Comp compId={comp.id}  key={comp.id}/>
+                        <Comp compId={comp.id}  key={comp.id} showMask={true} />
                     );
                   },
                 }}