From 1d231c6cc3273e33cc4701a26d4dc4557a29a34b Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:21:35 +0800
Subject: [PATCH] =?UTF-8?q?fix(mobile):=20=E4=BF=AE=E5=A4=8D=20UsersView?=
 =?UTF-8?q?=20=E6=9B=B4=E5=A4=9A=E8=8F=9C=E5=8D=95=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=B9=B6=E7=BB=9F=E4=B8=80=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**问题描述**：
- UsersView 的"更多"菜单仍然出现在页面左上角错误位置
- UsersView 使用 actionButtonRefs Map 获取按钮元素，导致定位失败
- UsersView 和 AccountsView 的菜单定位逻辑不一致，难以维护

**解决方案**：
- 修改 openActionMenu 函数签名，添加 MouseEvent 参数
- 使用 e.currentTarget 直接从事件对象获取触发元素
- 移除不必要的 actionButtonRefs Map 和 setActionButtonRef 函数
- 统一菜单宽度为 200px（与 AccountsView 一致）
- 完全复制 AccountsView 的定位逻辑，确保两者行为一致

**技术要点**：
- 移动端：菜单居中对齐按钮，优先显示在按钮下方
- 桌面端：使用鼠标位置定位，添加边界检测
- 简化代码，移除不必要的防御性检查
- 两个组件的菜单定位逻辑完全一致，便于维护
---
 frontend/src/views/admin/UsersView.vue | 81 +++++++++++++-------------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 4a8dba30..4ce839f1 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -372,8 +372,7 @@
 
               <!-- More Actions Menu Trigger -->
               <button
-                :ref="(el) => setActionButtonRef(row.id, el)"
-                @click="openActionMenu(row)"
+                @click="openActionMenu(row, $event)"
                 class="action-menu-trigger flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-dark-700 dark:hover:text-white"
                 :class="{ 'bg-gray-100 text-gray-900 dark:bg-dark-700 dark:text-white': activeMenuId === row.id }"
               >
@@ -485,7 +484,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { formatDateTime } from '@/utils/format'
@@ -745,56 +744,56 @@ let abortController: AbortController | null = null
 // Action Menu State
 const activeMenuId = ref<number | null>(null)
 const menuPosition = ref<{ top: number; left: number } | null>(null)
-const actionButtonRefs = ref<Map<number, HTMLElement>>(new Map())
 
-const setActionButtonRef = (userId: number, el: Element | ComponentPublicInstance | null) => {
-  if (el instanceof HTMLElement) {
-    actionButtonRefs.value.set(userId, el)
-  } else {
-    actionButtonRefs.value.delete(userId)
-  }
-}
-
-const openActionMenu = (user: User) => {
+const openActionMenu = (user: User, e: MouseEvent) => {
   if (activeMenuId.value === user.id) {
     closeActionMenu()
   } else {
-    const buttonEl = actionButtonRefs.value.get(user.id)
-    if (buttonEl) {
-      const rect = buttonEl.getBoundingClientRect()
-      const menuWidth = 192
-      const menuHeight = 240
-      const padding = 8
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
+    const target = e.currentTarget as HTMLElement
+    if (!target) {
+      closeActionMenu()
+      return
+    }
 
-      let left, top
+    const rect = target.getBoundingClientRect()
+    const menuWidth = 200
+    const menuHeight = 240
+    const padding = 8
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
 
-      if (viewportWidth < 768) {
-        left = Math.max(padding, Math.min(
-          rect.left + rect.width / 2 - menuWidth / 2,
-          viewportWidth - menuWidth - padding
-        ))
+    let left, top
+
+    if (viewportWidth < 768) {
+      // 居中显示,水平位置
+      left = Math.max(padding, Math.min(
+        rect.left + rect.width / 2 - menuWidth / 2,
+        viewportWidth - menuWidth - padding
+      ))
+
+      // 优先显示在按钮下方
+      top = rect.bottom + 4
+
+      // 如果下方空间不够,显示在上方
+      if (top + menuHeight > viewportHeight - padding) {
         top = rect.top - menuHeight - 4
+        // 如果上方也不够,就贴在视口顶部
         if (top < padding) {
-          top = rect.bottom + 4
-        }
-      } else {
-        left = Math.min(
-          Math.max(rect.right - menuWidth, padding),
-          Math.max(viewportWidth - menuWidth - padding, padding)
-        )
-        top = rect.bottom + 4
-        if (top + menuHeight > viewportHeight - padding) {
-          top = Math.max(rect.top - menuHeight - 4, padding)
+          top = padding
         }
       }
-
-      menuPosition.value = {
-        top,
-        left
+    } else {
+      left = Math.max(padding, Math.min(
+        e.clientX - menuWidth,
+        viewportWidth - menuWidth - padding
+      ))
+      top = e.clientY
+      if (top + menuHeight > viewportHeight - padding) {
+        top = viewportHeight - menuHeight - padding
       }
     }
+
+    menuPosition.value = { top, left }
     activeMenuId.value = user.id
   }
 }