From e71e7ffd8e83b73184b58bbedd70b032584fc360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=B2=85?= <907037276@qq.com>
Date: Sat, 5 Sep 2026 12:16:35 +0800
Subject: [PATCH] fix: preserve native student preview layout

---
 .../teacherEnd/score/TaskReviewPanel.vue      | 20 ++++++++++---------
 .../taskReview/StudentTaskReadonlyPreview.vue | 12 -----------
 tests/task-review-preview.test.mjs            | 11 +++++-----
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/src/views/teacherEnd/score/TaskReviewPanel.vue b/src/views/teacherEnd/score/TaskReviewPanel.vue
index 12f7c12..9509bda 100644
--- a/src/views/teacherEnd/score/TaskReviewPanel.vue
+++ b/src/views/teacherEnd/score/TaskReviewPanel.vue
@@ -75,14 +75,15 @@
             <span>老师评分 <strong>{{ formatScore(selectedStudent.teacherScore) }}</strong></span>
           </div>
         </header>
-        <iframe
-          v-if="studentPreviewSrc"
-          :key="studentPreviewSrc"
-          class="task-review__student-preview"
-          :src="studentPreviewSrc"
-          scrolling="yes"
-          title="学生任务页面只读预览"
-        />
+        <div v-if="studentPreviewSrc" class="task-review__student-preview-scroll">
+          <iframe
+            :key="studentPreviewSrc"
+            class="task-review__student-preview"
+            :src="studentPreviewSrc"
+            scrolling="yes"
+            title="学生任务页面只读预览"
+          />
+        </div>
         <el-empty v-else :description="studentPreviewError || '当前任务暂不支持页面预览'" :image-size="104" />
       </template>
       <el-empty v-else description="请选择教学班和实训任务后查看学生任务步骤" :image-size="128" />
@@ -292,7 +293,8 @@ onBeforeUnmount(() => clearTrainingReviewPreview(previewKey.value));
 .task-review__scores { display: flex; gap: 10px; color: #b9d9eb; font-size: 13px; white-space: nowrap; }
 .task-review__scores span { padding: 7px 10px; border: 1px solid rgba(50, 166, 223, 0.28); border-radius: 999px; background: rgba(2, 26, 43, 0.68); }
 .task-review__scores strong { margin-left: 5px; color: #77d9ff; font-size: 17px; }
-.task-review__student-preview { display: block; width: 100%; height: calc(100vh - 260px); min-height: 580px; margin-top: 22px; overflow: auto; border: 1px solid rgba(54, 159, 212, 0.32); border-radius: 10px; background: #061724; }
+.task-review__student-preview-scroll { height: calc(100vh - 260px); min-height: 580px; margin-top: 22px; overflow: auto; border: 1px solid rgba(54, 159, 212, 0.32); border-radius: 10px; }
+.task-review__student-preview { display: block; width: 100%; min-width: 1280px; height: 100%; min-height: 580px; border: 0; }
 .task-review__batch-copy { margin: 0 0 18px; color: #dff6ff; }
 .task-review__batch-input { width: 100%; }
 :deep(.task-review__selected-row > td) { background: rgba(0, 111, 177, 0.26) !important; }
diff --git a/src/views/teacherEnd/taskReview/StudentTaskReadonlyPreview.vue b/src/views/teacherEnd/taskReview/StudentTaskReadonlyPreview.vue
index 7633acd..d24e41a 100644
--- a/src/views/teacherEnd/taskReview/StudentTaskReadonlyPreview.vue
+++ b/src/views/teacherEnd/taskReview/StudentTaskReadonlyPreview.vue
@@ -59,15 +59,3 @@ function isStepNavigation(element) {
   return /(上一步|下一步|第\s*\d+\s*步|切换.*步骤|步骤.*切换)/.test(text);
 }
 </script>
-
-<style lang="scss" scoped>
-:global(html), :global(body) { overflow-y: scroll; scrollbar-gutter: stable; background: #061724; scrollbar-color: #238db8 #061724; }
-:global(html::-webkit-scrollbar) { width: 12px; }
-:global(html::-webkit-scrollbar-track) { background: #061724; }
-:global(html::-webkit-scrollbar-thumb) { border: 2px solid #061724; border-radius: 8px; background: #238db8; }
-.student-task-readonly-preview { min-height: 100vh; overflow: visible; pointer-events: auto; }
-.student-task-readonly-preview :deep(input),
-.student-task-readonly-preview :deep(textarea),
-.student-task-readonly-preview :deep(select),
-.student-task-readonly-preview :deep([contenteditable='true']) { pointer-events: none; }
-</style>
diff --git a/tests/task-review-preview.test.mjs b/tests/task-review-preview.test.mjs
index 034ee34..f4388f7 100644
--- a/tests/task-review-preview.test.mjs
+++ b/tests/task-review-preview.test.mjs
@@ -43,18 +43,18 @@ assert.match(router, /path:\s*"\/task-review-preview"[\s\S]*?hidden:\s*true/);
 assert.match(previewShell, /@click\.capture="guardPreviewInteraction"/);
 assert.match(previewShell, /function guardPreviewInteraction/);
 assert.match(previewShell, /getAttribute\("aria-label"\)/);
-assert.match(previewShell, /pointer-events:\s*auto/);
-assert.match(previewShell, /overflow-y:\s*scroll/);
-assert.match(previewShell, /scrollbar-gutter:\s*stable/);
-assert.match(previewShell, /scrollbar-color:\s*#238db8\s+#061724/);
+assert.doesNotMatch(previewShell, /:global\(html\)|:global\(body\)/, "预览壳不得改写学生页面的全局样式");
+assert.doesNotMatch(previewShell, /pointer-events\s*:/, "预览壳不得用样式禁用学生页面控件");
 assert.match(reviewPanel, /writeTrainingReviewPreview/);
 assert.match(reviewPanel, /listClassTrainingTasks\(filters\.value\.classId/);
 assert.match(reviewPanel, /find\(\(task\) => task\.taskKey === taskKey\)/);
 assert.match(reviewPanel, /taskConfig:\s*effectiveTask/);
 assert.match(reviewPanel, /previewRequestVersion/);
 assert.match(reviewPanel, /studentPreviewError/);
+assert.match(reviewPanel, /class="task-review__student-preview-scroll"/);
 assert.match(reviewPanel, /<iframe[^>]+studentPreviewSrc/);
 assert.match(reviewPanel, /scrolling="yes"/);
+assert.match(reviewPanel, /min-width:\s*1280px/, "嵌入学生页面应保留桌面端视口，窄区域改为滚动查看");
 assert.match(reviewPanel, /grid-template-columns: minmax\(360px, 400px\) minmax\(0, 1fr\)/);
 assert.match(reviewPanel, /class="task-review__student-table"/);
 assert.match(reviewPanel, /type="selection" width="38"/);
@@ -62,8 +62,7 @@ assert.match(reviewPanel, /prop="name" label="姓名" width="74"/);
 assert.match(reviewPanel, /prop="username" label="学号" width="88"/);
 assert.match(reviewPanel, /label="AI评分" width="66"/);
 assert.match(reviewPanel, /label="老师评分" width="94"/);
-assert.match(reviewPanel, /background:\s*#061724/);
-assert.doesNotMatch(reviewPanel, /task-review__student-preview[^}]*background:\s*#fff/);
+assert.doesNotMatch(reviewPanel, /task-review__student-preview\s*\{[^}]*background:/, "嵌入框不得覆盖学生页面底色");
 assert.doesNotMatch(reviewPanel, /<el-collapse[\s\S]*?formatAnswer/);
 
 console.log("task review preview context blocks student-answer writes");