背景设置全域处理

.env

@@ -11,4 +11,4 @@ VUE_APP_BookWebSI = '/GCLSBookWebSI/ServiceInterface'
 VUE_APP_EepServer = '/EEPServer/SI'
 
 #version
-VUE_APP_VERSION = '2026.04.30'
+VUE_APP_VERSION = '2026.05.04'

src/components/CommonPreview.vue

@@ -111,8 +111,8 @@
           <SvgIcon icon-class="catalogue" size="54" />
         </div>
 
-        <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
-          <div class="preview-left"></div>
+        <main :class="['preview-main', { 'no-audit': !isShowAudit }]" :style="computedCommonPreviewStyle()">
+          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
           <CoursewarePreview
             v-if="courseware_info.book_name"
             ref="courserware"
@@ -137,7 +137,7 @@
             @selectedComponent="$emit('selectedComponent', $event)"
           />
 
-          <div class="preview-right"></div>
+          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
         </main>
 
         <!-- 右侧菜单栏 - 收缩 -->
@@ -411,13 +411,13 @@
     </div>
 
     <el-dialog
+      v-if="visibleRemark"
       title="添加课件审核批注"
       :visible="visibleRemark"
       width="680px"
       :close-on-click-modal="false"
       class="remark-dialog"
       @close="closeVisibleRemark"
-      v-if="visibleRemark"
     >
       <Remark :remark="remark" :project-id="projectId" :courseware-id="select_node ? select_node : id" />
       <div slot="footer">
@@ -1782,6 +1782,9 @@ export default {
         this.$set(component, 'background', background);
       }
     },
+    computedCommonPreviewStyle() {
+      return this.$refs.courserware?.computedCourserwareStyle('commonPreview');
+    },
   },
 };
 </script>
@@ -1966,14 +1969,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 {

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

@@ -6,7 +6,10 @@
     :visible="visible"
     :before-close="handleClose"
   >
-    <div class="background-title">背景设置</div>
+    <div class="background-title">
+      <span>背景设置</span>
+    </div>
+
     <div class="set-background">
       <div
         ref="backgroundImg"
@@ -40,8 +43,14 @@
       <div class="setup">
         <div class="setup-item">
           <div class="setup-top">
-            <el-radio v-model="background.mode" label="image">图片</el-radio>
-            <SvgIcon v-if="file_url" icon-class="delete" style="cursor: pointer" size="14" @click="file_url = ''" />
+            <el-checkbox v-model="background.has_image">图片</el-checkbox>
+            <SvgIcon
+              v-if="file_url"
+              icon-class="delete"
+              style="margin-left: 8px; cursor: pointer"
+              size="14"
+              @click="file_url = ''"
+            />
           </div>
           <div class="setup-content">
             <div class="image-set">
@@ -81,7 +90,7 @@
         </div>
         <div class="setup-item">
           <div class="setup-top">
-            <el-radio v-model="background.mode" label="color">颜色</el-radio>
+            <el-checkbox v-model="background.has_color">颜色</el-checkbox>
           </div>
           <div class="setup-content">
             <el-color-picker v-model="background.color" show-alpha />
@@ -128,6 +137,11 @@
             </div>
           </div>
         </div>
+        <div class="setup-item">
+          <div class="setup-top">
+            <el-checkbox v-model="background.is_global" label="全域" />
+          </div>
+        </div>
       </div>
     </div>
 
@@ -196,7 +210,9 @@ export default {
       },
       file_url: '', // 背景图片地址
       background: {
-        mode: 'image', // 背景模式
+        has_image: false, // 是否有图片背景
+        has_color: false, // 是否有颜色背景
+        is_global: false, // 是否全局背景
         imageMode: 'auto', // 图片背景模式
         image_opacity: 100, // 背景图片透明度
         color: 'rgba(255, 255, 255, 1)', // 背景颜色
@@ -249,7 +265,10 @@ export default {
   watch: {
     visible(newVal) {
       if (newVal) {
-        const courseware = document.querySelector('div.courserware');
+        const isGlobal = this.backgroundData.is_global;
+        const courseware = isGlobal
+          ? document.querySelector('main.preview-main')
+          : document.querySelector('div.courserware');
         if (courseware) {
           const rect = courseware.getBoundingClientRect();
           const coursewareRatio = rect.width / rect.height;
@@ -284,6 +303,23 @@ export default {
         this.resetCropRect();
       }
     },
+    'background.is_global'(newVal) {
+      const courseware = newVal
+        ? document.querySelector('main.preview-main')
+        : document.querySelector('div.courserware');
+      if (courseware) {
+        const rect = courseware.getBoundingClientRect();
+        const coursewareRatio = rect.width / rect.height;
+        this.maxWidth = 500;
+        this.maxHeight = 450;
+        const imgRatio = this.maxWidth / this.maxHeight;
+        if (coursewareRatio > imgRatio) {
+          this.maxHeight = this.maxWidth / coursewareRatio;
+        } else {
+          this.maxWidth = this.maxHeight * coursewareRatio;
+        }
+      }
+    },
   },
   mounted() {
     document.body.addEventListener('mouseup', this.mouseUp);
@@ -647,6 +683,7 @@ export default {
               const { width, height } = img;
               this.normalComputed(width, height);
               this.file_url = fileUrl;
+              this.background.has_image = true;
             };
           }
         })
@@ -722,8 +759,8 @@ export default {
 
     .crop-tip {
       position: absolute;
-      top: 8px;
-      left: 8px;
+      top: -24px;
+      left: 72px;
       z-index: 3;
       padding: 2px 8px;
       font-size: 12px;

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

@@ -3,7 +3,7 @@
     id="selectable-area-preview"
     ref="courserware"
     class="courserware"
-    :style="computedCourserwareStyle()"
+    :style="computedCourserwareStyle('courseware')"
     @mouseup="handleTextSelection"
     @mousedown="startSelection"
     @mousemove="updateSelection"
@@ -618,15 +618,24 @@ 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 || {};
 
+      // 如果是 commonPreview 但背景不是全域的，或者是 courseware 但背景是全域的，都不应用背景样式
+      if (type === 'commonPreview' && !back?.is_global) {
+        return {};
+      }
+      if (type === 'courseware' && back?.is_global) {
+        return {};
+      }
+
       let canvasStyle = {
         backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
         backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
@@ -635,10 +644,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') {
@@ -661,12 +672,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) {
@@ -699,8 +706,8 @@ export default {
       }
     },
     handleResult(top, left, select_node) {
-      this.menuPosition.x = this.menuPosition.x + left;
-      this.menuPosition.y = this.menuPosition.y + top;
+      this.menuPosition.x += left;
+      this.menuPosition.y += top;
       this.menuPosition.select_node = select_node;
       // 设置菜单位置
       this.showMenu = true; // 显示菜单
@@ -1191,7 +1198,6 @@ export default {
   padding-top: $courseware-top-padding;
   padding-bottom: $courseware-bottom-padding;
   margin: 15px 0;
-  background-color: #fff;
   background-repeat: no-repeat;
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;