插入、替换模板内容保留组件背景

.env

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

packages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eep-ui",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "eep/eep-ui.umd.js",
   "style": "eep/eep-ui.css",
   "exports": {

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

@@ -1612,12 +1612,14 @@ export default {
      * @param {Object} param
      * @param {Object} param.data - 模板数据
      * @param {Array} param.content_group_row_list - 内容分组行列表
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    loadTemplateData_CreateCanvas({ data, content_group_row_list }) {
+    async loadTemplateData_CreateCanvas({ data, content_group_row_list, backgroundList }) {
       this.data = data || {
         row_list: [],
       };
       this.content_group_row_list = content_group_row_list || [];
+      await this.insertComponentBackground(data.row_list, backgroundList, 'id');
     },
 
     /**
@@ -1625,8 +1627,9 @@ export default {
      * @param {Object} param
      * @param {Object} param.row_list - 模板组件列表
      * @param {Array} param.content_group_row_list - 内容分组行列表
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    insertTemplateData_CreateCanvas({ row_list = [], content_group_row_list = [] }) {
+    async insertTemplateData_CreateCanvas({ row_list = [], content_group_row_list = [], backgroundList = [] }) {
       let contentGroupRowList = JSON.parse(JSON.stringify(content_group_row_list));
 
       let rowList = row_list.map((row) => {
@@ -1660,6 +1663,7 @@ export default {
       if (!curId) {
         this.data.row_list.push(...rowList);
         this.content_group_row_list.push(...contentGroupRowList);
+        await this.insertComponentBackground(rowList, backgroundList);
         return;
       }
       // 插入到当前选中组件后面
@@ -1668,6 +1672,29 @@ export default {
       const i = Number(attrs['data-row']);
       this.data.row_list.splice(i + 1, 0, ...rowList);
       this.content_group_row_list.splice(i + 1, 0, ...contentGroupRowList);
+      await this.insertComponentBackground(rowList, backgroundList);
+    },
+    /**
+     * 插入组件背景
+     * @param {Array} row_list - 行列表
+     * @param {Array} backgroundList - 组件背景列表
+     * @param {string} gridIdName - ID 属性名，默认为 'oldId'
+     */
+    async insertComponentBackground(row_list, backgroundList, gridIdName = 'oldId') {
+      if (!Array.isArray(row_list) || !Array.isArray(backgroundList)) return;
+      await this.$nextTick();
+      row_list.forEach((row) => {
+        row.col_list.forEach((col) => {
+          col.grid_list.forEach((grid) => {
+            const background = backgroundList.find((bg) => bg.component_id === grid[gridIdName]);
+            const bg = background?.background;
+
+            if (bg) {
+              this.findChildComponentByKey(`grid-${grid.id}`).background = bg;
+            }
+          });
+        });
+      });
     },
     /**
      * @description 复制组件

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -40,6 +40,7 @@ const mixin = {
         'analysis_image_list',
         'analysis_video_list',
       ],
+      background: '', // 组件背景
     };
   },
   props: {
@@ -251,7 +252,7 @@ const mixin = {
       this.componentMove({ ...data, id: this.id });
     },
     /**
-     * 保存课节组件内容
+     * 保存课件组件内容
      * @returns {Promise} 返回 Promise，便于父组件 await
      */
     saveCoursewareComponentContent() {
@@ -260,6 +261,7 @@ const mixin = {
         component_id: this.id,
         component_type: this.data.type,
         content: JSON.stringify(this.data),
+        background: this.background,
       });
     },
     /**

src/views/book/courseware/create/index.vue

@@ -245,18 +245,20 @@ export default {
      * @param {Object} param
      * @param {Object} param.data - 模板数据
      * @param {Array} param.content_group_row_list - 内容分组行列表
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    loadTemplateData_Create({ data, content_group_row_list }) {
-      this.$refs.createCanvas.loadTemplateData_CreateCanvas({ data, content_group_row_list });
+    loadTemplateData_Create({ data, content_group_row_list, backgroundList }) {
+      this.$refs.createCanvas.loadTemplateData_CreateCanvas({ data, content_group_row_list, backgroundList });
     },
     /**
      * 插入模板数据
      * @param {Object} param
      * @param {Object} param.row_list - 模板组件列表
      * @param {Array} param.content_group_row_list - 内容分组行列表
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    insertTemplateData_Create({ row_list, content_group_row_list }) {
-      this.$refs.createCanvas.insertTemplateData_CreateCanvas({ row_list, content_group_row_list });
+    insertTemplateData_Create({ row_list, content_group_row_list, backgroundList }) {
+      this.$refs.createCanvas.insertTemplateData_CreateCanvas({ row_list, content_group_row_list, backgroundList });
     },
     /**
      * 获取教材统一标题样式列表

src/views/book/courseware/preview/components/article/Voicefullscreen.vue

@@ -655,6 +655,7 @@ export default {
     Wordcard,
     Notecard,
   },
+  inject: ['convertText'],
   props: [
     'sentList',
     'sentIndex',
@@ -672,7 +673,6 @@ export default {
     'attrib',
     'isMobile',
   ],
-  inject: ['convertText'],
   data() {
     return {
       pySize: 32,

src/views/personal_workbench/edit_task/edit/UseTemplate.vue

@@ -369,11 +369,18 @@ export default {
         this.$message.warning('请选择模板课件');
         return;
       }
+      const backgroundList = this.component_list.map(({ background, component_id }) => {
+        return {
+          background,
+          component_id,
+        };
+      });
       this.$emit('useTemplate', {
         data: this.data,
         background: this.background,
         content_group_row_list: this.data_content_group_row_list,
         temporaryCoursewareID: this.curSelectId,
+        backgroundList,
       });
       this.dialogClose();
     },
@@ -385,11 +392,20 @@ export default {
         this.$message.warning('请选择模板课件');
         return;
       }
+      const backgroundList = this.component_list.map(({ background, component_id }) => {
+        return {
+          background,
+          component_id,
+        };
+      });
+
       this.$emit('insertTemplate', {
         row_list: this.data.row_list,
         content_group_row_list: this.data_content_group_row_list,
         temporaryCoursewareID: this.curSelectId,
+        backgroundList,
       });
+
       this.dialogClose();
     },
     /**

src/views/personal_workbench/edit_task/edit/index.vue

@@ -326,9 +326,10 @@ export default {
      * @param {Object} param.background - 模板背景数据
      * @param {Array} param.content_group_row_list - 内容分组行列表
      * @param {string} param.temporaryCoursewareID - 临时课件ID
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    handleUseTemplate({ data, background, content_group_row_list, temporaryCoursewareID }) {
-      this.$refs.create.loadTemplateData_Create({ data, content_group_row_list });
+    handleUseTemplate({ data, background, content_group_row_list, temporaryCoursewareID, backgroundList }) {
+      this.$refs.create.loadTemplateData_Create({ data, content_group_row_list, backgroundList });
       if (background) {
         SaveCoursewareBackground({ id: this.id, background: JSON.stringify(background) }).then(() => {});
       }
@@ -341,9 +342,10 @@ export default {
      * @param {Object} param.row_list - 模板组件列表
      * @param {Array} param.content_group_row_list - 内容分组行列表
      * @param {string} param.temporaryCoursewareID - 临时课件ID
+     * @param {Array} param.backgroundList - 组件背景列表
      */
-    handleInsertTemplate({ row_list, content_group_row_list, temporaryCoursewareID }) {
-      this.$refs.create.insertTemplateData_Create({ row_list, content_group_row_list });
+    handleInsertTemplate({ row_list, content_group_row_list, temporaryCoursewareID, backgroundList }) {
+      this.$refs.create.insertTemplateData_Create({ row_list, content_group_row_list, backgroundList });
       this.temporaryCoursewareID = temporaryCoursewareID;
       this.visibleTemplate = false;
     },

src/views/personal_workbench/project/ProductionEditorialManage.vue

@@ -734,7 +734,7 @@ export default {
 
   main {
     row-gap: 0;
-    min-width: 1800px;
+    min-width: 1820px;
     text-align: left;
 
     .chapters-container {
@@ -752,7 +752,7 @@ export default {
       }
 
       &:nth-child(3) {
-        width: 108px;
+        width: 118px;
       }
 
       &:nth-child(4) {
@@ -768,7 +768,7 @@ export default {
       }
 
       &:nth-child(7) {
-        width: 175px;
+        width: 185px;
       }
 
       &:last-child {