预览优化

.env

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

packages/package.json

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

src/components/CommonPreview.vue

@@ -129,7 +129,10 @@
         </div>
 
         <main :class="['preview-main', { 'no-audit': !isShowAudit }]" :style="computedCommonPreviewStyle">
-          <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
+          <div
+            class="preview-left"
+            :style="{ backgroundColor: previewContentColor || (background.background?.is_global ? '' : '#fff') }"
+          ></div>
           <CoursewarePreview
             v-if="courseware_info.book_name"
             ref="courseware"
@@ -147,6 +150,7 @@
             :component-remark-obj="remark_list_obj"
             :project="project"
             :type="type"
+            :previewContentColor="previewContentColor"
             @computeScroll="computeScroll"
             @addRemark="addRemark"
             @editNote="handEditNote"
@@ -156,7 +160,10 @@
             @selectedComponent="$emit('selectedComponent', $event)"
           />
 
-          <div class="preview-right" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
+          <div
+            class="preview-right"
+            :style="{ backgroundColor: previewContentColor || (background.background?.is_global ? '' : '#fff') }"
+          ></div>
         </main>
 
         <!-- 右侧菜单栏 - 收缩 -->
@@ -429,6 +436,10 @@
                 />
                 <span class="setting-item__value">{{ fontScalePercent }}%</span>
               </div>
+              <div class="setting-item">
+                <span class="setting-item__label">内容色</span>
+                <el-color-picker v-model="previewContentColor" show-alpha />
+              </div>
             </div>
           </div>
         </div>
