From b51b2597a8a52fab5d1a5eff09c930899a959f81 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Tue, 11 Aug 2026 11:21:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(personalization):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=8B=96=E9=80=89=E6=96=87=E5=AD=97=E6=9D=BE=E5=BC=80=E8=90=BD?=
 =?UTF-8?q?=E5=9C=A8=E9=81=AE=E7=BD=A9=E4=B8=8A=E8=AF=AF=E5=85=B3=E6=8A=BD?=
 =?UTF-8?q?=E5=B1=89=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 个人空间抽屉与角色编辑弹窗的遮罩关闭由 click.self/mousedown.self
  改为「按下与松开都发生在遮罩上」的成对判定
- 修复在输入框内拖选文字、松开落在遮罩上时被误判为点击遮罩，
  导致抽屉/角色编辑器意外关闭、表单内容丢失
---
 .../personalization/PersonalizationDrawer.vue | 28 ++++++++++++++++---
 static/src/stores/personalization.ts          | 26 +++++++++++------
 2 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index 36432bac..db44b0a2 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -4,11 +4,11 @@
       class="personal-page-overlay"
       v-if="visible"
       @click="closeDropdown"
-      @mousedown.self="personalization.handleOverlayPressStart($event)"
-      @mouseup.self="personalization.handleOverlayPressEnd"
+      @mousedown="personalization.handleOverlayPressStart($event)"
+      @mouseup="personalization.handleOverlayPressEnd($event)"
       @mouseleave.self="personalization.handleOverlayPressCancel"
       @touchstart.self.prevent="personalization.handleOverlayPressStart($event)"
-      @touchend.self.prevent="personalization.handleOverlayPressEnd"
+      @touchend="personalization.handleOverlayPressEnd($event)"
       @touchcancel.self="personalization.handleOverlayPressCancel"
     >
       <div class="personal-page-card settings-redesign-card" data-tutorial="personal-card">
@@ -1861,7 +1861,8 @@
                           v-if="roleEditorOpen"
                           class="role-editor-drawer-overlay"
                           @click="closeDropdown"
-                          @click.self="closeRoleEditor"
+                          @mousedown="handleRoleEditorOverlayPressStart"
+                          @mouseup="handleRoleEditorOverlayPressEnd"
                         >
                           <div class="role-editor-drawer-card settings-redesign-card" style="padding: 30px 42px 24px; border-radius: 32px;" @click.stop>
                             <div class="role-editor-header">
@@ -2866,6 +2867,25 @@ const closeRoleEditor = () => {
   closeDropdown();
 };
 
+// 角色编辑弹窗遮罩：按下与松开都发生在遮罩上才视为「点击遮罩关闭」。
+// 修复：在输入框内拖选文字、松开落在遮罩上时，click 事件 target 为遮罩，
+// 会被 @click.self 误判为点击遮罩，导致整个编辑器关闭、表单内容丢失。
+const roleEditorOverlayPressActive = ref(false);
+
+const handleRoleEditorOverlayPressStart = (event: MouseEvent) => {
+  roleEditorOverlayPressActive.value =
+    event.target === event.currentTarget && event.button === 0;
+};
+
+const handleRoleEditorOverlayPressEnd = (event: MouseEvent) => {
+  const shouldClose =
+    roleEditorOverlayPressActive.value && event.target === event.currentTarget;
+  roleEditorOverlayPressActive.value = false;
+  if (shouldClose) {
+    closeRoleEditor();
+  }
+};
+
 const saveRole = async () => {
   roleSaving.value = true;
   try {
diff --git a/static/src/stores/personalization.ts b/static/src/stores/personalization.ts
index 6cd69719..bb23dc69 100644
--- a/static/src/stores/personalization.ts
+++ b/static/src/stores/personalization.ts
@@ -347,19 +347,29 @@ export const usePersonalizationStore = defineStore('personalization', {
       this.overlayPressActive = false;
     },
     handleOverlayPressStart(event: Event) {
-      if (event && (event as MouseEvent).type === 'mousedown') {
-        const mouse = event as MouseEvent;
-        if (mouse.button !== 0) {
-          return;
-        }
+      // 只有直接按在遮罩上才算有效按压；按在卡片内部（如输入框）时重置状态，
+      // 避免「按下遮罩→拖入卡片松开」遗留的卡死状态导致后续遮罩 mouseup 误关抽屉
+      if (event.target !== event.currentTarget) {
+        this.overlayPressActive = false;
+        return;
+      }
+      if (event.type === 'mousedown' && (event as MouseEvent).button !== 0) {
+        return;
       }
       this.overlayPressActive = true;
     },
-    handleOverlayPressEnd() {
-      if (!this.overlayPressActive) {
+    handleOverlayPressEnd(event: Event) {
+      // 按下与松开都发生在遮罩上才关闭；输入框内拖选文字、松开落在遮罩上时
+      // target 虽为遮罩，但按压并未起始于遮罩，不会关闭
+      const shouldClose =
+        this.overlayPressActive && event.target === event.currentTarget;
+      this.overlayPressActive = false;
+      if (!shouldClose) {
         return;
       }
-      this.overlayPressActive = false;
+      if (event.cancelable) {
+        event.preventDefault();
+      }
       this.closeDrawer();
     },
     handleOverlayPressCancel() {