From 7881431fa9ee2ef22a759dbcbb677b678c0ec131 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 14 Oct 2026 11:58:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=82=B9=E8=AF=84):=20=E5=81=9A=E5=AF=B9?=
 =?UTF-8?q?=E4=B9=8B=E5=90=8E=E7=82=B9=E5=AE=8C=E8=BD=AE=E7=9B=98=E4=B8=8D?=
 =?UTF-8?q?=E5=86=8D=E4=B8=80=E9=97=AA=E5=B0=B1=E6=B2=A1=EF=BC=9A=E5=85=88?=
 =?UTF-8?q?=E5=81=9C=202.5=20=E7=A7=92=E7=BB=99=E4=BD=A0=E7=9C=8B=E5=A4=A7?=
 =?UTF-8?q?=E5=AE=B6=E6=98=AF=E6=80=8E=E4=B9=88=E9=80=89=E7=9A=84=EF=BC=8C?=
 =?UTF-8?q?=E5=86=8D=E8=87=AA=E5=B7=B1=E5=85=B3=EF=BC=9B=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=8C=AA=E5=88=B0=E8=BD=AE=E7=9B=98=E6=AD=A3=E4=B8=8B=E6=96=B9?=
 =?UTF-8?q?=E5=B1=85=E4=B8=AD=EF=BC=8C=E5=BA=95=E8=BE=B9=E4=B8=80=E6=9D=A1?=
 =?UTF-8?q?=E7=BA=BF=E7=BC=A9=E5=AE=8C=E5=B0=B1=E5=85=B3=EF=BC=8C=E6=80=A5?=
 =?UTF-8?q?=E7=9D=80=E8=B5=B0=E5=8F=AF=E4=BB=A5=E7=9B=B4=E6=8E=A5=E7=82=B9?=
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>
---
 .../oj/problem/components/ProblemReaction.vue |  2 +-
 .../problem/components/SubmissionEffects.vue  | 69 ++++++++++++++++---
 ...2026-09-28-problem-page-redesign-design.md |  6 +-
 3 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/oj/problem/components/ProblemReaction.vue b/apps/web/src/oj/problem/components/ProblemReaction.vue
