背景设置全域样式

src/courseware_preview/index.vue

@@ -34,9 +34,13 @@
     </div>
 
     <div class="audit-content">
-      <div ref="previewMain" class="main-container" :style="{ paddingRight: sidebarShow ? '15px' : '315px' }">
+      <div
+        ref="previewMain"
+        class="main-container"
+        :style="{ paddingRight: sidebarShow ? '15px' : '315px', ...computedCommonPreviewStyle() }"
+      >
         <main :class="['preview-main']">
-          <div class="preview-left"></div>
+          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
           <CoursewarePreview
             v-if="courseware_info.book_name"
             ref="courserware"
@@ -57,7 +61,7 @@
             @saveCollect="saveCollect"
             @getTranslate="getTranslate"
           />
-          <div class="preview-right"></div>
+          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
         </main>
       </div>
     </div>
@@ -1070,6 +1074,9 @@ export default {
     getCorrect() {
       this.$refs.courserware.getAnswerMarking({ task_id: this.task_id, user_id: this.user_id, courseware_id: this.id });
     },
+    computedCommonPreviewStyle() {
+      return this.$refs.courserware?.computedCourserwareStyle('commonPreview');
+    },
   },
 };
 </script>

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

@@ -1,5 +1,10 @@
 <template>
-  <div ref="courserware" class="courserware" :style="computedCourserwareStyle()" @mouseup="handleTextSelection">
+  <div
+    ref="courserware"
+    class="courserware"
+    :style="computedCourserwareStyle('courseware')"
+    @mouseup="handleTextSelection"
+  >
     <template v-for="(row, i) in data.row_list">
       <div v-show="computedRowVisibility(row.row_id)" :key="i" class="row" :style="getMultipleColStyle(i)">
         <el-checkbox
@@ -397,37 +402,22 @@ export default {
 
     /**
      * 计算课件背景样式
-     * @returns {Object} 课件背景样式对象
+     * @param {'courseware' | 'commonPreview'} type 从哪个组件调用 'courseware' 或 'commonPreview'
+     * @returns {object} 课件背景样式对象
      */
-    computedCourserwareStyle() {
+    computedCourserwareStyle(type) {
       const {
         background_image_url: bcImgUrl = '',
         background_position: pos = {},
         background: back,
       } = this.background || {};
 
-      const hasNoRows = !Array.isArray(this.data?.row_list) || this.data.row_list.length === 0; // 判断是否没有行
-      const projectCover = this.project?.cover_image_file_url || '';
-
-      // 优先在空行时使用背景图或项目封面
-      if (hasNoRows) {
-        const backgroundImage = hasNoRows ? bcImgUrl || projectCover : bcImgUrl;
-
-        // 保护性读取位置/大小值，避免 undefined 导致字符串 "undefined%"
-        const widthPct = typeof pos.width === 'undefined' ? '' : pos.width;
-        const heightPct = typeof pos.height === 'undefined' ? '' : pos.height;
-        const leftPct = typeof pos.left === 'undefined' ? '' : pos.left;
-        const topPct = typeof pos.top === 'undefined' ? '' : pos.top;
-
-        const hasBcImg = Boolean(bcImgUrl);
-        const backgroundSize = hasBcImg ? `${widthPct}% ${heightPct}%` : hasNoRows ? 'contain' : '';
-        const backgroundPosition = hasBcImg ? `${leftPct}% ${topPct}%` : hasNoRows ? 'center' : '';
-
-        return {
-          backgroundImage: backgroundImage ? `url(${backgroundImage})` : '',
-          backgroundSize,
-          backgroundPosition,
-        };
+      // 如果是 commonPreview 但背景不是全域的，或者是 courseware 但背景是全域的，都不应用背景样式
+      if (type === 'commonPreview' && !back?.is_global) {
+        return {};
+      }
+      if (type === 'courseware' && back?.is_global) {
+        return {};
       }
 
       let canvasStyle = {
@@ -438,10 +428,12 @@ export default {
       };
 
       if (back) {
-        if (back.mode === 'image') {
-          canvasStyle['backgroundBlendMode'] = 'lighten';
-        } else {
+        if (!back.has_image) {
           canvasStyle['backgroundBlendMode'] = '';
+          canvasStyle['backgroundImage'] = '';
+          canvasStyle['backgroundRepeat'] = '';
+          canvasStyle['backgroundPosition'] = '';
+          canvasStyle['backgroundSize'] = '';
         }
 
         if (back.imageMode === 'fill') {
@@ -464,12 +456,8 @@ export default {
           canvasStyle['backgroundPosition'] = `${pos.imgX}% ${pos.imgY}%`;
         }
 
-        if (back.mode === 'color') {
+        if (back.has_color) {
           canvasStyle['backgroundColor'] = back.color;
-          canvasStyle['backgroundImage'] = '';
-          canvasStyle['backgroundRepeat'] = '';
-          canvasStyle['backgroundPosition'] = '';
-          canvasStyle['backgroundSize'] = '';
         }
 
         if (back.enable_border) {
@@ -490,6 +478,7 @@ export default {
 
       return canvasStyle;
     },
+
     handleContextMenu(event, id) {
       if (this.canRemark) {
         event.preventDefault(); // 阻止默认的上下文菜单显示

src/web_preview/index.vue

@@ -90,8 +90,8 @@
           <SvgIcon icon-class="catalogue" size="54" />
         </div>
 
-        <main :class="['preview-main']">
-          <div class="preview-left"></div>
+        <main :class="['preview-main']" :style="computedCommonPreviewStyle()">
+          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
           <CoursewarePreview
             v-if="courseware_info.book_name"
             ref="courserware"
@@ -112,7 +112,7 @@
             @getTranslate="getTranslate"
             @editFeedback="handEditFeedback"
           />
-          <div class="preview-right"></div>
+          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
         </main>
 
         <!-- 右侧菜单栏 - 收缩 -->
@@ -340,7 +340,7 @@
                   <el-button type="text" class="el-icon-edit" @click="handEditFeedback(item)"> 编辑</el-button>
                   <el-divider direction="vertical" />
                   <el-button type="text" class="el-icon-delete" @click="handDelFeedback(item.id)"> 删除</el-button>
-                  <el-divider direction="vertical" v-if="item.blockId" />
+                  <el-divider v-if="item.blockId" direction="vertical" />
                   <el-button v-if="item.blockId" type="text" class="el-icon-place" @click="handleLocation(item, 13)">
                     定位</el-button
                   >
@@ -1550,6 +1550,9 @@ export default {
     fullScreen() {
       toggleFullScreen(this.$refs.previewMain);
     },
+    computedCommonPreviewStyle() {
+      return this.$refs.courserware?.computedCourserwareStyle('commonPreview');
+    },
   },
 };
 </script>
@@ -1733,14 +1736,12 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
       width: $courseware-left-margin;
       min-width: $courseware-left-margin;
       max-width: $courseware-left-margin;
-      background-color: $courseware-bgColor;
     }
 
     .preview-right {
       width: $courseware-right-margin;
       min-width: $courseware-right-margin;
       max-width: $courseware-right-margin;
-      background-color: $courseware-bgColor;
     }
 
     &.no-audit {