From f6f7a0c3af3ad45eba5d6fe44996ad002eb27e0f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 3 Nov 2026 16:52:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=9C=8B=E6=9D=BF=E5=A8=98):=20=E6=8A=8A?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E5=A8=98=E6=8B=96=E5=88=B0=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E6=97=B6=EF=BC=8C=E6=88=90=E5=B0=B1=E5=BC=B9=E6=A1=86?=
 =?UTF-8?q?=E4=BC=9A=E5=8E=8B=E5=9C=A8=E5=A5=B9=E5=A4=B4=E4=B8=8A=EF=BC=8C?=
 =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E5=BC=B9=E6=A1=86=E8=AE=A9=E5=88=B0=E5=A5=B9?=
 =?UTF-8?q?=E5=B7=A6=E8=BE=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>
---
 .../shared/components/AchievementToast.vue    | 25 +++++++++++++++++--
 apps/web/src/shared/components/Mascot.vue     |  7 +++++-
 apps/web/src/shared/mascot/guide.ts           |  8 ++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/shared/components/AchievementToast.vue b/apps/web/src/shared/components/AchievementToast.vue
index 12ebb52..dd41917 100644
--- a/apps/web/src/shared/components/AchievementToast.vue
+++ b/apps/web/src/shared/components/AchievementToast.vue
@@ -1,11 +1,32 @@
 <script setup lang="ts">
 import AchievementIcon from 'shared/components/AchievementIcon.vue'
+import { mascotBox } from 'shared/mascot/guide'
 import { useAchievementStore } from 'shared/store/achievement'
 import { RARITY_COLOR } from 'utils/constants'
 
 const store = useAchievementStore()
 const { current, queue } = storeToRefs(store)
 const visible = ref(false)
+const toastEl = ref<HTMLElement>()
+
+const RIGHT = 24
+const TOP = 72
+const GAP = 12
+
+/**
+ * 默认在右上角。看板娘被拖到和它重叠的地方（多半是右上角）时，挪到她左边 ——
+ * 补发成就时一次会连着弹好几个，一直压在她头上不好看。尺寸按弹出来以后量到的算，
+ * 还没量到时按最小宽度和大致高度估。
+ */
+const placement = computed(() => {
+  if (!mascotBox.shown || !visible.value) return {}
+  const vw = document.documentElement.clientWidth
+  const width = toastEl.value?.offsetWidth ?? 300
+  const height = toastEl.value?.offsetHeight ?? 90
+  const left = vw - RIGHT - width
+  const overlaps = mascotBox.x < vw - RIGHT && mascotBox.x + mascotBox.width > left && mascotBox.y < TOP + height && mascotBox.y + mascotBox.height > TOP
+  return overlaps ? { right: `${vw - mascotBox.x + GAP}px` } : {}
+})
 
 let timer: ReturnType<typeof setTimeout> | null = null
 let gapTimer: ReturnType<typeof setTimeout> | null = null
@@ -37,7 +58,7 @@ onUnmounted(() => {
 
 <template>
   <Transition name="slide">
-    <div v-if="visible && current" class="toast" :style="{ borderColor: RARITY_COLOR[current.rarity] }">
+    <div v-if="visible && current" ref="toastEl" class="toast" :style="{ borderColor: RARITY_COLOR[current.rarity], ...placement }">
       <div class="icon">
         <AchievementIcon :icon="current.icon" :size="34" />
       </div>
@@ -56,7 +77,7 @@ onUnmounted(() => {
 .toast {
   position: fixed;
   /* 右上角、顶栏下面。原来在右下角，题目页上正好和结果、点评弹窗叠在一起 */
-  right: 24px;
+  right: 24px; /* 和脚本里的 RIGHT / TOP 一致 */
   top: 72px;
   z-index: 3000;
   display: flex;
diff --git a/apps/web/src/shared/components/Mascot.vue b/apps/web/src/shared/components/Mascot.vue
index 1e24299..23ecefe 100644
--- a/apps/web/src/shared/components/Mascot.vue
+++ b/apps/web/src/shared/components/Mascot.vue
@@ -23,7 +23,7 @@ import { TIME_ZONE_OFFSET_MINUTES } from '@oj2/contract'
 import imageUrl from 'shared/assets/mascot/whale.webp'
 import patUrl from 'shared/assets/mascot/whale-pat.gif'
 import { MASCOT_LINES, type MascotSituation } from 'shared/mascot/lines'
-import { currentMascotGuide, fillLine, type MascotAction, type MascotGuide } from 'shared/mascot/guide'
+import { currentMascotGuide, fillLine, mascotBox, type MascotAction, type MascotGuide } from 'shared/mascot/guide'
 import { logMascotEvent, notePoke, personalize, refreshMascotProfile, speechRequest } from 'shared/mascot/behavior'
 import { useAuthModalStore } from 'shared/store/authModal'
 import { useCollabStore } from 'shared/store/collab'
@@ -352,10 +352,15 @@ watch(silent, (quiet) => quiet && close())
 /** 她靠上时气泡往下冒，免得顶出屏幕；在左半边时气泡贴左对齐 */
 const bubbleBelow = computed(() => pos.y < 220)
 
+// 告诉别的浮层她在哪（成就弹框会让开）
+watchEffect(() => Object.assign(mascotBox, { x: pos.x, y: pos.y, width: WIDTH, height: HEIGHT }))
+
 onMounted(() => {
   window.addEventListener('resize', settle, { passive: true })
+  mascotBox.shown = true
 })
 onBeforeUnmount(() => {
+  mascotBox.shown = false
   window.removeEventListener('resize', settle)
   clearTimeout(patTimer)
   clearTimeout(quietTimer)
diff --git a/apps/web/src/shared/mascot/guide.ts b/apps/web/src/shared/mascot/guide.ts
index 641c007..3e3fc1b 100644
--- a/apps/web/src/shared/mascot/guide.ts
+++ b/apps/web/src/shared/mascot/guide.ts
@@ -81,3 +81,11 @@ export function randomProblemAction(router: Router): MascotAction {
 export function goAction(router: Router, label: string, to: string): MascotAction {
   return { label, run: () => router.push(to) }
 }
+
+// ---- 别的浮层要让开她 ----
+
+/**
+ * 看板娘现在占的地方（视口坐标，拖动中也跟着变）。不在页面上（手机、没挂载）时 shown 为 false。
+ * 成就弹框靠它让开：学生把她拖进右上角时，弹框正好压在她头上。
+ */
+export const mascotBox = reactive({ shown: false, x: 0, y: 0, width: 0, height: 0 })