From d6e891cdb087c5a1e18273f8bacca9575d03a603 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 27 Oct 2026 14:53:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E8=AF=B4=E6=98=8E=EF=BC=9A?=
 =?UTF-8?q?=E6=88=AA=E5=9B=BE=E7=82=B9=E5=87=BB=E5=90=8E=E5=9C=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=8A=E6=94=BE=E5=A4=A7=EF=BC=88=E6=8C=89=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3=E5=A4=A7=E5=B0=8F=EF=BC=8C=E6=9C=80=E5=A4=9A=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=202=20=E5=80=8D=EF=BC=89=EF=BC=8C=E7=82=B9=E4=BB=BB?=
 =?UTF-8?q?=E6=84=8F=E5=A4=84=E6=88=96=E6=8C=89=20Esc=20=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/pages/HelpPage.vue | 84 +++++++++++++++++++++++++++++++-------
 1 file changed, 70 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/HelpPage.vue b/web/src/pages/HelpPage.vue
index f7b3e38..d6dce32 100644
--- a/web/src/pages/HelpPage.vue
+++ b/web/src/pages/HelpPage.vue
@@ -1,7 +1,29 @@
 <script setup lang="ts">
 // 使用说明：学生部分谁都能看（登录页也有入口），老师登录后多出老师部分。从各页顶栏在新标签页打开，不打断正在做的事。
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import { currentUser } from '../auth'
+
+/** 点截图在页面上放大看，点任意处或按 Esc 关闭 */
+const zoomed = ref<{ src: string; caption: string } | null>(null)
+
+function zoom(event: MouseEvent) {
+  const link = event.currentTarget as HTMLAnchorElement
+  zoomed.value = { src: link.href, caption: link.closest('figure')?.querySelector('figcaption')?.textContent ?? '' }
+}
+
+/** 按窗口大小放大到放得下，小截图最多放大 2 倍（再大就糊了） */
+function fit(event: Event) {
+  const img = event.target as HTMLImageElement
+  const scale = Math.min(2, (window.innerWidth - 32) / img.naturalWidth, (window.innerHeight - 72) / img.naturalHeight)
+  img.style.width = `${Math.round(img.naturalWidth * scale)}px`
+}
+
+function onKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') zoomed.value = null
+}
+onMounted(() => window.addEventListener('keydown', onKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
 </script>
 
 <template>
@@ -36,15 +58,15 @@ import { currentUser } from '../auth'
           </li>
         </ul>
         <figure class="shot">
-          <a href="/help-img/assignments.webp" target="_blank" title="点击看原图"><img src="/help-img/assignments.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/assignments.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/assignments.webp" alt="" loading="lazy" /></a>
           <figcaption>我的作业：点作业名开始做，右边是提交状态和得分</figcaption>
         </figure>
         <figure class="shot">
-          <a href="/help-img/overview.webp" target="_blank" title="点击看原图"><img src="/help-img/overview.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/overview.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/overview.webp" alt="" loading="lazy" /></a>
           <figcaption>实验页：左边是设计器和代码，右边是运行区（学生程序的窗体）和虚拟实训台</figcaption>
         </figure>
         <figure class="shot">
-          <a href="/help-img/task.webp" target="_blank" title="点击看原图"><img src="/help-img/task.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/task.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/task.webp" alt="" loading="lazy" /></a>
           <figcaption>任务面板：任务目标、控件名、实现步骤</figcaption>
         </figure>
 
@@ -62,7 +84,7 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/designer.webp" target="_blank" title="点击看原图"><img src="/help-img/designer.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/designer.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/designer.webp" alt="" loading="lazy" /></a>
           <figcaption>窗体设计器：左边工具箱，中间窗体，右边属性和事件（这里选中了"打开"按钮，它的单击事件是 btn_open_Click）</figcaption>
         </figure>
 
@@ -77,7 +99,7 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/error.webp" target="_blank" title="点击看原图"><img src="/help-img/error.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/error.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/error.webp" alt="" loading="lazy" /></a>
           <figcaption>运行出错：窗体下面用中文说明原因和出错的行，点它跳到代码</figcaption>
         </figure>
 
@@ -94,7 +116,7 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/board.webp" target="_blank" title="点击看原图"><img src="/help-img/board.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/board.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/board.webp" alt="" loading="lazy" /></a>
           <figcaption>虚拟实训台：程序打开了照明灯 2（ADAM-4150 DO1）；拖滑块调温湿度、光照，点卡片切换传感器</figcaption>
         </figure>
 
@@ -109,11 +131,11 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/check.webp" target="_blank" title="点击看原图"><img src="/help-img/check.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/check.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/check.webp" alt="" loading="lazy" /></a>
           <figcaption>任务面板最下面的"自己检查"：逐项显示通过没有</figcaption>
         </figure>
         <figure class="shot">
-          <a href="/help-img/result.webp" target="_blank" title="点击看原图"><img src="/help-img/result.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/result.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/result.webp" alt="" loading="lazy" /></a>
           <figcaption>提交后点工具栏上的分数看评分结果</figcaption>
         </figure>
 
@@ -125,7 +147,7 @@ import { currentUser } from '../auth'
           <li>点<b>← 返回实验</b>回到刚才做的实验。</li>
         </ul>
         <figure class="shot">
-          <a href="/help-img/db.webp" target="_blank" title="点击看原图"><img src="/help-img/db.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/db.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/db.webp" alt="" loading="lazy" /></a>
           <figcaption>数据库页面：左边是对象资源管理器，右边写 SQL、按 F5 执行，下面是结果</figcaption>
         </figure>
       </section>
@@ -144,7 +166,7 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/students.webp" target="_blank" title="点击看原图"><img src="/help-img/students.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/students.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/students.webp" alt="" loading="lazy" /></a>
           <figcaption>班级管理：导入名单后，用户名和密码都在这里，可以导出、重置密码</figcaption>
         </figure>
 
@@ -156,7 +178,7 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/assign.webp" target="_blank" title="点击看原图"><img src="/help-img/assign.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/assign.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/assign.webp" alt="" loading="lazy" /></a>
           <figcaption>布置作业：选实验和起点，自动评分项、任务说明、老师评分项都可以改</figcaption>
         </figure>
 
@@ -169,11 +191,11 @@ import { currentUser } from '../auth'
         </ul>
 
         <figure class="shot">
-          <a href="/help-img/review.webp" target="_blank" title="点击看原图"><img src="/help-img/review.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/review.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/review.webp" alt="" loading="lazy" /></a>
           <figcaption>评阅：左边是学生列表，中间看界面截图、运行程序、看代码，右边打分写评语</figcaption>
         </figure>
         <figure class="shot">
-          <a href="/help-img/grades.webp" target="_blank" title="点击看原图"><img src="/help-img/grades.webp" alt="" loading="lazy" /></a>
+          <a href="/help-img/grades.webp" title="点击放大" @click.prevent="zoom"><img src="/help-img/grades.webp" alt="" loading="lazy" /></a>
           <figcaption>成绩：全班 × 全部作业的总分，"待评"表示老师还没打分</figcaption>
         </figure>
 
@@ -204,6 +226,11 @@ import { currentUser } from '../auth'
         </dl>
       </section>
     </main>
+
+    <div v-if="zoomed" class="zoom" @click="zoomed = null">
+      <img :src="zoomed.src" alt="" @load="fit" />
+      <div class="zoom-caption">{{ zoomed.caption }}（点任意处或按 Esc 关闭）</div>
+    </div>
   </div>
 </template>
 
@@ -282,7 +309,7 @@ code {
   font-size: 13px;
 }
 
-/* 截图：按原尺寸显示，比正文宽时缩小；点击看原图 */
+/* 截图：按原尺寸显示，比正文宽时缩小；点击在页面上放大 */
 .shot {
   margin: 12px 0 16px;
 }
@@ -296,6 +323,35 @@ code {
   box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
 }
 
+.shot a {
+  cursor: zoom-in;
+}
+
+.zoom {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px;
+  background: rgb(0 0 0 / 0.88);
+  cursor: zoom-out;
+}
+
+.zoom img {
+  max-width: 100%;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.zoom-caption {
+  color: #fff;
+  font-size: 14px;
+}
+
 .shot figcaption {
   margin-top: 4px;
   font-size: 13px;