优化预览

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

@@ -603,7 +603,7 @@ export default {
       this.drag.clientX = clientX;
       this.drag.clientY = clientY;
 
-      if (!this.isEdit) return;
+      if (!this.isEdit) return; // 非编辑状态不允许显隐线
 
       let { isInsideCanvas } = this.getMarginDifferences();
 

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -12,6 +12,7 @@ const mixin = {
       isShowRightAnswer: false, // 是否显示正确答案
       disabled: false, // 是否禁用
       isEnable,
+      loader: false,
     };
   },
   props: {
@@ -35,6 +36,7 @@ const mixin = {
       GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.id }).then(
         ({ content }) => {
           if (content) this.data = JSON.parse(content);
+          this.loader = true;
         },
       );
     },
@@ -53,6 +55,9 @@ const mixin = {
      * @param {boolean} disabled 是否禁用
      */
     showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled) {
+      if (this.loader === false) {
+        return setTimeout(() => this.showAnswer(isJudgingRightWrong, isShowRightAnswer, userAnswer, disabled), 100);
+      }
       this.isJudgingRightWrong = isJudgingRightWrong;
       this.isShowRightAnswer = isShowRightAnswer;
       this.disabled = disabled;

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -13,6 +13,7 @@
               <el-input
                 :key="j"
                 v-model="li.content"
+                :disabled="disabled"
                 :class="[data.property.fill_font, ...computedAnswerClass(li.mark)]"
                 :style="[{ width: Math.max(80, li.content.length * 21.3) + 'px' }]"
               />
@@ -77,6 +78,19 @@ export default {
       },
       deep: true,
     },
+    isJudgingRightWrong(val) {
+      if (!val) return;
+
+      this.answer.answer_list.forEach(({ mark, value }) => {
+        this.data.model_essay.forEach((item) => {
+          item.forEach((li) => {
+            if (li.mark === mark) {
+              li.content = value;
+            }
+          });
+        });
+      });
+    },
   },
   created() {
     this.answer.answer_list = this.data.model_essay

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

@@ -128,8 +128,10 @@ export default {
     },
     isJudgingRightWrong(cur) {
       if (cur) {
-        this.clearLine();
-        this.circulateAnswerList();
+        this.$nextTick(() => {
+          this.clearLine();
+          this.circulateAnswerList();
+        });
       } else {
         this.clearLine();
       }
@@ -302,7 +304,8 @@ export default {
             });
           });
           this.curConnectionPoint = { i: cur.i, j: cur.j, mark };
-          this.createLine(item[j + 1].mark, false, isShowRightAnswer);
+          const nextMark = isShowRightAnswer ? item[j + 1].mark : item[j + 1];
+          this.createLine(nextMark, false, isShowRightAnswer);
         });
       });
     },
@@ -553,7 +556,7 @@ export default {
 
   .right-answer {
     .title {
-      margin-bottom: 24px;
+      margin: 24px 0;
     }
   }
 }

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -276,8 +276,12 @@ export default {
     hasSelectedCell() {
       this.handleParentPlay();
     },
-    isShowRightAnswer() {
-      this.handleWave(this.answer.record_list);
+    isShowRightAnswer(val) {
+      if (!val) return;
+      this.handleWav(this.answer.record_list);
+    },
+    'data.record_list'(val) {
+      this.answer.record_list = val;
     },
   },
   created() {
@@ -286,6 +290,9 @@ export default {
       if (this.$refs.luyin?.microphoneStatus) this.$refs.luyin.microphone();
       this.handleParentPlay();
     });
+    if (!('record_list' in this.answer)) {
+      this.$set(this.answer, 'record_list', []);
+    }
   },
   mounted() {
     document.querySelector('body').addEventListener('click', this.restoreAudioStatus);
@@ -828,6 +835,10 @@ $border-color: #e6e6e6;
       padding: 3px 16px;
       border: 1px solid $border-color;
       border-radius: 0 0 8px 8px;
+
+      :deep .record {
+        max-width: 280px;
+      }
     }
   }
 }