index f0febb2..55db22c 100644
--- a/apps/web/src/oj/problem/components/ProblemReaction.vue
+++ b/apps/web/src/oj/problem/components/ProblemReaction.vue
@@ -270,7 +270,7 @@ function sectorAriaLabel(index: number) {
     aria-label="题目点评"
   >
     <p v-if="choosable" class="hint">
-      选一块最接近的，<b>每道题只能评一次</b>{{ guard ? "" : "。选完就能看到大家是怎么选的" }}
+      选一块最接近的，<b>每道题只能评一次</b>。选完就能看到大家是怎么选的
     </p>
 
     <div
diff --git a/apps/web/src/oj/problem/components/SubmissionEffects.vue b/apps/web/src/oj/problem/components/SubmissionEffects.vue
index fda9a36..eb766ce 100644
--- a/apps/web/src/oj/problem/components/SubmissionEffects.vue
+++ b/apps/web/src/oj/problem/components/SubmissionEffects.vue
@@ -40,6 +40,8 @@ const { celebrate } = useFireworks()
 // 下去，点评就跳过了。所以这段时间里欠着一次点评（reviewOwed），离开这道题的导航
 // 先拦下来：立刻弹点评，选完再去原来要去的地方。
 const commentPanel = ref(false)
+/** 选完了、弹窗正停着给他看大家怎么选的 */
+const reviewed = ref(false)
 const reviewOwed = ref(false)
 let reviewChecking = false
 let navigationAfterReview: string | null = null
@@ -53,6 +55,7 @@ async function openReview() {
   try {
     const res = await getReaction(problem.value!.id)
     if (res.mine === null) {
+      reviewed.value = false
       commentPanel.value = true
       return
     }
@@ -74,6 +77,7 @@ function settleReview() {
 }
 
 function closeCommentPanel() {
+  stopLingering()
   commentPanel.value = false
   // 「下一题」在结果页签里（LessonNext），评价完回到那里 —— 学生点评之前可能切去看了题目。
   // 接着要换题的就别切：切页签会 router.replace 改 `?tab=`，排在下面那次 push 前头，
@@ -83,7 +87,8 @@ function closeCommentPanel() {
 }
 
 /**
- * 选完一块就关（点一次就够，大家怎么选的在抽屉里的「点评」能看）。
+ * 选完一块不用再点：就地变成玫瑰图，停 2.5 秒给他看一眼大家怎么选的，然后自己关。
+ * 这段时间里按钮已经出来了，急着走的直接点。
  * 关掉之后去哪：刚才点「下一题」之类被拦下的，就接着去那里；否则回到结果页签。
  *
  * 读不出点评、交点评失败时弹窗关不掉，下面那个按钮是唯一出口：被拦下的写「继续」，
@@ -106,6 +111,17 @@ const continueAction = computed(() => {
   return { label: "好的", target: null }
 })
 
+/** 选完停多久；按钮底边那条线按同一个时长缩完 */
+const LINGER_MS = 2500
+const { start: lingerThenClose, stop: stopLingering } = useTimeoutFn(closeCommentPanel, LINGER_MS, {
+  immediate: false,
+})
+
+function onReviewed() {
+  reviewed.value = true
+  lingerThenClose()
+}
+
 function continueAfterReview() {
   const target = continueAction.value.target
   if (target && !navigationAfterReview) navigationAfterReview = target
@@ -160,6 +176,7 @@ watch(
   (next, previous) => {
     if (!previous || next === previous) return
     commentPanel.value = false
+    stopLingering()
     cancelCommentPanel()
     reviewOwed.value = false
     navigationAfterReview = null
@@ -243,21 +260,57 @@ watch(
   <n-modal
     v-model:show="commentPanel"
     preset="card"
-    title="做对了！说说你对这道题的感受吧"
+    :title="reviewed ? '大家是这样觉得的' : '做对了！说说你对这道题的感受吧'"
     :mask-closable="false"
     :closable="false"
     :close-on-esc="false"
     :auto-focus="false"
     style="width: min(600px, calc(100vw - 32px))"
   >
-    <ProblemReaction guard @submitted="closeCommentPanel">
+    <ProblemReaction guard @submitted="onReviewed">
       <template #after>
-        <n-flex justify="end">
-          <n-button type="primary" @click="continueAfterReview">
-            {{ continueAction.label }}
-          </n-button>
-        </n-flex>
+        <!-- 在轮盘正下方居中，和轮盘一条中线；停着的那几秒底边一条线缩完就自己关 -->
+        <n-button
+          type="primary"
+          size="large"
+          class="continue"
+          :class="{ lingering: reviewed }"
+          :style="{ '--linger': `${LINGER_MS}ms` }"
+          @click="continueAfterReview"
+        >
+          {{ continueAction.label }}
+        </n-button>
       </template>
     </ProblemReaction>
   </n-modal>
 </template>
+
+<style scoped>
+.continue {
+  display: flex;
+  width: min(100%, 320px);
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.continue.lingering::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.7);
+  transform-origin: left;
+  animation: linger var(--linger) linear forwards;
+}
+
+@keyframes linger {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+</style>
diff --git a/docs/specs/2026-09-28-problem-page-redesign-design.md b/docs/specs/2026-09-28-problem-page-redesign-design.md
index fea2f48..013c968 100644
--- a/docs/specs/2026-09-28-problem-page-redesign-design.md
+++ b/docs/specs/2026-09-28-problem-page-redesign-design.md
@@ -221,8 +221,10 @@ B 看得到。
 - 防误触：弹出后 600ms 内轮盘半透明、点不了；强制弹窗里不响应 Enter / 空格（键盘触发的
   click 的 `detail` 是 0），扇区不进 Tab 顺序；弹窗 `auto-focus` 关掉，不预选任何一块。
   抽屉里的是学生自己点开的，不设防、键盘能选。
-- 选完不马上关：弹窗里换成横条图，下面只有一个按钮、焦点落在它上面 —— 被拦下的换题写「继续」，
-  否则是这节课的「下一题：题号 题目」，都没有就是「好的」。
+- 选完不用再点：标题换成「大家是这样觉得的」，就地变成玫瑰图停 2.5 秒，然后自己关。轮盘正下方
+  居中一个按钮，停着的时候底边一条线缩完就关，急着走的直接点 —— 被拦下的换题写「继续」，
+  否则是这节课的「下一题：题号 题目」，都没有就是「好的」。（2026-10-12 改过一版点一块就关，
+  学生看不到结果；2026-10-14 改成现在这样。）
 - **窗口期内换题要先点评**：通过后 1.5 秒内点「下一题」、课堂条芯片、‹ ›、顶栏题号直达，
   先立刻弹出点评，选完再跳。**现在线上可以被跳过**（`SubmitCode.vue` 换题时 `cancelCommentPanel()`）。
 - 查询或提交点评的接口出错时不能把学生卡住：查询失败就不弹；提交失败留在弹窗里提示「没记上，再点一次」。