预览操作按钮位置和高度问题

src/styles/mixin.scss

@@ -41,6 +41,7 @@
 @mixin preview-base {
   display: grid;
   gap: 6px;
+  max-width: $courseware-width;
 
   :deep .rich-text {
     @include rich-text;

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

@@ -250,6 +250,12 @@ export default {
       }
       return arr;
     },
+
+    /**
+     * 计算列的样式
+     * @param {Object} col 列对象
+     * @returns {Object} 列的样式对象
+     */
     computedColStyle(col) {
       const grid = col.grid_list;
 
@@ -318,14 +324,52 @@ export default {
         if (!gridMap.has(item.row)) {
           gridMap.set(item.row, []);
         }
-        gridMap.get(item.row).push(item.height);
+        gridMap.get(item.row).push({ height: item.height, id: item.id });
       });
+
       gridMap.forEach((value) => {
         if (value.length === 1) {
-          gridTemplateRows += `${value[0]} `;
+          const component = this.$refs.preview?.find(
+            (child) => child.$el && child.$el.dataset && child.$el.dataset.id === value[0].id,
+          );
+
+          const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
+          let height = hasOperation ? `${Number(value[0].height.replace('px', '')) + 48}px` : value[0].height;
+
+          gridTemplateRows += `${height} `;
         } else {
-          let isAllAuto = value.every((item) => item === 'auto'); // 是否全是 auto
-          gridTemplateRows += isAllAuto ? 'auto ' : `max(${value.join(', ')}) `;
+          let isAllAuto = value.every((item) => item.height === 'auto'); // 是否全是 auto
+          if (!isAllAuto) {
+            // 判断 value 中height 最大的组件是那个，不包括 auto 的组件
+            let maxHeight = 0;
+            let maxId = '';
+            value.forEach((item) => {
+              if (item.height !== 'auto') {
+                const heightNum = Number(item.height.replace('px', ''));
+                if (heightNum > maxHeight) {
+                  maxHeight = heightNum;
+                  maxId = item.id;
+                }
+              }
+            });
+            // 判断最高组件是否有操作按钮
+            const component = this.$refs.preview?.find(
+              (child) => child.$el && child.$el.dataset && child.$el.dataset.id === maxId,
+            );
+            const hasOperation = component && component.$el.querySelector('.operation') !== null; // 判断是否有操作按钮
+            if (hasOperation) {
+              maxHeight += 48;
+            }
+            // 将 maxId 的 height 设置为 maxHeight
+            value.forEach((item) => {
+              if (item.id === maxId) {
+                item.height = `${maxHeight}px`;
+              }
+            });
+          }
+          gridTemplateRows += isAllAuto
+            ? 'auto '
+            : `${Math.max(...value.map((item) => Number(item.height.replace('px', ''))))}px `;
         }
       });
 
@@ -347,7 +391,7 @@ export default {
       const projectCover = this.project?.cover_image_file_url || '';
 
       // 优先在空行时使用背景图或项目封面
-      const backgroundImage = hasNoRows ? bcImgUrl || projectCover : '';
+      const backgroundImage = hasNoRows ? bcImgUrl || projectCover : bcImgUrl;
 
       // 保护性读取位置/大小值，避免 undefined 导致字符串 "undefined%"
       const widthPct = typeof pos.width === 'undefined' ? '' : pos.width;
@@ -391,7 +435,7 @@ export default {
         this.menuPosition.select_node,
         this.menuPosition.x,
         this.menuPosition.y,
-        this.componentId
+        this.componentId,
       );
     },
     handleMouseDown(event) {
@@ -650,7 +694,7 @@ export default {
         const searchStart = Math.max(0, cumulativeLength - selectedText.length * 3);
         const searchEnd = Math.min(
           fullText.length,
-          cumulativeLength + closestFragment.text.length + selectedText.length * 3
+          cumulativeLength + closestFragment.text.length + selectedText.length * 3,
         );
 
         const searchArea = fullText.substring(searchStart, searchEnd);

src/views/book/courseware/preview/common/PreviewOperation.vue

@@ -38,6 +38,7 @@ export default {
 .operation {
   display: flex;
   justify-content: flex-end;
+  height: 40px;
   margin-top: 8px;
 
   .button {

src/views/book/courseware/preview/components/sort/SortPreview.vue

@@ -39,9 +39,9 @@
           </transition-group>
         </draggable>
       </ul>
+      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
     </div>
 
-    <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
     <AnswerCorrect
       :answer-correct="data?.answer_correct"
       :visible.sync="visibleAnswerCorrect"

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -222,7 +222,7 @@
           </tr>
         </table>
       </div>
-      <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
+      <PreviewOperation v-if="isHasInput" @showAnswerAnalysis="showAnswerAnalysis" @retry="retry" />
       <AnswerCorrect
         :answer-correct="data?.answer_correct"
         :visible.sync="visibleAnswerCorrect"
@@ -505,6 +505,7 @@ export default {
       selectedWordList: [], // 用于存储选中的词汇
       writeVisible: false,
       writeMark: '',
+      isHasInput: false,
     };
   },
   computed: {
@@ -556,6 +557,7 @@ export default {
   methods: {
     handleData() {
       this.table_width = 0;
+      this.isHasInput = false;
       this.data.col_width.forEach((item) => {
         this.table_width += Number(item.value);
       });
@@ -576,6 +578,15 @@ export default {
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = this.data.answer_lists;
       }
+      this.data.option_list.forEach((item) => {
+        item.forEach((items) => {
+          items.model_essay.forEach((li) => {
+            if (li.type === 'input') {
+              this.isHasInput = true;
+            }
+          });
+        });
+      });
     },
     computedAnswerText(item, i, j) {
       if (!this.isShowRightAnswer) return '';