md

src/modules/paper-export/assets/styles/paper-temp-design.scss

@@ -4,4 +4,18 @@
       border-bottom: 1px dashed #333;
     }
   }
+
+  .page-main-side {
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 8;
+      border: 1px dashed #d0d0d0;
+    }
+  }
 }

src/modules/paper-export/assets/styles/paper-temp-preview.scss

@@ -1,5 +1,80 @@
-.page-column-element .element-item::before {
-  border: 1px dashed #333;
+.paper-page {
+  .page-box {
+    &-A3 {
+      &.page-box-0 {
+        .page-main-inner {
+          padding: 60px 40px 60px 160px;
+        }
+      }
+      &.page-box-1 {
+        .page-main-inner {
+          padding: 60px 160px 60px 40px;
+        }
+        .page-main-side {
+          right: 40px;
+          left: auto;
+        }
+      }
+    }
+
+    &-8K {
+      .page-main-side {
+        top: 40px;
+        bottom: 40px;
+        width: 110px;
+        left: 20px;
+      }
+
+      &.page-box-0 {
+        .page-main-inner {
+          padding: 40px 20px 40px 130px;
+        }
+      }
+      &.page-box-1 {
+        .page-main-inner {
+          padding: 40px 130px 40px 20px;
+        }
+        .page-main-side {
+          right: 20px;
+          top: 40px;
+          left: auto;
+        }
+      }
+    }
+  }
+  .page-main-side {
+    position: absolute;
+    top: 60px;
+    bottom: 60px;
+    width: 120px;
+    left: 40px;
+    z-index: 10;
+
+    .paper-side-body {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 9;
+    }
+
+    .element-item {
+      position: absolute;
+    }
+
+    // .element-item-gutter {
+    //   height: 100% !important;
+    // }
+    // .element-item-fill-field {
+    //   transform: rotate(-90deg);
+    //   transform-origin: 0 0;
+    // }
+  }
+
+  .page-column-element .element-item::before {
+    border: 1px dashed #333;
+  }
 }
 
 // elem-pane-box
@@ -17,7 +92,7 @@
     z-index: 8;
   }
   .elem-pane-box-element {
-    .pane-box-element-body {
+    .element-item {
       position: absolute;
     }
   }

src/modules/paper-export/components/BoxElementEdit.vue

@@ -79,6 +79,14 @@ export default {
         zindex: 9,
         init: false,
       },
+      actives: {
+        TEXT: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
+        IMAGE: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
+        LINES: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
+        GRIDS: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
+        LINE_HORIZONTAL: ["l", "r"],
+        LINE_VERTICAL: ["t", "b"],
+      },
     };
   },
   computed: {
@@ -97,6 +105,9 @@ export default {
         `element-item-${this.elementName}`,
       ];
     },
+    active() {
+      return this.actives[this.data.type];
+    },
   },
   created() {
     this.init();

src/modules/paper-export/components/PaperSideEdit.vue

@@ -5,11 +5,13 @@
     @dragover.prevent
     @dragleave.prevent
   >
-    <box-element-edit
-      v-for="element in data"
-      :key="element.key"
-      :data="element"
-    ></box-element-edit>
+    <div class="paper-side-body">
+      <box-element-edit
+        v-for="element in data"
+        :key="element.key"
+        :data="element"
+      ></box-element-edit>
+    </div>
   </div>
 </template>
 
@@ -38,18 +40,18 @@ export default {
     ...mapMutations("paper-export", ["setCurDragElement", "setCurElement"]),
     ...mapActions("paper-export", ["addSideElement", "modifyElement"]),
     dropInnerElement(e) {
-      let { offsetX: x, offsetY: y } = e;
-      const { offsetLeft, offsetTop } = this.getOffsetInfo(
-        e.target || e.srcElement
-      );
+      let { offsetY: y } = e;
+      const { offsetTop } = this.getOffsetInfo(e.target || e.srcElement);
+      const maxWidth = this.$el.offsetWidth;
 
       const curElement = {
         ...this.curDragElement,
-        x: x + offsetLeft,
+        x: 0,
         y: y + offsetTop,
+        w: Math.min(this.curDragElement.w, maxWidth),
       };
+      // 装订线:特殊
 
-      this.clear();
       this.setCurDragElement({});
       this.addSideElement(curElement);
     },
@@ -68,7 +70,6 @@ export default {
       };
     },
     elementResizeOver(element) {
-      this.clear();
       this.modifyElement(element);
     },
   },

src/modules/paper-export/components/PaperTemplateDesign.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="paper-template-design card-design">
+  <div class="paper-template-design card-design paper-page">
     <!-- actions -->
     <div class="design-action">
       <div class="design-logo">
@@ -119,7 +119,10 @@
             </div>
           </div>
           <!-- side edit   -->
-          <paper-side-edit class="page-main-side"></paper-side-edit>
+          <paper-side-edit
+            class="page-main-side"
+            :data="curPage.sides"
+          ></paper-side-edit>
         </div>
       </div>
     </div>

src/modules/paper-export/components/PaperTemplateView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="paper-template-view card-view">
+  <div class="paper-template-view card-view paper-page">
     <template v-for="(page, pageNo) in pages">
       <div
         :key="pageNo"
@@ -44,12 +44,14 @@
         </div>
         <!-- side edit erea -->
         <div class="page-main-side">
-          <box-element-preview
-            v-for="element in page.sides"
-            :key="element.id"
-            class="page-side-element"
-            :data="element"
-          ></box-element-preview>
+          <div class="paper-side-body">
+            <box-element-preview
+              v-for="element in page.sides"
+              :key="element.id"
+              class="page-side-element"
+              :data="element"
+            ></box-element-preview>
+          </div>
         </div>
       </div>
     </template>