预览优化

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

@@ -885,6 +885,7 @@ export default {
   flex-direction: column;
   row-gap: $component-spacing;
   width: 100%;
+  max-width: $courseware-width;
   height: 100%;
   min-height: calc(100vh - 106px);
   padding-top: $courseware-top-padding;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="operation">
+  <div ref="operation" class="operation" :class="{ 'is-wrapped': isWrapped }">
     <!-- 重做 -->
     <div v-show="permissionControl.can_answer" class="button retry" @click="retry()"></div>
     <!-- 判断对错 -->
@@ -34,14 +34,54 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      isWrapped: false, // 操作按钮是否换行
+      resizeObserver: null, // 监听操作按钮容器尺寸变化的 ResizeObserver 实例
+    };
   },
   computed: {
     permissionControl() {
       return this.getPermissionControl();
     },
   },
+  mounted() {
+    this.updateWrapState();
+    if (window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateWrapState();
+      });
+      this.resizeObserver.observe(this.$refs.operation);
+    }
+  },
+  updated() {
+    this.updateWrapState();
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  },
   methods: {
+    updateWrapState() {
+      this.$nextTick(() => {
+        const container = this.$refs.operation;
+        if (!container) {
+          this.isWrapped = false;
+          return;
+        }
+
+        const visibleButtons = Array.from(container.children).filter((el) => el.offsetParent !== null); // 获取所有可见的按钮元素
+        if (visibleButtons.length <= 1) {
+          this.isWrapped = false;
+          return;
+        }
+
+        const firstLineTop = visibleButtons[0].offsetTop; // 获取第一行按钮的 offsetTop
+        // 如果有按钮的 offsetTop 与第一行按钮的 offsetTop 不同，说明换行了
+        this.isWrapped = visibleButtons.some((el) => Math.abs(el.offsetTop - firstLineTop) > 1);
+      });
+    },
     showAnswerAnalysis() {
       this.$emit('showAnswerAnalysis');
     },
@@ -59,20 +99,22 @@ export default {
 <style lang="scss" scoped>
 .operation {
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
   justify-content: flex-end;
-  height: 40px;
   margin-top: 8px;
 
+  &.is-wrapped {
+    justify-content: flex-start;
+  }
+
   .button {
     width: 90px;
     height: 40px;
     cursor: pointer;
     border-radius: 5px;
 
-    & + .button {
-      margin-left: 24px;
-    }
-
     &.retry {
       background: url('@/assets/component/component-retry.png') no-repeat center;
     }