课件背景设置

.eslintrc.js

@@ -278,7 +278,7 @@ module.exports = {
     'max-len': [1, { code: 120, ignoreUrls: true, ignoreTemplateLiterals: true, ignoreRegExpLiterals: true }],
     'max-nested-callbacks': 1,
     'max-params': [1, 6],
-    'max-statements': [1, 40],
+    'max-statements': [1, 50],
     'new-parens': 2,
     'object-shorthand': 1,
     'operator-assignment': 1,

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

@@ -386,28 +386,89 @@ export default {
      * @returns {Object} 课件背景样式对象
      */
     computedCourserwareStyle() {
-      const { background_image_url: bcImgUrl = '', background_position: pos = {} } = this.background || {};
-      const hasNoRows = !Array.isArray(this.data?.row_list) || this.data.row_list.length === 0;
+      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 || '';
 
       // 优先在空行时使用背景图或项目封面
-      const backgroundImage = hasNoRows ? bcImgUrl || projectCover : bcImgUrl;
+      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;
+        // 保护性读取位置/大小值，避免 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' : '';
+        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,
+        return {
+          backgroundImage: backgroundImage ? `url(${backgroundImage})` : '',
+          backgroundSize,
+          backgroundPosition,
+        };
+      }
+
+      let canvasStyle = {
+        backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
+        backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
+        backgroundImage: bcImgUrl ? `url(${bcImgUrl})` : '',
+        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back.image_opacity / 100})` : '',
       };
+
+      if (back) {
+        if (back.mode === 'image') {
+          canvasStyle['backgroundBlendMode'] = 'lighten';
+        } else {
+          canvasStyle['backgroundBlendMode'] = '';
+        }
+
+        if (back.imageMode === 'fill') {
+          canvasStyle['backgroundRepeat'] = 'repeat';
+        } else {
+          canvasStyle['backgroundRepeat'] = 'no-repeat';
+        }
+
+        if (back.imageMode === 'stretch') {
+          canvasStyle['backgroundSize'] = '100% 100%';
+        }
+
+        if (back.imageMode === 'adapt') {
+          canvasStyle['backgroundSize'] = 'contain';
+        }
+
+        if (back.mode === 'color') {
+          canvasStyle['backgroundColor'] = back.color;
+          canvasStyle['backgroundImage'] = '';
+          canvasStyle['backgroundRepeat'] = '';
+          canvasStyle['backgroundPosition'] = '';
+          canvasStyle['backgroundSize'] = '';
+        }
+
+        if (back.enable_border) {
+          canvasStyle['border'] = `${back.border_width}px ${back.border_style} ${back.border_color}`;
+        } else {
+          canvasStyle['border'] = 'none';
+        }
+
+        if (back.enable_radius) {
+          canvasStyle['border-top-left-radius'] = `${back.top_left_radius}px`;
+          canvasStyle['border-top-right-radius'] = `${back.top_right_radius}px`;
+          canvasStyle['border-bottom-left-radius'] = `${back.bottom_left_radius}px`;
+          canvasStyle['border-bottom-right-radius'] = `${back.bottom_right_radius}px`;
+        } else {
+          canvasStyle['border-radius'] = '0';
+        }
+      }
+
+      return canvasStyle;
     },
     handleContextMenu(event, id) {
       if (this.canRemark) {

src/web_preview/index.vue

@@ -14,11 +14,6 @@
           <el-checkbox v-model="isJudgeCorrect">判断对错</el-checkbox>
         </div>
         <span class="link">
-          <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
-            <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
-          </el-select>
-        </span>
-        <span class="link">
           <el-checkbox v-model="chinese" true-label="zh-Hant" false-label="zh-Hans">繁体</el-checkbox>
         </span>
         <span class="link">
@@ -339,6 +334,18 @@
       @confirm="saveNote"
       @cancel="delNote"
     />
+
+    <el-dialog
+      title="翻译"
+      width="240px"
+      :close-on-click-modal="false"
+      :visible="visibleTranslate"
+      @close="dialogClose('Translate')"
+    >
+      <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
+        <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
+      </el-select>
+    </el-dialog>
   </div>
 </template>
 
@@ -416,7 +423,7 @@ export default {
       },
       { icon: 'collect', title: '收藏', handle: 'getCollect', param: { type: '11' } },
       { icon: 'note', title: '笔记', handle: 'getNote', param: { type: '12' } },
-      { icon: 'translate', title: '翻译', handle: '', param: {} },
+      { icon: 'translate', title: '翻译', handle: 'openTranslate', param: {} },
       { icon: 'setting', title: '设置', handle: '', param: {} },
     ];
 
@@ -470,6 +477,7 @@ export default {
       isChildDataLoad: false,
       mindMapJsonData: {}, // 思维导图json数据
       drawerType: '', // 抽屉类型
+      visibleTranslate: false,
       drawerStyle: {
         top: '0',
         height: '0',
@@ -831,7 +839,12 @@ export default {
     async openVisNetwork() {
       this.visibleVisNetwork = true;
     },
-
+    /**
+     * 打开选择语言弹窗
+     */
+    openTranslate() {
+      this.visibleTranslate = true;
+    },
     // 计算抽屉滑出位置
     calcDrawerPosition() {
       const menu = this.$refs.sidebarMenu;