Merge branch 'master' of http://gcls-git.helxsoft.cn/GCLS/eep_page

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -1,6 +1,6 @@
 <template>
   <main ref="canvas" class="canvas" :style="computedCanvasStyle()">
-    <template v-if="isEdit">
+    <div v-if="isEdit" class="edit">
       <div v-for="item in lineList" :key="item[0]" class="group-line" :style="computedGroupLine(item)"></div>
       <span class="drag-line" data-row="-1"></span>
       <!-- 行 -->
@@ -104,7 +104,7 @@
         <span v-if="i < data.row_list.length - 1" :key="`row-${row.row_id}`" class="drag-line" :data-row="i"></span>
       </template>
       <span class="drag-line" :data-row="data.row_list.length - 1"></span>
-    </template>
+    </div>
 
     <PreviewEdit
       v-else
@@ -390,6 +390,21 @@ export default {
       });
       this.data.unified_attrib = data;
     },
+    applyToSelectedComponents(data) {
+      this.$refs.component.forEach((item) => {
+        if (item.$refs.base.checked) {
+          item.updateProperty('view_pinyin', data.view_pinyin);
+          item.updateProperty('pinyin_position', data.pinyin_position);
+          item.updateRichTextProperty('fontFamily', data.font);
+          item.updateRichTextProperty('fontSize', data.font_size);
+          item.updateRichTextProperty('lineHeight', data.line_height);
+          item.updateRichTextProperty('color', data.text_color);
+          item.updateRichTextProperty('align', data.align);
+
+          item.setUnifiedAttr(data);
+        }
+      });
+    },
     getBookUnifiedAttr() {
       GetBookUnifiedAttrib({ book_id: this.project_id }).then(({ content }) => {
         if (content) {
@@ -1689,125 +1704,126 @@ export default {
 
 <style lang="scss" scoped>
 .canvas {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  width: $courseware-width;
-  min-height: calc(100% - 6px);
-  padding: 24px;
-  margin: 0 auto;
-  background-color: #fff;
-  background-repeat: no-repeat;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1; // 背景在最底层
-    width: 100%;
-    height: 100%;
-    pointer-events: none; // 背景不接受鼠标事件
-    content: '';
+  .edit {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    width: $courseware-width;
+    min-height: calc(100vh - 240px);
+    padding: 24px;
+    margin: 0 auto;
     background-color: #fff;
-    background-image: var(--bg-image);
-    background-repeat: var(--bg-repeat);
-    background-position: var(--bg-position);
-    background-size: var(--bg-size);
-    border: var(--bg-border);
-    border-radius: var(--bg-border-radius-top-left) var(--bg-border-radius-top-right)
-      var(--bg-border-radius-bottom-right) var(--bg-border-radius-bottom-left);
-    opacity: var(--bg-opacity);
-  }
-
-  .group-line {
-    position: absolute;
-    left: 11px;
-    width: 1px;
-    background-color: #165dff;
-  }
 
-  .row {
-    display: grid;
-    row-gap: 16px;
-
-    .row-checkbox {
+    &::before {
       position: absolute;
-      left: 4px;
+      top: 0;
+      left: 0;
+      z-index: -1; // 背景在最底层
+      width: 100%;
+      height: 100%;
+      pointer-events: none; // 背景不接受鼠标事件
+      content: '';
+      background-color: #fff;
+      background-image: var(--bg-image);
+      background-repeat: var(--bg-repeat);
+      background-position: var(--bg-position);
+      background-size: var(--bg-size);
+      border: var(--bg-border);
+      border-radius: var(--bg-border-radius-top-left) var(--bg-border-radius-top-right)
+        var(--bg-border-radius-bottom-right) var(--bg-border-radius-bottom-left);
+      opacity: var(--bg-opacity);
     }
 
-    > .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
-      left: 6px;
+    .group-line {
+      position: absolute;
+      left: 11px;
+      width: 1px;
+      background-color: #165dff;
     }
 
-    .drag-vertical-line.grid-line-right,
-    .drag-vertical-line.grid-line-left {
-      top: 25%;
-      height: 50%;
-    }
+    .row {
+      display: grid;
+      row-gap: 16px;
 
-    .drag-vertical-line.col-start {
-      left: -12px;
-    }
+      .row-checkbox {
+        position: absolute;
+        left: 4px;
+      }
 
-    .drag-vertical-line.col-end {
-      right: -8px;
-    }
+      > .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
+        left: 6px;
+      }
 
-    .col {
-      display: grid;
+      .drag-vertical-line.grid-line-right,
+      .drag-vertical-line.grid-line-left {
+        top: 25%;
+        height: 50%;
+      }
 
-      .drag-vertical-line:first-child {
-        left: -8px;
+      .drag-vertical-line.col-start {
+        left: -12px;
       }
 
-      .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
-        left: 6px;
+      .drag-vertical-line.col-end {
+        right: -8px;
       }
 
-      .drag-vertical-line:last-child {
-        right: -4px;
+      .col {
+        display: grid;
+
+        .drag-vertical-line:first-child {
+          left: -8px;
+        }
+
+        .drag-vertical-line:not(:first-child, :last-child, .grid-line) {
+          left: 6px;
+        }
+
+        .drag-vertical-line:last-child {
+          right: -4px;
+        }
       }
     }
-  }
 
-  .drag-line {
-    z-index: 2;
-    width: calc(100% - 16px);
-    height: 4px;
-    margin: 0 8px;
-    background-color: #379fff;
-    border-radius: 4px;
-    opacity: 0;
-
-    &.drag-row {
-      width: 50%;
-      margin-left: 25%;
-      background-color: $right-color;
-    }
+    .drag-line {
+      z-index: 2;
+      width: calc(100% - 16px);
+      height: 4px;
+      margin: 0 8px;
+      background-color: #379fff;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.drag-row {
+        width: 50%;
+        margin-left: 25%;
+        background-color: $right-color;
+      }
 
-    &.grid-line:not(:first-child, :last-child) {
-      position: relative;
-      top: 6px;
-    }
+      &.grid-line:not(:first-child, :last-child) {
+        position: relative;
+        top: 6px;
+      }
 
-    &.grid-line {
-      background-color: #f43;
+      &.grid-line {
+        background-color: #f43;
+      }
     }
-  }
 
-  .drag-vertical-line {
-    position: relative;
-    z-index: 2;
-    width: 4px;
-    height: 100%;
-    background-color: #f43;
-    border-radius: 4px;
-    opacity: 0;
-
-    &.grid-line {
+    .drag-vertical-line {
+      position: relative;
+      z-index: 2;
+      width: 4px;
+      height: 100%;
       background-color: #f43;
+      border-radius: 4px;
+      opacity: 0;
+
+      &.grid-line {
+        background-color: #f43;
+      }
     }
   }
 }

src/views/book/courseware/create/components/FullTextSettings.vue

@@ -63,6 +63,7 @@
 
     <div slot="footer" class="dialog-footer">
       <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="applyToSelectedComponents">应用选中组件</el-button>
       <el-button type="primary" @click="confirm">确 定</el-button>
     </div>
   </el-dialog>
@@ -152,6 +153,10 @@ export default {
       this.$emit('update:visible', false);
       this.$emit('fullTextSettings', this.unified_attrib);
     },
+    applyToSelectedComponents() {
+      this.$emit('update:visible', false);
+      this.$emit('applyToSelectedComponents', this.unified_attrib);
+    },
   },
 };
 </script>

src/views/book/courseware/create/components/PreviewEdit.vue

@@ -343,9 +343,20 @@ export default {
 
 <style lang="scss" scoped>
 .preview {
+  position: relative;
   display: flex;
   flex-direction: column;
   row-gap: $component-spacing;
+  width: calc($courseware-width + 200px);
+  height: 100%;
+  min-height: calc(100vh - 240px);
+  padding: calc($courseware-top-padding + 15px) 100px calc($courseware-bottom-padding + 15px) 100px;
+  margin: 0 auto;
+  overflow: hidden;
+  background-color: #fff;
+  background-repeat: no-repeat;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
 
   .height-prompt {
     position: absolute;

src/views/book/courseware/create/components/question/table/Table.vue

@@ -201,7 +201,7 @@ export default {
 
           return row.concat(Array.from({ length: diff }, getOption));
         });
-        this.data.answer_lists = this.data.answer_lists.map((row) => {
+        this.data.answer_lists = this.data.answer_lists?.map((row) => {
           if (val < row.length) {
             return row.slice(0, val);
           }

src/views/book/courseware/create/index.vue

@@ -101,14 +101,25 @@ export default {
         this.handleMiddleScroll();
       }
     });
+    window.addEventListener('keydown', this.handlePaste);
   },
   beforeDestroy() {
     const middle = this.$refs.createMiddle;
     if (middle) {
       middle.removeEventListener('scroll', this.handleMiddleScroll);
     }
+    window.removeEventListener('keydown', this.handlePaste);
   },
   methods: {
+    /**
+     * @description 监听粘贴事件，触发粘贴组件方法
+     * @param {KeyboardEvent} event 键盘事件
+     */
+    handlePaste(event) {
+      if (event.ctrlKey && event.key === 'v') {
+        this.pasteComponent('bottom');
+      }
+    },
     judgeIsHasChange() {
       if (this.isChange) {
         this.visibleWarn = true;
@@ -155,6 +166,7 @@ export default {
      * @param {String} position 放入位置类型
      */
     pasteComponent(position) {
+      if (!this.isEdit) return;
       if (!this.copyData) {
         this.$message.warning('请先复制组件');
         return;

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -992,23 +992,11 @@ export default {
   padding-top: $courseware-top-padding;
   padding-bottom: $courseware-bottom-padding;
   margin: 15px 0;
-  overflow: hidden;
   background-color: #fff;
   background-repeat: no-repeat;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
 
-  &::before,
-  &::after {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 15px;
-    pointer-events: none;
-    content: '';
-    background: $courseware-bgColor;
-  }
-
   &::before {
     top: -15px;
   }

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -33,7 +33,7 @@
                 {{ multilingual.find((item) => item.type === getLang())?.translation }}
               </div>
             </div>
-            <div v-else :key="mark" style="width: calc(50% - 36px)"></div>
+            <div v-else :key="mark" style="width: calc(50% - 36px); padding: 12px 24px"></div>
           </template>
         </li>
       </ul>

src/views/personal_workbench/edit_task/edit/index.vue

@@ -60,6 +60,7 @@
     </div>
 
     <CreatePage ref="create" class="edit-task__content" @goBackPreview="goBackPreview" />
+
     <UseTemplate
       :visible.sync="visibleTemplate"
       @useTemplate="handleUseTemplate"
@@ -70,6 +71,7 @@
       :visible.sync="visibleFullTextSettings"
       :settings="data.unified_attrib"
       @fullTextSettings="fullTextSettings"
+      @applyToSelectedComponents="applyToSelectedComponents"
     />
 
     <SetBackground
@@ -269,6 +271,9 @@ export default {
     fullTextSettings(data) {
       this.$refs.create.$refs.createCanvas.fullTextSettings(data);
     },
+    applyToSelectedComponents(data) {
+      this.$refs.create.$refs.createCanvas.applyToSelectedComponents(data);
+    },
     goBackPreview() {
       if (this.$route.query.template_type) {
         this.$router.push({