容错处理

src/styles/variables.scss

@@ -28,4 +28,5 @@ $courseware-right-margin: 100px; // 教材右页边距
 $courseware-top-margin: 65px; // 教材顶部页边距
 $courseware-bottom-margin: 65px; // 教材底部页边距
 $component-spacing: 24px; // 组件间间距
+$title-content-spacing: 65px; // 标题与内容间距
 $border-component-spacing: 10px; // 组件边框与组件内容间距

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

@@ -322,15 +322,15 @@ export default {
 .preview {
   display: flex;
   flex-direction: column;
-  row-gap: 12px;
+  row-gap: $component-spacing;
 
   .row {
     display: grid;
-    gap: 16px;
+    gap: $component-spacing;
 
     .col {
       display: grid;
-      gap: 16px;
+      gap: $component-spacing;
       align-items: flex-start;
 
       .grid {

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

@@ -31,6 +31,7 @@
             <template v-for="(grid, k) in col.grid_list">
               <component
                 :is="previewComponentList[grid.type]"
+                :id="grid.id"
                 :key="k"
                 ref="preview"
                 :content="computedColContent(grid.id)"
@@ -320,8 +321,6 @@ export default {
       };
     },
     handleContextMenu(event, id) {
-      console.log(this.canRemark);
-
       if (this.canRemark) {
         event.preventDefault(); // 阻止默认的上下文菜单显示
         this.menuPosition = {

src/views/book/courseware/preview/components/judge/JudgePreview.vue

@@ -11,7 +11,7 @@
           :class="['option-item', { active: isAnswer(mark) }]"
         >
           <div
-            :style="{ borderColor: data.unified_attrib.topic_color }"
+            :style="{ borderColor: data.unified_attrib?.topic_color }"
             :class="['option-content', computedIsJudgeRight(mark)]"
           >
             <span class="serial-number">{{ convertNumberToLetter(i) }}.</span>
@@ -196,8 +196,8 @@ export default {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 48px;
-          height: 48px;
+          width: 36px;
+          height: 36px;
           color: #000;
           cursor: pointer;
           background-color: $content-color;

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="describe-preview" :style="getAreaStyle()">
+  <div :class="['describe-preview']" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
@@ -152,6 +152,19 @@ export default {
 .describe-preview {
   @include preview-base;
 
+  &.middle {
+    margin-top: calc($title-content-spacing - $component-spacing);
+    margin-bottom: calc($title-content-spacing - $component-spacing);
+  }
+
+  &.top {
+    margin-bottom: calc($title-content-spacing - $component-spacing);
+  }
+
+  &.bottom {
+    margin-top: calc($title-content-spacing - $component-spacing);
+  }
+
   :deep .el-dialog {
     position: fixed;
     margin: 0 !important;

src/views/book/courseware/preview/components/select/SelectPreview.vue

@@ -11,7 +11,7 @@
         <li
           v-for="({ content, mark, multilingual, paragraph_list }, i) in data.option_list"
           :key="mark"
-          :style="{ cursor: disabled ? 'not-allowed' : 'pointer', borderColor: data.unified_attrib.topic_color }"
+          :style="{ cursor: disabled ? 'not-allowed' : 'pointer', borderColor: data.unified_attrib?.topic_color }"
           :class="['option-item', { active: isAnswer(mark) }, ...computedAnswerClass(mark)]"
           @click="selectAnswer(mark)"
         >

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

@@ -6,15 +6,16 @@
     <div class="main">
       <div class="voice-matrix-audio">
         <div v-show="hasSelectedCell" class="audio-simple">
-          <img
-            class="audio-simple-image"
-            :src="
-              playing
-                ? require(`@/assets/voice_matrix/icon-voice-play-blue.png`)
-                : require(`@/assets/voice_matrix/icon-voice.png`)
-            "
+          <div
+            class="audio-simple-image icon-mask"
+            :style="{
+              backgroundColor: data.unified_attrib?.topic_color,
+              maskImage: playing
+                ? `url(${require(`@/assets/voice_matrix/icon-voice-play-blue.png`)})`
+                : `url(${require(`@/assets/voice_matrix/icon-voice.png`)})`,
+            }"
             @click="playAudio"
-          />
+          ></div>
           <span
             :class="['Repeat-16', 'audio-simple-repeat', isRepeat ? '' : 'disabled']"
             @click="isRepeat = !isRepeat"
@@ -23,6 +24,7 @@
         <AudioLine
           v-show="!hasSelectedCell"
           ref="audioLine"
+          P
           audio-id="voiceMatrixAudio"
           :mp3="mp3Url"
           :get-cur-time="getCurTime"
@@ -614,6 +616,13 @@ $border-color: #e6e6e6;
         height: 100%;
         line-height: 46px;
 
+        .audio-simple-image {
+          width: 24px;
+          height: 24px;
+          margin-left: 12px;
+          cursor: pointer;
+        }
+
         img {
           width: 16px;
           height: 16px;

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

@@ -8,16 +8,16 @@
             v-if="audio.playing"
             size="24px"
             icon-class="pause-large-fill"
-            :style="{ color: attrib.topic_color }"
+            :style="{ color: attrib?.topic_color }"
           />
-          <SvgIcon v-else size="24px" icon-class="play-large-fill" :style="{ color: attrib.topic_color }" />
+          <SvgIcon v-else size="24px" icon-class="play-large-fill" :style="{ color: attrib?.topic_color }" />
         </div>
       </div>
 
       <template v-if="!isRepeat">
         <el-slider
           v-model="playValue"
-          :style="{ width: sliderWidth + 'px', height: '2px', '--slider-color': attrib.topic_color }"
+          :style="{ width: sliderWidth + 'px', height: '2px', '--slider-color': attrib?.topic_color }"
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
@@ -58,7 +58,7 @@
     <div v-else class="audioLine2">
       <div
         class="play-icon"
-        :style="{ backgroundColor: attrib.topic_color }"
+        :style="{ backgroundColor: attrib?.topic_color }"
         :class="[
           'icon-mask',
           audio.loading ? 'loadBtn' : audio.playing ? 'playBtn-icon' : 'pauseBtn-icon',