@@ -713,6 +724,7 @@ export default {
       lang: 'ZH',
       chinese: 'zh-Hans', // 语言简体中文zh-Hans，繁体中文zh-Hant
       fontScalePercent: 100, // 预览字号缩放百分比（80-150）
+      previewContentColor: null,
       showPinYin: 'false',
       curSelectId: this.id,
       navigationShow: true,
@@ -772,7 +784,10 @@ export default {
       return '笔记';
     },
     computedCommonPreviewStyle() {
-      return buildCoursewareStyle(this.background, 'commonPreview');
+      return {
+        ...buildCoursewareStyle(this.background, 'commonPreview'),
+        ...(this.previewContentColor ? { backgroundColor: this.previewContentColor } : {}),
+      };
     },
     /**
      * 教材章节树实际展示的节点列表：过滤掉已收缩节点下的所有子节点
@@ -1055,6 +1070,7 @@ export default {
     selectNode(nodeId) {
       const requestController = this.createNodeRequestController();
       const requestConfig = { signal: requestController.signal };
+      if (this.select_node !== nodeId) this.previewContentColor = null;
       this.getCoursewareComponentContent_View(nodeId, requestConfig);
       this.getBookCoursewareInfo(nodeId, requestConfig);
       this.select_node = nodeId;
@@ -2068,6 +2084,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
 
       .name-path {
         min-width: 200px;
+        max-width: 560px;
         height: 40px;
         padding: 4px 8px;
         font-size: 14px;

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

@@ -124,6 +124,7 @@
       :row-list="data.row_list"
       @computedMoveData="computedMoveData"
       @handleHeightChange="handleHeightChange"
+      @selectedComponent="$emit('selectedComponent', $event)"
     />
   </main>
 </template>
@@ -495,6 +496,21 @@ export default {
         });
       });
     },
+    resetPreviewHeight(componentId) {
+      if (this.isEdit || !componentId) return false;
+
+      for (const row of this.data.row_list) {
+        for (const col of row.col_list) {
+          const grid = col.grid_list.find((item) => item.id === componentId);
+          if (grid) {
+            grid.height = 'auto';
+            return true;
+          }
+        }
+      }
+
+      return false;
+    },
     changeData() {
       this.$emit('changeData');
     },

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

@@ -0,0 +1,11 @@
+<template>
+  <div class="preview-setting">
+    <el-button type="primary" @click="$emit('resetPreviewHeight')">恢复高度为自适应</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewEditSetting',
+};
+</script>

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

@@ -26,6 +26,7 @@
         @changeData="changeData"
         @back="back"
         @changeEditStatus="changeEditStatus"
+        @selectedComponent="handlePreviewSelected"
       />
 
       <span v-if="showBackTop" class="back-top" @click="scrollMiddleToTop">
@@ -35,8 +36,10 @@
 
     <div class="create-right">
       <div class="setting-tittle">设置</div>
+      <PreviewEditSetting v-if="!isEdit && previewSelectedId" @resetPreviewHeight="resetPreviewHeight" />
       <component
         :is="componentSettingList[curSettingType]"
+        v-else
         ref="setting"
         @addAnswerAndAnalysis="addAnswerAndAnalysis"
       />
@@ -51,6 +54,7 @@ import { bookTypeOption, componentSettingList } from '../data/bookType';
 import { GetTitleStyle } from '@/api/book';
 
 import CreateCanvas from './components/CreateCanvas.vue';
+import PreviewEditSetting from './components/PreviewEditSetting.vue';
 import SelectBackground from './components/SelectBackground.vue';
 import WarnSave from './components/WarnSave.vue';
 
@@ -58,6 +62,7 @@ export default {
   name: 'CreatePage',
   components: {
     CreateCanvas,
+    PreviewEditSetting,
     SelectBackground,
     WarnSave,
   },
@@ -88,6 +93,7 @@ export default {
       showBackTop: false,
       copyData: null,
       title_style_list: [],
+      previewSelectedId: '',
     };
   },
   created() {
@@ -160,6 +166,13 @@ export default {
      */
     changeEditStatus() {
       this.isEdit = !this.isEdit;
+      this.previewSelectedId = '';
+    },
+    handlePreviewSelected({ component_id }) {
+      this.previewSelectedId = component_id;
+    },
+    resetPreviewHeight() {
+      this.$refs.createCanvas.resetPreviewHeight(this.previewSelectedId);
     },
     /**
      * 保存课件内容

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

@@ -255,6 +255,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    previewContentColor: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -292,7 +296,10 @@ export default {
   computed: {
     // 计算课件背景样式
     computedCoursewareStyle() {
-      return buildCoursewareStyle(this.background, 'courseware');
+      return {
+        ...buildCoursewareStyle(this.background, 'courseware'),
+        ...(this.previewContentColor ? { backgroundColor: this.previewContentColor } : {}),
+      };
     },
   },
   watch: {

src/views/book/courseware/preview/components/audio/AudioPreview.vue

@@ -96,7 +96,6 @@ import { getAudioData } from '@/views/book/courseware/data/audio';
 
 import PreviewMixin from '../common/PreviewMixin';
 import AudioPlay from '../common/AudioPlay.vue';
-import { getRandomNumber } from '@/utils';
 
 export default {
   name: 'AudioPreview',

src/views/book/courseware/preview/components/common/AudioPlay.vue

@@ -323,7 +323,8 @@ export default {
   .audio-big {
     display: flex;
     flex-direction: column;
-    padding: 12px 0;
+    padding: 0;
+    overflow: hidden;
     text-align: center;
 
     .audio-name {

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1096,8 +1096,8 @@
                           flex: !data.col_width[4].value || data.col_width[4].value === '0' ? '1' : '',
                         }"
                       >
-                        <span v-if="sItem.collocation" class="collocation"
-                          ><b
+                        <span v-if="sItem.collocation" class="collocation">
+                          <b
                             :style="{
                               fontSize:
                                 data.unified_attrib && data.unified_attrib.font_size
@@ -1527,7 +1527,6 @@ import { getNewWordData } from '@/views/book/courseware/data/newWord';
 import PreviewMixin from '../common/PreviewMixin';
 import SoundRecord from '../../common/SoundRecord.vue';
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
-import { GetFileURLMap } from '@/api/app';
 import WordPhraseDetail from './components/WordPhraseDetail.vue';
 import AudioPlay from './components/AudioPlay.vue';
 import Strockplay from './components/Strockplay.vue';
@@ -1602,7 +1601,7 @@ export default {
   computed: {
     voiceTop() {
       let height = 0;
-      if (this.data.property.pinyin_position && this.data.property.pinyin_position == 'top') {
+      if (this.data.property.pinyin_position && this.data.property.pinyin_position === 'top') {
         height = 24;
         if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
           height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (18 * 3) / 4) / 2;
@@ -1617,7 +1616,7 @@ export default {
     },
     tabNumTop() {
       let height = 0;
-      if (this.data.property.pinyin_position && this.data.property.pinyin_position == 'top') {
+      if (this.data.property.pinyin_position && this.data.property.pinyin_position === 'top') {
         height = 24;
         if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
           height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (10 * 3) / 4) / 2;
@@ -1632,48 +1631,43 @@ export default {
     },
   },
   watch: {
+    newData(val) {
+      if (val && val !== this.data) {
+        this.data = val;
+      }
+    },
     data: {
       handler(val, oldVal) {
-        if (val !== oldVal) {
-          if (
-            (val &&
-              val.new_word_list[0].new_word &&
-              oldVal &&
-              oldVal.new_word_list[0].new_word &&
-              val.new_word_list[0].new_word !== oldVal.new_word_list[0].new_word) ||
-            (val && val.new_word_list[0].new_word && !oldVal) ||
-            (val && val.hasOwnProperty('unified_attrib') && oldVal && !oldVal.hasOwnProperty('unified_attrib'))
-          ) {
-            // this.wordShow = isEnable(this.data.property.is_word_show);
-            this.initData();
-            this.$nextTick(() => {
-              setTimeout(() => {
-                let totalWidth = document.querySelector('.newWord-preview').clientWidth;
-                this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0) - 1}`;
-                this.rowWidth = 0;
-                this.data.col_width.forEach((item, index) => {
-                  if (
-                    this.data.property.pinyin_position &&
-                    (this.data.property.pinyin_position == 'top' || this.data.property.pinyin_position == 'bottom')
-                  ) {
-                    if (index < 2) {
-                      this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
-                    } else {
-                      this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
-                    }
+        if (val && val !== oldVal && val.new_word_list && val.new_word_list.length > 0) {
+          // this.wordShow = isEnable(this.data.property.is_word_show);
+          this.initData();
+          this.$nextTick(() => {
+            setTimeout(() => {
+              let totalWidth = document.querySelector('.newWord-preview').clientWidth;
+              this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0) - 1}`;
+              this.rowWidth = 0;
+              this.data.col_width.forEach((item, index) => {
+                if (
+                  this.data.property.pinyin_position &&
+                  (this.data.property.pinyin_position === 'top' || this.data.property.pinyin_position === 'bottom')
+                ) {
+                  if (index < 2) {
+                    this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
                   } else {
                     this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
                   }
-                });
-                this.rowWidth += 132;
-                if (this.rowWidth < this.width - 2) {
-                  this.rowWidth = this.width - 2;
+                } else {
+                  this.rowWidth += this.colHasContent[index] ? Number(item.value) : 0;
                 }
-              }, 50);
-            });
+              });
+              this.rowWidth += 132;
+              if (this.rowWidth < this.width - 2) {
+                this.rowWidth = this.width - 2;
+              }
+            }, 50);
+          });
 
-            this.dataHeight = this.$refs.previewContainer ? this.$refs.previewContainer.style.height : 0;
-          }
+          this.dataHeight = this.$refs.previewContainer ? this.$refs.previewContainer.style.height : 0;
         }
       },
       deep: true,
@@ -1707,7 +1701,7 @@ export default {
         this.data.col_width.forEach((item, index) => {
           if (
             this.data.property.pinyin_position &&
-            (this.data.property.pinyin_position == 'top' || this.data.property.pinyin_position == 'bottom')
+            (this.data.property.pinyin_position === 'top' || this.data.property.pinyin_position === 'bottom')
           ) {
             if (index < 2) {
               this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
@@ -1734,7 +1728,7 @@ export default {
       this.data.col_width.forEach((item, index) => {
         if (
           this.data.property.pinyin_position &&
-          (this.data.property.pinyin_position == 'top' || this.data.property.pinyin_position == 'bottom')
+          (this.data.property.pinyin_position === 'top' || this.data.property.pinyin_position === 'bottom')
         ) {
           if (index < 2) {
             this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);

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

@@ -420,13 +420,14 @@ export default {
     .courseware {
       .name-path {
         min-width: 100px;
+        max-width: 270px;
         font-size: 14px;
       }
 
       .switch {
+        flex: 1;
         min-width: 200px;
         padding: 4px 16px 4px 0;
-        margin-right: 300px;
         border-right: $border;
 
         .link {